@antdp/fuzzy-query/esm/PopoverSelect/index.js

基于antd封装的组件 模糊查询 自定义提示

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
var _excluded = ["onChange", "labelInValue", "columns", "request", "debounceTimeout", "tipWidth"];
import React from "react";
import { Popover, Select, Spin } from "antd";
import Table from "./Table";
import { debounce } from "lodash";
import { jsx as _jsx } from "react/jsx-runtime";
var columnsDefault = [{
  dataIndex: "label",
  title: "名称"
}, {
  dataIndex: "value",
  title: "编号"
}];
var PopoverSelect = props => {
  var {
      onChange: _onChange,
      labelInValue = true,
      columns = columnsDefault,
      request,
      debounceTimeout = 800,
      tipWidth
    } = props,
    rest = _objectWithoutPropertiesLoose(props, _excluded);
  var [width, setWidth] = React.useState(0);
  var [fetching, setFetching] = React.useState(false);
  var [visible, setVisible] = React.useState(false);
  var PopoverRef = React.useRef(true);
  var [dataSource, setDataSource] = React.useState([]);
  var ValueField = React.useMemo(() => props.fieldNames && props.fieldNames.value || 'value', [props.fieldNames]);
  var LableField = React.useMemo(() => props.fieldNames && props.fieldNames.label || 'label', [props.fieldNames]);
  var inputRef = React.useRef(null);
  React.useLayoutEffect(() => {
    if (inputRef.current) {
      if (tipWidth) {
        setWidth(tipWidth);
      } else {
        var offsetWidth = inputRef.current.offsetWidth;
        setWidth(offsetWidth - 30);
      }
    }
  }, []);

  // 转换
  var saveTr = item => {
    var {
      [ValueField]: value,
      [LableField]: label
    } = item || {};
    return {
      [ValueField]: value,
      [LableField]: label
    };
  };

  // 选中数据
  var onClick = (item, isCheck) => {
    var nextValue = saveTr(item);
    if (!labelInValue) {
      nextValue = item && nextValue[ValueField];
    }
    if (["tags", "multiple"].includes(props.mode)) {
      if (Array.isArray(props.value)) {
        if (isCheck) {
          // 1. 选中 直接往里面填
          nextValue = props.value.concat(nextValue);
        } else {
          nextValue = props.value.filter(it => {
            if (labelInValue && it) {
              return it[ValueField] !== nextValue[ValueField];
            }
            return it !== nextValue;
          });
        }
      } else {
        if (isCheck) {
          nextValue = [nextValue];
        } else {
          nextValue = [];
        }
      }
    } else {
      setVisible(false);
      if (!isCheck) {
        nextValue = undefined;
        return;
      }
      PopoverRef.current = false;
    }
    _onChange && _onChange(nextValue, nextValue);
  };
  var fetchRef = React.useRef(0);
  // 请求数据
  var debounceFetcher = React.useMemo(() => {
    var loadOptions = value => {
      if (!PopoverRef.current) {
        PopoverRef.current = true;
        return;
      }
      fetchRef.current += 1;
      var fetchId = fetchRef.current;
      if (request) {
        setFetching(true);
        request(value).then(list => {
          if (fetchId !== fetchRef.current) {
            // for fetch callback order
            return;
          }
          setDataSource(list);
          setFetching(false);
        });
      }
    };
    return debounce(loadOptions, debounceTimeout);
  }, [request, debounceTimeout]);
  var getOptions = () => {
    return dataSource.map(item => {
      var {
        [ValueField]: value,
        [LableField]: label
      } = item;
      return {
        [ValueField]: value,
        [LableField]: label
      };
    });
  };
  return /*#__PURE__*/_jsx(Popover, {
    trigger: "click",
    placement: "bottomLeft",
    open: visible,
    onOpenChange: vis => {
      setVisible(vis);
    },
    content: /*#__PURE__*/_jsx(Table, {
      columns: columns,
      dataSource: dataSource,
      value: props.value,
      width: width,
      mode: props.mode,
      labelInValue: labelInValue,
      onClick: onClick,
      loading: fetching,
      ValueField: ValueField
    }),
    children: /*#__PURE__*/_jsx("div", {
      ref: inputRef,
      className: "popover-select-warp",
      style: {
        width: "100%"
      },
      children: /*#__PURE__*/_jsx(Select, _extends({
        allowClear: true,
        labelInValue: labelInValue,
        filterOption: false,
        style: {
          width: "100%"
        },
        onSearch: debounceFetcher,
        showSearch: true
      }, rest, {
        value: props.value,
        notFoundContent: fetching ? /*#__PURE__*/_jsx(Spin, {
          size: "small"
        }) : null,
        onChange: (value, item) => _onChange && _onChange(value, item),
        options: getOptions(),
        dropdownStyle: {
          display: "none"
        }
      }))
    })
  });
};
export default PopoverSelect;