xh-lab-rc 0.18.7 → 0.18.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/LabOperateTree/index.d.ts +19 -0
  2. package/dist/LabOperateTree/index.js +51 -32
  3. package/dist/LabOperateTree/style.less +16 -3
  4. package/package.json +1 -1
package/dist/LabOperateTree/index.d.ts CHANGED
@@ -15,8 +15,27 @@ export interface ILabOperateTree {
15
15
  treeData: any;
16
16
  leafOperateListElement?: React.ReactElement;
17
17
  onSelect?: (node: INode) => void;
18
+ fieldNames: {
19
+ title: string;
20
+ secondTitle?: string;
21
+ key: string;
22
+ secondKey?: string;
23
+ children: string;
24
+ nodeType: string;
25
+ };
18
26
  onCheckChange?: (checkedKeys: any, info: any) => void;
19
27
  onOpenPopover?: (info: any) => void;
28
+ iconElementByLevel?: {
29
+ L1?: React.ReactElement;
30
+ L2?: React.ReactElement;
31
+ L3?: React.ReactElement;
32
+ L4?: React.ReactElement;
33
+ L5?: React.ReactElement;
34
+ };
35
+ iconElementByLeaf?: {
36
+ leaf?: React.ReactElement;
37
+ nonLeaf?: React.ReactElement;
38
+ };
20
39
  iconElementByNodeType?: {
21
40
  '2'?: React.ReactElement;
22
41
  '4'?: React.ReactElement;
package/dist/LabOperateTree/index.js CHANGED
@@ -13,7 +13,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
13
13
  function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
14
14
  function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
15
15
  import { treeToArray } from "../utils/utils";
16
- import { MoreOutlined } from '@ant-design/icons';
16
+ import { FileOutlined, FolderOpenOutlined, MoreOutlined } from '@ant-design/icons';
17
17
  import { Popover, Spin, Tree } from 'antd';
18
18
  import React, { useEffect, useImperativeHandle, useMemo, useState } from 'react';
19
19
  import "./style.less";
@@ -22,20 +22,29 @@ var openMarkData = {};
22
22
  // 勾选标记
23
23
  var treeCheckedList = [];
24
24
  var LabOperateTree = function LabOperateTree() {
25
- var _leafItemTreeList$2;
25
+ var _leafItemTreeList$4;
26
26
  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
27
27
  treeData: [],
28
- operateType: 'icon'
28
+ operateType: 'icon',
29
+ fieldNames: {
30
+ title: 'NAME',
31
+ key: 'SOURCE_PATH',
32
+ children: 'CHILDREN',
33
+ nodeType: 'NODE_TYPE'
34
+ }
29
35
  };
30
36
  var ref = arguments.length > 1 ? arguments[1] : undefined;
31
37
  var _useMemo = useMemo(function () {
32
- var _leafItemTreeList$;
38
+ var _leafItemTreeList$, _leafItemTreeList$2, _leafItemTreeList$3, _props$fieldNames;
33
39
  var allItemTreeList = treeToArray(props.treeData);
40
+ // 所有
34
41
  var leafItemTreeList = allItemTreeList.filter(function (v) {
35
- var _v$CHILDREN;
36
- return !((_v$CHILDREN = v.CHILDREN) !== null && _v$CHILDREN !== void 0 && _v$CHILDREN.length);
42
+ var _v$props$fieldNames$c;
43
+ return !((_v$props$fieldNames$c = v[props.fieldNames.children]) !== null && _v$props$fieldNames$c !== void 0 && _v$props$fieldNames$c.length);
37
44
  });
38
- var treeItemIdList = leafItemTreeList === null || leafItemTreeList === void 0 || (_leafItemTreeList$ = leafItemTreeList[0]) === null || _leafItemTreeList$ === void 0 ? void 0 : _leafItemTreeList$.SOURCE_PATH.split('/');
45
+ // 叶子第1个分割
46
+ var treeItemIdList = leafItemTreeList !== null && leafItemTreeList !== void 0 && (_leafItemTreeList$ = leafItemTreeList[0]) !== null && _leafItemTreeList$ !== void 0 && _leafItemTreeList$[props.fieldNames.key] ? leafItemTreeList === null || leafItemTreeList === void 0 || (_leafItemTreeList$2 = leafItemTreeList[0]) === null || _leafItemTreeList$2 === void 0 || (_leafItemTreeList$2 = _leafItemTreeList$2[props.fieldNames.key]) === null || _leafItemTreeList$2 === void 0 ? void 0 : _leafItemTreeList$2.split('/') : leafItemTreeList === null || leafItemTreeList === void 0 || (_leafItemTreeList$3 = leafItemTreeList[0]) === null || _leafItemTreeList$3 === void 0 || (_leafItemTreeList$3 = _leafItemTreeList$3[((_props$fieldNames = props.fieldNames) === null || _props$fieldNames === void 0 ? void 0 : _props$fieldNames.secondKey) || '']) === null || _leafItemTreeList$3 === void 0 ? void 0 : _leafItemTreeList$3.split('/');
47
+ // 从根到叶子第1个
39
48
  var expandKeysList = treeItemIdList === null || treeItemIdList === void 0 ? void 0 : treeItemIdList.map(function (v, i) {
40
49
  return treeItemIdList.slice(0, i + 1).join('/');
41
50
  });
@@ -56,7 +65,7 @@ var LabOperateTree = function LabOperateTree() {
56
65
  _useState4 = _slicedToArray(_useState3, 2),
57
66
  expandKeys = _useState4[0],
58
67
  setExpandKeys = _useState4[1];
59
- var _useState5 = useState([leafItemTreeList === null || leafItemTreeList === void 0 || (_leafItemTreeList$2 = leafItemTreeList[0]) === null || _leafItemTreeList$2 === void 0 ? void 0 : _leafItemTreeList$2.SOURCE_PATH]),
68
+ var _useState5 = useState([leafItemTreeList === null || leafItemTreeList === void 0 || (_leafItemTreeList$4 = leafItemTreeList[0]) === null || _leafItemTreeList$4 === void 0 ? void 0 : _leafItemTreeList$4[props.fieldNames.key]]),
60
69
  _useState6 = _slicedToArray(_useState5, 2),
61
70
  selectedKeys = _useState6[0],
62
71
  setSelectedKeys = _useState6[1];
@@ -68,13 +77,13 @@ var LabOperateTree = function LabOperateTree() {
68
77
  // 记录默认勾选数据
69
78
  treeCheckedList = allItemTreeList === null || allItemTreeList === void 0 ? void 0 : allItemTreeList.filter(function (v) {
70
79
  var _props$checkedKeys;
71
- return props.checkedKeys ? ((_props$checkedKeys = props.checkedKeys) === null || _props$checkedKeys === void 0 ? void 0 : _props$checkedKeys.indexOf(v.SOURCE_PATH)) > -1 : false;
80
+ return props.checkedKeys ? ((_props$checkedKeys = props.checkedKeys) === null || _props$checkedKeys === void 0 ? void 0 : _props$checkedKeys.indexOf(v[props.fieldNames.key])) > -1 : false;
72
81
  });
73
82
 
74
83
  // 获取父级
75
84
  var getParentItemList = function getParentItemList(sourcePath) {
76
85
  var filterList = allItemTreeList.filter(function (v) {
77
- return sourcePath.indexOf(v.SOURCE_PATH) > -1;
86
+ return sourcePath.indexOf(v[props.fieldNames.key]) > -1;
78
87
  });
79
88
  filterList.pop();
80
89
  return filterList;
@@ -84,13 +93,14 @@ var LabOperateTree = function LabOperateTree() {
84
93
  var getChildItemList = function getChildItemList(sourcePath, nodeType, filterCb) {
85
94
  var filterList = allItemTreeList.filter(function (v) {
86
95
  if (sourcePath === '') return true;
87
- return v.SOURCE_PATH.indexOf(sourcePath) > -1;
96
+ return v[props.fieldNames.key].indexOf(sourcePath) > -1;
88
97
  }).filter(function (v) {
98
+ var _v$props$fieldNames$c2;
89
99
  if (nodeType) {
90
100
  if (nodeType === '') return true;
91
- return nodeType === v.NODE_TYPE;
101
+ return nodeType === v[props.fieldNames.nodeType];
92
102
  }
93
- return v.SOURCE !== null;
103
+ return ((_v$props$fieldNames$c2 = v[props.fieldNames.children]) === null || _v$props$fieldNames$c2 === void 0 ? void 0 : _v$props$fieldNames$c2.length) > 0;
94
104
  }).filter(function (v) {
95
105
  if (filterCb) {
96
106
  return filterCb(v);
@@ -103,7 +113,7 @@ var LabOperateTree = function LabOperateTree() {
103
113
  // 获取节点
104
114
  var getChildById = function getChildById(sourcePath) {
105
115
  var filterList = allItemTreeList.filter(function (v) {
106
- return v.SOURCE_PATH === sourcePath;
116
+ return v[props.fieldNames.key] === sourcePath;
107
117
  });
108
118
  return filterList === null || filterList === void 0 ? void 0 : filterList[0];
109
119
  };
@@ -127,14 +137,15 @@ var LabOperateTree = function LabOperateTree() {
127
137
  var initOperateTree = function initOperateTree(treeData, openMarkData) {
128
138
  var dfs = function dfs(treeData) {
129
139
  treeData.map(function (v) {
130
- var _props$iconElementByN, _props$operateElement, _props$operateElement2, _props$disableSelecte, _v$CHILDREN2;
131
- v.key = v.SOURCE_PATH;
132
- v.children = v.CHILDREN;
140
+ var _v$props$fieldNames$k, _props$iconElementByN, _props$iconElementByL, _v$children, _props$iconElementByL2, _props$iconElementByL3, _props$operateElement, _props$operateElement2, _props$disableSelecte, _v$props$fieldNames$c3;
141
+ v.level = ((_v$props$fieldNames$k = v[props.fieldNames.key]) === null || _v$props$fieldNames$k === void 0 || (_v$props$fieldNames$k = _v$props$fieldNames$k.split('/')) === null || _v$props$fieldNames$k === void 0 ? void 0 : _v$props$fieldNames$k.length) || 1;
142
+ v.key = v[props.fieldNames.key] || v[props.fieldNames.secondKey || ''];
143
+ v.children = v[props.fieldNames.children];
133
144
  v.title = /*#__PURE__*/React.createElement("div", {
134
145
  className: 'title-box'
135
146
  }, /*#__PURE__*/React.createElement("div", {
136
147
  className: 'l'
137
- }, props.showIcon && /*#__PURE__*/React.createElement("div", null, props.showIcon && (v.iconElement || (props === null || props === void 0 || (_props$iconElementByN = props.iconElementByNodeType) === null || _props$iconElementByN === void 0 ? void 0 : _props$iconElementByN[v === null || v === void 0 ? void 0 : v.NODE_TYPE]) || '')), /*#__PURE__*/React.createElement("div", null, props.operateType === 'title' ? /*#__PURE__*/React.createElement(Popover, {
148
+ }, props.showIcon && /*#__PURE__*/React.createElement("div", null, props.showIcon && (v.iconElement || (props === null || props === void 0 || (_props$iconElementByN = props.iconElementByNodeType) === null || _props$iconElementByN === void 0 ? void 0 : _props$iconElementByN[v === null || v === void 0 ? void 0 : v[props.fieldNames.nodeType]]) || (props === null || props === void 0 || (_props$iconElementByL = props.iconElementByLevel) === null || _props$iconElementByL === void 0 ? void 0 : _props$iconElementByL['L' + v.level]) || ((v === null || v === void 0 || (_v$children = v.children) === null || _v$children === void 0 ? void 0 : _v$children.length) > 0 ? (props === null || props === void 0 || (_props$iconElementByL2 = props.iconElementByLeaf) === null || _props$iconElementByL2 === void 0 ? void 0 : _props$iconElementByL2.nonLeaf) || /*#__PURE__*/React.createElement(FolderOpenOutlined, null) : (props === null || props === void 0 || (_props$iconElementByL3 = props.iconElementByLeaf) === null || _props$iconElementByL3 === void 0 ? void 0 : _props$iconElementByL3.leaf) || /*#__PURE__*/React.createElement(FileOutlined, null)))), /*#__PURE__*/React.createElement("div", null, props.operateType === 'title' ? /*#__PURE__*/React.createElement(Popover, {
138
149
  arrow: false,
139
150
  overlayClassName: 'my-popover-box',
140
151
  placement: "bottom",
@@ -142,32 +153,40 @@ var LabOperateTree = function LabOperateTree() {
142
153
  className: 'popover-box',
143
154
  onClick: function onClick() {
144
155
  initOperateTree(_toConsumableArray(props.treeData), {});
156
+ },
157
+ onMouseLeave: function onMouseLeave() {
158
+ initOperateTree(_toConsumableArray(props.treeData), {});
145
159
  }
146
160
  }, props.leafOperateListElement),
147
- open: openMarkData[v.SOURCE_PATH] || false,
161
+ open: openMarkData[v[props.fieldNames.key]] || false,
148
162
  onOpenChange: function onOpenChange(newOpen) {
149
163
  if (newOpen) {
150
164
  var _props$onOpenPopover;
151
165
  props === null || props === void 0 || (_props$onOpenPopover = props.onOpenPopover) === null || _props$onOpenPopover === void 0 || _props$onOpenPopover.call(props, v);
152
166
  }
167
+ initOperateTree(_toConsumableArray(props.treeData), _defineProperty({}, v[props.fieldNames.key], newOpen));
153
168
  },
169
+ trigger: 'focus',
154
170
  destroyTooltipOnHide: true
155
171
  }, /*#__PURE__*/React.createElement("div", {
156
172
  onContextMenu: function onContextMenu(e) {
157
173
  e.preventDefault();
158
- initOperateTree(_toConsumableArray(props.treeData), _defineProperty({}, v.SOURCE_PATH, true));
174
+ initOperateTree(_toConsumableArray(props.treeData), _defineProperty({}, v[props.fieldNames.key], true));
159
175
  }
160
- }, v === null || v === void 0 ? void 0 : v.NAME)) : v.NAME)), /*#__PURE__*/React.createElement("div", {
176
+ }, v === null || v === void 0 ? void 0 : v[props.fieldNames.title])) : v === null || v === void 0 ? void 0 : v[props.fieldNames.title])), /*#__PURE__*/React.createElement("div", {
161
177
  className: 'r',
178
+ style: {
179
+ display: (props === null || props === void 0 ? void 0 : props.showOperateIcon) === true ? 'block' : 'unset'
180
+ },
162
181
  onClick: function onClick(e) {
163
182
  e.stopPropagation();
164
183
  }
165
- }, props.showOperateIcon && (props !== null && props !== void 0 && props.singleOperateElement ? /*#__PURE__*/React.createElement("span", {
184
+ }, (props.showOperateIcon === undefined || props.showOperateIcon === true) && (props !== null && props !== void 0 && props.singleOperateElement ? /*#__PURE__*/React.createElement("span", {
166
185
  onClick: function onClick() {
167
186
  var _props$onOpenPopover2;
168
187
  props === null || props === void 0 || (_props$onOpenPopover2 = props.onOpenPopover) === null || _props$onOpenPopover2 === void 0 || _props$onOpenPopover2.call(props, v);
169
188
  }
170
- }, v.operateElement || (props === null || props === void 0 || (_props$operateElement = props.operateElementByNodeType) === null || _props$operateElement === void 0 ? void 0 : _props$operateElement[v === null || v === void 0 ? void 0 : v.NODE_TYPE]) || /*#__PURE__*/React.createElement(MoreOutlined, null)) : props.operateType === 'icon' && /*#__PURE__*/React.createElement(Popover, {
189
+ }, v.operateElement || (props === null || props === void 0 || (_props$operateElement = props.operateElementByNodeType) === null || _props$operateElement === void 0 ? void 0 : _props$operateElement[v === null || v === void 0 ? void 0 : v[props.fieldNames.nodeType]]) || /*#__PURE__*/React.createElement(MoreOutlined, null)) : props.operateType === 'icon' && /*#__PURE__*/React.createElement(Popover, {
171
190
  arrow: false,
172
191
  overlayClassName: 'my-popover-box',
173
192
  content: /*#__PURE__*/React.createElement("div", {
@@ -176,26 +195,26 @@ var LabOperateTree = function LabOperateTree() {
176
195
  initOperateTree(_toConsumableArray(props.treeData), {});
177
196
  }
178
197
  }, props.leafOperateListElement),
179
- open: openMarkData[v.SOURCE_PATH] || false,
198
+ open: openMarkData[v === null || v === void 0 ? void 0 : v[props.fieldNames.key]] || false,
180
199
  onOpenChange: function onOpenChange(newOpen) {
181
200
  if (newOpen) {
182
201
  var _props$onOpenPopover3;
183
202
  props === null || props === void 0 || (_props$onOpenPopover3 = props.onOpenPopover) === null || _props$onOpenPopover3 === void 0 || _props$onOpenPopover3.call(props, v);
184
203
  }
185
- initOperateTree(_toConsumableArray(props.treeData), _defineProperty({}, v.SOURCE_PATH, newOpen));
204
+ initOperateTree(_toConsumableArray(props.treeData), _defineProperty({}, v === null || v === void 0 ? void 0 : v[props.fieldNames.key], newOpen));
186
205
  },
187
206
  trigger: "click",
188
207
  destroyTooltipOnHide: true
189
- }, v.operateElement || (props === null || props === void 0 || (_props$operateElement2 = props.operateElementByNodeType) === null || _props$operateElement2 === void 0 ? void 0 : _props$operateElement2[v === null || v === void 0 ? void 0 : v.NODE_TYPE]) || /*#__PURE__*/React.createElement(MoreOutlined, null)))));
190
- if (props !== null && props !== void 0 && (_props$disableSelecte = props.disableSelectedByNodeType) !== null && _props$disableSelecte !== void 0 && _props$disableSelecte.includes(v === null || v === void 0 ? void 0 : v.NODE_TYPE)) {
208
+ }, v.operateElement || (props === null || props === void 0 || (_props$operateElement2 = props.operateElementByNodeType) === null || _props$operateElement2 === void 0 ? void 0 : _props$operateElement2[v === null || v === void 0 ? void 0 : v[props.fieldNames.nodeType]]) || /*#__PURE__*/React.createElement(MoreOutlined, null)))));
209
+ if (props !== null && props !== void 0 && (_props$disableSelecte = props.disableSelectedByNodeType) !== null && _props$disableSelecte !== void 0 && _props$disableSelecte.includes(v === null || v === void 0 ? void 0 : v[props.fieldNames.nodeType])) {
191
210
  v.selectable = v.selectable === undefined ? false : v.selectable;
192
211
  } else {
193
212
  v.selectable = v.selectable === undefined ? true : v.selectable;
194
213
  }
195
- if (!((_v$CHILDREN2 = v.CHILDREN) !== null && _v$CHILDREN2 !== void 0 && _v$CHILDREN2.length)) {
214
+ if (!(v !== null && v !== void 0 && (_v$props$fieldNames$c3 = v[props.fieldNames.children]) !== null && _v$props$fieldNames$c3 !== void 0 && _v$props$fieldNames$c3.length)) {
196
215
  return v;
197
216
  } else {
198
- return dfs(v.CHILDREN);
217
+ return dfs(v === null || v === void 0 ? void 0 : v[props.fieldNames.children]);
199
218
  }
200
219
  });
201
220
  return treeData;
@@ -208,9 +227,9 @@ var LabOperateTree = function LabOperateTree() {
208
227
  useEffect(function () {
209
228
  var _props$treeData;
210
229
  if (((_props$treeData = props.treeData) === null || _props$treeData === void 0 ? void 0 : _props$treeData.length) > 0) {
211
- var _leafItemTreeList$3, _props$onSelect;
230
+ var _leafItemTreeList$5, _props$onSelect;
212
231
  initOperateTree(props.treeData, openMarkData);
213
- setSelectedKeys([leafItemTreeList === null || leafItemTreeList === void 0 || (_leafItemTreeList$3 = leafItemTreeList[0]) === null || _leafItemTreeList$3 === void 0 ? void 0 : _leafItemTreeList$3.SOURCE_PATH]);
232
+ setSelectedKeys([leafItemTreeList === null || leafItemTreeList === void 0 || (_leafItemTreeList$5 = leafItemTreeList[0]) === null || _leafItemTreeList$5 === void 0 ? void 0 : _leafItemTreeList$5[props.fieldNames.key]]);
214
233
  props === null || props === void 0 || (_props$onSelect = props.onSelect) === null || _props$onSelect === void 0 || _props$onSelect.call(props, leafItemTreeList === null || leafItemTreeList === void 0 ? void 0 : leafItemTreeList[0]);
215
234
  if ((props === null || props === void 0 ? void 0 : props.expandAll) === undefined) {
216
235
  setExpandKeys(expandKeysList);
@@ -218,7 +237,7 @@ var LabOperateTree = function LabOperateTree() {
218
237
  setExpandKeys([]);
219
238
  } else if ((props === null || props === void 0 ? void 0 : props.expandAll) === true) {
220
239
  setExpandKeys(allItemTreeList.map(function (v) {
221
- return v.SOURCE_PATH;
240
+ return (v === null || v === void 0 ? void 0 : v[props.fieldNames.key]) || (v === null || v === void 0 ? void 0 : v[props.fieldNames.secondKey || '']);
222
241
  }));
223
242
  }
224
243
  }
package/dist/LabOperateTree/style.less CHANGED
@@ -10,13 +10,14 @@
10
10
  .l {
11
11
  padding: 0 2px;
12
12
  display: flex;
13
-
13
+ flex: 1;
14
14
  // > div:nth-child(1) {
15
15
  // padding: 0 4px;
16
16
  // }
17
17
 
18
18
  :nth-child(2) {
19
19
  padding-left: 4px;
20
+ width: 100%;
20
21
  }
21
22
  }
22
23
 
@@ -28,7 +29,9 @@
28
29
  background-color: transparent;
29
30
 
30
31
  .l {
31
- background-color: #bfe2ff;
32
+ :nth-child(2) {
33
+ background-color: #d0e4ff;
34
+ }
32
35
  }
33
36
 
34
37
  .r {
@@ -69,7 +72,9 @@
69
72
 
70
73
  .title-box {
71
74
  .l {
72
- background-color: #fee8d9;
75
+ :nth-child(2) {
76
+ background-color: #d0e4ff;
77
+ }
73
78
  }
74
79
  }
75
80
  }
@@ -99,8 +104,16 @@
99
104
  }
100
105
 
101
106
  .my-popover-box {
107
+ padding-top: 0;
108
+
102
109
  .ant-popover-inner {
103
110
  padding: unset;
104
111
  border-radius: 4px;
105
112
  }
113
+
114
+ .ant-popover-content {
115
+ .ant-popover-arrow {
116
+ display: none;
117
+ }
118
+ }
106
119
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "xh-lab-rc",
3
- "version": "0.18.7",
3
+ "version": "0.18.22",
4
4
  "description": " A react library for xinhelab",
5
5
  "license": "MIT",
6
6
  "module": "dist/index.js",