zy-react-library/src/components/Select/Basic/index.js

import { Select } from "antd";
import { useEffect, useMemo } from "react";
import { getMatchedItems, getUnmatchedItems } from "../../../utils/index.js";

/**
 * 基础下拉组件
 */
function BasicSelect(props) {
  const {
    onGetData,
    onChange,
    onGetLabel,
    onGetOption,
    placeholder = "",
    data = [],
    nameKey = "name",
    idKey = "id",
    labelRender,
    exclude = [],
    include = [],
    ...restProps
  } = props;

  const actualData = useMemo(() => {
    let result = data;

    if (exclude.length > 0) {
      result = getUnmatchedItems({ list: result, value: exclude, idKey });
    }

    if (include.length > 0) {
      result = getMatchedItems({ list: result, value: include, idKey });
    }

    return result;
  }, [data, exclude, include, idKey]);

  const handleChange = (event, option) => {
    if (onGetLabel || onGetOption) {
      if (Array.isArray(event)) {
        if (event.length > 0) {
          const findItems = [];
          const names = [];
          event.forEach((item) => {
            const findItem = actualData.find(dataItem => dataItem[idKey] === item);
            if (findItem) {
              findItems.push(findItem);
              names.push(findItem[nameKey]);
            }
          });
          onGetLabel?.(names);
          onGetOption?.(findItems);
        }
        else {
          onGetLabel?.([]);
          onGetOption?.([]);
        }
      }
      else {
        if (event) {
          const findItem = actualData.find(item => item[idKey] === event);
          onGetLabel?.(findItem[nameKey]);
          onGetOption?.(findItem);
        }
        else {
          onGetLabel?.("");
          onGetOption?.({});
        }
      }
    }
    onChange?.(event, option);
  };

  useEffect(() => {
    onGetData?.(actualData);
  }, [actualData]);

  return (
    <Select
      placeholder={`请选择${placeholder}`}
      showSearch={{ optionFilterProp: "children" }}
      allowClear
      onChange={handleChange}
      options={actualData.map(item => ({
        value: item[idKey],
        label: labelRender ? labelRender(item) : item[nameKey],
      }))}
      {...restProps}
    />
  );
}

BasicSelect.displayName = "BasicSelect";

export default BasicSelect;