pixel-react 1.10.6 → 1.10.8
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 +131 -69
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +131 -69
- 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/Table/Table.scss +15 -15
- package/src/components/Table/Table.tsx +39 -41
- package/src/components/TableTree/Components/TableBody.tsx +0 -1
- package/src/components/TableTree/TableTree.scss +1 -0
- 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
package/lib/index.js
CHANGED
@@ -2999,7 +2999,7 @@ const portalPosition = {
|
|
2999
2999
|
width: 0,
|
3000
3000
|
fromBottom: 0
|
3001
3001
|
};
|
3002
|
-
const calculatePosition = portalRef => {
|
3002
|
+
const calculatePosition$1 = portalRef => {
|
3003
3003
|
if (!portalRef?.current) {
|
3004
3004
|
return portalPosition;
|
3005
3005
|
}
|
@@ -3015,7 +3015,7 @@ const calculatePosition = portalRef => {
|
|
3015
3015
|
const usePortalPosition = (portalRef, isPortalOpen) => {
|
3016
3016
|
React.useEffect(() => {
|
3017
3017
|
const handleUpdate = () => {
|
3018
|
-
calculatePosition(portalRef);
|
3018
|
+
calculatePosition$1(portalRef);
|
3019
3019
|
};
|
3020
3020
|
if (isPortalOpen) {
|
3021
3021
|
window.addEventListener('resize', handleUpdate);
|
@@ -3026,7 +3026,7 @@ const usePortalPosition = (portalRef, isPortalOpen) => {
|
|
3026
3026
|
window.removeEventListener('scroll', handleUpdate);
|
3027
3027
|
};
|
3028
3028
|
}, [isPortalOpen]);
|
3029
|
-
return calculatePosition;
|
3029
|
+
return calculatePosition$1;
|
3030
3030
|
};
|
3031
3031
|
|
3032
3032
|
const Select$1 = ({
|
@@ -3395,9 +3395,17 @@ const StatusButton = ({
|
|
3395
3395
|
});
|
3396
3396
|
};
|
3397
3397
|
|
3398
|
-
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}";
|
3398
|
+
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}";
|
3399
3399
|
styleInject(css_248z$$);
|
3400
3400
|
|
3401
|
+
// Helper function to get the anchor element
|
3402
|
+
const getAnchorElement = anchorRef => {
|
3403
|
+
if (typeof anchorRef === 'string') {
|
3404
|
+
return document.getElementById(anchorRef);
|
3405
|
+
}
|
3406
|
+
return anchorRef?.current || null;
|
3407
|
+
};
|
3408
|
+
|
3401
3409
|
const Option$1 = ({
|
3402
3410
|
option,
|
3403
3411
|
onClick
|
@@ -3418,6 +3426,60 @@ const Option$1 = ({
|
|
3418
3426
|
children: option.label
|
3419
3427
|
})]
|
3420
3428
|
});
|
3429
|
+
const calculatePosition = (menuPosition, dropdownPlacement, optionCardHeight) => {
|
3430
|
+
const {
|
3431
|
+
top,
|
3432
|
+
left,
|
3433
|
+
height,
|
3434
|
+
width
|
3435
|
+
} = menuPosition;
|
3436
|
+
const availableSpace = {
|
3437
|
+
top,
|
3438
|
+
bottom: window.innerHeight - (top + height),
|
3439
|
+
left,
|
3440
|
+
right: window.innerWidth - (left + width)
|
3441
|
+
};
|
3442
|
+
const gap = 8; // Required gap
|
3443
|
+
switch (dropdownPlacement) {
|
3444
|
+
case 'top':
|
3445
|
+
return availableSpace.top > optionCardHeight + gap ? {
|
3446
|
+
top: top - optionCardHeight - gap,
|
3447
|
+
left
|
3448
|
+
} : {
|
3449
|
+
top: top + height + gap,
|
3450
|
+
left
|
3451
|
+
};
|
3452
|
+
case 'down':
|
3453
|
+
return availableSpace.bottom > optionCardHeight + gap ? {
|
3454
|
+
top: top + height + gap,
|
3455
|
+
left
|
3456
|
+
} : {
|
3457
|
+
top: top - optionCardHeight - gap,
|
3458
|
+
left
|
3459
|
+
};
|
3460
|
+
case 'left':
|
3461
|
+
return availableSpace.left > width + gap ? {
|
3462
|
+
top,
|
3463
|
+
left: left - width - gap
|
3464
|
+
} : {
|
3465
|
+
top,
|
3466
|
+
left: left + width + gap
|
3467
|
+
};
|
3468
|
+
case 'right':
|
3469
|
+
return availableSpace.right > width + gap ? {
|
3470
|
+
top,
|
3471
|
+
left: left + width + gap
|
3472
|
+
} : {
|
3473
|
+
top,
|
3474
|
+
left: left - width - gap
|
3475
|
+
};
|
3476
|
+
default:
|
3477
|
+
return {
|
3478
|
+
top,
|
3479
|
+
left
|
3480
|
+
};
|
3481
|
+
}
|
3482
|
+
};
|
3421
3483
|
const OptionCard = ({
|
3422
3484
|
options,
|
3423
3485
|
onClick,
|
@@ -3430,50 +3492,14 @@ const OptionCard = ({
|
|
3430
3492
|
}) => {
|
3431
3493
|
const themeContext = React.useContext(ThemeContext);
|
3432
3494
|
const currentTheme = themeContext?.currentTheme;
|
3433
|
-
const [optionsHeight, setOptionsHeight] = React.useState(0);
|
3434
|
-
const [optionsWidth, setOptionsWidth] = React.useState(0);
|
3435
3495
|
const optionCardRef = React.useRef(null);
|
3436
|
-
React.useEffect(() => {
|
3437
|
-
if (optionCardRef?.current) {
|
3438
|
-
const rect = optionCardRef?.current?.getBoundingClientRect();
|
3439
|
-
setOptionsHeight(rect?.height);
|
3440
|
-
setOptionsWidth(rect?.width);
|
3441
|
-
}
|
3442
|
-
}, []);
|
3443
3496
|
useClickOutside(menuRef, closeDropdown, [optionCardRef]);
|
3444
|
-
const
|
3445
|
-
|
3446
|
-
case 'top':
|
3447
|
-
return {
|
3448
|
-
top: menuPosition.top - optionsHeight - 7,
|
3449
|
-
left: menuPosition.left - 4
|
3450
|
-
};
|
3451
|
-
case 'down':
|
3452
|
-
return {
|
3453
|
-
top: menuPosition.top + 20,
|
3454
|
-
left: menuPosition.left - 4
|
3455
|
-
};
|
3456
|
-
case 'left':
|
3457
|
-
return {
|
3458
|
-
top: menuPosition.top - 4,
|
3459
|
-
left: menuPosition.left - optionsWidth - 8
|
3460
|
-
};
|
3461
|
-
case 'right':
|
3462
|
-
return {
|
3463
|
-
top: menuPosition.top - 4,
|
3464
|
-
left: menuPosition.left + 20
|
3465
|
-
};
|
3466
|
-
default:
|
3467
|
-
return {
|
3468
|
-
top: menuPosition.bottom,
|
3469
|
-
left: menuPosition.rightSpaceAvailable + 12
|
3470
|
-
};
|
3471
|
-
}
|
3472
|
-
})();
|
3497
|
+
const optionCardHeight = optionCardRef.current?.offsetHeight || 0;
|
3498
|
+
const style = calculatePosition(menuPosition, dropdownPlacement, optionCardHeight);
|
3473
3499
|
return /*#__PURE__*/ReactDOM.createPortal(jsxRuntime.jsx("div", {
|
3474
|
-
className: classNames('ff-option-card',
|
3500
|
+
className: classNames('ff-option-card', {
|
3475
3501
|
'ff-option-card--primary': variant === 'primary'
|
3476
|
-
}
|
3502
|
+
}, currentTheme),
|
3477
3503
|
style: {
|
3478
3504
|
...style,
|
3479
3505
|
zIndex
|
@@ -3500,43 +3526,51 @@ const MenuOption = ({
|
|
3500
3526
|
zIndex = 99,
|
3501
3527
|
dropdownPlacement = 'down',
|
3502
3528
|
optionCardVariant,
|
3503
|
-
targetRef,
|
3529
|
+
targetRef = null,
|
3504
3530
|
treeRowRef
|
3505
3531
|
}) => {
|
3506
3532
|
const [isClicked, setIsClicked] = React.useState(false);
|
3507
3533
|
const menuRef = React.useRef(null);
|
3534
|
+
const menuIconRef = React.useRef(null);
|
3508
3535
|
const [menuPosition, setMenuPosition] = React.useState({
|
3509
3536
|
top: 0,
|
3510
3537
|
left: 0,
|
3511
3538
|
height: 0,
|
3512
|
-
right: 0
|
3539
|
+
right: 0,
|
3540
|
+
width: 0
|
3513
3541
|
});
|
3514
3542
|
const closeDropDown = () => setIsClicked(false);
|
3543
|
+
React.useEffect(() => {
|
3544
|
+
if (targetRef) {
|
3545
|
+
const parentDom = getAnchorElement(targetRef);
|
3546
|
+
parentDom?.classList.toggle('hover', isClicked);
|
3547
|
+
}
|
3548
|
+
return () => {
|
3549
|
+
if (targetRef) {
|
3550
|
+
const parentDom = getAnchorElement(targetRef);
|
3551
|
+
parentDom?.classList.remove('hover');
|
3552
|
+
}
|
3553
|
+
};
|
3554
|
+
}, [isClicked, targetRef]);
|
3515
3555
|
const onIconClickHandler = () => {
|
3516
3556
|
onClick();
|
3517
3557
|
calculateDims();
|
3518
3558
|
setIsClicked(prev => !prev);
|
3519
3559
|
};
|
3520
3560
|
const handleOptionClick = option => {
|
3521
|
-
|
3522
|
-
actionContainer.classList.remove('table-row-add-button');
|
3561
|
+
treeRowRef?.current?.children[0]?.children[2]?.classList.remove('table-row-add-button');
|
3523
3562
|
onOptionClick(option);
|
3524
3563
|
closeDropDown();
|
3525
3564
|
};
|
3526
3565
|
const calculateDims = () => {
|
3527
|
-
|
3528
|
-
|
3529
|
-
targetElement = document.getElementById(targetRef);
|
3530
|
-
} else if (targetRef && targetRef.current) {
|
3531
|
-
targetElement = targetRef.current;
|
3532
|
-
}
|
3533
|
-
if (targetElement) {
|
3534
|
-
const rect = targetElement.getBoundingClientRect();
|
3566
|
+
if (menuIconRef.current) {
|
3567
|
+
const rect = menuIconRef.current.getBoundingClientRect();
|
3535
3568
|
setMenuPosition({
|
3536
3569
|
top: rect.top + window.scrollY,
|
3537
3570
|
left: rect.left + window.scrollX,
|
3538
3571
|
height: rect.height,
|
3539
|
-
right: rect.right
|
3572
|
+
right: rect.right,
|
3573
|
+
width: rect.width
|
3540
3574
|
});
|
3541
3575
|
}
|
3542
3576
|
};
|
@@ -3553,13 +3587,12 @@ const MenuOption = ({
|
|
3553
3587
|
'ff-menuicon-container-clicked': isClicked,
|
3554
3588
|
dark: variant === 'dark'
|
3555
3589
|
}),
|
3590
|
+
ref: menuIconRef,
|
3556
3591
|
onClick: onIconClickHandler,
|
3557
3592
|
style: {
|
3558
3593
|
width: `${iconButtonSize}px`,
|
3559
3594
|
height: `${iconButtonSize}px`,
|
3560
|
-
borderRadius: `${iconButtonBorderRadius}px
|
3561
|
-
display: 'flex',
|
3562
|
-
flexDirection: 'column'
|
3595
|
+
borderRadius: `${iconButtonBorderRadius}px`
|
3563
3596
|
},
|
3564
3597
|
children: jsxRuntime.jsx(Icon, {
|
3565
3598
|
height: iconSize,
|
@@ -3585,7 +3618,7 @@ const MenuOption = ({
|
|
3585
3618
|
});
|
3586
3619
|
};
|
3587
3620
|
|
3588
|
-
var css_248z$_ = ".ff-fixed-header-table {\n overflow-y: auto;\n}\n\n.ff-table-icon {\n position: absolute;\n top: 10px;\n right: 0;\n margin-right: 10px;\n z-index: 100;\n cursor: pointer;\n}\n\n.ff-table {\n width: 100%;\n}\n.ff-table th,\n.ff-table td {\n text-align: left;\n font-size: 12px;\n padding: 9px 8px;\n}\n.ff-table thead tr th {\n border-bottom: 1px solid var(--slider-table-color);\n}\n.ff-table thead tr th .ff-label-checkbox-container {\n display: flex;\n align-items: center;\n}\n.ff-table thead tr th .ff-label-checkbox-container .ff-table-checkbox {\n padding-right: 8px;\n}\n.ff-table tbody tr .action-column {\n opacity: 0;\n}\n.ff-table tbody tr .icon-container {\n padding-left: 8px;\n opacity: 0;\n display: flex;\n justify-content: flex-end;\n transition: opacity 0.3s ease, transform 0.3s ease;\n transform: translateX(20px);\n}\n.ff-table tbody tr .ff-data-checkbox-container {\n display: flex;\n align-items: center;\n}\n.ff-table tbody tr .ff-data-checkbox-container .ff-table-checkbox {\n padding-right: 8px;\n}\n.ff-table tbody tr .ff-data-checkbox-container .ff-table-drag {\n opacity: 0;\n transition: opacity 0.3s ease, transform 0.3s ease;\n}\n.ff-table tbody tr .ff-data-checkbox-container .ff-table-drag-icon {\n opacity: 0;\n transition: opacity 0.3s ease, transform 0.3s ease;\n cursor: grab;\n}\n.ff-table tbody tr
|
3621
|
+
var css_248z$_ = ".ff-fixed-header-table {\n overflow-y: auto;\n}\n\n.ff-table-icon {\n position: absolute;\n top: 10px;\n right: 0;\n margin-right: 10px;\n z-index: 100;\n cursor: pointer;\n}\n\n.ff-table {\n width: 100%;\n}\n.ff-table th,\n.ff-table td {\n text-align: left;\n font-size: 12px;\n padding: 9px 8px;\n}\n.ff-table thead tr th {\n border-bottom: 1px solid var(--slider-table-color);\n}\n.ff-table thead tr th .ff-label-checkbox-container {\n display: flex;\n align-items: center;\n}\n.ff-table thead tr th .ff-label-checkbox-container .ff-table-checkbox {\n padding-right: 8px;\n}\n.ff-table tbody tr:hover,\n.ff-table tbody tr.hover {\n background-color: var(--hover-color);\n}\n.ff-table tbody tr:hover .icon-container,\n.ff-table tbody tr.hover .icon-container {\n opacity: 1;\n transform: translateX(0);\n}\n.ff-table tbody tr:hover .ff-table-drag,\n.ff-table tbody tr:hover .ff-table-drag-icon,\n.ff-table tbody tr.hover .ff-table-drag,\n.ff-table tbody tr.hover .ff-table-drag-icon {\n opacity: 1;\n}\n.ff-table tbody tr .action-column {\n opacity: 0;\n}\n.ff-table tbody tr .icon-container {\n padding-left: 8px;\n opacity: 0;\n display: flex;\n justify-content: flex-end;\n transition: opacity 0.3s ease, transform 0.3s ease;\n transform: translateX(20px);\n}\n.ff-table tbody tr .ff-data-checkbox-container {\n display: flex;\n align-items: center;\n}\n.ff-table tbody tr .ff-data-checkbox-container .ff-table-checkbox {\n padding-right: 8px;\n}\n.ff-table tbody tr .ff-data-checkbox-container .ff-table-drag {\n opacity: 0;\n transition: opacity 0.3s ease, transform 0.3s ease;\n}\n.ff-table tbody tr .ff-data-checkbox-container .ff-table-drag-icon {\n opacity: 0;\n transition: opacity 0.3s ease, transform 0.3s ease;\n cursor: grab;\n}\n.ff-table tbody tr td {\n position: relative;\n color: var(--table-column-text-color);\n}\n.ff-table tbody tr td.clickable-cell {\n cursor: pointer;\n}\n.ff-table .primary-bg {\n background-color: var(--brand-color);\n}\n.ff-table .secondary-bg {\n background-color: var(--slider-table-color);\n}\n.ff-table .tertiary-bg {\n background-color: var(--custom-table-header-bg-color);\n}\n.ff-table .default-bg {\n background-color: transparent;\n}\n.ff-table .default-color {\n color: var(--table-header-text-color);\n}\n.ff-table .primary-color {\n color: var(--brand-color);\n}\n\n.border-borderRadius {\n border: 1px solid var(--slider-table-color);\n border-radius: 5px;\n border-collapse: none !important;\n}\n\n.ff-fixed-header {\n position: sticky !important;\n top: 0;\n z-index: 99;\n background-color: Var(--file-details-bg);\n}\n\n.no-data-content {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n\ntbody tr.disabled-row {\n opacity: 0.5;\n cursor: not-allowed;\n}";
|
3589
3622
|
styleInject(css_248z$_);
|
3590
3623
|
|
3591
3624
|
const isFunction$2 = functionToCheck => {
|
@@ -14540,7 +14573,7 @@ const MiniModal = /*#__PURE__*/React.forwardRef(({
|
|
14540
14573
|
}), document.body);
|
14541
14574
|
});
|
14542
14575
|
|
14543
|
-
var css_248z$R = ":root {\n --table-height: auto;\n}\n\n.tree-table-space-block {\n display: inline-block;\n width: 20px;\n height: 16px;\n text-align: center;\n line-height: 16px;\n vertical-align: top;\n font-size: 19px;\n position: relative;\n box-sizing: border-box;\n border-radius: 50%;\n}\n.tree-table-space-block.btn-toggle {\n position: relative;\n cursor: pointer;\n width: 22px;\n height: 18px;\n z-index: 12;\n}\n.tree-table-space-block.btn-toggle::before {\n display: none;\n}\n.tree-table-space-block.last-block::after, .tree-table-space-block.no-folder::after {\n position: absolute;\n content: \"\";\n height: 1px;\n background: var(--tree-connecting-lines-color);\n top: 50%;\n margin-top: -1px;\n}\n.tree-table-space-block.last-block::after {\n width: 12px;\n left: -10px;\n}\n.tree-table-space-block.no-folder {\n width: 8px;\n}\n.tree-table-space-block.no-folder::after {\n width: 22px;\n left: -10px;\n}\n.tree-table-space-block:not(.last-block, .no-lines, .last-node)::before {\n position: absolute;\n content: \"\";\n width: 1px;\n height: 40px;\n background: var(--tree-connecting-lines-color);\n left: 50%;\n top: -4px;\n z-index: 99;\n}\n.tree-table-space-block.last-node::before {\n position: absolute;\n content: \"\";\n width: 1px;\n height: 12px;\n background: var(--tree-connecting-lines-color);\n left: 50%;\n top: -4px;\n z-index: -1;\n}\n.tree-table-space-block.folder.last-node::before {\n height: 13px;\n}\n\n.tree-title-container .tree-table-space-block {\n width: 16px;\n}\n\n.hidden {\n display: none;\n}\n\n.show {\n display: table-row;\n visibility: visible;\n}\n\n.btn-toggle {\n cursor: pointer;\n}\n.btn-toggle.is-close {\n background: #f1f1f1;\n border: 1px solid transparent;\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);\n}\n.btn-toggle::before, .btn-toggle::after {\n display: none;\n}\n\n.tree-table-wrap {\n width: 100%;\n padding-left: 4px;\n overflow: hidden;\n overflow-x: auto;\n}\n\n.table-scrollable {\n height: var(--table-height);\n /* Adjust height as needed */\n overflow-y: auto;\n position: relative;\n}\n\n.ff-table-tree-body {\n overflow: scroll;\n}\n\n.tree-table {\n table-layout: fixed;\n width: 100%;\n border-collapse: collapse;\n overflow: scroll;\n}\n.tree-table .ff-table-tree-head {\n position: sticky;\n top: 0;\n z-index: 2;\n}\n.tree-table .ff-table-tree-row {\n background-color: var(--base-bg-color);\n}\n.tree-table .ff-table-tree-row .table-tree-row-action {\n display: none;\n}\n.tree-table .ff-table-tree-row .table-row-add-button {\n display: inline-flex;\n z-index: 9999;\n}\n.tree-table .ff-table-tree-row:hover {\n background-color: var(--hover-color);\n}\n.tree-table .ff-table-tree-row:hover .ff-table-tree-td:first-child {\n background-color: var(--hover-color);\n}\n.tree-table .ff-table-tree-row:hover .table-tree-row-action {\n display: inline-flex;\n align-items: center;\n}\n.tree-table .ff-table-tree-row::after {\n content: \"\";\n display: block;\n visibility: hidden;\n clear: both;\n}\n.tree-table .ff-table-tree-th,\n.tree-table .ff-table-tree-td {\n text-align: left;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n}\n.tree-table .ff-table-tree-th {\n color: var(--table-header-text-color);\n background: var(--border-color);\n font-size: 12px;\n font-weight: 600;\n width: 400px;\n height: 32px;\n box-sizing: border-box;\n}\n.tree-table .ff-table-tree-th:first-child {\n width: 400px !important;\n position: sticky;\n left: 0;\n padding-left: 8px;\n}\n.tree-table .ff-table-tree-td {\n font-size: 12px;\n color: var(--nlp-color);\n height: 18px;\n}\n.tree-table .ff-table-tree-td:first-child {\n overflow: initial;\n position: sticky;\n left: 0;\n background-color: white;\n}\n.tree-table .ff-table-tree-td:first-child .tree-table-default-content {\n margin-left: 8px;\n}\n.tree-table .ff-table-tree-td:first-child .tree-table-td-content {\n padding-left: 4px;\n}\n.tree-table .ff-table-tree-td:first-child .tree-table-td-content .tree-table-td-content-text {\n margin-left: 4px;\n}\n.tree-table .ff-table-tree-td:first-child .tree-table-default-content {\n font-weight: 700;\n}\n.tree-table .ff-table-tree-td.folder {\n height: 28px;\n}\n\n.tree-table-td-content {\n display: inline-flex;\n align-items: center;\n font-size: 12px;\n font-family: \"Poppins\", sans-serif;\n}\n.tree-table-td-content.folder {\n font-weight: 600;\n}\n\n.tree-row-expanded span svg,\n.tree-row-collapsed span svg {\n height: 12px;\n width: 12px;\n}\n.tree-row-expanded span svg path,\n.tree-row-collapsed span svg path {\n fill: var(--brand-color);\n}\n\n.tree-row-collapsed svg {\n transform: rotate(-90deg);\n transition: transform 0.3s ease;\n}\n\n.tree-table-space-container {\n display: inline-flex;\n}\n\n.tree-title-container {\n display: inline-flex;\n align-items: center;\n}";
|
14576
|
+
var css_248z$R = ":root {\n --table-height: auto;\n}\n\n.tree-table-space-block {\n display: inline-block;\n width: 20px;\n height: 16px;\n text-align: center;\n line-height: 16px;\n vertical-align: top;\n font-size: 19px;\n position: relative;\n box-sizing: border-box;\n border-radius: 50%;\n}\n.tree-table-space-block.btn-toggle {\n position: relative;\n cursor: pointer;\n width: 22px;\n height: 18px;\n z-index: 12;\n}\n.tree-table-space-block.btn-toggle::before {\n display: none;\n}\n.tree-table-space-block.last-block::after, .tree-table-space-block.no-folder::after {\n position: absolute;\n content: \"\";\n height: 1px;\n background: var(--tree-connecting-lines-color);\n top: 50%;\n margin-top: -1px;\n}\n.tree-table-space-block.last-block::after {\n width: 12px;\n left: -10px;\n}\n.tree-table-space-block.no-folder {\n width: 8px;\n}\n.tree-table-space-block.no-folder::after {\n width: 22px;\n left: -10px;\n}\n.tree-table-space-block:not(.last-block, .no-lines, .last-node)::before {\n position: absolute;\n content: \"\";\n width: 1px;\n height: 40px;\n background: var(--tree-connecting-lines-color);\n left: 50%;\n top: -4px;\n z-index: 99;\n}\n.tree-table-space-block.last-node::before {\n position: absolute;\n content: \"\";\n width: 1px;\n height: 12px;\n background: var(--tree-connecting-lines-color);\n left: 50%;\n top: -4px;\n z-index: -1;\n}\n.tree-table-space-block.folder.last-node::before {\n height: 13px;\n}\n\n.tree-title-container .tree-table-space-block {\n width: 16px;\n}\n\n.hidden {\n display: none;\n}\n\n.show {\n display: table-row;\n visibility: visible;\n}\n\n.btn-toggle {\n cursor: pointer;\n}\n.btn-toggle.is-close {\n background: #f1f1f1;\n border: 1px solid transparent;\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);\n}\n.btn-toggle::before, .btn-toggle::after {\n display: none;\n}\n\n.tree-table-wrap {\n width: 100%;\n padding-left: 4px;\n overflow: hidden;\n overflow-x: auto;\n}\n\n.table-scrollable {\n height: var(--table-height);\n /* Adjust height as needed */\n overflow-y: auto;\n position: relative;\n}\n\n.ff-table-tree-body {\n overflow: scroll;\n}\n\n.tree-table {\n table-layout: fixed;\n width: 100%;\n border-collapse: collapse;\n overflow: scroll;\n}\n.tree-table .ff-table-tree-head {\n position: sticky;\n top: 0;\n z-index: 2;\n}\n.tree-table .ff-table-tree-row {\n background-color: var(--base-bg-color);\n}\n.tree-table .ff-table-tree-row .table-tree-row-action {\n display: none;\n}\n.tree-table .ff-table-tree-row .table-row-add-button {\n display: inline-flex;\n z-index: 9999;\n align-items: center;\n}\n.tree-table .ff-table-tree-row:hover {\n background-color: var(--hover-color);\n}\n.tree-table .ff-table-tree-row:hover .ff-table-tree-td:first-child {\n background-color: var(--hover-color);\n}\n.tree-table .ff-table-tree-row:hover .table-tree-row-action {\n display: inline-flex;\n align-items: center;\n}\n.tree-table .ff-table-tree-row::after {\n content: \"\";\n display: block;\n visibility: hidden;\n clear: both;\n}\n.tree-table .ff-table-tree-th,\n.tree-table .ff-table-tree-td {\n text-align: left;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n}\n.tree-table .ff-table-tree-th {\n color: var(--table-header-text-color);\n background: var(--border-color);\n font-size: 12px;\n font-weight: 600;\n width: 400px;\n height: 32px;\n box-sizing: border-box;\n}\n.tree-table .ff-table-tree-th:first-child {\n width: 400px !important;\n position: sticky;\n left: 0;\n padding-left: 8px;\n}\n.tree-table .ff-table-tree-td {\n font-size: 12px;\n color: var(--nlp-color);\n height: 18px;\n}\n.tree-table .ff-table-tree-td:first-child {\n overflow: initial;\n position: sticky;\n left: 0;\n background-color: white;\n}\n.tree-table .ff-table-tree-td:first-child .tree-table-default-content {\n margin-left: 8px;\n}\n.tree-table .ff-table-tree-td:first-child .tree-table-td-content {\n padding-left: 4px;\n}\n.tree-table .ff-table-tree-td:first-child .tree-table-td-content .tree-table-td-content-text {\n margin-left: 4px;\n}\n.tree-table .ff-table-tree-td:first-child .tree-table-default-content {\n font-weight: 700;\n}\n.tree-table .ff-table-tree-td.folder {\n height: 28px;\n}\n\n.tree-table-td-content {\n display: inline-flex;\n align-items: center;\n font-size: 12px;\n font-family: \"Poppins\", sans-serif;\n}\n.tree-table-td-content.folder {\n font-weight: 600;\n}\n\n.tree-row-expanded span svg,\n.tree-row-collapsed span svg {\n height: 12px;\n width: 12px;\n}\n.tree-row-expanded span svg path,\n.tree-row-collapsed span svg path {\n fill: var(--brand-color);\n}\n\n.tree-row-collapsed svg {\n transform: rotate(-90deg);\n transition: transform 0.3s ease;\n}\n\n.tree-table-space-container {\n display: inline-flex;\n}\n\n.tree-title-container {\n display: inline-flex;\n align-items: center;\n}";
|
14544
14577
|
styleInject(css_248z$R);
|
14545
14578
|
|
14546
14579
|
const TableHead = /*#__PURE__*/React.memo(({
|
@@ -14780,7 +14813,6 @@ const TableBody = ({
|
|
14780
14813
|
onRowClick: onRowClick,
|
14781
14814
|
onToggleExpand: node => onToggleExpand(node, index),
|
14782
14815
|
onCheckBoxChange: onCheckBoxChange,
|
14783
|
-
index: index,
|
14784
14816
|
onAddConfirm: onAddConfirm,
|
14785
14817
|
onAddCancel: onAddCancel
|
14786
14818
|
}, node.key)), jsxRuntime.jsx("tr", {
|
@@ -54432,9 +54464,22 @@ const rearrangeDragItem = (initialArray, oldIndex, newIndex) => {
|
|
54432
54464
|
return updatedData;
|
54433
54465
|
};
|
54434
54466
|
|
54435
|
-
const getTreeDetails = (action, oldData, newData, index) => {
|
54467
|
+
const getTreeDetails = (action, oldData, newData, index, sourceId) => {
|
54436
54468
|
let treeDataList;
|
54437
54469
|
let root = undefined;
|
54470
|
+
const findIndexByKey = (data, key) => {
|
54471
|
+
return data.findIndex(node => node.key === key);
|
54472
|
+
};
|
54473
|
+
const getIndex = () => {
|
54474
|
+
if (sourceId) {
|
54475
|
+
const indexByKey = findIndexByKey(oldData, sourceId);
|
54476
|
+
if (indexByKey === -1) {
|
54477
|
+
throw new Error(`Key "${sourceId}" not found in oldData.`);
|
54478
|
+
}
|
54479
|
+
return indexByKey;
|
54480
|
+
}
|
54481
|
+
return index; // Use index if sourceId is not provided
|
54482
|
+
};
|
54438
54483
|
switch (action) {
|
54439
54484
|
case 'above':
|
54440
54485
|
treeDataList = [...newData, ...oldData].slice(0, 40);
|
@@ -54444,11 +54489,25 @@ const getTreeDetails = (action, oldData, newData, index) => {
|
|
54444
54489
|
break;
|
54445
54490
|
case 'expand':
|
54446
54491
|
case 'collapse':
|
54447
|
-
|
54448
|
-
|
54449
|
-
|
54450
|
-
|
54492
|
+
const actionIndex = getIndex();
|
54493
|
+
if (actionIndex === undefined) {
|
54494
|
+
throw new Error("Both sourceId and index are required for 'expand' or 'collapse' actions.");
|
54495
|
+
}
|
54496
|
+
treeDataList = [...oldData.slice(0, actionIndex), ...newData];
|
54497
|
+
break;
|
54498
|
+
case 'addAbove':
|
54499
|
+
const addAboveIndex = getIndex();
|
54500
|
+
if (addAboveIndex === undefined) {
|
54501
|
+
throw new Error("Both sourceId and index are required for 'addAbove' action.");
|
54451
54502
|
}
|
54503
|
+
treeDataList = [...oldData.slice(0, addAboveIndex), ...newData, ...oldData.slice(addAboveIndex)];
|
54504
|
+
break;
|
54505
|
+
case 'addBelow':
|
54506
|
+
const addBelowIndex = getIndex();
|
54507
|
+
if (addBelowIndex === undefined) {
|
54508
|
+
throw new Error("Both sourceId and index are required for 'addBelow' action.");
|
54509
|
+
}
|
54510
|
+
treeDataList = [...oldData.slice(0, addBelowIndex + 1), ...newData, ...oldData.slice(addBelowIndex + 1)];
|
54452
54511
|
break;
|
54453
54512
|
case 'start':
|
54454
54513
|
if (!checkEmpty(newData)) {
|
@@ -54465,7 +54524,10 @@ const getTreeDetails = (action, oldData, newData, index) => {
|
|
54465
54524
|
throw new Error('Tree data list is empty.');
|
54466
54525
|
}
|
54467
54526
|
const firstNode = treeDataList[0] || root;
|
54468
|
-
const lastNode = treeDataList[treeDataList.length - 1]
|
54527
|
+
const lastNode = treeDataList[treeDataList.length - 1] || {
|
54528
|
+
lastResource: true,
|
54529
|
+
key: ''
|
54530
|
+
};
|
54469
54531
|
return {
|
54470
54532
|
treeDataList,
|
54471
54533
|
next: !lastNode?.lastResource,
|