diff --git a/CHANGELOG.md b/CHANGELOG.md index d56081d1..c7c13113 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,6 @@ +### v4.0.0 +* FIX (ssr) [#66]: incompatible with SSR closes #66 [View](https://github.com/sanusart/react-dropdown-select/commit/e1a882dae3a298a75ad9cc6b6c11810a48a8cae8) + ### v3.12.0 * FEATURE (events) [#70]: Remove selected option on key press of backspace button, closes #70 (#71) [View](https://github.com/sanusart/react-dropdown-select/commit/30a2aee405af2981eaa3aeb2a246f1d46f3647af) diff --git a/package-lock.json b/package-lock.json index 923d0b20..0f541a64 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "react-dropdown-select", - "version": "3.12.0", + "version": "4.0.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index e6a053ec..76353207 100644 --- a/package.json +++ b/package.json @@ -1,10 +1,11 @@ { "name": "react-dropdown-select", - "version": "3.12.0", + "version": "4.0.0", "description": "Customizable dropdown select for react", "main": "dist/react-dropdown-select.js", "module": "lib/index.js", "types": "types.d.ts", + "sideEffects": false, "files": [ "dist", "lib", @@ -30,11 +31,11 @@ "bundlesize": [ { "path": "./dist/react-dropdown-select.js", - "maxSize": "15 kB" + "maxSize": "20 kB" }, { "path": "./lib/index.js", - "maxSize": "15 kB" + "maxSize": "20 kB" } ], "keywords": [ @@ -114,7 +115,6 @@ "!coverage/**" ] }, - "sideEffects": false, "browserslist": [ "last 2 versions", "not dead", diff --git a/src/components/Dropdown.js b/src/components/Dropdown.js index 902c2633..470cb955 100644 --- a/src/components/Dropdown.js +++ b/src/components/Dropdown.js @@ -5,7 +5,7 @@ import { LIB_NAME } from '../constants'; import NoData from '../components/NoData'; import Item from '../components/Item'; -import { valueExistInSelected, hexToRGBA } from '../util'; +import { valueExistInSelected, hexToRGBA, isomorphicWindow } from '../util'; const dropdownPosition = (props, methods) => { const DropdownBoundingClientRect = methods.getSelectRef().getBoundingClientRect(); @@ -16,7 +16,7 @@ const dropdownPosition = (props, methods) => { return props.dropdownPosition; } - if (dropdownHeight > window.innerHeight && dropdownHeight > DropdownBoundingClientRect.top) { + if (dropdownHeight > isomorphicWindow().innerHeight && dropdownHeight > DropdownBoundingClientRect.top) { return 'top'; } @@ -81,7 +81,7 @@ const DropDown = styled.div` dropdownPosition === 'top' ? `bottom: ${selectBounds.height + 2 + dropdownGap}px` : `top: ${selectBounds.height + 2 + dropdownGap}px`}; - + ${({ selectBounds, dropdownGap, portal }) => portal ? ` @@ -100,7 +100,7 @@ const DropDown = styled.div` max-height: ${({ dropdownHeight }) => dropdownHeight}; overflow: auto; z-index: 9; - + :focus { outline: none; } diff --git a/src/index.js b/src/index.js index f1f0da6b..d0c72149 100644 --- a/src/index.js +++ b/src/index.js @@ -11,7 +11,7 @@ import Clear from './components/Clear'; import Separator from './components/Separator'; import DropdownHandle from './components/DropdownHandle'; -import { debounce, hexToRGBA, isEqual, getByPath, getProp, valueExistInSelected } from './util'; +import { debounce, hexToRGBA, isEqual, getByPath, getProp, valueExistInSelected, isomorphicWindow } from './util'; import { LIB_NAME } from './constants'; export class Select extends Component { @@ -95,8 +95,8 @@ export class Select extends Component { componentDidMount() { this.props.portal && this.props.portal.appendChild(this.dropdownRoot); - window.addEventListener('resize', debounce(this.updateSelectBounds)); - window.addEventListener('scroll', debounce(this.onScroll)); + isomorphicWindow().addEventListener('resize', debounce(this.updateSelectBounds)); + isomorphicWindow().addEventListener('scroll', debounce(this.onScroll)); this.dropDown('close'); @@ -146,11 +146,11 @@ export class Select extends Component { componentWillUnmount() { this.props.portal && this.props.portal.removeChild(this.dropdownRoot); - window.removeEventListener( + isomorphicWindow().removeEventListener( 'resize', debounce(this.updateSelectBounds, this.props.debounceDelay) ); - window.removeEventListener('scroll', debounce(this.onScroll, this.props.debounceDelay)); + isomorphicWindow().removeEventListener('scroll', debounce(this.onScroll, this.props.debounceDelay)); } onDropdownClose = () => { diff --git a/src/util.js b/src/util.js index e836b968..edd61ca5 100644 --- a/src/util.js +++ b/src/util.js @@ -30,7 +30,7 @@ export const getByPath = (object, path) => { return; } - return path.split('.').reduce((acc, value) => acc[value], object) + return path.split('.').reduce((acc, value) => acc[value], object); }; export const getProp = (object, path, defaultValue) => { @@ -46,3 +46,11 @@ export const getProp = (object, path, defaultValue) => { return getProp(object[normalizedPath.shift()], normalizedPath, defaultValue); }; + +export const isomorphicWindow = () => { + if (typeof window == 'undefined') { + global.window = {}; + } + + return window; +}; diff --git a/webpack.config.js b/webpack.config.js index 16305c8b..398ed1ce 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,6 +1,5 @@ const path = require('path'); const webpack = require('webpack'); -const TerserPlugin = require('terser-webpack-plugin'); module.exports = { entry: path.join(__dirname, 'src/index.js'), @@ -9,28 +8,10 @@ module.exports = { filename: 'react-dropdown-select.js', library: 'reactDropdownSelect', libraryTarget: 'umd', + umdNamedDefine: true, + globalObject: 'this' }, - optimization: { - minimizer: [ - new TerserPlugin({ - parallel: true, - terserOptions: { - sourceMap: true, - compress: { - arguments: true, - drop_console: true, - unsafe_proto: true, - unsafe_methods: true, - unsafe_comps: true, - unsafe_arrows: true - }, - output: { - comments: false - }, - } - }), - ], - }, + target: 'node', // for support ssr in emotionjs externals: { react: { commonjs: 'react',