linkmore-design/lib/lm-select/NormalSelect.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 _hooks = require("../hooks");
var _select = _interopRequireDefault(require("../select"));
var _classnames = _interopRequireDefault(require("classnames"));
var _react = _interopRequireWildcard(require("react"));
var _useCheckboxOptions = require("./useCheckboxOptions");
var _utils = require("./utils");
const prefixCls = 'lm_select';

// 不同类型Select, 不同的默认配置
const config = {
  select: {
    placeholder: '请选择',
    size: 'middle'
  },
  checkbox: {
    mode: 'multiple',
    placeholder: '请选择',
    size: 'middle'
  },
  cascader: {}
};

// 基于 antd 的 Select 组件
const NormalSelect = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
  const {
    children,
    className,
    dropdownClassName,
    type = 'select',
    options,
    showSearch,
    ...others
  } = props;
  const [checkedValues, setCheckedValues] = _react.default.useState(others.defaultValue || []);
  const [search, setSearch] = _react.default.useState('');

  // 支持options和children渲染，优先级options > children, 计算时需要把children转换为options
  const renderOptions = (0, _react.useMemo)(() => options || (0, _utils.getOptions)(children), [options, children]);
  const onChange = (0, _hooks.useEvent)(v => {
    setCheckedValues(v);
    props?.onChange?.(v, renderOptions?.filter(item => {
      if (typeof v === 'boolean') {
        return v === item.value;
      }
      return v?.includes(item.value);
    }));
  });
  const isSearch = (0, _react.useMemo)(() => showSearch || renderOptions.length > 8, [renderOptions.length, showSearch]);
  // 获取dropdown
  const dropdownRender = (0, _useCheckboxOptions.useCheckboxOptions)(renderOptions, {
    value: checkedValues,
    onChange
  }, search);
  return /*#__PURE__*/_react.default.createElement(_select.default, (0, _extends2.default)({
    allowClear: true,
    showArrow: true,
    className: (0, _classnames.default)(className, prefixCls),
    ref: ref,
    options: options,
    showSearch: isSearch,
    dropdownRender: o => type === 'checkbox' ? dropdownRender : o,
    value: checkedValues,
    searchValue: search,
    onSearch: isSearch && setSearch
  }, config[type], others, {
    onChange: onChange,
    dropdownClassName: (0, _classnames.default)('lm_select_dropdown', dropdownClassName)
  }), children);
});
var _default = NormalSelect;
exports.default = _default;