diff --git a/package.json b/package.json index 5f3a2de..7aa9fea 100644 --- a/package.json +++ b/package.json @@ -54,23 +54,24 @@ "babel-plugin-transform-imports": "1.5.1", "babel-plugin-transform-react-remove-prop-types": "0.4.20", "core-js": "2.5.7", + "debounce-promise": "^3.1.0", "eslint": "5.8.0", "eslint-config-airbnb": "17.1.0", "eslint-loader": "2.1.1", "eslint-plugin-import": "2.14.0", "eslint-plugin-jsx-a11y": "6.1.2", "eslint-plugin-react": "7.11.1", + "lodash.debounce": "^4.0.8", "prettier": "1.15.1", "prop-types": "^15.6.2", - "react-select": "^2.1.2", + "react": "^16.8.2", + "react-dom": "^16.8.2", + "react-select": "^2.4.1", "rollup": "^0.67.3", "rollup-plugin-babel": "^4.0.3", "rollup-plugin-commonjs": "^9.2.0", "rollup-plugin-node-resolve": "^3.4.0", "rollup-plugin-uglify": "^6.0.0" }, - "peerDependencies": { - "react": "^15.0.0 || ^16.0.0", - "react-dom": "^15.0.0 || ^16.0.0" - } + "peerDependencies": {} } diff --git a/packages/SelectTemplate/index.js b/packages/SelectTemplate/index.js index 0c2c09c..9bd4e0b 100644 --- a/packages/SelectTemplate/index.js +++ b/packages/SelectTemplate/index.js @@ -1,6 +1,8 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import Select from 'react-select'; +import AsyncSelect from 'react-select/lib/Async'; +import debounce from 'debounce-promise'; export default class SelectTemplate extends Component { static defaultProps = { @@ -17,7 +19,9 @@ export default class SelectTemplate extends Component { disabled: false, trackValue: false, noOptionsMessage: () => 'No data', - multi: false + multi: false, + async: false, + loadOptions: null }; static propTypes = { nameParams: PropTypes.string, @@ -34,7 +38,9 @@ export default class SelectTemplate extends Component { disabled: PropTypes.bool, creatable: PropTypes.bool, trackValue: PropTypes.bool, - multi: PropTypes.bool + multi: PropTypes.bool, + async: PropTypes.bool, + loadOptions: PropTypes.func }; constructor(props) { @@ -48,6 +54,9 @@ export default class SelectTemplate extends Component { value, isFetching: props.isFetching && (!props.options || !props.options.length) }; + this.debounceLoadOptions = props.async + ? debounce(props.loadOptions, 300) + : null; } componentDidMount() { @@ -89,6 +98,7 @@ export default class SelectTemplate extends Component { const { nameParams } = this.props; const { multi } = this.state; let newValue = value; + if (multi) { if (value && value.length) { newValue = value.map(el => { @@ -188,11 +198,17 @@ export default class SelectTemplate extends Component { onOpen: this.onOpenSelect, noOptionsMessage }; + if (this.props.async) { + delete props.value; + props.loadOptions = this.debounceLoadOptions; + } return ( <> {this.props.creatable ? ( + ) : this.props.async ? ( + ) : ( instead of setting `selected` on