pixel-react 1.10.4 → 1.10.6
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/ComponentProps/TreeNodeProps.d.ts +2 -1
- package/lib/components/AddResourceButton/AddResourceButton.d.ts +4 -0
- package/lib/components/AddResourceButton/ArrowsButton/ArrowsButton.d.ts +1 -1
- package/lib/components/AddResourceButton/index.d.ts +1 -1
- package/lib/components/AddResourceButton/type.d.ts +2 -0
- package/lib/components/BrowserTabs/BrowserTabs.d.ts +5 -0
- package/lib/components/BrowserTabs/index.d.ts +1 -0
- package/lib/components/BrowserTabs/types.d.ts +64 -0
- package/lib/components/ConnectingBranch/data.d.ts +62 -64
- package/lib/components/ConnectingBranch/types.d.ts +28 -7
- package/lib/components/Excel/ExcelFile/ExcelFile.d.ts +6 -1
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.d.ts +3 -0
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/actions.d.ts +15 -1
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/types.d.ts +5 -0
- package/lib/components/Excel/Types.d.ts +1 -0
- package/lib/components/MenuOption/MenuOption.d.ts +1 -1
- package/lib/components/MenuOption/types.d.ts +1 -0
- package/lib/components/MiniModal/types.d.ts +2 -1
- package/lib/components/Select/components/types.d.ts +6 -1
- package/lib/components/Select/types.d.ts +17 -0
- package/lib/components/Table/Table.d.ts +1 -1
- package/lib/components/Table/Types.d.ts +1 -0
- package/lib/components/TableTree/Components/TableCell.d.ts +1 -1
- package/lib/components/TableTree/Components/TableRow.d.ts +1 -1
- package/lib/components/TableTree/types.d.ts +4 -3
- package/lib/index.d.ts +127 -13
- package/lib/index.esm.js +992 -462
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +993 -462
- package/lib/index.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/ComponentProps/TreeNodeProps.ts +2 -1
- package/src/assets/Themes/BaseTheme.scss +1 -2
- package/src/assets/Themes/DarkTheme.scss +0 -1
- package/src/assets/styles/_mixins.scss +19 -0
- package/src/components/AddResourceButton/{AddButton.scss → AddResourceButton.scss} +1 -0
- package/src/components/AddResourceButton/{AddButton.stories.tsx → AddResourceButton.stories.tsx} +4 -4
- package/src/components/AddResourceButton/{AddButton.tsx → AddResourceButton.tsx} +25 -10
- package/src/components/AddResourceButton/ArrowsButton/ArrowsButton.scss +1 -2
- package/src/components/AddResourceButton/ArrowsButton/ArrowsButton.tsx +16 -9
- package/src/components/AddResourceButton/index.ts +1 -1
- package/src/components/AddResourceButton/type.ts +2 -0
- package/src/components/BrowserTabs/BrowserTabs.scss +75 -0
- package/src/components/BrowserTabs/BrowserTabs.stories.tsx +366 -0
- package/src/components/BrowserTabs/BrowserTabs.tsx +128 -0
- package/src/components/BrowserTabs/index.ts +1 -0
- package/src/components/BrowserTabs/types.ts +73 -0
- package/src/components/ConnectingBranch/BranchComponents/MachineInstances.tsx +54 -39
- package/src/components/ConnectingBranch/ConnectingBranch.stories.tsx +3 -2
- package/src/components/ConnectingBranch/ConnectingBranch.tsx +28 -24
- package/src/components/ConnectingBranch/data.tsx +207 -213
- package/src/components/ConnectingBranch/types.ts +26 -17
- package/src/components/Excel/ColorBarSelector/ColorBarSelector.tsx +1 -1
- package/src/components/Excel/ExcelFile/ExcelFile.scss +4 -0
- package/src/components/Excel/ExcelFile/ExcelFile.tsx +35 -16
- package/src/components/Excel/ExcelFile/ExcelFileComponents/ColumnIndicator.tsx +14 -3
- package/src/components/Excel/ExcelFile/ExcelFileComponents/DataEditor.tsx +1 -0
- package/src/components/Excel/ExcelFile/ExcelFileComponents/RowIndicator.tsx +16 -5
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +12 -1
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.tsx +31 -5
- package/src/components/Excel/ExcelFile/ExcelFileComponents/actions.ts +30 -0
- package/src/components/Excel/ExcelFile/ExcelFileComponents/reducer.ts +47 -0
- package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +4 -4
- package/src/components/Excel/ExcelFile/ExcelFileComponents/types.ts +6 -0
- package/src/components/Excel/ExcelFile.stories.tsx +10 -2
- package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +11 -11
- package/src/components/Excel/Types.ts +1 -0
- package/src/components/Excel/dataConversion.ts +17 -19
- package/src/components/MenuOption/MenuOption.tsx +4 -0
- package/src/components/MenuOption/types.ts +1 -0
- package/src/components/MiniModal/MiniModal.scss +8 -0
- package/src/components/MiniModal/MiniModal.stories.tsx +60 -0
- package/src/components/MiniModal/types.ts +2 -1
- package/src/components/Select/Select.stories.tsx +43 -1
- package/src/components/Select/Select.tsx +16 -1
- package/src/components/Select/components/Dropdown.scss +41 -1
- package/src/components/Select/components/Dropdown.tsx +52 -6
- package/src/components/Select/components/types.ts +7 -2
- package/src/components/Select/types.ts +22 -0
- package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.tsx +8 -2
- package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +1 -1
- package/src/components/SequentialConnectingBranch/components/DatasetTooltip/DataSetTooltip.scss +14 -0
- package/src/components/SequentialConnectingBranch/components/DatasetTooltip/DataSetTooltip.tsx +6 -11
- package/src/components/Table/Table.stories.tsx +1 -1
- package/src/components/Table/Table.tsx +55 -4
- package/src/components/Table/Types.ts +4 -1
- package/src/components/TableTree/Components/TableCell.tsx +25 -10
- package/src/components/TableTree/Components/TableHead.tsx +5 -5
- package/src/components/TableTree/Components/TableRow.tsx +27 -24
- package/src/components/TableTree/TableTree.scss +89 -69
- package/src/components/TableTree/TableTree.stories.tsx +66 -2
- package/src/components/TableTree/types.ts +4 -3
- package/src/index.ts +2 -0
- package/src/utils/getTreeDetails/getTreeDetails.ts +8 -7
- package/lib/StyleGuide/ColorPalette/ColorPalette.stories.d.ts +0 -6
- package/lib/StyleGuide/Typography/Typography.stories.d.ts +0 -6
- package/lib/components/Accordion/Accordion.stories.d.ts +0 -6
- package/lib/components/AddResourceButton/AddButton.stories.d.ts +0 -8
- package/lib/components/Button/Button.stories.d.ts +0 -12
- package/lib/components/Charts/DonutChart/DonutChart.stories.d.ts +0 -6
- package/lib/components/Charts/RadialChart/RadialChart.stories.d.ts +0 -6
- package/lib/components/Checkbox/Checkbox.stories.d.ts +0 -8
- package/lib/components/Chip/Chip.stories.d.ts +0 -14
- package/lib/components/DatePicker/DatePicker.stories.d.ts +0 -9
- package/lib/components/DragAndDrop/DragAndDrop.stories.d.ts +0 -6
- package/lib/components/Drawer/Drawer.stories.d.ts +0 -7
- package/lib/components/ExpandableMenu/ExpandableMenu.stories.d.ts +0 -7
- package/lib/components/FileDropzone/FileDropzone.stories.d.ts +0 -8
- package/lib/components/Form/Form.stories.d.ts +0 -6
- package/lib/components/GridLayout/GridLayout.stories.d.ts +0 -8
- package/lib/components/HighlightText/HighlightText.stories.d.ts +0 -6
- package/lib/components/Icon/Icon.stories.d.ts +0 -7
- package/lib/components/IconButton/IconButton.stories.d.ts +0 -6
- package/lib/components/Input/Input.stories.d.ts +0 -9
- package/lib/components/InputWithDropdown/InputWithDropdown.stories.d.ts +0 -9
- package/lib/components/LazyLoad/LazyLoad.stories.d.ts +0 -6
- package/lib/components/MenuOption/MenuOption.stories.d.ts +0 -15
- package/lib/components/MiniModal/MiniModal.stories.d.ts +0 -9
- package/lib/components/Modal/Modal.stories.d.ts +0 -7
- package/lib/components/MultiSelect/MultiSelect.stories.d.ts +0 -9
- package/lib/components/RadioButton/RadioButton.stories.d.ts +0 -10
- package/lib/components/RadioGroup/RadioGroup.stories.d.ts +0 -8
- package/lib/components/Search/Search.stories.d.ts +0 -6
- package/lib/components/Select/Select.stories.d.ts +0 -13
- package/lib/components/Select/components/Dropdown/Dropdown.d.ts +0 -4
- package/lib/components/Select/components/Dropdown/dropdownTypes.d.ts +0 -15
- package/lib/components/SequentialConnectingBranch/components/AddBrowserModal/AddBrowserModal.d.ts +0 -4
- package/lib/components/SequentialConnectingBranch/components/AddBrowserModal/types.d.ts +0 -3
- package/lib/components/SequentialConnectingBranch/components/DatasetListModal/DatasetListModal.d.ts +0 -4
- package/lib/components/SequentialConnectingBranch/components/DatasetListModal/types.d.ts +0 -3
- package/lib/components/StateDropdown/StateDropdown.stories.d.ts +0 -10
- package/lib/components/StatusButton/StatusButton.stories.d.ts +0 -14
- package/lib/components/Table/Table.stories.d.ts +0 -11
- package/lib/components/TableTree/TableTree.stories.d.ts +0 -7
- package/lib/components/Tabs/Tabs.stories.d.ts +0 -9
- package/lib/components/TextArea/Textarea.stories.d.ts +0 -9
- package/lib/components/ThemeProvider/CustomThemeProvider.d.ts +0 -8
- package/lib/components/Toast/Toast.stories.d.ts +0 -6
- package/lib/components/Toggle/Toggle.stories.d.ts +0 -12
- package/lib/components/Tooltip/Tooltip.stories.d.ts +0 -15
- package/lib/components/Typography/Typography.stories.d.ts +0 -10
- package/lib/hooks/useCustomThemeProvider.d.ts +0 -11
- package/lib/utils/checkEmpty/checkEmpty.stories.d.ts +0 -6
- package/lib/utils/compareArrays/compareArrays.stories.d.ts +0 -6
- package/lib/utils/compareObjects/compareObjects.stories.d.ts +0 -6
- package/lib/utils/debounce/debounce.stories.d.ts +0 -6
- package/lib/utils/ffID/ffID.stories.d.ts +0 -6
- package/lib/utils/find/findAndInsert.d.ts +0 -7
- package/lib/utils/find/findAndInsert.stories.d.ts +0 -7
- package/lib/utils/getExtension/getExtension.stories.d.ts +0 -6
- package/lib/utils/throttle/throttle.stories.d.ts +0 -6
- package/lib/utils/truncateText/truncateText.stories.d.ts +0 -6
@@ -736,5 +736,65 @@ export const normalModalFollowedByIcon = () => {
|
|
736
736
|
</div>
|
737
737
|
);
|
738
738
|
};
|
739
|
+
export const NormalModalWithLoop = () => {
|
740
|
+
const { currentModal, openModal, closeModal } = useModal();
|
741
|
+
|
742
|
+
const modelItems = ['one', 'two', 'three', 'four'];
|
743
|
+
const structuredArray = modelItems.map((value, index) => ({
|
744
|
+
id: `${index + 1}`,
|
745
|
+
value: value,
|
746
|
+
}));
|
747
|
+
|
748
|
+
const buttonRefs = useRef<(HTMLButtonElement | null)[]>([]);
|
749
|
+
|
750
|
+
const getButtonPosition = (index: number) => {
|
751
|
+
const button = buttonRefs.current[index];
|
752
|
+
if (button) {
|
753
|
+
const { top, left, height } = button.getBoundingClientRect();
|
754
|
+
return { top: top + height, left };
|
755
|
+
}
|
756
|
+
return { top: 0, left: 0 };
|
757
|
+
};
|
739
758
|
|
759
|
+
return (
|
760
|
+
<div className="ff-mini-modal-loop">
|
761
|
+
{structuredArray.map((data, index) => (
|
762
|
+
<div key={data.id} className="ff-mini-modal-loop-div">
|
763
|
+
<p>{data.value}</p>
|
764
|
+
<Button
|
765
|
+
variant="primary"
|
766
|
+
ref={(el) => (buttonRefs.current[index] = el)}
|
767
|
+
onClick={() => openModal(Number(data.id))}
|
768
|
+
id={data.id}
|
769
|
+
label={data.id}
|
770
|
+
/>
|
771
|
+
|
772
|
+
{currentModal === Number(data.id) && (
|
773
|
+
<MiniModal
|
774
|
+
id={data.id}
|
775
|
+
modalProperties={{
|
776
|
+
width: 168,
|
777
|
+
height: 108,
|
778
|
+
top: getButtonPosition(index).top,
|
779
|
+
left: getButtonPosition(index).left,
|
780
|
+
}}
|
781
|
+
overlay={{
|
782
|
+
isOverlay: true,
|
783
|
+
zIndexOverlay: 99,
|
784
|
+
}}
|
785
|
+
childContent={
|
786
|
+
<Typography as="p">
|
787
|
+
This is some content inside the modal for {data.value}.
|
788
|
+
</Typography>
|
789
|
+
}
|
790
|
+
isIconModel={true}
|
791
|
+
isAnimated={true}
|
792
|
+
outSideClick={closeModal}
|
793
|
+
/>
|
794
|
+
)}
|
795
|
+
</div>
|
796
|
+
))}
|
797
|
+
</div>
|
798
|
+
);
|
799
|
+
};
|
740
800
|
export default meta;
|
@@ -13,7 +13,8 @@ export interface MiniEditModalProps {
|
|
13
13
|
/**
|
14
14
|
* A reference to the button element that triggers the modal.
|
15
15
|
*/
|
16
|
-
anchorRef
|
16
|
+
anchorRef?: RefObject<HTMLButtonElement> | string;
|
17
|
+
id?: string | number;
|
17
18
|
/**
|
18
19
|
* Optional properties for configuring the modal header.
|
19
20
|
*/
|
@@ -44,6 +44,11 @@ export const Primary: Story = {
|
|
44
44
|
value: 'fire-flink-LIC4999',
|
45
45
|
name: 'lambda test',
|
46
46
|
},
|
47
|
+
{
|
48
|
+
label: 'fire-flink-LIC4999',
|
49
|
+
value: 'fire-flink-LIC4999',
|
50
|
+
name: 'lambda test',
|
51
|
+
},
|
47
52
|
],
|
48
53
|
},
|
49
54
|
};
|
@@ -160,6 +165,22 @@ export const OptionSelection: Story = {
|
|
160
165
|
label: 'fire-flink-LIC4999',
|
161
166
|
value: 'fire-flink-LIC4999',
|
162
167
|
},
|
168
|
+
{
|
169
|
+
label: 'fire-flink-LIC4999',
|
170
|
+
value: 'fire-flink-LIC4999',
|
171
|
+
},
|
172
|
+
{
|
173
|
+
label: 'fire-flink-LIC4999',
|
174
|
+
value: 'fire-flink-LIC4999',
|
175
|
+
},
|
176
|
+
{
|
177
|
+
label: 'fire-flink-LIC4999',
|
178
|
+
value: 'fire-flink-LIC4999',
|
179
|
+
},
|
180
|
+
{
|
181
|
+
label: 'fire-flink-LIC4999',
|
182
|
+
value: 'fire-flink-LIC4999',
|
183
|
+
},
|
163
184
|
];
|
164
185
|
|
165
186
|
const [selectedOption, setSelectedOption] = useState<Option>({
|
@@ -412,10 +433,23 @@ export const SelectWithToolTip: Story = {
|
|
412
433
|
label: 'fire-flink-LIC4937',
|
413
434
|
value: 'fire-flink-LIC4937',
|
414
435
|
},
|
436
|
+
{
|
437
|
+
label: 'fire-flink-LIC5937',
|
438
|
+
value: 'fire-flink-LIC5937',
|
439
|
+
},
|
440
|
+
{
|
441
|
+
label: 'fire-flink-LIC6937',
|
442
|
+
value: 'fire-flink-LIC6937',
|
443
|
+
},
|
444
|
+
{
|
445
|
+
label: 'fire-flink-LIC7937',
|
446
|
+
value: 'fire-flink-LIC7937',
|
447
|
+
},
|
415
448
|
{
|
416
449
|
label: 'fire-flink-LIC4999',
|
417
450
|
value: 'fire-flink-LIC4999',
|
418
|
-
|
451
|
+
recurrence: true,
|
452
|
+
},
|
419
453
|
];
|
420
454
|
|
421
455
|
const [selectedOption, setSelectedOption] = useState<Option>({
|
@@ -427,6 +461,12 @@ export const SelectWithToolTip: Story = {
|
|
427
461
|
setSelectedOption(option);
|
428
462
|
};
|
429
463
|
|
464
|
+
const getMiniModalJSX = () => (
|
465
|
+
<>
|
466
|
+
<h1>Test Mini Modal</h1>
|
467
|
+
</>
|
468
|
+
);
|
469
|
+
|
430
470
|
return (
|
431
471
|
<Select
|
432
472
|
optionsList={optionsList}
|
@@ -434,6 +474,8 @@ export const SelectWithToolTip: Story = {
|
|
434
474
|
onChange={handleChange}
|
435
475
|
label="Select Option"
|
436
476
|
showToolTip={true}
|
477
|
+
modalJSXProps={getMiniModalJSX()}
|
478
|
+
recurrence
|
437
479
|
/>
|
438
480
|
);
|
439
481
|
},
|
@@ -34,10 +34,15 @@ const Select: FC<SelectProps> = ({
|
|
34
34
|
showIcon = false,
|
35
35
|
placeHolder = '',
|
36
36
|
showToolTip = false,
|
37
|
+
onCancelModal = () => {},
|
38
|
+
onSaveModal = () => {},
|
39
|
+
modalJSXProps = <></>,
|
40
|
+
recurrence = false,
|
37
41
|
}) => {
|
38
42
|
const selectWidth = typeof width === 'number' ? `${width}px` : width;
|
39
43
|
|
40
44
|
const [showDropdownOptions, setShowDropdownOptions] = useState(false);
|
45
|
+
const [customRecurrence, setCustomRecurrence] = useState(false);
|
41
46
|
const [searchedOption, setSearchedOption] = useState<any>({
|
42
47
|
searchedText: '',
|
43
48
|
searchedIcon: '',
|
@@ -124,12 +129,14 @@ const Select: FC<SelectProps> = ({
|
|
124
129
|
searchedIcon: selectedOption.iconName,
|
125
130
|
});
|
126
131
|
setSelectOptionList(optionsList);
|
132
|
+
setCustomRecurrence(false);
|
127
133
|
onBlur();
|
128
134
|
};
|
129
135
|
|
130
136
|
const onSelectOptionSelector = (option: Option): void => {
|
131
137
|
if (disabled) return;
|
132
|
-
|
138
|
+
const isCustomRecurrence = option?.recurrence || false;
|
139
|
+
setCustomRecurrence(isCustomRecurrence);
|
133
140
|
setSearchedOption({
|
134
141
|
searchedText: getValue(selectedOption, valueAccessor),
|
135
142
|
searchedIcon: selectedOption.iconName,
|
@@ -137,6 +144,9 @@ const Select: FC<SelectProps> = ({
|
|
137
144
|
if (onChange) {
|
138
145
|
onChange(option);
|
139
146
|
}
|
147
|
+
if (!isCustomRecurrence) {
|
148
|
+
onSelectBlur();
|
149
|
+
}
|
140
150
|
};
|
141
151
|
|
142
152
|
const handleResizeOrScroll = () => onSelectUpdatePosition();
|
@@ -277,6 +287,11 @@ const Select: FC<SelectProps> = ({
|
|
277
287
|
selectedOption={searchedText}
|
278
288
|
showIcon={showIcon}
|
279
289
|
showToolTip={showToolTip}
|
290
|
+
customReccurenece={customRecurrence}
|
291
|
+
onSaveModal={onSaveModal}
|
292
|
+
onCancelModal={onCancelModal}
|
293
|
+
modalJSXProps={modalJSXProps}
|
294
|
+
recurrence={recurrence}
|
280
295
|
/>,
|
281
296
|
document.body
|
282
297
|
)}
|
@@ -1,4 +1,5 @@
|
|
1
|
-
.ff-select-dropdown-wrapper
|
1
|
+
.ff-select-dropdown-wrapper,
|
2
|
+
.ff-select-dropdown-mini-modal-wrapper {
|
2
3
|
max-height: 160px;
|
3
4
|
z-index: 999999;
|
4
5
|
position: absolute;
|
@@ -59,3 +60,42 @@
|
|
59
60
|
cursor: not-allowed;
|
60
61
|
}
|
61
62
|
}
|
63
|
+
|
64
|
+
.ff-select-dropdown-modal-wrapper {
|
65
|
+
max-height: 256px;
|
66
|
+
}
|
67
|
+
|
68
|
+
.ff-select-dropdown-mini-modal-wrapper {
|
69
|
+
display: flex;
|
70
|
+
justify-content: space-between;
|
71
|
+
|
72
|
+
.ff-select-label-minimodal-wrapper {
|
73
|
+
width: calc(50% - 4px);
|
74
|
+
}
|
75
|
+
.ff-select-mini-modal-wrapper {
|
76
|
+
width: 50%;
|
77
|
+
padding: 8px 2px 0px 4px;
|
78
|
+
display: flex;
|
79
|
+
align-items: flex-end;
|
80
|
+
margin-left: 4px;
|
81
|
+
border-left: 1px dashed var(--border-color);
|
82
|
+
|
83
|
+
.ff-select-modal-wrapper {
|
84
|
+
height: fit-content;
|
85
|
+
width: calc(100% - 4px);
|
86
|
+
border-radius: 8px;
|
87
|
+
border: 1px solid var(--ff-select-background-color);
|
88
|
+
box-shadow: 0px 1px 8px 0px var(--ff-select-option-wrapper-box-shadow);
|
89
|
+
border: 1px solid var(--border-color);
|
90
|
+
|
91
|
+
.ff-select-mini-modal-footer {
|
92
|
+
min-height: 32px;
|
93
|
+
border-top: 1px solid var(--border-color);
|
94
|
+
display: flex;
|
95
|
+
align-items: center;
|
96
|
+
justify-content: flex-end;
|
97
|
+
gap: 8px;
|
98
|
+
}
|
99
|
+
}
|
100
|
+
}
|
101
|
+
}
|
@@ -6,12 +6,11 @@ import Typography from '../../Typography';
|
|
6
6
|
import { ffid } from '../../../utils/ffID/ffid';
|
7
7
|
import { ThemeContext } from '../../ThemeProvider/ThemeProvider';
|
8
8
|
import classNames from 'classnames';
|
9
|
-
import {
|
10
|
-
getLabel,
|
11
|
-
} from '../../../utils/getSelectOptionValue/getSelectOptionValue';
|
9
|
+
import { getLabel } from '../../../utils/getSelectOptionValue/getSelectOptionValue';
|
12
10
|
import useClickOutside from '../../../hooks/useClickOutside';
|
13
11
|
import Icon from '../../Icon';
|
14
12
|
import Tooltip from '../../Tooltip';
|
13
|
+
import Button from '../../Button';
|
15
14
|
|
16
15
|
const Dropdown: FC<DropdownProps> = ({
|
17
16
|
options = [],
|
@@ -27,12 +26,22 @@ const Dropdown: FC<DropdownProps> = ({
|
|
27
26
|
valueAccessor,
|
28
27
|
showIcon = false,
|
29
28
|
showToolTip = false,
|
29
|
+
customReccurenece = true,
|
30
|
+
onCancelModal = () => {},
|
31
|
+
onSaveModal = () => {},
|
32
|
+
recurrence = false,
|
33
|
+
modalJSXProps = <></>,
|
30
34
|
}) => {
|
31
35
|
const themeContext = useContext(ThemeContext);
|
32
36
|
const currentTheme = themeContext?.currentTheme;
|
33
37
|
|
38
|
+
const customRecurrenceOnBlur = customReccurenece ? () => {} : onSelectBlur;
|
39
|
+
|
34
40
|
const optionsWrapperRef = useRef<HTMLDivElement>(null);
|
35
|
-
useClickOutside(optionsWrapperRef,
|
41
|
+
useClickOutside(optionsWrapperRef, customRecurrenceOnBlur, [
|
42
|
+
inputRef,
|
43
|
+
selectArrowRef,
|
44
|
+
]);
|
36
45
|
|
37
46
|
const { positionX, positionY, fromBottom, width } = dropdownPosition;
|
38
47
|
const { margin, optionHeight, selectInputHeight, dropDownWrapperPadding } =
|
@@ -98,13 +107,30 @@ const Dropdown: FC<DropdownProps> = ({
|
|
98
107
|
);
|
99
108
|
};
|
100
109
|
|
110
|
+
const onHandleCancelModal = () => {
|
111
|
+
onSelectBlur();
|
112
|
+
onCancelModal();
|
113
|
+
};
|
114
|
+
|
115
|
+
const onHandleSaveModal = () => {
|
116
|
+
onSelectBlur();
|
117
|
+
onSaveModal();
|
118
|
+
};
|
119
|
+
|
101
120
|
return (
|
102
121
|
<div
|
103
|
-
className={classNames('ff-select-dropdown-wrapper', currentTheme
|
122
|
+
className={classNames('ff-select-dropdown-wrapper', currentTheme, {
|
123
|
+
'ff-select-dropdown-modal-wrapper': recurrence,
|
124
|
+
'ff-select-dropdown-mini-modal-wrapper': customReccurenece,
|
125
|
+
})}
|
104
126
|
ref={optionsWrapperRef}
|
105
127
|
style={updateDropdownPosition()}
|
106
128
|
>
|
107
|
-
<div
|
129
|
+
<div
|
130
|
+
className={classNames({
|
131
|
+
'ff-select-label-minimodal-wrapper': customReccurenece,
|
132
|
+
})}
|
133
|
+
>
|
108
134
|
{!checkEmpty(options) ? (
|
109
135
|
options.map((option) => (
|
110
136
|
<div
|
@@ -140,6 +166,26 @@ const Dropdown: FC<DropdownProps> = ({
|
|
140
166
|
</Typography>
|
141
167
|
)}
|
142
168
|
</div>
|
169
|
+
|
170
|
+
{customReccurenece && (
|
171
|
+
<div className="ff-select-mini-modal-wrapper" id="ff-select-mini-id">
|
172
|
+
<div className="ff-select-modal-wrapper">
|
173
|
+
{<>{modalJSXProps}</>}
|
174
|
+
<div className="ff-select-mini-modal-footer">
|
175
|
+
<Button
|
176
|
+
label="Cancel"
|
177
|
+
variant="tertiary"
|
178
|
+
onClick={onHandleCancelModal}
|
179
|
+
/>
|
180
|
+
<Button
|
181
|
+
label="Save"
|
182
|
+
variant="secondary"
|
183
|
+
onClick={onHandleSaveModal}
|
184
|
+
/>
|
185
|
+
</div>
|
186
|
+
</div>
|
187
|
+
</div>
|
188
|
+
)}
|
143
189
|
</div>
|
144
190
|
);
|
145
191
|
};
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import { DropdownPosition, Option } from '../types';
|
2
|
-
import { RefObject } from 'react';
|
2
|
+
import { ReactNode, RefObject } from 'react';
|
3
3
|
|
4
4
|
export interface DropdownProps {
|
5
5
|
options: Option[];
|
@@ -14,7 +14,12 @@ export interface DropdownProps {
|
|
14
14
|
heightFromTop: number;
|
15
15
|
selectedOption?: Option;
|
16
16
|
showIcon?: boolean;
|
17
|
-
showToolTip?: boolean
|
17
|
+
showToolTip?: boolean;
|
18
|
+
customReccurenece?: boolean;
|
19
|
+
onCancelModal?: () => void;
|
20
|
+
onSaveModal?: () => void;
|
21
|
+
modalJSXProps?: ReactNode;
|
22
|
+
recurrence?: boolean;
|
18
23
|
}
|
19
24
|
|
20
25
|
export const dropdownDefaultCSSData = {
|
@@ -1,3 +1,5 @@
|
|
1
|
+
import { ReactNode } from 'react';
|
2
|
+
|
1
3
|
export interface SelectProps {
|
2
4
|
/*
|
3
5
|
* Label for the select dropdown
|
@@ -123,6 +125,26 @@ export interface SelectProps {
|
|
123
125
|
* Provide the background color for the select label on the hover state
|
124
126
|
*/
|
125
127
|
labelBackgroundColor?: string;
|
128
|
+
|
129
|
+
/**
|
130
|
+
* To close the modal in the select dropdown
|
131
|
+
*/
|
132
|
+
onCancelModal?: () => void;
|
133
|
+
|
134
|
+
/**
|
135
|
+
* To close the modal in the select dropdown
|
136
|
+
*/
|
137
|
+
onSaveModal?: () => void;
|
138
|
+
|
139
|
+
/**
|
140
|
+
* Pass the custom Jsx for the Modal
|
141
|
+
*/
|
142
|
+
modalJSXProps?: ReactNode;
|
143
|
+
|
144
|
+
/**
|
145
|
+
* Pass the recurrence boolean for the exeception cases
|
146
|
+
*/
|
147
|
+
recurrence?: boolean;
|
126
148
|
}
|
127
149
|
|
128
150
|
export interface DropdownPosition {
|
@@ -21,6 +21,7 @@ export const Primary: Story = {
|
|
21
21
|
label: 'ffe-Mahesh',
|
22
22
|
value: {
|
23
23
|
status: 'running',
|
24
|
+
clientId: 'test',
|
24
25
|
},
|
25
26
|
name: 'ffe-Mahesh',
|
26
27
|
});
|
@@ -33,6 +34,7 @@ export const Primary: Story = {
|
|
33
34
|
status: 'running',
|
34
35
|
},
|
35
36
|
name: 'ffe-Ganesh',
|
37
|
+
clientId: 'test',
|
36
38
|
},
|
37
39
|
{
|
38
40
|
label: 'ffe-Mahesh',
|
@@ -40,6 +42,7 @@ export const Primary: Story = {
|
|
40
42
|
status: 'running',
|
41
43
|
},
|
42
44
|
name: 'ffe-Mahesh',
|
45
|
+
clientId: 'test',
|
43
46
|
},
|
44
47
|
];
|
45
48
|
|
@@ -52,8 +55,10 @@ export const Primary: Story = {
|
|
52
55
|
return (
|
53
56
|
<>
|
54
57
|
<SequentialConnectingBranch
|
55
|
-
projectType="web"
|
56
58
|
dataSetValues={{
|
59
|
+
globalVariableSetName: 'test dev',
|
60
|
+
peVariableSetName: 'test dev',
|
61
|
+
testDataSetName: 'test dev',
|
57
62
|
peVariableSetId: 'Test dev',
|
58
63
|
globalVariableSetId: 'Test dev',
|
59
64
|
testDataSetId: 'Test dev',
|
@@ -64,7 +69,8 @@ export const Primary: Story = {
|
|
64
69
|
machineInstances={[]}
|
65
70
|
selectedMachine={machineSelect}
|
66
71
|
onHandleSelect={onMachineHandleSelect}
|
67
|
-
scriptType="Manual"
|
72
|
+
// scriptType="Manual"
|
73
|
+
readOnly={true}
|
68
74
|
/>
|
69
75
|
</>
|
70
76
|
);
|
package/src/components/SequentialConnectingBranch/components/DatasetTooltip/DataSetTooltip.tsx
CHANGED
@@ -1,5 +1,4 @@
|
|
1
1
|
import { FC } from 'react';
|
2
|
-
import Tooltip from '../../../Tooltip';
|
3
2
|
import Typography from '../../../Typography';
|
4
3
|
import { DataSetTooltipProps } from './types';
|
5
4
|
|
@@ -18,22 +17,18 @@ const DataSetTooltip: FC<DataSetTooltipProps> = ({
|
|
18
17
|
|
19
18
|
return (
|
20
19
|
<>
|
21
|
-
|
22
|
-
{
|
23
|
-
<div
|
24
|
-
<Typography
|
25
|
-
as="div"
|
26
|
-
fontSize={10}
|
27
|
-
lineHeight="15px"
|
28
|
-
>
|
20
|
+
{Object.entries(toolTipTitleValue).map(([key, value], index) => (
|
21
|
+
<div key={index} className='' >
|
22
|
+
<div className='' >
|
23
|
+
<Typography as="div" fontSize={10} lineHeight="15px">
|
29
24
|
{key}
|
30
25
|
</Typography>
|
31
26
|
<Typography as="div" lineHeight="18px">
|
32
27
|
{value}
|
33
28
|
</Typography>
|
34
29
|
</div>
|
35
|
-
|
36
|
-
|
30
|
+
</div>
|
31
|
+
))}
|
37
32
|
</>
|
38
33
|
);
|
39
34
|
};
|
@@ -394,7 +394,7 @@ export const DragAndDropTable: Story = {
|
|
394
394
|
tableDataTextColor: 'var(--brand-color)',
|
395
395
|
},
|
396
396
|
render: () => {
|
397
|
-
|
397
|
+
//! Important prerequisite: tableData should have a unique ID key, which should be either _id or id.
|
398
398
|
const [tableData, setTableData] = useState(
|
399
399
|
sampleData.map((data) => data.project)
|
400
400
|
);
|
@@ -18,6 +18,7 @@ import {
|
|
18
18
|
verticalListSortingStrategy,
|
19
19
|
} from '@dnd-kit/sortable';
|
20
20
|
import { CSS } from '@dnd-kit/utilities';
|
21
|
+
import { useEffect, useRef } from 'react';
|
21
22
|
|
22
23
|
const SortableRow = ({
|
23
24
|
row,
|
@@ -43,7 +44,7 @@ const SortableRow = ({
|
|
43
44
|
<tr
|
44
45
|
ref={setNodeRef}
|
45
46
|
style={style}
|
46
|
-
key={row.id}
|
47
|
+
key={row._id || row.id}
|
47
48
|
className={classNames(tableBodyRowClass, {
|
48
49
|
'disabled-row': row.disabled,
|
49
50
|
})}
|
@@ -115,7 +116,49 @@ const Table = ({
|
|
115
116
|
headerIconOnClick = () => {},
|
116
117
|
draggable = false,
|
117
118
|
onDragEnd,
|
119
|
+
loadMore = () => {},
|
118
120
|
}: TableProps) => {
|
121
|
+
|
122
|
+
const observerRef = useRef<IntersectionObserver | null>(null);
|
123
|
+
|
124
|
+
useEffect(() => {
|
125
|
+
const scrollContainer = document.getElementById(
|
126
|
+
'ff-table-scroll-container'
|
127
|
+
);
|
128
|
+
const firstNode = document.getElementById('ff-table-first-node');
|
129
|
+
const lastNode = document.getElementById('ff-table-last-node');
|
130
|
+
|
131
|
+
// Exit early if data is empty or elements are missing
|
132
|
+
if (!scrollContainer || !firstNode || !lastNode || !data?.length) {
|
133
|
+
return;
|
134
|
+
}
|
135
|
+
|
136
|
+
observerRef.current = new IntersectionObserver(
|
137
|
+
(entries) => {
|
138
|
+
entries.forEach((entry) => {
|
139
|
+
if (entry.isIntersecting) {
|
140
|
+
const direction =
|
141
|
+
entry.target.id === 'ff-table-last-node' ? 'below' : 'above';
|
142
|
+
loadMore(direction);
|
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]);
|
161
|
+
|
119
162
|
const handleOnclick = (column: ColumnsProps, row: DataProps) => {
|
120
163
|
let { onClick, accessor } = column;
|
121
164
|
if (onClick && isFunction(onClick)) {
|
@@ -133,8 +176,12 @@ const Table = ({
|
|
133
176
|
const { active, over } = event;
|
134
177
|
if (!over || active.id === over.id) return;
|
135
178
|
|
136
|
-
const oldIndex = data.findIndex(
|
137
|
-
|
179
|
+
const oldIndex = data.findIndex(
|
180
|
+
(item: any) => item._id === active.id || item.id === active.id
|
181
|
+
);
|
182
|
+
const newIndex = data.findIndex(
|
183
|
+
(item: any) => item._id === over.id || item.id === over.id
|
184
|
+
);
|
138
185
|
|
139
186
|
if (oldIndex === -1 || newIndex === -1) return;
|
140
187
|
if (onDragEnd) onDragEnd(oldIndex, newIndex);
|
@@ -144,11 +191,12 @@ const Table = ({
|
|
144
191
|
<DndContext collisionDetection={closestCorners} onDragEnd={handleDragEnd}>
|
145
192
|
<SortableContext
|
146
193
|
disabled={!draggable}
|
147
|
-
items={data?.map((row: any) => row.id)}
|
194
|
+
items={data?.map((row: any) => row._id || row.id)}
|
148
195
|
strategy={verticalListSortingStrategy}
|
149
196
|
>
|
150
197
|
<div
|
151
198
|
style={{ height: height, position: 'relative' }}
|
199
|
+
id="ff-table-scroll-container"
|
152
200
|
className={classNames(className, {
|
153
201
|
'ff-fixed-header-table': withFixedHeader,
|
154
202
|
'border-borderRadius': borderWithRadius,
|
@@ -212,6 +260,7 @@ const Table = ({
|
|
212
260
|
</tr>
|
213
261
|
</thead>
|
214
262
|
<tbody className="ff-fixed-header-table">
|
263
|
+
<tr id="ff-table-first-node" />
|
215
264
|
{data?.length > 0 &&
|
216
265
|
data?.map((row: any) => (
|
217
266
|
<SortableRow
|
@@ -226,6 +275,8 @@ const Table = ({
|
|
226
275
|
draggable={draggable}
|
227
276
|
/>
|
228
277
|
))}
|
278
|
+
<tr id="ff-table-last-node" />
|
279
|
+
|
229
280
|
</tbody>
|
230
281
|
</table>
|
231
282
|
{data?.length <= 0 && (
|
@@ -128,5 +128,8 @@ export interface TableProps {
|
|
128
128
|
/**
|
129
129
|
* Drag and Drop indexes
|
130
130
|
*/
|
131
|
-
onDragEnd?: (startIndex: number, endIndex: number) => void | undefined
|
131
|
+
onDragEnd?: (startIndex: number, endIndex: number) => void | undefined,
|
132
|
+
|
133
|
+
loadMore?: (_direction?: string) => void;
|
134
|
+
|
132
135
|
}
|