pixel-react 1.6.8 → 1.7.0

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 (173) hide show
  1. package/lib/components/Charts/LineChart/types.d.ts +1 -0
  2. package/lib/components/Chip/types.d.ts +1 -1
  3. package/lib/components/ConditionalDropdown/ConditionalDropdown.d.ts +5 -0
  4. package/lib/components/ConditionalDropdown/OptionsDropdown.d.ts +5 -0
  5. package/lib/components/ConditionalDropdown/index.d.ts +1 -0
  6. package/lib/components/ConditionalDropdown/types.d.ts +145 -0
  7. package/lib/components/CreateVariable/types.d.ts +2 -2
  8. package/lib/components/DownloadClient/type.d.ts +19 -27
  9. package/lib/components/Excel/ExcelFile/ExcelFileComponents/actions.d.ts +8 -1
  10. package/lib/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.d.ts +2 -0
  11. package/lib/components/Excel/ExcelFile/ExcelFileComponents/types.d.ts +13 -6
  12. package/lib/components/InputWithDropdown/InputWithDropdown.d.ts +1 -1
  13. package/lib/components/LabelEditTextField/types.d.ts +1 -0
  14. package/lib/components/MachineInputField/types.d.ts +1 -0
  15. package/lib/components/MenuOption/MenuOption.d.ts +1 -1
  16. package/lib/components/MenuOption/types.d.ts +2 -1
  17. package/lib/components/MiniModal/types.d.ts +1 -0
  18. package/lib/components/Modal/types.d.ts +1 -1
  19. package/lib/components/MultiSelect/MultiSelect.d.ts +1 -1
  20. package/lib/components/MultiSelect/MultiSelectTypes.d.ts +1 -0
  21. package/lib/components/MultiSelect/dropdownTypes.d.ts +1 -0
  22. package/lib/components/NLPInput/NlpInput.d.ts +2 -2
  23. package/lib/components/NLPInput/components/NlpDropDown/NlpDropDownType.d.ts +6 -3
  24. package/lib/components/NLPInput/components/NlpDropDown/NlpDropdown.d.ts +1 -1
  25. package/lib/components/NLPInput/sampleData.d.ts +104 -0
  26. package/lib/components/NLPInput/types.d.ts +80 -0
  27. package/lib/components/PopUpModal/types.d.ts +2 -1
  28. package/lib/components/ProgressBar/ProgressBar.d.ts +5 -0
  29. package/lib/components/ProgressBar/index.d.ts +1 -0
  30. package/lib/components/ProgressBar/types.d.ts +12 -0
  31. package/lib/components/SequentialConnectingBranch/components/Branches/Branches.d.ts +1 -1
  32. package/lib/components/SequentialConnectingBranch/components/Branches/types.d.ts +4 -0
  33. package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.d.ts +1 -1
  34. package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/types.d.ts +4 -0
  35. package/lib/components/SequentialConnectingBranch/types.d.ts +7 -1
  36. package/lib/components/TableTree/TableTree.d.ts +2 -2
  37. package/lib/components/TableTree/Utils/getAllChildIds.d.ts +1 -0
  38. package/lib/components/TableTree/types.d.ts +1 -1
  39. package/lib/hooks/useIntersectionObserver.d.ts +9 -0
  40. package/lib/index.d.ts +183 -65
  41. package/lib/index.esm.js +1281 -674
  42. package/lib/index.esm.js.map +1 -1
  43. package/lib/index.js +1282 -674
  44. package/lib/index.js.map +1 -1
  45. package/lib/tsconfig.tsbuildinfo +1 -1
  46. package/lib/utils/functionCheck/functionCheck.d.ts +2 -0
  47. package/lib/utils/getSequentialPayload/types.d.ts +1 -0
  48. package/package.json +1 -1
  49. package/src/StyleGuide/ColorPalette/colorPaletteList.ts +5 -0
  50. package/src/assets/Themes/BaseTheme.scss +20 -2
  51. package/src/assets/Themes/DarkTheme.scss +19 -2
  52. package/src/assets/icons/add_file.svg +4 -4
  53. package/src/assets/icons/ai_search.svg +9 -0
  54. package/src/assets/icons/authorization.svg +4 -4
  55. package/src/assets/icons/depends_on_script.svg +7 -7
  56. package/src/assets/icons/email_group.svg +3 -3
  57. package/src/assets/icons/help_icon.svg +10 -0
  58. package/src/assets/icons/import_icon.svg +4 -0
  59. package/src/assets/icons/ios_icon.svg +11 -0
  60. package/src/assets/icons/labels.svg +8 -8
  61. package/src/assets/icons/parameters.svg +3 -3
  62. package/src/assets/icons/plus_round_icon.svg +38 -0
  63. package/src/assets/icons/pre_post_condition.svg +8 -8
  64. package/src/assets/icons/program_element.svg +8 -8
  65. package/src/assets/icons/test_data.svg +5 -5
  66. package/src/assets/icons/test_data_set.svg +7 -7
  67. package/src/assets/icons/tick_icon.svg +2 -2
  68. package/src/assets/icons/variable_set.svg +5 -5
  69. package/src/assets/styles/_colors.scss +1 -1
  70. package/src/components/AttachmentButton/AttachmentButton.tsx +1 -1
  71. package/src/components/Charts/LineChart/LineChart.stories.tsx +7 -3
  72. package/src/components/Charts/LineChart/LineChart.tsx +10 -1
  73. package/src/components/Charts/LineChart/types.ts +1 -0
  74. package/src/components/Checkbox/Checkbox.scss +3 -1
  75. package/src/components/Checkbox/Checkbox.stories.tsx +32 -77
  76. package/src/components/Checkbox/Checkbox.tsx +3 -4
  77. package/src/components/Chip/Chip.scss +15 -5
  78. package/src/components/Chip/Chip.stories.tsx +10 -1
  79. package/src/components/Chip/Chip.tsx +5 -1
  80. package/src/components/Chip/types.ts +1 -1
  81. package/src/components/{AddVariables/AddVariables.scss → ConditionalDropdown/ConditionalDropdown.scss} +4 -0
  82. package/src/components/ConditionalDropdown/ConditionalDropdown.stories.tsx +147 -0
  83. package/src/components/ConditionalDropdown/ConditionalDropdown.tsx +159 -0
  84. package/src/components/ConditionalDropdown/OptionsDropdown.tsx +44 -0
  85. package/src/components/ConditionalDropdown/index.ts +1 -0
  86. package/src/components/ConditionalDropdown/types.ts +160 -0
  87. package/src/components/CreateVariable/CreateVariableSlider.tsx +2 -2
  88. package/src/components/CreateVariable/types.ts +2 -2
  89. package/src/components/DownloadClient/DownloadClient.scss +51 -64
  90. package/src/components/DownloadClient/DownloadClient.stories.tsx +6 -6
  91. package/src/components/DownloadClient/DownloadClient.tsx +60 -51
  92. package/src/components/DownloadClient/type.ts +32 -40
  93. package/src/components/EditTextField/EditTextField.scss +1 -1
  94. package/src/components/EditTextField/EditTextField.tsx +14 -20
  95. package/src/components/Excel/ExcelFile/ExcelFile.scss +3 -2
  96. package/src/components/Excel/ExcelFile/ExcelFile.tsx +37 -21
  97. package/src/components/Excel/ExcelFile/ExcelFileComponents/ActiveCell.tsx +12 -0
  98. package/src/components/Excel/ExcelFile/ExcelFileComponents/Cell.tsx +2 -34
  99. package/src/components/Excel/ExcelFile/ExcelFileComponents/FloatingRect.tsx +26 -1
  100. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +7 -7
  101. package/src/components/Excel/ExcelFile/ExcelFileComponents/actions.ts +13 -0
  102. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducer.ts +53 -26
  103. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +81 -14
  104. package/src/components/Excel/ExcelFile/ExcelFileComponents/types.ts +17 -6
  105. package/src/components/Excel/ExcelFile.stories.tsx +4 -4
  106. package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +36 -19
  107. package/src/components/Excel/dataConversion.ts +43 -20
  108. package/src/components/FileDropzone/FileDropzone.stories.tsx +5 -19
  109. package/src/components/FileDropzone/FileDropzone.tsx +24 -4
  110. package/src/components/Form/Forms.tsx +0 -2
  111. package/src/components/Icon/iconList.ts +12 -0
  112. package/src/components/InputWithDropdown/InputWithDropdown.tsx +102 -95
  113. package/src/components/LabelEditTextField/LabelEditTextField.scss +1 -1
  114. package/src/components/LabelEditTextField/LabelEditTextField.tsx +29 -36
  115. package/src/components/LabelEditTextField/types.ts +1 -0
  116. package/src/components/MachineInputField/MachineInputField.scss +1 -5
  117. package/src/components/MachineInputField/MachineInputField.stories.tsx +6 -5
  118. package/src/components/MachineInputField/MachineInputField.tsx +14 -14
  119. package/src/components/MachineInputField/types.ts +2 -0
  120. package/src/components/MenuOption/MenuOption.scss +7 -7
  121. package/src/components/MenuOption/MenuOption.stories.tsx +83 -28
  122. package/src/components/MenuOption/MenuOption.tsx +9 -13
  123. package/src/components/MenuOption/types.ts +3 -2
  124. package/src/components/MiniModal/MiniModal.scss +0 -1
  125. package/src/components/MiniModal/MiniModal.stories.tsx +6 -1
  126. package/src/components/MiniModal/MiniModal.tsx +3 -1
  127. package/src/components/MiniModal/types.ts +1 -0
  128. package/src/components/Modal/types.ts +1 -1
  129. package/src/components/MultiSelect/Dropdown.scss +3 -4
  130. package/src/components/MultiSelect/Dropdown.tsx +34 -7
  131. package/src/components/MultiSelect/MultiSelect.scss +1 -0
  132. package/src/components/MultiSelect/MultiSelect.tsx +3 -0
  133. package/src/components/MultiSelect/MultiSelectTypes.ts +3 -1
  134. package/src/components/MultiSelect/dropdownTypes.ts +2 -0
  135. package/src/components/NLPInput/NLPInput.scss +77 -21
  136. package/src/components/NLPInput/NlpInput.stories.tsx +43 -109
  137. package/src/components/NLPInput/NlpInput.tsx +95 -59
  138. package/src/components/NLPInput/components/NlpDropDown/NlpDropDownType.ts +6 -4
  139. package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.scss +86 -35
  140. package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.tsx +220 -80
  141. package/src/components/NLPInput/sampleData.ts +162 -0
  142. package/src/components/NLPInput/{type.tsx → types.tsx} +23 -11
  143. package/src/components/PopUpModal/PopUpModal.stories.tsx +15 -10
  144. package/src/components/PopUpModal/PopUpModal.tsx +5 -4
  145. package/src/components/PopUpModal/types.ts +2 -1
  146. package/src/components/ProgressBar/ProgressBar.scss +46 -0
  147. package/src/components/ProgressBar/ProgressBar.stories.tsx +22 -0
  148. package/src/components/ProgressBar/ProgressBar.tsx +61 -0
  149. package/src/components/ProgressBar/index.ts +1 -0
  150. package/src/components/ProgressBar/types.ts +12 -0
  151. package/src/components/Search/Search.tsx +9 -1
  152. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.tsx +13 -2
  153. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.tsx +36 -19
  154. package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +120 -32
  155. package/src/components/SequentialConnectingBranch/components/Branches/types.ts +7 -0
  156. package/src/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.tsx +8 -0
  157. package/src/components/SequentialConnectingBranch/components/ConnectingBranches/types.ts +7 -0
  158. package/src/components/SequentialConnectingBranch/types.ts +7 -5
  159. package/src/components/Table/Table.scss +1 -0
  160. package/src/components/TableTree/Components/TableBody.tsx +3 -1
  161. package/src/components/TableTree/TableTree.stories.tsx +4 -7
  162. package/src/components/TableTree/TableTree.tsx +27 -181
  163. package/src/components/TableTree/Utils/getAllChildIds.ts +2 -0
  164. package/src/components/TableTree/data.ts +45 -0
  165. package/src/components/TableTree/types.ts +4 -4
  166. package/src/hooks/useIntersectionObserver.tsx +56 -0
  167. package/src/index.ts +4 -3
  168. package/src/utils/functionCheck/functionCheck.ts +8 -0
  169. package/src/utils/getSequentialPayload/types.ts +1 -0
  170. package/src/components/AddVariables/AddVariables.stories.tsx +0 -44
  171. package/src/components/AddVariables/AddVariables.tsx +0 -113
  172. package/src/components/AddVariables/index.ts +0 -1
  173. package/src/components/AddVariables/types.ts +0 -36
@@ -1,41 +1,33 @@
1
1
  export interface DownloadClientProps {
2
- /**
3
- * Title of the popup.
4
- */
5
- title: string;
6
-
7
- /**
8
- * Description or body text of the popup.
9
- */
10
- description: string;
11
-
12
- /**
13
- * Callback for when the "Cancel" icon is clicked.
14
- */
15
- onCancel: () => void;
16
-
17
- /**
18
- * Callback for when the "Download for Windows" icon is clicked.
19
- */
20
- onDownloadWindows: () => void;
21
-
22
- /**
23
- * Callback for when the "Download for macOS" icon is clicked.
24
- */
25
- onDownloadMac: () => void;
26
-
27
- /**
28
- * Optional flag to control whether to display icons for download actions instead of buttons.
29
- * Defaults to `false` for buttons.
30
- */
31
- showIcons?: boolean;
32
- }
33
-
34
- export interface DownloadClientProps {
35
- onClose?: () => void;
36
- onClickWindows: () => void;
37
- onClickLinux: () => void;
38
- onClickMac: () => void;
39
- top?: string;
40
- left?: string;
41
- }
2
+ /**
3
+ * Close dialog function to close the modal dialog
4
+ **/
5
+ onClose: () => void;
6
+
7
+ /**
8
+ * distance between modal dialog and parent from top
9
+ **/
10
+ top?: string;
11
+
12
+ /**
13
+ * distance between modal dialog and parent from left
14
+ **/
15
+ left?: string;
16
+
17
+ /**
18
+ * To be used custom properties for the modal dialog through className
19
+ **/
20
+ className?: string;
21
+
22
+ /**
23
+ * Description of the dialog box
24
+ **/
25
+ description?: string;
26
+
27
+ /**
28
+ * Download button function
29
+ **/
30
+ onClick?: (os: string) => void;
31
+
32
+ optionZIndex?: number;
33
+ }
@@ -9,7 +9,7 @@
9
9
  .display-text-container {
10
10
  display: flex;
11
11
  align-items: center;
12
- gap: 8px;
12
+ gap: 5px;
13
13
 
14
14
  .edit-button {
15
15
  padding: 4px 8px;
@@ -6,6 +6,7 @@ import HighlightText from '../HighlightText';
6
6
  import Icon from '../Icon';
7
7
  import Tooltip from '../Tooltip';
8
8
  import { capitalize } from '../../utils/capitalize/capitalize';
9
+ import Input from '../Input/Input';
9
10
 
10
11
  const getErrorMessage = (
11
12
  inputValue: string,
@@ -38,8 +39,8 @@ const EditTextField: FC<LabelEditTextFieldTypes> = ({
38
39
  cancelIcon,
39
40
  editIcon,
40
41
  dropdownData = [],
41
- width = '300px',
42
- height = '22px',
42
+ // width = '',
43
+ // height = '',
43
44
  isOpen = false,
44
45
  confirmAction,
45
46
  onClick,
@@ -52,6 +53,7 @@ const EditTextField: FC<LabelEditTextFieldTypes> = ({
52
53
  );
53
54
  const [showError, setShowError] = useState('');
54
55
  const [isTextFieldModified, setIsTextFieldModified] = useState(false);
56
+ const isThrowingError = showError && isEditing ? true : false;
55
57
  const containerRef = useRef<HTMLDivElement | null>(null);
56
58
  const cancelRef = useRef<HTMLDivElement | null>(null);
57
59
 
@@ -96,27 +98,19 @@ const EditTextField: FC<LabelEditTextFieldTypes> = ({
96
98
  {isEditing ? (
97
99
  <div className="ff-label-text-field">
98
100
  <div className="ff-label-text-field-without-dropdown">
99
- <input
100
- type="text"
101
+ <Input
102
+ name="input"
103
+ label={label ? label : ''}
104
+ disabled={false}
105
+ error={isThrowingError}
106
+ placeholder="Enter your name"
101
107
  value={inputValue}
102
108
  onChange={handleTextFieldChange}
103
- className={`ff-text-field ${
104
- showError && isEditing
105
- ? 'ff-text-field-error-border'
106
- : 'ff-text-field-border'
107
- } ${isTextFieldModified ? 'modified' : ''}`}
108
- placeholder=" "
109
- style={{ width, height }}
109
+ className={`
110
+
111
+ ${isTextFieldModified ? 'modified' : ''}`}
112
+ type="text"
110
113
  />
111
- <label
112
- className={`ff-textfield-label ${
113
- showError && isEditing
114
- ? 'ff-text-field-error-text'
115
- : 'ff-text-field-text'
116
- }`}
117
- >
118
- {label}
119
- </label>
120
114
  </div>
121
115
  <div className="ff-icon-container">
122
116
  {confirmIcon && (
@@ -18,7 +18,7 @@
18
18
  // }
19
19
 
20
20
  .ff-excel-sheet-bar {
21
- margin-left: 60px;
21
+ margin-left: 48px;
22
22
  display: flex;
23
23
  height: 36px;
24
24
  align-items: center;
@@ -27,7 +27,8 @@
27
27
  box-shadow: 0px 0px 4px -1px var(--toggle-strip-shadow);
28
28
 
29
29
  .ff-excel-add-sheet-icon {
30
- padding: 4px 6px;
30
+ margin-top: 4px;
31
+ padding: 0px 6px;
31
32
  }
32
33
  .ff-excel-tab-container {
33
34
  height: 36px;
@@ -9,7 +9,10 @@ import { toast } from '../../Toastify/Toastify';
9
9
  import { ContextMenuState } from './ExcelFileComponents/types';
10
10
  import ExcelContextMenu from '../ExcelContextMenu/ExcelContextMenu';
11
11
  import Typography from '../../Typography';
12
- import { convertStyleToBackend, convertStyleToFrontend } from '../dataConversion';
12
+ import {
13
+ convertStyleToBackend,
14
+ convertStyleToFrontend,
15
+ } from '../dataConversion';
13
16
  import { checkEmpty } from '../../../utils/checkEmpty/checkEmpty';
14
17
 
15
18
  interface ExcelFileProps {
@@ -34,7 +37,9 @@ interface ExcelFileProps {
34
37
 
35
38
  const ExcelFile: React.FC<ExcelFileProps> = ({
36
39
  excelData,
37
- onSave = (saveData) => {saveData()},
40
+ onSave = (saveData) => {
41
+ saveData();
42
+ },
38
43
  }) => {
39
44
  const [sheetNames, setSheetNames] = useState<string[]>([]);
40
45
  const [contextMenu, setContextMenu] = React.useState<ContextMenuState>({
@@ -46,11 +51,19 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
46
51
  const EmptyRow: CellBase = {
47
52
  value: '',
48
53
  style: {
49
- color: 'var(--text-color)',
54
+ color: 'var(--input-hover-border-color)',
50
55
  backgroundColor: 'var(--drawer-footer-bg)',
51
- borderColor: 'var(--toggle-strip-color)',
52
- textDecoration: 'none',
53
- textDecorationStyle: 'solid',
56
+ borderColor: 'var(--excel-sheet-border)',
57
+ textDecoration: 'none solid',
58
+ borderRight: `1px solid var(--excel-sheet-border)`,
59
+ borderLeft: `1px solid var(--excel-sheet-border)`,
60
+ borderTop: `1px solid var(--excel-sheet-border)`,
61
+ borderBottom: `1px solid var(--excel-sheet-border)`,
62
+ fontSize: '15px',
63
+ fontWeight: 'normal',
64
+ fontStyle: 'normal',
65
+ fontFamily: 'Times New Roman',
66
+ textAlign: 'center',
54
67
  },
55
68
  };
56
69
 
@@ -128,7 +141,7 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
128
141
  }
129
142
  spreadsheetData[rowIndex][colIndex] = {
130
143
  value: checkVal(cell.value),
131
- style: convertStyleToFrontend(cell?.style) ,
144
+ style: convertStyleToFrontend(cell?.style),
132
145
  type: true,
133
146
  };
134
147
  }
@@ -153,7 +166,7 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
153
166
  },
154
167
  [onSave]
155
168
  );
156
-
169
+
157
170
  React.useEffect(() => {
158
171
  document.addEventListener('keydown', handleSave);
159
172
  return () => {
@@ -176,18 +189,21 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
176
189
  }, -1);
177
190
 
178
191
  const filteredRow = row
179
- .map((cell, index) => {
180
- if (cell && cell.value !== null) {
181
- return {
182
- value: cell.value,
183
- styles: convertStyleToBackend(cell.style ?? {}),
184
- };
185
- } else if (cell && cell.type || index <= lastIndex) {
186
- return { value: '', styles: convertStyleToBackend(cell?.style ?? {}) };
187
- }
188
- return null;
189
- })
190
- .filter((cell) => cell !== null);
192
+ .map((cell, index) => {
193
+ if (cell && cell.value !== null) {
194
+ return {
195
+ value: cell.value,
196
+ styles: convertStyleToBackend(cell.style ?? {}),
197
+ };
198
+ } else if ((cell && cell.type) || index <= lastIndex) {
199
+ return {
200
+ value: '',
201
+ styles: convertStyleToBackend(cell?.style ?? {}),
202
+ };
203
+ }
204
+ return null;
205
+ })
206
+ .filter((cell) => cell !== null);
191
207
 
192
208
  return filteredRow.length > 0 ? filteredRow : [];
193
209
  }) || [];
@@ -208,7 +224,7 @@ const ExcelFile: React.FC<ExcelFileProps> = ({
208
224
  onSave(savedData);
209
225
  toast.success('File saved successfully!');
210
226
  };
211
-
227
+
212
228
  const onEvaluateChange = (data: Matrix.Matrix<CellBase>) => {
213
229
  setWorksheetsData((prev) => ({ ...prev, [pageRef.current]: data }));
214
230
  onSaveWorksheetData();
@@ -21,6 +21,10 @@ const ActiveCell: React.FC<Props> = (props) => {
21
21
  [dispatch]
22
22
  );
23
23
  const edit = React.useCallback(() => dispatch(Actions.edit()), [dispatch]);
24
+ const autoFill = React.useCallback(
25
+ (value: boolean) => dispatch(Actions.autoFill(value)),
26
+ [dispatch]
27
+ );
24
28
  const commit = React.useCallback(
25
29
  (changes: Types.CommitChanges<Types.CellBase>) =>
26
30
  dispatch(Actions.commit(changes)),
@@ -103,6 +107,10 @@ const ActiveCell: React.FC<Props> = (props) => {
103
107
  const DataEditor = (cell && cell.DataEditor) || props.DataEditor;
104
108
  const readOnly = cell && cell.readOnly;
105
109
 
110
+ const handleMouseDown = React.useCallback(() => {
111
+ mode === 'view' ? autoFill(true) : autoFill(false);
112
+ }, [mode, autoFill]);
113
+
106
114
  return hidden ? null : (
107
115
  <div
108
116
  ref={rootRef}
@@ -124,6 +132,10 @@ const ActiveCell: React.FC<Props> = (props) => {
124
132
  exitEditMode={view}
125
133
  />
126
134
  )}
135
+ <div
136
+ onMouseDown={handleMouseDown}
137
+ className="select_dot"
138
+ ></div>
127
139
  </div>
128
140
  );
129
141
  };
@@ -24,8 +24,6 @@ export const Cell: React.FC<Types.CellComponentProps> = ({
24
24
  setCellData,
25
25
  setContextMenu,
26
26
  }): React.ReactElement => {
27
- const [isDotDragging, setIsDotDragging] = React.useState(false);
28
- const [first, setFirst] = React.useState(true);
29
27
  const rootRef = React.useRef<HTMLTableCellElement | null>(null);
30
28
  const point = React.useMemo(
31
29
  (): Point.Point => ({
@@ -69,37 +67,12 @@ export const Cell: React.FC<Types.CellComponentProps> = ({
69
67
 
70
68
  const handleMouseOver = React.useCallback(
71
69
  (event: React.MouseEvent<HTMLTableCellElement>) => {
72
- if (dragging && first && !isDotDragging) {
70
+ if (dragging) {
73
71
  setCellDimensions(point, getOffsetRect(event.currentTarget));
74
72
  select(point);
75
73
  }
76
74
  },
77
- [setCellDimensions, select, dragging, point, first, isDotDragging]
78
- );
79
-
80
- const handleDotDown = React.useCallback(
81
- (event: React.MouseEvent<HTMLTableCellElement>) => {
82
- setIsDotDragging(true);
83
- setCellDimensions(point, getOffsetRect(event.currentTarget));
84
-
85
- if (event.shiftKey) {
86
- select(point);
87
- } else {
88
- activate(point);
89
- }
90
- },
91
- [setCellDimensions, point, select, activate]
92
- );
93
-
94
- const handleDotOver = React.useCallback(
95
- (event: React.MouseEvent<HTMLTableCellElement>) => {
96
- setFirst(false);
97
- if (dragging && isDotDragging) {
98
- setCellDimensions(point, getOffsetRect(event.currentTarget));
99
- select(point);
100
- }
101
- },
102
- [setCellDimensions, select, dragging, point, isDotDragging]
75
+ [setCellDimensions, select, dragging, point]
103
76
  );
104
77
 
105
78
  const contextClick = React.useCallback(
@@ -153,11 +126,6 @@ export const Cell: React.FC<Types.CellComponentProps> = ({
153
126
  evaluatedCell={evaluatedData}
154
127
  setCellData={setCellData}
155
128
  />
156
- <div
157
- // className="Selection_dot" TODO
158
- onMouseOver={handleDotOver}
159
- onMouseDown={handleDotDown}
160
- ></div>
161
129
  </td>
162
130
  );
163
131
  };
@@ -1,6 +1,8 @@
1
1
  import * as React from 'react';
2
2
  import classnames from 'classnames';
3
3
  import * as Types from './types';
4
+ import useSelector from './use-selector';
5
+ import { getCellDimensions } from './util';
4
6
 
5
7
  export type Props = {
6
8
  variant?: string;
@@ -15,7 +17,30 @@ const FloatingRect: React.FC<Props> = ({
15
17
  hidden,
16
18
  variant,
17
19
  }) => {
20
+ const active = useSelector((state) => state.active);
21
+ const autoFill = useSelector((state) => state.autoFill);
22
+ const FixedVal = useSelector((state) =>
23
+ active
24
+ ? getCellDimensions(active, state.rowDimensions, state.columnDimensions)
25
+ : undefined
26
+ );
27
+
18
28
  const { width, height, top, left } = dimensions || {};
29
+
30
+ let sampleHeight = FixedVal?.height ?? 0;
31
+ let sampleWidth = FixedVal?.width ?? 0;
32
+ let adjustedWidth = width;
33
+ let adjustedHeight = height;
34
+ if (autoFill.open && width && height && FixedVal) {
35
+ if (width - sampleWidth > height - sampleHeight) {
36
+ adjustedWidth = width;
37
+ adjustedHeight = FixedVal.height;
38
+ } else {
39
+ adjustedHeight = height;
40
+ adjustedWidth = FixedVal.width;
41
+ }
42
+ }
43
+
19
44
  return (
20
45
  <div
21
46
  className={classnames('ff-spreadsheet-floating-rect', {
@@ -23,7 +48,7 @@ const FloatingRect: React.FC<Props> = ({
23
48
  'ff-spreadsheet-floating-rect--dragging': dragging,
24
49
  'ff-spreadsheet-floating-rect--hidden': hidden,
25
50
  })}
26
- style={{ width, height, top, left }}
51
+ style={{ width: adjustedWidth, height: adjustedHeight, top, left }}
27
52
  />
28
53
  );
29
54
  };
@@ -11,7 +11,7 @@
11
11
  --readonly-text-color: var(--toggle-strip-active);
12
12
  --outline-color: var(--toggle-strip-active);
13
13
  --outline-background-color: var(--overlay-bg);
14
- --border-color: var(--toggle-strip-color);
14
+ --border-color: var(--excel-sheet-border);
15
15
  --header-background-color: var(--pop-up-background-blur);
16
16
  --elevation: var(--brand-color);
17
17
 
@@ -50,16 +50,16 @@
50
50
  z-index: 0;
51
51
  }
52
52
 
53
- .ff-spreadsheet-active-cell .Selection_dot {
53
+ .ff-spreadsheet-active-cell .select_dot {
54
54
  background-color: var(--elevation);
55
- height: 7px;
56
- width: 7px;
55
+ height: 10px;
56
+ width: 10px;
57
57
  border-radius: 50%;
58
58
  position: absolute;
59
- right: -3px;
60
- z-index: 10;
61
- bottom: -3px;
59
+ bottom: -5px;
60
+ right: -5px;
62
61
  cursor: crosshair;
62
+ z-index: 1000;
63
63
  }
64
64
 
65
65
  .ff-spreadsheet-cell--readonly {
@@ -46,11 +46,23 @@ export const DELETE_ROW = 'DELETE_ROW';
46
46
  export const DELETE_COLUMN = 'DELETE_COLUMN';
47
47
  export const SET_ROW_HEIGHT = 'SET_ROW_HEIGHT';
48
48
  export const SET_COLUMN_POSITION = 'SET_COLUMN_POSITION';
49
+ export const SET_AUTO_FILL = 'SET_AUTO_FILL';
49
50
 
50
51
  export type BaseAction<T extends string> = {
51
52
  type: T;
52
53
  };
53
54
 
55
+ export type SetAutoFill = BaseAction<typeof SET_AUTO_FILL> & {
56
+ payload: { autofill: boolean };
57
+ };
58
+
59
+ export function autoFill(autofill: boolean): SetAutoFill {
60
+ return {
61
+ type: SET_AUTO_FILL,
62
+ payload: { autofill },
63
+ };
64
+ }
65
+
54
66
  export type SetRowHeight = BaseAction<typeof SET_ROW_HEIGHT> & {
55
67
  payload: { row: number; height: number };
56
68
  };
@@ -545,4 +557,5 @@ export type Action =
545
557
  | DeleteColumn
546
558
  | SetRowHeight
547
559
  | SetColumnPosition
560
+ | SetAutoFill
548
561
  | BlurAction;
@@ -26,6 +26,8 @@ import {
26
26
  blur,
27
27
  clear,
28
28
  commit,
29
+ dragEndAutoFill,
30
+ dragEndFormatePainter,
29
31
  edit,
30
32
  getKeyDownHandler,
31
33
  isActiveReadOnly,
@@ -41,6 +43,7 @@ export const INITIAL_STATE: Types.StoreState = {
41
43
  lastChanged: null,
42
44
  hasPasted: false,
43
45
  cut: false,
46
+ autoFill: { open: false, cellValue: { value: '', style: {} } },
44
47
  dragging: false,
45
48
  model: new Model(createFormulaParser, []),
46
49
  selected: new EmptySelection(),
@@ -56,6 +59,23 @@ export default function reducer(
56
59
  action: Actions.Action
57
60
  ): Types.StoreState {
58
61
  switch (action.type) {
62
+ case Actions.SET_AUTO_FILL: {
63
+ const { autofill } = action.payload;
64
+ const activeCell = state.active;
65
+ let currentCell: Types.CellBase<any> = { value: '', style: {} };
66
+ if (activeCell) {
67
+ currentCell =
68
+ Matrix.get(
69
+ { row: activeCell.row, column: activeCell.column },
70
+ state.model.data
71
+ ) || currentCell;
72
+ }
73
+ return {
74
+ ...state,
75
+ autoFill: { open: autofill, cellValue: currentCell },
76
+ };
77
+ }
78
+
59
79
  case Actions.ADD_ROW_TOP: {
60
80
  let { selectedRow, selectedColumn, model } = state;
61
81
  if (checkEmpty(selectedRow)) {
@@ -610,41 +630,48 @@ export default function reducer(
610
630
 
611
631
  case Actions.DRAG_END: {
612
632
  const selectedRange = state.selected.toRange(state.model.data);
613
- let currentData = state.model.data;
614
-
615
- if (!state.formattedStyle.open || !selectedRange) {
633
+ const activeCell = state.active;
634
+ let updatedData = state.model.data;
635
+ if (state.formattedStyle.open) {
636
+ updatedData = dragEndFormatePainter(
637
+ state.model.data,
638
+ selectedRange as PointRange,
639
+ state.formattedStyle
640
+ );
641
+ }
642
+ if (state.autoFill.open) {
643
+ updatedData = dragEndAutoFill(
644
+ state.model.data,
645
+ selectedRange as PointRange,
646
+ state.autoFill.cellValue,
647
+ activeCell
648
+ );
649
+ let { start, end } = selectedRange as PointRange;
650
+ const rowCount = start.row - end.row;
651
+ const columnCount = start.column - end.column;
652
+ let startPoint = { row: 0, column: 0 };
653
+ let endPoint = { row: 0, column: 0 };
654
+
655
+ if (rowCount > columnCount) {
656
+ startPoint = { row: activeCell?.row ?? 0, column: start.column };
657
+ endPoint = { row: activeCell?.row ?? 0, column: end.column };
658
+ } else {
659
+ startPoint = { row: start.row, column: activeCell?.column ?? 0 };
660
+ endPoint = { row: end.row, column: activeCell?.column ?? 0 };
661
+ }
616
662
  return {
617
663
  ...state,
618
664
  dragging: false,
665
+ autoFill: { open: false, cellValue: { value: '', style: {} } },
619
666
  formattedStyle: { open: false, style: undefined },
667
+ model: new Model(state.model.createFormulaParser, updatedData),
668
+ selected: new RangeSelection(new PointRange(startPoint, endPoint)),
620
669
  };
621
670
  }
622
-
623
- const { start, end } = selectedRange;
624
-
625
- let updatedData = currentData;
626
-
627
- for (let row = start.row; row <= end.row; row++) {
628
- for (let col = start.column; col <= end.column; col++) {
629
- const currentCell = Matrix.get({ row, column: col }, updatedData);
630
- if (!currentCell) {
631
- continue;
632
- }
633
- const updatedCell = {
634
- ...currentCell,
635
- style: state.formattedStyle.style,
636
- };
637
-
638
- updatedData = Matrix.set(
639
- { row, column: col },
640
- updatedCell,
641
- updatedData
642
- );
643
- }
644
- }
645
671
  return {
646
672
  ...state,
647
673
  dragging: false,
674
+ autoFill: { open: false, cellValue: { value: '', style: {} } },
648
675
  formattedStyle: { open: false, style: undefined },
649
676
  model: new Model(state.model.createFormulaParser, updatedData),
650
677
  };