linkmore-design/es/select/index.js

🌈 🚀lm组件库。🚀

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
var _excluded = ["children", "className", "size", "disabled", "popupClassName", "options", "value", "defaultLabel", "suffix", "icon", "iconClick"];
import classNames from 'classnames';
import { isEmpty } from 'lodash';
import React, { forwardRef, useMemo } from 'react';
import Button from "../button";
import ConfigProvider from "../config-provider";
import DisabledContext from "../config-provider/DisabledContext";
import SizeContext from "../config-provider/SizeContext";
import Select from "./select";
var ConfigContext = ConfigProvider.ConfigContext;
var useResetOptions = function useResetOptions(_ref) {
  var value = _ref.value,
    originOptions = _ref.originOptions,
    fatalOptions = _ref.fatalOptions,
    fieldNames = _ref.fieldNames;
  var _React$useContext = React.useContext(ConfigContext),
    locale = _React$useContext.locale;
  var deleteText = useMemo(function () {
    return (locale === null || locale === void 0 ? void 0 : locale.locale) === 'en' ? 'Deleted' : '已删';
  }, [locale]);
  var resetFieldNames = useMemo(function () {
    return _objectSpread({
      value: 'value',
      label: 'label'
    }, fieldNames);
  }, [fieldNames]);
  /** 删除项的文字回显 */
  var DeleteLabel = function DeleteLabel(_ref2) {
    var label = _ref2.label;
    if (typeof label === 'string') {
      return /*#__PURE__*/React.createElement(React.Fragment, null, label !== null && label !== void 0 ? label : '', /*#__PURE__*/React.createElement("span", {
        className: "lm_select_delete_tag"
      }, "(", deleteText, ")"));
    }
    return label || '';
  };

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

  /** 最终的重组数据 */
  var resetOptions = useMemo(function () {
    return [].concat(_toConsumableArray(originOptions || []), _toConsumableArray(extraOpptions));
  }, [originOptions, extraOpptions]);

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

  // ===================== Size =====================
  var size = customizeSize || React.useContext(SizeContext) || 'middle';

  // ===================== Disabled =====================
  var disabled = React.useContext(DisabledContext);
  var mergedDisabled = customDisabled !== null && customDisabled !== void 0 ? customDisabled : disabled;

  // 当前值是否存于选项中
  var hasOption = useMemo(function () {
    var flag = false;
    if (children) {
      React.Children.forEach(children, function (child) {
        if ( /*#__PURE__*/React.isValidElement(child)) {
          var childValue = child.props.value;
          if (!flag) {
            flag = childValue === value;
          }
        }
      });
    }
    if (options) {
      flag = !!options.some(function (v) {
        var _props$fieldNames$val, _props$fieldNames;
        return v[(_props$fieldNames$val = (_props$fieldNames = props.fieldNames) === null || _props$fieldNames === void 0 ? void 0 : _props$fieldNames.value) !== null && _props$fieldNames$val !== void 0 ? _props$fieldNames$val : 'value'] === value;
      });
    }
    return flag;
  }, [children, value, options, props.fieldNames]);

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