wix-style-react
Version:
256 lines (199 loc) • 11.5 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _StatusAlertSmall = _interopRequireDefault(require("wix-ui-icons-common/StatusAlertSmall"));
var _Input = _interopRequireDefault(require("../Input"));
var _LabelledElement = _interopRequireDefault(require("../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");
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
var AutoCompleteWithLabel = /*#__PURE__*/function (_React$PureComponent) {
(0, _inherits2["default"])(AutoCompleteWithLabel, _React$PureComponent);
var _super = _createSuper(AutoCompleteWithLabel);
function AutoCompleteWithLabel(props) {
var _this;
(0, _classCallCheck2["default"])(this, AutoCompleteWithLabel);
_this = _super.call(this, props);
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onSelect", function (option) {
var value = option.value;
_this.setState({
value: value
});
_this.props.onSelect(option);
_this.setState({
isEditing: false
});
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onChange", function (event) {
var value = event.target.value;
_this.setState({
value: value,
isEditing: true
});
_this.props.onChange && _this.props.onChange(event);
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_isInputControlled", function () {
return typeof _this.props.value !== 'undefined';
});
_this.state = {
value: props.value || '',
isEditing: false
};
return _this;
}
(0, _createClass2["default"])(AutoCompleteWithLabel, [{
key: "render",
value: function 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 ? function (option) {
return option.value.toLowerCase().includes(value.toLowerCase());
} : function () {
return true;
};
var filteredOptions = options.filter(predicate);
var suffixContainer = suffix ? suffix.map(function (item, index) {
return /*#__PURE__*/_react["default"].createElement("div", {
className: _AutoCompleteWithLabelSt.classes.suffix,
key: "".concat(dataHook, "-").concat(index)
}, item);
}) : [];
return /*#__PURE__*/_react["default"].createElement("div", {
"data-hook": dataHook
}, /*#__PURE__*/_react["default"].createElement(_LabelledElement["default"], {
label: label,
dataHook: _dataHooks["default"].labelledElement,
value: value
}, /*#__PURE__*/_react["default"].createElement(_InputWithOptions["default"], {
onChange: this.onChange,
onSelect: this.onSelect,
dataHook: _dataHooks["default"].inputWithOptions,
hideStatusSuffix: true,
onFocus: onFocus,
onBlur: onBlur,
size: 'large',
inputElement: /*#__PURE__*/_react["default"].createElement(_Input["default"], {
name: name,
type: type,
ariaLabel: ariaLabel,
autoFocus: autoFocus,
autocomplete: autocomplete,
disabled: disabled,
maxLength: maxLength,
placeholder: placeholder,
dataHook: _dataHooks["default"].inputWithLabel,
value: value,
className: className,
suffix: suffixContainer,
status: status
}),
options: filteredOptions,
"native": _native,
maxHeightPixels: maxHeightPixels
})), status === _Input["default"].StatusError && statusMessage && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
skin: "error",
weight: "normal",
size: "small",
className: _AutoCompleteWithLabelSt.classes.statusMessage
}, /*#__PURE__*/_react["default"].createElement("span", {
className: _AutoCompleteWithLabelSt.classes.statusMessageIcon
}, /*#__PURE__*/_react["default"].createElement(_StatusAlertSmall["default"], null)), /*#__PURE__*/_react["default"].createElement("span", {
"data-hook": _dataHooks["default"].errorMessage,
className: _AutoCompleteWithLabelSt.classes.errorMessageContent
}, statusMessage)));
}
}]);
return AutoCompleteWithLabel;
}(_react["default"].PureComponent);
(0, _defineProperty2["default"])(AutoCompleteWithLabel, "displayName", 'AutoCompleteWithLabel');
(0, _defineProperty2["default"])(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])
});
(0, _defineProperty2["default"])(AutoCompleteWithLabel, "defaultProps", _objectSpread(_objectSpread({}, _Input["default"].defaultProps), {}, {
label: '',
options: [],
onSelect: function onSelect() {}
}));
var _default = AutoCompleteWithLabel;
exports["default"] = _default;