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.
Files changed (203) hide show
  1. package/.yarn/install-state.gz +0 -0
  2. package/lib/components/Charts/BarChart/BarChart.d.ts +1 -0
  3. package/lib/components/Charts/MultiRadialChart/types.d.ts +2 -0
  4. package/lib/components/Table/Table.d.ts +1 -1
  5. package/lib/components/Table/Types.d.ts +8 -0
  6. package/lib/components/TableTree/Components/TableCell.d.ts +1 -1
  7. package/lib/components/TableTree/Components/TableRow.d.ts +1 -1
  8. package/lib/components/TableTree/data.d.ts +54 -222
  9. package/lib/components/TableTree/types.d.ts +0 -6
  10. package/lib/index.d.ts +15 -2
  11. package/lib/index.esm.js +21314 -21374
  12. package/lib/index.esm.js.map +1 -1
  13. package/lib/index.js +21319 -21378
  14. package/lib/index.js.map +1 -1
  15. package/lib/tsconfig.tsbuildinfo +1 -1
  16. package/lib/utils/swapArrayItem/dragAndDropUtils.d.ts +1 -0
  17. package/package.json +1 -1
  18. package/src/StyleGuide/ColorPalette/colorPaletteList.ts +55 -0
  19. package/src/assets/Themes/BaseTheme.scss +17 -6
  20. package/src/assets/Themes/BlueTheme.scss +12 -0
  21. package/src/assets/Themes/DarkTheme.scss +20 -6
  22. package/src/assets/icons/approval_pending.svg +8 -8
  23. package/src/assets/icons/azure.svg +9 -0
  24. package/src/assets/icons/bitbucket.svg +9 -0
  25. package/src/assets/icons/configuration.svg +3 -3
  26. package/src/assets/icons/defects.svg +8 -8
  27. package/src/assets/icons/element.svg +4 -4
  28. package/src/assets/icons/github.svg +9 -0
  29. package/src/assets/icons/gitlab.svg +9 -0
  30. package/src/assets/icons/jenkins.svg +9 -0
  31. package/src/assets/icons/jira_logo.svg +9 -0
  32. package/src/assets/icons/primary_calendar_icon.svg +3 -0
  33. package/src/assets/icons/project_element.svg +4 -4
  34. package/src/assets/icons/slack.svg +9 -0
  35. package/src/assets/icons/step_group.svg +10 -10
  36. package/src/assets/icons/variable.svg +3 -3
  37. package/src/assets/icons/web_service_icon.svg +3 -3
  38. package/src/components/Charts/BarChart/BarChart.stories.tsx +2 -1
  39. package/src/components/Charts/BarChart/BarChart.tsx +6 -2
  40. package/src/components/Charts/MultiRadialChart/MultiRadialChart.scss +0 -2
  41. package/src/components/Charts/MultiRadialChart/MultiRadialChart.stories.tsx +7 -1
  42. package/src/components/Charts/MultiRadialChart/MultiRadialChart.tsx +5 -2
  43. package/src/components/Charts/MultiRadialChart/types.ts +2 -0
  44. package/src/components/DatePicker/DatePicker.scss +379 -632
  45. package/src/components/DatePicker/DatePicker.tsx +130 -98
  46. package/src/components/DatePicker/Timepicker.tsx +1 -13
  47. package/src/components/Icon/iconList.ts +16 -0
  48. package/src/components/Table/Table.scss +44 -11
  49. package/src/components/Table/Table.stories.tsx +60 -1
  50. package/src/components/Table/Table.tsx +190 -123
  51. package/src/components/Table/Types.ts +8 -0
  52. package/src/components/TableTree/Components/TableBody.tsx +17 -19
  53. package/src/components/TableTree/Components/TableCell.tsx +4 -7
  54. package/src/components/TableTree/Components/TableRow.tsx +4 -7
  55. package/src/components/TableTree/TableTree.stories.tsx +10 -10
  56. package/src/components/TableTree/TableTree.tsx +1 -1
  57. package/src/components/TableTree/data.ts +53 -331
  58. package/src/components/TableTree/types.ts +0 -6
  59. package/src/components/TextArea/Textarea.scss +24 -6
  60. package/src/index.ts +3 -1
  61. package/src/utils/swapArrayItem/dragAndDropUtils.ts +11 -0
  62. package/lib/1fb4472b34e4fe07.css +0 -1
  63. package/lib/StyleGuide/ColorPalette/ColorPalette.stories.d.ts +0 -6
  64. package/lib/StyleGuide/Typography/Typography.stories.d.ts +0 -6
  65. package/lib/assets/fonts/Poppins-Bold.ttf +0 -0
  66. package/lib/assets/fonts/Poppins-Medium.ttf +0 -0
  67. package/lib/assets/fonts/Poppins-Regular.ttf +0 -0
  68. package/lib/assets/fonts/Poppins-SemiBold.ttf +0 -0
  69. package/lib/components/Accordion/Accordion.stories.d.ts +0 -6
  70. package/lib/components/AddButton/AddButton.d.ts +0 -5
  71. package/lib/components/AddButton/AddButton.stories.d.ts +0 -6
  72. package/lib/components/AddButton/index.d.ts +0 -1
  73. package/lib/components/AddButton/types.d.ts +0 -4
  74. package/lib/components/AddResourceButton/AddButton.stories.d.ts +0 -8
  75. package/lib/components/AddVariables/AddVariables.d.ts +0 -5
  76. package/lib/components/AddVariables/index.d.ts +0 -1
  77. package/lib/components/AddVariables/types.d.ts +0 -35
  78. package/lib/components/AllProjectsDropdown/AllProjectsDropdown.stories.d.ts +0 -7
  79. package/lib/components/AppHeader/AppHeader.stories.d.ts +0 -7
  80. package/lib/components/AttachImage/AttachImage.stories.d.ts +0 -7
  81. package/lib/components/AttachmentButton/AttachmentButton.stories.d.ts +0 -9
  82. package/lib/components/Avatar/Avatar.stories.d.ts +0 -10
  83. package/lib/components/Button/Button.stories.d.ts +0 -13
  84. package/lib/components/Charts/BarChart/BarChart.stories.d.ts +0 -6
  85. package/lib/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.d.ts +0 -7
  86. package/lib/components/Charts/DonutChart/DonutChart.stories.d.ts +0 -6
  87. package/lib/components/Charts/IconRadialChart/IconRadialChart.stories.d.ts +0 -8
  88. package/lib/components/Charts/LineChart/LineChart.stories.d.ts +0 -7
  89. package/lib/components/Charts/MultiRadialChart/MultiRadialChart.stories.d.ts +0 -8
  90. package/lib/components/Charts/PieChart/PieChart.stories.d.ts +0 -7
  91. package/lib/components/Charts/RadialChart/RadialChart.stories.d.ts +0 -6
  92. package/lib/components/Checkbox/Checkbox.stories.d.ts +0 -8
  93. package/lib/components/Chip/Chip.stories.d.ts +0 -14
  94. package/lib/components/ConnectingBranch/ConnectingBranch.stories.d.ts +0 -6
  95. package/lib/components/DatePicker/DatePicker.stories.d.ts +0 -9
  96. package/lib/components/DragAndDrop/DragAndDrop.stories.d.ts +0 -6
  97. package/lib/components/Drawer/Drawer.stories.d.ts +0 -12
  98. package/lib/components/EditTextField/EditTextField.stories.d.ts +0 -10
  99. package/lib/components/Editor/Editor.stories.d.ts +0 -6
  100. package/lib/components/Excel/ContextMenu/ContextMenu.d.ts +0 -4
  101. package/lib/components/Excel/ExcelFile.stories.d.ts +0 -6
  102. package/lib/components/ExcelFile/ChangeExcelStyles.d.ts +0 -14
  103. package/lib/components/ExcelFile/ColorBarSelector/ColorBarSelector.d.ts +0 -8
  104. package/lib/components/ExcelFile/ContextMenu/ContextMenu.d.ts +0 -4
  105. package/lib/components/ExcelFile/ExcelFile/Excel/ActiveCell.d.ts +0 -7
  106. package/lib/components/ExcelFile/ExcelFile/Excel/Cell.d.ts +0 -4
  107. package/lib/components/ExcelFile/ExcelFile/Excel/ColumnIndicator.d.ts +0 -5
  108. package/lib/components/ExcelFile/ExcelFile/Excel/Copied.d.ts +0 -3
  109. package/lib/components/ExcelFile/ExcelFile/Excel/CornerIndicator.d.ts +0 -5
  110. package/lib/components/ExcelFile/ExcelFile/Excel/DataEditor.d.ts +0 -5
  111. package/lib/components/ExcelFile/ExcelFile/Excel/DataViewer.d.ts +0 -8
  112. package/lib/components/ExcelFile/ExcelFile/Excel/FloatingRect.d.ts +0 -10
  113. package/lib/components/ExcelFile/ExcelFile/Excel/HeaderRow.d.ts +0 -3
  114. package/lib/components/ExcelFile/ExcelFile/Excel/Row.d.ts +0 -3
  115. package/lib/components/ExcelFile/ExcelFile/Excel/RowIndicator.d.ts +0 -5
  116. package/lib/components/ExcelFile/ExcelFile/Excel/Selected.d.ts +0 -3
  117. package/lib/components/ExcelFile/ExcelFile/Excel/Spreadsheet.d.ts +0 -80
  118. package/lib/components/ExcelFile/ExcelFile/Excel/Table.d.ts +0 -3
  119. package/lib/components/ExcelFile/ExcelFile/Excel/actions.d.ts +0 -174
  120. package/lib/components/ExcelFile/ExcelFile/Excel/areModelsEqual.d.ts +0 -1
  121. package/lib/components/ExcelFile/ExcelFile/Excel/context.d.ts +0 -8
  122. package/lib/components/ExcelFile/ExcelFile/Excel/engine/engine.d.ts +0 -22
  123. package/lib/components/ExcelFile/ExcelFile/Excel/engine/formula.d.ts +0 -17
  124. package/lib/components/ExcelFile/ExcelFile/Excel/engine/index.d.ts +0 -2
  125. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-graph.d.ts +0 -21
  126. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-hash.d.ts +0 -3
  127. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-set.d.ts +0 -24
  128. package/lib/components/ExcelFile/ExcelFile/Excel/index.d.ts +0 -13
  129. package/lib/components/ExcelFile/ExcelFile/Excel/matrix.d.ts +0 -67
  130. package/lib/components/ExcelFile/ExcelFile/Excel/point-range.d.ts +0 -22
  131. package/lib/components/ExcelFile/ExcelFile/Excel/point.d.ts +0 -11
  132. package/lib/components/ExcelFile/ExcelFile/Excel/reducer.d.ts +0 -27
  133. package/lib/components/ExcelFile/ExcelFile/Excel/selection.d.ts +0 -95
  134. package/lib/components/ExcelFile/ExcelFile/Excel/types.d.ts +0 -178
  135. package/lib/components/ExcelFile/ExcelFile/Excel/use-dispatch.d.ts +0 -3
  136. package/lib/components/ExcelFile/ExcelFile/Excel/use-selector.d.ts +0 -3
  137. package/lib/components/ExcelFile/ExcelFile/Excel/util.d.ts +0 -44
  138. package/lib/components/ExcelFile/ExcelFile/ExcelFile.d.ts +0 -19
  139. package/lib/components/ExcelFile/ExcelFile.stories.d.ts +0 -6
  140. package/lib/components/ExcelFile/ExcelSheetBar/ExcelSheetBar.d.ts +0 -12
  141. package/lib/components/ExcelFile/ExcelToolBar/ExcelToolBar.d.ts +0 -15
  142. package/lib/components/ExcelFile/ImportExcelStyles.d.ts +0 -24
  143. package/lib/components/ExcelFile/Types.d.ts +0 -129
  144. package/lib/components/ExcelFile/index.d.ts +0 -1
  145. package/lib/components/ExpandableMenu/ExpandableMenu.stories.d.ts +0 -7
  146. package/lib/components/FF_Captcha/captcha.stories.d.ts +0 -8
  147. package/lib/components/FileDropzone/FileDropzone.stories.d.ts +0 -8
  148. package/lib/components/Form/Form.stories.d.ts +0 -7
  149. package/lib/components/GridLayout/GridLayout.stories.d.ts +0 -8
  150. package/lib/components/HighlightText/HighlightText.stories.d.ts +0 -6
  151. package/lib/components/Icon/Icon.stories.d.ts +0 -8
  152. package/lib/components/IconButton/IconButton.stories.d.ts +0 -7
  153. package/lib/components/IconRadioGroup/IconRadioGroup.stories.d.ts +0 -7
  154. package/lib/components/Input/Input.stories.d.ts +0 -9
  155. package/lib/components/InputWithDropdown/InputWithDropdown.stories.d.ts +0 -9
  156. package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts +0 -13
  157. package/lib/components/LazyLoad/LazyLoad.stories.d.ts +0 -6
  158. package/lib/components/MachineInputField/MachineInputField.stories.d.ts +0 -6
  159. package/lib/components/MenuOption/MenuOption.stories.d.ts +0 -16
  160. package/lib/components/MiniModal/MiniModal.stories.d.ts +0 -10
  161. package/lib/components/Modal/Modal.stories.d.ts +0 -7
  162. package/lib/components/ModulesChip/ModuleChip.stories.d.ts +0 -6
  163. package/lib/components/MultiSelect/MultiSelect.stories.d.ts +0 -11
  164. package/lib/components/NLPInput/NlpInput.stories.d.ts +0 -7
  165. package/lib/components/NLPInput/type.d.ts +0 -70
  166. package/lib/components/Paper/Paper.stories.d.ts +0 -11
  167. package/lib/components/RadioButton/RadioButton.stories.d.ts +0 -10
  168. package/lib/components/RadioGroup/RadioGroup.stories.d.ts +0 -9
  169. package/lib/components/Search/Search.stories.d.ts +0 -6
  170. package/lib/components/Select/Select.stories.d.ts +0 -14
  171. package/lib/components/Select/components/Dropdown/Dropdown.d.ts +0 -4
  172. package/lib/components/Select/components/Dropdown/dropdownTypes.d.ts +0 -17
  173. package/lib/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.d.ts +0 -6
  174. package/lib/components/SequentialConnectingBranch/components/AddBrowserModal/AddBrowserModal.d.ts +0 -4
  175. package/lib/components/SequentialConnectingBranch/components/AddBrowserModal/types.d.ts +0 -3
  176. package/lib/components/SequentialConnectingBranch/components/DatasetListModal/DatasetListModal.d.ts +0 -4
  177. package/lib/components/SequentialConnectingBranch/components/DatasetListModal/types.d.ts +0 -3
  178. package/lib/components/StateDropdown/StateDropdown.stories.d.ts +0 -10
  179. package/lib/components/StatusButton/StatusButton.stories.d.ts +0 -14
  180. package/lib/components/StatusCard/StatusCard.stories.d.ts +0 -11
  181. package/lib/components/Table/Table.stories.d.ts +0 -13
  182. package/lib/components/TableTree/TableTree.stories.d.ts +0 -7
  183. package/lib/components/Tabs/Tabs.stories.d.ts +0 -9
  184. package/lib/components/TextArea/Textarea.stories.d.ts +0 -9
  185. package/lib/components/Toast/Toast.stories.d.ts +0 -6
  186. package/lib/components/Toastify/Toastify.stories.d.ts +0 -6
  187. package/lib/components/Toggle/Toggle.stories.d.ts +0 -12
  188. package/lib/components/Tooltip/Tooltip.stories.d.ts +0 -15
  189. package/lib/components/Typography/Typography.stories.d.ts +0 -10
  190. package/lib/components/VariableInput/VariableInput.stories.d.ts +0 -6
  191. package/lib/utils/checkEmpty/checkEmpty.stories.d.ts +0 -6
  192. package/lib/utils/compareArrays/compareArrays.stories.d.ts +0 -6
  193. package/lib/utils/compareObjects/compareObjects.stories.d.ts +0 -6
  194. package/lib/utils/debounce/debounce.stories.d.ts +0 -6
  195. package/lib/utils/ffID/ffID.stories.d.ts +0 -6
  196. package/lib/utils/find/findAndInsert.d.ts +0 -7
  197. package/lib/utils/find/findAndInsert.stories.d.ts +0 -7
  198. package/lib/utils/findAndInsert/findAndInsert.stories.d.ts +0 -7
  199. package/lib/utils/getEncryptedData/getEncryptedData.stories.d.ts +0 -6
  200. package/lib/utils/getExtension/getExtension.stories.d.ts +0 -6
  201. package/lib/utils/getSequentialPayload/getSequentialPayload.stories.d.ts +0 -10
  202. package/lib/utils/throttle/throttle.stories.d.ts +0 -6
  203. 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
- // import NoData from '../NoData/NoData';
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 hanleOnclick = (column: ColumnsProps, row: DataProps) => {
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
- return (
53
- <div
54
- style={{ height: height, position: 'relative' }}
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
- <table className={classNames(`ff-table`)} cellSpacing={0}>
71
- <thead
72
- className={classNames(
73
- {
74
- 'ff-fixed-header': withFixedHeader,
75
- },
76
- tableHeadClass
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
- <tr>
80
- {/* columns.map((column, index) */}
81
- {columns.map((column, index) => (
82
- <th
83
- className={classNames(
84
- `${headerType && `${headerType}-bg`}`,
85
- `${headerTextColor && `${headerTextColor}-color`}`
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
- {column.header}
112
- </Typography>
113
- </th>
114
- ))}
115
- </tr>
116
- </thead>
117
- <tbody>
118
- {data.length > 0 &&
119
- data.map((row: any, index: number) => (
120
- <tr
121
- key={row.id || index}
122
- className={classNames(tableBodyRowClass, {
123
- 'disabled-row': row.disabled,
124
- })}
125
- >
126
- {columns.map((column, i) => {
127
- return (
128
- <td
129
- key={column.accessor + i}
130
- onClick={() => hanleOnclick(column, row)}
131
- className={classNames(column.className, {
132
- 'clickable-cell': column.onClick,
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
- <Typography
136
- as="div"
137
- color={tableDataTextColor}
138
- className="ff-data-checkbox-container"
139
- >
140
- {i === 0 && withCheckbox && (
141
- <span className="ff-table-checkbox">
142
- <Checkbox
143
- onChange={(e) => {
144
- onSelectClick(e, row);
145
- }}
146
- checked={row.checked}
147
- disabled={!!row.disabled}
148
- />
149
- </span>
150
- )}
151
- {prepareData(row, column)}
152
- </Typography>
153
- </td>
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
- </tbody>
159
- </table>
160
- {data.length <= 0 && (
161
- <div
162
- className="no-data-content"
163
- style={{ height: `calc(${height} - 50px)` }}
164
- >
165
- {/* commented for future requirement for adding image when the data will not be present*/}
166
- {/* <NoData
167
- image={noDataImage ? noDataImage : 'no_data_found'}
168
- content={noDataContent}
169
- size={noDataImageSize}
170
- /> */}
171
- {noDataContent}
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
- </div>
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
- ({ node, level, parentSiblings = [], isLast = false }) => {
19
- return (
20
- <TableRow
21
- key={node.id}
22
- node={node}
23
- level={level}
24
- columnsData={columnsData}
25
- selected={selected}
26
- select={select}
27
- onRowClick={onRowClick}
28
- onToggleExpand={onToggleExpand}
29
- onCheckBoxChange={onCheckBoxChange}
30
- parentSiblings={parentSiblings}
31
- isLast={isLast}
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.reverse().map((line, i) => (
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 && renderSpaces(level + 1, parentSiblings, isLast)}
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={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: 'title',
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: 'id',
39
+ accessor: 'createdBy',
40
40
  width: '200px',
41
41
  isClickable: true,
42
42
  },
43
43
 
44
44
  {
45
45
  name: 'Module Path',
46
- accessor: 'path',
46
+ accessor: 'createdBy',
47
47
  width: '200px',
48
48
  isClickable: true,
49
49
  },
50
50
  {
51
51
  name: 'Module Path',
52
- accessor: 'path',
52
+ accessor: 'createdBy',
53
53
  width: '200px',
54
54
  isClickable: true,
55
55
  },
56
56
  {
57
57
  name: 'Module Path',
58
- accessor: 'path',
58
+ accessor: 'createdBy',
59
59
  width: '200px',
60
60
  isClickable: true,
61
61
  },
62
62
  {
63
63
  name: 'Module Path',
64
- accessor: 'path',
64
+ accessor: 'createdBy',
65
65
  width: '200px',
66
66
  isClickable: true,
67
67
  },
68
68
  {
69
69
  name: 'Module Path',
70
- accessor: 'path',
70
+ accessor: 'createdBy',
71
71
  width: '200px',
72
72
  isClickable: true,
73
73
  },
74
74
  {
75
75
  name: 'Module Path',
76
- accessor: 'path',
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: 'moduleLevelScriptCount',
83
+ accessor: 'createdBy',
84
84
  width: '200px',
85
85
  },
86
86
  {
87
87
  name: 'state',
88
- accessor: 'state',
88
+ accessor: 'createdBy',
89
89
  width: '100px',
90
90
  cell: ({ value }) => {
91
91
  return (
@@ -38,7 +38,7 @@ const TreeTable: React.FC<TreeTableProps> = ({
38
38
  );
39
39
 
40
40
  const handleToggleExpand = useCallback(
41
- (node: any) => onExpand?.(true, node?.id),
41
+ (node: any) => onExpand?.(true, node?.key),
42
42
  [onExpand]
43
43
  );
44
44