diff --git a/Selectbox.js b/Selectbox.js index 3f041ab..636f5f6 100644 --- a/Selectbox.js +++ b/Selectbox.js @@ -38,6 +38,8 @@ export default class Selectbox extends React.PureComponent placeholder: PropTypes.string, // minimum suggestion list width in pixels minWidth: PropTypes.number, + // change theme (CSS module) for this input + theme: PropTypes.object, // additional CSS class name for the input className: PropTypes.string, // additional CSS styles for the input @@ -196,6 +198,7 @@ export default class Selectbox extends React.PureComponent renderInput = (p) => { + const theme = this.props.theme || autocomplete_css; const value = this.state.query == null ? (this.props.multiple ? '' : this.item_hash[this.props.value]||'') : this.state.query; @@ -204,7 +207,7 @@ export default class Selectbox extends React.PureComponent disabled={this.props.disabled} placeholder={!this.props.multiple || !this.props.value || !this.props.value.length ? this.props.placeholder : undefined} ref={this.setInput} - className={autocomplete_css.inputElement} + className={theme.inputElement} style={this.props.multiple ? { width: this.state.inputWidth+'px' } : undefined} onFocus={this.onFocus} onBlur={this.onBlur} @@ -213,24 +216,24 @@ export default class Selectbox extends React.PureComponent onKeyDown={this.onKeyDown} />; return (
{this.props.multiple - ?
- + ?
+ {this.props.multiple && (!this.props.value || !this.props.value.length) && value === '' ? (this.props.placeholder || '') : value} - {(this.props.value||[]).map((id, idx) => + {(this.props.value||[]).map((id, idx) => {this.props.allowClear && !this.props.disabled - ? + ? : null} {this.item_hash[id]} )} @@ -238,7 +241,7 @@ export default class Selectbox extends React.PureComponent
: input} {this.props.allowClear && !this.props.multiple && this.props.value != null - ?
+ ?
: null}
); } @@ -266,11 +269,12 @@ export default class Selectbox extends React.PureComponent renderSuggestions = () => { + const theme = this.props.theme || autocomplete_css; return (
{this.filtered_items.map((e, i) => (
+ className={theme.suggestion+(this.state.active == i ? ' '+theme.active : '')}> {e[this.props.labelKey||'name']}
))} {this.props.suggestionMsg}