wix-style-react
Version:
wix-style-react
261 lines (260 loc) • 10.5 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
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");
var _dataHooks = _interopRequireDefault(require("./dataHooks"));
var _DropdownLayout = require("../DropdownLayout/DropdownLayout");
var _excluded = ["onFocus", "onBlur", "onChange", "className", "getPlaceholder"];
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/AutoCompleteWithLabel/AutoCompleteWithLabel.js";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
class AutoCompleteWithLabel extends _react.default.PureComponent {
constructor(props) {
super(props);
this.onSelect = option => {
var {
value
} = option;
this.setState({
value
});
this.props.onSelect(option);
this.setState({
isEditing: false
});
};
this.onChange = event => {
var {
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() {
var {
label,
dataHook,
options,
status,
suffix,
statusMessage,
onFocus: _onFocus,
name,
type,
ariaLabel,
autoFocus,
autocomplete,
disabled,
className,
maxLength,
placeholder,
native,
onBlur: _onBlur,
maxHeightPixels
} = this.props;
var {
value
} = this._isInputControlled() ? this.props : this.state;
var predicate = this.state.isEditing ? option => 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: 130,
columnNumber: 13
}
}, item);
}) : [];
return /*#__PURE__*/_react.default.createElement("div", {
"data-hook": dataHook,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 138,
columnNumber: 7
}
}, /*#__PURE__*/_react.default.createElement(_LabelledElement.default, {
label: label,
dataHook: _dataHooks.default.labelledElement,
value: value,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 139,
columnNumber: 9
}
}, _ref => {
var {
onFocus: inputOnFocus,
onBlur: inputOnBlur,
onChange: inputOnChange,
className: inputClassName,
getPlaceholder
} = _ref,
rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
return /*#__PURE__*/_react.default.createElement(_InputWithOptions.default, (0, _extends2.default)({
onChange: e => {
inputOnChange(e);
this.onChange(e);
},
onSelect: this.onSelect,
dataHook: _dataHooks.default.inputWithOptions,
hideStatusSuffix: true,
onFocus: e => {
inputOnFocus(e);
_onFocus == null || _onFocus(e);
},
onBlur: e => {
inputOnBlur(e);
_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: _dataHooks.default.inputWithLabel,
value: value,
className: (0, _AutoCompleteWithLabelSt.st)(inputClassName, className),
suffix: suffixContainer,
status: status,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 171,
columnNumber: 17
}
}),
options: filteredOptions,
native: native,
maxHeightPixels: maxHeightPixels
}, rest, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 152,
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: 194,
columnNumber: 11
}
}, /*#__PURE__*/_react.default.createElement("span", {
className: _AutoCompleteWithLabelSt.classes.statusMessageIcon,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 200,
columnNumber: 13
}
}, /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.StatusAlertSmall, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 201,
columnNumber: 15
}
})), /*#__PURE__*/_react.default.createElement("span", {
"data-hook": _dataHooks.default.errorMessage,
className: _AutoCompleteWithLabelSt.classes.errorMessageContent,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 203,
columnNumber: 13
}
}, statusMessage)));
}
}
AutoCompleteWithLabel.displayName = 'AutoCompleteWithLabel';
AutoCompleteWithLabel.propTypes = {
/** Sets a default value for those who want to use this component un-controlled. */
dataHook: _propTypes.default.string,
/** Defines a value label to show inside of a field. */
label: _propTypes.default.string.isRequired,
/** Specify an array of options to display in the dropdown list. */
options: _propTypes.default.arrayOf(_DropdownLayout.optionValidator).isRequired,
/** Pass a component you want to show as the suffix of the input, e.g., text string, icon. */
suffix: _propTypes.default.arrayOf(_propTypes.default.element),
/** Specify the status of a field. */
status: _propTypes.default.oneOf(['error']),
/** Defines the message to display on status icon hover. If not given or empty there will be no tooltip. */
statusMessage: _propTypes.default.node,
/** Defines a standard input onFocus callback. */
onFocus: _propTypes.default.func,
/** Defines a standard input onBlur callback */
onBlur: _propTypes.default.func,
/** Defines a standard input onChange callback. */
onChange: _propTypes.default.func,
/** Reference element data when a form is submitted. */
name: _propTypes.default.string,
/** Specifies the type of `<input/>` element to display. Default is text string. */
type: _propTypes.default.string,
/** Define a string that labels the current element in case where a text label is not visible on the screen. */
ariaLabel: _propTypes.default.string,
/** Focus the element on mount (standard React input autoFocus). */
autoFocus: _propTypes.default.bool,
/** Sets the value of native autocomplete attribute (check the [HTML spec](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fe-autocomplete) for possible values */
autocomplete: _propTypes.default.string,
/** Specifies whether input should be disabled or not. */
disabled: _propTypes.default.bool,
/** Specifies a CSS class name to be appended to the component’s root element. */
className: _propTypes.default.string,
/** Sets the maximum number of characters that can be entered into a field. */
maxLength: _propTypes.default.number,
/** Sets a placeholder message to display. */
placeholder: _propTypes.default.string,
/** Defines a callback function which is called whenever user selects a different option in the list. */
onSelect: _propTypes.default.func,
/** Indicates whether to render using the native select element */
native: _propTypes.default.bool,
/** Value of rendered child input */
value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
/** Sets the maximum height of the dropdownLayout in pixels. */
maxHeightPixels: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
};
AutoCompleteWithLabel.defaultProps = _objectSpread(_objectSpread({}, _Input.default.defaultProps), {}, {
autocomplete: 'on',
label: '',
options: [],
onSelect: () => {}
});
var _default = exports.default = AutoCompleteWithLabel;
//# sourceMappingURL=AutoCompleteWithLabel.js.map