@wix/design-system
Version:
@wix/design-system
724 lines (707 loc) • 30 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
exports.__esModule = true;
exports["default"] = exports.DEFAULT_VALUE_PARSER = exports.DEFAULT_POPOVER_PROPS = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _react = _interopRequireWildcard(require("react"));
var _Input = _interopRequireDefault(require("../Input"));
var _omit = _interopRequireDefault(require("omit"));
var _DropdownLayout = _interopRequireDefault(require("../DropdownLayout/DropdownLayout"));
var _InputWithOptionsSt = require("./InputWithOptions.st.css.js");
var _uniqueId = _interopRequireDefault(require("lodash/uniqueId"));
var _HighlightContext = _interopRequireDefault(require("./HighlightContext"));
var _PopoverNext = _interopRequireDefault(require("../PopoverNext/PopoverNext"));
var _context = require("../WixDesignSystemProvider/context");
var _Drawer = _interopRequireDefault(require("../Drawer"));
var _excluded = ["appendTo", "fixed", "flip", "placement", "dynamicWidth"];
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/InputWithOptions/InputWithOptions.jsx";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
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; }
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
var DEFAULT_VALUE_PARSER = exports.DEFAULT_VALUE_PARSER = function DEFAULT_VALUE_PARSER(option) {
return typeof option.value === 'string' ? option.value : option.label;
};
var INPUT_WITH_OPTIONS_DOUBLE_CLICK_THRESHOLD = 2000;
var DEFAULT_POPOVER_PROPS = exports.DEFAULT_POPOVER_PROPS = {
appendTo: 'parent',
flip: false,
fixed: true,
placement: 'bottom',
width: '100%',
minWidth: 192,
onMouseEnter: undefined,
onMouseLeave: undefined
};
var InputWithOptions = /*#__PURE__*/function (_Component) {
function InputWithOptions(props) {
var _this;
(0, _classCallCheck2["default"])(this, InputWithOptions);
_this = _callSuper(this, InputWithOptions, [props]);
_this.input = /*#__PURE__*/(0, _react.createRef)();
_this._onOptionMarked = function (option, optionElementId) {
var onOptionMarked = _this.props.onOptionMarked;
_this.setState({
activeDescendentId: optionElementId
});
if (onOptionMarked) {
onOptionMarked(option, optionElementId);
}
};
/** Checks if focus event is related to selecting an option */
_this._didSelectOption = function (event) {
var focusedElement = event && event.relatedTarget;
var dropdownContainer = _this.dropdownLayout && _this.dropdownLayout.containerRef.current;
// Check if user has focused other input component
var isInput = focusedElement instanceof HTMLInputElement;
if (!focusedElement || !dropdownContainer || isInput) {
return false;
}
var isInDropdown = dropdownContainer.contains(focusedElement);
// Returns true if element is the dropdown container or is inside of it
return isInDropdown;
};
/**
* Clears the input.
*
* @param event delegated to the onClear call
*/
_this.clear = function (event) {
_this.input.current && _this.input.current.clear(event);
};
_this.state = {
inputValue: props.value || '',
showOptions: false,
lastOptionsShow: 0,
isEditing: false
};
_this.uniqueId = (0, _uniqueId["default"])('InputWithOptions');
_this._onSelect = _this._onSelect.bind(_this);
_this._onFocus = _this._onFocus.bind(_this);
_this._onBlur = _this._onBlur.bind(_this);
_this._onChange = _this._onChange.bind(_this);
_this._onKeyDown = _this._onKeyDown.bind(_this);
_this.focus = _this.focus.bind(_this);
_this.blur = _this.blur.bind(_this);
_this.select = _this.select.bind(_this);
_this.hideOptions = _this.hideOptions.bind(_this);
_this.showOptions = _this.showOptions.bind(_this);
_this._onManuallyInput = _this._onManuallyInput.bind(_this);
_this._renderDropdownLayout = _this._renderDropdownLayout.bind(_this);
_this.isDropdownLayoutVisible = _this.isDropdownLayoutVisible.bind(_this);
_this._onInputClicked = _this._onInputClicked.bind(_this);
_this._onOpenChange = _this._onOpenChange.bind(_this);
_this.closeOnSelect = _this.closeOnSelect.bind(_this);
_this.onCompositionChange = _this.onCompositionChange.bind(_this);
return _this;
}
(0, _inherits2["default"])(InputWithOptions, _Component);
return (0, _createClass2["default"])(InputWithOptions, [{
key: "inputClasses",
value:
// Abstraction
function inputClasses() {}
}, {
key: "dropdownClasses",
value: function dropdownClasses() {}
}, {
key: "dropdownAdditionalProps",
value: function dropdownAdditionalProps() {}
}, {
key: "inputAdditionalProps",
value: function inputAdditionalProps() {}
}, {
key: "rootAdditionalProps",
value: function rootAdditionalProps() {
return {};
}
/**
* An array of key codes that act as manual submit. Will be used within
* onKeyDown(event).
*
* @returns {KeyboardEvent.key[]}
*/
}, {
key: "getManualSubmitKeys",
value: function getManualSubmitKeys() {
return ['Enter', 'Tab'];
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps, prevState) {
if (!this.props.showOptionsIfEmptyInput && (!prevProps.value && this.props.value || !prevState.inputValue && this.state.inputValue)) {
this.showOptions();
}
// Clear value in controlled mode
if (prevProps.value !== this.props.value && this.props.value === '') {
this.setState({
inputValue: ''
});
}
}
}, {
key: "onCompositionChange",
value: function onCompositionChange(isComposing) {
this.setState({
isComposing: isComposing
});
}
}, {
key: "renderInput",
value: function renderInput(mobile) {
var _this2 = this;
var inputAdditionalProps = this.inputAdditionalProps();
var inputProps = Object.assign((0, _omit["default"])(['onChange', 'dataHook', 'dropDirectionUp', 'focusOnSelectedOption', 'onClose', 'onSelect', 'onOptionMarked', 'overflow', 'visible', 'options', 'selectedId', 'tabIndex', 'fixedHeader', 'fixedFooter', 'maxHeightPixels', 'minWidthPixels', 'withArrow', 'closeOnSelect', 'onMouseEnter', 'onMouseLeave', 'itemHeight', 'selectedHighlight', 'inContainer', 'infiniteScroll', 'loadMore', 'hasMore', 'markedOption', 'className'], this.props), inputAdditionalProps);
var inputElement = inputProps.inputElement;
return /*#__PURE__*/_react["default"].cloneElement(inputElement, _objectSpread(_objectSpread({
menuArrow: true,
ref: this.input,
ariaExpanded: this.state.showOptions,
ariaControls: "".concat(this.uniqueId, "-listbox"),
ariaActivedescendant: this.state.activeDescendentId
}, inputProps), {}, {
onChange: this._onChange,
onInputClicked: function onInputClicked(event) {
return _this2._onInputClicked(event, mobile);
},
onFocus: this._onFocus,
onBlur: this._onBlur,
onCompositionChange: this.onCompositionChange,
width: inputElement.props.width,
textOverflow: this.props.textOverflow || inputElement.props.textOverflow,
tabIndex: this.props["native"] ? -1 : 0
}));
}
}, {
key: "hasDropdownContent",
value: function hasDropdownContent(additionalProps) {
var _additionalProps$opti;
var _this$props = this.props,
options = _this$props.options,
fixedHeader = _this$props.fixedHeader,
fixedFooter = _this$props.fixedFooter,
customDropdownContent = _this$props.customDropdownContent,
infiniteScroll = _this$props.infiniteScroll,
hasMore = _this$props.hasMore;
return Boolean(customDropdownContent || fixedHeader || fixedFooter || [].concat((0, _toConsumableArray2["default"])(options !== null && options !== void 0 ? options : []), (0, _toConsumableArray2["default"])((_additionalProps$opti = additionalProps == null ? void 0 : additionalProps.options) !== null && _additionalProps$opti !== void 0 ? _additionalProps$opti : [])).length || infiniteScroll && hasMore);
}
}, {
key: "isDropdownLayoutVisible",
value: function isDropdownLayoutVisible() {
return this.state.showOptions && (this.props.showOptionsIfEmptyInput || this.state.inputValue.length > 0);
}
}, {
key: "_renderDropdownLayout",
value: function _renderDropdownLayout(additionalProps) {
var _this3 = this;
var _this$props2 = this.props,
highlight = _this$props2.highlight,
value = _this$props2.value;
var inputPropNames = ['children', 'dataHook', 'className', 'id', 'role', 'ariaControls', 'ariaDescribedby', 'ariaLabel', 'autoFocus', 'autoSelect', 'autocomplete', 'defaultValue', 'disabled', 'status', 'statusMessage', 'statusMessageTooltipProps', 'hideStatusSuffix', 'forceFocus', 'forceHover', 'maxLength', 'menuArrow', 'clearButton', 'focusOnClearClick', 'name', 'border', 'noLeftBorderRadius', 'noRightBorderRadius', 'onBlur', 'onChange', 'onClear', 'onCompositionChange', 'onEnterPressed', 'onEscapePressed', 'onFocus', 'onInputClicked', 'onKeyDown', 'onKeyUp', 'onPaste', 'onCopy', 'placeholder', 'prefix', 'readOnly', 'disableEditing', 'rtl', 'size', 'suffix', 'textOverflow', 'tooltipPlacement', 'type', 'value', 'withSelection', 'required', 'min', 'max', 'step', 'customInput', 'pattern', 'inputRef', 'inputmode', 'ariaRoledescription', 'clearButtonTooltipContent', 'clearButtonTooltipProps', 'clearButtonAriaLabel', 'inputElementRef'];
var inputOnlyProps = inputPropNames.filter(function (k) {
return k !== 'tabIndex';
});
var dropdownProps = Object.assign((0, _omit["default"])(inputOnlyProps.concat(['dataHook', 'onClickOutside']), this.props), additionalProps !== null && additionalProps !== void 0 ? additionalProps : this.dropdownAdditionalProps());
var customStyle = {
marginLeft: this.props.dropdownOffsetLeft,
width: 'inherit'
};
return /*#__PURE__*/_react["default"].createElement("div", {
className: "".concat(this.uniqueId, " ").concat(this.dropdownClasses()),
style: customStyle,
"data-hook": "dropdown-layout-wrapper",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 270,
columnNumber: 7
}
}, /*#__PURE__*/_react["default"].createElement(_HighlightContext["default"].Provider, {
value: {
highlight: highlight,
match: value
},
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 275,
columnNumber: 9
}
}, /*#__PURE__*/_react["default"].createElement(_DropdownLayout["default"], (0, _extends2["default"])({
ref: function ref(dropdownLayout) {
_this3.dropdownLayout = dropdownLayout;
}
}, dropdownProps, {
dataHook: "inputwithoptions-dropdownlayout",
visible: true,
className: _InputWithOptionsSt.classes.dropdownLayout,
onClose: this.hideOptions,
onSelect: this._onSelect,
onOptionMarked: this._onOptionMarked,
isComposing: this.state.isComposing,
listboxId: "".concat(this.uniqueId, "-listbox"),
inContainer: true,
tabIndex: -1,
onDrillOut: function onDrillOut() {
return _this3.focus();
},
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 276,
columnNumber: 11
}
}))));
}
}, {
key: "_renderNativeSelect",
value: function _renderNativeSelect() {
var _this4 = this;
var _this$props3 = this.props,
options = _this$props3.options,
onSelect = _this$props3.onSelect,
disabled = _this$props3.disabled;
return /*#__PURE__*/_react["default"].createElement("div", {
className: _InputWithOptionsSt.classes.nativeSelectWrapper,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 301,
columnNumber: 7
}
}, this.renderInput(), /*#__PURE__*/_react["default"].createElement("select", {
disabled: disabled,
"data-hook": "native-select",
className: _InputWithOptionsSt.classes.nativeSelect,
onChange: function onChange(event) {
_this4._onChange(event);
// In this case we don't use DropdownLayout so we need to invoke `onSelect` manually
onSelect(options[event.target.selectedIndex]);
},
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 303,
columnNumber: 9
}
}, options.map(function (option, index) {
return /*#__PURE__*/_react["default"].createElement("option", {
"data-hook": "native-option-".concat(option.id),
"data-index": index,
key: option.id,
value: option.value,
__self: _this4,
__source: {
fileName: _jsxFileName,
lineNumber: 315,
columnNumber: 13
}
}, option.value);
})));
}
}, {
key: "render",
value: function render() {
var _this5 = this;
if (!!this.props["native"]) {
return this._renderNativeSelect();
}
var _this$props4 = this.props,
dataHook = _this$props4.dataHook,
_this$props4$popoverP = _this$props4.popoverProps,
popoverAppendTo = _this$props4$popoverP.appendTo,
popoverFixed = _this$props4$popoverP.fixed,
popoverFlip = _this$props4$popoverP.flip,
popoverPlacement = _this$props4$popoverP.placement,
popoverDynamicWidth = _this$props4$popoverP.dynamicWidth,
restPopoverFields = (0, _objectWithoutProperties2["default"])(_this$props4$popoverP, _excluded),
dropDirectionUp = _this$props4.dropDirectionUp,
dropdownWidth = _this$props4.dropdownWidth,
className = _this$props4.className;
var placement = dropDirectionUp ? 'top' : popoverPlacement;
var dynamicWidth = popoverDynamicWidth !== null && popoverDynamicWidth !== void 0 ? popoverDynamicWidth : popoverAppendTo === 'window';
var rootProps = this.rootAdditionalProps();
var additionalDropdownProps = this.dropdownAdditionalProps();
var hasContent = this.hasDropdownContent(additionalDropdownProps);
return /*#__PURE__*/_react["default"].createElement(_context.WixDesignSystemContext.Consumer, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 355,
columnNumber: 7
}
}, function (_ref) {
var _this5$props, _rootProps$className;
var mobile = _ref.mobile;
return mobile && _this5.props.showDrawerOnMobile ? /*#__PURE__*/_react["default"].createElement("div", {
__self: _this5,
__source: {
fileName: _jsxFileName,
lineNumber: 358,
columnNumber: 13
}
}, /*#__PURE__*/_react["default"].createElement("div", {
"data-input-parent": true,
className: _this5.inputClasses(),
__self: _this5,
__source: {
fileName: _jsxFileName,
lineNumber: 359,
columnNumber: 15
}
}, _this5.renderInput(mobile)), /*#__PURE__*/_react["default"].createElement(_Drawer["default"], {
dataHook: dataHook,
open: _this5.isDropdownLayoutVisible(),
onClose: _this5._onOpenChange,
zIndex: (_this5$props = _this5.props) == null || (_this5$props = _this5$props.popoverProps) == null ? void 0 : _this5$props.zIndex,
__self: _this5,
__source: {
fileName: _jsxFileName,
lineNumber: 362,
columnNumber: 15
}
}, /*#__PURE__*/_react["default"].createElement("div", {
className: _InputWithOptionsSt.classes.drawerContent,
__self: _this5,
__source: {
fileName: _jsxFileName,
lineNumber: 368,
columnNumber: 17
}
}, _this5.props.customDropdownContent || _this5._renderDropdownLayout(additionalDropdownProps)))) : /*#__PURE__*/_react["default"].createElement(_PopoverNext["default"], (0, _extends2["default"])({
className: (0, _InputWithOptionsSt.st)(_InputWithOptionsSt.classes.root, {
size: 'medium'
}, (_rootProps$className = rootProps.className) !== null && _rootProps$className !== void 0 ? _rootProps$className : className),
open: _this5.isDropdownLayoutVisible(),
onOpenChange: _this5._onOpenChange,
appendTo: popoverAppendTo !== null && popoverAppendTo !== void 0 ? popoverAppendTo : DEFAULT_POPOVER_PROPS.appendTo,
flip: popoverFlip !== null && popoverFlip !== void 0 ? popoverFlip : DEFAULT_POPOVER_PROPS.flip,
fixed: popoverFixed !== null && popoverFixed !== void 0 ? popoverFixed : DEFAULT_POPOVER_PROPS.fixed,
placement: placement !== null && placement !== void 0 ? placement : DEFAULT_POPOVER_PROPS.placement,
dynamicWidth: dynamicWidth,
excludeClass: _this5.uniqueId,
focusManagerEnabled: false,
onClickOutside: _this5.props.onClickOutside
}, restPopoverFields, {
minWidth: dynamicWidth ? 'fit-content' : DEFAULT_POPOVER_PROPS.minWidth,
width: dropdownWidth !== null && dropdownWidth !== void 0 ? dropdownWidth : dynamicWidth ? null : DEFAULT_POPOVER_PROPS.width,
dataHook: dataHook,
onKeyDown: _this5._onKeyDown,
autoUpdateOptions: {
animationFrame: true
},
contentClassName: !hasContent ? _InputWithOptionsSt.classes.emptyContent : undefined,
__self: _this5,
__source: {
fileName: _jsxFileName,
lineNumber: 375,
columnNumber: 13
}
}), /*#__PURE__*/_react["default"].createElement(_PopoverNext["default"].Trigger, {
__self: _this5,
__source: {
fileName: _jsxFileName,
lineNumber: 404,
columnNumber: 15
}
}, /*#__PURE__*/_react["default"].createElement("div", {
"data-input-parent": true,
className: _this5.inputClasses(),
__self: _this5,
__source: {
fileName: _jsxFileName,
lineNumber: 405,
columnNumber: 17
}
}, _this5.renderInput())), /*#__PURE__*/_react["default"].createElement(_PopoverNext["default"].Content, {
__self: _this5,
__source: {
fileName: _jsxFileName,
lineNumber: 409,
columnNumber: 15
}
}, _this5.props.customDropdownContent || _this5._renderDropdownLayout(additionalDropdownProps)));
});
}
/**
* Shows dropdown options
*/
}, {
key: "showOptions",
value: function showOptions() {
if (!this.state.showOptions) {
this.setState({
showOptions: true,
lastOptionsShow: Date.now()
});
this.props.onOptionsShow && this.props.onOptionsShow();
}
}
/**
* Hides dropdown options
*/
}, {
key: "hideOptions",
value: function hideOptions() {
if (this.state.showOptions) {
this.setState({
showOptions: false,
activeDescendentId: undefined
});
this.props.onOptionsHide && this.props.onOptionsHide();
this.props.onClose && this.props.onClose();
}
}
}, {
key: "closeOnSelect",
value: function closeOnSelect() {
return this.props.closeOnSelect;
}
}, {
key: "isReadOnly",
get: function get() {
var _ref2 = this.inputAdditionalProps() || {
readOnly: this.props.readOnly
},
readOnly = _ref2.readOnly;
return readOnly;
}
/**
* Determine if the provided key should cause the dropdown to be opened.
*
* @param {KeyboardEvent.key}
* @returns {boolean}
*/
}, {
key: "shouldOpenDropdown",
value: function shouldOpenDropdown(key) {
var openKeys = this.isReadOnly ? ['Enter', 'Spacebar', ' ', 'ArrowDown'] : ['ArrowDown'];
return openKeys.includes(key);
}
/**
* Determine if the provided key should delegate the keydown event to the
* DropdownLayout.
*
* @param {KeyboardEvent.key}
* @returns {boolean}
*/
}, {
key: "shouldDelegateKeyDown",
value: function shouldDelegateKeyDown(key) {
return this.isReadOnly || !['Spacebar', ' '].includes(key) || this.shouldPerformManualSubmit(' ');
}
/**
* Determine if the provided key should cause manual submit.
*
* @param {KeyboardEvent.key}
* @returns {boolean}
*/
}, {
key: "shouldPerformManualSubmit",
value: function shouldPerformManualSubmit(key) {
return this.getManualSubmitKeys().includes(key);
}
}, {
key: "_onManuallyInput",
value: function _onManuallyInput() {
var inputValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
if (this.state.isComposing) {
return;
}
inputValue = inputValue.trim();
var suggestedOption = this.props.options.find(function (element) {
return element.value === inputValue;
});
if (this.props.onManuallyInput) {
this.props.onManuallyInput(inputValue, suggestedOption);
}
}
}, {
key: "_onSelect",
value: function _onSelect(option, isSelectedOption) {
var onSelect = this.props.onSelect;
if (this.closeOnSelect() || isSelectedOption) {
this._onOpenChange(false, 'select-option');
}
if (onSelect) {
onSelect(this.props.highlight ? this.props.options.find(function (opt) {
return opt.id === option.id;
}) : option);
}
}
}, {
key: "_onChange",
value: function _onChange(event) {
this.setState({
inputValue: event.target.value
});
if (this.props.onChange) {
this.props.onChange(event);
}
// If the input value is not empty, should show the options
if (event.target.value.trim() && !this.props["native"]) {
this.showOptions();
}
}
}, {
key: "_onInputClicked",
value: function _onInputClicked(event, mobile) {
var _this$props$onInputCl, _this$props5;
if (mobile) {
this._onOpenChange(true);
}
(_this$props$onInputCl = (_this$props5 = this.props).onInputClicked) == null || _this$props$onInputCl.call(_this$props5, event);
}
}, {
key: "_onOpenChange",
value: function _onOpenChange(open, reason) {
var doubleClickThreshold = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : INPUT_WITH_OPTIONS_DOUBLE_CLICK_THRESHOLD;
if (this.props.disabled || this.isReadOnly) {
return;
}
if (open) {
this.showOptions();
} else if (reason === 'outside-press' || reason === 'select-option') {
this.hideOptions();
} else if (Date.now() - this.state.lastOptionsShow > doubleClickThreshold) {
this.hideOptions();
}
}
}, {
key: "_onFocus",
value: function _onFocus(e) {
/** Don't call onFocus if input is already focused or is disabled
* can occur when input is re-focused after selecting an option
*/
if (this._focused || this.props.disabled) {
return;
}
this._focused = true;
this.setState({
isEditing: false
});
if (this.props.onFocus) {
this.props.onFocus(e);
}
}
}, {
key: "_onBlur",
value: function _onBlur(event) {
var isFocusInsideDropdown = this._didSelectOption(event);
if (isFocusInsideDropdown) {
var focusedEl = event.relatedTarget;
if ((focusedEl == null ? void 0 : focusedEl.tabIndex) >= 0) {
return;
}
this.focus();
return;
}
this._focused = false;
if (this.props.onBlur) {
this.props.onBlur(event);
}
}
}, {
key: "_onKeyDown",
value: function _onKeyDown(event) {
if (this.props.disabled || this.isReadOnly) {
return;
}
var key = event.key;
/* Enter - prevent a wrapping form from submitting when hitting Enter */
/* ArrowUp - prevent input's native behaviour from moving the text cursor to the beginning */
if (key === 'Enter' || key === 'ArrowUp') {
event.preventDefault();
}
if (key !== 'ArrowDown' && key !== 'ArrowUp') {
this.setState({
isEditing: true
});
}
if (this.shouldOpenDropdown(key)) {
this.showOptions();
event.preventDefault();
}
if (this.shouldDelegateKeyDown(key)) {
// Delegate event and get result
if (this.dropdownLayout) {
var eventWasHandled = this.dropdownLayout._onSelectListKeyDown(event);
if (eventWasHandled || this.isReadOnly) {
// Stop propagation when Escape is handled to prevent it from bubbling to parent elements
if (key === 'Escape' && eventWasHandled) {
event.stopPropagation();
}
return;
}
}
// For editing mode, we want to *submit* only for specific keys.
if (this.shouldPerformManualSubmit(key)) {
this._onManuallyInput(this.state.inputValue, event);
var inputIsEmpty = !event.target.value;
if (this.closeOnSelect() || key === 'Tab' && inputIsEmpty) {
this.hideOptions();
}
}
}
}
/**
* Sets focus on the input element
* @param {FocusOptions} options
*/
}, {
key: "focus",
value: function focus() {
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
this.input.current && this.input.current.focus(options);
}
/**
* Removes focus on the input element
*/
}, {
key: "blur",
value: function blur() {
this.input.current && this.input.current.blur();
}
/**
* Selects all text in the input element
*/
}, {
key: "select",
value: function select() {
this.input.current && this.input.current.select();
}
}]);
}(_react.Component);
InputWithOptions.defaultProps = _objectSpread(_objectSpread(_objectSpread({}, _Input["default"].defaultProps), _DropdownLayout["default"].defaultProps), {}, {
onSelect: function onSelect() {},
options: [],
closeOnSelect: true,
inputElement: /*#__PURE__*/_react["default"].createElement(_Input["default"], {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 695,
columnNumber: 17
}
}),
valueParser: DEFAULT_VALUE_PARSER,
dropdownWidth: null,
popoverProps: DEFAULT_POPOVER_PROPS,
dropdownOffsetLeft: '0',
showOptionsIfEmptyInput: true,
autocomplete: 'off',
"native": false,
showDrawerOnMobile: true
});
InputWithOptions.displayName = 'InputWithOptions';
var _default = exports["default"] = InputWithOptions;