ze-react-component-library
Version:
ZeroETP React Component Library
314 lines (262 loc) • 9.57 kB
JavaScript
import "antd/es/input/style";
import _Input from "antd/es/input";
import "antd/es/dropdown/style";
import _Dropdown from "antd/es/dropdown";
import "antd/es/tooltip/style";
import _Tooltip from "antd/es/tooltip";
import "antd/es/menu/style";
import _Menu from "antd/es/menu";
import "antd/es/button/style";
import _Button from "antd/es/button";
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 __rest = this && this.__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 = 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, { Fragment, useState } from "react";
import { AimOutlined, CloseOutlined } from "@ant-design/icons";
var useMobileDetect = require("use-mobile-detect-hook");
import "./index.less";
import { drilldownLogicformInSDK } from "../../ZECard/util"; // 处理地图相关的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 = 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.createElement(_Button, {
icon: /*#__PURE__*/React.createElement(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 = useState(""),
search = _c[0],
setSearch = _c[1];
if (!result) return /*#__PURE__*/React.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.createElement(React.Fragment, null, title && /*#__PURE__*/React.createElement(_Menu.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.createElement(Fragment, {
key: i
}, /*#__PURE__*/React.createElement(_Menu.Item, {
key: name,
disabled: groupByProperty.includes(name)
}, /*#__PURE__*/React.createElement(_Tooltip, {
title: name
}, "\u6309 ", /*#__PURE__*/React.createElement("b", {
className: "text-primary-color"
}, uiName), " \u5206\u6790")));
}));
};
return /*#__PURE__*/React.createElement(_Dropdown, __assign({
trigger: detectMobile.isMobile() ? ["click"] : ["hover"],
overlay: /*#__PURE__*/React.createElement(_Menu, {
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.createElement(CloseOutlined, {
onClick: onClose
}), /*#__PURE__*/React.createElement(_Menu.Item, {
key: "@@",
style: {
padding: "8px 12px",
background: "white",
cursor: "pointer"
},
disabled: true
}, /*#__PURE__*/React.createElement(_Input.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);
};
export default GroupByMenu;