parent
ecbfe34d47
commit
4f02b11197
|
@ -61,6 +61,7 @@ const factory = (Chip, Input) => {
|
|||
values: PropTypes.string,
|
||||
}),
|
||||
value: PropTypes.any,
|
||||
inputProps: PropTypes.object,
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
|
@ -121,7 +122,7 @@ const factory = (Chip, Input) => {
|
|||
|
||||
handleQueryChange = (value, event) => {
|
||||
if (value === '' && !this.props.multiple &&
|
||||
(this.props.allowBlank || this.props.allowClear) && this.props.onChange) {
|
||||
this.props.allowClear && this.props.onChange) {
|
||||
this.props.onChange(null, event);
|
||||
}
|
||||
this.updateQuery(value);
|
||||
|
@ -379,30 +380,30 @@ const factory = (Chip, Input) => {
|
|||
|
||||
render() {
|
||||
const {
|
||||
allowClear, clearTooltip, error, label, source, suggestionMatch, query, // eslint-disable-line no-unused-vars
|
||||
selectedPosition, keepFocusOnChange, onQueryChange, // eslint-disable-line no-unused-vars
|
||||
theme, multiple, minWidth, ...other
|
||||
placeholder, allowClear, className, clearTooltip, disabled,
|
||||
error, label, value, selectedPosition, theme, multiple
|
||||
} = this.props;
|
||||
// outdated properties
|
||||
delete other.showSelectedWhenNotInSource;
|
||||
delete other.allowCreate;
|
||||
const className = classnames(theme.autocomplete, {
|
||||
const inputProps = this.props.inputProps || {};
|
||||
const outerClassName = classnames(theme.autocomplete, {
|
||||
[theme.focus]: this.state.focus,
|
||||
}, this.props.className);
|
||||
|
||||
const withClear = allowClear && (this.props.multiple ? this.props.value && Object.keys(this.props.value).length > 0 : this.props.value != null);
|
||||
}, className);
|
||||
const withClear = allowClear && (multiple
|
||||
? value && Object.keys(value).length > 0
|
||||
: value != null);
|
||||
return (
|
||||
<div data-react-toolbox="autocomplete" className={className}>
|
||||
<div data-react-toolbox="autocomplete" className={outerClassName}>
|
||||
{selectedPosition === 'above' ? this.renderSelected() : null}
|
||||
{withClear ? <span
|
||||
className={'material-icons '+theme.clear}
|
||||
title={clearTooltip}
|
||||
onClick={e => this.handleChange(multiple ? [] : null, e)}>clear</span> : null}
|
||||
<Input
|
||||
{...other}
|
||||
{...inputProps}
|
||||
ref={(node) => { this.inputNode = node; }}
|
||||
autoComplete="off"
|
||||
className={theme.input+(withClear ? ' '+theme.withclear : '')}
|
||||
placeholder={placeholder}
|
||||
disabled={disabled}
|
||||
error={error}
|
||||
label={label}
|
||||
onBlur={this.handleQueryBlur}
|
||||
|
@ -413,15 +414,15 @@ const factory = (Chip, Input) => {
|
|||
theme={theme}
|
||||
themeNamespace="input"
|
||||
value={this.state.query == null
|
||||
? (this.props.multiple || this.props.value == null
|
||||
? (multiple || value == null
|
||||
? ''
|
||||
: this.source().get(''+this.props.value))
|
||||
: this.source().get(''+value))
|
||||
: this.state.query}
|
||||
/>
|
||||
<Portal>
|
||||
{this.state.focus ? this.renderSuggestionList() : null}
|
||||
</Portal>
|
||||
{this.props.selectedPosition === 'below' ? this.renderSelected() : null}
|
||||
{selectedPosition === 'below' ? this.renderSelected() : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -12,12 +12,12 @@
|
|||
|
||||
.clear {
|
||||
cursor: pointer;
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 12px;
|
||||
left: -4px;
|
||||
padding: 4px;
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.withclear input {
|
||||
|
@ -49,20 +49,20 @@
|
|||
}
|
||||
|
||||
.suggestions {
|
||||
position: absolute;
|
||||
background-color: var(--autocomplete-suggestions-background);
|
||||
box-shadow: var(--zdepth-shadow-1);
|
||||
list-style: none;
|
||||
max-height: 1px;
|
||||
-ms-overflow-style: none;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
transition-duration: var(--animation-duration);
|
||||
transition-property: max-height, box-shadow;
|
||||
transition-timing-function: var(--animation-curve-default);
|
||||
width: 100%;
|
||||
z-index: var(--z-index-highest);
|
||||
box-shadow: var(--zdepth-shadow-1);
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
.suggestion {
|
||||
|
|
|
@ -5,13 +5,13 @@
|
|||
.chip {
|
||||
background-color: var(--chip-background);
|
||||
border-radius: var(--chip-height);
|
||||
min-height: var(--chip-height);
|
||||
color: var(--chip-color);
|
||||
display: inline-block;
|
||||
font-size: var(--chip-font-size);
|
||||
line-height: var(--chip-height);
|
||||
margin-right: var(--chip-margin-right);
|
||||
max-width: 100%;
|
||||
min-height: var(--chip-height);
|
||||
overflow: hidden;
|
||||
padding: 0 var(--chip-padding);
|
||||
position: relative;
|
||||
|
|
|
@ -171,10 +171,10 @@
|
|||
|
||||
.clear {
|
||||
cursor: pointer;
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 12px;
|
||||
left: -4px;
|
||||
padding: 4px;
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
|
|
@ -28,12 +28,14 @@
|
|||
@apply --reset;
|
||||
}
|
||||
|
||||
.table > head, .head {
|
||||
.table > head,
|
||||
.head {
|
||||
padding-bottom: calc(0.3 * var(--unit));
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.table > tbody > tr, .row {
|
||||
.table > tbody > tr,
|
||||
.row {
|
||||
color: var(--table-row-color);
|
||||
height: var(--table-row-height);
|
||||
transition-duration: 0.28s;
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
"name": "react-toolbox",
|
||||
"description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.",
|
||||
"homepage": "http://www.react-toolbox.io",
|
||||
"version": "2.0.0-beta.15",
|
||||
"version": "2.0.0-beta.16",
|
||||
"main": "./lib",
|
||||
"module": "./components",
|
||||
"author": {
|
||||
|
|
Loading…
Reference in New Issue