pixel-react 1.10.7 → 1.10.9
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/lib/index.esm.js +13 -8
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +13 -8
- package/lib/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/AddResourceButton/ArrowsButton/ArrowsButton.tsx +0 -1
- package/src/components/MenuOption/MenuOption.tsx +3 -3
- package/src/components/Table/Table.scss +15 -15
- package/src/components/Table/Table.tsx +42 -42
- package/src/components/TableTree/TableTree.scss +16 -14
- package/src/utils/TableCell/TableCell.ts +3 -0
package/package.json
CHANGED
@@ -52,7 +52,7 @@ const calculatePosition = (
|
|
52
52
|
left,
|
53
53
|
right: window.innerWidth - (left + width),
|
54
54
|
};
|
55
|
-
const gap =
|
55
|
+
const gap = 0;
|
56
56
|
|
57
57
|
switch (dropdownPlacement) {
|
58
58
|
case 'top':
|
@@ -150,13 +150,13 @@ const MenuOption = ({
|
|
150
150
|
useEffect(() => {
|
151
151
|
if (targetRef) {
|
152
152
|
const parentDom = getAnchorElement(targetRef);
|
153
|
-
parentDom?.classList.toggle('
|
153
|
+
parentDom?.classList.toggle('hover', isClicked);
|
154
154
|
}
|
155
155
|
|
156
156
|
return () => {
|
157
157
|
if (targetRef) {
|
158
158
|
const parentDom = getAnchorElement(targetRef);
|
159
|
-
parentDom?.classList.remove('
|
159
|
+
parentDom?.classList.remove('hover');
|
160
160
|
}
|
161
161
|
};
|
162
162
|
}, [isClicked, targetRef]);
|
@@ -41,6 +41,20 @@
|
|
41
41
|
}
|
42
42
|
|
43
43
|
tbody {
|
44
|
+
tr:hover,
|
45
|
+
tr.hover {
|
46
|
+
background-color: var(--hover-color);
|
47
|
+
|
48
|
+
.icon-container {
|
49
|
+
opacity: 1;
|
50
|
+
transform: translateX(0);
|
51
|
+
}
|
52
|
+
|
53
|
+
.ff-table-drag,
|
54
|
+
.ff-table-drag-icon {
|
55
|
+
opacity: 1;
|
56
|
+
}
|
57
|
+
}
|
44
58
|
tr {
|
45
59
|
.action-column {
|
46
60
|
opacity: 0;
|
@@ -75,20 +89,6 @@
|
|
75
89
|
}
|
76
90
|
}
|
77
91
|
|
78
|
-
&:hover {
|
79
|
-
background-color: var(--hover-color);
|
80
|
-
|
81
|
-
.icon-container {
|
82
|
-
opacity: 1;
|
83
|
-
transform: translateX(0);
|
84
|
-
}
|
85
|
-
|
86
|
-
.ff-table-drag,
|
87
|
-
.ff-table-drag-icon {
|
88
|
-
opacity: 1;
|
89
|
-
}
|
90
|
-
}
|
91
|
-
|
92
92
|
td {
|
93
93
|
position: relative;
|
94
94
|
color: var(--table-column-text-color);
|
@@ -148,4 +148,4 @@
|
|
148
148
|
tbody tr.disabled-row {
|
149
149
|
opacity: 0.5;
|
150
150
|
cursor: not-allowed;
|
151
|
-
}
|
151
|
+
}
|
@@ -40,14 +40,16 @@ const SortableRow = ({
|
|
40
40
|
transform: CSS.Transform.toString(transform),
|
41
41
|
transition,
|
42
42
|
};
|
43
|
+
const key = row._id || row.id;
|
43
44
|
return (
|
44
45
|
<tr
|
45
46
|
ref={setNodeRef}
|
46
47
|
style={style}
|
47
|
-
key={
|
48
|
+
key={key}
|
48
49
|
className={classNames(tableBodyRowClass, {
|
49
50
|
'disabled-row': row.disabled,
|
50
51
|
})}
|
52
|
+
id={key}
|
51
53
|
>
|
52
54
|
{columns.map((column: any, index: number) => {
|
53
55
|
return (
|
@@ -118,46 +120,45 @@ const Table = ({
|
|
118
120
|
onDragEnd,
|
119
121
|
loadMore = () => {},
|
120
122
|
}: TableProps) => {
|
121
|
-
|
122
123
|
const observerRef = useRef<IntersectionObserver | null>(null);
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
124
|
+
|
125
|
+
useEffect(() => {
|
126
|
+
const scrollContainer = document.getElementById(
|
127
|
+
'ff-table-scroll-container'
|
128
|
+
);
|
129
|
+
const firstNode = document.getElementById('ff-table-first-node');
|
130
|
+
const lastNode = document.getElementById('ff-table-last-node');
|
131
|
+
|
132
|
+
// Exit early if data is empty or elements are missing
|
133
|
+
if (!scrollContainer || !firstNode || !lastNode || !data?.length) {
|
134
|
+
return;
|
135
|
+
}
|
136
|
+
|
137
|
+
observerRef.current = new IntersectionObserver(
|
138
|
+
(entries) => {
|
139
|
+
entries.forEach((entry) => {
|
140
|
+
if (entry.isIntersecting) {
|
141
|
+
const direction =
|
142
|
+
entry.target.id === 'ff-table-last-node' ? 'below' : 'above';
|
143
|
+
loadMore(direction);
|
144
|
+
}
|
145
|
+
});
|
146
|
+
},
|
147
|
+
{
|
148
|
+
root: scrollContainer,
|
149
|
+
rootMargin: '8px',
|
150
|
+
threshold: 0.1,
|
134
151
|
}
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
},
|
146
|
-
{
|
147
|
-
root: scrollContainer,
|
148
|
-
rootMargin: '8px',
|
149
|
-
threshold: 0.1,
|
150
|
-
}
|
151
|
-
);
|
152
|
-
|
153
|
-
observerRef.current.observe(firstNode);
|
154
|
-
observerRef.current.observe(lastNode);
|
155
|
-
|
156
|
-
return () => {
|
157
|
-
// Cleanup observer
|
158
|
-
observerRef.current?.disconnect();
|
159
|
-
};
|
160
|
-
}, [data, loadMore]);
|
152
|
+
);
|
153
|
+
|
154
|
+
observerRef.current.observe(firstNode);
|
155
|
+
observerRef.current.observe(lastNode);
|
156
|
+
|
157
|
+
return () => {
|
158
|
+
// Cleanup observer
|
159
|
+
observerRef.current?.disconnect();
|
160
|
+
};
|
161
|
+
}, [data, loadMore]);
|
161
162
|
|
162
163
|
const handleOnclick = (column: ColumnsProps, row: DataProps) => {
|
163
164
|
let { onClick, accessor } = column;
|
@@ -260,7 +261,7 @@ const Table = ({
|
|
260
261
|
</tr>
|
261
262
|
</thead>
|
262
263
|
<tbody className="ff-fixed-header-table">
|
263
|
-
|
264
|
+
<tr id="ff-table-first-node" />
|
264
265
|
{data?.length > 0 &&
|
265
266
|
data?.map((row: any) => (
|
266
267
|
<SortableRow
|
@@ -275,8 +276,7 @@ const Table = ({
|
|
275
276
|
draggable={draggable}
|
276
277
|
/>
|
277
278
|
))}
|
278
|
-
|
279
|
-
|
279
|
+
<tr id="ff-table-last-node" />
|
280
280
|
</tbody>
|
281
281
|
</table>
|
282
282
|
{data?.length <= 0 && (
|
@@ -140,6 +140,21 @@
|
|
140
140
|
z-index: 2;
|
141
141
|
}
|
142
142
|
|
143
|
+
.ff-table-tree-row:hover,
|
144
|
+
.ff-table-tree-row.hover {
|
145
|
+
background-color: var(--hover-color);
|
146
|
+
|
147
|
+
.ff-table-tree-td {
|
148
|
+
&:first-child {
|
149
|
+
background-color: var(--hover-color);
|
150
|
+
}
|
151
|
+
}
|
152
|
+
|
153
|
+
.table-tree-row-action {
|
154
|
+
display: inline-flex;
|
155
|
+
align-items: center;
|
156
|
+
}
|
157
|
+
}
|
143
158
|
.ff-table-tree-row {
|
144
159
|
background-color: var(--base-bg-color);
|
145
160
|
|
@@ -150,20 +165,7 @@
|
|
150
165
|
.table-row-add-button {
|
151
166
|
display: inline-flex;
|
152
167
|
z-index: 9999;
|
153
|
-
|
154
|
-
&:hover {
|
155
|
-
background-color: var(--hover-color);
|
156
|
-
|
157
|
-
.ff-table-tree-td {
|
158
|
-
&:first-child {
|
159
|
-
background-color: var(--hover-color);
|
160
|
-
}
|
161
|
-
}
|
162
|
-
|
163
|
-
.table-tree-row-action {
|
164
|
-
display: inline-flex;
|
165
|
-
align-items: center;
|
166
|
-
}
|
168
|
+
align-items: center;
|
167
169
|
}
|
168
170
|
|
169
171
|
&::after {
|
@@ -1,10 +1,13 @@
|
|
1
1
|
export const prepareData = (dataObj: any, columnObj: any) => {
|
2
2
|
let cellData = dataObj[columnObj.accessor];
|
3
3
|
if (columnObj.cell) {
|
4
|
+
const refId = dataObj._id || dataObj.id;
|
5
|
+
|
4
6
|
return columnObj.cell({
|
5
7
|
value: cellData,
|
6
8
|
row: dataObj,
|
7
9
|
column: columnObj.accessor,
|
10
|
+
...(refId && { refId }),
|
8
11
|
});
|
9
12
|
} else if (columnObj.accessor) {
|
10
13
|
return cellData;
|