pixel-react 1.6.2 → 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.
Files changed (46) hide show
  1. package/.yarn/install-state.gz +0 -0
  2. package/lib/components/Avatar/types.d.ts +9 -1
  3. package/lib/components/IconButton/types.d.ts +1 -0
  4. package/lib/components/TableTree/Components/TableBody.d.ts +4 -0
  5. package/lib/components/TableTree/Components/TableCell.d.ts +4 -0
  6. package/lib/components/TableTree/Components/TableHead.d.ts +4 -0
  7. package/lib/components/TableTree/Components/TableRow.d.ts +4 -0
  8. package/lib/components/TableTree/Utils/getAllChildIds.d.ts +1 -0
  9. package/lib/components/TableTree/types.d.ts +37 -4
  10. package/lib/index.d.ts +14 -5
  11. package/lib/index.esm.js +51 -22
  12. package/lib/index.esm.js.map +1 -1
  13. package/lib/index.js +51 -22
  14. package/lib/index.js.map +1 -1
  15. package/lib/tsconfig.tsbuildinfo +1 -1
  16. package/package.json +1 -1
  17. package/src/assets/icons/authorization_icon.svg +1 -0
  18. package/src/assets/icons/backward.svg +10 -0
  19. package/src/assets/icons/capture_icon.svg +6 -0
  20. package/src/assets/icons/forward.svg +3 -0
  21. package/src/assets/icons/project_status_icon.svg +10 -0
  22. package/src/assets/icons/refresh_icon.svg +4 -0
  23. package/src/assets/icons/rotate_icon.svg +10 -0
  24. package/src/assets/icons/swipe_icon.svg +9 -0
  25. package/src/assets/icons/tap_icon.svg +4 -0
  26. package/src/components/Avatar/Avatar.scss +4 -0
  27. package/src/components/Avatar/Avatar.stories.tsx +38 -18
  28. package/src/components/Avatar/Avatar.tsx +19 -3
  29. package/src/components/Avatar/types.ts +9 -1
  30. package/src/components/FileDropzone/FileDropzone.scss +0 -1
  31. package/src/components/Icon/iconList.ts +16 -0
  32. package/src/components/IconButton/IconButton.scss +11 -11
  33. package/src/components/IconButton/IconButton.tsx +2 -1
  34. package/src/components/IconButton/types.ts +1 -0
  35. package/src/components/Select/Select.scss +4 -0
  36. package/src/components/Select/Select.stories.tsx +1 -1
  37. package/src/components/Select/Select.tsx +1 -0
  38. package/src/components/TableTree/Components/TableBody.tsx +35 -0
  39. package/src/components/TableTree/Components/TableCell.tsx +59 -0
  40. package/src/components/TableTree/Components/TableHead.tsx +39 -0
  41. package/src/components/TableTree/Components/TableRow.tsx +37 -0
  42. package/src/components/TableTree/TableTree.scss +8 -5
  43. package/src/components/TableTree/TableTree.tsx +8 -44
  44. package/src/components/TableTree/Utils/getAllChildIds.ts +12 -0
  45. package/src/components/TableTree/Utils/renderSpaces.ts +0 -0
  46. package/src/components/TableTree/types.ts +42 -4
@@ -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 }: { columnsData: any[] }) => {
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?.(!expandedNodes.includes(node?.id), node?.id),
223
- [expandedNodes, onExpand]
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,16 +7,53 @@ 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.Element | string | null;
14
- actions?: (row: any) => JSX.Element[];
52
+ cell?: (row: any) => JSX
53
+ actions?: (row: any) => JSX
15
54
  isTree?: boolean;
16
55
  defaultValue?: string;
17
- defaultActions?: () => JSX.Element[];
56
+ defaultActions?: () => JSX
18
57
  }
19
58
 
20
59
  export interface TreeTableProps {
@@ -24,7 +63,6 @@ export interface TreeTableProps {
24
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
  }