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,131 @@
1
+ import * as React from "react";
2
+ import classnames from "classnames";
3
+ import * as Actions from "./actions";
4
+ import * as Types from "./types";
5
+ import * as Point from "./point";
6
+ import useSelector from "./use-selector";
7
+ import useDispatch from "./use-dispatch";
8
+ import { getCellDimensions } from "./util";
9
+ import * as Matrix from "./matrix";
10
+
11
+ type Props = {
12
+ DataEditor: Types.DataEditorComponent;
13
+ };
14
+
15
+ const ActiveCell: React.FC<Props> = (props) => {
16
+ const rootRef = React.useRef<HTMLDivElement>(null);
17
+ const dispatch = useDispatch();
18
+ const setCellData = React.useCallback(
19
+ (active: Point.Point, data: Types.CellBase) =>
20
+ dispatch(Actions.setCellData(active, data)),
21
+ [dispatch]
22
+ );
23
+ const edit = React.useCallback(() => dispatch(Actions.edit()), [dispatch]);
24
+ const commit = React.useCallback(
25
+ (changes: Types.CommitChanges<Types.CellBase>) =>
26
+ dispatch(Actions.commit(changes)),
27
+ [dispatch]
28
+ );
29
+ const view = React.useCallback(() => {
30
+ dispatch(Actions.view());
31
+ }, [dispatch]);
32
+ const active = useSelector((state) => state.active);
33
+ const mode = useSelector((state) => state.mode);
34
+ const cell = useSelector((state) =>
35
+ state.active ? Matrix.get(state.active, state.model.data) : undefined
36
+ );
37
+ const dimensions = useSelector((state) =>
38
+ active
39
+ ? getCellDimensions(active, state.rowDimensions, state.columnDimensions)
40
+ : undefined
41
+ );
42
+ const hidden = React.useMemo(
43
+ () => !active || !dimensions,
44
+ [active, dimensions]
45
+ );
46
+
47
+ const initialCellRef = React.useRef<Types.CellBase | undefined>(undefined);
48
+ const prevActiveRef = React.useRef<Point.Point | null>(null);
49
+ const prevCellRef = React.useRef<Types.CellBase | undefined>(undefined);
50
+
51
+ const handleChange = React.useCallback(
52
+ (cell: Types.CellBase) => {
53
+ if (!active) {
54
+ return;
55
+ }
56
+ setCellData(active, cell);
57
+ },
58
+ [setCellData, active]
59
+ );
60
+
61
+ React.useEffect(() => {
62
+ const root = rootRef.current;
63
+ if (!hidden && root) {
64
+ root.focus();
65
+ }
66
+ }, [rootRef, hidden]);
67
+
68
+ React.useEffect(() => {
69
+ const prevActive = prevActiveRef.current;
70
+ const prevCell = prevCellRef.current;
71
+ prevActiveRef.current = active;
72
+ prevCellRef.current = cell;
73
+
74
+ if (!prevActive || !prevCell) {
75
+ return;
76
+ }
77
+
78
+ const coordsChanged =
79
+ active?.row !== prevActive.row || active?.column !== prevActive.column;
80
+ const exitedEditMode = mode !== "edit";
81
+
82
+ if (coordsChanged || exitedEditMode) {
83
+ const initialCell = initialCellRef.current;
84
+ if (prevCell !== initialCell) {
85
+ commit([
86
+ {
87
+ prevCell: initialCell || null,
88
+ nextCell: prevCell,
89
+ },
90
+ ]);
91
+ } else if (!coordsChanged && cell !== prevCell) {
92
+ commit([
93
+ {
94
+ prevCell,
95
+ nextCell: cell || null,
96
+ },
97
+ ]);
98
+ }
99
+ initialCellRef.current = cell;
100
+ }
101
+ });
102
+
103
+ const DataEditor = (cell && cell.DataEditor) || props.DataEditor;
104
+ const readOnly = cell && cell.readOnly;
105
+
106
+ return hidden ? null : (
107
+ <div
108
+ ref={rootRef}
109
+ className={classnames(
110
+ "Spreadsheet__active-cell",
111
+ `Spreadsheet__active-cell--${mode}`
112
+ )}
113
+ style={dimensions}
114
+ onClick={mode === "view" && !readOnly ? edit : undefined}
115
+ tabIndex={0}
116
+ >
117
+ {mode === "edit" && active && (
118
+ <DataEditor
119
+ row={active.row}
120
+ column={active.column}
121
+ cell={cell}
122
+ // @ts-ignore
123
+ onChange={handleChange}
124
+ exitEditMode={view}
125
+ />
126
+ )}
127
+ </div>
128
+ );
129
+ };
130
+
131
+ export default ActiveCell;
@@ -0,0 +1,201 @@
1
+ import * as React from 'react';
2
+ import classnames from 'classnames';
3
+ import * as Matrix from './matrix';
4
+ import * as Types from './types';
5
+ import * as Point from './point';
6
+ import * as Actions from './actions';
7
+ import { isActive, getOffsetRect } from './util';
8
+ import useDispatch from './use-dispatch';
9
+ import useSelector from './use-selector';
10
+
11
+ export const Cell: React.FC<Types.CellComponentProps> = ({
12
+ row,
13
+ column,
14
+ DataViewer,
15
+ selected,
16
+ active,
17
+ dragging,
18
+ mode,
19
+ data,
20
+ evaluatedData,
21
+ select,
22
+ activate,
23
+ setCellDimensions,
24
+ setCellData,
25
+ }): React.ReactElement => {
26
+ const [isDotDragging, setIsDotDragging] = React.useState(false);
27
+ const [first, setFirst] = React.useState(true);
28
+ const rootRef = React.useRef<HTMLTableCellElement | null>(null);
29
+ const point = React.useMemo(
30
+ (): Point.Point => ({
31
+ row,
32
+ column,
33
+ }),
34
+ [row, column]
35
+ );
36
+
37
+ const handleMouseDown = React.useCallback(
38
+ (event: React.MouseEvent<HTMLTableCellElement>) => {
39
+ if (mode === 'view') {
40
+ setCellDimensions(point, getOffsetRect(event.currentTarget));
41
+
42
+ if (event.shiftKey) {
43
+ select(point);
44
+ } else {
45
+ activate(point);
46
+ }
47
+ }
48
+ },
49
+ [mode, setCellDimensions, point, select, activate]
50
+ );
51
+
52
+ const handleMouseOver = React.useCallback(
53
+ (event: React.MouseEvent<HTMLTableCellElement>) => {
54
+ if (dragging && first && !isDotDragging) {
55
+ setCellDimensions(point, getOffsetRect(event.currentTarget));
56
+ select(point);
57
+ }
58
+ },
59
+ [setCellDimensions, select, dragging, point, first, isDotDragging]
60
+ );
61
+
62
+ const handleDotDown = React.useCallback(
63
+ (event: React.MouseEvent<HTMLTableCellElement>) => {
64
+ setIsDotDragging(true);
65
+ setCellDimensions(point, getOffsetRect(event.currentTarget));
66
+
67
+ if (event.shiftKey) {
68
+ select(point);
69
+ } else {
70
+ activate(point);
71
+ }
72
+ },
73
+ [setCellDimensions, point, select, activate]
74
+ );
75
+
76
+ const handleDotOver = React.useCallback(
77
+ (event: React.MouseEvent<HTMLTableCellElement>) => {
78
+ setFirst(false);
79
+ if (dragging && isDotDragging) {
80
+ setCellDimensions(point, getOffsetRect(event.currentTarget));
81
+ select(point);
82
+ }
83
+ },
84
+ [setCellDimensions, select, dragging, point, isDotDragging]
85
+ );
86
+
87
+ React.useEffect(() => {
88
+ const root = rootRef.current;
89
+ if (selected && root) {
90
+ setCellDimensions(point, getOffsetRect(root));
91
+ }
92
+ if (root && active && mode === 'view') {
93
+ root.focus();
94
+ }
95
+ }, [setCellDimensions, selected, active, mode, point, data]);
96
+
97
+ if (data && data.DataViewer) {
98
+ // @ts-ignore
99
+ DataViewer = data.DataViewer;
100
+ }
101
+
102
+ return (
103
+ <td
104
+ ref={rootRef}
105
+ className={classnames('Spreadsheet__cell', data?.className, {
106
+ 'Spreadsheet__active-cell': active || dragging,
107
+ })}
108
+ onMouseEnter={handleMouseOver} // Handle drag when mouse enters
109
+ onMouseDown={handleMouseDown}
110
+ tabIndex={0}
111
+ >
112
+ <DataViewer
113
+ row={row}
114
+ column={column}
115
+ cell={data}
116
+ evaluatedCell={evaluatedData}
117
+ setCellData={setCellData}
118
+ />
119
+ <div
120
+ className="Selection_dot"
121
+ onMouseOver={handleDotOver}
122
+ onMouseDown={handleDotDown}
123
+ ></div>
124
+ </td>
125
+ );
126
+ };
127
+
128
+ export const enhance = (
129
+ CellComponent: React.ComponentType<Types.CellComponentProps>
130
+ ): React.FC<
131
+ Omit<
132
+ Types.CellComponentProps,
133
+ | "selected"
134
+ | "active"
135
+ | "copied"
136
+ | "dragging"
137
+ | "mode"
138
+ | "data"
139
+ | "select"
140
+ | "activate"
141
+ | "setCellDimensions"
142
+ >
143
+ > => {
144
+ return function CellWrapper(props) {
145
+ const { row, column } = props;
146
+ const dispatch = useDispatch();
147
+ const point = React.useMemo(
148
+ (): Point.Point => ({
149
+ row,
150
+ column,
151
+ }),
152
+ [row, column]
153
+ );
154
+ const setCellData = React.useCallback(
155
+ (data: Types.CellBase) => dispatch(Actions.setCellData(point, data)),
156
+ [dispatch, point]
157
+ );
158
+ const select = React.useCallback(
159
+ (point: Point.Point) => dispatch(Actions.select(point)),
160
+ [dispatch]
161
+ );
162
+ const activate = React.useCallback(
163
+ (point: Point.Point) => dispatch(Actions.activate(point)),
164
+ [dispatch]
165
+ );
166
+ const setCellDimensions = React.useCallback(
167
+ (point: Point.Point, dimensions: Types.Dimensions) =>
168
+ dispatch(Actions.setCellDimensions(point, dimensions)),
169
+ [dispatch]
170
+ );
171
+ const active = useSelector((state) => isActive(state.active, point));
172
+ const mode = useSelector((state) => (active ? state.mode : "view"));
173
+ const data = useSelector((state) => Matrix.get(point, state.model.data));
174
+ const evaluatedData = useSelector((state) =>
175
+ Matrix.get(point, state.model.evaluatedData)
176
+ );
177
+
178
+ const selected = useSelector((state) =>
179
+ state.selected.has(state.model.data, point)
180
+ );
181
+ const dragging = useSelector((state) => state.dragging);
182
+ const copied = useSelector((state) => state.copied?.has(point) || false);
183
+
184
+ return (
185
+ <CellComponent
186
+ {...props}
187
+ selected={selected}
188
+ active={active}
189
+ copied={copied}
190
+ dragging={dragging}
191
+ mode={mode}
192
+ evaluatedData={evaluatedData}
193
+ data={data}
194
+ select={select}
195
+ activate={activate}
196
+ setCellDimensions={setCellDimensions}
197
+ setCellData={setCellData}
198
+ />
199
+ );
200
+ };
201
+ };
@@ -0,0 +1,123 @@
1
+ import * as React from "react";
2
+ import classNames from "classnames";
3
+ import * as Types from "./types";
4
+ import * as Point from "./point";
5
+ import * as Actions from "./actions";
6
+ import useDispatch from "./use-dispatch";
7
+ import useSelector from "./use-selector";
8
+
9
+ const ColumnIndicator: Types.ColumnIndicatorComponent = ({
10
+ column,
11
+ label,
12
+ selected,
13
+ onSelect,
14
+ }) => {
15
+ const dispatch = useDispatch();
16
+ const [width, setWidth] = React.useState(100);
17
+
18
+ // Function to handle the start of the resize (mouse down)
19
+ const onMouseDown = (e: React.MouseEvent) => {
20
+ const startX = e.clientX;
21
+
22
+ // Function to handle mouse movement (resize)
23
+ const onMouseMove = (moveEvent: MouseEvent) => {
24
+ const newWidth = width + (moveEvent.clientX - startX);
25
+ setWidth(newWidth);
26
+
27
+ // const selectedAllRow = document.querySelector(".Spreadsheet__floating-rect--selected");
28
+ // const selectedSingleRow = document.querySelector(".Spreadsheet__active-cell");
29
+
30
+ // // If the element exists, update its height
31
+ // if (selectedAllRow instanceof HTMLElement&&selectedSingleRow instanceof HTMLElement) {
32
+ // selectedAllRow.style.width = `${newWidth}px`; // Set the width
33
+ // selectedSingleRow.style.width = `${newWidth}px`; // Set the width
34
+ // }
35
+ };
36
+
37
+ // Function to stop the resizing (mouse up)
38
+ const onMouseUp = () => {
39
+ document.removeEventListener("mousemove", onMouseMove);
40
+ document.removeEventListener("mouseup", onMouseUp);
41
+ };
42
+
43
+ // Add event listeners for mouse move and mouse up
44
+ document.addEventListener("mousemove", onMouseMove);
45
+ document.addEventListener("mouseup", onMouseUp);
46
+ };
47
+
48
+ const activate = React.useCallback(
49
+ (point: Point.Point) => dispatch(Actions.activate(point)),
50
+ [dispatch]
51
+ );
52
+
53
+ // Handle column header click
54
+ const handleClick = React.useCallback(
55
+ (event: React.MouseEvent) => {
56
+ onSelect(column, event.shiftKey);
57
+ },
58
+ [onSelect, column]
59
+ );
60
+
61
+
62
+ return (
63
+ <th
64
+ style={{ minWidth: `${width}px`, position: "relative" }} // Use dynamic width
65
+ className={classNames("Spreadsheet__header", {
66
+ "Spreadsheet__header--selected": selected,
67
+ })}
68
+ onClick={handleClick}
69
+ tabIndex={0}
70
+ >
71
+ {label !== undefined ? label : columnIndexToLabel(column)}
72
+ <div
73
+ onMouseDown={onMouseDown}
74
+ onClick={()=>{activate}}
75
+ style={{
76
+ zIndex: "inherit",
77
+ width: "2px",
78
+ position: "absolute",
79
+ right: 0,
80
+ top: 0,
81
+ height: "100%",
82
+ cursor: "ew-resize",
83
+ }}
84
+ />
85
+ </th>
86
+ );
87
+ };
88
+
89
+ export default ColumnIndicator;
90
+
91
+ export const enhance = (
92
+ ColumnIndicatorComponent: Types.ColumnIndicatorComponent
93
+ ): React.FC<Omit<Types.ColumnIndicatorProps, "selected" | "onSelect">> => {
94
+ return function ColumnIndicatorWrapper(props) {
95
+ const dispatch = useDispatch();
96
+ const selectEntireColumn = React.useCallback(
97
+ (column: number, extend: boolean) =>
98
+ dispatch(Actions.selectEntireColumn(column, extend)),
99
+ [dispatch]
100
+ );
101
+ const selected = useSelector((state) =>
102
+ state.selected.hasEntireColumn(props.column)
103
+ );
104
+ return (
105
+ <ColumnIndicatorComponent
106
+ {...props}
107
+ selected={selected}
108
+ onSelect={selectEntireColumn}
109
+ />
110
+ );
111
+ };
112
+ };
113
+
114
+ // Utility function to convert column index to label (e.g., 0 -> A, 1 -> B, etc.)
115
+ function columnIndexToLabel(column: number): string {
116
+ let label = "";
117
+ let index = column;
118
+ while (index >= 0) {
119
+ label = String.fromCharCode(65 + (index % 26)) + label;
120
+ index = Math.floor(index / 26) - 1;
121
+ }
122
+ return label;
123
+ }
@@ -0,0 +1,25 @@
1
+ import * as React from "react";
2
+ import FloatingRect from "./FloatingRect";
3
+ import { getRangeDimensions } from "./util";
4
+ import useSelector from "./use-selector";
5
+
6
+ const Copied: React.FC = () => {
7
+ const range = useSelector((state) => state.copied);
8
+ const dimensions = useSelector(
9
+ (state) =>
10
+ range &&
11
+ getRangeDimensions(state.rowDimensions, state.columnDimensions, range)
12
+ );
13
+ const hidden = range === null;
14
+
15
+ return (
16
+ <FloatingRect
17
+ variant="copied"
18
+ dimensions={dimensions}
19
+ hidden={hidden}
20
+ dragging={false}
21
+ />
22
+ );
23
+ };
24
+
25
+ export default Copied;
@@ -0,0 +1,49 @@
1
+ import * as React from "react";
2
+ import classNames from "classnames";
3
+ import * as Actions from "./actions";
4
+ import { EntireWorksheetSelection } from "./selection";
5
+ import * as Types from "./types";
6
+ import useDispatch from "./use-dispatch";
7
+ import useSelector from "./use-selector";
8
+
9
+ const CornerIndicator: Types.CornerIndicatorComponent = ({
10
+ selected,
11
+ onSelect,
12
+ }) => {
13
+ const handleClick = React.useCallback(() => {
14
+ onSelect();
15
+ }, [onSelect]);
16
+ return (
17
+ <th
18
+ className={classNames("Spreadsheet__header", {
19
+ "Spreadsheet__header--selected": selected,
20
+ })}
21
+ onClick={handleClick}
22
+ tabIndex={0}
23
+ />
24
+ );
25
+ };
26
+
27
+ export default CornerIndicator;
28
+
29
+ export const enhance = (
30
+ CornerIndicatorComponent: Types.CornerIndicatorComponent
31
+ ): React.FC<Omit<Types.CornerIndicatorProps, "selected" | "onSelect">> => {
32
+ return function CornerIndicatorWrapper(props) {
33
+ const dispatch = useDispatch();
34
+ const selectEntireWorksheet = React.useCallback(
35
+ () => dispatch(Actions.selectEntireWorksheet()),
36
+ [dispatch]
37
+ );
38
+ const selected = useSelector(
39
+ (state) => state.selected instanceof EntireWorksheetSelection
40
+ );
41
+ return (
42
+ <CornerIndicatorComponent
43
+ {...props}
44
+ selected={selected}
45
+ onSelect={selectEntireWorksheet}
46
+ />
47
+ );
48
+ };
49
+ };
@@ -0,0 +1,37 @@
1
+ import * as React from "react";
2
+ import * as Types from "./types";
3
+ import { moveCursorToEnd } from "./util";
4
+
5
+ /** The default Spreadsheet DataEditor component */
6
+ const DataEditor: React.FC<Types.DataEditorProps> = ({ onChange, cell }) => {
7
+ const inputRef = React.useRef<HTMLInputElement>(null);
8
+
9
+ const handleChange = React.useCallback(
10
+ (event: React.ChangeEvent<HTMLInputElement>) => {
11
+ onChange({ ...cell, value: event.target.value,style:cell?.style});
12
+ },
13
+ [onChange, cell]
14
+ );
15
+
16
+ React.useEffect(() => {
17
+ if (inputRef.current) {
18
+ moveCursorToEnd(inputRef.current);
19
+ }
20
+ }, [inputRef]);
21
+
22
+ const value = cell?.value ?? "";
23
+
24
+ return (
25
+ <div className="Spreadsheet__data-editor">
26
+ <input
27
+ ref={inputRef}
28
+ type="text"
29
+ onChange={handleChange}
30
+ value={value}
31
+ autoFocus
32
+ />
33
+ </div>
34
+ );
35
+ };
36
+
37
+ export default DataEditor;
@@ -0,0 +1,46 @@
1
+ import * as React from "react";
2
+ import classNames from "classnames";
3
+ import * as Types from "./types";
4
+ import { hasLineBreaker } from "./util";
5
+
6
+ export const TRUE_TEXT = "TRUE";
7
+ export const FALSE_TEXT = "FALSE";
8
+
9
+ /** The default Spreadsheet DataViewer component */
10
+ const DataViewer = <Cell extends Types.CellBase<Value>, Value>({
11
+ cell,
12
+ evaluatedCell,
13
+ }: Types.DataViewerProps<Cell>): React.ReactElement => {
14
+ const value = getValue(cell, evaluatedCell);
15
+
16
+ return typeof value === "boolean" ? (
17
+ <span className="Spreadsheet__data-viewer Spreadsheet__data-viewer--boolean">
18
+ {convertBooleanToText(value)}
19
+ </span>
20
+ ) : (
21
+ <span
22
+ className={classNames("Spreadsheet__data-viewer", {
23
+ "Spreadsheet__data-viewer--preserve-breaks": hasLineBreaker(value),
24
+ })}
25
+ >
26
+ {value}
27
+ </span>
28
+ );
29
+ };
30
+
31
+ export default DataViewer;
32
+
33
+ function getValue(
34
+ cell: Types.CellBase | undefined,
35
+ evaluatedCell: Types.CellBase | undefined
36
+ ) {
37
+ const baseValue = evaluatedCell?.value ?? cell?.value;
38
+ if (baseValue && typeof baseValue === "object") {
39
+ return baseValue.toString();
40
+ }
41
+ return baseValue;
42
+ }
43
+
44
+ export function convertBooleanToText(value: boolean): string {
45
+ return value ? TRUE_TEXT : FALSE_TEXT;
46
+ }
@@ -0,0 +1,31 @@
1
+ import * as React from "react";
2
+ import classnames from "classnames";
3
+ import * as Types from "./types";
4
+
5
+ export type Props = {
6
+ variant?: string;
7
+ dimensions?: Types.Dimensions | null | undefined;
8
+ hidden?: boolean;
9
+ dragging?: boolean;
10
+ };
11
+
12
+ const FloatingRect: React.FC<Props> = ({
13
+ dimensions,
14
+ dragging,
15
+ hidden,
16
+ variant,
17
+ }) => {
18
+ const { width, height, top, left } = dimensions || {};
19
+ return (
20
+ <div
21
+ className={classnames("Spreadsheet__floating-rect", {
22
+ [`Spreadsheet__floating-rect--${variant}`]: variant,
23
+ "Spreadsheet__floating-rect--dragging": dragging,
24
+ "Spreadsheet__floating-rect--hidden": hidden,
25
+ })}
26
+ style={{ width, height, top, left }}
27
+ />
28
+ );
29
+ };
30
+
31
+ export default FloatingRect;
@@ -0,0 +1,5 @@
1
+ import * as Types from "./types";
2
+
3
+ const HeaderRow: Types.HeaderRowComponent = (props) => <tr {...props} />;
4
+
5
+ export default HeaderRow;
@@ -0,0 +1,5 @@
1
+ import * as Types from "./types";
2
+
3
+ const Row: Types.RowComponent = (props) => <tr {...props} />;
4
+
5
+ export default Row;