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

ZeroETP React Component Library

import "antd/es/popover/style";
import _Popover from "antd/es/popover";
import "antd/es/button/style";
import _Button from "antd/es/button";
import "antd/es/tooltip/style";
import _Tooltip from "antd/es/tooltip";
import "antd/es/space/style";
import _Space from "antd/es/space";
import "antd/es/empty/style";
import _Empty from "antd/es/empty";
import "antd/es/checkbox/style";
import _Checkbox from "antd/es/checkbox";
import "antd/es/result/style";
import _Result from "antd/es/result";

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

var __extends = this && this.__extends || function () {
  var _extendStatics = function extendStatics(d, b) {
    _extendStatics = Object.setPrototypeOf || {
      __proto__: []
    } instanceof Array && function (d, b) {
      d.__proto__ = b;
    } || function (d, b) {
      for (var p in b) {
        if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p];
      }
    };

    return _extendStatics(d, b);
  };

  return function (d, b) {
    if (typeof b !== "function" && b !== null) throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");

    _extendStatics(d, b);

    function __() {
      this.constructor = d;
    }

    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  };
}();

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);
};

var __spreadArray = this && this.__spreadArray || function (to, from) {
  for (var i = 0, il = from.length, j = to.length; i < il; i++, j++) {
    to[j] = from[i];
  }

  return to;
};

import React, { useRef, useState, useEffect, useMemo } from "react";
import { SheetComponent, Switcher } from "@antv/s2-react";
import { copyData, RowCell, ColCell, CornerCell } from "@antv/s2";
import "lodash.combinations";
import _, { get } from "lodash";
import merge from "deepmerge";
import { useRequest } from "@umijs/hooks";
import { findProperty, formatWithProperty, formatResultName, enableShowSubTotalsSetting } from "../util";
import { requestLogicform } from "../request";
import { GuiIcon } from "@antv/s2";
import { DownloadOutlined } from "@ant-design/icons";
import "@antv/s2-react/dist/style.min.css";
import { getDefaultS2ConfigFields, renderTooltipContent, getObjectExpandProperties } from "./util";
import excelExporter from "./excelExporter";
import "./ZESheet.less";
import useLocale from "../hooks/useLocale";
import RowColumnHoverTooltipInteraction from "./RowColumnHoverTooltipInteraction";
import { useCurrencyFromContext } from "../hooks/useCurrency";
import { useEChartsSetting } from "../hooks/useFrontConfig";
var iconColor = "#A0A9BC";
var plusPng = '<svg t="1710829941790" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4230" width="200" height="200"><path d="M85.312 85.312v853.376h853.376V85.312H85.312zM0 0h1024v1024H0V0z m554.624 213.312v256h256v85.376h-256v256H469.312v-256h-256V469.376h256v-256h85.312z" p-id="4231"></path></svg>';
export var filterIcon = '<svg t="1633848048963" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="85936" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M0 0h1024L724.676923 488.369231V1024l-425.353846-141.784615v-393.846154L0 0z m196.923077 102.4l204.8 354.461538v362.338462l228.430769 63.015385V456.861538l212.676923-354.461538H196.923077z" opacity=".4" p-id="85937"></path></svg>';

var CustomRowCell =
/** @class */
function (_super) {
  __extends(CustomRowCell, _super);

  function CustomRowCell() {
    return _super !== null && _super.apply(this, arguments) || this;
  }

  CustomRowCell.prototype.getTextPosition = function () {
    var _a, _b, _c, _d;

    if (this.meta.children.length < 2) {
      return {
        x: this.meta.x + 8,
        y: this.meta.y + this.meta.height / 2 - (((_b = (_a = this.theme.rowCell) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b.fontSize) || 12) / 2
      };
    }

    var maxY = (_c = this.meta.children[this.meta.children.length - 1]) === null || _c === void 0 ? void 0 : _c.y;
    var minY = (_d = this.meta.children[0]) === null || _d === void 0 ? void 0 : _d.y;
    var scrollY = this.headerConfig.scrollY; // 滚动时吸附在顶部

    if (scrollY > minY && scrollY < maxY) {
      return {
        x: this.meta.x + 8,
        y: scrollY + 8
      };
    }

    return {
      x: this.meta.x + 8,
      y: this.meta.y + 8
    };
  };

  return CustomRowCell;
}(RowCell);
/**
 *
 * @param fieldName
 * @param filterParams
 * @returns
 */


export var getCurrentFilterState = function getCurrentFilterState(fieldName, filterParams) {
  var _a;

  var filtered = (_a = filterParams === null || filterParams === void 0 ? void 0 : filterParams.find(function (d) {
    return d.filterKey === fieldName;
  })) === null || _a === void 0 ? void 0 : _a.filtered;
  return filtered;
};
export var getCurrentShowFilter = function getCurrentShowFilter(fieldName, filterParams) {
  var _a;

  var showFilter = (_a = filterParams === null || filterParams === void 0 ? void 0 : filterParams.find(function (d) {
    return d.filterKey === fieldName;
  })) === null || _a === void 0 ? void 0 : _a.showFilter;
  return showFilter;
};

var getNodeChildrenLen = function getNodeChildrenLen(nodes) {
  var len = 0;

  var count = function count(ns) {
    ns.forEach(function (n) {
      if (n.children.length > 0) {
        count(n.children);
      } else {
        len = len + 1;
      }
    });
  };

  count(nodes);
  return len;
};

var CustomTableColCell =
/** @class */
function (_super) {
  __extends(CustomTableColCell, _super);

  function CustomTableColCell(meta, spreadsheet, headerConfig, callback) {
    var _this = _super.call(this, meta, spreadsheet, headerConfig) || this;

    _this.onIconClick = callback;
    return _this;
  }

  CustomTableColCell.prototype.drawTextShape = function () {
    _super.prototype.drawTextShape.call(this);

    var _a = this.meta,
        x = _a.x,
        y = _a.y,
        cellWidth = _a.width,
        cellHeight = _a.height;
    var style = this.getStyle();
    var iconSize = get(style, "icon.size");
    var iconMargin = get(style, "icon.margin");
    var iconX = x + cellWidth - iconSize - (iconMargin === null || iconMargin === void 0 ? void 0 : iconMargin.right);
    var iconY = y + cellHeight / 2 - iconSize / 2;
    var showFilter = getCurrentShowFilter(this.meta.value, this.spreadsheet.dataCfg.filterParams);

    if (showFilter) {
      this.renderFilterIcon({
        x: iconX,
        y: iconY,
        width: iconSize,
        height: iconSize
      });
    }
  };

  CustomTableColCell.prototype.renderFilterIcon = function (position) {
    /**
     * 有值说明有加filter
     */
    var _this = this;

    var isFiltered = getCurrentFilterState(this.meta.value, this.spreadsheet.dataCfg.filterParams);
    position.x = position.x + 12;
    var x = position.x,
        y = position.y,
        width = position.width,
        height = position.height;
    var icon = new GuiIcon({
      name: "Filter",
      x: x,
      y: y,
      width: width,
      height: height,
      fill: isFiltered ? "blue" : iconColor
    });
    this.add(icon);
    icon.on("click", function () {
      var _a;

      (_a = _this.onIconClick) === null || _a === void 0 ? void 0 : _a.call(_this, {
        meta: _this.meta,
        position: position
      });
    });
  };

  return CustomTableColCell;
}(ColCell);

var CustomTableCornelCell =
/** @class */
function (_super) {
  __extends(CustomTableCornelCell, _super);

  function CustomTableCornelCell(meta, spreadsheet, headerConfig, callback) {
    var _this = _super.call(this, meta, spreadsheet, headerConfig) || this;

    _this.onIconClick = callback;
    return _this;
  }

  CustomTableCornelCell.prototype.drawTextShape = function () {
    var _a;

    _super.prototype.drawTextShape.call(this);

    var showFilter = (_a = this.spreadsheet.dataCfg.filterParams) === null || _a === void 0 ? void 0 : _a.map(function (d) {
      return d.filterKey;
    }).includes(this.meta.field);

    if (showFilter) {
      var _b = this.meta,
          x = _b.x,
          y = _b.y,
          cellWidth = _b.width,
          cellHeight = _b.height;
      var style = this.getStyle();
      var iconSize = get(style, "icon.size");
      var iconMargin = get(style, "icon.margin");
      var iconX = x + cellWidth - iconSize - (iconMargin === null || iconMargin === void 0 ? void 0 : iconMargin.right);
      var iconY = y + cellHeight / 2 - iconSize / 2;
      var showFilter_1 = getCurrentShowFilter(this.meta.value, this.spreadsheet.dataCfg.filterParams);

      if (showFilter_1) {
        this.renderFilterIcon({
          x: iconX,
          y: iconY,
          width: iconSize,
          height: iconSize
        });
      }
    }
  };

  CustomTableCornelCell.prototype.renderFilterIcon = function (position) {
    var _this = this;

    var isFiltered = getCurrentFilterState(this.meta.value, this.spreadsheet.dataCfg.filterParams);
    var x = position.x,
        y = position.y,
        width = position.width,
        height = position.height;
    var icon = new GuiIcon({
      name: "Filter",
      x: x,
      y: y,
      width: width,
      height: height,
      fill: isFiltered ? "blue" : "rgb(67, 72, 91)"
    });
    this.add(icon);
    icon.on("click", function () {
      var _a;

      (_a = _this.onIconClick) === null || _a === void 0 ? void 0 : _a.call(_this, {
        meta: _this.meta,
        position: position
      });
    });
  };

  return CustomTableCornelCell;
}(CornerCell);

var ZESheet = function ZESheet(_a) {
  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;

  var logicform = _a.logicform,
      setLogicform = _a.setLogicform,
      result = _a.result,
      sheetType = _a.sheetType,
      entityTooltipCardProps = _a.entityTooltipCardProps,
      _s2DataConfig = _a.s2DataConfig,
      _o = _a.s2Options,
      s2OptionsSrc = _o === void 0 ? {} : _o,
      _p = _a.showExport,
      showExport = _p === void 0 ? true : _p,
      xlsx = _a.xlsx,
      _q = _a.style,
      style = _q === void 0 ? {} : _q,
      _r = _a.showInterval,
      showInterval = _r === void 0 ? false : _r,
      _s = _a.showSwitcher,
      showSwitcher = _s === void 0 ? true : _s,
      onChange = _a.onChange,
      _onRow = _a.onRow,
      height = _a.height,
      title = _a.title,
      _t = _a.showGoToDetail,
      showGoToDetail = _t === void 0 ? false : _t,
      _u = _a.showRefDetail,
      showRefDetail = _u === void 0 ? false : _u;
  var showSubTotals = (_c = (_b = useEChartsSetting()) === null || _b === void 0 ? void 0 : _b.sheet) === null || _c === void 0 ? void 0 : _c.showSubTotals;
  var t = useLocale().t;
  var getCurrencySymbol = useCurrencyFromContext().getCurrencySymbol;
  var filterDataRef = useRef({});

  var _w = useState(),
      filterNode = _w[0],
      setFilterNode = _w[1];

  var _x = useState(false),
      filterOpen = _x[0],
      setFilterOpen = _x[1];

  var _y = useState(),
      filterParams = _y[0],
      setFilterParams = _y[1];

  var _z = useState({}),
      percentageConfig = _z[0],
      setPercentageConfig = _z[1];

  var _0 = useState(_s2DataConfig),
      s2DataConfig = _0[0],
      setS2DataConfig = _0[1];

  var percentageInGroupKeys = Object.entries(percentageConfig).filter(function (_a) {
    var k = _a[0],
        v = _a[1];
    return v;
  }).map(function (m) {
    return m[0];
  }); // 加上一点default的设置
  // 此处类型用any，不用ZESheetProps["s2Options"]，因为s2Options.totals.row里面的属性是readonly，很奇怪

  var s2Options = merge({
    totals: {
      row: {
        showGrandTotals: true,
        showSubTotals: true,
        label: t("sheet.total"),
        subLabel: t("sheet.subtotal")
      }
    },
    conditions: {
      interval: []
    },
    interaction: {
      enableCopy: true,
      customInteractions: [{
        key: "RowColumnHoverTooltipInteraction",
        interaction: RowColumnHoverTooltipInteraction
      }]
    }
  }, s2OptionsSrc);

  var onRow = function onRow(record) {
    _onRow === null || _onRow === void 0 ? void 0 : _onRow(record); // 下钻后重置传入的配置，因为logicform发生了改变，之前的配置是针对最初logicform的

    setS2DataConfig({});
  };

  var s2Ref = useRef();
  var adaptiveRef = useRef();

  var _1 = useState(),
      switcherFields = _1[0],
      setSwitcherFields = _1[1];

  var _2 = useState({}),
      expandFields = _2[0],
      setExpandFields = _2[1]; // 初始表格数据，用来生成初始配置


  var data = useRequest(function () {
    if (result) {
      return new Promise(function (resolve) {
        return resolve(result);
      });
    }

    if (!logicform) {
      return Promise.resolve(null);
    }

    return requestLogicform(logicform);
  }, {
    refreshDeps: [JSON.stringify(logicform), result]
  }).data;
  var originFields = useMemo(function () {
    return __assign(__assign({}, getDefaultS2ConfigFields(data).fields), (s2DataConfig === null || s2DataConfig === void 0 ? void 0 : s2DataConfig.fields) || {});
  }, [data, s2DataConfig]);
  var fields = useMemo(function () {
    return __assign(__assign({}, originFields), {
      rows: switcherFields === null || switcherFields === void 0 ? void 0 : switcherFields.rows.items.filter(function (d) {
        return d.checked !== false;
      }).map(function (d) {
        return d.id;
      }),
      columns: switcherFields === null || switcherFields === void 0 ? void 0 : switcherFields.columns.items.filter(function (d) {
        return d.checked !== false;
      }).map(function (d) {
        return d.id;
      }),
      values: switcherFields === null || switcherFields === void 0 ? void 0 : switcherFields.values.items.filter(function (d) {
        return d.checked !== false;
      }).map(function (d) {
        if (percentageInGroupKeys.includes(d.id)) {
          return [d.id, d.id + "(\u7EC4\u5185)"];
        }

        return d.id;
      }).flat()
    }); // originFields， expandFields变化，switcherFields一定会跟着变化
  }, [switcherFields, percentageConfig]);

  var dataCfg = __assign(__assign({
    data: []
  }, s2DataConfig), {
    fields: fields
  }); // total && sub total


  var _totalAndSubTotalData = useRequest(function () {
    var _a, _b;

    if (!data || !data.logicform.groupby) {
      return Promise.resolve([]);
    } // limit, having因为筛选很难控制，所以都不要了


    if (data.logicform.having || data.logicform.limit) {
      return Promise.resolve([]);
    } // 对data.logicform.groupby做一个优化。如果groupby中已经有一个a，那么a_b不需要进入小计
    // 如果groupby中已经有一个a_ID，那么a_b不需要进入小计


    var filteredGroupby = data.logicform._noRelationGroupby || data.logicform.groupby;

    var combinations = _.flatMap(filteredGroupby, function (_v, i, a) {
      return _.combinations(a, i + 1);
    }).filter(function (a) {
      return a.length < filteredGroupby.length;
    });

    var preds = data.logicform.preds.filter(function (p) {
      return p.operator;
    });
    var logicforms = []; // 给query加上groupby的$exists

    var existsForGroupbyItem = {};
    (data.logicform.groupby || []).forEach(function (gi) {
      existsForGroupbyItem[gi._id] = {
        $exists: true
      };
    });

    var lfQuery = __assign(__assign({}, existsForGroupbyItem), ((_a = data === null || data === void 0 ? void 0 : data.logicform) === null || _a === void 0 ? void 0 : _a.query) || {});

    if (!data.logicform.limitBy) {
      if (((_b = data.logicform.groupby) === null || _b === void 0 ? void 0 : _b.length) === 2) {
        // Subtotal - 小计只在2个的时候出
        logicforms.push.apply(logicforms, combinations.map(function (groupby) {
          return __assign(__assign({}, data.logicform), {
            groupby: groupby,
            preds: preds,
            query: lfQuery,
            limit: undefined,
            limitBy: undefined,
            skip: undefined,
            having: undefined,
            _noRelationGroupby: undefined
          });
        }));
      } // Total


      logicforms.push(__assign(__assign({}, data.logicform), {
        groupby: undefined,
        preds: preds,
        query: lfQuery,
        limit: undefined,
        limitBy: undefined,
        skip: undefined,
        having: undefined,
        _noRelationGroupby: undefined
      }));
    }

    return Promise.all(logicforms.map(function (lf) {
      return requestLogicform(lf);
    }));
  }, {
    formatResult: function formatResult(res) {
      var result = [];

      for (var _i = 0, res_1 = res; _i < res_1.length; _i++) {
        var resItem = res_1[_i];
        result = __spreadArray(__spreadArray([], result), resItem.result);
      }

      return result;
    },
    refreshDeps: [data]
  }).data;

  if (data === null || data === void 0 ? void 0 : data.result) {
    if (!Array.isArray(data.result)) {
      return /*#__PURE__*/React.createElement(_Result, {
        title: "\u6B64\u7EC4\u4EF6\u4EC5\u652F\u6301\u6570\u7EC4"
      });
    }

    var meta = ["rows", "columns", "values"].reduce(function (p, r) {
      return p.concat(dataCfg.fields[r] || []);
    }, []).map(function (d) {
      var _a;

      var property = findProperty(__assign(__assign({}, data.schema), {
        properties: __spreadArray(__spreadArray(__spreadArray([], data.schema.properties), data.columnProperties), percentageInGroupKeys.map(function (k) {
          var p = data.columnProperties.find(function (f) {
            return f.name === k;
          }) || {};
          return __assign(__assign({}, p), {
            name: k + "(\u7EC4\u5185)"
          });
        }))
      }), d, "_");
      var metaOfProps = (_a = dataCfg.meta) === null || _a === void 0 ? void 0 : _a.find(function (f) {
        return f.field === d;
      });

      var defaultFormatter = function defaultFormatter(v) {
        if (["null", ""].includes(v)) {
          return "-";
        }

        if ((property === null || property === void 0 ? void 0 : property.primal_type) === "boolean") {
          return t(v);
        }

        if (property) {
          var currencySymbol = (getCurrencySymbol === null || getCurrencySymbol === void 0 ? void 0 : getCurrencySymbol(property)) || "";
          return currencySymbol + formatWithProperty(property, v);
        }

        return v;
      };

      if (metaOfProps) {
        return __assign(__assign({}, metaOfProps), {
          formatter: metaOfProps.formatter || defaultFormatter
        });
      }

      return {
        field: d,
        name: (property === null || property === void 0 ? void 0 : property.unit) ? d + "(" + property.unit + ")" : undefined,
        formatter: defaultFormatter
      };
    }); // meta

    dataCfg.meta = meta; // interval

    if (showInterval) {
      s2Options.conditions = {
        interval: data.columnProperties.filter(function (p) {
          return p.primal_type === "number";
        }).map(function (p) {
          return {
            field: p.name,
            mapping: function mapping() {
              return {
                fill: "#80BFFF"
              };
            }
          };
        })
      };
    } // Total & Subtotal


    if (!data.logicform.limitBy && ((_d = dataCfg.fields.rows) === null || _d === void 0 ? void 0 : _d.length) > 0) {
      if (enableShowSubTotalsSetting(data === null || data === void 0 ? void 0 : data.logicform)) {
        s2Options.totals.row.showSubTotals = showSubTotals !== null && showSubTotals !== void 0 ? showSubTotals : true;
        s2Options.totals.row.subTotalsDimensions = data.logicform.groupby.slice(0, data.logicform.groupby.length - 1).map(function (g) {
          return g.name;
        });
      } else {
        s2Options.totals.row.showSubTotals = false;
      }
    } else {
      s2Options.totals.row.showGrandTotals = false;
      s2Options.totals.row.showSubTotals = false;
    }
  }

  var onFilterIconClick = function onFilterIconClick(node) {
    // console.log(node);
    setFilterNode(node);
    setTimeout(function () {
      setFilterOpen(true);
    }, 100);
  };

  var getLatestFilterParams = function getLatestFilterParams() {
    return Object.entries(filterDataRef.current).map(function (_a) {
      var _b;

      var k = _a[0],
          v = _a[1];
      var value = ((_b = filterParams === null || filterParams === void 0 ? void 0 : filterParams.find(function (f) {
        return f.filterKey === k;
      })) === null || _b === void 0 ? void 0 : _b.filteredValues) || v.data;
      return {
        showFilter: v.data.length > 0,
        filterKey: k,
        filteredValues: value,
        allValues: v.data,
        filtered: value.length !== v.data.length
      };
    });
  };

  var renderFilterPopContent = function renderFilterPopContent() {
    var _a, _b, _c;

    var filterKey = filterNode === null || filterNode === void 0 ? void 0 : filterNode.meta.value;
    var checkOptions = (_c = (_b = (_a = filterDataRef.current) === null || _a === void 0 ? void 0 : _a[filterKey]) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.map(function (d) {
      return {
        label: d,
        value: d
      };
    });
    var params = getLatestFilterParams();
    var value = params.find(function (f) {
      return f.filterKey === filterKey;
    });
    return /*#__PURE__*/React.createElement("div", {
      style: {
        maxWidth: 300,
        maxHeight: "50vh",
        overflowY: "auto"
      }
    }, /*#__PURE__*/React.createElement(_Checkbox, {
      indeterminate: (value === null || value === void 0 ? void 0 : value.filteredValues.length) > 0 && (value === null || value === void 0 ? void 0 : value.filteredValues.length) < (value === null || value === void 0 ? void 0 : value.allValues.length),
      onChange: function onChange(e) {
        setFilterParams(params.map(function (m) {
          if (m.filterKey === filterKey) {
            return {
              filterKey: filterKey,
              filteredValues: e.target.checked ? value.allValues : []
            };
          }

          return m;
        }));
      },
      checked: (value === null || value === void 0 ? void 0 : value.filteredValues.length) > 0
    }, "\u5168\u9009"), /*#__PURE__*/React.createElement(_Checkbox.Group, {
      options: checkOptions,
      value: value === null || value === void 0 ? void 0 : value.filteredValues,
      onChange: function onChange(v) {
        setFilterParams(params.map(function (m) {
          if (m.filterKey === filterKey) {
            return {
              filterKey: filterKey,
              filteredValues: v
            };
          }

          return m;
        }));
      },
      style: {
        display: "flex",
        flexDirection: "column"
      }
    }));
  };

  var defaultOptions = {
    hierarchyType: "grid",
    tooltip: {
      content: function content(cell, options) {
        var _a;

        return renderTooltipContent(cell, options, __assign(__assign({}, data === null || data === void 0 ? void 0 : data.schema), {
          properties: __spreadArray(__spreadArray([], (_a = data === null || data === void 0 ? void 0 : data.schema) === null || _a === void 0 ? void 0 : _a.properties), data === null || data === void 0 ? void 0 : data.columnProperties)
        }), logicform, setLogicform, entityTooltipCardProps, showGoToDetail, showRefDetail, {
          percentageConfig: percentageConfig,
          setPercentageConfig: setPercentageConfig
        });
      }
    },
    showDefaultHeaderActionIcon: true,
    headerActionIcons: [{
      iconNames: ["ExpandFields"],
      belongsCell: "cornerCell",
      displayCondition: function displayCondition(meta) {
        return (data === null || data === void 0 ? void 0 : data.columnProperties.map(function (d) {
          return d.name;
        }).includes(meta.value)) && getObjectExpandProperties(meta.value, data).length > 0;
      },
      action: function action(props) {
        var _a;

        var meta = props.meta,
            event = props.event;
        var showProperties = getObjectExpandProperties(meta.value, data);
        meta.spreadsheet.tooltip.show({
          position: {
            x: event.clientX,
            y: event.clientY
          },
          content: /*#__PURE__*/React.createElement("div", {
            style: {
              padding: 12,
              maxHeight: "50vh",
              overflowY: "auto"
            }
          }, /*#__PURE__*/React.createElement("p", null, "\u52FE\u9009\u9700\u8981\u5C55\u793A\u7684\u5176\u5B83\u5C5E\u6027"), showProperties.length > 0 ? /*#__PURE__*/React.createElement(_Checkbox.Group, {
            style: {
              display: "flex",
              flexDirection: "column"
            },
            defaultValue: (_a = expandFields[meta.value]) !== null && _a !== void 0 ? _a : [],
            onChange: function onChange(v) {
              setExpandFields(function (pre) {
                var _a;

                return __assign(__assign({}, pre), (_a = {}, _a[meta.value] = v, _a));
              });
            }
          }, showProperties.map(function (d) {
            return /*#__PURE__*/React.createElement(_Checkbox, {
              key: d.name,
              value: meta.value + "_" + d.name
            }, d.name);
          })) : /*#__PURE__*/React.createElement(_Empty, null))
        });
      }
    }],
    customSVGIcons: [{
      name: "ExpandFields",
      svg: plusPng
    }, {
      name: "Filter",
      svg: filterIcon
    }],
    rowCell: function rowCell(node, s2, headConfig) {
      return new CustomRowCell(node, s2, headConfig);
    },
    cornerCell: function cornerCell(item, spreadsheet, headerConfig) {
      return new CustomTableCornelCell(item, spreadsheet, headerConfig, onFilterIconClick);
    },
    colCell: function colCell(item, spreadsheet, headerConfig) {
      spreadsheet.setTheme({
        colCell: {
          icon: {
            margin: {
              top: 0,
              left: 4,
              right: 16,
              bottom: 0
            }
          }
        }
      });
      return new CustomTableColCell(item, spreadsheet, headerConfig, onFilterIconClick);
    }
  }; // 配置Header

  var sheetComponentHeader = {
    extra: /*#__PURE__*/React.createElement(_Space, null, showExport && xlsx && /*#__PURE__*/React.createElement(_Tooltip, {
      title: "\u5BFC\u51FAExcel"
    }, /*#__PURE__*/React.createElement(_Button, {
      type: "link",
      size: "small",
      style: {
        padding: 0
      },
      onClick: function onClick() {
        var _a, _b, _c, _d;

        if (s2Ref.current) {
          // 生成单元格合并信息
          var mergeInfo_1 = [];
          var rowNodes = s2Ref.current.getRowNodes();
          var colNodes = s2Ref.current.getColumnNodes();
          var rowsCount_1 = (_b = (_a = s2Ref.current.dataCfg.fields.rows) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
          var colsCount_1 = (_d = (_c = s2Ref.current.dataCfg.fields.columns) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0;
          rowNodes.forEach(function (d, i) {
            var childrenLen = getNodeChildrenLen(d.children);

            if (childrenLen > 0) {
              var leafNode = d.getHeadLeafChild();
              var start = {
                r: leafNode.rowIndex + (colsCount_1 === 0 ? 1 : rowsCount_1),
                c: d.level
              };
              mergeInfo_1.push({
                s: start,
                e: {
                  r: start.r + childrenLen - 1,
                  c: start.c
                }
              });
            } else if (d.isTotals && !d.isSubTotals) {
              var start = {
                r: d.rowIndex + (colsCount_1 === 0 ? 1 : rowsCount_1),
                c: d.colIndex + 1
              };
              mergeInfo_1.push({
                s: start,
                e: {
                  r: start.r,
                  c: start.c + rowsCount_1 - 1
                }
              });
            }
          });
          colNodes.forEach(function (d, i) {
            var childrenLen = getNodeChildrenLen(d.children);

            if (childrenLen > 1) {
              var leafNode = d.getHeadLeafChild();
              var start = {
                r: d.level,
                c: leafNode.colIndex + 1
              };
              mergeInfo_1.push({
                s: start,
                e: {
                  r: start.r,
                  c: start.c + childrenLen - 1
                }
              });
            } else if (d.isTotals && !d.isSubTotals) {
              var start = {
                r: d.rowIndex + 1,
                c: d.colIndex + 1
              };
              mergeInfo_1.push({
                s: start,
                e: {
                  r: start.r + colsCount_1 - 1,
                  c: start.c
                }
              });
            }
          }); // console.log(mergeInfo);

          var text = copyData(s2Ref.current, "\t");
          var formattedText = copyData(s2Ref.current, "\t", true);
          excelExporter(text, formattedText, title, xlsx, mergeInfo_1);
        }
      }
    }, /*#__PURE__*/React.createElement(DownloadOutlined, null))), showSwitcher && /*#__PURE__*/React.createElement(Switcher, {
      popover: {
        placement: "leftTop"
      },
      rows: {
        selectable: true,
        items: ((_e = switcherFields === null || switcherFields === void 0 ? void 0 : switcherFields.rows) === null || _e === void 0 ? void 0 : _e.items) || []
      },
      columns: {
        selectable: true,
        items: ((_f = switcherFields === null || switcherFields === void 0 ? void 0 : switcherFields.columns) === null || _f === void 0 ? void 0 : _f.items) || []
      },
      values: {
        selectable: true,
        // selectable: true, // 这个啊，如果把这个更新到data config里面去了。那么状态的同步也很麻烦。除非把selectable也给同步了
        items: (switcherFields === null || switcherFields === void 0 ? void 0 : switcherFields.values.items) || []
      },
      onSubmit: function onSubmit(result) {
        setSwitcherFields({
          rows: result.rows,
          columns: result.columns,
          values: result.values
        });
      }
    }))
  };

  if (!showSwitcher && !showExport) {
    // header啥组件都没有，那么header不要了
    sheetComponentHeader = null;
  } // 总计 & 小计


  if (dataCfg.data) {
    if (data === null || data === void 0 ? void 0 : data.result) {
      var totalAndSubTotalData_1 = _totalAndSubTotalData === null || _totalAndSubTotalData === void 0 ? void 0 : _totalAndSubTotalData.map(function (d) {
        var dd = __assign({}, d);

        percentageInGroupKeys.forEach(function (k) {
          dd[k + "(\u7EC4\u5185)"] = 1;
        });
        return dd;
      });
      var arr = (_g = data.result) === null || _g === void 0 ? void 0 : _g.map(function (d) {
        var dd = __assign({}, d);

        percentageInGroupKeys.forEach(function (k) {
          var _a, _b, _c, _d, _e;

          var baseName = (_b = (_a = data.columnProperties.find(function (p) {
            return p.name === k;
          }) //@ts-ignore
          ) === null || _a === void 0 ? void 0 : _a.baseProperty) === null || _b === void 0 ? void 0 : _b.name;
          var name = (_c = data.logicform.preds.find(function (f) {
            return f.pred === baseName && f.operator === "$sum";
          })) === null || _c === void 0 ? void 0 : _c.name;

          if (name && ((_d = data.logicform.groupby) === null || _d === void 0 ? void 0 : _d.length) === 2) {
            var sum = (_e = totalAndSubTotalData_1.find(function (t) {
              var _a, _b;

              var match = true;
              var g = dataCfg.fields.rows[0];

              if (dataCfg.fields.columns.length > 0) {
                g = dataCfg.fields.columns[0];
              }

              if (_typeof(t[g]) === "object" && _typeof(d[g]) === "object") {
                match = match && ((_a = t[g]) === null || _a === void 0 ? void 0 : _a._id) === ((_b = d[g]) === null || _b === void 0 ? void 0 : _b._id);
              } else {
                match = match && t[g] === d[g];
              }

              return match;
            })) === null || _e === void 0 ? void 0 : _e[name];

            if (typeof sum === "number") {
              dd[k + "(\u7EC4\u5185)"] = d[name] / sum;
            }
          }
        });
        return dd;
      });
      dataCfg.data = __spreadArray([], formatResultName(__assign(__assign({}, data), {
        result: __spreadArray(__spreadArray([], (_h = totalAndSubTotalData_1 || []) === null || _h === void 0 ? void 0 : _h.map(function (m) {
          return __assign(__assign({}, m), {
            isTotal: true
          });
        })), arr)
      }), '_', Object.entries(expandFields).reduce(function (p, c) {
        return __spreadArray(__spreadArray([], p), c[1]);
      }, []))); // 根据fields的配置，找出需要显示的维度，把不需要显示的维度的数据给过滤掉

      var hideItems_1 = __spreadArray(__spreadArray([], ((_j = switcherFields === null || switcherFields === void 0 ? void 0 : switcherFields.rows) === null || _j === void 0 ? void 0 : _j.hideItems) || []), ((_k = switcherFields === null || switcherFields === void 0 ? void 0 : switcherFields.columns) === null || _k === void 0 ? void 0 : _k.hideItems) || []).map(function (h) {
        return h.id;
      });

      dataCfg.data = dataCfg.data.filter(function (i) {
        return hideItems_1.every(function (h) {
          return !(h in i);
        });
      } // 每一个hide的维度，都不能在dataItem里面
      );
      filterDataRef.current = {};
      (_l = dataCfg.meta) === null || _l === void 0 ? void 0 : _l.forEach(function (d) {
        filterDataRef.current[d.field] = {
          data: []
        };
      });
      dataCfg.data = dataCfg.data.map(function (flatted) {
        dataCfg.meta.forEach(function (f) {
          var _a, _b, _c;

          var v = (_a = flatted[f.field]) !== null && _a !== void 0 ? _a : "空值";

          if (!((_b = filterDataRef.current[f.field]) === null || _b === void 0 ? void 0 : _b.data.includes(v))) {
            (_c = filterDataRef.current[f.field]) === null || _c === void 0 ? void 0 : _c.data.push(v);
          }
        });
        return flatted;
      });
      var filterParams_1 = getLatestFilterParams();
      dataCfg.data = dataCfg.data.filter(function (f) {
        if (f) {
          if (f.isTotal && !(filterParams_1 === null || filterParams_1 === void 0 ? void 0 : filterParams_1.some(function (s) {
            return s.filtered;
          }))) {
            return true;
          }

          var match_1 = true;
          filterParams_1.filter(function (f) {
            return f.showFilter;
          }).forEach(function (e) {
            var _a;

            match_1 = match_1 && e.filteredValues.includes((_a = f[e.filterKey]) !== null && _a !== void 0 ? _a : "空值");
          });
          return match_1;
        }

        return false;
      });
      dataCfg.filterParams = filterParams_1;
    } // 如果没数据，那么不显示


    if (!_totalAndSubTotalData || _totalAndSubTotalData.length === 0) {
      s2Options.totals.row.showGrandTotals = false;
      s2Options.totals.row.showSubTotals = false;
    }
  } // valueInCols配置


  if (dataCfg === null || dataCfg === void 0 ? void 0 : dataCfg.fields) {
    if (!dataCfg.fields.rows || dataCfg.fields.rows.length === 0) {
      dataCfg.fields.valueInCols = false;
    } else {
      dataCfg.fields.valueInCols = true;

      if (data) {
        var noRelationGroupby_1 = data.logicform._noRelationGroupby || data.logicform.groupby;
        var filteredGroupby = noRelationGroupby_1.slice(1).map(function (i) {
          // 要找上一层
          var index = noRelationGroupby_1.findIndex(function (groupbyItem) {
            return groupbyItem.name === i.name;
          });
          return noRelationGroupby_1[index - 1].name;
        });
        s2Options.totals.row.subTotalsDimensions = filteredGroupby; // 会通过行列转换切换的

        if (fields.rows.length === 2) {
          s2Options.totals.row.subTotalsDimensions = [fields.rows[0]];
        }
      }
    }
  }

  var offsetHeight = 0;

  var getPopPosition = function getPopPosition() {
    var _a, _b, _c;

    var _d = (filterNode === null || filterNode === void 0 ? void 0 : filterNode.position) || {},
        x = _d.x,
        y = _d.y;

    var _e = (filterNode === null || filterNode === void 0 ? void 0 : filterNode.meta) || {},
        cornerType = _e.cornerType,
        belongsCell = _e.belongsCell;

    var _f = ((_b = (_a = adaptiveRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(".antv-s2-container")) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect()) || {},
        containerX = _f.x,
        containerY = _f.y;

    var top = containerY + y,
        left = 0;

    if (cornerType) {
      left = containerX + x;
    } else {
      // @ts-ignore
      left = containerX + x + ((_c = belongsCell === null || belongsCell === void 0 ? void 0 : belongsCell.headerConfig) === null || _c === void 0 ? void 0 : _c.cornerWidth);
    }

    return {
      top: top,
      left: left
    };
  };

  useEffect(function () {
    var _a, _b, _c;

    setSwitcherFields({
      rows: {
        items: ((_a = originFields === null || originFields === void 0 ? void 0 : originFields.rows) === null || _a === void 0 ? void 0 : _a.map(function (d) {
          if (d in expandFields) {
            return __spreadArray([d], expandFields[d]);
          }

          return d;
        }).flat().map(function (f) {
          return {
            id: f
          };
        })) || [],
        hideItems: []
      },
      columns: {
        items: ((_b = originFields === null || originFields === void 0 ? void 0 : originFields.columns) === null || _b === void 0 ? void 0 : _b.map(function (d) {
          return {
            id: d
          };
        })) || [],
        hideItems: []
      },
      values: {
        items: ((_c = originFields === null || originFields === void 0 ? void 0 : originFields.values) === null || _c === void 0 ? void 0 : _c.map(function (d) {
          return {
            id: d
          };
        })) || [],
        hideItems: []
      }
    });
  }, [originFields, expandFields]);
  useEffect(function () {
    onChange === null || onChange === void 0 ? void 0 : onChange(dataCfg);
  }, [JSON.stringify(dataCfg)]);
  return /*#__PURE__*/React.createElement("div", {
    className: "ze-sheet",
    style: __assign({
      height: height !== null && height !== void 0 ? height : "100%"
    }, style)
  }, /*#__PURE__*/React.createElement("div", {
    style: {
      height: "calc(100% - " + offsetHeight + "px)"
    },
    ref: adaptiveRef
  }, /*#__PURE__*/React.createElement(SheetComponent, {
    adaptive: {
      width: true,
      height: true,
      getContainer: function getContainer() {
        return adaptiveRef.current;
      }
    },
    dataCfg: dataCfg,
    options: __assign(__assign({}, defaultOptions), s2Options),
    themeCfg: {
      theme: {
        cornerCell: {
          icon: {
            size: 16,
            fill: iconColor
          },
          text: {
            textAlign: "left"
          }
        },
        colCell: {
          icon: {
            size: 16,
            fill: iconColor
          }
        }
      }
    },
    sheetType: sheetType,
    header: sheetComponentHeader,
    ref: s2Ref,
    onRowCellClick: function onRowCellClick(_a) {
      var rowCell = _a.target;

      var _b = rowCell.getMeta(),
          isTotals = _b.isTotals,
          value = _b.value,
          query = _b.query,
          field = _b.field,
          spreadsheet = _b.spreadsheet;

      if (isTotals) {
        return;
      }

      var rowData = spreadsheet.dataCfg.data.find(function (d) {
        return d[field] === value;
      });

      if (rowData) {
        onRow === null || onRow === void 0 ? void 0 : onRow(rowData["@rawData"]);
      } else {
        onRow === null || onRow === void 0 ? void 0 : onRow(__assign({
          _id: value
        }, query));
      }
    },
    onDataCellClick: function onDataCellClick(_a) {
      var dataCell = _a.target;
      var rowData = dataCell.getMeta().data;
      onRow === null || onRow === void 0 ? void 0 : onRow(rowData["@rawData"]);
    }
  })), /*#__PURE__*/React.createElement(_Popover, {
    open: filterOpen,
    content: renderFilterPopContent(),
    placement: "bottom",
    key: (_m = filterNode === null || filterNode === void 0 ? void 0 : filterNode.meta) === null || _m === void 0 ? void 0 : _m.field,
    onOpenChange: setFilterOpen,
    trigger: ["click"]
  }, filterNode && /*#__PURE__*/React.createElement("div", {
    style: __assign({
      width: 10,
      height: 10,
      background: "red",
      position: "fixed",
      opacity: 0,
      pointerEvents: "none"
    }, getPopPosition())
  })));
};

export default ZESheet;