pixel-react 1.9.2 → 1.9.4
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/.yarn/install-state.gz +0 -0
- package/lib/components/Charts/BarChart/BarChart.d.ts +1 -0
- package/lib/components/Charts/MultiRadialChart/types.d.ts +2 -0
- package/lib/components/Table/Table.d.ts +1 -1
- package/lib/components/Table/Types.d.ts +8 -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/data.d.ts +54 -222
- package/lib/components/TableTree/types.d.ts +0 -6
- package/lib/index.d.ts +15 -2
- package/lib/index.esm.js +21314 -21374
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +21319 -21378
- package/lib/index.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/lib/utils/swapArrayItem/dragAndDropUtils.d.ts +1 -0
- package/package.json +1 -1
- package/src/StyleGuide/ColorPalette/colorPaletteList.ts +55 -0
- package/src/assets/Themes/BaseTheme.scss +17 -6
- package/src/assets/Themes/BlueTheme.scss +12 -0
- package/src/assets/Themes/DarkTheme.scss +20 -6
- package/src/assets/icons/approval_pending.svg +8 -8
- package/src/assets/icons/azure.svg +9 -0
- package/src/assets/icons/bitbucket.svg +9 -0
- package/src/assets/icons/configuration.svg +3 -3
- package/src/assets/icons/defects.svg +8 -8
- package/src/assets/icons/element.svg +4 -4
- package/src/assets/icons/github.svg +9 -0
- package/src/assets/icons/gitlab.svg +9 -0
- package/src/assets/icons/jenkins.svg +9 -0
- package/src/assets/icons/jira_logo.svg +9 -0
- package/src/assets/icons/primary_calendar_icon.svg +3 -0
- package/src/assets/icons/project_element.svg +4 -4
- package/src/assets/icons/slack.svg +9 -0
- package/src/assets/icons/step_group.svg +10 -10
- package/src/assets/icons/variable.svg +3 -3
- package/src/assets/icons/web_service_icon.svg +3 -3
- package/src/components/Charts/BarChart/BarChart.stories.tsx +2 -1
- package/src/components/Charts/BarChart/BarChart.tsx +6 -2
- package/src/components/Charts/MultiRadialChart/MultiRadialChart.scss +0 -2
- package/src/components/Charts/MultiRadialChart/MultiRadialChart.stories.tsx +7 -1
- package/src/components/Charts/MultiRadialChart/MultiRadialChart.tsx +5 -2
- package/src/components/Charts/MultiRadialChart/types.ts +2 -0
- package/src/components/DatePicker/DatePicker.scss +379 -632
- package/src/components/DatePicker/DatePicker.tsx +130 -98
- package/src/components/DatePicker/Timepicker.tsx +1 -13
- package/src/components/Icon/iconList.ts +16 -0
- package/src/components/Table/Table.scss +44 -11
- package/src/components/Table/Table.stories.tsx +60 -1
- package/src/components/Table/Table.tsx +190 -123
- package/src/components/Table/Types.ts +8 -0
- package/src/components/TableTree/Components/TableBody.tsx +17 -19
- package/src/components/TableTree/Components/TableCell.tsx +4 -7
- package/src/components/TableTree/Components/TableRow.tsx +4 -7
- package/src/components/TableTree/TableTree.stories.tsx +10 -10
- package/src/components/TableTree/TableTree.tsx +1 -1
- package/src/components/TableTree/data.ts +53 -331
- package/src/components/TableTree/types.ts +0 -6
- package/src/components/TextArea/Textarea.scss +24 -6
- package/src/index.ts +3 -1
- package/src/utils/swapArrayItem/dragAndDropUtils.ts +11 -0
- package/lib/1fb4472b34e4fe07.css +0 -1
- package/lib/StyleGuide/ColorPalette/ColorPalette.stories.d.ts +0 -6
- package/lib/StyleGuide/Typography/Typography.stories.d.ts +0 -6
- package/lib/assets/fonts/Poppins-Bold.ttf +0 -0
- package/lib/assets/fonts/Poppins-Medium.ttf +0 -0
- package/lib/assets/fonts/Poppins-Regular.ttf +0 -0
- package/lib/assets/fonts/Poppins-SemiBold.ttf +0 -0
- package/lib/components/Accordion/Accordion.stories.d.ts +0 -6
- package/lib/components/AddButton/AddButton.d.ts +0 -5
- package/lib/components/AddButton/AddButton.stories.d.ts +0 -6
- package/lib/components/AddButton/index.d.ts +0 -1
- package/lib/components/AddButton/types.d.ts +0 -4
- package/lib/components/AddResourceButton/AddButton.stories.d.ts +0 -8
- package/lib/components/AddVariables/AddVariables.d.ts +0 -5
- package/lib/components/AddVariables/index.d.ts +0 -1
- package/lib/components/AddVariables/types.d.ts +0 -35
- package/lib/components/AllProjectsDropdown/AllProjectsDropdown.stories.d.ts +0 -7
- package/lib/components/AppHeader/AppHeader.stories.d.ts +0 -7
- package/lib/components/AttachImage/AttachImage.stories.d.ts +0 -7
- package/lib/components/AttachmentButton/AttachmentButton.stories.d.ts +0 -9
- package/lib/components/Avatar/Avatar.stories.d.ts +0 -10
- package/lib/components/Button/Button.stories.d.ts +0 -13
- package/lib/components/Charts/BarChart/BarChart.stories.d.ts +0 -6
- package/lib/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.d.ts +0 -7
- package/lib/components/Charts/DonutChart/DonutChart.stories.d.ts +0 -6
- package/lib/components/Charts/IconRadialChart/IconRadialChart.stories.d.ts +0 -8
- package/lib/components/Charts/LineChart/LineChart.stories.d.ts +0 -7
- package/lib/components/Charts/MultiRadialChart/MultiRadialChart.stories.d.ts +0 -8
- package/lib/components/Charts/PieChart/PieChart.stories.d.ts +0 -7
- 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/ConnectingBranch/ConnectingBranch.stories.d.ts +0 -6
- 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 -12
- package/lib/components/EditTextField/EditTextField.stories.d.ts +0 -10
- package/lib/components/Editor/Editor.stories.d.ts +0 -6
- package/lib/components/Excel/ContextMenu/ContextMenu.d.ts +0 -4
- package/lib/components/Excel/ExcelFile.stories.d.ts +0 -6
- package/lib/components/ExcelFile/ChangeExcelStyles.d.ts +0 -14
- package/lib/components/ExcelFile/ColorBarSelector/ColorBarSelector.d.ts +0 -8
- package/lib/components/ExcelFile/ContextMenu/ContextMenu.d.ts +0 -4
- package/lib/components/ExcelFile/ExcelFile/Excel/ActiveCell.d.ts +0 -7
- package/lib/components/ExcelFile/ExcelFile/Excel/Cell.d.ts +0 -4
- package/lib/components/ExcelFile/ExcelFile/Excel/ColumnIndicator.d.ts +0 -5
- package/lib/components/ExcelFile/ExcelFile/Excel/Copied.d.ts +0 -3
- package/lib/components/ExcelFile/ExcelFile/Excel/CornerIndicator.d.ts +0 -5
- package/lib/components/ExcelFile/ExcelFile/Excel/DataEditor.d.ts +0 -5
- package/lib/components/ExcelFile/ExcelFile/Excel/DataViewer.d.ts +0 -8
- package/lib/components/ExcelFile/ExcelFile/Excel/FloatingRect.d.ts +0 -10
- package/lib/components/ExcelFile/ExcelFile/Excel/HeaderRow.d.ts +0 -3
- package/lib/components/ExcelFile/ExcelFile/Excel/Row.d.ts +0 -3
- package/lib/components/ExcelFile/ExcelFile/Excel/RowIndicator.d.ts +0 -5
- package/lib/components/ExcelFile/ExcelFile/Excel/Selected.d.ts +0 -3
- package/lib/components/ExcelFile/ExcelFile/Excel/Spreadsheet.d.ts +0 -80
- package/lib/components/ExcelFile/ExcelFile/Excel/Table.d.ts +0 -3
- package/lib/components/ExcelFile/ExcelFile/Excel/actions.d.ts +0 -174
- package/lib/components/ExcelFile/ExcelFile/Excel/areModelsEqual.d.ts +0 -1
- package/lib/components/ExcelFile/ExcelFile/Excel/context.d.ts +0 -8
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/engine.d.ts +0 -22
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/formula.d.ts +0 -17
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/index.d.ts +0 -2
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-graph.d.ts +0 -21
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-hash.d.ts +0 -3
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-set.d.ts +0 -24
- package/lib/components/ExcelFile/ExcelFile/Excel/index.d.ts +0 -13
- package/lib/components/ExcelFile/ExcelFile/Excel/matrix.d.ts +0 -67
- package/lib/components/ExcelFile/ExcelFile/Excel/point-range.d.ts +0 -22
- package/lib/components/ExcelFile/ExcelFile/Excel/point.d.ts +0 -11
- package/lib/components/ExcelFile/ExcelFile/Excel/reducer.d.ts +0 -27
- package/lib/components/ExcelFile/ExcelFile/Excel/selection.d.ts +0 -95
- package/lib/components/ExcelFile/ExcelFile/Excel/types.d.ts +0 -178
- package/lib/components/ExcelFile/ExcelFile/Excel/use-dispatch.d.ts +0 -3
- package/lib/components/ExcelFile/ExcelFile/Excel/use-selector.d.ts +0 -3
- package/lib/components/ExcelFile/ExcelFile/Excel/util.d.ts +0 -44
- package/lib/components/ExcelFile/ExcelFile/ExcelFile.d.ts +0 -19
- package/lib/components/ExcelFile/ExcelFile.stories.d.ts +0 -6
- package/lib/components/ExcelFile/ExcelSheetBar/ExcelSheetBar.d.ts +0 -12
- package/lib/components/ExcelFile/ExcelToolBar/ExcelToolBar.d.ts +0 -15
- package/lib/components/ExcelFile/ImportExcelStyles.d.ts +0 -24
- package/lib/components/ExcelFile/Types.d.ts +0 -129
- package/lib/components/ExcelFile/index.d.ts +0 -1
- package/lib/components/ExpandableMenu/ExpandableMenu.stories.d.ts +0 -7
- package/lib/components/FF_Captcha/captcha.stories.d.ts +0 -8
- package/lib/components/FileDropzone/FileDropzone.stories.d.ts +0 -8
- package/lib/components/Form/Form.stories.d.ts +0 -7
- 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 -8
- package/lib/components/IconButton/IconButton.stories.d.ts +0 -7
- package/lib/components/IconRadioGroup/IconRadioGroup.stories.d.ts +0 -7
- package/lib/components/Input/Input.stories.d.ts +0 -9
- package/lib/components/InputWithDropdown/InputWithDropdown.stories.d.ts +0 -9
- package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts +0 -13
- package/lib/components/LazyLoad/LazyLoad.stories.d.ts +0 -6
- package/lib/components/MachineInputField/MachineInputField.stories.d.ts +0 -6
- package/lib/components/MenuOption/MenuOption.stories.d.ts +0 -16
- package/lib/components/MiniModal/MiniModal.stories.d.ts +0 -10
- package/lib/components/Modal/Modal.stories.d.ts +0 -7
- package/lib/components/ModulesChip/ModuleChip.stories.d.ts +0 -6
- package/lib/components/MultiSelect/MultiSelect.stories.d.ts +0 -11
- package/lib/components/NLPInput/NlpInput.stories.d.ts +0 -7
- package/lib/components/NLPInput/type.d.ts +0 -70
- package/lib/components/Paper/Paper.stories.d.ts +0 -11
- package/lib/components/RadioButton/RadioButton.stories.d.ts +0 -10
- package/lib/components/RadioGroup/RadioGroup.stories.d.ts +0 -9
- package/lib/components/Search/Search.stories.d.ts +0 -6
- package/lib/components/Select/Select.stories.d.ts +0 -14
- package/lib/components/Select/components/Dropdown/Dropdown.d.ts +0 -4
- package/lib/components/Select/components/Dropdown/dropdownTypes.d.ts +0 -17
- package/lib/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.d.ts +0 -6
- 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/StatusCard/StatusCard.stories.d.ts +0 -11
- package/lib/components/Table/Table.stories.d.ts +0 -13
- 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/Toast/Toast.stories.d.ts +0 -6
- package/lib/components/Toastify/Toastify.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/components/VariableInput/VariableInput.stories.d.ts +0 -6
- 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/findAndInsert/findAndInsert.stories.d.ts +0 -7
- package/lib/utils/getEncryptedData/getEncryptedData.stories.d.ts +0 -6
- package/lib/utils/getExtension/getExtension.stories.d.ts +0 -6
- package/lib/utils/getSequentialPayload/getSequentialPayload.stories.d.ts +0 -10
- package/lib/utils/throttle/throttle.stories.d.ts +0 -6
- package/lib/utils/truncateText/truncateText.stories.d.ts +0 -6
@@ -11,14 +11,93 @@ import { prepareData } from '../../utils/TableCell/TableCell';
|
|
11
11
|
import Checkbox from '../Checkbox';
|
12
12
|
import Typography from '../Typography';
|
13
13
|
import Icon from '../Icon';
|
14
|
+
import { closestCorners, DndContext, DragEndEvent } from '@dnd-kit/core';
|
15
|
+
import {
|
16
|
+
SortableContext,
|
17
|
+
useSortable,
|
18
|
+
verticalListSortingStrategy,
|
19
|
+
} from '@dnd-kit/sortable';
|
20
|
+
import { CSS } from '@dnd-kit/utilities';
|
21
|
+
|
22
|
+
const SortableRow = ({
|
23
|
+
row,
|
24
|
+
columns,
|
25
|
+
tableBodyRowClass,
|
26
|
+
handleOnclick,
|
27
|
+
tableDataTextColor,
|
28
|
+
withCheckbox,
|
29
|
+
onSelectClick,
|
30
|
+
draggable,
|
31
|
+
}: any) => {
|
32
|
+
const { attributes, listeners, setNodeRef, transform, transition } =
|
33
|
+
useSortable({
|
34
|
+
id: row.id,
|
35
|
+
disabled: row.disabled,
|
36
|
+
});
|
14
37
|
|
15
|
-
|
38
|
+
const style = {
|
39
|
+
transform: CSS.Transform.toString(transform),
|
40
|
+
transition,
|
41
|
+
};
|
42
|
+
return (
|
43
|
+
<tr
|
44
|
+
ref={setNodeRef}
|
45
|
+
style={style}
|
46
|
+
key={row.id}
|
47
|
+
className={classNames(tableBodyRowClass, {
|
48
|
+
'disabled-row': row.disabled,
|
49
|
+
})}
|
50
|
+
>
|
51
|
+
{columns.map((column: any, index: number) => {
|
52
|
+
return (
|
53
|
+
<td
|
54
|
+
key={column.accessor + index}
|
55
|
+
onClick={() => handleOnclick(column, row)}
|
56
|
+
className={classNames(column.className, {
|
57
|
+
'clickable-cell': column.onClick,
|
58
|
+
})}
|
59
|
+
>
|
60
|
+
<Typography
|
61
|
+
as="div"
|
62
|
+
color={tableDataTextColor}
|
63
|
+
className="ff-data-checkbox-container"
|
64
|
+
>
|
65
|
+
{index === 0 && withCheckbox && (
|
66
|
+
<span className="ff-table-checkbox">
|
67
|
+
<Checkbox
|
68
|
+
onChange={(e) => {
|
69
|
+
onSelectClick(e, row);
|
70
|
+
}}
|
71
|
+
checked={row.checked}
|
72
|
+
disabled={!!row.disabled}
|
73
|
+
/>
|
74
|
+
</span>
|
75
|
+
)}
|
76
|
+
{index === 0 && draggable && (
|
77
|
+
<span
|
78
|
+
className={
|
79
|
+
row.disabled ? 'ff-table-drag' : 'ff-table-drag-icon'
|
80
|
+
}
|
81
|
+
{...listeners}
|
82
|
+
{...attributes}
|
83
|
+
>
|
84
|
+
<Icon name="drag" />
|
85
|
+
</span>
|
86
|
+
)}
|
87
|
+
{prepareData(row, column)}
|
88
|
+
</Typography>
|
89
|
+
</td>
|
90
|
+
);
|
91
|
+
})}
|
92
|
+
</tr>
|
93
|
+
);
|
94
|
+
};
|
16
95
|
|
17
96
|
const Table = ({
|
18
97
|
data = [],
|
19
98
|
columns = [],
|
20
99
|
headerType,
|
21
|
-
withCheckbox,
|
100
|
+
withCheckbox = false,
|
22
101
|
onSelect,
|
23
102
|
allSelected,
|
24
103
|
partialSelected = false,
|
@@ -26,8 +105,6 @@ const Table = ({
|
|
26
105
|
borderWithRadius = false,
|
27
106
|
headerCheckboxDisabled = false,
|
28
107
|
noDataContent,
|
29
|
-
// noDataImage,
|
30
|
-
// noDataImageSize,
|
31
108
|
height = '100%',
|
32
109
|
className = '',
|
33
110
|
tableHeadClass = '',
|
@@ -36,143 +113,133 @@ const Table = ({
|
|
36
113
|
tableDataTextColor,
|
37
114
|
headerIconName = '',
|
38
115
|
headerIconOnClick = () => {},
|
116
|
+
draggable = false,
|
117
|
+
onDragEnd,
|
39
118
|
}: TableProps) => {
|
40
|
-
const
|
119
|
+
const handleOnclick = (column: ColumnsProps, row: DataProps) => {
|
41
120
|
let { onClick, accessor } = column;
|
42
121
|
if (onClick && isFunction(onClick)) {
|
43
122
|
onClick(accessor, row);
|
44
123
|
}
|
45
124
|
};
|
125
|
+
|
46
126
|
const onSelectClick = (e: object, item: SelectedItemProps) => {
|
47
127
|
if (onSelect) {
|
48
128
|
onSelect(e, item);
|
49
129
|
}
|
50
130
|
};
|
51
131
|
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
className={classNames(className, {
|
56
|
-
'ff-fixed-header-table': withFixedHeader,
|
57
|
-
'border-borderRadius': borderWithRadius,
|
58
|
-
})}
|
59
|
-
>
|
60
|
-
{/* {iconContainer ? iconContainer : ''} */}
|
61
|
-
<div className="ff-table-icon">
|
62
|
-
<Icon
|
63
|
-
height={14}
|
64
|
-
width={14}
|
65
|
-
name={headerIconName}
|
66
|
-
onClick={headerIconOnClick}
|
67
|
-
></Icon>
|
68
|
-
</div>
|
132
|
+
const handleDragEnd = (event: DragEndEvent) => {
|
133
|
+
const { active, over } = event;
|
134
|
+
if (!over || active.id === over.id) return;
|
69
135
|
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
136
|
+
const oldIndex = data.findIndex((item: any) => item.id === active.id);
|
137
|
+
const newIndex = data.findIndex((item: any) => item.id === over.id);
|
138
|
+
|
139
|
+
if (oldIndex === -1 || newIndex === -1) return;
|
140
|
+
if (onDragEnd) onDragEnd(oldIndex, newIndex);
|
141
|
+
};
|
142
|
+
|
143
|
+
return (
|
144
|
+
<DndContext collisionDetection={closestCorners} onDragEnd={handleDragEnd}>
|
145
|
+
<SortableContext
|
146
|
+
disabled={!draggable}
|
147
|
+
items={data?.map((row: any) => row.id)}
|
148
|
+
strategy={verticalListSortingStrategy}
|
149
|
+
>
|
150
|
+
<div
|
151
|
+
style={{ height: height, position: 'relative' }}
|
152
|
+
className={classNames(className, {
|
153
|
+
'ff-fixed-header-table': withFixedHeader,
|
154
|
+
'border-borderRadius': borderWithRadius,
|
155
|
+
})}
|
78
156
|
>
|
79
|
-
<
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
key={column.header}
|
88
|
-
style={{ width: column?.width }}
|
89
|
-
>
|
90
|
-
<Typography
|
91
|
-
as="div"
|
92
|
-
fontSize={12}
|
93
|
-
fontWeight="semi-bold"
|
94
|
-
className="ff-label-checkbox-container"
|
95
|
-
>
|
96
|
-
{index === 0 && withCheckbox && (
|
97
|
-
<span className="ff-table-checkbox">
|
98
|
-
<Checkbox
|
99
|
-
onChange={(e) => {
|
100
|
-
onSelectClick(e, { allSelected: e.target.checked });
|
101
|
-
}}
|
102
|
-
checked={
|
103
|
-
allSelected !== undefined ? allSelected : false
|
104
|
-
}
|
105
|
-
partial={!!partialSelected}
|
106
|
-
disabled={headerCheckboxDisabled}
|
107
|
-
/>
|
108
|
-
</span>
|
109
|
-
)}
|
157
|
+
<div className="ff-table-icon">
|
158
|
+
<Icon
|
159
|
+
height={14}
|
160
|
+
width={14}
|
161
|
+
name={headerIconName}
|
162
|
+
onClick={headerIconOnClick}
|
163
|
+
/>
|
164
|
+
</div>
|
110
165
|
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
<tr
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
166
|
+
<table className={classNames(`ff-table`)} cellSpacing={0}>
|
167
|
+
<thead
|
168
|
+
className={classNames(
|
169
|
+
{
|
170
|
+
'ff-fixed-header': withFixedHeader,
|
171
|
+
},
|
172
|
+
tableHeadClass
|
173
|
+
)}
|
174
|
+
>
|
175
|
+
<tr>
|
176
|
+
{/* columns.map((column, index) */}
|
177
|
+
{columns.map((column, index) => (
|
178
|
+
<th
|
179
|
+
className={classNames(
|
180
|
+
`${headerType && `${headerType}-bg`}`,
|
181
|
+
`${headerTextColor && `${headerTextColor}-color`}`
|
182
|
+
)}
|
183
|
+
key={column.header}
|
184
|
+
style={{ width: column?.width }}
|
185
|
+
>
|
186
|
+
<Typography
|
187
|
+
as="div"
|
188
|
+
fontWeight="semi-bold"
|
189
|
+
className="ff-label-checkbox-container"
|
134
190
|
>
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
|
149
|
-
|
150
|
-
|
151
|
-
|
152
|
-
|
153
|
-
</
|
154
|
-
|
155
|
-
|
191
|
+
{index === 0 && withCheckbox && (
|
192
|
+
<span className="ff-table-checkbox">
|
193
|
+
<Checkbox
|
194
|
+
onChange={(e) => {
|
195
|
+
onSelectClick(e, {
|
196
|
+
allSelected: e.target.checked,
|
197
|
+
});
|
198
|
+
}}
|
199
|
+
checked={
|
200
|
+
allSelected !== undefined ? allSelected : false
|
201
|
+
}
|
202
|
+
partial={!!partialSelected}
|
203
|
+
disabled={headerCheckboxDisabled}
|
204
|
+
/>
|
205
|
+
</span>
|
206
|
+
)}
|
207
|
+
|
208
|
+
{column.header}
|
209
|
+
</Typography>
|
210
|
+
</th>
|
211
|
+
))}
|
156
212
|
</tr>
|
157
|
-
|
158
|
-
|
159
|
-
|
160
|
-
|
161
|
-
|
162
|
-
|
163
|
-
|
164
|
-
|
165
|
-
|
166
|
-
|
167
|
-
|
168
|
-
|
169
|
-
|
170
|
-
|
171
|
-
|
213
|
+
</thead>
|
214
|
+
<tbody className="ff-fixed-header-table">
|
215
|
+
{data?.length > 0 &&
|
216
|
+
data?.map((row: any) => (
|
217
|
+
<SortableRow
|
218
|
+
key={row?.id}
|
219
|
+
row={row}
|
220
|
+
columns={columns}
|
221
|
+
tableBodyRowClass={tableBodyRowClass}
|
222
|
+
handleOnclick={handleOnclick}
|
223
|
+
tableDataTextColor={tableDataTextColor}
|
224
|
+
withCheckbox={withCheckbox}
|
225
|
+
onSelectClick={onSelectClick}
|
226
|
+
draggable={draggable}
|
227
|
+
/>
|
228
|
+
))}
|
229
|
+
</tbody>
|
230
|
+
</table>
|
231
|
+
{data?.length <= 0 && (
|
232
|
+
<div
|
233
|
+
className="no-data-content"
|
234
|
+
style={{ height: `calc(${height} - 50px)` }}
|
235
|
+
>
|
236
|
+
{noDataContent}
|
237
|
+
</div>
|
238
|
+
)}
|
172
239
|
</div>
|
173
|
-
|
174
|
-
</
|
240
|
+
</SortableContext>
|
241
|
+
</DndContext>
|
175
242
|
);
|
176
243
|
};
|
177
244
|
|
178
|
-
export default Table;
|
245
|
+
export default Table;
|
@@ -121,4 +121,12 @@ export interface TableProps {
|
|
121
121
|
* handle function for the table header icon
|
122
122
|
*/
|
123
123
|
headerIconOnClick?: () => void;
|
124
|
+
/**
|
125
|
+
* Drag and Drop pass true to enable
|
126
|
+
*/
|
127
|
+
draggable?: boolean,
|
128
|
+
/**
|
129
|
+
* Drag and Drop indexes
|
130
|
+
*/
|
131
|
+
onDragEnd?: (startIndex: number, endIndex: number) => void | undefined
|
124
132
|
}
|
@@ -14,25 +14,23 @@ const TableBody = React.memo(
|
|
14
14
|
}: TableBodyProps) => (
|
15
15
|
<tbody className="ff-table-tree-body">
|
16
16
|
<tr id="ff-table-tree-first-node" />
|
17
|
-
{flattenedTreeData?.map(
|
18
|
-
(
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
}
|
35
|
-
)}
|
17
|
+
{flattenedTreeData?.map((node) => {
|
18
|
+
return (
|
19
|
+
<TableRow
|
20
|
+
key={node.searchKey}
|
21
|
+
node={node}
|
22
|
+
// level={level}
|
23
|
+
columnsData={columnsData}
|
24
|
+
selected={selected}
|
25
|
+
select={select}
|
26
|
+
onRowClick={onRowClick}
|
27
|
+
onToggleExpand={onToggleExpand}
|
28
|
+
onCheckBoxChange={onCheckBoxChange}
|
29
|
+
// parentSiblings={parentSiblings}
|
30
|
+
// isLast={isLast}
|
31
|
+
/>
|
32
|
+
);
|
33
|
+
})}
|
36
34
|
<tr id="ff-table-tree-last-node" />
|
37
35
|
</tbody>
|
38
36
|
)
|
@@ -8,7 +8,7 @@ import { checkEmpty } from '../../../utils/checkEmpty/checkEmpty';
|
|
8
8
|
|
9
9
|
const renderSpaces = (
|
10
10
|
level: number,
|
11
|
-
parentSiblings: boolean[],
|
11
|
+
parentSiblings: boolean[] = [],
|
12
12
|
isLast?: boolean | undefined
|
13
13
|
) => {
|
14
14
|
let siblingsArray = parentSiblings;
|
@@ -21,10 +21,9 @@ const renderSpaces = (
|
|
21
21
|
}
|
22
22
|
}
|
23
23
|
|
24
|
-
parentSiblings;
|
25
24
|
return (
|
26
25
|
<div className="tree-table-space-container">
|
27
|
-
{siblingsArray
|
26
|
+
{siblingsArray?.reverse()?.map((line, i) => (
|
28
27
|
<span
|
29
28
|
key={i}
|
30
29
|
className={`tree-table-space-block ${!line ? 'no-lines' : ''} ${
|
@@ -40,16 +39,14 @@ const TableCell = React.memo(
|
|
40
39
|
({
|
41
40
|
col,
|
42
41
|
node,
|
43
|
-
level,
|
44
42
|
selected,
|
45
43
|
select,
|
46
44
|
onCheckBoxChange,
|
47
45
|
onToggleExpand,
|
48
|
-
parentSiblings,
|
49
|
-
isLast,
|
50
46
|
}: TableCellProps) => (
|
51
47
|
<td>
|
52
|
-
{col.isTree &&
|
48
|
+
{col.isTree &&
|
49
|
+
renderSpaces(node.hierarchy + 1, node.parentSiblings, node.last)}
|
53
50
|
<div className="tree-title-container">
|
54
51
|
{col.isTree && (
|
55
52
|
<span
|
@@ -5,18 +5,18 @@ import TableCell from './TableCell';
|
|
5
5
|
const TableRow = React.memo(
|
6
6
|
({
|
7
7
|
node,
|
8
|
-
level,
|
8
|
+
// level,
|
9
9
|
columnsData,
|
10
10
|
selected,
|
11
11
|
select,
|
12
12
|
onRowClick,
|
13
13
|
onToggleExpand,
|
14
14
|
onCheckBoxChange,
|
15
|
-
parentSiblings,
|
16
|
-
isLast,
|
15
|
+
// parentSiblings,
|
16
|
+
// isLast,
|
17
17
|
}: TableRowProps) => (
|
18
18
|
<tr
|
19
|
-
data-level={
|
19
|
+
data-level={node.hierarchy}
|
20
20
|
className="show"
|
21
21
|
onClick={(e) => onRowClick(e, node)}
|
22
22
|
>
|
@@ -25,13 +25,10 @@ const TableRow = React.memo(
|
|
25
25
|
key={col.name}
|
26
26
|
col={col}
|
27
27
|
node={node}
|
28
|
-
level={level}
|
29
28
|
selected={selected}
|
30
29
|
select={select}
|
31
30
|
onCheckBoxChange={onCheckBoxChange}
|
32
31
|
onToggleExpand={onToggleExpand}
|
33
|
-
parentSiblings={parentSiblings}
|
34
|
-
isLast={isLast}
|
35
32
|
/>
|
36
33
|
))}
|
37
34
|
</tr>
|
@@ -17,7 +17,7 @@ type Story = StoryObj<typeof TableTree>;
|
|
17
17
|
const colData = [
|
18
18
|
{
|
19
19
|
name: 'Script Name',
|
20
|
-
accessor: '
|
20
|
+
accessor: 'name',
|
21
21
|
width: '400px',
|
22
22
|
isClickable: true,
|
23
23
|
actions: (row) => {
|
@@ -36,56 +36,56 @@ const colData = [
|
|
36
36
|
|
37
37
|
{
|
38
38
|
name: 'Module Path',
|
39
|
-
accessor: '
|
39
|
+
accessor: 'createdBy',
|
40
40
|
width: '200px',
|
41
41
|
isClickable: true,
|
42
42
|
},
|
43
43
|
|
44
44
|
{
|
45
45
|
name: 'Module Path',
|
46
|
-
accessor: '
|
46
|
+
accessor: 'createdBy',
|
47
47
|
width: '200px',
|
48
48
|
isClickable: true,
|
49
49
|
},
|
50
50
|
{
|
51
51
|
name: 'Module Path',
|
52
|
-
accessor: '
|
52
|
+
accessor: 'createdBy',
|
53
53
|
width: '200px',
|
54
54
|
isClickable: true,
|
55
55
|
},
|
56
56
|
{
|
57
57
|
name: 'Module Path',
|
58
|
-
accessor: '
|
58
|
+
accessor: 'createdBy',
|
59
59
|
width: '200px',
|
60
60
|
isClickable: true,
|
61
61
|
},
|
62
62
|
{
|
63
63
|
name: 'Module Path',
|
64
|
-
accessor: '
|
64
|
+
accessor: 'createdBy',
|
65
65
|
width: '200px',
|
66
66
|
isClickable: true,
|
67
67
|
},
|
68
68
|
{
|
69
69
|
name: 'Module Path',
|
70
|
-
accessor: '
|
70
|
+
accessor: 'createdBy',
|
71
71
|
width: '200px',
|
72
72
|
isClickable: true,
|
73
73
|
},
|
74
74
|
{
|
75
75
|
name: 'Module Path',
|
76
|
-
accessor: '
|
76
|
+
accessor: 'createdBy',
|
77
77
|
width: '200px',
|
78
78
|
isClickable: true,
|
79
79
|
},
|
80
80
|
{ name: 'Created By', accessor: 'createdByUname', width: '200px' },
|
81
81
|
{
|
82
82
|
name: 'Script Count',
|
83
|
-
accessor: '
|
83
|
+
accessor: 'createdBy',
|
84
84
|
width: '200px',
|
85
85
|
},
|
86
86
|
{
|
87
87
|
name: 'state',
|
88
|
-
accessor: '
|
88
|
+
accessor: 'createdBy',
|
89
89
|
width: '100px',
|
90
90
|
cell: ({ value }) => {
|
91
91
|
return (
|