@kep-platform/basic-component 0.0.55 → 0.0.56
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/@types/index.d.ts +7 -0
- package/dist/Tree/MainProperties.d.ts +1 -1
- package/dist/Tree/Tree.d.ts +0 -1
- package/dist/Tree/TreeNode.js +41 -24
- package/dist/Tree/test.js +23 -3
- package/package.json +3 -3
package/dist/@types/index.d.ts
CHANGED
@@ -37,8 +37,15 @@ declare global {
|
|
37
37
|
[key in RequiredTreeNodeKeys]: string;
|
38
38
|
};
|
39
39
|
|
40
|
+
type Condition = {
|
41
|
+
attribute: string;
|
42
|
+
condition: (value: any) => boolean;
|
43
|
+
description: string;
|
44
|
+
};
|
45
|
+
|
40
46
|
type TreeNodeType = {
|
41
47
|
[key: string]: any;
|
48
|
+
groupBy?: Condition[];
|
42
49
|
};
|
43
50
|
|
44
51
|
type onExpandHandler = (
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import React, { ReactNode } from 'react';
|
2
|
-
export declare const MainArea: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof
|
2
|
+
export declare const MainArea: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("../Flex").FlexItemProps | keyof React.HtmlHTMLAttributes<HTMLDivElement>> & import("../Flex").FlexItemProps & React.HtmlHTMLAttributes<HTMLDivElement>, "ref"> & {
|
3
3
|
ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
|
4
4
|
}, never>> & string;
|
5
5
|
type MainPropertyProps = {
|
package/dist/Tree/Tree.d.ts
CHANGED
@@ -15,7 +15,6 @@ export type TreeProps = {
|
|
15
15
|
title?: ReactNode;
|
16
16
|
isFlex?: boolean;
|
17
17
|
bordered?: boolean;
|
18
|
-
groupBy?: string | null;
|
19
18
|
};
|
20
19
|
declare const Tree: (({ treeData, columns, fieldNames, title: treeTitle, titleWidth, titleRender, selectedKeys, expandedKeys, isFlex, onSelect, onExpand, contextMenuRender, onContextMenuItemSelect, multiple, bordered, }: TreeProps) => React.JSX.Element) & {
|
21
20
|
displayName: string;
|
package/dist/Tree/TreeNode.js
CHANGED
@@ -45,7 +45,7 @@ var TreeNodeGroup = function TreeNodeGroup(props) {
|
|
45
45
|
_useState2 = _slicedToArray(_useState, 2),
|
46
46
|
expanded = _useState2[0],
|
47
47
|
setExpanded = _useState2[1];
|
48
|
-
|
48
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TreeNodeGroupNode, {
|
49
49
|
width: props.width,
|
50
50
|
onClick: function onClick() {
|
51
51
|
return setExpanded(!expanded);
|
@@ -66,25 +66,29 @@ var TreeNodeGroup = function TreeNodeGroup(props) {
|
|
66
66
|
expanded: expanded
|
67
67
|
})), /*#__PURE__*/React.createElement(FlexItem, {
|
68
68
|
flex: 1
|
69
|
-
}, props.
|
69
|
+
}, props.groupTitle))), expanded && React.Children.map(props.children, function (child) {
|
70
70
|
return /*#__PURE__*/React.cloneElement(child, {
|
71
71
|
level: props.level + 1
|
72
72
|
});
|
73
|
-
}));
|
73
|
+
}));
|
74
74
|
};
|
75
|
-
function groupTreeNodeByPropertyName(
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
}
|
75
|
+
var groupTreeNodeByPropertyName = function groupTreeNodeByPropertyName(conditions, data) {
|
76
|
+
if (!conditions) return data;
|
77
|
+
var result = data.reduce(function (acc, item) {
|
78
|
+
var key = conditions.map(function (cond) {
|
79
|
+
var attribute = cond.attribute,
|
80
|
+
condition = cond.condition,
|
81
|
+
description = cond.description;
|
82
|
+
return condition(item[attribute]) ? "".concat(description, ":\u662F") : "".concat(description, ":\u5426");
|
83
|
+
}).join(' | ');
|
84
|
+
if (!acc[key]) {
|
85
|
+
acc[key] = [];
|
86
|
+
}
|
87
|
+
acc[key].push(item);
|
84
88
|
return acc;
|
85
89
|
}, {});
|
86
|
-
return
|
87
|
-
}
|
90
|
+
return result;
|
91
|
+
};
|
88
92
|
export var nodeTypeMap = {
|
89
93
|
virtual: 'virtual'
|
90
94
|
};
|
@@ -117,14 +121,8 @@ export var TreeNodeController = observer(function (_ref) {
|
|
117
121
|
return expandedKeys.includes(node[fieldNames.key]) || node.nodeType === nodeTypeMap.virtual;
|
118
122
|
}, [expandedKeys, fieldNames, node]);
|
119
123
|
var treeNodeGroup = useMemo(function () {
|
120
|
-
return groupTreeNodeByPropertyName(node.children || []
|
124
|
+
return groupTreeNodeByPropertyName(node.groupBy, node.children || []);
|
121
125
|
}, [node.children, node.groupBy]);
|
122
|
-
var groupTitle = useMemo(function () {
|
123
|
-
var _columns$find;
|
124
|
-
return (_columns$find = columns.find(function (column) {
|
125
|
-
return column.dataIndex === node.groupBy;
|
126
|
-
})) === null || _columns$find === void 0 ? void 0 : _columns$find.title;
|
127
|
-
}, [columns, node.groupBy]);
|
128
126
|
var onClickNodeHandler = useCallback(function (e) {
|
129
127
|
if (multiple) {
|
130
128
|
if (selected) {
|
@@ -210,13 +208,12 @@ export var TreeNodeController = observer(function (_ref) {
|
|
210
208
|
onSelect: function onSelect(key, item) {
|
211
209
|
return onContextMenuItemSelect === null || onContextMenuItemSelect === void 0 ? void 0 : onContextMenuItemSelect(node, key, item);
|
212
210
|
}
|
213
|
-
}, nodeEntity) : nodeEntity), expanded && treeNodeGroup && Object.keys(treeNodeGroup).map(function (groupKey) {
|
211
|
+
}, nodeEntity) : nodeEntity), expanded && treeNodeGroup && !Array.isArray(treeNodeGroup) && Object.keys(treeNodeGroup).map(function (groupKey) {
|
214
212
|
return /*#__PURE__*/React.createElement(TreeNodeGroup, {
|
215
213
|
width: width,
|
216
214
|
mainWidth: mainWidth,
|
217
215
|
key: groupKey,
|
218
|
-
|
219
|
-
groupName: groupTitle,
|
216
|
+
groupTitle: groupKey,
|
220
217
|
level: childLevel
|
221
218
|
}, treeNodeGroup[groupKey].map(function (childNode) {
|
222
219
|
return /*#__PURE__*/React.createElement(TreeNodeController, {
|
@@ -239,5 +236,25 @@ export var TreeNodeController = observer(function (_ref) {
|
|
239
236
|
onContextMenuItemSelect: onContextMenuItemSelect
|
240
237
|
});
|
241
238
|
}));
|
239
|
+
}), expanded && treeNodeGroup && Array.isArray(treeNodeGroup) && treeNodeGroup.map(function (childNode) {
|
240
|
+
return /*#__PURE__*/React.createElement(TreeNodeController, {
|
241
|
+
width: width,
|
242
|
+
selectedKeys: selectedKeys,
|
243
|
+
key: childNode[fieldNames.key],
|
244
|
+
node: childNode,
|
245
|
+
fieldNames: fieldNames,
|
246
|
+
isFlex: isFlex,
|
247
|
+
isTableMode: isTableMode,
|
248
|
+
columns: columns,
|
249
|
+
onSelect: onSelect,
|
250
|
+
multiple: multiple,
|
251
|
+
level: childLevel,
|
252
|
+
mainWidth: mainWidth,
|
253
|
+
onExpand: onExpand,
|
254
|
+
expandedKeys: expandedKeys,
|
255
|
+
contextMenuRender: contextMenuRender,
|
256
|
+
titleRender: titleRender,
|
257
|
+
onContextMenuItemSelect: onContextMenuItemSelect
|
258
|
+
});
|
242
259
|
}));
|
243
260
|
});
|
package/dist/Tree/test.js
CHANGED
@@ -74,7 +74,6 @@ var mystore = new MyStore([{
|
|
74
74
|
key: '1',
|
75
75
|
title: 'jss',
|
76
76
|
count: 1,
|
77
|
-
groupBy: 'count',
|
78
77
|
children: [{
|
79
78
|
key: '4',
|
80
79
|
title: 'skjdfkljasklfjkljdsklajfkl就是要长一的点点滴滴的点点滴滴哒哒哒哒哒哒哒哒哒哒哒哒哒哒',
|
@@ -92,7 +91,13 @@ var mystore = new MyStore([{
|
|
92
91
|
key: '2121212121212',
|
93
92
|
title: '2',
|
94
93
|
count: 1,
|
95
|
-
groupBy:
|
94
|
+
groupBy: [{
|
95
|
+
attribute: 'count',
|
96
|
+
condition: function condition(value) {
|
97
|
+
return value === 1;
|
98
|
+
},
|
99
|
+
description: '数量等于1'
|
100
|
+
}],
|
96
101
|
children: [{
|
97
102
|
key: '3',
|
98
103
|
title: 'jss',
|
@@ -109,7 +114,22 @@ var mystore = new MyStore([{
|
|
109
114
|
key: '20',
|
110
115
|
title: '3',
|
111
116
|
children: [],
|
112
|
-
count:
|
117
|
+
count: 1
|
118
|
+
}, {
|
119
|
+
key: '21',
|
120
|
+
title: 'xixi',
|
121
|
+
children: [],
|
122
|
+
count: 1
|
123
|
+
}, {
|
124
|
+
key: '22',
|
125
|
+
title: 'haha',
|
126
|
+
children: [],
|
127
|
+
count: 1
|
128
|
+
}, {
|
129
|
+
key: '23',
|
130
|
+
title: 'lala',
|
131
|
+
children: [],
|
132
|
+
count: 1
|
113
133
|
}]
|
114
134
|
}]);
|
115
135
|
var Title = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n width: 100%;\n text-align: center;\n"])));
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@kep-platform/basic-component",
|
3
|
-
"version": "0.0.
|
3
|
+
"version": "0.0.56",
|
4
4
|
"description": "A react library developed with dumi",
|
5
5
|
"license": "MIT",
|
6
6
|
"module": "dist/index.js",
|
@@ -47,7 +47,7 @@
|
|
47
47
|
},
|
48
48
|
"dependencies": {
|
49
49
|
"@ant-design/icons": "^5.3.7",
|
50
|
-
"@kep-platform/hooks": "^0.0.
|
50
|
+
"@kep-platform/hooks": "^0.0.56",
|
51
51
|
"color": "^4.2.3",
|
52
52
|
"rc-pagination": "^4.1.0"
|
53
53
|
},
|
@@ -87,5 +87,5 @@
|
|
87
87
|
"authors": [
|
88
88
|
"less-step-jss 1599925910@qq.com"
|
89
89
|
],
|
90
|
-
"gitHead": "
|
90
|
+
"gitHead": "d78f1b33a287d2c584cfc98c0daac159a49ab200"
|
91
91
|
}
|