ze-react-component-library/lib/components/GroupByMenu/index.js

ZeroETP React Component Library

"use strict";

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

require("antd/lib/input/style");

var _input = _interopRequireDefault(require("antd/lib/input"));

require("antd/lib/dropdown/style");

var _dropdown = _interopRequireDefault(require("antd/lib/dropdown"));

require("antd/lib/tooltip/style");

var _tooltip = _interopRequireDefault(require("antd/lib/tooltip"));

require("antd/lib/menu/style");

var _menu = _interopRequireDefault(require("antd/lib/menu"));

require("antd/lib/button/style");

var _button = _interopRequireDefault(require("antd/lib/button"));

var _react = _interopRequireWildcard(require("react"));

var _icons = require("@ant-design/icons");

require("./index.less");

var _util = require("../../ZECard/util");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var __assign = void 0 && (void 0).__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 __rest = void 0 && (void 0).__rest || function (s, e) {
  var t = {};

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

  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  }
  return t;
};

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

  return to;
};

var useMobileDetect = require("use-mobile-detect-hook");

// 处理地图相关的groupBy，比如：按 店铺_地理位置(省市) 分组
var getGroupByPropertyByName = function getGroupByPropertyByName(name) {
  var _a;

  if (name.includes("(")) {
    var arr = name.split("(");
    return {
      _id: arr[0],
      level: (_a = arr[1]) === null || _a === void 0 ? void 0 : _a.replace(")", "")
    };
  }

  return {
    _id: name
  };
};
/**
 * 获取该Schema可以下钻的属性列，包含chain和hierarchy schema的
 * @param currentGroupbyProps 已经有的下钻维度，那么要把冲突的排除出去
 * @param schema
 * @returns
 */


function getDrillDownProp(currentGroupbyProps, schema, schemas) {
  if (!schema) return []; // 如果没有schema，代表logicform result报错了

  if (!schemas) return [];
  var drilldownProps = []; // 加入时间

  if (schema.type === "event") {
    var timestampProp = schema.properties.find(function (p) {
      return p.type === "timestamp";
    }); // 因为临时生成的schema，它可能没有timestamp prop

    if (timestampProp) {
      drilldownProps.push({
        name: timestampProp.name + "(quarter)",
        uiName: "季度"
      });
      drilldownProps.push({
        name: timestampProp.name + "(month)",
        uiName: "月"
      });
      drilldownProps.push({
        name: timestampProp.name + "(week)",
        uiName: "周"
      });
      drilldownProps.push({
        name: timestampProp.name + "(day)",
        uiName: "日"
      });
    }
  } // 一个递归函数


  var addToArrayWithProperty = function addToArrayWithProperty(property, prefix, schemasInChain) {
    if (schemasInChain === void 0) {
      schemasInChain = new Set();
    }

    var pushToPropNames = function pushToPropNames(propertyName, level, prefix) {
      var withLevel = {
        name: level ? propertyName + "(" + level + ")" : propertyName,
        uiName: level ? "\u6240\u5728" + level : propertyName
      };
      var withPrefix = {
        name: prefix ? prefix + "_" + withLevel.name : withLevel.name,
        uiName: prefix ? "" + prefix + withLevel.uiName : withLevel.uiName
      };
      drilldownProps.push(withPrefix);
    };

    if (property.isArray) return; // array因为如果做分组的话，其中的一些统计值都会重复计算，所以默认不做drilldown了

    if (property.is_supplementary) return;
    if (property.can_drilldown === false) return;

    if (property.is_categorical) {
      pushToPropNames(property.name, null, prefix);
    } else if (property.type === "object" && property.ref) {
      // feat: 如果该entity在currentGroupbyProps，那么不要出现
      if (currentGroupbyProps.find(function (p) {
        return p.name === property.name;
      })) {
        return;
      }

      if (schemasInChain.has(property.ref)) {
        return;
      }

      schemasInChain.add(property.ref);
      var refSchema = schemas[property.ref];
      if (!refSchema) return;

      if (refSchema.hierarchy) {
        refSchema.hierarchy.forEach(function (h) {
          pushToPropNames(property.name, h.name, prefix);
        });
      } else {
        pushToPropNames(property.name, null, prefix);
      } // 这里要获取其他schema的属性


      refSchema.properties.forEach(function (refProperty) {
        addToArrayWithProperty(refProperty, prefix ? prefix + "_" + property.name : property.name, schemasInChain);
      });
    }
  };

  schema.properties.forEach(function (property) {
    addToArrayWithProperty(property);
  });
  return drilldownProps;
}

var getNewLogicform = function getNewLogicform(_a) {
  var propertyName = _a.propertyName,
      result = _a.result,
      selectedItem = _a.selectedItem,
      _groupByProperty = _a.groupByProperty;
  var schema = result.schema,
      logicform = result.logicform;
  var drilldownGroupbyName = getGroupByPropertyByName(propertyName);

  var newLogicForm = __assign(__assign({}, logicform), {
    groupby: __spreadArray(__spreadArray([], logicform.groupby || []), [drilldownGroupbyName])
  });

  if (selectedItem) {
    newLogicForm.groupby = [drilldownGroupbyName];

    if (!newLogicForm.query) {
      newLogicForm.query = {};
    }

    var newLF = (0, _util.drilldownLogicformInSDK)(logicform, schema, selectedItem);

    if (newLF) {
      newLogicForm.query = __assign(__assign({}, newLogicForm.query), newLF.query || {});
    }

    return newLogicForm;
  } // 没有选中item，那么直接下钻


  return newLogicForm;
};

var GroupByMenu = function GroupByMenu(_a) {
  var result = _a.result,
      selectedItem = _a.selectedItem,
      onChangeLogicform = _a.onChangeLogicform,
      _b = _a.children,
      children = _b === void 0 ? /*#__PURE__*/_react.default.createElement(_button.default, {
    icon: /*#__PURE__*/_react.default.createElement(_icons.AimOutlined, null)
  }) : _b,
      title = _a.title,
      menuStyle = _a.menuStyle,
      onClose = _a.onClose,
      rest = __rest(_a, ["result", "selectedItem", "onChangeLogicform", "children", "title", "menuStyle", "onClose"]);

  var detectMobile = useMobileDetect();

  var _c = (0, _react.useState)(""),
      search = _c[0],
      setSearch = _c[1];

  if (!result) return /*#__PURE__*/_react.default.createElement("div", null);
  var logicform = result.logicform;
  var groupByProperty = [];

  if (logicform.groupby) {
    groupByProperty = logicform.groupby.map(function (g) {
      return g.name;
    });
  }

  var props = undefined;

  if (result === null || result === void 0 ? void 0 : result.schema) {
    if (result.schema.drilldown) {
      props = result.schema.drilldown.map(function (row) {
        return {
          name: row._id,
          uiName: row._id.split("_").pop()
        };
      });
    } else {
      props = getDrillDownProp(result.columnProperties.slice(0, (logicform.groupby || []).length), result.schema, // @ts-ignore
      result.schemas);
    }
  }

  var renderMenus = function renderMenus() {
    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, title && /*#__PURE__*/_react.default.createElement(_menu.default.Item, {
      key: "-1",
      disabled: true,
      className: "groupby-menu-title-color"
    }, title), props && props.length > 0 && props.filter(function (f) {
      return f.uiName.toLowerCase().includes(search.toLowerCase());
    }).map(function (_a, i) {
      var name = _a.name,
          uiName = _a.uiName;
      return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
        key: i
      }, /*#__PURE__*/_react.default.createElement(_menu.default.Item, {
        key: name,
        disabled: groupByProperty.includes(name)
      }, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
        title: name
      }, "\u6309 ", /*#__PURE__*/_react.default.createElement("b", {
        className: "text-primary-color"
      }, uiName), " \u5206\u6790")));
    }));
  };

  return /*#__PURE__*/_react.default.createElement(_dropdown.default, __assign({
    trigger: detectMobile.isMobile() ? ["click"] : ["hover"],
    overlay: /*#__PURE__*/_react.default.createElement(_menu.default, {
      onClick: function onClick(menu) {
        var newLF = getNewLogicform({
          selectedItem: selectedItem,
          propertyName: menu.key,
          result: result,
          groupByProperty: groupByProperty
        });

        if (newLF) {
          onChangeLogicform === null || onChangeLogicform === void 0 ? void 0 : onChangeLogicform(newLF);
        }
      },
      style: menuStyle
    }, onClose && /*#__PURE__*/_react.default.createElement(_icons.CloseOutlined, {
      onClick: onClose
    }), /*#__PURE__*/_react.default.createElement(_menu.default.Item, {
      key: "@@",
      style: {
        padding: "8px 12px",
        background: "white",
        cursor: "pointer"
      },
      disabled: true
    }, /*#__PURE__*/_react.default.createElement(_input.default.Search, {
      placeholder: "\u641C\u7D22",
      value: search,
      allowClear: true,
      onSearch: function onSearch(v) {
        setSearch(v);
      },
      onChange: function onChange(e) {
        setSearch(e.target.value);
      }
    })), renderMenus())
  }, rest), children);
};

var _default = GroupByMenu;
exports.default = _default;