pixel-react 1.1.7 → 1.1.9

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 (184) hide show
  1. package/.yarn/install-state.gz +0 -0
  2. package/lib/components/AttachmentButton/AttachmentButton.d.ts +5 -0
  3. package/lib/components/AttachmentButton/AttachmentButton.stories.d.ts +9 -0
  4. package/lib/components/AttachmentButton/index.d.ts +1 -0
  5. package/lib/components/AttachmentButton/types.d.ts +8 -0
  6. package/lib/components/ExcelFile/ChangeExcelStyles.d.ts +14 -0
  7. package/lib/components/ExcelFile/ColorBarSelector/ColorBarSelector.d.ts +8 -0
  8. package/lib/components/ExcelFile/ContextMenu/ContextMenu.d.ts +4 -0
  9. package/lib/components/ExcelFile/ExcelFile/Excel/ActiveCell.d.ts +7 -0
  10. package/lib/components/ExcelFile/ExcelFile/Excel/Cell.d.ts +4 -0
  11. package/lib/components/ExcelFile/ExcelFile/Excel/ColumnIndicator.d.ts +5 -0
  12. package/lib/components/ExcelFile/ExcelFile/Excel/Copied.d.ts +3 -0
  13. package/lib/components/ExcelFile/ExcelFile/Excel/CornerIndicator.d.ts +5 -0
  14. package/lib/components/ExcelFile/ExcelFile/Excel/DataEditor.d.ts +5 -0
  15. package/lib/components/ExcelFile/ExcelFile/Excel/DataViewer.d.ts +8 -0
  16. package/lib/components/ExcelFile/ExcelFile/Excel/FloatingRect.d.ts +10 -0
  17. package/lib/components/ExcelFile/ExcelFile/Excel/HeaderRow.d.ts +3 -0
  18. package/lib/components/ExcelFile/ExcelFile/Excel/Row.d.ts +3 -0
  19. package/lib/components/ExcelFile/ExcelFile/Excel/RowIndicator.d.ts +5 -0
  20. package/lib/components/ExcelFile/ExcelFile/Excel/Selected.d.ts +3 -0
  21. package/lib/components/ExcelFile/ExcelFile/Excel/Spreadsheet.d.ts +81 -0
  22. package/lib/components/ExcelFile/ExcelFile/Excel/Table.d.ts +3 -0
  23. package/lib/components/ExcelFile/ExcelFile/Excel/actions.d.ts +130 -0
  24. package/lib/components/ExcelFile/ExcelFile/Excel/areModelsEqual.d.ts +1 -0
  25. package/lib/components/ExcelFile/ExcelFile/Excel/context.d.ts +8 -0
  26. package/lib/components/ExcelFile/ExcelFile/Excel/engine/engine.d.ts +22 -0
  27. package/lib/components/ExcelFile/ExcelFile/Excel/engine/formula.d.ts +17 -0
  28. package/lib/components/ExcelFile/ExcelFile/Excel/engine/index.d.ts +2 -0
  29. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-graph.d.ts +21 -0
  30. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-hash.d.ts +3 -0
  31. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-set.d.ts +24 -0
  32. package/lib/components/ExcelFile/ExcelFile/Excel/index.d.ts +13 -0
  33. package/lib/components/ExcelFile/ExcelFile/Excel/matrix.d.ts +67 -0
  34. package/lib/components/ExcelFile/ExcelFile/Excel/point-range.d.ts +22 -0
  35. package/lib/components/ExcelFile/ExcelFile/Excel/point.d.ts +11 -0
  36. package/lib/components/ExcelFile/ExcelFile/Excel/reducer.d.ts +27 -0
  37. package/lib/components/ExcelFile/ExcelFile/Excel/selection.d.ts +95 -0
  38. package/lib/components/ExcelFile/ExcelFile/Excel/types.d.ts +215 -0
  39. package/lib/components/ExcelFile/ExcelFile/Excel/use-dispatch.d.ts +3 -0
  40. package/lib/components/ExcelFile/ExcelFile/Excel/use-selector.d.ts +3 -0
  41. package/lib/components/ExcelFile/ExcelFile/Excel/util.d.ts +45 -0
  42. package/lib/components/ExcelFile/ExcelFile/ExcelFile.d.ts +3 -0
  43. package/lib/components/ExcelFile/ExcelFile.stories.d.ts +6 -0
  44. package/lib/components/ExcelFile/ExcelSheetBar/ExcelSheetBar.d.ts +15 -0
  45. package/lib/components/ExcelFile/ExcelToolBar/ExcelToolBar.d.ts +3 -0
  46. package/lib/components/ExcelFile/ImportExcelStyles.d.ts +24 -0
  47. package/lib/components/ExcelFile/Types.d.ts +176 -0
  48. package/lib/components/ExcelFile/index.d.ts +1 -0
  49. package/lib/components/IconRadioGroup/IconRadioGroup.d.ts +5 -0
  50. package/lib/components/IconRadioGroup/IconRadioGroup.stories.d.ts +7 -0
  51. package/lib/components/IconRadioGroup/index.d.ts +1 -0
  52. package/lib/components/IconRadioGroup/type.d.ts +41 -0
  53. package/lib/components/RadioButton/radioButtonTypes.d.ts +15 -0
  54. package/lib/components/RadioGroup/RadioGroup.stories.d.ts +2 -1
  55. package/lib/components/RadioGroup/radioGroupTypes.d.ts +15 -0
  56. package/lib/components/Select/Select.d.ts +1 -1
  57. package/lib/components/Select/types.d.ts +4 -0
  58. package/lib/components/Table/Table.d.ts +1 -1
  59. package/lib/components/Table/Types.d.ts +8 -0
  60. package/lib/components/TableTree/TableTree.d.ts +1 -0
  61. package/lib/index.d.ts +71 -3
  62. package/lib/index.esm.js +408 -151
  63. package/lib/index.esm.js.map +1 -1
  64. package/lib/index.js +409 -150
  65. package/lib/index.js.map +1 -1
  66. package/lib/tsconfig.tsbuildinfo +1 -1
  67. package/package.json +4 -2
  68. package/src/assets/Themes/BaseTheme.scss +11 -0
  69. package/src/assets/Themes/DarkTheme.scss +10 -0
  70. package/src/assets/icons/add_file.svg +14 -0
  71. package/src/assets/icons/all_borders.svg +3 -0
  72. package/src/assets/icons/bold.svg +3 -0
  73. package/src/assets/icons/border_bottom.svg +3 -0
  74. package/src/assets/icons/border_left.svg +3 -0
  75. package/src/assets/icons/border_right.svg +3 -0
  76. package/src/assets/icons/border_top.svg +3 -0
  77. package/src/assets/icons/clone_icon.svg +3 -0
  78. package/src/assets/icons/double_underline.svg +5 -0
  79. package/src/assets/icons/fill_color.svg +7 -0
  80. package/src/assets/icons/formate_painter.svg +5 -0
  81. package/src/assets/icons/full_access_icon.svg +4 -0
  82. package/src/assets/icons/history_icon.svg +19 -0
  83. package/src/assets/icons/italic.svg +3 -0
  84. package/src/assets/icons/jira.svg +3 -0
  85. package/src/assets/icons/linked_defects.svg +11 -0
  86. package/src/assets/icons/move_icon.svg +5 -0
  87. package/src/assets/icons/nlp_help_icon.svg +3 -0
  88. package/src/assets/icons/no_access_icon.svg +4 -0
  89. package/src/assets/icons/no_border.svg +3 -0
  90. package/src/assets/icons/notification_icon.svg +3 -0
  91. package/src/assets/icons/strike_through.svg +3 -0
  92. package/src/assets/icons/text_align_center.svg +3 -0
  93. package/src/assets/icons/text_align_left.svg +3 -0
  94. package/src/assets/icons/text_align_right.svg +3 -0
  95. package/src/assets/icons/text_color.svg +3 -0
  96. package/src/assets/icons/underline.svg +4 -0
  97. package/src/assets/icons/update_icon.svg +3 -0
  98. package/src/assets/icons/view_access_icon.svg +4 -0
  99. package/src/components/AppHeader/AppHeader.scss +65 -4
  100. package/src/components/AppHeader/AppHeader.stories.tsx +1 -0
  101. package/src/components/AppHeader/AppHeader.tsx +7 -5
  102. package/src/components/AttachmentButton/AttachmentButton.scss +9 -0
  103. package/src/components/AttachmentButton/AttachmentButton.stories.tsx +76 -0
  104. package/src/components/AttachmentButton/AttachmentButton.tsx +113 -0
  105. package/src/components/AttachmentButton/index.ts +1 -0
  106. package/src/components/AttachmentButton/types.ts +8 -0
  107. package/src/components/Drawer/Drawer.scss +0 -1
  108. package/src/components/ExcelFile/ChangeExcelStyles.tsx +78 -0
  109. package/src/components/ExcelFile/ColorBarselector/ColorBarSelector.scss +13 -0
  110. package/src/components/ExcelFile/ColorBarselector/ColorBarSelector.tsx +43 -0
  111. package/src/components/ExcelFile/ContextMenu/ContextMenu.scss +102 -0
  112. package/src/components/ExcelFile/ContextMenu/ContextMenu.tsx +104 -0
  113. package/src/components/ExcelFile/ExcelFile/Excel/ActiveCell.tsx +131 -0
  114. package/src/components/ExcelFile/ExcelFile/Excel/Cell.tsx +201 -0
  115. package/src/components/ExcelFile/ExcelFile/Excel/ColumnIndicator.tsx +123 -0
  116. package/src/components/ExcelFile/ExcelFile/Excel/Copied.tsx +25 -0
  117. package/src/components/ExcelFile/ExcelFile/Excel/CornerIndicator.tsx +49 -0
  118. package/src/components/ExcelFile/ExcelFile/Excel/DataEditor.tsx +37 -0
  119. package/src/components/ExcelFile/ExcelFile/Excel/DataViewer.tsx +46 -0
  120. package/src/components/ExcelFile/ExcelFile/Excel/FloatingRect.tsx +31 -0
  121. package/src/components/ExcelFile/ExcelFile/Excel/HeaderRow.tsx +5 -0
  122. package/src/components/ExcelFile/ExcelFile/Excel/Row.tsx +5 -0
  123. package/src/components/ExcelFile/ExcelFile/Excel/RowIndicator.tsx +102 -0
  124. package/src/components/ExcelFile/ExcelFile/Excel/Selected.tsx +32 -0
  125. package/src/components/ExcelFile/ExcelFile/Excel/Spreadsheet.css +144 -0
  126. package/src/components/ExcelFile/ExcelFile/Excel/Spreadsheet.tsx +494 -0
  127. package/src/components/ExcelFile/ExcelFile/Excel/Table.tsx +19 -0
  128. package/src/components/ExcelFile/ExcelFile/Excel/actions.ts +302 -0
  129. package/src/components/ExcelFile/ExcelFile/Excel/areModelsEqual.ts +18 -0
  130. package/src/components/ExcelFile/ExcelFile/Excel/context.ts +12 -0
  131. package/src/components/ExcelFile/ExcelFile/Excel/engine/engine.ts +200 -0
  132. package/src/components/ExcelFile/ExcelFile/Excel/engine/formula.ts +137 -0
  133. package/src/components/ExcelFile/ExcelFile/Excel/engine/index.ts +2 -0
  134. package/src/components/ExcelFile/ExcelFile/Excel/engine/point-graph.ts +154 -0
  135. package/src/components/ExcelFile/ExcelFile/Excel/engine/point-hash.ts +10 -0
  136. package/src/components/ExcelFile/ExcelFile/Excel/engine/point-set.ts +69 -0
  137. package/src/components/ExcelFile/ExcelFile/Excel/index.ts +48 -0
  138. package/src/components/ExcelFile/ExcelFile/Excel/matrix.ts +388 -0
  139. package/src/components/ExcelFile/ExcelFile/Excel/point-range.ts +82 -0
  140. package/src/components/ExcelFile/ExcelFile/Excel/point.ts +15 -0
  141. package/src/components/ExcelFile/ExcelFile/Excel/reducer.ts +682 -0
  142. package/src/components/ExcelFile/ExcelFile/Excel/selection.ts +257 -0
  143. package/src/components/ExcelFile/ExcelFile/Excel/types.ts +269 -0
  144. package/src/components/ExcelFile/ExcelFile/Excel/typings/fast-formula-parser.d.ts +58 -0
  145. package/src/components/ExcelFile/ExcelFile/Excel/use-dispatch.ts +8 -0
  146. package/src/components/ExcelFile/ExcelFile/Excel/use-selector.ts +9 -0
  147. package/src/components/ExcelFile/ExcelFile/Excel/util.ts +173 -0
  148. package/src/components/ExcelFile/ExcelFile/ExcelFile.scss +27 -0
  149. package/src/components/ExcelFile/ExcelFile/ExcelFile.tsx +520 -0
  150. package/src/components/ExcelFile/ExcelFile.stories.tsx +132 -0
  151. package/src/components/ExcelFile/ExcelSheetBar/ExcelSheetBar.scss +16 -0
  152. package/src/components/ExcelFile/ExcelSheetBar/ExcelSheetBar.tsx +79 -0
  153. package/src/components/ExcelFile/ExcelToolBar/ExcelToolBar.scss +22 -0
  154. package/src/components/ExcelFile/ExcelToolBar/ExcelToolBar.tsx +271 -0
  155. package/src/components/ExcelFile/ImportExcelStyles.tsx +86 -0
  156. package/src/components/ExcelFile/Types.ts +241 -0
  157. package/src/components/ExcelFile/index.ts +1 -0
  158. package/src/components/Icon/Icons.scss +2 -3
  159. package/src/components/Icon/iconList.ts +59 -1
  160. package/src/components/IconRadioGroup/IconRadioGroup.scss +60 -0
  161. package/src/components/IconRadioGroup/IconRadioGroup.stories.tsx +108 -0
  162. package/src/components/IconRadioGroup/IconRadioGroup.tsx +72 -0
  163. package/src/components/IconRadioGroup/index.ts +1 -0
  164. package/src/components/IconRadioGroup/type.ts +50 -0
  165. package/src/components/Modal/modal.scss +1 -1
  166. package/src/components/MultiSelect/MultiSelect.scss +2 -2
  167. package/src/components/RadioButton/RadioButton.scss +74 -68
  168. package/src/components/RadioButton/RadioButton.tsx +22 -15
  169. package/src/components/RadioButton/radioButtonTypes.tsx +18 -0
  170. package/src/components/RadioGroup/RadioGroup.stories.tsx +42 -1
  171. package/src/components/RadioGroup/RadioGroup.tsx +3 -0
  172. package/src/components/RadioGroup/radioGroupTypes.tsx +18 -0
  173. package/src/components/Select/Select.scss +1 -2
  174. package/src/components/Select/Select.tsx +3 -2
  175. package/src/components/Select/types.ts +5 -0
  176. package/src/components/SequentialConnectingBranch/components/Branches/Branches.scss +5 -5
  177. package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +1 -1
  178. package/src/components/Table/Table.scss +1 -0
  179. package/src/components/Table/Table.tsx +28 -13
  180. package/src/components/Table/Types.ts +8 -0
  181. package/src/components/TableTree/TableTree.scss +18 -2
  182. package/src/components/TableTree/TableTree.stories.tsx +9 -51
  183. package/src/components/TableTree/TableTree.tsx +15 -2
  184. package/src/index.ts +4 -0
@@ -0,0 +1,520 @@
1
+ import React, { useState, useRef, useEffect } from 'react';
2
+ // import './ExcelFile.scss';
3
+ // import Spreadsheet from 'react-spreadsheet';
4
+ // import ImportExcelStyles from '../ImportExcelStyles';
5
+ // import ChangeExcelStyles from '../ChangeExcelStyles';
6
+ // import { colors } from '../../../colors/colorConstants';
7
+ import ExcelToolBar from '../ExcelToolBar/ExcelToolBar';
8
+ import ExcelSheetBar from '../ExcelSheetBar/ExcelSheetBar';
9
+ import ContextMenu from '../ContextMenu/ContextMenu';
10
+ import Spreadsheet, { CellBase } from './Excel/index';
11
+ import * as Matrix from "./Excel/matrix";
12
+ import ChangeExcelStyles from './../ChangeExcelStyles';
13
+
14
+
15
+ let colors={
16
+ ff_down_arrow_color: '#acacac',
17
+ ff_up_arrow_color: '#434db8',
18
+ ff_input_up_down_arrow_color: '#B2AEAE',
19
+ white: '#ffffff',
20
+ black: '#000000',
21
+ grey_dark: '#727171',
22
+ light_gray_50: '#F2F2F2',
23
+ button_red_60: '#C50303',
24
+ };
25
+
26
+ const ExcelFile: React.FC<ExcelFileProps> = ({
27
+ excelData,
28
+ toolbar = 'show',
29
+ contextOption = [],
30
+ onSave = () => {},
31
+ }) => {
32
+ const [fileDetails, setFileDetails] = useState<{
33
+ sheetNames: string[];
34
+ }>({ sheetNames: [] });
35
+ const EmptyRow: CellBase = {
36
+ value: '',
37
+ style: {
38
+ name: 'Arial',
39
+ size: 11,
40
+ bold: false,
41
+ italic: false,
42
+ color: colors.black.replace('#', ''),
43
+ backgroundColor: colors.white.replace('#', ''),
44
+ borderColor: colors.light_gray_50.replace('#', ''),
45
+ border: {
46
+ top: 'NONE',
47
+ bottom: 'NONE',
48
+ left: 'NONE',
49
+ right: 'NONE',
50
+ },
51
+ alignment: {
52
+ horizontal: 'GENERAL',
53
+ vertical: 'BOTTOM',
54
+ wrapText: false,
55
+ },
56
+ },
57
+ };
58
+ const [selectedSheet, setSelectedSheet] = useState<{
59
+ name: string;
60
+ index: number;
61
+ }>({ name: 'defaultSheet', index: 0 });
62
+
63
+ const [worksheetsData, setWorksheetsData] = useState<{
64
+ [key: string]: Matrix.Matrix<CellBase>;
65
+ }>({defaultSheet:[[EmptyRow]]});
66
+
67
+
68
+ const [selectedSheetData, setSelectedSheetData] = useState<Matrix.Matrix<CellBase>>([
69
+ [EmptyRow]
70
+ ]);
71
+
72
+ // const [selectedValue, setSelectedValue] = useState<SelectedValue>({
73
+ // value: '',
74
+ // row: 0,
75
+ // column: 0,
76
+ // alphaCol: '',
77
+ // style: {
78
+ // name: 'Arial',
79
+ // size: 11,
80
+ // bold: false,
81
+ // italic: false,
82
+ // color: colors.black.replace('#', ''),
83
+ // backgroundColor: colors.white.replace('#', ''),
84
+ // borderColor: colors.light_gray_50.replace('#', ''),
85
+ // border: {
86
+ // top: 'NONE',
87
+ // bottom: 'NONE',
88
+ // left: 'NONE',
89
+ // right: 'NONE',
90
+ // },
91
+ // alignment: {
92
+ // horizontal: 'GENERAL',
93
+ // vertical: 'BOTTOM',
94
+ // wrapText: false,
95
+ // },
96
+ // },
97
+ // sheet: '',
98
+ // });
99
+ const [selectedCell, setSelectedCell] = useState<
100
+ { row: number; column: number }[]
101
+ >([]);
102
+ // const [formatePainter, setFormatePainter] = useState<{
103
+ // style: CellStyle | null;
104
+ // active: boolean;
105
+ // }>({
106
+ // style: null,
107
+ // active: false,
108
+ // });
109
+ const sheetRef = useRef<HTMLDivElement | null>(null);
110
+ const excelDataCopy = useRef<{ [key: string]: Matrix.Matrix<CellBase> }>({defaultSheet:[[]]});
111
+ const [contextData, setContextData] = useState<ContextMenuState>({
112
+ visible: false,
113
+ x: 0,
114
+ y: 0,
115
+ type: 'cell',
116
+ });
117
+
118
+
119
+ let checkVal = (val:any) => {
120
+ if (val === undefined || val === null) {
121
+ return null;
122
+ }
123
+ return val;
124
+ };
125
+ useEffect(() => {
126
+ const payload = excelData;
127
+ const sheetNames = payload.sheets.map((e) => e.sheetName);
128
+ setFileDetails({ sheetNames });
129
+ if (sheetNames.length > 0) {
130
+ setSelectedSheet({ name: sheetNames[0]?sheetNames[0]:"", index: 0 });
131
+ }
132
+
133
+ const newWorksheetsData: { [key: string]: Matrix.Matrix<CellBase> } = {};
134
+ payload.sheets.forEach((sheet) => {
135
+ const sheetName = sheet.sheetName;
136
+ const json = sheet.data;
137
+ const maxRows = Math.max(26, json.length + 2);
138
+ const maxCols = Math.max(26, Math.max(...json.map((row) => row.length)) + 2);
139
+
140
+ let spreadsheetData: Matrix.Matrix<CellBase> = Array.from({ length: maxRows }, () =>
141
+ Array.from({ length: maxCols }, () => EmptyRow)
142
+ );
143
+ json.forEach((row, rowIndex) => {
144
+ row.forEach((cell, colIndex) => {
145
+ if (rowIndex < maxRows && colIndex < maxCols) {
146
+ if (!spreadsheetData[rowIndex]) {
147
+ spreadsheetData[rowIndex] = [];
148
+ }
149
+ spreadsheetData[rowIndex][colIndex] = {
150
+ value: checkVal(cell.value),
151
+ style: cell.style,
152
+ type:true
153
+ };
154
+ }
155
+ });
156
+ });
157
+
158
+ newWorksheetsData[sheetName] = spreadsheetData;
159
+ });
160
+ excelDataCopy.current = newWorksheetsData;
161
+ setWorksheetsData(newWorksheetsData);
162
+ const firstSheetName = Object.keys(newWorksheetsData)[0];
163
+ if (firstSheetName && newWorksheetsData[firstSheetName]!==undefined) {
164
+ setSelectedSheetData(newWorksheetsData[firstSheetName]);
165
+ }
166
+ }, [excelData]);
167
+
168
+
169
+ const handleSaveData = () => {
170
+ setWorksheetsData((prevData) => {
171
+ let updatedData = { ...prevData };
172
+ updatedData[selectedSheet.name] = selectedSheetData;
173
+ return updatedData;
174
+ });
175
+
176
+ const dataToSave = {
177
+ sheets: fileDetails.sheetNames.map((sheetName) => ({
178
+ sheetName: sheetName,
179
+ data: (worksheetsData[sheetName] ?? []).map((row) =>
180
+ row.map((cell) => ({
181
+ value: cell?.value,
182
+ style: cell?.style,
183
+ }))
184
+ ),
185
+ })),
186
+ };
187
+ onSave(dataToSave);
188
+ };
189
+
190
+ let handleSave = (e: KeyboardEvent) => {
191
+ if (e.ctrlKey && e.key === 's') {
192
+ e.preventDefault();
193
+ handleSaveData();
194
+ }
195
+ };
196
+ useEffect(() => {
197
+ document.addEventListener('keydown', handleSave);
198
+ return () => {
199
+ document.removeEventListener('keydown', handleSave);
200
+ };
201
+ }, [worksheetsData]);
202
+
203
+ const handleSheetChange = (name: string, index: number) => {
204
+ setWorksheetsData((prevData) => {
205
+ let updatedData = prevData;
206
+ updatedData[selectedSheet.name] = selectedSheetData;
207
+ return updatedData;
208
+ });
209
+ setSelectedSheet({ index, name });
210
+ };
211
+
212
+ let addRow = () => {
213
+ let updateSheet: Matrix.Matrix<CellBase> = worksheetsData[selectedSheet.name] ?? []; // Fallback to an empty array if undefined
214
+ // let insertRow: CellBase[] = [];
215
+
216
+ // insertRow = Array.from({ length: updateSheet[0]?.length ?? 0 }, () => EmptyRow); // Fallback to 0 if the length is undefined
217
+
218
+ // updateSheet.splice(selectedValue.row - 1, 0, insertRow); // Add the new row
219
+
220
+ setWorksheetsData((prev) => ({
221
+ ...prev,
222
+ [selectedSheet.name]: updateSheet,
223
+ }));
224
+ };
225
+
226
+
227
+ let deleteRow = () => {
228
+
229
+ };
230
+
231
+ let addColumn = () => {
232
+ let updateSheet: Matrix.Matrix<CellBase> = worksheetsData[selectedSheet.name] ?? []; // Fallback to empty array if undefined
233
+ if (updateSheet.length > 0) {
234
+ // updateSheet.forEach((row) => {
235
+ // row.splice(selectedValue.column, 0, EmptyRow); // Insert EmptyRow at the specified column index
236
+ // });
237
+ setWorksheetsData((prev) => ({
238
+ ...prev,
239
+ [selectedSheet.name]: updateSheet,
240
+ }));
241
+ }
242
+ };
243
+
244
+ let deleteColumn = () => {
245
+ let updateSheet: Matrix.Matrix<CellBase> = worksheetsData[selectedSheet.name] ?? [];
246
+
247
+ // Ensure there is at least one row in the sheet and that the first row exists
248
+ if (updateSheet.length > 0 && updateSheet[0]) {
249
+ // const firstRow = updateSheet[0]; // Safely access the first row
250
+ // const length = firstRow.length; // Get the length of the first row
251
+
252
+ // Proceed only if the column index is within bounds
253
+ // if (selectedValue.column >= 0 && selectedValue.column < length) {
254
+ // // Delete the specified column from each row
255
+ // updateSheet.forEach((row) => row.splice(selectedValue.column, 1));
256
+
257
+ // // Update the worksheets data with the modified sheet
258
+ // setWorksheetsData((prev) => ({
259
+ // ...prev,
260
+ // [selectedSheet.name]: updateSheet,
261
+ // }));
262
+ // }
263
+ }
264
+ };
265
+
266
+ let addSheet = () => {
267
+ const generateUniqueSheetName = (
268
+ baseName: string,
269
+ existingNames: string[]
270
+ ): string => {
271
+ let newName = baseName;
272
+ let counter = 1;
273
+ while (existingNames.includes(newName)) {
274
+ newName = `${baseName}${counter}`;
275
+ counter++;
276
+ }
277
+ return newName;
278
+ };
279
+ const baseName = 'NewSheet';
280
+ const existingSheetNames = fileDetails.sheetNames;
281
+ const newSheetName = generateUniqueSheetName(baseName, existingSheetNames);
282
+ const newSheetData = Array.from({ length: 25 }, () =>
283
+ Array.from({ length: 26 }, () => EmptyRow)
284
+ );
285
+
286
+ setFileDetails((prev) => ({
287
+ sheetNames: prev.sheetNames.concat(newSheetName),
288
+ }));
289
+
290
+ setWorksheetsData({ ...worksheetsData, [newSheetName]: newSheetData });
291
+ setSelectedSheet({
292
+ index: fileDetails.sheetNames.length,
293
+ name: newSheetName,
294
+ });
295
+ };
296
+
297
+ let deleteSheet = () => {
298
+ const { sheetNames } = fileDetails;
299
+ const { index, name } = selectedSheet;
300
+
301
+ if (sheetNames.length > 1) {
302
+ const updatedSheetNames = sheetNames.slice();
303
+ updatedSheetNames.splice(index, 1);
304
+
305
+ const { [name]: _, ...updatedWorksheetsData } = worksheetsData;
306
+
307
+ setFileDetails((prev) => ({
308
+ ...prev,
309
+ sheetNames: updatedSheetNames,
310
+ }));
311
+ setWorksheetsData(updatedWorksheetsData);
312
+
313
+ const newIndex = Math.min(index, updatedSheetNames.length - 1);
314
+
315
+ const newSheetName = updatedSheetNames[newIndex] ?? "";
316
+
317
+ setSelectedSheet({
318
+ index: newIndex,
319
+ name: newSheetName,
320
+ });
321
+ } else {
322
+ alert('Cannot delete the last sheet.');
323
+ }
324
+ };
325
+
326
+ const contextAction: {
327
+ addRow: () => void;
328
+ deleteRow: () => void;
329
+ addColumn: () => void;
330
+ deleteColumn: () => void;
331
+ addSheet: () => void;
332
+ deleteSheet: () => void;
333
+ } = {
334
+ addRow,
335
+ deleteRow,
336
+ addColumn,
337
+ deleteColumn,
338
+ addSheet,
339
+ deleteSheet,
340
+ };
341
+
342
+ const formatePaint = () => {
343
+
344
+ };
345
+
346
+
347
+ const handleSelect = (e: any) => {
348
+ if (e.hasOwnProperty('range')) {
349
+ let rowStart = e.range.start.row;
350
+ let rowEnd = e.range.end.row;
351
+ let columnStart = e.range.start.column;
352
+ let columnEnd = e.range.end.column;
353
+ let cell: { row: number; column: number }[] = [];
354
+ for (let i = rowStart; i <= rowEnd; i++) {
355
+ for (let j = columnStart; j <= columnEnd; j++) {
356
+ cell.push({ row: i, column: j });
357
+ }
358
+ }
359
+ setContextData((prev) => ({ ...prev, type: 'cell' }));
360
+ setSelectedCell(cell);
361
+ } else {
362
+ if (e.hasOwnProperty('start') && e.hasOwnProperty('end')) {
363
+ const columnName = e.constructor.name;
364
+ if (columnName.includes('EntireColumnsSelection')) {
365
+ setContextData((prev) => ({ ...prev, type: 'column' }));
366
+ } else if (columnName.includes('EntireRowsSelection')) {
367
+ setContextData((prev) => ({ ...prev, type: 'row' }));
368
+ }
369
+ }
370
+ }
371
+ };
372
+
373
+ const contextSelect = (event: React.MouseEvent) => {
374
+ event.preventDefault();
375
+ const sheetTop = sheetRef.current?.getBoundingClientRect().top;
376
+ const sheetLeft = sheetRef.current?.getBoundingClientRect().left;
377
+
378
+ if (sheetLeft !== undefined && sheetTop !== undefined) {
379
+ const contextMenuHeight =
380
+ contextData.type === 'cell' ? contextOption.length * 35 + 40 : 110;
381
+ const adjustedY = event.pageY - sheetTop - window.scrollY;
382
+ const availableSpace = window.innerHeight - adjustedY;
383
+ const contextMenuWidth = 250;
384
+ const adjustedX = event.pageX - sheetLeft - window.scrollX;
385
+ const availableXSpace = window.innerWidth - adjustedX;
386
+
387
+ const finalY =
388
+ availableSpace < contextMenuHeight
389
+ ? adjustedY - contextMenuHeight
390
+ : adjustedY;
391
+
392
+ const finalX =
393
+ availableXSpace < contextMenuWidth
394
+ ? adjustedX - contextMenuWidth
395
+ : adjustedX;
396
+
397
+ const target = event.target as HTMLElement;
398
+ const isCell =
399
+ target.classList.contains('Spreadsheet__active-cell') &&
400
+ contextData.type === 'cell';
401
+ const isHeader =
402
+ target.classList.contains('Spreadsheet__header--selected') &&
403
+ (contextData.type === 'row' || contextData.type === 'column');
404
+ const isSheetTab =
405
+ target.classList.contains('tab-request') &&
406
+ contextData.type === 'sheet_options';
407
+
408
+ if (isCell || isHeader || isSheetTab) {
409
+ setContextData((prev) => ({
410
+ ...prev,
411
+ visible: true,
412
+ x: finalX,
413
+ y: finalY,
414
+ }));
415
+ } else {
416
+ setContextData((prev) => ({
417
+ ...prev,
418
+ visible: false,
419
+ x: finalX,
420
+ y: finalY,
421
+ }));
422
+ }
423
+ }
424
+ };
425
+
426
+ const sheetContext = (
427
+ _: React.MouseEvent<Element, MouseEvent>,
428
+ name: string,
429
+ index: number
430
+ ) => {
431
+
432
+ setSelectedSheet({ index, name });
433
+ setContextData((prev) => ({
434
+ ...prev,
435
+ type: 'sheet_options',
436
+ }));
437
+ };
438
+
439
+ const createStyler =
440
+ (selectedCell: { row: number; column: number }[]) =>
441
+ async (styleType: any, value: any) => {
442
+ ChangeExcelStyles(setWorksheetsData, {
443
+ sheetName: selectedSheet.name,
444
+ styleType,
445
+ value,
446
+ selectedCell,
447
+ });
448
+ };
449
+
450
+ const applyStyle = createStyler(selectedCell);
451
+
452
+ useEffect(() => {
453
+ const currentSheet = worksheetsData[selectedSheet.name] ?? [];
454
+ const validSheetData: CellBase[][] = currentSheet.map(row =>
455
+ row.map(cell => cell ? { value: cell.value, style: cell.style } : { value: "", style: EmptyRow.style })
456
+ );
457
+
458
+ setSelectedSheetData(validSheetData);
459
+ }, [worksheetsData, selectedSheet.name]);
460
+
461
+
462
+ useEffect(() => {
463
+ let timeGap = setTimeout(() => {
464
+ setWorksheetsData((prevData) => {
465
+ let updatedData = prevData;
466
+ updatedData[selectedSheet.name] = selectedSheetData;
467
+ return updatedData;
468
+ }); }, 1000);
469
+ return () => {
470
+ clearTimeout(timeGap);
471
+ };
472
+ }, [selectedSheetData]);
473
+
474
+ return (
475
+ <div className="excel-page">
476
+ <ExcelToolBar
477
+ toolbar={toolbar}
478
+ applyStyle={applyStyle}
479
+ formatePaint={formatePaint}
480
+ />
481
+
482
+ {fileDetails.sheetNames.length > 0 && (
483
+ <div className="excel-book" >
484
+ <div
485
+ ref={sheetRef}
486
+ onContextMenu={contextSelect}
487
+ className="excel-sheet"
488
+ >
489
+ <Spreadsheet
490
+ data={selectedSheetData}
491
+ onActivate={() => {
492
+ setContextData((prev) => ({ ...prev, visible: false }));
493
+ }}
494
+ onSelect={handleSelect}
495
+ />
496
+
497
+ </div>
498
+
499
+ <ExcelSheetBar
500
+ selectedSheet={selectedSheet}
501
+ fileDetails={fileDetails}
502
+ handleSheetChange={handleSheetChange}
503
+ contextMenu={sheetContext}
504
+ contextSelect={contextSelect}
505
+ addSheet={addSheet}
506
+ />
507
+
508
+ <ContextMenu
509
+ customContext={contextOption}
510
+ contextAction={contextAction}
511
+ contextData={contextData}
512
+ setContextData={setContextData}
513
+ />
514
+ </div>
515
+ )}
516
+ </div>
517
+ );
518
+ };
519
+
520
+ export default ExcelFile;
@@ -0,0 +1,132 @@
1
+ import type { Meta, StoryObj } from '@storybook/react';
2
+ import ExcelFile from './ExcelFile/ExcelFile';
3
+
4
+ const meta: Meta<typeof ExcelFile> = {
5
+ title: 'Components/ExcelFile',
6
+ component: ExcelFile,
7
+ tags: ['autodocs'],
8
+ argTypes: {
9
+ toolbar: {
10
+ control: { type: 'radio' },
11
+ options: ['show', 'disable', 'hide'],
12
+ description: 'Controls whether the toolbar is shown, disabled, or hidden',
13
+ },
14
+ excelData: {
15
+ description: 'The Excel data containing sheets and their content',
16
+ },
17
+ contextOption: {
18
+ description: 'Provide context menu options for actions like right-click',
19
+ },
20
+ onSave: {
21
+ description: 'Callback function to save the Excel data',
22
+ },
23
+ },
24
+ };
25
+
26
+ type Story = StoryObj<typeof ExcelFile>;
27
+
28
+ export const Default: Story = {
29
+ args: {
30
+ excelData: {
31
+ sheets: [
32
+ {
33
+ sheetName: "Sheet1",
34
+ data: [
35
+ [
36
+ {
37
+ value: "A1",
38
+ style: {
39
+ name: "Arial",
40
+ size: 12,
41
+ bold: true,
42
+ fontSize: "12px",
43
+ italic: false,
44
+ fontFamily: "Arial",
45
+ color: "red",
46
+ backgroundColor: "white",
47
+ border: { top: "1px solid black", bottom: "1px solid black", left: "1px solid black", right: "1px solid black" },
48
+ },
49
+ },
50
+ {
51
+ value: "B1",
52
+ style: {
53
+ name: "Arial",
54
+ size: 12,
55
+ bold: false,
56
+ fontSize: "12px",
57
+ italic: false,
58
+ fontFamily: "Arial",
59
+ color: "black",
60
+ backgroundColor: "white",
61
+ border: { top: "1px solid black", bottom: "1px solid black", left: "1px solid black", right: "1px solid black" },
62
+ },
63
+ },
64
+ ],
65
+ [
66
+ {
67
+ value: "A2",
68
+ style: {
69
+ name: "Arial",
70
+ size: 12,
71
+ bold: true,
72
+ fontSize: "12px",
73
+ italic: false,
74
+ fontFamily: "Arial",
75
+ color: "black",
76
+ backgroundColor: "white",
77
+ border: { top: "1px solid black", bottom: "1px solid black", left: "1px solid black", right: "1px solid black" },
78
+ },
79
+ },
80
+ {
81
+ value: "B2",
82
+ style: {
83
+ name: "Arial",
84
+ size: 12,
85
+ bold: false,
86
+ fontSize: "12px",
87
+ italic: false,
88
+ fontFamily: "Arial",
89
+ color: "black",
90
+ backgroundColor: "white",
91
+ border: { top: "1px solid black", bottom: "1px solid black", left: "1px solid black", right: "1px solid black" },
92
+ },
93
+ },
94
+ ],
95
+ ],
96
+ },
97
+ ],
98
+ },
99
+ toolbar: 'show',
100
+ contextOption: [
101
+ {
102
+ name: 'first option',
103
+ title: 'Custom Option 1: Get Data',
104
+ action: () => {},
105
+ },
106
+ {
107
+ name: 'second option',
108
+ title: 'Custom Option 2',
109
+ action: () => {},
110
+ },
111
+ {
112
+ name: 'third option',
113
+ title: 'Custom Option 2',
114
+ action: () => {},
115
+ },
116
+ {
117
+ name: 'fourth option',
118
+ title: 'Custom Option 2',
119
+ action: () => {},
120
+ },
121
+ {
122
+ name: 'fifth option',
123
+ title: 'Custom Option 2',
124
+ action: () => {},
125
+ },
126
+ ],
127
+ onSave: () => {},
128
+ },
129
+ };
130
+
131
+
132
+ export default meta;
@@ -0,0 +1,16 @@
1
+ @import '../../../assets/styles/colors';
2
+ @import '../../../assets/styles/fonts';
3
+
4
+ .sheet-bar {
5
+ background: $white_1;
6
+ // display: flex;
7
+ padding: 4px;
8
+ height: 40px;
9
+ overflow-x: scroll;
10
+ overflow-y: hidden;
11
+ align-items: center;
12
+
13
+ &::-webkit-scrollbar {
14
+ height: 8px;
15
+ }
16
+ }