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.
- package/lib/components/Charts/LineChart/types.d.ts +1 -0
- package/lib/components/Chip/types.d.ts +1 -1
- package/lib/components/ConditionalDropdown/ConditionalDropdown.d.ts +5 -0
- package/lib/components/ConditionalDropdown/OptionsDropdown.d.ts +5 -0
- package/lib/components/ConditionalDropdown/index.d.ts +1 -0
- package/lib/components/ConditionalDropdown/types.d.ts +145 -0
- package/lib/components/CreateVariable/types.d.ts +2 -2
- package/lib/components/DownloadClient/type.d.ts +19 -27
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/actions.d.ts +8 -1
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.d.ts +2 -0
- package/lib/components/Excel/ExcelFile/ExcelFileComponents/types.d.ts +13 -6
- package/lib/components/InputWithDropdown/InputWithDropdown.d.ts +1 -1
- package/lib/components/LabelEditTextField/types.d.ts +1 -0
- package/lib/components/MachineInputField/types.d.ts +1 -0
- package/lib/components/MenuOption/MenuOption.d.ts +1 -1
- package/lib/components/MenuOption/types.d.ts +2 -1
- package/lib/components/MiniModal/types.d.ts +1 -0
- package/lib/components/Modal/types.d.ts +1 -1
- package/lib/components/MultiSelect/MultiSelect.d.ts +1 -1
- package/lib/components/MultiSelect/MultiSelectTypes.d.ts +1 -0
- package/lib/components/MultiSelect/dropdownTypes.d.ts +1 -0
- package/lib/components/NLPInput/NlpInput.d.ts +2 -2
- package/lib/components/NLPInput/components/NlpDropDown/NlpDropDownType.d.ts +6 -3
- package/lib/components/NLPInput/components/NlpDropDown/NlpDropdown.d.ts +1 -1
- package/lib/components/NLPInput/sampleData.d.ts +104 -0
- package/lib/components/NLPInput/types.d.ts +80 -0
- package/lib/components/PopUpModal/types.d.ts +2 -1
- package/lib/components/ProgressBar/ProgressBar.d.ts +5 -0
- package/lib/components/ProgressBar/index.d.ts +1 -0
- package/lib/components/ProgressBar/types.d.ts +12 -0
- package/lib/components/SequentialConnectingBranch/components/Branches/Branches.d.ts +1 -1
- package/lib/components/SequentialConnectingBranch/components/Branches/types.d.ts +4 -0
- package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.d.ts +1 -1
- package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/types.d.ts +4 -0
- package/lib/components/SequentialConnectingBranch/types.d.ts +7 -1
- package/lib/components/TableTree/TableTree.d.ts +2 -2
- package/lib/components/TableTree/Utils/getAllChildIds.d.ts +1 -0
- package/lib/components/TableTree/types.d.ts +1 -1
- package/lib/hooks/useIntersectionObserver.d.ts +9 -0
- package/lib/index.d.ts +183 -65
- package/lib/index.esm.js +1281 -674
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +1282 -674
- package/lib/index.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +1 -1
- package/lib/utils/functionCheck/functionCheck.d.ts +2 -0
- package/lib/utils/getSequentialPayload/types.d.ts +1 -0
- package/package.json +1 -1
- package/src/StyleGuide/ColorPalette/colorPaletteList.ts +5 -0
- package/src/assets/Themes/BaseTheme.scss +20 -2
- package/src/assets/Themes/DarkTheme.scss +19 -2
- package/src/assets/icons/add_file.svg +4 -4
- package/src/assets/icons/ai_search.svg +9 -0
- package/src/assets/icons/authorization.svg +4 -4
- package/src/assets/icons/depends_on_script.svg +7 -7
- package/src/assets/icons/email_group.svg +3 -3
- package/src/assets/icons/help_icon.svg +10 -0
- package/src/assets/icons/import_icon.svg +4 -0
- package/src/assets/icons/ios_icon.svg +11 -0
- package/src/assets/icons/labels.svg +8 -8
- package/src/assets/icons/parameters.svg +3 -3
- package/src/assets/icons/plus_round_icon.svg +38 -0
- package/src/assets/icons/pre_post_condition.svg +8 -8
- package/src/assets/icons/program_element.svg +8 -8
- package/src/assets/icons/test_data.svg +5 -5
- package/src/assets/icons/test_data_set.svg +7 -7
- package/src/assets/icons/tick_icon.svg +2 -2
- package/src/assets/icons/variable_set.svg +5 -5
- package/src/assets/styles/_colors.scss +1 -1
- package/src/components/AttachmentButton/AttachmentButton.tsx +1 -1
- package/src/components/Charts/LineChart/LineChart.stories.tsx +7 -3
- package/src/components/Charts/LineChart/LineChart.tsx +10 -1
- package/src/components/Charts/LineChart/types.ts +1 -0
- package/src/components/Checkbox/Checkbox.scss +3 -1
- package/src/components/Checkbox/Checkbox.stories.tsx +32 -77
- package/src/components/Checkbox/Checkbox.tsx +3 -4
- package/src/components/Chip/Chip.scss +15 -5
- package/src/components/Chip/Chip.stories.tsx +10 -1
- package/src/components/Chip/Chip.tsx +5 -1
- package/src/components/Chip/types.ts +1 -1
- package/src/components/{AddVariables/AddVariables.scss → ConditionalDropdown/ConditionalDropdown.scss} +4 -0
- package/src/components/ConditionalDropdown/ConditionalDropdown.stories.tsx +147 -0
- package/src/components/ConditionalDropdown/ConditionalDropdown.tsx +159 -0
- package/src/components/ConditionalDropdown/OptionsDropdown.tsx +44 -0
- package/src/components/ConditionalDropdown/index.ts +1 -0
- package/src/components/ConditionalDropdown/types.ts +160 -0
- package/src/components/CreateVariable/CreateVariableSlider.tsx +2 -2
- package/src/components/CreateVariable/types.ts +2 -2
- package/src/components/DownloadClient/DownloadClient.scss +51 -64
- package/src/components/DownloadClient/DownloadClient.stories.tsx +6 -6
- package/src/components/DownloadClient/DownloadClient.tsx +60 -51
- package/src/components/DownloadClient/type.ts +32 -40
- package/src/components/EditTextField/EditTextField.scss +1 -1
- package/src/components/EditTextField/EditTextField.tsx +14 -20
- package/src/components/Excel/ExcelFile/ExcelFile.scss +3 -2
- package/src/components/Excel/ExcelFile/ExcelFile.tsx +37 -21
- package/src/components/Excel/ExcelFile/ExcelFileComponents/ActiveCell.tsx +12 -0
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Cell.tsx +2 -34
- package/src/components/Excel/ExcelFile/ExcelFileComponents/FloatingRect.tsx +26 -1
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +7 -7
- package/src/components/Excel/ExcelFile/ExcelFileComponents/actions.ts +13 -0
- package/src/components/Excel/ExcelFile/ExcelFileComponents/reducer.ts +53 -26
- package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +81 -14
- package/src/components/Excel/ExcelFile/ExcelFileComponents/types.ts +17 -6
- package/src/components/Excel/ExcelFile.stories.tsx +4 -4
- package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +36 -19
- package/src/components/Excel/dataConversion.ts +43 -20
- package/src/components/FileDropzone/FileDropzone.stories.tsx +5 -19
- package/src/components/FileDropzone/FileDropzone.tsx +24 -4
- package/src/components/Form/Forms.tsx +0 -2
- package/src/components/Icon/iconList.ts +12 -0
- package/src/components/InputWithDropdown/InputWithDropdown.tsx +102 -95
- package/src/components/LabelEditTextField/LabelEditTextField.scss +1 -1
- package/src/components/LabelEditTextField/LabelEditTextField.tsx +29 -36
- package/src/components/LabelEditTextField/types.ts +1 -0
- package/src/components/MachineInputField/MachineInputField.scss +1 -5
- package/src/components/MachineInputField/MachineInputField.stories.tsx +6 -5
- package/src/components/MachineInputField/MachineInputField.tsx +14 -14
- package/src/components/MachineInputField/types.ts +2 -0
- package/src/components/MenuOption/MenuOption.scss +7 -7
- package/src/components/MenuOption/MenuOption.stories.tsx +83 -28
- package/src/components/MenuOption/MenuOption.tsx +9 -13
- package/src/components/MenuOption/types.ts +3 -2
- package/src/components/MiniModal/MiniModal.scss +0 -1
- package/src/components/MiniModal/MiniModal.stories.tsx +6 -1
- package/src/components/MiniModal/MiniModal.tsx +3 -1
- package/src/components/MiniModal/types.ts +1 -0
- package/src/components/Modal/types.ts +1 -1
- package/src/components/MultiSelect/Dropdown.scss +3 -4
- package/src/components/MultiSelect/Dropdown.tsx +34 -7
- package/src/components/MultiSelect/MultiSelect.scss +1 -0
- package/src/components/MultiSelect/MultiSelect.tsx +3 -0
- package/src/components/MultiSelect/MultiSelectTypes.ts +3 -1
- package/src/components/MultiSelect/dropdownTypes.ts +2 -0
- package/src/components/NLPInput/NLPInput.scss +77 -21
- package/src/components/NLPInput/NlpInput.stories.tsx +43 -109
- package/src/components/NLPInput/NlpInput.tsx +95 -59
- package/src/components/NLPInput/components/NlpDropDown/NlpDropDownType.ts +6 -4
- package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.scss +86 -35
- package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.tsx +220 -80
- package/src/components/NLPInput/sampleData.ts +162 -0
- package/src/components/NLPInput/{type.tsx → types.tsx} +23 -11
- package/src/components/PopUpModal/PopUpModal.stories.tsx +15 -10
- package/src/components/PopUpModal/PopUpModal.tsx +5 -4
- package/src/components/PopUpModal/types.ts +2 -1
- package/src/components/ProgressBar/ProgressBar.scss +46 -0
- package/src/components/ProgressBar/ProgressBar.stories.tsx +22 -0
- package/src/components/ProgressBar/ProgressBar.tsx +61 -0
- package/src/components/ProgressBar/index.ts +1 -0
- package/src/components/ProgressBar/types.ts +12 -0
- package/src/components/Search/Search.tsx +9 -1
- package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.tsx +13 -2
- package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.tsx +36 -19
- package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +120 -32
- package/src/components/SequentialConnectingBranch/components/Branches/types.ts +7 -0
- package/src/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.tsx +8 -0
- package/src/components/SequentialConnectingBranch/components/ConnectingBranches/types.ts +7 -0
- package/src/components/SequentialConnectingBranch/types.ts +7 -5
- package/src/components/Table/Table.scss +1 -0
- package/src/components/TableTree/Components/TableBody.tsx +3 -1
- package/src/components/TableTree/TableTree.stories.tsx +4 -7
- package/src/components/TableTree/TableTree.tsx +27 -181
- package/src/components/TableTree/Utils/getAllChildIds.ts +2 -0
- package/src/components/TableTree/data.ts +45 -0
- package/src/components/TableTree/types.ts +4 -4
- package/src/hooks/useIntersectionObserver.tsx +56 -0
- package/src/index.ts +4 -3
- package/src/utils/functionCheck/functionCheck.ts +8 -0
- package/src/utils/getSequentialPayload/types.ts +1 -0
- package/src/components/AddVariables/AddVariables.stories.tsx +0 -44
- package/src/components/AddVariables/AddVariables.tsx +0 -113
- package/src/components/AddVariables/index.ts +0 -1
- package/src/components/AddVariables/types.ts +0 -36
@@ -1,41 +1,33 @@
|
|
1
1
|
export interface DownloadClientProps {
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
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
|
+
}
|
@@ -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 = '
|
42
|
-
height = '
|
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
|
-
<
|
100
|
-
|
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={`
|
104
|
-
|
105
|
-
|
106
|
-
|
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:
|
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
|
-
|
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 {
|
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) => {
|
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(--
|
54
|
+
color: 'var(--input-hover-border-color)',
|
50
55
|
backgroundColor: 'var(--drawer-footer-bg)',
|
51
|
-
borderColor: 'var(--
|
52
|
-
textDecoration: 'none',
|
53
|
-
|
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
|
-
|
180
|
-
|
181
|
-
|
182
|
-
|
183
|
-
|
184
|
-
|
185
|
-
|
186
|
-
|
187
|
-
|
188
|
-
|
189
|
-
|
190
|
-
|
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
|
70
|
+
if (dragging) {
|
73
71
|
setCellDimensions(point, getOffsetRect(event.currentTarget));
|
74
72
|
select(point);
|
75
73
|
}
|
76
74
|
},
|
77
|
-
[setCellDimensions, select, dragging, point
|
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(--
|
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 .
|
53
|
+
.ff-spreadsheet-active-cell .select_dot {
|
54
54
|
background-color: var(--elevation);
|
55
|
-
height:
|
56
|
-
width:
|
55
|
+
height: 10px;
|
56
|
+
width: 10px;
|
57
57
|
border-radius: 50%;
|
58
58
|
position: absolute;
|
59
|
-
|
60
|
-
|
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
|
-
|
614
|
-
|
615
|
-
if (
|
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
|
};
|