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, placeholder: PropTypes.string,
// minimum suggestion list width in pixels // minimum suggestion list width in pixels
minWidth: PropTypes.number, minWidth: PropTypes.number,
// change theme (CSS module) for this input
theme: PropTypes.object,
// additional CSS class name for the input // additional CSS class name for the input
className: PropTypes.string, className: PropTypes.string,
// additional CSS styles for the input // additional CSS styles for the input
@ -196,6 +198,7 @@ export default class Selectbox extends React.PureComponent
renderInput = (p) => renderInput = (p) =>
{ {
const theme = this.props.theme || autocomplete_css;
const value = this.state.query == null const value = this.state.query == null
? (this.props.multiple ? '' : this.item_hash[this.props.value]||'') ? (this.props.multiple ? '' : this.item_hash[this.props.value]||'')
: this.state.query; : this.state.query;
@ -204,7 +207,7 @@ export default class Selectbox extends React.PureComponent
disabled={this.props.disabled} disabled={this.props.disabled}
placeholder={!this.props.multiple || !this.props.value || !this.props.value.length ? this.props.placeholder : undefined} placeholder={!this.props.multiple || !this.props.value || !this.props.value.length ? this.props.placeholder : undefined}
ref={this.setInput} ref={this.setInput}
className={autocomplete_css.inputElement} className={theme.inputElement}
style={this.props.multiple ? { width: this.state.inputWidth+'px' } : undefined} style={this.props.multiple ? { width: this.state.inputWidth+'px' } : undefined}
onFocus={this.onFocus} onFocus={this.onFocus}
onBlur={this.onBlur} onBlur={this.onBlur}
@ -213,24 +216,24 @@ export default class Selectbox extends React.PureComponent
onKeyDown={this.onKeyDown} onKeyDown={this.onKeyDown}
/>; />;
return (<div ref={p.ref} return (<div ref={p.ref}
className={autocomplete_css.input + className={theme.input +
(p.focused ? ' '+(autocomplete_css.focused||'') : '') + (p.focused ? ' '+(theme.focused||'') : '') +
(this.props.disabled ? ' '+(autocomplete_css.disabled||'') : '') + (this.props.disabled ? ' '+(theme.disabled||'') : '') +
(this.props.multiple (this.props.multiple
? ' '+(autocomplete_css.multiple||'') ? ' '+(theme.multiple||'')
: (this.props.allowClear ? ' '+(autocomplete_css.withClear||'') : '')) + : (this.props.allowClear ? ' '+(theme.withClear||'') : '')) +
(this.props.className ? ' '+this.props.className : '')} (this.props.className ? ' '+this.props.className : '')}
style={this.props.style} style={this.props.style}
onClick={this.focusInput}> onClick={this.focusInput}>
{this.props.multiple {this.props.multiple
? <div className={autocomplete_css.values}> ? <div className={theme.values}>
<span className={autocomplete_css.inputElement+' '+autocomplete_css.sizer} ref={this.setSizer}> <span className={theme.inputElement+' '+theme.sizer} ref={this.setSizer}>
{this.props.multiple && (!this.props.value || !this.props.value.length) && value === '' {this.props.multiple && (!this.props.value || !this.props.value.length) && value === ''
? (this.props.placeholder || '') : value} ? (this.props.placeholder || '') : value}
</span> </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 {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} : null}
{this.item_hash[id]} {this.item_hash[id]}
</span>)} </span>)}
@ -238,7 +241,7 @@ export default class Selectbox extends React.PureComponent
</div> </div>
: input} : input}
{this.props.allowClear && !this.props.multiple && this.props.value != null {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} : null}
</div>); </div>);
} }
@ -266,11 +269,12 @@ export default class Selectbox extends React.PureComponent
renderSuggestions = () => renderSuggestions = () =>
{ {
const theme = this.props.theme || autocomplete_css;
return (<div ref={this.animateSuggestions} return (<div ref={this.animateSuggestions}
className={autocomplete_css.suggestions} className={theme.suggestions}
onMouseOver={this.onMouseOver}> onMouseOver={this.onMouseOver}>
{this.filtered_items.map((e, i) => (<div key={i} id={i} onMouseDown={this.onMouseDown} {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']} {e[this.props.labelKey||'name']}
</div>))} </div>))}
{this.props.suggestionMsg} {this.props.suggestionMsg}