pixel-react 1.10.10-0 → 1.10.10-2

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/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "pixel-react",
3
3
  "description": "Great for pixel-perfect, design-focused components in React",
4
- "version": "1.10.10-00",
4
+ "version": "1.10.10-2",
5
5
  "main": "lib/index.js",
6
6
  "module": "lib/index.esm.js",
7
7
  "types": "lib/index.d.ts",
@@ -81,7 +81,7 @@ interface ExcelFileProps {
81
81
  /**
82
82
  * Delay time (in milliseconds) before the onSave callback is executed.
83
83
  */
84
- onSaveDelay: number;
84
+ onSaveDelay?: number;
85
85
 
86
86
  /**
87
87
  * Optional: Sets the vertical (Y-axis) positioning of the context menu.
@@ -19,7 +19,7 @@ const renderSpaces = (
19
19
  isLastNode = false;
20
20
 
21
21
  if (!isNaN(level)) {
22
- siblingsArray = Array(level).fill(true);
22
+ siblingsArray = Array(level - 1).fill(true);
23
23
  }
24
24
  }
25
25
 
@@ -97,8 +97,8 @@ const TableCell = React.memo(
97
97
  {col.isTree && select === 'radio' && (
98
98
  <RadioButton
99
99
  name={node.title}
100
- checked={selected.includes(node.id)}
101
- value={node.id}
100
+ checked={selected.includes(node.key)}
101
+ value={node.key}
102
102
  onChange={(e) => onCheckBoxChange(e, node)}
103
103
  />
104
104
  )}
@@ -205,6 +205,7 @@ export const Default: Story = {
205
205
  export const ControlledCheckBox: Story = {
206
206
  render: () => {
207
207
  const [selected, setSelected] = useState<string[]>([]);
208
+
208
209
  return (
209
210
  <TableTree
210
211
  height={100}
@@ -22,7 +22,9 @@ const TreeTable: React.FC<TreeTableProps> = ({
22
22
  onAddCancel = () => {},
23
23
  }) => {
24
24
  const observerRef = useRef<IntersectionObserver | null>(null);
25
- const triggeredNodesRef = useRef<Set<string>>(new Set()); // Track already triggered nodes
25
+ const isTriggeredAbove = useRef(false); // Track if pagination for "above" direction has been triggered
26
+ const isTriggeredBelow = useRef(false); // Track if pagination for "below" direction has been triggered
27
+ const isTriggeredOnce = useRef(false); // Ensure 2-second delay triggers only once
26
28
 
27
29
  // Throttled version of loadMore
28
30
  const throttledLoadMore = useRef(
@@ -42,9 +44,10 @@ const TreeTable: React.FC<TreeTableProps> = ({
42
44
  if (!scrollContainer || !firstNode || !lastNode || !treeData?.length)
43
45
  return;
44
46
 
45
- const isLastResourceAbove = treeData[0]?.lastResource;
46
- const isLastResourceBelow = treeData[treeData.length - 1]?.lastResource;
47
+ const isLastResourceAbove = !!treeData[0]?.lastResource;
48
+ const isLastResourceBelow = !!treeData[treeData.length - 1]?.lastResource;
47
49
 
50
+ // Skip pagination if both last resources are present
48
51
  if (isLastResourceAbove && isLastResourceBelow) return;
49
52
 
50
53
  const observerCallback = (entries: IntersectionObserverEntry[]) => {
@@ -54,17 +57,18 @@ const TreeTable: React.FC<TreeTableProps> = ({
54
57
  nodeId === 'ff-table-tree-last-node' ? 'below' : 'above';
55
58
 
56
59
  if (entry.isIntersecting) {
57
- if (
58
- !triggeredNodesRef.current.has(nodeId) &&
59
- ((direction === 'above' && !isLastResourceAbove) ||
60
- (direction === 'below' && !isLastResourceBelow))
61
- ) {
62
- triggeredNodesRef.current.add(nodeId);
63
- throttledLoadMore(direction);
60
+ // Trigger only once for each direction
61
+ if (direction === 'above' && !isTriggeredAbove.current) {
62
+ if (!isLastResourceAbove) {
63
+ throttledLoadMore(direction);
64
+ isTriggeredAbove.current = true;
65
+ }
66
+ } else if (direction === 'below' && !isTriggeredBelow.current) {
67
+ if (!isLastResourceBelow) {
68
+ throttledLoadMore(direction);
69
+ isTriggeredBelow.current = true;
70
+ }
64
71
  }
65
- } else {
66
- // Remove node from triggered set when it goes out of view
67
- triggeredNodesRef.current.delete(nodeId);
68
72
  }
69
73
  });
70
74
  };
@@ -75,8 +79,40 @@ const TreeTable: React.FC<TreeTableProps> = ({
75
79
  threshold: 0.1,
76
80
  });
77
81
 
78
- if (!isLastResourceAbove) observerRef.current.observe(firstNode);
79
- if (!isLastResourceBelow) observerRef.current.observe(lastNode);
82
+ // Initial pagination trigger after 2 seconds if first or last node is in view inside the scroll container
83
+ const checkInitialPaginationTrigger = () => {
84
+ if (isTriggeredOnce.current) return;
85
+
86
+ const scrollContainerRect = scrollContainer.getBoundingClientRect();
87
+ const firstNodeRect = firstNode?.getBoundingClientRect();
88
+ const lastNodeRect = lastNode?.getBoundingClientRect();
89
+
90
+ // Check if the first node is inside the scroll container
91
+ const isFirstNodeInView =
92
+ firstNodeRect &&
93
+ firstNodeRect.top >= scrollContainerRect.top &&
94
+ firstNodeRect.bottom <= scrollContainerRect.bottom;
95
+
96
+ // Check if the last node is inside the scroll container
97
+ const isLastNodeInView =
98
+ lastNodeRect &&
99
+ lastNodeRect.top >= scrollContainerRect.top &&
100
+ lastNodeRect.bottom <= scrollContainerRect.bottom;
101
+
102
+ if (isFirstNodeInView || isLastNodeInView) {
103
+ isTriggeredOnce.current = true;
104
+ setTimeout(() => {
105
+ if (!isLastResourceAbove) observerRef.current?.observe(firstNode);
106
+ if (!isLastResourceBelow) observerRef.current?.observe(lastNode);
107
+ }, 2000); // Delay the first pagination trigger by 2 seconds
108
+ } else {
109
+ // Observe first and last node immediately
110
+ if (!isLastResourceAbove) observerRef.current?.observe(firstNode);
111
+ if (!isLastResourceBelow) observerRef.current?.observe(lastNode);
112
+ }
113
+ };
114
+
115
+ checkInitialPaginationTrigger();
80
116
 
81
117
  return () => {
82
118
  observerRef.current?.disconnect();