linkmore-design/es/advanced-filter/components/Complex/DynamicComponent.js

🌈 🚀lm组件库。🚀

import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["value", "onChange", "picker"],
  _excluded2 = ["value", "onChange"],
  _excluded3 = ["type", "options", "fieldNames"];
import isEmpty from 'lodash/isEmpty';
import moment from 'moment';
import React, { useMemo } from 'react';
import Cascader from "../../../cascader";
import DatePicker from "../../../date-picker";
import Input from "../../../input";
import InputNumber from "../../../input-number";
import Select from "../../../select";

/** 渲染日期选择框: 修改日期返回值 */
var RenderDatePicker = function RenderDatePicker(props) {
  var value = props.value,
    onChange = props.onChange,
    _props$picker = props.picker,
    picker = _props$picker === void 0 ? 'date' : _props$picker,
    restProps = _objectWithoutProperties(props, _excluded);
  var defaultValue = useMemo(function () {
    var nValue;
    // 周/月/季/年 需要处理回显
    if (picker !== 'date') return nValue;
    if (value) {
      return moment(value);
    }
    return nValue;
  }, [value]);

  // 选中时间段的触发
  var handleOnChange = function handleOnChange(dates, dateStrings) {
    onChange(dateStrings);
  };
  return /*#__PURE__*/React.createElement(DatePicker, _extends({}, restProps, {
    value: defaultValue,
    onChange: handleOnChange
  }));
};

/** 渲染日期区间选择框: 修改了日期返回值 */
var RenderRangePicker = function RenderRangePicker(props) {
  var value = props.value,
    onChange = props.onChange,
    restProps = _objectWithoutProperties(props, _excluded2);
  var defaultValue = useMemo(function () {
    if (isEmpty(value)) return undefined;
    return [moment(value[0]), moment(value[1])];
  }, [value]);

  // 选中时间段的触发
  var handleOnChange = function handleOnChange(dates, dateStrings) {
    onChange(dateStrings);
  };
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DatePicker.RangePicker, _extends({
    picker: "date"
  }, restProps, {
    value: defaultValue,
    onChange: handleOnChange
  })));
};

// type: input, number, code, select, checkbox, date, range, dateTime
var DynamicComponent = function DynamicComponent(_ref) {
  var type = _ref.type,
    _ref$options = _ref.options,
    options = _ref$options === void 0 ? [] : _ref$options,
    itemFieldNames = _ref.fieldNames,
    restProps = _objectWithoutProperties(_ref, _excluded3);
  // 自定义节点字段
  var fieldNames = useMemo(function () {
    return _objectSpread({
      label: 'label',
      value: 'value'
    }, itemFieldNames);
  }, [itemFieldNames]);
  if (['input', 'code'].includes(type)) {
    return /*#__PURE__*/React.createElement(Input, restProps);
  }
  if (['number', 'numberRange'].includes(type)) {
    return /*#__PURE__*/React.createElement(InputNumber, restProps);
  }
  if (['select'].includes(type)) {
    return /*#__PURE__*/React.createElement(Select, _extends({
      allowClear: true,
      showSearch: true,
      fieldNames: fieldNames,
      optionFilterProp: (fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.label) || 'label',
      options: options
    }, restProps, {
      onDropdownVisibleChange: function onDropdownVisibleChange(open) {
        var _restProps$onOpenChan;
        (_restProps$onOpenChan = restProps.onOpenChange) === null || _restProps$onOpenChan === void 0 ? void 0 : _restProps$onOpenChan.call(restProps, open);
      }
    }));
  }
  if (['checkbox'].includes(type)) {
    return /*#__PURE__*/React.createElement(Select, _extends({
      allowClear: true,
      showSearch: true,
      fieldNames: fieldNames,
      mode: "multiple",
      optionFilterProp: (fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.label) || 'label',
      options: options
    }, restProps, {
      onDropdownVisibleChange: function onDropdownVisibleChange(open) {
        var _restProps$onOpenChan2;
        (_restProps$onOpenChan2 = restProps.onOpenChange) === null || _restProps$onOpenChan2 === void 0 ? void 0 : _restProps$onOpenChan2.call(restProps, open);
      }
    }));
  }
  if (['cascader'].includes(type)) {
    return /*#__PURE__*/React.createElement(Cascader, _extends({
      allowClear: true,
      showSearch: true,
      fieldNames: fieldNames,
      options: options
    }, restProps, {
      onDropdownVisibleChange: function onDropdownVisibleChange(open) {
        var _restProps$onOpenChan3;
        (_restProps$onOpenChan3 = restProps.onOpenChange) === null || _restProps$onOpenChan3 === void 0 ? void 0 : _restProps$onOpenChan3.call(restProps, open);
      }
    }));
  }

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