function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); } function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(n); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } /** * Cursor rule: * 1. Only `showSearch` enabled * 2. Only `open` is `true` * 3. When typing, set `open` to `true` which hit rule of 2 * * Accessibility: * - https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html */ import * as React from 'react'; import KeyCode from "rc-util/es/KeyCode"; import MultipleSelector from './MultipleSelector'; import SingleSelector from './SingleSelector'; import useLock from '../hooks/useLock'; var Selector = function Selector(props, ref) { var inputRef = React.useRef(null); var prefixCls = props.prefixCls, multiple = props.multiple, open = props.open, mode = props.mode, showSearch = props.showSearch, onSearch = props.onSearch, onToggleOpen = props.onToggleOpen, onInputKeyDown = props.onInputKeyDown, domRef = props.domRef; // ======================= Ref ======================= React.useImperativeHandle(ref, function () { return { focus: function focus() { inputRef.current.focus(); }, blur: function blur() { inputRef.current.blur(); } }; }); // ====================== Input ====================== var _useLock = useLock(0), _useLock2 = _slicedToArray(_useLock, 2), getInputMouseDown = _useLock2[0], setInputMouseDown = _useLock2[1]; var onInternalInputKeyDown = function onInternalInputKeyDown(event) { var which = event.which; if (which === KeyCode.UP || which === KeyCode.DOWN) { event.preventDefault(); } if (onInputKeyDown) { onInputKeyDown(event); } if (![KeyCode.SHIFT, KeyCode.TAB, KeyCode.BACKSPACE, KeyCode.ESC].includes(which)) { onToggleOpen(true); } }; /** * We can not use `findDOMNode` sine it will get warning, * have to use timer to check if is input element. */ var onInternalInputMouseDown = function onInternalInputMouseDown() { setInputMouseDown(true); }; // When paste come, ignore next onChange var pasteClearRef = React.useRef(false); var triggerOnSearch = function triggerOnSearch(value) { if (onSearch(value) !== false) { onToggleOpen(true); } }; var onInputChange = function onInputChange(_ref) { var value = _ref.target.value; if (pasteClearRef.current) { pasteClearRef.current = false; return; } triggerOnSearch(value); }; var onInputPaste = function onInputPaste(e) { var clipboardData = e.clipboardData; var value = clipboardData.getData('text'); // Block next onChange pasteClearRef.current = true; setTimeout(function () { pasteClearRef.current = false; }); triggerOnSearch(value); }; // ====================== Focus ====================== // Should focus input if click the selector var onClick = function onClick(_ref2) { var target = _ref2.target; if (target !== inputRef.current) { inputRef.current.focus(); } }; var onMouseDown = function onMouseDown(event) { var inputMouseDown = getInputMouseDown(); if (event.target !== inputRef.current && !inputMouseDown) { event.preventDefault(); } if (mode !== 'combobox' && (!showSearch || !inputMouseDown) || !open) { if (open) { onSearch(''); } onToggleOpen(); } }; // ================= Inner Selector ================== var sharedProps = { inputRef: inputRef, onInputKeyDown: onInternalInputKeyDown, onInputMouseDown: onInternalInputMouseDown, onInputChange: onInputChange, onInputPaste: onInputPaste }; var selectNode = multiple ? React.createElement(MultipleSelector, Object.assign({}, props, sharedProps)) : React.createElement(SingleSelector, Object.assign({}, props, sharedProps)); return React.createElement("div", { ref: domRef, className: "".concat(prefixCls, "-selector"), onClick: onClick, onMouseDown: onMouseDown }, selectNode); }; var ForwardSelector = React.forwardRef(Selector); ForwardSelector.displayName = 'Selector'; export default ForwardSelector;