ze-react-component-library
Version:
ZeroETP React Component Library
289 lines (248 loc) • 9.54 kB
JavaScript
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 __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, { useRef, useEffect, useState, useMemo } from "react";
import { SizeMe } from "react-sizeme";
import _ from "underscore";
import GridLayout from "react-grid-layout";
var useMobileDetect = require("use-mobile-detect-hook");
import ZECard from "../ZECard";
import "./ZEDashboard.less";
import { nanoid } from "nanoid";
var ROW_HEIGHT = 60;
var DEFAULT_HEIGHT = 6;
var getItemDefaultHeight = function getItemDefaultHeight(logicform) {
if (!logicform) return null;
if (logicform.entity_id) {
return 10;
}
if (!logicform.groupby && logicform.preds && logicform.preds.every(function (p) {
return _typeof(p) === "object" && p.operator;
})) {
return 5;
}
};
var ZEDashboard = function ZEDashboard(_a) {
var _b;
var _data = _a.data,
_c = _a.className,
className = _c === void 0 ? "" : _c,
_d = _a.editable,
editable = _d === void 0 ? false : _d,
_e = _a.cols,
cols = _e === void 0 ? 12 : _e,
_f = _a.rowHeight,
rowHeight = _f === void 0 ? ROW_HEIGHT : _f,
_g = _a.defaultH,
defaultH = _g === void 0 ? DEFAULT_HEIGHT : _g,
_h = _a.useDefaultHeightFromRepresentation,
useDefaultHeightFromRepresentation = _h === void 0 ? false : _h,
_j = _a.margin,
margin = _j === void 0 ? [24, 24] : _j,
_k = _a.containerPadding,
containerPadding = _k === void 0 ? [0, 0] : _k,
_l = _a.resizeHandles,
resizeHandles = _l === void 0 ? ["se", "nw", "s", "n", "e", "w", "sw", "ne"] : _l,
resizeHandle = _a.resizeHandle,
onDataChange = _a.onDataChange,
width = _a.width,
dashboardRef = _a.dashboardRef,
style = _a.style,
cardsOnly = _a.cardsOnly;
var isMobile = (_b = useMobileDetect()) === null || _b === void 0 ? void 0 : _b.isMobile();
var cardsStateRef = useRef({});
var _m = useState({}),
defaultHeightForID = _m[0],
setDefaultHeightForID = _m[1];
var data = useMemo(function () {
// 去重, 重复id会报错
// 不能每次生成新id，不然会造成重复刷新
var arr = [];
var idMap = {};
_data.forEach(function (d) {
if (d.id in idMap) {
d.id = nanoid();
arr.push(d);
} else {
arr.push(d);
}
idMap[d.id] = d.id;
});
return arr;
}, [_data]);
var layout = data.map(function (d) {
var _a;
return __assign(__assign({
x: 0,
y: 0,
w: 12,
h: ((_a = d.layout) === null || _a === void 0 ? void 0 : _a.defaultH) || getItemDefaultHeight(d.cardProps.logicform) || defaultH,
minH: defaultH / 2,
minW: 2
}, d.layout), {
i: d.id
});
});
var onLayoutChange = function onLayoutChange(lay) {
var newData = data.map(function (d) {
var _a;
var l = lay.find(function (f) {
return f.i === d.id;
});
if (l) {
if (defaultHeightForID[l.i] && defaultHeightForID[l.i].h !== l.h && !defaultHeightForID[l.i].edited) {
setDefaultHeightForID(__assign(__assign({}, defaultHeightForID), (_a = {}, _a[l.i] = {
h: defaultHeightForID[l.i].h,
edited: true
}, _a)));
}
return __assign(__assign({}, d), {
layout: l
});
}
return d;
});
onDataChange === null || onDataChange === void 0 ? void 0 : onDataChange(newData);
};
var onItemDelete = function onItemDelete(id) {
onDataChange === null || onDataChange === void 0 ? void 0 : onDataChange(data.filter(function (d) {
return d.id !== id;
}));
};
useEffect(function () {
if (dashboardRef) {
dashboardRef.current.setDashboardItem = function (id, params) {
cardsStateRef.current[id] = __assign(__assign({}, cardsStateRef.current[id]), params);
};
dashboardRef.current.getDashboardState = function (_data) {
var cardsState = cardsStateRef.current;
return _data.map(function (d) {
var ret = {
id: d.id,
layout: _.pick(d.layout, ["i", "w", "h", "x", "y"]),
cardProps: _.pick(__assign(__assign({}, d.cardProps), cardsState[d.id]), ["title", "question", "logicform", "representation", "sheetProps", "chartProps", "useLLM", "promptTemplate", "echartsSetting"])
};
if (ret.cardProps.sheetProps) {
delete ret.cardProps.sheetProps.data;
if (ret.cardProps.sheetProps.s2DataConfig) {
delete ret.cardProps.sheetProps.s2DataConfig.data;
delete ret.cardProps.sheetProps.s2DataConfig.meta;
}
}
return ret;
});
};
}
}, []);
if (cardsOnly) {
return /*#__PURE__*/React.createElement("div", {
className: "ze-dashboard-cards-only",
style: style
}, data.map(function (item, i) {
return /*#__PURE__*/React.createElement("div", {
style: {
marginTop: 20
},
key: item.id
}, /*#__PURE__*/React.createElement(ZECard, __assign({
llmProps: {
showSearch: true
}
}, item.cardProps, {
onChange: function onChange(params) {
cardsStateRef.current[item.id] = __assign(__assign({}, cardsStateRef.current[item.id]), params);
}
})));
}));
}
return /*#__PURE__*/React.createElement("div", {
className: ["ze-dashboard", className, editable ? "active" : ""].join(" "),
style: style
}, width !== undefined && /*#__PURE__*/React.createElement(GridLayout, {
width: width,
rowHeight: rowHeight,
layout: layout.map(function (l) {
return __assign(__assign({}, l), {
w: isMobile ? cols : l.w,
h: defaultHeightForID[l.i] && !defaultHeightForID[l.i].edited ? defaultHeightForID[l.i].h : l.h
});
}),
isDraggable: editable,
isResizable: editable,
isBounded: true,
cols: cols,
margin: margin,
containerPadding: containerPadding,
resizeHandles: resizeHandles,
resizeHandle: resizeHandle,
draggableHandle: ".ze-dashboard-draggable-handler",
onLayoutChange: onLayoutChange
}, data.map(function (d) {
var _a, _b, _c;
return /*#__PURE__*/React.createElement("div", {
key: d.id,
className: "ze-dashboard-item"
}, /*#__PURE__*/React.createElement(ZECard, __assign({
llmMaxRows: 6
}, d.cardProps, {
id: d.id,
titleRender: function titleRender(t) {
return /*#__PURE__*/React.createElement("div", {
className: editable ? "ze-dashboard-draggable-handler" : ""
}, t);
},
tableProps: __assign({
height: "auto"
}, (_a = d.cardProps) === null || _a === void 0 ? void 0 : _a.tableProps),
sheetProps: __assign({
height: "100%"
}, (_b = d.cardProps) === null || _b === void 0 ? void 0 : _b.sheetProps),
onChange: function onChange(params) {
var _a;
var _b, _c, _d, _e, _f, _g;
cardsStateRef.current[d.id] = __assign(__assign({}, cardsStateRef.current[d.id]), params);
if (useDefaultHeightFromRepresentation) {
if (((_c = (_b = params === null || params === void 0 ? void 0 : params.sheetProps) === null || _b === void 0 ? void 0 : _b.s2DataConfig) === null || _c === void 0 ? void 0 : _c.data) && ((_g = (_f = (_e = (_d = params === null || params === void 0 ? void 0 : params.sheetProps) === null || _d === void 0 ? void 0 : _d.s2DataConfig) === null || _e === void 0 ? void 0 : _e.fields) === null || _f === void 0 ? void 0 : _f.rows) === null || _g === void 0 ? void 0 : _g.length) > 1 // 多维数组
) {
var rowCount = params.sheetProps.s2DataConfig.data.length;
var edited = false;
if (defaultHeightForID[d.id]) {
edited = defaultHeightForID[d.id].edited;
}
setDefaultHeightForID(__assign(__assign({}, defaultHeightForID), (_a = {}, _a[d.id] = {
h: Math.min(Math.ceil((180 + (rowCount + 1) * 30 + 24) / 84), 10),
edited: edited
}, _a)));
}
}
},
close: editable || ((_c = d.cardProps) === null || _c === void 0 ? void 0 : _c.close) ? function () {
var _a;
if ((_a = d.cardProps) === null || _a === void 0 ? void 0 : _a.close) {
// close本身不需要处理删除操作
d.cardProps.close();
}
onItemDelete(d.id);
} : undefined
})));
})));
};
var ZEDashboardWrapper = function ZEDashboardWrapper(props) {
return /*#__PURE__*/React.createElement(SizeMe, null, function (_a) {
var width = _a.size.width;
return /*#__PURE__*/React.createElement(ZEDashboard, __assign({}, props, {
width: props.width || width
}));
});
};
export default ZEDashboardWrapper;