vitalif-js
/
selectbox
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Allow to change theme

master
Vitaliy Filippov 2019-09-03 11:44:49 +03:00
parent fc5e75fab8
commit e08adccc60
1 changed files with 17 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
Selectbox.js
View File

@ -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 (<div ref={p.ref}
className={autocomplete_css.input +
(p.focused ? ' '+(autocomplete_css.focused||'') : '') +
(this.props.disabled ? ' '+(autocomplete_css.disabled||'') : '') +
className={theme.input +
(p.focused ? ' '+(theme.focused||'') : '') +
(this.props.disabled ? ' '+(theme.disabled||'') : '') +
(this.props.multiple
? ' '+(autocomplete_css.multiple||'')
: (this.props.allowClear ? ' '+(autocomplete_css.withClear||'') : '')) +
? ' '+(theme.multiple||'')
: (this.props.allowClear ? ' '+(theme.withClear||'') : '')) +
(this.props.className ? ' '+this.props.className : '')}
style={this.props.style}
onClick={this.focusInput}>
{this.props.multiple
? <div className={autocomplete_css.values}>
<span className={autocomplete_css.inputElement+' '+autocomplete_css.sizer} ref={this.setSizer}>
? <div className={theme.values}>
<span className={theme.inputElement+' '+theme.sizer} ref={this.setSizer}>
{this.props.multiple && (!this.props.value || !this.props.value.length) && value === ''
? (this.props.placeholder || '') : value}
</span>
{(this.props.value||[]).map((id, idx) => <span className={autocomplete_css.value} key={idx}>
{(this.props.value||[]).map((id, idx) => <span className={theme.value} key={idx}>
{this.props.allowClear && !this.props.disabled
? <span data-n={idx} className={autocomplete_css.clearValue} onClick={this.removeValue}></span>
? <span data-n={idx} className={theme.clearValue} onClick={this.removeValue}></span>
: null}
{this.item_hash[id]}
</span>)}
@ -238,7 +241,7 @@ export default class Selectbox extends React.PureComponent
</div>
: input}
{this.props.allowClear && !this.props.multiple && this.props.value != null
? <div className={autocomplete_css.clear} onClick={this.clear}></div>
? <div className={theme.clear} onClick={this.clear}></div>
: null}
</div>);
}
@ -266,11 +269,12 @@ export default class Selectbox extends React.PureComponent
renderSuggestions = () =>
{
const theme = this.props.theme || autocomplete_css;
return (<div ref={this.animateSuggestions}
className={autocomplete_css.suggestions}
className={theme.suggestions}
onMouseOver={this.onMouseOver}>
{this.filtered_items.map((e, i) => (<div key={i} id={i} onMouseDown={this.onMouseDown}
className={autocomplete_css.suggestion+(this.state.active == i ? ' '+autocomplete_css.active : '')}>
className={theme.suggestion+(this.state.active == i ? ' '+theme.active : '')}>
{e[this.props.labelKey||'name']}
</div>))}
{this.props.suggestionMsg}