pixel-react 1.9.1 → 1.9.3

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 (233) 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/Excel/ExcelFile/ExcelFile.d.ts +1 -3
  5. package/lib/components/Excel/Types.d.ts +1 -1
  6. package/lib/components/Table/Table.d.ts +1 -1
  7. package/lib/components/Table/Types.d.ts +8 -0
  8. package/lib/components/TableTree/Components/TableCell.d.ts +1 -1
  9. package/lib/components/TableTree/Components/TableRow.d.ts +1 -1
  10. package/lib/components/TableTree/data.d.ts +54 -262
  11. package/lib/components/TableTree/types.d.ts +0 -6
  12. package/lib/index.d.ts +18 -7
  13. package/lib/index.esm.js +21547 -21727
  14. package/lib/index.esm.js.map +1 -1
  15. package/lib/index.js +21554 -21733
  16. package/lib/index.js.map +1 -1
  17. package/lib/tsconfig.tsbuildinfo +1 -1
  18. package/lib/utils/indexDBStore/indexDB.d.ts +2 -2
  19. package/lib/utils/swapArrayItem/dragAndDropUtils.d.ts +1 -0
  20. package/package.json +1 -2
  21. package/src/StyleGuide/ColorPalette/colorPaletteList.ts +55 -0
  22. package/src/assets/Themes/BaseTheme.scss +17 -6
  23. package/src/assets/Themes/BlueTheme.scss +12 -0
  24. package/src/assets/Themes/DarkTheme.scss +20 -6
  25. package/src/assets/icons/approval_pending.svg +8 -8
  26. package/src/assets/icons/azure.svg +9 -0
  27. package/src/assets/icons/bitbucket.svg +9 -0
  28. package/src/assets/icons/clear_history.svg +6 -0
  29. package/src/assets/icons/code.svg +4 -0
  30. package/src/assets/icons/code_colored.svg +4 -0
  31. package/src/assets/icons/configuration.svg +3 -3
  32. package/src/assets/icons/csharp.svg +9 -0
  33. package/src/assets/icons/cypress.svg +9 -0
  34. package/src/assets/icons/defects.svg +8 -8
  35. package/src/assets/icons/delete_filled.svg +12 -0
  36. package/src/assets/icons/design_link.svg +7 -0
  37. package/src/assets/icons/disable_icon.svg +3 -0
  38. package/src/assets/icons/element.svg +4 -4
  39. package/src/assets/icons/enable_icon.svg +3 -0
  40. package/src/assets/icons/file_colored.svg +5 -0
  41. package/src/assets/icons/github.svg +9 -0
  42. package/src/assets/icons/gitlab.svg +9 -0
  43. package/src/assets/icons/java.svg +4 -0
  44. package/src/assets/icons/javascript.svg +11 -0
  45. package/src/assets/icons/jenkins.svg +9 -0
  46. package/src/assets/icons/jira_colored.svg +15 -0
  47. package/src/assets/icons/jira_logo.svg +9 -0
  48. package/src/assets/icons/mic.svg +4 -0
  49. package/src/assets/icons/mic_filled.svg +28 -0
  50. package/src/assets/icons/playwright.svg +9 -0
  51. package/src/assets/icons/primary_calendar_icon.svg +3 -0
  52. package/src/assets/icons/project_element.svg +4 -4
  53. package/src/assets/icons/python.svg +19 -0
  54. package/src/assets/icons/regenerate.svg +4 -0
  55. package/src/assets/icons/right_arrow_filled_icon.svg +5 -0
  56. package/src/assets/icons/screenshot.svg +7 -0
  57. package/src/assets/icons/slack.svg +9 -0
  58. package/src/assets/icons/step_group.svg +10 -10
  59. package/src/assets/icons/variable.svg +3 -3
  60. package/src/assets/icons/web_service_icon.svg +3 -3
  61. package/src/components/Button/Button.tsx +2 -0
  62. package/src/components/Charts/BarChart/BarChart.stories.tsx +2 -1
  63. package/src/components/Charts/BarChart/BarChart.tsx +6 -2
  64. package/src/components/Charts/MultiRadialChart/MultiRadialChart.scss +0 -2
  65. package/src/components/Charts/MultiRadialChart/MultiRadialChart.stories.tsx +7 -1
  66. package/src/components/Charts/MultiRadialChart/MultiRadialChart.tsx +5 -2
  67. package/src/components/Charts/MultiRadialChart/types.ts +2 -0
  68. package/src/components/DatePicker/DatePicker.scss +379 -632
  69. package/src/components/DatePicker/DatePicker.tsx +130 -98
  70. package/src/components/DatePicker/Timepicker.tsx +1 -13
  71. package/src/components/Excel/ExcelFile/ExcelFile.tsx +48 -42
  72. package/src/components/Excel/ExcelFile.stories.tsx +98 -96
  73. package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +65 -28
  74. package/src/components/Excel/Types.ts +1 -1
  75. package/src/components/Excel/dataConversion.ts +8 -10
  76. package/src/components/Icon/iconList.ts +60 -3
  77. package/src/components/Table/Table.scss +44 -11
  78. package/src/components/Table/Table.stories.tsx +60 -1
  79. package/src/components/Table/Table.tsx +190 -123
  80. package/src/components/Table/Types.ts +8 -0
  81. package/src/components/TableTree/Components/TableBody.tsx +18 -20
  82. package/src/components/TableTree/Components/TableCell.tsx +28 -16
  83. package/src/components/TableTree/Components/TableRow.tsx +4 -7
  84. package/src/components/TableTree/TableTree.stories.tsx +10 -10
  85. package/src/components/TableTree/TableTree.tsx +19 -16
  86. package/src/components/TableTree/data.ts +53 -362
  87. package/src/components/TableTree/types.ts +0 -6
  88. package/src/components/TextArea/Textarea.scss +24 -6
  89. package/src/index.ts +3 -1
  90. package/src/utils/indexDBStore/indexDB.ts +63 -33
  91. package/src/utils/swapArrayItem/dragAndDropUtils.ts +11 -0
  92. package/lib/1fb4472b34e4fe07.css +0 -1
  93. package/lib/StyleGuide/ColorPalette/ColorPalette.stories.d.ts +0 -6
  94. package/lib/StyleGuide/Typography/Typography.stories.d.ts +0 -6
  95. package/lib/assets/fonts/Poppins-Bold.ttf +0 -0
  96. package/lib/assets/fonts/Poppins-Medium.ttf +0 -0
  97. package/lib/assets/fonts/Poppins-Regular.ttf +0 -0
  98. package/lib/assets/fonts/Poppins-SemiBold.ttf +0 -0
  99. package/lib/components/Accordion/Accordion.stories.d.ts +0 -6
  100. package/lib/components/AddButton/AddButton.d.ts +0 -5
  101. package/lib/components/AddButton/AddButton.stories.d.ts +0 -6
  102. package/lib/components/AddButton/index.d.ts +0 -1
  103. package/lib/components/AddButton/types.d.ts +0 -4
  104. package/lib/components/AddResourceButton/AddButton.stories.d.ts +0 -8
  105. package/lib/components/AddVariables/AddVariables.d.ts +0 -5
  106. package/lib/components/AddVariables/index.d.ts +0 -1
  107. package/lib/components/AddVariables/types.d.ts +0 -35
  108. package/lib/components/AllProjectsDropdown/AllProjectsDropdown.stories.d.ts +0 -7
  109. package/lib/components/AppHeader/AppHeader.stories.d.ts +0 -7
  110. package/lib/components/AttachImage/AttachImage.stories.d.ts +0 -7
  111. package/lib/components/AttachmentButton/AttachmentButton.stories.d.ts +0 -9
  112. package/lib/components/Avatar/Avatar.stories.d.ts +0 -10
  113. package/lib/components/Button/Button.stories.d.ts +0 -13
  114. package/lib/components/Charts/BarChart/BarChart.stories.d.ts +0 -6
  115. package/lib/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.d.ts +0 -7
  116. package/lib/components/Charts/DonutChart/DonutChart.stories.d.ts +0 -6
  117. package/lib/components/Charts/IconRadialChart/IconRadialChart.stories.d.ts +0 -8
  118. package/lib/components/Charts/LineChart/LineChart.stories.d.ts +0 -7
  119. package/lib/components/Charts/MultiRadialChart/MultiRadialChart.stories.d.ts +0 -8
  120. package/lib/components/Charts/PieChart/PieChart.stories.d.ts +0 -7
  121. package/lib/components/Charts/RadialChart/RadialChart.stories.d.ts +0 -6
  122. package/lib/components/Checkbox/Checkbox.stories.d.ts +0 -8
  123. package/lib/components/Chip/Chip.stories.d.ts +0 -14
  124. package/lib/components/ConnectingBranch/ConnectingBranch.stories.d.ts +0 -6
  125. package/lib/components/DatePicker/DatePicker.stories.d.ts +0 -9
  126. package/lib/components/DragAndDrop/DragAndDrop.stories.d.ts +0 -6
  127. package/lib/components/Drawer/Drawer.stories.d.ts +0 -12
  128. package/lib/components/EditTextField/EditTextField.stories.d.ts +0 -10
  129. package/lib/components/Editor/Editor.stories.d.ts +0 -6
  130. package/lib/components/Excel/ContextMenu/ContextMenu.d.ts +0 -4
  131. package/lib/components/Excel/ExcelFile.stories.d.ts +0 -6
  132. package/lib/components/ExcelFile/ChangeExcelStyles.d.ts +0 -14
  133. package/lib/components/ExcelFile/ColorBarSelector/ColorBarSelector.d.ts +0 -8
  134. package/lib/components/ExcelFile/ContextMenu/ContextMenu.d.ts +0 -4
  135. package/lib/components/ExcelFile/ExcelFile/Excel/ActiveCell.d.ts +0 -7
  136. package/lib/components/ExcelFile/ExcelFile/Excel/Cell.d.ts +0 -4
  137. package/lib/components/ExcelFile/ExcelFile/Excel/ColumnIndicator.d.ts +0 -5
  138. package/lib/components/ExcelFile/ExcelFile/Excel/Copied.d.ts +0 -3
  139. package/lib/components/ExcelFile/ExcelFile/Excel/CornerIndicator.d.ts +0 -5
  140. package/lib/components/ExcelFile/ExcelFile/Excel/DataEditor.d.ts +0 -5
  141. package/lib/components/ExcelFile/ExcelFile/Excel/DataViewer.d.ts +0 -8
  142. package/lib/components/ExcelFile/ExcelFile/Excel/FloatingRect.d.ts +0 -10
  143. package/lib/components/ExcelFile/ExcelFile/Excel/HeaderRow.d.ts +0 -3
  144. package/lib/components/ExcelFile/ExcelFile/Excel/Row.d.ts +0 -3
  145. package/lib/components/ExcelFile/ExcelFile/Excel/RowIndicator.d.ts +0 -5
  146. package/lib/components/ExcelFile/ExcelFile/Excel/Selected.d.ts +0 -3
  147. package/lib/components/ExcelFile/ExcelFile/Excel/Spreadsheet.d.ts +0 -80
  148. package/lib/components/ExcelFile/ExcelFile/Excel/Table.d.ts +0 -3
  149. package/lib/components/ExcelFile/ExcelFile/Excel/actions.d.ts +0 -174
  150. package/lib/components/ExcelFile/ExcelFile/Excel/areModelsEqual.d.ts +0 -1
  151. package/lib/components/ExcelFile/ExcelFile/Excel/context.d.ts +0 -8
  152. package/lib/components/ExcelFile/ExcelFile/Excel/engine/engine.d.ts +0 -22
  153. package/lib/components/ExcelFile/ExcelFile/Excel/engine/formula.d.ts +0 -17
  154. package/lib/components/ExcelFile/ExcelFile/Excel/engine/index.d.ts +0 -2
  155. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-graph.d.ts +0 -21
  156. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-hash.d.ts +0 -3
  157. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-set.d.ts +0 -24
  158. package/lib/components/ExcelFile/ExcelFile/Excel/index.d.ts +0 -13
  159. package/lib/components/ExcelFile/ExcelFile/Excel/matrix.d.ts +0 -67
  160. package/lib/components/ExcelFile/ExcelFile/Excel/point-range.d.ts +0 -22
  161. package/lib/components/ExcelFile/ExcelFile/Excel/point.d.ts +0 -11
  162. package/lib/components/ExcelFile/ExcelFile/Excel/reducer.d.ts +0 -27
  163. package/lib/components/ExcelFile/ExcelFile/Excel/selection.d.ts +0 -95
  164. package/lib/components/ExcelFile/ExcelFile/Excel/types.d.ts +0 -178
  165. package/lib/components/ExcelFile/ExcelFile/Excel/use-dispatch.d.ts +0 -3
  166. package/lib/components/ExcelFile/ExcelFile/Excel/use-selector.d.ts +0 -3
  167. package/lib/components/ExcelFile/ExcelFile/Excel/util.d.ts +0 -44
  168. package/lib/components/ExcelFile/ExcelFile/ExcelFile.d.ts +0 -19
  169. package/lib/components/ExcelFile/ExcelFile.stories.d.ts +0 -6
  170. package/lib/components/ExcelFile/ExcelSheetBar/ExcelSheetBar.d.ts +0 -12
  171. package/lib/components/ExcelFile/ExcelToolBar/ExcelToolBar.d.ts +0 -15
  172. package/lib/components/ExcelFile/ImportExcelStyles.d.ts +0 -24
  173. package/lib/components/ExcelFile/Types.d.ts +0 -129
  174. package/lib/components/ExcelFile/index.d.ts +0 -1
  175. package/lib/components/ExpandableMenu/ExpandableMenu.stories.d.ts +0 -7
  176. package/lib/components/FF_Captcha/captcha.stories.d.ts +0 -8
  177. package/lib/components/FileDropzone/FileDropzone.stories.d.ts +0 -8
  178. package/lib/components/Form/Form.stories.d.ts +0 -7
  179. package/lib/components/GridLayout/GridLayout.stories.d.ts +0 -8
  180. package/lib/components/HighlightText/HighlightText.stories.d.ts +0 -6
  181. package/lib/components/Icon/Icon.stories.d.ts +0 -8
  182. package/lib/components/IconButton/IconButton.stories.d.ts +0 -7
  183. package/lib/components/IconRadioGroup/IconRadioGroup.stories.d.ts +0 -7
  184. package/lib/components/Input/Input.stories.d.ts +0 -9
  185. package/lib/components/InputWithDropdown/InputWithDropdown.stories.d.ts +0 -9
  186. package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts +0 -13
  187. package/lib/components/LazyLoad/LazyLoad.stories.d.ts +0 -6
  188. package/lib/components/MachineInputField/MachineInputField.stories.d.ts +0 -6
  189. package/lib/components/MenuOption/MenuOption.stories.d.ts +0 -16
  190. package/lib/components/MiniModal/MiniModal.stories.d.ts +0 -10
  191. package/lib/components/Modal/Modal.stories.d.ts +0 -7
  192. package/lib/components/ModulesChip/ModuleChip.stories.d.ts +0 -6
  193. package/lib/components/MultiSelect/MultiSelect.stories.d.ts +0 -11
  194. package/lib/components/NLPInput/NlpInput.stories.d.ts +0 -7
  195. package/lib/components/NLPInput/type.d.ts +0 -70
  196. package/lib/components/Paper/Paper.stories.d.ts +0 -11
  197. package/lib/components/RadioButton/RadioButton.stories.d.ts +0 -10
  198. package/lib/components/RadioGroup/RadioGroup.stories.d.ts +0 -9
  199. package/lib/components/Search/Search.stories.d.ts +0 -6
  200. package/lib/components/Select/Select.stories.d.ts +0 -14
  201. package/lib/components/Select/components/Dropdown/Dropdown.d.ts +0 -4
  202. package/lib/components/Select/components/Dropdown/dropdownTypes.d.ts +0 -17
  203. package/lib/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.d.ts +0 -6
  204. package/lib/components/SequentialConnectingBranch/components/AddBrowserModal/AddBrowserModal.d.ts +0 -4
  205. package/lib/components/SequentialConnectingBranch/components/AddBrowserModal/types.d.ts +0 -3
  206. package/lib/components/SequentialConnectingBranch/components/DatasetListModal/DatasetListModal.d.ts +0 -4
  207. package/lib/components/SequentialConnectingBranch/components/DatasetListModal/types.d.ts +0 -3
  208. package/lib/components/StateDropdown/StateDropdown.stories.d.ts +0 -10
  209. package/lib/components/StatusButton/StatusButton.stories.d.ts +0 -14
  210. package/lib/components/StatusCard/StatusCard.stories.d.ts +0 -11
  211. package/lib/components/Table/Table.stories.d.ts +0 -13
  212. package/lib/components/TableTree/TableTree.stories.d.ts +0 -7
  213. package/lib/components/Tabs/Tabs.stories.d.ts +0 -9
  214. package/lib/components/TextArea/Textarea.stories.d.ts +0 -9
  215. package/lib/components/Toast/Toast.stories.d.ts +0 -6
  216. package/lib/components/Toastify/Toastify.stories.d.ts +0 -6
  217. package/lib/components/Toggle/Toggle.stories.d.ts +0 -12
  218. package/lib/components/Tooltip/Tooltip.stories.d.ts +0 -15
  219. package/lib/components/Typography/Typography.stories.d.ts +0 -10
  220. package/lib/components/VariableInput/VariableInput.stories.d.ts +0 -6
  221. package/lib/utils/checkEmpty/checkEmpty.stories.d.ts +0 -6
  222. package/lib/utils/compareArrays/compareArrays.stories.d.ts +0 -6
  223. package/lib/utils/compareObjects/compareObjects.stories.d.ts +0 -6
  224. package/lib/utils/debounce/debounce.stories.d.ts +0 -6
  225. package/lib/utils/ffID/ffID.stories.d.ts +0 -6
  226. package/lib/utils/find/findAndInsert.d.ts +0 -7
  227. package/lib/utils/find/findAndInsert.stories.d.ts +0 -7
  228. package/lib/utils/findAndInsert/findAndInsert.stories.d.ts +0 -7
  229. package/lib/utils/getEncryptedData/getEncryptedData.stories.d.ts +0 -6
  230. package/lib/utils/getExtension/getExtension.stories.d.ts +0 -6
  231. package/lib/utils/getSequentialPayload/getSequentialPayload.stories.d.ts +0 -10
  232. package/lib/utils/throttle/throttle.stories.d.ts +0 -6
  233. 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
  }
@@ -12,27 +12,25 @@ const TableBody = React.memo(
12
12
  onToggleExpand,
13
13
  onCheckBoxChange,
14
14
  }: TableBodyProps) => (
15
- <tbody className='ff-table-tree-body'>
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
  )
@@ -4,38 +4,50 @@ import RadioButton from '../../RadioButton';
4
4
  import { TableCellProps } from '../types';
5
5
  import Arrow from '../../../assets/icons/arrows_down_icon.svg?react';
6
6
  import React from 'react';
7
+ import { checkEmpty } from '../../../utils/checkEmpty/checkEmpty';
7
8
 
8
9
  const renderSpaces = (
9
10
  level: number,
10
11
  parentSiblings: boolean[],
11
12
  isLast?: boolean | undefined
12
- ) => (
13
- <div className="tree-table-space-container">
14
- {parentSiblings.reverse().map((line, i) => (
15
- <span
16
- key={i}
17
- className={`tree-table-space-block ${!line ? 'no-lines' : ''} ${
18
- isLast && i === level - 1 ? 'last-node' : ''
19
- }`}
20
- />
21
- ))}
22
- </div>
23
- );
13
+ ) => {
14
+ let siblingsArray = parentSiblings;
15
+ let isLastNode = isLast;
16
+ if (checkEmpty(parentSiblings)) {
17
+ isLastNode = false;
18
+
19
+ if (!isNaN(level)) {
20
+ siblingsArray = Array(level).fill(true);
21
+ }
22
+ }
23
+
24
+ parentSiblings;
25
+ return (
26
+ <div className="tree-table-space-container">
27
+ {siblingsArray.reverse().map((line, i) => (
28
+ <span
29
+ key={i}
30
+ className={`tree-table-space-block ${!line ? 'no-lines' : ''} ${
31
+ isLastNode && i === level - 1 ? 'last-node' : ''
32
+ }`}
33
+ />
34
+ ))}
35
+ </div>
36
+ );
37
+ };
24
38
 
25
39
  const TableCell = React.memo(
26
40
  ({
27
41
  col,
28
42
  node,
29
- level,
30
43
  selected,
31
44
  select,
32
45
  onCheckBoxChange,
33
46
  onToggleExpand,
34
- parentSiblings,
35
- isLast,
36
47
  }: TableCellProps) => (
37
48
  <td>
38
- {col.isTree && renderSpaces(level + 1, parentSiblings, isLast)}
49
+ {col.isTree &&
50
+ renderSpaces(node.hierarchy + 1, node.parentSiblings, node.last)}
39
51
  <div className="tree-title-container">
40
52
  {col.isTree && (
41
53
  <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 (
@@ -16,26 +16,29 @@ const TreeTable: React.FC<TreeTableProps> = ({
16
16
  onExpand,
17
17
  loadMore = () => {},
18
18
  }) => {
19
- useIntersectionObserver(['ff-table-tree-last-node'], {
20
- root: null,
21
- rootMargin: '0px',
22
- threshold: 0.1,
23
- onIntersect: (entry) => {
24
- if (entry.isIntersecting) {
25
- if (functionCheck(loadMore)) {
26
- let direction = 'up';
27
- if (entry.target.id === 'ff-table-tree-last-node') {
28
- direction = 'down';
19
+ useIntersectionObserver(
20
+ ['ff-table-tree-last-node', 'ff-table-tree-first-node'],
21
+ {
22
+ root: null,
23
+ rootMargin: '0px',
24
+ threshold: 0.1,
25
+ onIntersect: (entry) => {
26
+ if (entry.isIntersecting) {
27
+ if (functionCheck(loadMore)) {
28
+ let direction = 'up';
29
+ if (entry.target.id === 'ff-table-tree-last-node') {
30
+ direction = 'down';
31
+ }
32
+ loadMore(direction);
29
33
  }
30
- loadMore(direction);
34
+ console.log('Element in view:', entry.target.id);
31
35
  }
32
- console.log('Element in view:', entry.target.id);
33
- }
34
- },
35
- });
36
+ },
37
+ }
38
+ );
36
39
 
37
40
  const handleToggleExpand = useCallback(
38
- (node: any) => onExpand?.(true, node?.id),
41
+ (node: any) => onExpand?.(true, node?.key),
39
42
  [onExpand]
40
43
  );
41
44