acud/lib/select/src/Selector/MultipleSelector.js

acg react 组件库

"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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var React = _react;
var _classnames = _interopRequireDefault(require("classnames"));
var _pickAttrs = _interopRequireDefault(require("rc-util/lib/pickAttrs"));
var _rcOverflow = _interopRequireDefault(require("rc-overflow"));
var _TransBtn = _interopRequireDefault(require("../TransBtn"));
var _Input = _interopRequireDefault(require("./Input"));
var _useLayoutEffect = _interopRequireDefault(require("../hooks/useLayoutEffect"));
var _LocaleReceiver = require("../../../locale-provider/LocaleReceiver");
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); }
// import Overflow from '../../../overflow';

var onPreventMouseDown = function onPreventMouseDown(event) {
  event.preventDefault();
  event.stopPropagation();
};
function itemKey(value) {
  var _a;
  return (_a = value.key) !== null && _a !== void 0 ? _a : value.value;
}
var SelectSelector = function SelectSelector(props) {
  var id = props.id,
    prefixCls = props.prefixCls,
    values = props.values,
    open = props.open,
    searchValue = props.searchValue,
    inputRef = props.inputRef,
    placeholder = props.placeholder,
    disabled = props.disabled,
    mode = props.mode,
    showSearch = props.showSearch,
    autoFocus = props.autoFocus,
    autoComplete = props.autoComplete,
    accessibilityIndex = props.accessibilityIndex,
    tabIndex = props.tabIndex,
    _props$showAllSelecte = props.showAllSelectedTag,
    showAllSelectedTag = _props$showAllSelecte === void 0 ? false : _props$showAllSelecte,
    removeIcon = props.removeIcon,
    maxTagCount = props.maxTagCount,
    maxTagTextLength = props.maxTagTextLength,
    _props$maxTagPlacehol = props.maxTagPlaceholder,
    maxTagPlaceholder = _props$maxTagPlacehol === void 0 ? function (omittedValues) {
      return "+ ".concat(omittedValues.length, " ...");
    } : _props$maxTagPlacehol,
    tagRender = props.tagRender,
    onToggleOpen = props.onToggleOpen,
    onSelect = props.onSelect,
    onInputChange = props.onInputChange,
    onInputPaste = props.onInputPaste,
    onInputKeyDown = props.onInputKeyDown,
    onInputMouseDown = props.onInputMouseDown,
    onInputCompositionStart = props.onInputCompositionStart,
    onInputCompositionEnd = props.onInputCompositionEnd,
    onClearMouseDown = props.onClearMouseDown;
  var _useLocaleReceiver = (0, _LocaleReceiver.useLocaleReceiver)('Select'),
    _useLocaleReceiver2 = (0, _slicedToArray2["default"])(_useLocaleReceiver, 1),
    selectLocale = _useLocaleReceiver2[0];
  var placeholderLocale = placeholder || selectLocale.placeholder;
  var measureRef = React.useRef(null);
  var _useState = (0, _react.useState)(0),
    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
    inputWidth = _useState2[0],
    setInputWidth = _useState2[1];
  var _useState3 = (0, _react.useState)(false),
    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
    focused = _useState4[0],
    setFocused = _useState4[1];
  var selectionPrefixCls = "".concat(prefixCls, "-selection");
  // ===================== Search ======================
  var inputValue = open || mode === 'tags' ? searchValue : '';
  // const inputEditable: boolean = !showAllSelectedTag && (mode === 'tags' || (showSearch && (open || focused)));
  // 不限制已全选标签下不能搜索
  var inputEditable = mode === 'tags' || showSearch && (open || focused);
  // We measure width and set to the input immediately
  (0, _useLayoutEffect["default"])(function () {
    setInputWidth(measureRef.current.scrollWidth);
  }, [inputValue]);
  // ===================== Render ======================
  // >>> Render Selector Node. Includes Item & Rest
  function defaultRenderSelector(content, itemDisabled, closable, onClose, isRest) {
    return /*#__PURE__*/React.createElement("span", {
      className: (0, _classnames["default"])("".concat(selectionPrefixCls, "-item"), (0, _defineProperty2["default"])({}, "".concat(selectionPrefixCls, "-item-disabled"), itemDisabled))
    }, /*#__PURE__*/React.createElement("span", {
      className: "".concat(selectionPrefixCls, "-item-content"),
      "aria-disabled": !closable
    }, content), isRest ? null : closable ? /*#__PURE__*/React.createElement(_TransBtn["default"], {
      className: "".concat(selectionPrefixCls, "-item-remove"),
      onMouseDown: onPreventMouseDown,
      onClick: onClose,
      customizeIcon: removeIcon
    }, "\xD7") : /*#__PURE__*/React.createElement(_TransBtn["default"], {
      className: "".concat(selectionPrefixCls, "-item-remove"),
      disabled: !closable,
      customizeIcon: removeIcon
    }, "\xD7"));
  }
  function customizeRenderSelector(value, content, itemDisabled, closable, onClose) {
    var onMouseDown = function onMouseDown(e) {
      onPreventMouseDown(e);
      onToggleOpen(true);
    };
    return /*#__PURE__*/React.createElement("span", {
      onMouseDown: onMouseDown
    }, tagRender({
      label: content,
      value: value,
      disabled: itemDisabled,
      closable: closable,
      onClose: onClose
    }));
  }
  function renderItem(_ref) {
    var itemDisabled = _ref.disabled,
      label = _ref.label,
      value = _ref.value;
    var closable = !disabled && !itemDisabled;
    var displayLabel = label;
    if (typeof maxTagTextLength === 'number') {
      if (typeof label === 'string' || typeof label === 'number') {
        var strLabel = String(displayLabel);
        if (strLabel.length > maxTagTextLength) {
          displayLabel = "".concat(strLabel.slice(0, maxTagTextLength), "...");
        }
      }
    }
    var onClose = function onClose(event) {
      if (event) {
        event.stopPropagation();
      }
      onSelect(value, {
        selected: false
      });
    };
    return typeof tagRender === 'function' ? customizeRenderSelector(value, displayLabel, itemDisabled, closable, onClose) : defaultRenderSelector(displayLabel, itemDisabled, closable, onClose);
  }
  function renderRest(omittedValues) {
    var content = typeof maxTagPlaceholder === 'function' ? maxTagPlaceholder(omittedValues) : maxTagPlaceholder;
    return defaultRenderSelector(content, false, false, null, true);
  }
  // >>> Input Node
  var inputNode = /*#__PURE__*/React.createElement("div", {
    className: "".concat(selectionPrefixCls, "-search"),
    style: {
      width: inputWidth
    },
    onFocus: function onFocus() {
      setFocused(true);
    },
    onBlur: function onBlur() {
      setFocused(false);
    }
  }, /*#__PURE__*/React.createElement(_Input["default"], {
    ref: inputRef,
    open: open,
    prefixCls: prefixCls,
    id: id,
    inputElement: null,
    disabled: disabled,
    autoFocus: autoFocus,
    autoComplete: autoComplete,
    editable: inputEditable,
    accessibilityIndex: accessibilityIndex,
    value: inputValue,
    onKeyDown: onInputKeyDown,
    onMouseDown: onInputMouseDown,
    onChange: onInputChange,
    onPaste: onInputPaste,
    onCompositionStart: onInputCompositionStart,
    onCompositionEnd: onInputCompositionEnd,
    tabIndex: tabIndex,
    attrs: (0, _pickAttrs["default"])(props, true)
  }), /*#__PURE__*/React.createElement("span", {
    ref: measureRef,
    className: "".concat(selectionPrefixCls, "-search-mirror"),
    "aria-hidden": true
  }, inputValue, "\xA0"));
  // 渲染『全部』tag
  function renderMockAllSelect() {
    var content = selectLocale.checkAll + "\uFF08".concat(values.length, "\uFF09");
    // 取消全选
    var onClose = function onClose(event) {
      if (event) {
        event.stopPropagation();
      }
      onClearMouseDown === null || onClearMouseDown === void 0 ? void 0 : onClearMouseDown(null);
    };
    return defaultRenderSelector(content, false, true, onClose, false);
  }
  // >>> Selections
  var selectionNode = /*#__PURE__*/React.createElement(_rcOverflow["default"], {
    prefixCls: "".concat(selectionPrefixCls, "-overflow"),
    data: values,
    renderItem: renderItem,
    renderRest: renderRest,
    suffix: inputNode,
    itemKey: itemKey,
    maxCount: maxTagCount
  });
  // 2024-05-07 当showAllSelectedTag为true的时候，造一个『全部』tag样式出来
  var allSelectedNode = /*#__PURE__*/React.createElement(_rcOverflow["default"], {
    prefixCls: "".concat(selectionPrefixCls, "-overflow"),
    data: [{
      value: 'mock',
      key: 'mock'
    }],
    renderItem: renderMockAllSelect,
    suffix: inputNode,
    itemKey: itemKey,
    maxCount: 2
  });
  return /*#__PURE__*/React.createElement(React.Fragment, null, !showAllSelectedTag ? selectionNode : allSelectedNode, !values.length && !inputValue && /*#__PURE__*/React.createElement("span", {
    className: "".concat(selectionPrefixCls, "-placeholder")
  }, placeholderLocale));
};
var _default = exports["default"] = SelectSelector;