@kep-platform/basic-component 0.0.2 → 0.0.5

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 (74) hide show
  1. package/dist/@types/index.d.ts +60 -0
  2. package/dist/@types/styled-components.d.ts +9 -0
  3. package/dist/@types/theme.d.ts +38 -0
  4. package/dist/BoxShadowBox/BoxShadowBox.d.ts +8 -0
  5. package/dist/BoxShadowBox/BoxShadowBox.js +14 -0
  6. package/dist/BoxShadowBox/index.d.ts +1 -0
  7. package/dist/BoxShadowBox/index.js +1 -0
  8. package/dist/Button/Button.d.ts +12 -0
  9. package/dist/Button/Button.js +86 -0
  10. package/dist/Button/index.d.ts +1 -0
  11. package/dist/Button/index.js +1 -0
  12. package/dist/Columns/Columns.d.ts +24 -0
  13. package/dist/Columns/Columns.js +126 -0
  14. package/dist/Columns/index.d.ts +1 -0
  15. package/dist/Columns/index.js +1 -0
  16. package/dist/Flex/flex.d.ts +14 -0
  17. package/dist/Flex/flex.js +29 -0
  18. package/dist/Flex/index.d.ts +1 -0
  19. package/dist/Flex/index.js +1 -0
  20. package/dist/Grid/Col.d.ts +8 -0
  21. package/dist/Grid/Col.js +12 -0
  22. package/dist/Grid/Row.d.ts +6 -0
  23. package/dist/Grid/Row.js +55 -0
  24. package/dist/Grid/index.d.ts +2 -0
  25. package/dist/Grid/index.js +2 -0
  26. package/dist/Indent/Indent.d.ts +7 -0
  27. package/dist/Indent/Indent.js +25 -0
  28. package/dist/Indent/index.d.ts +1 -0
  29. package/dist/Indent/index.js +1 -0
  30. package/dist/List/List.d.ts +19 -0
  31. package/dist/List/List.js +41 -0
  32. package/dist/List/index.d.ts +1 -0
  33. package/dist/List/index.js +1 -0
  34. package/dist/Menu/Menu.d.ts +14 -0
  35. package/dist/Menu/Menu.js +107 -0
  36. package/dist/Menu/index.d.ts +3 -0
  37. package/dist/Menu/index.js +2 -0
  38. package/dist/PopupBox/PopupBox.d.ts +12 -0
  39. package/dist/PopupBox/PopupBox.js +12 -0
  40. package/dist/PopupBox/index.d.ts +1 -0
  41. package/dist/PopupBox/index.js +1 -0
  42. package/dist/Space/Space.d.ts +11 -0
  43. package/dist/Space/Space.js +39 -0
  44. package/dist/Space/index.d.ts +1 -0
  45. package/dist/Space/index.js +1 -0
  46. package/dist/Table/Table.d.ts +16 -0
  47. package/dist/Table/Table.js +230 -0
  48. package/dist/Table/index.d.ts +1 -0
  49. package/dist/Table/index.js +1 -0
  50. package/dist/Tag/Tag.d.ts +7 -0
  51. package/dist/Tag/Tag.js +16 -0
  52. package/dist/Tree/BOMTree.d.ts +3 -0
  53. package/dist/Tree/BOMTree.js +111 -0
  54. package/dist/Tree/MainProperties.d.ts +12 -0
  55. package/dist/Tree/MainProperties.js +23 -0
  56. package/dist/Tree/Tree.d.ts +20 -0
  57. package/dist/Tree/Tree.js +253 -0
  58. package/dist/Tree/TreeNode.d.ts +20 -0
  59. package/dist/Tree/TreeNode.js +147 -0
  60. package/dist/Tree/index.d.ts +3 -0
  61. package/dist/Tree/index.js +3 -0
  62. package/dist/__consts/theme.d.ts +81 -0
  63. package/dist/__consts/theme.js +88 -0
  64. package/dist/__consts/unit.d.ts +1 -0
  65. package/dist/__consts/unit.js +1 -0
  66. package/dist/__styles/GlobalStyles.d.ts +6 -0
  67. package/dist/__styles/GlobalStyles.js +6 -0
  68. package/dist/__styles/index.d.ts +1 -0
  69. package/dist/__styles/index.js +1 -0
  70. package/dist/index.d.ts +11 -1
  71. package/dist/index.js +11 -1
  72. package/package.json +10 -2
  73. package/dist/Foo/index.d.ts +0 -5
  74. package/dist/Foo/index.js +0 -5
@@ -0,0 +1,111 @@
1
+ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
2
+ function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
3
+ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
4
+ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
5
+ 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; } }
6
+ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
7
+ import { GlobalStyles, Tree } from "./..";
8
+ import React, { useState } from 'react';
9
+ import styled from 'styled-components';
10
+ var Title = styled.div.withConfig({
11
+ displayName: "Title",
12
+ componentId: "basic-component-347b__sc-klaw2r-0"
13
+ })(["width:100%;text-align:center;"]);
14
+ export default (function () {
15
+ var _useState = useState([]),
16
+ _useState2 = _slicedToArray(_useState, 2),
17
+ selectedKeys = _useState2[0],
18
+ setSelectedKeys = _useState2[1];
19
+ var _useState3 = useState([]),
20
+ _useState4 = _slicedToArray(_useState3, 2),
21
+ expandedKeys = _useState4[0],
22
+ setExpandedKeys = _useState4[1];
23
+ var treeData = [{
24
+ key: '1',
25
+ title: 'jss',
26
+ count: 1,
27
+ children: [{
28
+ key: '4',
29
+ title: 'skjdfkljasklfjkljdsklajfkl就是要长一的点点滴滴的点点滴滴哒哒哒哒哒哒哒哒哒哒哒哒哒哒',
30
+ children: []
31
+ }, {
32
+ key: '5',
33
+ title: 567,
34
+ children: []
35
+ }, {
36
+ key: '6',
37
+ title: 789,
38
+ children: []
39
+ }]
40
+ }, {
41
+ key: '2121212121212',
42
+ title: '2',
43
+ count: 1,
44
+ children: []
45
+ }, {
46
+ key: '3',
47
+ title: 'jss',
48
+ name: 'jss',
49
+ children: [],
50
+ count: 2
51
+ }, {
52
+ key: '10',
53
+ title: 'jss',
54
+ name: 'jss',
55
+ children: [],
56
+ count: 2
57
+ }, {
58
+ key: '20',
59
+ title: '3',
60
+ children: [],
61
+ count: 2
62
+ }];
63
+ var columns = [{
64
+ key: 'key',
65
+ title: '键值',
66
+ dataIndex: 'key',
67
+ align: 'center',
68
+ width: 400,
69
+ fixed: 'left'
70
+ }, {
71
+ key: 'name',
72
+ title: '姓名',
73
+ dataIndex: 'name',
74
+ align: 'center'
75
+ }, {
76
+ key: 'count',
77
+ title: '数量',
78
+ dataIndex: 'count',
79
+ align: 'center'
80
+ }];
81
+ var contextMenuRender = function contextMenuRender(node) {
82
+ return [{
83
+ key: 'delete',
84
+ label: "\u5220\u9664 node".concat(node.key)
85
+ }, {
86
+ key: 'add',
87
+ label: '新增'
88
+ }, {
89
+ key: 'edit',
90
+ label: '编辑'
91
+ }];
92
+ };
93
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(GlobalStyles, {
94
+ $css: []
95
+ }), /*#__PURE__*/React.createElement(Tree, {
96
+ title: /*#__PURE__*/React.createElement(Title, null, "\u6807\u8BC6"),
97
+ titleWidth: 400,
98
+ contextMenuRender: contextMenuRender,
99
+ treeData: treeData,
100
+ columns: columns,
101
+ selectedKeys: selectedKeys,
102
+ expandedKeys: expandedKeys,
103
+ onSelect: function onSelect(selectedKeys) {
104
+ return setSelectedKeys(selectedKeys);
105
+ },
106
+ onExpand: function onExpand(expandedKeys) {
107
+ return setExpandedKeys(expandedKeys);
108
+ },
109
+ groupBy: "count"
110
+ }));
111
+ });
@@ -0,0 +1,12 @@
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 React.HtmlHTMLAttributes<HTMLDivElement> | keyof import("../Flex").FlexItemProps> & import("../Flex").FlexItemProps & React.HtmlHTMLAttributes<HTMLDivElement>, "ref"> & {
3
+ ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
4
+ }, never>> & string;
5
+ type MainPropertyProps = {
6
+ mainWidth?: number;
7
+ main: ReactNode;
8
+ property?: ReactNode;
9
+ isFlex: boolean;
10
+ };
11
+ export declare const MainProperty: React.FC<MainPropertyProps>;
12
+ export {};
@@ -0,0 +1,23 @@
1
+ import React from 'react';
2
+ import styled from 'styled-components';
3
+ import { Flex, FlexItem } from "../Flex";
4
+ export var MainArea = styled(FlexItem).withConfig({
5
+ displayName: "MainArea",
6
+ componentId: "basic-component-347b__sc-u1pspr-0"
7
+ })(["overflow:hidden;position:sticky;left:0;z-index:20;align-self:stretch;display:flex;align-items:center;border-right:var(--kep-platform-line-width) var(--kep-platform-line-type) var(--kep-platform-color-border-secondary);border-bottom:var(--kep-platform-line-width) var(--kep-platform-line-type) var(--kep-platform-color-border-secondary);"]);
8
+ var PropertiesArea = styled(FlexItem).withConfig({
9
+ displayName: "PropertiesArea",
10
+ componentId: "basic-component-347b__sc-u1pspr-1"
11
+ })([""]);
12
+ /* 有属性就渲染属性,没有属性就不处理 */
13
+ export var MainProperty = function MainProperty(_ref) {
14
+ var mainWidth = _ref.mainWidth,
15
+ main = _ref.main,
16
+ property = _ref.property,
17
+ isFlex = _ref.isFlex;
18
+ if (property) return /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(MainArea, {
19
+ width: mainWidth
20
+ }, main), /*#__PURE__*/React.createElement(PropertiesArea, {
21
+ flex: isFlex ? 1 : undefined
22
+ }, property));else return main;
23
+ };
@@ -0,0 +1,20 @@
1
+ import React, { Key, ReactNode } from 'react';
2
+ export type TreeProps = {
3
+ treeData: TreeNodeType[];
4
+ expandedKeys?: Key[];
5
+ selectedKeys?: Key[];
6
+ fieldNames?: TreeFieldNames;
7
+ multiple?: boolean;
8
+ columns?: ColumnType[];
9
+ titleRender?: ((node: TreeNodeType) => ReactNode | null) | null | undefined;
10
+ onExpand?: onExpandHandler;
11
+ onSelect?: onSelectHandler;
12
+ contextMenuRender: (node: TreeNodeType) => MenuItem[];
13
+ titleWidth?: number;
14
+ title?: ReactNode;
15
+ isFlex?: boolean;
16
+ bordered?: boolean;
17
+ groupBy?: string | null;
18
+ };
19
+ declare const Tree: React.FC<TreeProps>;
20
+ export default Tree;
@@ -0,0 +1,253 @@
1
+ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
2
+ function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
3
+ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
4
+ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
5
+ 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; } }
6
+ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
7
+ import React, { useMemo, useRef, useState } from 'react';
8
+ import styled, { css } from 'styled-components';
9
+ import { BoxShadowBox } from "../BoxShadowBox";
10
+ import { Column, Columns } from "../Columns";
11
+ import { DefaultColumnWidth } from "../Columns/Columns";
12
+ import { List } from "../List";
13
+ import { MainArea } from "./MainProperties";
14
+ import { MainProperty, TreeNodeController } from "./TreeNode";
15
+ var TreeContainer = styled.div.withConfig({
16
+ displayName: "TreeContainer",
17
+ componentId: "basic-component-347b__sc-n4lkq9-0"
18
+ })(["position:relative;overflow-x:auto;border:1px solid var(--kep-platform-color-border-secondary);border-width:", ";"], function (props) {
19
+ return props.bordered ? '1px' : 0;
20
+ });
21
+ var TreeBody = styled(List).withConfig({
22
+ displayName: "TreeBody",
23
+ componentId: "basic-component-347b__sc-n4lkq9-1"
24
+ })([""]);
25
+ var TreeHeader = styled.div.withConfig({
26
+ displayName: "TreeHeader",
27
+ componentId: "basic-component-347b__sc-n4lkq9-2"
28
+ })(["", " background-color:var(--kep-platform-header-bg);& ", ",& ", "{background-color:var(--kep-platform-header-bg);font-weight:600;position:sticky;}"], function (props) {
29
+ if (props.isFlex) {
30
+ return css(["width:100%;"]);
31
+ }
32
+ if (props.width) {
33
+ return css(["width:", "px;"], props.width);
34
+ }
35
+ }, Column, MainArea);
36
+ var rootLevel = 0;
37
+ var TreeGroupNode = styled.div.withConfig({
38
+ displayName: "TreeGroupNode",
39
+ componentId: "basic-component-347b__sc-n4lkq9-3"
40
+ })(["height:40px;line-height:40px;padding:0 16px;color:var(--kep-platform-color-primary);cursor:pointer;border:1px dotted var(--kep-platform-color-primary);"]);
41
+ var TreeNodeGroup = function TreeNodeGroup(props) {
42
+ var _useState = useState(false),
43
+ _useState2 = _slicedToArray(_useState, 2),
44
+ expanded = _useState2[0],
45
+ setExpanded = _useState2[1];
46
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TreeGroupNode, {
47
+ onClick: function onClick() {
48
+ return setExpanded(!expanded);
49
+ }
50
+ }, props.groupName, "\uFF1A", props.groupValue), expanded && props.children);
51
+ };
52
+ function groupTreeNodeByPropertyName(arr, propertyName, fieldNames) {
53
+ var grouped = arr.reduce(function (acc, obj) {
54
+ var key = obj[propertyName] || obj[fieldNames.key];
55
+ if (key) {
56
+ if (!acc[key]) {
57
+ acc[key] = [];
58
+ }
59
+ acc[key].push(obj);
60
+ } else {}
61
+ return acc;
62
+ }, {});
63
+ return grouped;
64
+ }
65
+ var Tree = function Tree(_ref) {
66
+ var treeData = _ref.treeData,
67
+ _ref$columns = _ref.columns,
68
+ columns = _ref$columns === void 0 ? [] : _ref$columns,
69
+ _ref$fieldNames = _ref.fieldNames,
70
+ fieldNames = _ref$fieldNames === void 0 ? {
71
+ key: 'key',
72
+ title: 'title',
73
+ children: 'children'
74
+ } : _ref$fieldNames,
75
+ treeTitle = _ref.title,
76
+ _ref$titleWidth = _ref.titleWidth,
77
+ titleWidth = _ref$titleWidth === void 0 ? 700 : _ref$titleWidth,
78
+ _ref$selectedKeys = _ref.selectedKeys,
79
+ selectedKeys = _ref$selectedKeys === void 0 ? [] : _ref$selectedKeys,
80
+ _ref$expandedKeys = _ref.expandedKeys,
81
+ expandedKeys = _ref$expandedKeys === void 0 ? [] : _ref$expandedKeys,
82
+ _ref$isFlex = _ref.isFlex,
83
+ isFlex = _ref$isFlex === void 0 ? true : _ref$isFlex,
84
+ _ref$onSelect = _ref.onSelect,
85
+ onSelect = _ref$onSelect === void 0 ? function () {} : _ref$onSelect,
86
+ _ref$onExpand = _ref.onExpand,
87
+ onExpand = _ref$onExpand === void 0 ? function () {} : _ref$onExpand,
88
+ contextMenuRender = _ref.contextMenuRender,
89
+ _ref$multiple = _ref.multiple,
90
+ multiple = _ref$multiple === void 0 ? false : _ref$multiple,
91
+ _ref$bordered = _ref.bordered,
92
+ bordered = _ref$bordered === void 0 ? false : _ref$bordered,
93
+ _ref$groupBy = _ref.groupBy,
94
+ groupBy = _ref$groupBy === void 0 ? null : _ref$groupBy;
95
+ /* 复用Columns组件显示行,构造一个类似表格头数据来适应Columns组件的数据结构 */
96
+ var treeHeaderRowData = useMemo(function () {
97
+ var data = {};
98
+ if (columns) columns.forEach(function (_ref2) {
99
+ var title = _ref2.title,
100
+ dataIndex = _ref2.dataIndex;
101
+ data[dataIndex] = title;
102
+ });
103
+ return data;
104
+ }, [columns, fieldNames]);
105
+
106
+ /* 如果columns存在而且长度大于0,则启用TableMode,用以展示节点属性 */
107
+ var isTableMode = useMemo(function () {
108
+ return columns && columns.length > 0;
109
+ }, [columns]);
110
+
111
+ /* 如果没有行宽,position:sticky就会存在问题,所以要计算出行的宽度,这样行内的Column的sticky才能生效 */
112
+ var rowWidth = useMemo(function () {
113
+ if (columns) return columns.reduce(function (pre, current) {
114
+ if (current.hideInTable) return pre;
115
+ return pre + (current.width || DefaultColumnWidth);
116
+ }, 0) + titleWidth;
117
+ }, [columns, titleWidth]);
118
+
119
+ /* format主要是为了兼容树节点主体结构的内容,简单来说就是正常树节点的title,把title视为一个Column(当然只在tableMode生效) */
120
+ /* 同时也要计算left和right的偏移量,因为很多时候fixed的Column可能不止一个 */
121
+ var formatColumns = useMemo(function () {
122
+ /* 用来计算sticky的偏移量,确定每个有fixed属性column的位置 */
123
+ var leftOffset = 0;
124
+ var rightOffset = 0;
125
+ var p;
126
+ var newColumns = [];
127
+ for (var i = 0; i < columns.length; i++) {
128
+ p = columns[i];
129
+ if (p.hideInTable) {
130
+ continue;
131
+ }
132
+ if (p.fixed === 'left') {
133
+ p.left = leftOffset + 'px';
134
+ leftOffset += p.width || DefaultColumnWidth;
135
+ }
136
+ if (p.fixed === 'right') {
137
+ p.right = rightOffset + 'px';
138
+ rightOffset += p.width || DefaultColumnWidth;
139
+ }
140
+ p.bordered = true;
141
+ newColumns.push(p);
142
+ }
143
+ return newColumns;
144
+ }, [columns, fieldNames]);
145
+ var treeNodeGroup = useMemo(function () {
146
+ if (groupBy) return groupTreeNodeByPropertyName(treeData, groupBy, fieldNames);
147
+ }, [treeData, groupBy]);
148
+ var groupByTitle = useMemo(function () {
149
+ var _columns$find;
150
+ return (_columns$find = columns.find(function (column) {
151
+ return column.dataIndex === groupBy;
152
+ })) === null || _columns$find === void 0 ? void 0 : _columns$find.title;
153
+ }, [columns, groupBy]);
154
+ var boxShadowBox = useRef(null);
155
+ /* 树组件的结构其实比较简单,就是一个树标题(TableMode下),然后树节点形成的列表 */
156
+ return /*#__PURE__*/React.createElement(TreeContainer, {
157
+ onScroll: function onScroll(e) {
158
+ var treeContainer = e.target;
159
+ if (boxShadowBox.current) {
160
+ if (treeContainer.scrollLeft === 0) {
161
+ boxShadowBox.current.style.opacity = '0';
162
+ } else {
163
+ boxShadowBox.current.style.opacity = '1';
164
+ }
165
+ boxShadowBox.current.style.left = treeContainer.scrollLeft + titleWidth + 'px';
166
+ }
167
+ },
168
+ bordered: bordered
169
+ }, isTableMode && !isFlex && /*#__PURE__*/React.createElement(BoxShadowBox, {
170
+ ref: boxShadowBox,
171
+ width: "10px",
172
+ height: "100%",
173
+ offsetLeft: "-999px"
174
+ }), isTableMode && /*#__PURE__*/React.createElement(TreeHeader, {
175
+ width: rowWidth,
176
+ isFlex: isFlex
177
+ }, /*#__PURE__*/React.createElement(MainProperty, {
178
+ mainWidth: titleWidth,
179
+ main: treeTitle,
180
+ property: /*#__PURE__*/React.createElement(Columns, {
181
+ columns: formatColumns,
182
+ leftBase: titleWidth,
183
+ rowData: treeHeaderRowData,
184
+ isFlex: isFlex
185
+ }),
186
+ isFlex: isFlex
187
+ })), /*#__PURE__*/React.createElement(TreeBody, {
188
+ direction: "column"
189
+ }, !treeNodeGroup && !groupBy && treeData.map(function (node) {
190
+ return /*#__PURE__*/React.createElement(TreeNodeController, {
191
+ key: node[fieldNames.key],
192
+ selectedKeys: selectedKeys,
193
+ onSelect: onSelect,
194
+ expandedKeys: expandedKeys,
195
+ onExpand: onExpand,
196
+ width: isTableMode && !isFlex ? rowWidth : undefined,
197
+ node: node,
198
+ fieldNames: fieldNames,
199
+ isFlex: isFlex,
200
+ isTableMode: !!isTableMode,
201
+ columns: columns,
202
+ multiple: multiple,
203
+ level: rootLevel,
204
+ mainWidth: titleWidth,
205
+ contextMenuRender: contextMenuRender
206
+ });
207
+ }), treeNodeGroup && groupBy && Object.keys(treeNodeGroup).map(function (key) {
208
+ var group = treeNodeGroup[key];
209
+ if (group.length < 2) {
210
+ return /*#__PURE__*/React.createElement(TreeNodeController, {
211
+ key: group[0][fieldNames.key],
212
+ selectedKeys: selectedKeys,
213
+ onSelect: onSelect,
214
+ expandedKeys: expandedKeys,
215
+ onExpand: onExpand,
216
+ width: isTableMode && !isFlex ? rowWidth : undefined,
217
+ node: group[0],
218
+ fieldNames: fieldNames,
219
+ isFlex: isFlex,
220
+ isTableMode: !!isTableMode,
221
+ columns: columns,
222
+ multiple: multiple,
223
+ level: rootLevel,
224
+ mainWidth: titleWidth,
225
+ contextMenuRender: contextMenuRender
226
+ });
227
+ }
228
+ return /*#__PURE__*/React.createElement(TreeNodeGroup, {
229
+ groupName: groupByTitle,
230
+ key: key,
231
+ groupValue: key
232
+ }, treeNodeGroup[key].map(function (node) {
233
+ return /*#__PURE__*/React.createElement(TreeNodeController, {
234
+ key: node[fieldNames.key],
235
+ selectedKeys: selectedKeys,
236
+ onSelect: onSelect,
237
+ expandedKeys: expandedKeys,
238
+ onExpand: onExpand,
239
+ width: isTableMode && !isFlex ? rowWidth : undefined,
240
+ node: node,
241
+ fieldNames: fieldNames,
242
+ isFlex: isFlex,
243
+ isTableMode: !!isTableMode,
244
+ columns: columns,
245
+ multiple: multiple,
246
+ level: rootLevel + 1,
247
+ mainWidth: titleWidth,
248
+ contextMenuRender: contextMenuRender
249
+ });
250
+ }));
251
+ })));
252
+ };
253
+ export default Tree;
@@ -0,0 +1,20 @@
1
+ import React, { Key } from 'react';
2
+ import { MainProperty } from './MainProperties';
3
+ export type TreeNodeControllerProps = {
4
+ node: TreeNodeType;
5
+ selectedKeys: Key[];
6
+ width?: number;
7
+ fieldNames: TreeFieldNames;
8
+ isFlex: boolean;
9
+ isTableMode: boolean;
10
+ columns: ColumnType[];
11
+ onSelect: onSelectHandler;
12
+ multiple: boolean;
13
+ level: number;
14
+ mainWidth?: number;
15
+ expandedKeys: Key[];
16
+ onExpand: onExpandHandler;
17
+ contextMenuRender?: (node: TreeNodeType) => MenuItem[];
18
+ };
19
+ export declare const TreeNodeController: React.FC<TreeNodeControllerProps>;
20
+ export { MainProperty };
@@ -0,0 +1,147 @@
1
+ import { CaretRightOutlined } from '@ant-design/icons';
2
+ import React, { useCallback, useMemo } from 'react';
3
+ import styled, { css } from 'styled-components';
4
+ import { Column, Columns } from "../Columns";
5
+ import { Flex, FlexItem } from "../Flex";
6
+ import { Indent } from "../Indent";
7
+ import { ListItem } from "../List";
8
+ import { Menu } from "../Menu";
9
+ import { MainArea, MainProperty } from "./MainProperties";
10
+ var ExpandedIcon = styled(CaretRightOutlined).withConfig({
11
+ displayName: "ExpandedIcon",
12
+ componentId: "basic-component-347b__sc-tzoomn-0"
13
+ })(["transition:transform 0.5s;display:block;user-select:none;", ";font-size:var(--kep-platform-font-size-sm);&:hover{color:var(--kep-platform-color-primary);}"], function (props) {
14
+ if (props.expanded) {
15
+ return css(["transform:rotate(90deg);"]);
16
+ }
17
+ });
18
+ var TreeNode = styled(ListItem).withConfig({
19
+ displayName: "TreeNode",
20
+ componentId: "basic-component-347b__sc-tzoomn-1"
21
+ })(["", " & ", ",& ", "{background-color:var(--kep-platform-color-bg-base);}&:hover{background-color:var(--kep-platform-color-bg-hover);& ", ",& ", "{background-color:var(--kep-platform-color-bg-hover);}& ", "{overflow-x:auto;& > ", "{width:auto;}}}", ""], function (props) {
22
+ if (props.width) {
23
+ return css(["width:", "px;"], props.width);
24
+ }
25
+ }, Column, MainArea, Column, MainArea, MainArea, Flex, function (props) {
26
+ if (props.selected) {
27
+ return css(["background-color:var(--kep-platform-color-bg-active) !important;color:var(--kep-platform-color-text-active) !important;& ", ",& ", "{background-color:var(--kep-platform-color-bg-active) !important;color:var(--kep-platform-color-text-active) !important;}& ", "{overflow-x:auto;& > ", "{width:auto;}}"], Column, MainArea, MainArea, Flex);
28
+ }
29
+ });
30
+ export var TreeNodeController = function TreeNodeController(_ref) {
31
+ var node = _ref.node,
32
+ _ref$selectedKeys = _ref.selectedKeys,
33
+ selectedKeys = _ref$selectedKeys === void 0 ? [] : _ref$selectedKeys,
34
+ width = _ref.width,
35
+ isTableMode = _ref.isTableMode,
36
+ fieldNames = _ref.fieldNames,
37
+ columns = _ref.columns,
38
+ isFlex = _ref.isFlex,
39
+ onSelect = _ref.onSelect,
40
+ multiple = _ref.multiple,
41
+ level = _ref.level,
42
+ mainWidth = _ref.mainWidth,
43
+ expandedKeys = _ref.expandedKeys,
44
+ onExpand = _ref.onExpand,
45
+ contextMenuRender = _ref.contextMenuRender;
46
+ /* 处理子节点缩进 */
47
+ var childLevel = useMemo(function () {
48
+ return level + 1;
49
+ }, [level]);
50
+ var selected = useMemo(function () {
51
+ return selectedKeys.includes(node[fieldNames.key]);
52
+ }, [selectedKeys, fieldNames, node]);
53
+ var expanded = useMemo(function () {
54
+ return expandedKeys.includes(node[fieldNames.key]);
55
+ }, [expandedKeys, fieldNames, node]);
56
+ var onClickNodeHandler = useCallback(function (e) {
57
+ if (multiple) {
58
+ if (selected) {
59
+ onSelect(selectedKeys.filter(function (key) {
60
+ return key !== node[fieldNames.key];
61
+ }), {
62
+ nativeEvent: e,
63
+ node: node,
64
+ selected: !selected
65
+ });
66
+ } else {
67
+ onSelect(selectedKeys.concat([node[fieldNames.key]]), {
68
+ nativeEvent: e,
69
+ node: node,
70
+ selected: !selected
71
+ });
72
+ }
73
+ } else {
74
+ onSelect(selected ? [] : [node[fieldNames.key]], {
75
+ nativeEvent: e,
76
+ node: node,
77
+ selected: !selected
78
+ });
79
+ }
80
+ }, [onSelect, selectedKeys, multiple, selected]);
81
+ var onClickExpandIconhandler = useCallback(function (e) {
82
+ if (expanded) {
83
+ onExpand(expandedKeys.filter(function (key) {
84
+ return key !== node[fieldNames.key];
85
+ }), {
86
+ nativeEvent: e,
87
+ node: node,
88
+ expanded: !expanded
89
+ });
90
+ } else {
91
+ onExpand(expandedKeys.concat([node[fieldNames.key]]), {
92
+ nativeEvent: e,
93
+ node: node,
94
+ expanded: !expanded
95
+ });
96
+ }
97
+ }, [expandedKeys, onExpand, expanded]);
98
+ var treeNode = /*#__PURE__*/React.createElement(TreeNode, {
99
+ selected: selectedKeys.includes(node[fieldNames.key]),
100
+ width: width,
101
+ onClick: onClickNodeHandler
102
+ }, /*#__PURE__*/React.createElement(MainProperty, {
103
+ isFlex: isFlex,
104
+ mainWidth: mainWidth,
105
+ main: /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(FlexItem, null, /*#__PURE__*/React.createElement(Indent, {
106
+ level: level
107
+ })), /*#__PURE__*/React.createElement(FlexItem, {
108
+ width: 24,
109
+ align: "center",
110
+ cursor: "pointer",
111
+ onClick: onClickExpandIconhandler
112
+ }, /*#__PURE__*/React.createElement(ExpandedIcon, {
113
+ expanded: expanded
114
+ })), /*#__PURE__*/React.createElement(FlexItem, {
115
+ flex: 1
116
+ }, node[fieldNames.title])),
117
+ property: isTableMode && /*#__PURE__*/React.createElement(Columns, {
118
+ columns: columns,
119
+ leftBase: mainWidth,
120
+ rowData: node,
121
+ isFlex: isFlex
122
+ })
123
+ }));
124
+ return /*#__PURE__*/React.createElement(React.Fragment, null, contextMenuRender && /*#__PURE__*/React.createElement(Menu.Popup, {
125
+ trigger: "contextmenu",
126
+ items: contextMenuRender(node)
127
+ }, treeNode), !contextMenuRender && treeNode, expanded && node.children.map(function (childNode) {
128
+ return /*#__PURE__*/React.createElement(TreeNodeController, {
129
+ width: width,
130
+ selectedKeys: selectedKeys,
131
+ key: childNode[fieldNames.key],
132
+ node: childNode,
133
+ fieldNames: fieldNames,
134
+ isFlex: isFlex,
135
+ isTableMode: isTableMode,
136
+ columns: columns,
137
+ onSelect: onSelect,
138
+ multiple: multiple,
139
+ level: childLevel,
140
+ mainWidth: mainWidth,
141
+ onExpand: onExpand,
142
+ expandedKeys: expandedKeys,
143
+ contextMenuRender: contextMenuRender
144
+ });
145
+ }));
146
+ };
147
+ export { MainProperty };
@@ -0,0 +1,3 @@
1
+ export * from './MainProperties';
2
+ export { default as Tree, type TreeProps } from './Tree';
3
+ export * from './TreeNode';
@@ -0,0 +1,3 @@
1
+ export * from "./MainProperties";
2
+ export { default as Tree } from "./Tree";
3
+ export * from "./TreeNode";
@@ -0,0 +1,81 @@
1
+ export declare const presetColors: {
2
+ magenta: {
3
+ color: string;
4
+ backgroundColor: string;
5
+ border: string;
6
+ };
7
+ red: {
8
+ color: string;
9
+ backgroundColor: string;
10
+ border: string;
11
+ };
12
+ volcano: {
13
+ color: string;
14
+ backgroundColor: string;
15
+ border: string;
16
+ };
17
+ orange: {
18
+ color: string;
19
+ backgroundColor: string;
20
+ border: string;
21
+ };
22
+ gold: {
23
+ color: string;
24
+ backgroundColor: string;
25
+ border: string;
26
+ };
27
+ green: {
28
+ color: string;
29
+ backgroundColor: string;
30
+ border: string;
31
+ };
32
+ blue: {
33
+ color: string;
34
+ backgroundColor: string;
35
+ border: string;
36
+ };
37
+ purple: {
38
+ color: string;
39
+ backgroundColor: string;
40
+ border: string;
41
+ };
42
+ };
43
+ declare const _default: {
44
+ primaryColor: string;
45
+ lightenPrimaryColor: string;
46
+ secondaryColor: string;
47
+ dangerColor: string;
48
+ lightenDangerColor: string;
49
+ backgroundColor: string;
50
+ paddingXS: string;
51
+ paddingSM: string;
52
+ padding: string;
53
+ paddingLG: string;
54
+ paddingXL: string;
55
+ gapXS: string;
56
+ gapSM: string;
57
+ gap: string;
58
+ gapLG: string;
59
+ marginXS: string;
60
+ marginSM: string;
61
+ margin: string;
62
+ marginLG: string;
63
+ marginXL: string;
64
+ fontSize: string;
65
+ fontSizeSM: string;
66
+ fontSizeLG: string;
67
+ color: string;
68
+ fontWeight: number;
69
+ fontWeightBold: number;
70
+ fontWeightBolder: number;
71
+ fontWeightLight: number;
72
+ fontWeightLighter: number;
73
+ borderRadiusSM: string;
74
+ borderRadius: string;
75
+ borderRadiusLG: string;
76
+ borderWidth: string;
77
+ borderColor: string;
78
+ defaultTagColor: string;
79
+ defaultTagBackgroundColor: string;
80
+ };
81
+ export default _default;