pixel-react 1.6.1 → 1.6.3
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.
- package/.yarn/install-state.gz +0 -0
- package/lib/components/Avatar/types.d.ts +9 -1
- package/lib/components/IconButton/types.d.ts +1 -0
- package/lib/components/TableTree/Components/TableBody.d.ts +4 -0
- package/lib/components/TableTree/Components/TableCell.d.ts +4 -0
- package/lib/components/TableTree/Components/TableHead.d.ts +4 -0
- package/lib/components/TableTree/Components/TableRow.d.ts +4 -0
- package/lib/components/TableTree/Utils/getAllChildIds.d.ts +1 -0
- package/lib/components/TableTree/types.d.ts +38 -5
- package/lib/index.d.ts +15 -6
- package/lib/index.esm.js +52 -23
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +52 -23
- package/lib/index.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/assets/icons/authorization_icon.svg +1 -0
- package/src/assets/icons/backward.svg +10 -0
- package/src/assets/icons/capture_icon.svg +6 -0
- package/src/assets/icons/forward.svg +3 -0
- package/src/assets/icons/project_status_icon.svg +10 -0
- package/src/assets/icons/refresh_icon.svg +4 -0
- package/src/assets/icons/rotate_icon.svg +10 -0
- package/src/assets/icons/swipe_icon.svg +9 -0
- package/src/assets/icons/tap_icon.svg +4 -0
- package/src/components/Avatar/Avatar.scss +4 -0
- package/src/components/Avatar/Avatar.stories.tsx +38 -18
- package/src/components/Avatar/Avatar.tsx +19 -3
- package/src/components/Avatar/types.ts +9 -1
- package/src/components/FileDropzone/FileDropzone.scss +0 -1
- package/src/components/Icon/iconList.ts +16 -0
- package/src/components/IconButton/IconButton.scss +11 -11
- package/src/components/IconButton/IconButton.tsx +2 -1
- package/src/components/IconButton/types.ts +1 -0
- package/src/components/Select/Select.scss +4 -0
- package/src/components/Select/Select.stories.tsx +1 -1
- package/src/components/Select/Select.tsx +2 -1
- package/src/components/TableTree/Components/TableBody.tsx +35 -0
- package/src/components/TableTree/Components/TableCell.tsx +59 -0
- package/src/components/TableTree/Components/TableHead.tsx +39 -0
- package/src/components/TableTree/Components/TableRow.tsx +37 -0
- package/src/components/TableTree/TableTree.scss +8 -5
- package/src/components/TableTree/TableTree.tsx +8 -44
- package/src/components/TableTree/Utils/getAllChildIds.ts +12 -0
- package/src/components/TableTree/Utils/renderSpaces.ts +0 -0
- package/src/components/TableTree/types.ts +43 -5
@@ -0,0 +1,39 @@
|
|
1
|
+
import React, { useMemo } from 'react';
|
2
|
+
import { TableHeadProps } from '../types';
|
3
|
+
|
4
|
+
const TableHead = React.memo(({ columnsData }: TableHeadProps) => {
|
5
|
+
const hasDefaultValues = useMemo(
|
6
|
+
() => columnsData.some(({ defaultValue }) => !!defaultValue),
|
7
|
+
[columnsData]
|
8
|
+
);
|
9
|
+
|
10
|
+
return (
|
11
|
+
<thead>
|
12
|
+
<tr>
|
13
|
+
{columnsData.map(({ name }) => (
|
14
|
+
<th key={name}>{name}</th>
|
15
|
+
))}
|
16
|
+
</tr>
|
17
|
+
{hasDefaultValues && (
|
18
|
+
<tr>
|
19
|
+
{columnsData.map(({ defaultValue, defaultActions }, index) => (
|
20
|
+
<td key={index}>
|
21
|
+
{defaultValue && (
|
22
|
+
<span className="">
|
23
|
+
{defaultValue}
|
24
|
+
{defaultActions && (
|
25
|
+
<div className="table-tree-row-action">
|
26
|
+
{defaultActions()}
|
27
|
+
</div>
|
28
|
+
)}
|
29
|
+
</span>
|
30
|
+
)}
|
31
|
+
</td>
|
32
|
+
))}
|
33
|
+
</tr>
|
34
|
+
)}
|
35
|
+
</thead>
|
36
|
+
);
|
37
|
+
});
|
38
|
+
|
39
|
+
export default TableHead;
|
@@ -0,0 +1,37 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { TableRowProps } from '../types';
|
3
|
+
import TableCell from './TableCell';
|
4
|
+
|
5
|
+
const TableRow = React.memo(
|
6
|
+
({
|
7
|
+
node,
|
8
|
+
level,
|
9
|
+
columnsData,
|
10
|
+
selected,
|
11
|
+
select,
|
12
|
+
onRowClick,
|
13
|
+
onToggleExpand,
|
14
|
+
onCheckBoxChange,
|
15
|
+
}: TableRowProps) => (
|
16
|
+
<tr
|
17
|
+
data-level={level}
|
18
|
+
className="show"
|
19
|
+
onClick={(e) => onRowClick(e, node)}
|
20
|
+
>
|
21
|
+
{columnsData.map((col) => (
|
22
|
+
<TableCell
|
23
|
+
key={col.name}
|
24
|
+
col={col}
|
25
|
+
node={node}
|
26
|
+
level={level}
|
27
|
+
selected={selected}
|
28
|
+
select={select}
|
29
|
+
onCheckBoxChange={onCheckBoxChange}
|
30
|
+
onToggleExpand={onToggleExpand}
|
31
|
+
/>
|
32
|
+
))}
|
33
|
+
</tr>
|
34
|
+
)
|
35
|
+
);
|
36
|
+
|
37
|
+
export default TableRow;
|
@@ -1,8 +1,3 @@
|
|
1
|
-
html,
|
2
|
-
* {
|
3
|
-
font-family: 'Open Sans';
|
4
|
-
}
|
5
|
-
|
6
1
|
.tree-table-space-block {
|
7
2
|
display: inline-block;
|
8
3
|
width: 20px;
|
@@ -39,6 +34,14 @@ html,
|
|
39
34
|
.tree-table-wrap {
|
40
35
|
width: 100%;
|
41
36
|
}
|
37
|
+
thead{
|
38
|
+
position: sticky;
|
39
|
+
top: 12px;
|
40
|
+
}
|
41
|
+
|
42
|
+
tbody{
|
43
|
+
overflow: scroll;
|
44
|
+
}
|
42
45
|
|
43
46
|
.tree-table {
|
44
47
|
border: 1px solid #f1f1f1;
|
@@ -4,7 +4,7 @@ import { prepareData } from '../../utils/TableCell/TableCell';
|
|
4
4
|
import Arrow from '../../assets/icons/arrows_down_icon.svg?react';
|
5
5
|
import Checkbox from '../Checkbox';
|
6
6
|
import RadioButton from '../RadioButton';
|
7
|
-
import { TreeTableProps } from './types';
|
7
|
+
import { TableBodyProps, TableCellProps, TableHeadProps, TableRowProps, TreeTableProps } from './types';
|
8
8
|
|
9
9
|
// Helper to render spaces for levels
|
10
10
|
const renderSpaces = (level: number) =>
|
@@ -32,27 +32,17 @@ const TableCell = React.memo(
|
|
32
32
|
col,
|
33
33
|
node,
|
34
34
|
level,
|
35
|
-
isExpanded,
|
36
35
|
selected,
|
37
36
|
select,
|
38
37
|
onCheckBoxChange,
|
39
38
|
onToggleExpand,
|
40
|
-
}:
|
41
|
-
col: any;
|
42
|
-
node: any;
|
43
|
-
level: number;
|
44
|
-
isExpanded: boolean;
|
45
|
-
selected: string[];
|
46
|
-
select: string | null;
|
47
|
-
onCheckBoxChange: (type: string, node: any) => void;
|
48
|
-
onToggleExpand: (node: any) => void;
|
49
|
-
}) => (
|
39
|
+
}: TableCellProps) => (
|
50
40
|
<td>
|
51
41
|
{col.isTree && renderSpaces(level + 1)}
|
52
42
|
{col.isTree && (
|
53
43
|
<span
|
54
44
|
className={`tree-table-space-block last-block ${
|
55
|
-
isExpanded ? 'tree-row-expanded' : 'tree-row-collapsed'
|
45
|
+
node.isExpanded ? 'tree-row-expanded' : 'tree-row-collapsed'
|
56
46
|
} ${node.folder ? '' : 'no-folder'}`}
|
57
47
|
onClick={() => onToggleExpand(node)}
|
58
48
|
>
|
@@ -89,23 +79,12 @@ const TableRow = React.memo(
|
|
89
79
|
node,
|
90
80
|
level,
|
91
81
|
columnsData,
|
92
|
-
isExpanded,
|
93
82
|
selected,
|
94
83
|
select,
|
95
84
|
onRowClick,
|
96
85
|
onToggleExpand,
|
97
86
|
onCheckBoxChange,
|
98
|
-
}:
|
99
|
-
node: any;
|
100
|
-
level: number;
|
101
|
-
columnsData: any[];
|
102
|
-
isExpanded: boolean;
|
103
|
-
selected: string[];
|
104
|
-
select: string | null;
|
105
|
-
onRowClick: (e: any, node: any) => void;
|
106
|
-
onToggleExpand: (node: any) => void;
|
107
|
-
onCheckBoxChange: (type: string, node: any) => void;
|
108
|
-
}) => (
|
87
|
+
}: TableRowProps) => (
|
109
88
|
<tr
|
110
89
|
data-level={level}
|
111
90
|
className="show"
|
@@ -117,7 +96,6 @@ const TableRow = React.memo(
|
|
117
96
|
col={col}
|
118
97
|
node={node}
|
119
98
|
level={level}
|
120
|
-
isExpanded={isExpanded}
|
121
99
|
selected={selected}
|
122
100
|
select={select}
|
123
101
|
onCheckBoxChange={onCheckBoxChange}
|
@@ -129,7 +107,7 @@ const TableRow = React.memo(
|
|
129
107
|
);
|
130
108
|
|
131
109
|
// Component: TableHead
|
132
|
-
const TableHead = React.memo(({ columnsData }:
|
110
|
+
const TableHead = React.memo(({ columnsData }: TableHeadProps) => {
|
133
111
|
const hasDefaultValues = useMemo(
|
134
112
|
() => columnsData.some(({ defaultValue }) => !!defaultValue),
|
135
113
|
[columnsData]
|
@@ -169,32 +147,20 @@ const TableBody = React.memo(
|
|
169
147
|
({
|
170
148
|
flattenedTreeData,
|
171
149
|
columnsData,
|
172
|
-
expandedNodes,
|
173
150
|
selected,
|
174
151
|
select,
|
175
152
|
onRowClick,
|
176
153
|
onToggleExpand,
|
177
154
|
onCheckBoxChange,
|
178
|
-
}:
|
179
|
-
flattenedTreeData: any[];
|
180
|
-
columnsData: any[];
|
181
|
-
expandedNodes: string[];
|
182
|
-
selected: string[];
|
183
|
-
select: string | null;
|
184
|
-
onRowClick: (e: any, node: any) => void;
|
185
|
-
onToggleExpand: (node: any) => void;
|
186
|
-
onCheckBoxChange: (type: string, node: any) => void;
|
187
|
-
}) => (
|
155
|
+
}: TableBodyProps) => (
|
188
156
|
<tbody>
|
189
157
|
{flattenedTreeData.map(({ node, level }) => {
|
190
|
-
const isExpanded = expandedNodes.includes(node.id);
|
191
158
|
return (
|
192
159
|
<TableRow
|
193
160
|
key={node.id}
|
194
161
|
node={node}
|
195
162
|
level={level}
|
196
163
|
columnsData={columnsData}
|
197
|
-
isExpanded={isExpanded}
|
198
164
|
selected={selected}
|
199
165
|
select={select}
|
200
166
|
onRowClick={onRowClick}
|
@@ -215,12 +181,11 @@ const TreeTable: React.FC<TreeTableProps> = ({
|
|
215
181
|
select = null,
|
216
182
|
onChange,
|
217
183
|
onClick,
|
218
|
-
expandedNodes = [],
|
219
184
|
onExpand,
|
220
185
|
}) => {
|
221
186
|
const handleToggleExpand = useCallback(
|
222
|
-
(node: any) => onExpand?.(
|
223
|
-
[
|
187
|
+
(node: any) => onExpand?.(true, node?.id),
|
188
|
+
[ onExpand]
|
224
189
|
);
|
225
190
|
|
226
191
|
const handleCheckBoxChange = useCallback(
|
@@ -260,7 +225,6 @@ const TreeTable: React.FC<TreeTableProps> = ({
|
|
260
225
|
<TableBody
|
261
226
|
flattenedTreeData={treeData}
|
262
227
|
columnsData={columnsData}
|
263
|
-
expandedNodes={expandedNodes}
|
264
228
|
selected={selected}
|
265
229
|
select={select}
|
266
230
|
onRowClick={handleRowClick}
|
@@ -0,0 +1,12 @@
|
|
1
|
+
const getAllChildIds = (nodeId: string, data: any[]): string[] => {
|
2
|
+
let result = [nodeId];
|
3
|
+
|
4
|
+
// Traverse the tree and find children based on parentId
|
5
|
+
data.forEach(({ node }) => {
|
6
|
+
if (node.parentId === nodeId) {
|
7
|
+
result = result.concat(getAllChildIds(node.id, data)); // Add children recursively
|
8
|
+
}
|
9
|
+
});
|
10
|
+
|
11
|
+
return result;
|
12
|
+
};
|
File without changes
|
@@ -1,3 +1,5 @@
|
|
1
|
+
import { ReactNode } from 'react';
|
2
|
+
|
1
3
|
export interface TreeNode {
|
2
4
|
key: string;
|
3
5
|
[key: string]: any;
|
@@ -5,26 +7,62 @@ export interface TreeNode {
|
|
5
7
|
expanded?: boolean;
|
6
8
|
}
|
7
9
|
|
10
|
+
declare type JSX = ReactNode | JSX.Element[] | string | null;
|
11
|
+
|
12
|
+
export interface TableCellProps {
|
13
|
+
col: any;
|
14
|
+
node: any;
|
15
|
+
level: number;
|
16
|
+
selected: string[];
|
17
|
+
select: string | null;
|
18
|
+
onCheckBoxChange: (type: string, node: any) => void;
|
19
|
+
onToggleExpand: (node: any) => void;
|
20
|
+
}
|
21
|
+
|
22
|
+
export interface TableHeadProps {
|
23
|
+
columnsData: any[];
|
24
|
+
}
|
25
|
+
|
26
|
+
export interface TableBodyProps {
|
27
|
+
flattenedTreeData: any[];
|
28
|
+
columnsData: any[];
|
29
|
+
selected: string[];
|
30
|
+
select: string | null;
|
31
|
+
onRowClick: (e: any, node: any) => void;
|
32
|
+
onToggleExpand: (node: any) => void;
|
33
|
+
onCheckBoxChange: (type: string, node: any) => void;
|
34
|
+
}
|
35
|
+
|
36
|
+
export interface TableRowProps {
|
37
|
+
node: any;
|
38
|
+
level: number;
|
39
|
+
columnsData: any[];
|
40
|
+
selected: string[];
|
41
|
+
select: string | null;
|
42
|
+
onRowClick: (e: any, node: any) => void;
|
43
|
+
onToggleExpand: (node: any) => void;
|
44
|
+
onCheckBoxChange: (type: string, node: any) => void;
|
45
|
+
}
|
46
|
+
|
8
47
|
export interface Column {
|
9
48
|
name: string;
|
10
49
|
accessor: string;
|
11
50
|
width: string;
|
12
51
|
isClickable?: boolean;
|
13
|
-
cell?: (row: any) => JSX
|
14
|
-
actions?: (row: any) => JSX
|
52
|
+
cell?: (row: any) => JSX
|
53
|
+
actions?: (row: any) => JSX
|
15
54
|
isTree?: boolean;
|
16
55
|
defaultValue?: string;
|
17
|
-
defaultActions?: () => JSX
|
56
|
+
defaultActions?: () => JSX
|
18
57
|
}
|
19
58
|
|
20
59
|
export interface TreeTableProps {
|
21
60
|
treeData: any;
|
22
61
|
columnsData: Column[];
|
23
62
|
selected?: string[];
|
24
|
-
select?: 'radio' | 'checkbox' |
|
63
|
+
select?: 'radio' | 'checkbox' | 'none';
|
25
64
|
onChange?: (nodes: string[]) => void;
|
26
65
|
onClick?: (e: React.MouseEvent<HTMLDivElement>, row: TreeNode) => void;
|
27
|
-
expandedNodes: string[];
|
28
66
|
onExpand?: (_isExpanded: boolean, node: string) => void;
|
29
67
|
onPagination?: (_direction: string) => void;
|
30
68
|
}
|