linkmore-design/lib/select/index.js

🌈 🚀lm组件库。🚀

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _classnames = _interopRequireDefault(require("classnames"));
var _lodash = require("lodash");
var _react = _interopRequireWildcard(require("react"));
var _button = _interopRequireDefault(require("../button"));
var _configProvider = _interopRequireDefault(require("../config-provider"));
var _DisabledContext = _interopRequireDefault(require("../config-provider/DisabledContext"));
var _SizeContext = _interopRequireDefault(require("../config-provider/SizeContext"));
var _select = _interopRequireDefault(require("./select"));
const {
  ConfigContext
} = _configProvider.default;
const useResetOptions = ({
  value,
  originOptions,
  fatalOptions,
  fieldNames
}) => {
  const {
    locale
  } = _react.default.useContext(ConfigContext);
  const deleteText = (0, _react.useMemo)(() => locale?.locale === 'en' ? 'Deleted' : '已删', [locale]);
  const resetFieldNames = (0, _react.useMemo)(() => ({
    value: 'value',
    label: 'label',
    ...fieldNames
  }), [fieldNames]);
  /** 删除项的文字回显 */
  const DeleteLabel = ({
    label
  }) => {
    if (typeof label === 'string') {
      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, label ?? '', /*#__PURE__*/_react.default.createElement("span", {
        className: "lm_select_delete_tag"
      }, "(", deleteText, ")"));
    }
    return label || '';
  };

  /** 额外的已删除的下拉选项, 用于和原始数据源合并 */
  const extraOpptions = (0, _react.useMemo)(() => {
    if ((0, _lodash.isEmpty)(value)) return [];
    const res = fatalOptions?.reduce((pre, cur) => {
      /** 当前值是否存在于原始下拉数据中, 不存在时渲染已删除的文字回显 */
      const hasValue = originOptions?.some(v => v[resetFieldNames.value] === cur[resetFieldNames.value]);
      const hasSelectedValue = Array.isArray(value) ? value.includes(cur[resetFieldNames.value]) : cur[resetFieldNames.value] === value;
      if (!hasValue && hasSelectedValue) {
        return [...pre, {
          [resetFieldNames.value]: cur[resetFieldNames.value],
          [resetFieldNames.label]: /*#__PURE__*/_react.default.createElement(DeleteLabel, {
            label: cur[resetFieldNames.label]
          })
        }];
      }
      return pre;
    }, []);
    return res || [];
  }, [originOptions, value, fatalOptions, resetFieldNames]);

  /** 最终的重组数据 */
  const resetOptions = (0, _react.useMemo)(() => [...(originOptions || []), ...extraOpptions], [originOptions, extraOpptions]);

  /** 若不使用已删除数据处理, 则返还原数据 */
  if (!fatalOptions) return originOptions;
  return resetOptions;
};
const prefixCls = 'lm_select';
const CLMSelect = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
  const {
    children,
    className,
    size: customizeSize,
    disabled: customDisabled,
    popupClassName,
    options,
    value,
    defaultLabel,
    suffix,
    icon,
    iconClick,
    ...rest
  } = props;

  // ===================== Size =====================
  const size = customizeSize || _react.default.useContext(_SizeContext.default) || 'middle';

  // ===================== Disabled =====================
  const disabled = _react.default.useContext(_DisabledContext.default);
  const mergedDisabled = customDisabled ?? disabled;

  // 当前值是否存于选项中
  const hasOption = (0, _react.useMemo)(() => {
    let flag = false;
    if (children) {
      _react.default.Children.forEach(children, child => {
        if ( /*#__PURE__*/_react.default.isValidElement(child)) {
          const {
            value: childValue
          } = child.props;
          if (!flag) {
            flag = childValue === value;
          }
        }
      });
    }
    if (options) {
      flag = !!options.some(v => v[props.fieldNames?.value ?? 'value'] === value);
    }
    return flag;
  }, [children, value, options, props.fieldNames]);

  // 重组value: 传入value但找不到options项时，展示默认label
  const resetValue = (0, _react.useMemo)(() => {
    if (value && !hasOption) return defaultLabel ?? value;
    return value;
  }, [value, defaultLabel, hasOption]);
  const resetOptions = useResetOptions({
    value: resetValue ?? props.defaultValue,
    originOptions: options,
    fatalOptions: props?.fatalOptions,
    fieldNames: props.fieldNames
  });
  if (icon) {
    return /*#__PURE__*/_react.default.createElement("div", {
      className: "lm_select_has_icon",
      style: props.style
    }, /*#__PURE__*/_react.default.createElement(_select.default, (0, _extends2.default)({
      className: (0, _classnames.default)(className, prefixCls),
      size: size,
      ref: ref,
      value: resetValue,
      options: resetOptions,
      disabled: mergedDisabled ?? undefined
    }, rest, {
      popupClassName: (0, _classnames.default)('lm_select_dropdown', popupClassName)
    }), children), /*#__PURE__*/_react.default.createElement(_button.default, {
      size: size,
      onClick: iconClick,
      className: "lm_select_icon_button",
      disabled: mergedDisabled ?? undefined,
      icon: icon
    }));
  }
  return /*#__PURE__*/_react.default.createElement(_select.default, (0, _extends2.default)({
    className: (0, _classnames.default)(className, prefixCls),
    size: size,
    ref: ref,
    value: resetValue,
    options: resetOptions,
    disabled: mergedDisabled ?? undefined
  }, rest, {
    popupClassName: (0, _classnames.default)('lm_select_dropdown', popupClassName)
  }), children);
});
const LMSelect = CLMSelect;
LMSelect.Option = _select.default.Option;
LMSelect.OptGroup = _select.default.OptGroup;
var _default = LMSelect;
exports.default = _default;