linkmore-design/lib/advanced-filter/components/Complex/DynamicComponent.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 _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
var _moment = _interopRequireDefault(require("moment"));
var _react = _interopRequireWildcard(require("react"));
var _cascader = _interopRequireDefault(require("../../../cascader"));
var _datePicker = _interopRequireDefault(require("../../../date-picker"));
var _input = _interopRequireDefault(require("../../../input"));
var _inputNumber = _interopRequireDefault(require("../../../input-number"));
var _select = _interopRequireDefault(require("../../../select"));
/** 渲染日期选择框: 修改日期返回值 */
const RenderDatePicker = props => {
  const {
    value,
    onChange,
    picker = 'date',
    ...restProps
  } = props;
  const defaultValue = (0, _react.useMemo)(() => {
    let nValue;
    // 周/月/季/年 需要处理回显
    if (picker !== 'date') return nValue;
    if (value) {
      return (0, _moment.default)(value);
    }
    return nValue;
  }, [value]);

  // 选中时间段的触发
  const handleOnChange = (dates, dateStrings) => {
    onChange(dateStrings);
  };
  return /*#__PURE__*/_react.default.createElement(_datePicker.default, (0, _extends2.default)({}, restProps, {
    value: defaultValue,
    onChange: handleOnChange
  }));
};

/** 渲染日期区间选择框: 修改了日期返回值 */
const RenderRangePicker = props => {
  const {
    value,
    onChange,
    ...restProps
  } = props;
  const defaultValue = (0, _react.useMemo)(() => {
    if ((0, _isEmpty.default)(value)) return undefined;
    return [(0, _moment.default)(value[0]), (0, _moment.default)(value[1])];
  }, [value]);

  // 选中时间段的触发
  const handleOnChange = (dates, dateStrings) => {
    onChange(dateStrings);
  };
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_datePicker.default.RangePicker, (0, _extends2.default)({
    picker: "date"
  }, restProps, {
    value: defaultValue,
    onChange: handleOnChange
  })));
};

// type: input, number, code, select, checkbox, date, range, dateTime
const DynamicComponent = ({
  type,
  options = [],
  fieldNames: itemFieldNames,
  ...restProps
}) => {
  // 自定义节点字段
  const fieldNames = (0, _react.useMemo)(() => ({
    label: 'label',
    value: 'value',
    ...itemFieldNames
  }), [itemFieldNames]);
  if (['input', 'code'].includes(type)) {
    return /*#__PURE__*/_react.default.createElement(_input.default, restProps);
  }
  if (['number', 'numberRange'].includes(type)) {
    return /*#__PURE__*/_react.default.createElement(_inputNumber.default, restProps);
  }
  if (['select'].includes(type)) {
    return /*#__PURE__*/_react.default.createElement(_select.default, (0, _extends2.default)({
      allowClear: true,
      showSearch: true,
      fieldNames: fieldNames,
      optionFilterProp: fieldNames?.label || 'label',
      options: options
    }, restProps, {
      onDropdownVisibleChange: open => {
        restProps.onOpenChange?.(open);
      }
    }));
  }
  if (['checkbox'].includes(type)) {
    return /*#__PURE__*/_react.default.createElement(_select.default, (0, _extends2.default)({
      allowClear: true,
      showSearch: true,
      fieldNames: fieldNames,
      mode: "multiple",
      optionFilterProp: fieldNames?.label || 'label',
      options: options
    }, restProps, {
      onDropdownVisibleChange: open => {
        restProps.onOpenChange?.(open);
      }
    }));
  }
  if (['cascader'].includes(type)) {
    return /*#__PURE__*/_react.default.createElement(_cascader.default, (0, _extends2.default)({
      allowClear: true,
      showSearch: true,
      fieldNames: fieldNames,
      options: options
    }, restProps, {
      onDropdownVisibleChange: open => {
        restProps.onOpenChange?.(open);
      }
    }));
  }

  /** 高级筛选根据操作类型确定日期组件 */
  if (['range'].includes(type)) {
    return /*#__PURE__*/_react.default.createElement(RenderRangePicker, restProps);
  }
  if (['date'].includes(type)) {
    return /*#__PURE__*/_react.default.createElement(RenderDatePicker, restProps);
  }
  return /*#__PURE__*/_react.default.createElement(_input.default, restProps);
};
var _default = DynamicComponent;
exports.default = _default;