pixel-react 1.10.6 → 1.10.7
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/components/MenuOption/types.d.ts +1 -1
- package/lib/index.d.ts +2 -2
- package/lib/index.esm.js +129 -67
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +129 -67
- package/lib/index.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/lib/utils/getAnchorElement/getAnchorElement.d.ts +1 -0
- package/lib/utils/getTreeDetails/getTreeDetails.d.ts +1 -1
- package/package.json +1 -1
- package/src/components/MenuOption/MenuOption.scss +4 -0
- package/src/components/MenuOption/MenuOption.stories.tsx +2 -2
- package/src/components/MenuOption/MenuOption.tsx +72 -60
- package/src/components/MenuOption/types.ts +1 -1
- package/src/components/TableTree/Components/TableBody.tsx +0 -1
- package/src/utils/getAnchorElement/getAnchorElement.ts +7 -0
- package/src/utils/getTreeDetails/getTreeDetails.stories.tsx +59 -9
- package/src/utils/getTreeDetails/getTreeDetails.ts +59 -7
@@ -173,7 +173,7 @@ interface MenuOptionProps {
|
|
173
173
|
* @optional
|
174
174
|
*/
|
175
175
|
optionCardVariant?: 'primary';
|
176
|
-
targetRef?: string | React.RefObject<HTMLElement
|
176
|
+
targetRef?: string | React.RefObject<HTMLElement> | null;
|
177
177
|
treeRowRef?: React.RefObject<any | null>;
|
178
178
|
}
|
179
179
|
interface OptionProps {
|
package/lib/index.d.ts
CHANGED
@@ -1072,7 +1072,7 @@ interface MenuOptionProps {
|
|
1072
1072
|
* @optional
|
1073
1073
|
*/
|
1074
1074
|
optionCardVariant?: 'primary';
|
1075
|
-
targetRef?: string | React.RefObject<HTMLElement
|
1075
|
+
targetRef?: string | React.RefObject<HTMLElement> | null;
|
1076
1076
|
treeRowRef?: React.RefObject<any | null>;
|
1077
1077
|
}
|
1078
1078
|
|
@@ -3484,7 +3484,7 @@ interface TreeDetailsResult {
|
|
3484
3484
|
endId: string;
|
3485
3485
|
root?: TreeNodeProps;
|
3486
3486
|
}
|
3487
|
-
declare const getTreeDetails: (action: "above" | "below" | "expand" | "collapse" | "start", oldData: TreeNodeProps[], newData: TreeNodeProps[], index?: number) => TreeDetailsResult;
|
3487
|
+
declare const getTreeDetails: (action: "above" | "below" | "expand" | "collapse" | "start" | "addAbove" | "addBelow", oldData: TreeNodeProps[], newData: TreeNodeProps[], index?: number, sourceId?: string) => TreeDetailsResult;
|
3488
3488
|
|
3489
3489
|
declare const handleTreeNodeSect: (data: TreeNodeProps[], key: string | undefined, isChecked: boolean | "partial") => TreeNodeProps[];
|
3490
3490
|
|
package/lib/index.esm.js
CHANGED
@@ -2979,7 +2979,7 @@ const portalPosition = {
|
|
2979
2979
|
width: 0,
|
2980
2980
|
fromBottom: 0
|
2981
2981
|
};
|
2982
|
-
const calculatePosition = portalRef => {
|
2982
|
+
const calculatePosition$1 = portalRef => {
|
2983
2983
|
if (!portalRef?.current) {
|
2984
2984
|
return portalPosition;
|
2985
2985
|
}
|
@@ -2995,7 +2995,7 @@ const calculatePosition = portalRef => {
|
|
2995
2995
|
const usePortalPosition = (portalRef, isPortalOpen) => {
|
2996
2996
|
useEffect(() => {
|
2997
2997
|
const handleUpdate = () => {
|
2998
|
-
calculatePosition(portalRef);
|
2998
|
+
calculatePosition$1(portalRef);
|
2999
2999
|
};
|
3000
3000
|
if (isPortalOpen) {
|
3001
3001
|
window.addEventListener('resize', handleUpdate);
|
@@ -3006,7 +3006,7 @@ const usePortalPosition = (portalRef, isPortalOpen) => {
|
|
3006
3006
|
window.removeEventListener('scroll', handleUpdate);
|
3007
3007
|
};
|
3008
3008
|
}, [isPortalOpen]);
|
3009
|
-
return calculatePosition;
|
3009
|
+
return calculatePosition$1;
|
3010
3010
|
};
|
3011
3011
|
|
3012
3012
|
const Select$1 = ({
|
@@ -3375,9 +3375,17 @@ const StatusButton = ({
|
|
3375
3375
|
});
|
3376
3376
|
};
|
3377
3377
|
|
3378
|
-
var css_248z$$ = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-option-card .ff-options {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-menu-option-container {\n cursor: pointer;\n position: relative;\n}\n.ff-menu-option-container .ff-icon-label {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container {\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container:hover {\n background-color: var(--hover-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container.dark {\n background-color: var(--brand-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container.dark:hover {\n background-color: var(--menu-variant-dark-icon-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container.dark:hover svg path {\n fill: var(--brand-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container-clicked {\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: var(--brand-color);\n cursor: pointer;\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container-clicked:hover {\n background-color: var(--brand-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container-clicked.dark {\n background-color: var(--menu-variant-dark-icon-color);\n}\n\n.ff-option-card {\n position: absolute;\n margin: 4px;\n border: 1px solid var(--option-card-border-color);\n background: var(--option-card-bg-color);\n overflow: hidden;\n min-height: 32px;\n min-width: 110px;\n width: max-content;\n border-radius: 4px;\n}\n.ff-option-card--primary {\n background: var(--brand-color);\n color: var(--primary-button-text-color);\n}\n.ff-option-card--primary svg path {\n fill: var(--primary-icon-color);\n}\n.ff-option-card--primary :hover {\n color: var(--brand-color);\n}\n.ff-option-card--primary :hover svg path {\n fill: var(--brand-color);\n}\n.ff-option-card .ff-options {\n cursor: pointer;\n border-radius: 3px;\n display: flex;\n align-items: center;\n padding: 4px;\n gap: 8px;\n}\n.ff-option-card .ff-options:hover {\n background-color: var(--hover-color);\n}\n.ff-option-card .ff-options label {\n cursor: pointer;\n}\n.ff-option-card .ff-disable-option {\n opacity: 0.5;\n cursor: no-drop;\n}\n.ff-option-card .ff-disable-option label {\n cursor: no-drop;\n}";
|
3378
|
+
var css_248z$$ = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-option-card .ff-options {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-menu-option-container {\n cursor: pointer;\n position: relative;\n}\n.ff-menu-option-container .ff-icon-label {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container {\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container:hover {\n background-color: var(--hover-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container.dark {\n background-color: var(--brand-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container.dark:hover {\n background-color: var(--menu-variant-dark-icon-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container.dark:hover svg path {\n fill: var(--brand-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container-clicked {\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: var(--brand-color);\n cursor: pointer;\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container-clicked:hover {\n background-color: var(--brand-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container-clicked.dark {\n background-color: var(--menu-variant-dark-icon-color);\n}\n\n.ff-option-card {\n position: absolute;\n margin: 4px;\n border: 1px solid var(--option-card-border-color);\n background: var(--option-card-bg-color);\n overflow: hidden;\n min-height: 32px;\n min-width: 110px;\n width: max-content;\n border-radius: 4px;\n}\n.ff-option-card--primary {\n background: var(--brand-color);\n color: var(--primary-button-text-color);\n}\n.ff-option-card--primary svg path {\n fill: var(--primary-icon-color);\n}\n.ff-option-card--primary :hover {\n color: var(--brand-color);\n}\n.ff-option-card--primary :hover svg path {\n fill: var(--brand-color);\n}\n.ff-option-card .ff-options {\n cursor: pointer;\n border-radius: 3px;\n display: flex;\n align-items: center;\n padding: 4px;\n gap: 8px;\n}\n.ff-option-card .ff-options:hover {\n background-color: var(--hover-color);\n}\n.ff-option-card .ff-options label {\n cursor: pointer;\n}\n.ff-option-card .ff-disable-option {\n opacity: 0.5;\n cursor: no-drop;\n}\n.ff-option-card .ff-disable-option label {\n cursor: no-drop;\n}\n\n.ff-menu-parent-hover {\n background-color: var(--hover-color) !important;\n}";
|
3379
3379
|
styleInject(css_248z$$);
|
3380
3380
|
|
3381
|
+
// Helper function to get the anchor element
|
3382
|
+
const getAnchorElement = anchorRef => {
|
3383
|
+
if (typeof anchorRef === 'string') {
|
3384
|
+
return document.getElementById(anchorRef);
|
3385
|
+
}
|
3386
|
+
return anchorRef?.current || null;
|
3387
|
+
};
|
3388
|
+
|
3381
3389
|
const Option$1 = ({
|
3382
3390
|
option,
|
3383
3391
|
onClick
|
@@ -3398,6 +3406,60 @@ const Option$1 = ({
|
|
3398
3406
|
children: option.label
|
3399
3407
|
})]
|
3400
3408
|
});
|
3409
|
+
const calculatePosition = (menuPosition, dropdownPlacement, optionCardHeight) => {
|
3410
|
+
const {
|
3411
|
+
top,
|
3412
|
+
left,
|
3413
|
+
height,
|
3414
|
+
width
|
3415
|
+
} = menuPosition;
|
3416
|
+
const availableSpace = {
|
3417
|
+
top,
|
3418
|
+
bottom: window.innerHeight - (top + height),
|
3419
|
+
left,
|
3420
|
+
right: window.innerWidth - (left + width)
|
3421
|
+
};
|
3422
|
+
const gap = 8; // Required gap
|
3423
|
+
switch (dropdownPlacement) {
|
3424
|
+
case 'top':
|
3425
|
+
return availableSpace.top > optionCardHeight + gap ? {
|
3426
|
+
top: top - optionCardHeight - gap,
|
3427
|
+
left
|
3428
|
+
} : {
|
3429
|
+
top: top + height + gap,
|
3430
|
+
left
|
3431
|
+
};
|
3432
|
+
case 'down':
|
3433
|
+
return availableSpace.bottom > optionCardHeight + gap ? {
|
3434
|
+
top: top + height + gap,
|
3435
|
+
left
|
3436
|
+
} : {
|
3437
|
+
top: top - optionCardHeight - gap,
|
3438
|
+
left
|
3439
|
+
};
|
3440
|
+
case 'left':
|
3441
|
+
return availableSpace.left > width + gap ? {
|
3442
|
+
top,
|
3443
|
+
left: left - width - gap
|
3444
|
+
} : {
|
3445
|
+
top,
|
3446
|
+
left: left + width + gap
|
3447
|
+
};
|
3448
|
+
case 'right':
|
3449
|
+
return availableSpace.right > width + gap ? {
|
3450
|
+
top,
|
3451
|
+
left: left + width + gap
|
3452
|
+
} : {
|
3453
|
+
top,
|
3454
|
+
left: left - width - gap
|
3455
|
+
};
|
3456
|
+
default:
|
3457
|
+
return {
|
3458
|
+
top,
|
3459
|
+
left
|
3460
|
+
};
|
3461
|
+
}
|
3462
|
+
};
|
3401
3463
|
const OptionCard = ({
|
3402
3464
|
options,
|
3403
3465
|
onClick,
|
@@ -3410,50 +3472,14 @@ const OptionCard = ({
|
|
3410
3472
|
}) => {
|
3411
3473
|
const themeContext = useContext(ThemeContext);
|
3412
3474
|
const currentTheme = themeContext?.currentTheme;
|
3413
|
-
const [optionsHeight, setOptionsHeight] = useState(0);
|
3414
|
-
const [optionsWidth, setOptionsWidth] = useState(0);
|
3415
3475
|
const optionCardRef = useRef(null);
|
3416
|
-
useEffect(() => {
|
3417
|
-
if (optionCardRef?.current) {
|
3418
|
-
const rect = optionCardRef?.current?.getBoundingClientRect();
|
3419
|
-
setOptionsHeight(rect?.height);
|
3420
|
-
setOptionsWidth(rect?.width);
|
3421
|
-
}
|
3422
|
-
}, []);
|
3423
3476
|
useClickOutside(menuRef, closeDropdown, [optionCardRef]);
|
3424
|
-
const
|
3425
|
-
|
3426
|
-
case 'top':
|
3427
|
-
return {
|
3428
|
-
top: menuPosition.top - optionsHeight - 7,
|
3429
|
-
left: menuPosition.left - 4
|
3430
|
-
};
|
3431
|
-
case 'down':
|
3432
|
-
return {
|
3433
|
-
top: menuPosition.top + 20,
|
3434
|
-
left: menuPosition.left - 4
|
3435
|
-
};
|
3436
|
-
case 'left':
|
3437
|
-
return {
|
3438
|
-
top: menuPosition.top - 4,
|
3439
|
-
left: menuPosition.left - optionsWidth - 8
|
3440
|
-
};
|
3441
|
-
case 'right':
|
3442
|
-
return {
|
3443
|
-
top: menuPosition.top - 4,
|
3444
|
-
left: menuPosition.left + 20
|
3445
|
-
};
|
3446
|
-
default:
|
3447
|
-
return {
|
3448
|
-
top: menuPosition.bottom,
|
3449
|
-
left: menuPosition.rightSpaceAvailable + 12
|
3450
|
-
};
|
3451
|
-
}
|
3452
|
-
})();
|
3477
|
+
const optionCardHeight = optionCardRef.current?.offsetHeight || 0;
|
3478
|
+
const style = calculatePosition(menuPosition, dropdownPlacement, optionCardHeight);
|
3453
3479
|
return /*#__PURE__*/createPortal(jsx("div", {
|
3454
|
-
className: classNames('ff-option-card',
|
3480
|
+
className: classNames('ff-option-card', {
|
3455
3481
|
'ff-option-card--primary': variant === 'primary'
|
3456
|
-
}
|
3482
|
+
}, currentTheme),
|
3457
3483
|
style: {
|
3458
3484
|
...style,
|
3459
3485
|
zIndex
|
@@ -3480,43 +3506,51 @@ const MenuOption = ({
|
|
3480
3506
|
zIndex = 99,
|
3481
3507
|
dropdownPlacement = 'down',
|
3482
3508
|
optionCardVariant,
|
3483
|
-
targetRef,
|
3509
|
+
targetRef = null,
|
3484
3510
|
treeRowRef
|
3485
3511
|
}) => {
|
3486
3512
|
const [isClicked, setIsClicked] = useState(false);
|
3487
3513
|
const menuRef = useRef(null);
|
3514
|
+
const menuIconRef = useRef(null);
|
3488
3515
|
const [menuPosition, setMenuPosition] = useState({
|
3489
3516
|
top: 0,
|
3490
3517
|
left: 0,
|
3491
3518
|
height: 0,
|
3492
|
-
right: 0
|
3519
|
+
right: 0,
|
3520
|
+
width: 0
|
3493
3521
|
});
|
3494
3522
|
const closeDropDown = () => setIsClicked(false);
|
3523
|
+
useEffect(() => {
|
3524
|
+
if (targetRef) {
|
3525
|
+
const parentDom = getAnchorElement(targetRef);
|
3526
|
+
parentDom?.classList.toggle('ff-menu-parent-hover', isClicked);
|
3527
|
+
}
|
3528
|
+
return () => {
|
3529
|
+
if (targetRef) {
|
3530
|
+
const parentDom = getAnchorElement(targetRef);
|
3531
|
+
parentDom?.classList.remove('ff-menu-parent-hover');
|
3532
|
+
}
|
3533
|
+
};
|
3534
|
+
}, [isClicked, targetRef]);
|
3495
3535
|
const onIconClickHandler = () => {
|
3496
3536
|
onClick();
|
3497
3537
|
calculateDims();
|
3498
3538
|
setIsClicked(prev => !prev);
|
3499
3539
|
};
|
3500
3540
|
const handleOptionClick = option => {
|
3501
|
-
|
3502
|
-
actionContainer.classList.remove('table-row-add-button');
|
3541
|
+
treeRowRef?.current?.children[0]?.children[2]?.classList.remove('table-row-add-button');
|
3503
3542
|
onOptionClick(option);
|
3504
3543
|
closeDropDown();
|
3505
3544
|
};
|
3506
3545
|
const calculateDims = () => {
|
3507
|
-
|
3508
|
-
|
3509
|
-
targetElement = document.getElementById(targetRef);
|
3510
|
-
} else if (targetRef && targetRef.current) {
|
3511
|
-
targetElement = targetRef.current;
|
3512
|
-
}
|
3513
|
-
if (targetElement) {
|
3514
|
-
const rect = targetElement.getBoundingClientRect();
|
3546
|
+
if (menuIconRef.current) {
|
3547
|
+
const rect = menuIconRef.current.getBoundingClientRect();
|
3515
3548
|
setMenuPosition({
|
3516
3549
|
top: rect.top + window.scrollY,
|
3517
3550
|
left: rect.left + window.scrollX,
|
3518
3551
|
height: rect.height,
|
3519
|
-
right: rect.right
|
3552
|
+
right: rect.right,
|
3553
|
+
width: rect.width
|
3520
3554
|
});
|
3521
3555
|
}
|
3522
3556
|
};
|
@@ -3533,13 +3567,12 @@ const MenuOption = ({
|
|
3533
3567
|
'ff-menuicon-container-clicked': isClicked,
|
3534
3568
|
dark: variant === 'dark'
|
3535
3569
|
}),
|
3570
|
+
ref: menuIconRef,
|
3536
3571
|
onClick: onIconClickHandler,
|
3537
3572
|
style: {
|
3538
3573
|
width: `${iconButtonSize}px`,
|
3539
3574
|
height: `${iconButtonSize}px`,
|
3540
|
-
borderRadius: `${iconButtonBorderRadius}px
|
3541
|
-
display: 'flex',
|
3542
|
-
flexDirection: 'column'
|
3575
|
+
borderRadius: `${iconButtonBorderRadius}px`
|
3543
3576
|
},
|
3544
3577
|
children: jsx(Icon, {
|
3545
3578
|
height: iconSize,
|
@@ -14760,7 +14793,6 @@ const TableBody = ({
|
|
14760
14793
|
onRowClick: onRowClick,
|
14761
14794
|
onToggleExpand: node => onToggleExpand(node, index),
|
14762
14795
|
onCheckBoxChange: onCheckBoxChange,
|
14763
|
-
index: index,
|
14764
14796
|
onAddConfirm: onAddConfirm,
|
14765
14797
|
onAddCancel: onAddCancel
|
14766
14798
|
}, node.key)), jsx("tr", {
|
@@ -54412,9 +54444,22 @@ const rearrangeDragItem = (initialArray, oldIndex, newIndex) => {
|
|
54412
54444
|
return updatedData;
|
54413
54445
|
};
|
54414
54446
|
|
54415
|
-
const getTreeDetails = (action, oldData, newData, index) => {
|
54447
|
+
const getTreeDetails = (action, oldData, newData, index, sourceId) => {
|
54416
54448
|
let treeDataList;
|
54417
54449
|
let root = undefined;
|
54450
|
+
const findIndexByKey = (data, key) => {
|
54451
|
+
return data.findIndex(node => node.key === key);
|
54452
|
+
};
|
54453
|
+
const getIndex = () => {
|
54454
|
+
if (sourceId) {
|
54455
|
+
const indexByKey = findIndexByKey(oldData, sourceId);
|
54456
|
+
if (indexByKey === -1) {
|
54457
|
+
throw new Error(`Key "${sourceId}" not found in oldData.`);
|
54458
|
+
}
|
54459
|
+
return indexByKey;
|
54460
|
+
}
|
54461
|
+
return index; // Use index if sourceId is not provided
|
54462
|
+
};
|
54418
54463
|
switch (action) {
|
54419
54464
|
case 'above':
|
54420
54465
|
treeDataList = [...newData, ...oldData].slice(0, 40);
|
@@ -54424,11 +54469,25 @@ const getTreeDetails = (action, oldData, newData, index) => {
|
|
54424
54469
|
break;
|
54425
54470
|
case 'expand':
|
54426
54471
|
case 'collapse':
|
54427
|
-
|
54428
|
-
|
54429
|
-
|
54430
|
-
|
54472
|
+
const actionIndex = getIndex();
|
54473
|
+
if (actionIndex === undefined) {
|
54474
|
+
throw new Error("Both sourceId and index are required for 'expand' or 'collapse' actions.");
|
54475
|
+
}
|
54476
|
+
treeDataList = [...oldData.slice(0, actionIndex), ...newData];
|
54477
|
+
break;
|
54478
|
+
case 'addAbove':
|
54479
|
+
const addAboveIndex = getIndex();
|
54480
|
+
if (addAboveIndex === undefined) {
|
54481
|
+
throw new Error("Both sourceId and index are required for 'addAbove' action.");
|
54431
54482
|
}
|
54483
|
+
treeDataList = [...oldData.slice(0, addAboveIndex), ...newData, ...oldData.slice(addAboveIndex)];
|
54484
|
+
break;
|
54485
|
+
case 'addBelow':
|
54486
|
+
const addBelowIndex = getIndex();
|
54487
|
+
if (addBelowIndex === undefined) {
|
54488
|
+
throw new Error("Both sourceId and index are required for 'addBelow' action.");
|
54489
|
+
}
|
54490
|
+
treeDataList = [...oldData.slice(0, addBelowIndex + 1), ...newData, ...oldData.slice(addBelowIndex + 1)];
|
54432
54491
|
break;
|
54433
54492
|
case 'start':
|
54434
54493
|
if (!checkEmpty(newData)) {
|
@@ -54445,7 +54504,10 @@ const getTreeDetails = (action, oldData, newData, index) => {
|
|
54445
54504
|
throw new Error('Tree data list is empty.');
|
54446
54505
|
}
|
54447
54506
|
const firstNode = treeDataList[0] || root;
|
54448
|
-
const lastNode = treeDataList[treeDataList.length - 1]
|
54507
|
+
const lastNode = treeDataList[treeDataList.length - 1] || {
|
54508
|
+
lastResource: true,
|
54509
|
+
key: ''
|
54510
|
+
};
|
54449
54511
|
return {
|
54450
54512
|
treeDataList,
|
54451
54513
|
next: !lastNode?.lastResource,
|