@wix/design-system
Version:
@wix/design-system
70 lines • 3.99 kB
JavaScript
import React from 'react';
import { StatusAlertSmall } from '@wix/wix-ui-icons-common';
import Input from '../Input';
import LabelledElement from '../LabelledElement/LabelledElement';
import Text from '../Text';
import InputWithOptions from '../InputWithOptions';
import { st, classes } from './AutoCompleteWithLabel.st.css.js';
import { DATA_HOOKS } from './AutoCompleteWithLabel.constants';
class AutoCompleteWithLabel extends React.PureComponent {
constructor(props) {
super(props);
this.onSelect = (option) => {
if (!option) {
return;
}
const { value } = option;
this.setState({ value: value });
this.props.onSelect(option);
this.setState({ isEditing: false });
};
this.onChange = (event) => {
const { value } = event.target;
this.setState({ value, isEditing: true });
this.props.onChange && this.props.onChange(event);
};
this._isInputControlled = () => typeof this.props.value !== 'undefined';
this.state = {
value: props.value || '',
isEditing: false,
};
}
render() {
const { label, dataHook, options, status, suffix, statusMessage, onFocus, name, type, ariaLabel, autoFocus, autocomplete, disabled, className, maxLength, placeholder, native, onBlur, maxHeightPixels, } = this.props;
const { value } = this._isInputControlled() ? this.props : this.state;
const predicate = this.state.isEditing
? (option) => typeof option.value === 'string' &&
option.value.toLowerCase().includes(value.toLowerCase())
: () => true;
const filteredOptions = options.filter(predicate);
const suffixContainer = suffix
? suffix.map((item, index) => {
return (React.createElement("div", { className: classes.suffix, key: `${dataHook}-${index}` }, item));
})
: [];
return (React.createElement("div", { "data-hook": dataHook },
React.createElement(LabelledElement, { label: label, dataHook: DATA_HOOKS.labelledElement, value: value }, ({ onFocus: inputOnFocus, onBlur: inputOnBlur, onChange: inputOnChange, className: inputClassName, getPlaceholder, ...rest }) => (React.createElement(InputWithOptions, { onChange: e => {
inputOnChange(e);
this.onChange(e);
}, onSelect: this.onSelect, dataHook: DATA_HOOKS.inputWithOptions, hideStatusSuffix: true, onFocus: e => {
inputOnFocus();
onFocus?.(e);
}, onBlur: e => {
inputOnBlur();
onBlur?.(e);
}, size: "large", autocomplete: autocomplete, inputElement: React.createElement(Input, { name: name, type: type, ariaLabel: ariaLabel, autoFocus: autoFocus, disabled: disabled, maxLength: maxLength, placeholder: getPlaceholder(placeholder), dataHook: DATA_HOOKS.inputWithLabel, value: value, className: st(inputClassName, className), suffix: suffixContainer, status: status }), options: filteredOptions, native: native, maxHeightPixels: maxHeightPixels, ...rest }))),
status === Input.StatusError && statusMessage && (React.createElement(Text, { skin: "error", weight: "normal", size: "small", className: classes.statusMessage },
React.createElement("span", { className: classes.statusMessageIcon },
React.createElement(StatusAlertSmall, null)),
React.createElement("span", { "data-hook": DATA_HOOKS.errorMessage, className: classes.errorMessageContent }, statusMessage)))));
}
}
AutoCompleteWithLabel.displayName = 'AutoCompleteWithLabel';
AutoCompleteWithLabel.defaultProps = {
autocomplete: 'on',
label: '',
options: [],
onSelect: () => { },
};
export default AutoCompleteWithLabel;
//# sourceMappingURL=AutoCompleteWithLabel.js.map