diff --git a/Selectbox.js b/Selectbox.js index 3f72dff..e576aea 100644 --- a/Selectbox.js +++ b/Selectbox.js @@ -1,5 +1,6 @@ // Simple Dropdown/Autocomplete with single/multiple selection and easy customisation via CSS modules // Version 2019-08-30 +// License: LGPLv3.0+ // (c) Vitaliy Filippov 2019+ import React from 'react'; @@ -17,7 +18,7 @@ export default class Selectbox extends React.PureComponent readOnly: PropTypes.bool, // show "clear" icon (cross) allowClear: PropTypes.bool, - // select/autocomplete options + // select/autocomplete options - either an array of objects, or a { [string]: string } object source: PropTypes.oneOfType([PropTypes.array, PropTypes.object]), // current value value: PropTypes.oneOfType([PropTypes.array, PropTypes.string, PropTypes.number]), @@ -27,15 +28,25 @@ export default class Selectbox extends React.PureComponent labelKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), // item id key - default "id" valueKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + // automatically filter autocomplete options based on user input if `true` suggestionMatch: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['disabled'])]), + // additional message to display below autocomplete options (arbitrary HTML, for example "...") suggestionMsg: PropTypes.any, + // disable the whole input disabled: PropTypes.bool, + // placeholder to display when the input is empty placeholder: PropTypes.string, + // minimum suggestion list width in pixels minWidth: PropTypes.number, + // additional CSS class name for the input className: PropTypes.string, + // additional CSS styles for the input style: PropTypes.object, + // additional event listener for onFocus onFocus: PropTypes.func, + // additional event listener for onBlur onBlur: PropTypes.func, + // additional event listener for user text input onQueryChange: PropTypes.func, } @@ -142,11 +153,18 @@ export default class Selectbox extends React.PureComponent focusInput = () => { - this.input.focus(); + if (!this.props.disabled) + { + this.input.focus(); + } } onFocus = () => { + if (this.props.disabled) + { + return; + } if (!this.props.multiple && this.state.active === null) { const v = this.props.value, vk = this.props.valueKey||'id'; @@ -182,7 +200,8 @@ export default class Selectbox extends React.PureComponent : this.state.query; const input = - {value} + {this.props.multiple && (!this.props.value || !this.props.value.length) && value === '' + ? (this.props.placeholder || '') : value} {(this.props.value||[]).map((id, idx) => - {this.props.allowClear + {this.props.allowClear && !this.props.disabled ? : null} {this.item_hash[id]} diff --git a/autocomplete.css b/autocomplete.css index caafa3f..0534d41 100644 --- a/autocomplete.css +++ b/autocomplete.css @@ -27,6 +27,11 @@ cursor: pointer; } +.input.disabled +{ + background: #f4f4f4; +} + .input.multiple { display: flex; @@ -65,6 +70,7 @@ .inputElement { + background: transparent; font-size: inherit; line-height: 200%; border: 0; @@ -81,6 +87,11 @@ display: none; } +.inputElement[disabled] +{ + background: transparent; +} + .multiple .inputElement { padding: 0; diff --git a/main.js b/main.js index 590e36e..9fa5513 100644 --- a/main.js +++ b/main.js @@ -34,6 +34,17 @@ class Test extends React.PureComponent source={OPTIONS} allowClear={true} multiple={true} + placeholder="Выберите значение" + suggestionMatch={true} + value={this.state.value} + style={{marginBottom: '20px'}} + onChange={this.onChange} + /> +