linkmore-design/lib/complex-filter/components/Complex/ComplexBody.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 _react = _interopRequireWildcard(require("react"));
var _button = _interopRequireDefault(require("../../../button"));
var _form = _interopRequireDefault(require("../../../form"));
var _iconFont = _interopRequireDefault(require("../../../icon-font"));
var _select = _interopRequireDefault(require("../../../select"));
var _constant = require("../../constant");
var _GhostRender = _interopRequireDefault(require("../../controls/GhostRender"));
var _PopDropDown = _interopRequireDefault(require("../../controls/PopDropDown"));
var _DynamicComponent = _interopRequireDefault(require("./DynamicComponent"));
// Operator匹配项不存在时重置该字段value
const useResetOperatorValueForVoid = ({
  form,
  field,
  type,
  options
}) => {
  const operator = _form.default.useWatch(['data', field.name, 'operator'], form);
  _react.default.useEffect(() => {
    if (type && operator) {
      const hasValue = options.some(({
        value
      }) => value === operator);
      !hasValue && form.setFieldValue(['data', field.name, 'operator'], undefined);
    }
  }, [type, operator, options]);
};

/** 动态表单值项 */
const DynamicFormValue = ({
  field,
  type,
  form,
  options,
  fieldNames,
  ...restProps
}) => {
  const operator = _form.default.useWatch(['data', field.name, 'operator'], form);
  const disabled = ['empty', 'not_empty'].includes(operator);

  // if (['empty', 'not_empty'].includes(operator)) return <div />

  return /*#__PURE__*/_react.default.createElement(_form.default.Item, {
    name: [field.name, 'value'],
    noStyle: true
  }, /*#__PURE__*/_react.default.createElement(_DynamicComponent.default, (0, _extends2.default)({
    disabled: disabled,
    type: type,
    operator: operator,
    options: options,
    fieldNames: fieldNames
  }, restProps)));
};

// 高级筛选列表项
const ComplexItem = ({
  form,
  field,
  remove,
  instance
}) => {
  const {
    dataSource,
    locale,
    enableAutoString
  } = instance;
  const itemField = _form.default.useWatch(['data', field.name, 'field'], form);
  // const deleteDisabled = !(form.getFieldValue('data')?.length > 1)

  const activeItem = (0, _react.useMemo)(() => {
    const currentObj = dataSource?.find(v => v.field === itemField) || {};
    if (!enableAutoString) return currentObj;
    const fieldNames = {
      label: 'label',
      value: 'value',
      ...(currentObj?.fieldNames || {})
    };
    return {
      ...currentObj,
      data: currentObj?.data?.map(v => ({
        ...v,
        label: v?.[fieldNames.label],
        value: String(v?.[fieldNames.value])
      }))
    };
  }, [dataSource, itemField, enableAutoString]);
  const type = _react.default.useMemo(() => activeItem?.type || null, [activeItem]);

  // operator下拉数据
  const operatorOptions = _react.default.useMemo(() => {
    return (0, _constant.getOpetatorGroup)(locale, activeItem?.fieldValueSource, activeItem?.fieldType)?.[type] || [];
  }, [type, activeItem]);
  useResetOperatorValueForVoid({
    form,
    field,
    type,
    options: operatorOptions
  });

  // 数据保存时的格式化: 字段类型切换时清空value(input不变时不需要清空)
  const fieldNormalize = value => {
    const currentType = dataSource?.find(v => v.field === value)?.type || null;
    const isResetValue = type !== 'input' || type !== currentType;

    // 对比type值的改变重置value
    if (value && isResetValue) {
      form.setFieldValue(['data', field.name, 'value'], undefined);
    }
    return value;
  };
  // 数据保存时的格式化
  const normalize = (value, prev) => {
    // 从 between 操作符切换时清空value(因为value组件不一样,值也不一样)
    if (prev === 'between') {
      form.setFieldValue(['data', field.name, 'value'], undefined);
    }
    // 切换为'空'/'不为空'时, 清空value
    if (['empty', 'not_empty'].includes(value)) {
      form.setFieldValue(['data', field.name, 'value'], undefined);
    }
    return value;
  };
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "complex_list_item"
  }, /*#__PURE__*/_react.default.createElement(_form.default.Item, {
    name: [field.name, 'field'],
    noStyle: true,
    normalize: fieldNormalize
  }, /*#__PURE__*/_react.default.createElement(_select.default, {
    options: dataSource,
    fieldNames: {
      label: 'title',
      value: 'field'
    }
  })), /*#__PURE__*/_react.default.createElement(_form.default.Item, {
    name: [field.name, 'operator'],
    noStyle: true,
    normalize: normalize
  }, /*#__PURE__*/_react.default.createElement(_select.default, {
    options: operatorOptions
  })), /*#__PURE__*/_react.default.createElement(DynamicFormValue, (0, _extends2.default)({
    field: field,
    type: type,
    operator: form.getFieldValue(['data', field.name, 'operator']),
    options: activeItem?.data,
    fieldNames: activeItem?.fieldNames
  }, activeItem?.componentProps)), /*#__PURE__*/_react.default.createElement(_button.default, {
    type: "text",
    onClick: () => remove(field.name)
    // disabled={deleteDisabled}
    ,
    danger: true,
    icon: /*#__PURE__*/_react.default.createElement(_iconFont.default, {
      type: "icon-a-shidia1qingchu"
    })
  }));
};

/** 添加按钮 */
const PopButton = ({
  instance,
  add
}) => {
  const {
    locale,
    dataSource
  } = instance;
  const [visible, setVisible] = _react.default.useState(false);
  const handleChange = val => {
    add({
      field: val
    });
    setVisible(false);
  };
  const onOpenChange = v => {
    setVisible(v);
  };
  return /*#__PURE__*/_react.default.createElement(_PopDropDown.default, {
    overlayClassName: "filter_dropdown_container_select",
    dropdownRender: () => /*#__PURE__*/_react.default.createElement(_GhostRender.default, {
      onChange: handleChange,
      showSearch: false,
      options: dataSource,
      fieldNames: {
        label: 'title',
        value: 'field'
      },
      type: "select"
    }),
    open: visible,
    onOpenChange: onOpenChange
  }, /*#__PURE__*/_react.default.createElement(_button.default, {
    type: "dashed",
    icon: /*#__PURE__*/_react.default.createElement(_iconFont.default, {
      type: "icon-a-tongyonga0xinzeng"
    })
  }, locale.incrementQuery));
};

// 高级筛选列表
const ComplexBody = ({
  instance,
  form
}) => {
  return /*#__PURE__*/_react.default.createElement(_form.default.List, {
    name: "data"
  }, (fields, {
    add,
    remove
  }) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
    className: "complex_list"
  }, fields.map(({
    key,
    ...field
  }) => /*#__PURE__*/_react.default.createElement(ComplexItem, {
    key: key,
    remove: remove,
    form: form,
    field: field,
    instance: instance
  }))), /*#__PURE__*/_react.default.createElement(PopButton, {
    instance: instance,
    add: add
  })));
};
var _default = ComplexBody;
exports.default = _default;