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

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

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _antd = require("antd");
var _Table = _interopRequireDefault(require("./Table"));
var _lodash = require("lodash");
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["onChange", "labelInValue", "columns", "request", "debounceTimeout", "tipWidth"];
var columnsDefault = [{
  dataIndex: "label",
  title: "名称"
}, {
  dataIndex: "value",
  title: "编号"
}];
var PopoverSelect = function PopoverSelect(props) {
  var _onChange = props.onChange,
    _props$labelInValue = props.labelInValue,
    labelInValue = _props$labelInValue === void 0 ? true : _props$labelInValue,
    _props$columns = props.columns,
    columns = _props$columns === void 0 ? columnsDefault : _props$columns,
    request = props.request,
    _props$debounceTimeou = props.debounceTimeout,
    debounceTimeout = _props$debounceTimeou === void 0 ? 800 : _props$debounceTimeou,
    tipWidth = props.tipWidth,
    rest = (0, _objectWithoutProperties2["default"])(props, _excluded);
  var _React$useState = _react["default"].useState(0),
    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
    width = _React$useState2[0],
    setWidth = _React$useState2[1];
  var _React$useState3 = _react["default"].useState(false),
    _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
    fetching = _React$useState4[0],
    setFetching = _React$useState4[1];
  var _React$useState5 = _react["default"].useState(false),
    _React$useState6 = (0, _slicedToArray2["default"])(_React$useState5, 2),
    visible = _React$useState6[0],
    setVisible = _React$useState6[1];
  var PopoverRef = _react["default"].useRef(true);
  var _React$useState7 = _react["default"].useState([]),
    _React$useState8 = (0, _slicedToArray2["default"])(_React$useState7, 2),
    dataSource = _React$useState8[0],
    setDataSource = _React$useState8[1];
  var ValueField = _react["default"].useMemo(function () {
    return props.fieldNames && props.fieldNames.value || 'value';
  }, [props.fieldNames]);
  var LableField = _react["default"].useMemo(function () {
    return props.fieldNames && props.fieldNames.label || 'label';
  }, [props.fieldNames]);
  var inputRef = _react["default"].useRef(null);
  _react["default"].useLayoutEffect(function () {
    if (inputRef.current) {
      if (tipWidth) {
        setWidth(tipWidth);
      } else {
        var offsetWidth = inputRef.current.offsetWidth;
        setWidth(offsetWidth - 30);
      }
    }
  }, []);

  // 转换
  var saveTr = function saveTr(item) {
    var _ref = item || {},
      value = _ref[ValueField],
      label = _ref[LableField];
    return (0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, ValueField, value), LableField, label);
  };

  // 选中数据
  var onClick = function 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(function (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["default"].useRef(0);
  // 请求数据
  var debounceFetcher = _react["default"].useMemo(function () {
    var loadOptions = function loadOptions(value) {
      if (!PopoverRef.current) {
        PopoverRef.current = true;
        return;
      }
      fetchRef.current += 1;
      var fetchId = fetchRef.current;
      if (request) {
        setFetching(true);
        request(value).then(function (list) {
          if (fetchId !== fetchRef.current) {
            // for fetch callback order
            return;
          }
          setDataSource(list);
          setFetching(false);
        });
      }
    };
    return (0, _lodash.debounce)(loadOptions, debounceTimeout);
  }, [request, debounceTimeout]);
  var getOptions = function getOptions() {
    return dataSource.map(function (item) {
      var value = item[ValueField],
        label = item[LableField];
      return (0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, ValueField, value), LableField, label);
    });
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Popover, {
    trigger: "click",
    placement: "bottomLeft",
    open: visible,
    onOpenChange: function onOpenChange(vis) {
      setVisible(vis);
    },
    content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Table["default"], {
      columns: columns,
      dataSource: dataSource,
      value: props.value,
      width: width,
      mode: props.mode,
      labelInValue: labelInValue,
      onClick: onClick,
      loading: fetching,
      ValueField: ValueField
    }),
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      ref: inputRef,
      className: "popover-select-warp",
      style: {
        width: "100%"
      },
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Select, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
        allowClear: true,
        labelInValue: labelInValue,
        filterOption: false,
        style: {
          width: "100%"
        },
        onSearch: debounceFetcher,
        showSearch: true
      }, rest), {}, {
        value: props.value,
        notFoundContent: fetching ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Spin, {
          size: "small"
        }) : null,
        onChange: function onChange(value, item) {
          return _onChange && _onChange(value, item);
        },
        options: getOptions(),
        dropdownStyle: {
          display: "none"
        }
      }))
    })
  });
};
var _default = exports["default"] = PopoverSelect;
module.exports = exports.default;