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}
+ />
+