"use strict"; var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); var _typeof = require("@babel/runtime/helpers/typeof"); Object.defineProperty(exports, "__esModule", { value: true }); exports.default = void 0; var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")); var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray")); var _KeyCode = _interopRequireDefault(require("rc-util/lib/KeyCode")); var _react = _interopRequireWildcard(require("react")); var React = _react; var _useLock3 = _interopRequireDefault(require("../hooks/useLock")); var _keyUtil = require("../utils/keyUtil"); var _MultipleSelector = _interopRequireDefault(require("./MultipleSelector")); var _SingleSelector = _interopRequireDefault(require("./SingleSelector")); function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); } function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; } /** * 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 */ var Selector = function Selector(props, ref) { var inputRef = (0, _react.useRef)(null); var compositionStatusRef = (0, _react.useRef)(false); var prefixCls = props.prefixCls, open = props.open, mode = props.mode, showSearch = props.showSearch, tokenWithEnter = props.tokenWithEnter, disabled = props.disabled, autoClearSearchValue = props.autoClearSearchValue, onSearch = props.onSearch, onSearchSubmit = props.onSearchSubmit, onToggleOpen = props.onToggleOpen, onInputKeyDown = props.onInputKeyDown, domRef = props.domRef; // ======================= Ref ======================= React.useImperativeHandle(ref, function () { return { focus: function focus(options) { inputRef.current.focus(options); }, blur: function blur() { inputRef.current.blur(); } }; }); // ====================== Input ====================== var _useLock = (0, _useLock3.default)(0), _useLock2 = (0, _slicedToArray2.default)(_useLock, 2), getInputMouseDown = _useLock2[0], setInputMouseDown = _useLock2[1]; var onInternalInputKeyDown = function onInternalInputKeyDown(event) { var which = event.which; if (which === _KeyCode.default.UP || which === _KeyCode.default.DOWN) { event.preventDefault(); } if (onInputKeyDown) { onInputKeyDown(event); } if (which === _KeyCode.default.ENTER && mode === 'tags' && !compositionStatusRef.current && !open) { // When menu isn't open, OptionList won't trigger a value change // So when enter is pressed, the tag's input value should be emitted here to let selector know onSearchSubmit === null || onSearchSubmit === void 0 || onSearchSubmit(event.target.value); } if ((0, _keyUtil.isValidateOpenKey)(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 pastedTextRef = (0, _react.useRef)(null); var triggerOnSearch = function triggerOnSearch(value) { if (onSearch(value, true, compositionStatusRef.current) !== false) { onToggleOpen(true); } }; var onInputCompositionStart = function onInputCompositionStart() { compositionStatusRef.current = true; }; var onInputCompositionEnd = function onInputCompositionEnd(e) { compositionStatusRef.current = false; // Trigger search again to support `tokenSeparators` with typewriting if (mode !== 'combobox') { triggerOnSearch(e.target.value); } }; var onInputChange = function onInputChange(event) { var value = event.target.value; // Pasted text should replace back to origin content if (tokenWithEnter && pastedTextRef.current && /[\r\n]/.test(pastedTextRef.current)) { // CRLF will be treated as a single space for input element var replacedText = pastedTextRef.current.replace(/[\r\n]+$/, '').replace(/\r\n/g, ' ').replace(/[\r\n]/g, ' '); value = value.replace(replacedText, pastedTextRef.current); } pastedTextRef.current = null; triggerOnSearch(value); }; var onInputPaste = function onInputPaste(e) { var clipboardData = e.clipboardData; var value = clipboardData === null || clipboardData === void 0 ? void 0 : clipboardData.getData('text'); pastedTextRef.current = value || ''; }; var onClick = function onClick(_ref) { var target = _ref.target; if (target !== inputRef.current) { // Should focus input if click the selector var isIE = document.body.style.msTouchAction !== undefined; if (isIE) { setTimeout(function () { inputRef.current.focus(); }); } else { inputRef.current.focus(); } } }; var onMouseDown = function onMouseDown(event) { var inputMouseDown = getInputMouseDown(); // when mode is combobox and it is disabled, don't prevent default behavior // https://github.com/ant-design/ant-design/issues/37320 // https://github.com/ant-design/ant-design/issues/48281 if (event.target !== inputRef.current && !inputMouseDown && !(mode === 'combobox' && disabled)) { event.preventDefault(); } if (mode !== 'combobox' && (!showSearch || !inputMouseDown) || !open) { if (open && autoClearSearchValue !== false) { onSearch('', true, false); } onToggleOpen(); } }; // ================= Inner Selector ================== var sharedProps = { inputRef: inputRef, onInputKeyDown: onInternalInputKeyDown, onInputMouseDown: onInternalInputMouseDown, onInputChange: onInputChange, onInputPaste: onInputPaste, onInputCompositionStart: onInputCompositionStart, onInputCompositionEnd: onInputCompositionEnd }; var selectNode = mode === 'multiple' || mode === 'tags' ? /*#__PURE__*/React.createElement(_MultipleSelector.default, (0, _extends2.default)({}, props, sharedProps)) : /*#__PURE__*/React.createElement(_SingleSelector.default, (0, _extends2.default)({}, props, sharedProps)); return /*#__PURE__*/React.createElement("div", { ref: domRef, className: "".concat(prefixCls, "-selector"), onClick: onClick, onMouseDown: onMouseDown }, selectNode); }; var ForwardSelector = /*#__PURE__*/React.forwardRef(Selector); if (process.env.NODE_ENV !== 'production') { ForwardSelector.displayName = 'Selector'; } var _default = exports.default = ForwardSelector;