@wix/design-system
Version:
@wix/design-system
205 lines (204 loc) • 7.27 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
var _Input = _interopRequireDefault(require("../Input"));
var _LabelledElement = _interopRequireDefault(require("../LabelledElement/LabelledElement"));
var _Text = _interopRequireDefault(require("../Text"));
var _InputWithOptions = _interopRequireDefault(require("../InputWithOptions"));
var _AutoCompleteWithLabelSt = require("./AutoCompleteWithLabel.st.css.js");
var _AutoCompleteWithLabel2 = require("./AutoCompleteWithLabel.constants");
var _excluded = ["onFocus", "onBlur", "onChange", "className", "getPlaceholder"];
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/AutoCompleteWithLabel/AutoCompleteWithLabel.tsx";
class AutoCompleteWithLabel extends _react.default.PureComponent {
constructor(props) {
super(props);
this.onSelect = option => {
if (!option) {
return;
}
var value = option.value;
this.setState({
value: value
});
this.props.onSelect(option);
this.setState({
isEditing: false
});
};
this.onChange = event => {
var value = event.target.value;
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() {
var _this$props = this.props,
label = _this$props.label,
dataHook = _this$props.dataHook,
options = _this$props.options,
status = _this$props.status,
suffix = _this$props.suffix,
statusMessage = _this$props.statusMessage,
_onFocus = _this$props.onFocus,
name = _this$props.name,
type = _this$props.type,
ariaLabel = _this$props.ariaLabel,
autoFocus = _this$props.autoFocus,
autocomplete = _this$props.autocomplete,
disabled = _this$props.disabled,
className = _this$props.className,
maxLength = _this$props.maxLength,
placeholder = _this$props.placeholder,
native = _this$props.native,
_onBlur = _this$props.onBlur,
maxHeightPixels = _this$props.maxHeightPixels;
var _ref = this._isInputControlled() ? this.props : this.state,
value = _ref.value;
var predicate = this.state.isEditing ? option => typeof option.value === 'string' && option.value.toLowerCase().includes(value.toLowerCase()) : () => true;
var filteredOptions = options.filter(predicate);
var suffixContainer = suffix ? suffix.map((item, index) => {
return /*#__PURE__*/_react.default.createElement("div", {
className: _AutoCompleteWithLabelSt.classes.suffix,
key: "".concat(dataHook, "-").concat(index),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 95,
columnNumber: 13
}
}, item);
}) : [];
return /*#__PURE__*/_react.default.createElement("div", {
"data-hook": dataHook,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 103,
columnNumber: 7
}
}, /*#__PURE__*/_react.default.createElement(_LabelledElement.default, {
label: label,
dataHook: _AutoCompleteWithLabel2.DATA_HOOKS.labelledElement,
value: value,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 104,
columnNumber: 9
}
}, _ref2 => {
var inputOnFocus = _ref2.onFocus,
inputOnBlur = _ref2.onBlur,
inputOnChange = _ref2.onChange,
inputClassName = _ref2.className,
getPlaceholder = _ref2.getPlaceholder,
rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
return /*#__PURE__*/_react.default.createElement(_InputWithOptions.default, (0, _extends2.default)({
onChange: e => {
inputOnChange(e);
this.onChange(e);
},
onSelect: this.onSelect,
dataHook: _AutoCompleteWithLabel2.DATA_HOOKS.inputWithOptions,
hideStatusSuffix: true,
onFocus: e => {
inputOnFocus();
_onFocus == null || _onFocus(e);
},
onBlur: e => {
inputOnBlur();
_onBlur == null || _onBlur(e);
},
size: "large",
autocomplete: autocomplete,
inputElement: /*#__PURE__*/_react.default.createElement(_Input.default, {
name: name,
type: type,
ariaLabel: ariaLabel,
autoFocus: autoFocus,
disabled: disabled,
maxLength: maxLength,
placeholder: getPlaceholder(placeholder),
dataHook: _AutoCompleteWithLabel2.DATA_HOOKS.inputWithLabel,
value: value,
className: (0, _AutoCompleteWithLabelSt.st)(inputClassName, className),
suffix: suffixContainer,
status: status,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 136,
columnNumber: 17
}
}),
options: filteredOptions,
native: native,
maxHeightPixels: maxHeightPixels
}, rest, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 117,
columnNumber: 13
}
}));
}), status === _Input.default.StatusError && statusMessage && /*#__PURE__*/_react.default.createElement(_Text.default, {
skin: "error",
weight: "normal",
size: "small",
className: _AutoCompleteWithLabelSt.classes.statusMessage,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 159,
columnNumber: 11
}
}, /*#__PURE__*/_react.default.createElement("span", {
className: _AutoCompleteWithLabelSt.classes.statusMessageIcon,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 165,
columnNumber: 13
}
}, /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.StatusAlertSmall, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 166,
columnNumber: 15
}
})), /*#__PURE__*/_react.default.createElement("span", {
"data-hook": _AutoCompleteWithLabel2.DATA_HOOKS.errorMessage,
className: _AutoCompleteWithLabelSt.classes.errorMessageContent,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 168,
columnNumber: 13
}
}, statusMessage)));
}
}
AutoCompleteWithLabel.displayName = 'AutoCompleteWithLabel';
AutoCompleteWithLabel.defaultProps = {
autocomplete: 'on',
label: '',
options: [],
onSelect: () => {}
};
var _default = exports.default = AutoCompleteWithLabel;
//# sourceMappingURL=AutoCompleteWithLabel.js.map