ze-react-component-library/es/ZETreeFilter/ZETreeFilter.js

ZeroETP React Component Library

import "antd/es/button/style";
import _Button from "antd/es/button";
import "antd/es/select/style";
import _Select from "antd/es/select";
import "antd/es/message/style";
import _message from "antd/es/message";

var __assign = this && this.__assign || function () {
  __assign = Object.assign || function (t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
      s = arguments[i];

      for (var p in s) {
        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
      }
    }

    return t;
  };

  return __assign.apply(this, arguments);
};

import React from "react";
import { useContext, Fragment, memo, useEffect } from "react";
import { PlusOutlined, DeleteOutlined } from "@ant-design/icons";
import { useZETreeFilter, ZETreeFilterContext } from "./useTreeFilter";
import HoverAction from "../components/HoverAction";
import "./ZETreeFilter.less";
var TreeFilterItem = /*#__PURE__*/memo(function (_a) {
  var _b;

  var render = _a.render,
      level = _a.level,
      maxLevel = _a.maxLevel,
      count = _a.count,
      maxCount = _a.maxCount,
      disableRootDelete = _a.disableRootDelete,
      disabled = _a.disabled,
      item = _a.item;

  var _c = useContext(ZETreeFilterContext) || {},
      onAdd = _c.onAdd,
      onRemove = _c.onRemove,
      onUpdate = _c.onUpdate,
      onReset = _c.onReset;

  var isRoot = level === 0 && count === 1;
  return /*#__PURE__*/React.createElement(HoverAction, {
    className: "tree-filter-item",
    actions: !disabled && !item.disableActions ? [((_b = item.props) === null || _b === void 0 ? void 0 : _b.value) && {
      key: "add",
      tip: "新增",
      icon: /*#__PURE__*/React.createElement(PlusOutlined, {
        style: {
          padding: "0 4px"
        }
      }),
      onClick: function onClick() {
        if (level < maxLevel) {
          onAdd === null || onAdd === void 0 ? void 0 : onAdd(item.id);
        } else {
          if (count >= maxCount) {
            _message.error("\u6700\u591A\u65B0\u589E" + maxCount + "\u4E2A");
          } else {
            onAdd === null || onAdd === void 0 ? void 0 : onAdd(item.parentId);
          }
        }
      }
    }, {
      key: "remove",
      tip: isRoot && disableRootDelete || item.resetOnDelete ? "重置" : "删除",
      icon: /*#__PURE__*/React.createElement(DeleteOutlined, {
        style: {
          padding: "0 4px"
        }
      }),
      onClick: function onClick() {
        if (isRoot && disableRootDelete || item.resetOnDelete) {
          onReset === null || onReset === void 0 ? void 0 : onReset(item.id);
        } else {
          onRemove === null || onRemove === void 0 ? void 0 : onRemove(item.id);
        }
      }
    }].filter(function (f) {
      return f;
    }) : []
  }, /*#__PURE__*/React.createElement("div", {
    className: "tree-filter-item-content"
  }, render(item, onUpdate, disabled)));
});
export var renderTree = function renderTree(_a) {
  var arr = _a.arr,
      conditions = _a.conditions,
      renderItem = _a.renderItem,
      onSwitch = _a.onSwitch,
      level = _a.level,
      maxLevel = _a.maxLevel,
      maxCount = _a.maxCount,
      parentId = _a.parentId,
      disableRootDelete = _a.disableRootDelete,
      disabled = _a.disabled;
  return /*#__PURE__*/React.createElement("div", {
    className: "tree-filter-items"
  }, arr.map(function (d) {
    return /*#__PURE__*/React.createElement(Fragment, {
      key: d.id
    }, d.children ? /*#__PURE__*/React.createElement("div", {
      className: "tree-filter-item-with-condition"
    }, /*#__PURE__*/React.createElement("div", {
      className: "tree-filter-condition"
    }, /*#__PURE__*/React.createElement("span", {
      className: "tree-filter-condition-switcher"
    }, /*#__PURE__*/React.createElement(_Select, {
      size: "small",
      showArrow: false,
      disabled: disabled || d.disabled,
      options: conditions,
      value: d.condition,
      dropdownMatchSelectWidth: false,
      onChange: function onChange(v) {
        onSwitch(d.id, v);
      }
    }))), renderTree({
      arr: d.children,
      conditions: conditions,
      renderItem: renderItem,
      level: level + 1,
      maxLevel: maxLevel,
      maxCount: maxCount,
      onSwitch: onSwitch,
      parentId: d.id,
      disableRootDelete: disableRootDelete,
      disabled: disabled
    })) : /*#__PURE__*/React.createElement(TreeFilterItem, {
      item: __assign(__assign({}, d), {
        parentId: parentId
      }),
      render: renderItem,
      level: level,
      maxLevel: maxLevel,
      count: arr.length,
      maxCount: maxCount,
      disableRootDelete: disableRootDelete,
      disabled: disabled
    }));
  }));
};

var TreeFilter = function TreeFilter(_a) {
  var initialValue = _a.initialValue,
      conditions = _a.conditions,
      renderItem = _a.renderItem,
      _b = _a.maxCount,
      maxCount = _b === void 0 ? 5 : _b,
      _c = _a.maxLevel,
      maxLevel = _c === void 0 ? 2 : _c,
      _d = _a.title,
      title = _d === void 0 ? "筛选" : _d,
      filterRef = _a.filterRef,
      enableRootAdd = _a.enableRootAdd,
      disableRootDelete = _a.disableRootDelete,
      onChange = _a.onChange,
      value = _a.value,
      itemInitialProps = _a.itemInitialProps,
      disabled = _a.disabled;
  var state = useZETreeFilter({
    value: value,
    initialValue: initialValue,
    conditions: conditions,
    maxCount: maxCount,
    itemInitialProps: itemInitialProps,
    onChange: onChange
  });
  var onRootAdd = state.onRootAdd,
      data = state.data,
      onSwitch = state.onSwitch;
  useEffect(function () {
    if (filterRef) {
      filterRef.current = {
        onRootAdd: onRootAdd
      };
    }
  });
  return /*#__PURE__*/React.createElement(ZETreeFilterContext.Provider, {
    value: state
  }, /*#__PURE__*/React.createElement("div", {
    className: "tree-filter"
  }, renderTree({
    renderItem: renderItem,
    maxCount: maxCount,
    maxLevel: maxLevel,
    arr: data,
    conditions: conditions,
    onSwitch: onSwitch,
    level: 0,
    disableRootDelete: disableRootDelete,
    disabled: disabled
  }), enableRootAdd && !disabled && /*#__PURE__*/React.createElement(_Button, {
    type: "link",
    style: {
      paddingLeft: 0
    },
    onClick: function onClick() {
      onRootAdd();
    }
  }, /*#__PURE__*/React.createElement(PlusOutlined, null), title)));
};

export default TreeFilter;