linkmore-design/es/lm-select/NormalSelect.js

🌈 🚀lm组件库。🚀

import _extends from "@babel/runtime/helpers/esm/extends";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["children", "className", "dropdownClassName", "type", "options", "showSearch"];
import { useEvent } from "../hooks";
import Select from "../select";
import classNames from 'classnames';
import React, { forwardRef, useMemo } from 'react';
import { useCheckboxOptions } from "./useCheckboxOptions";
import { getOptions } from "./utils";
var prefixCls = 'lm_select';

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

// 基于 antd 的 Select 组件
var NormalSelect = /*#__PURE__*/forwardRef(function (props, ref) {
  var children = props.children,
    className = props.className,
    dropdownClassName = props.dropdownClassName,
    _props$type = props.type,
    type = _props$type === void 0 ? 'select' : _props$type,
    options = props.options,
    showSearch = props.showSearch,
    others = _objectWithoutProperties(props, _excluded);
  var _React$useState = React.useState(others.defaultValue || []),
    _React$useState2 = _slicedToArray(_React$useState, 2),
    checkedValues = _React$useState2[0],
    setCheckedValues = _React$useState2[1];
  var _React$useState3 = React.useState(''),
    _React$useState4 = _slicedToArray(_React$useState3, 2),
    search = _React$useState4[0],
    setSearch = _React$useState4[1];

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