fuse-importer 0.1.7-testing → 0.2.0-testing
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/esm/Importer/ImporterWithContext.js +11 -9
- package/lib/esm/Importer/Matcher/EnumFieldsMatchers/EnumFieldMatcher/index.js +3 -3
- package/lib/esm/Importer/PreviewFirstTime.js +1 -1
- package/lib/esm/Importer/PreviewModeBanner.js +2 -2
- package/lib/esm/Importer/Review/AppResponseModal.js +2 -2
- package/lib/esm/Importer/Review/ReviewContextProvider.d.ts +2 -2
- package/lib/esm/Importer/Review/ReviewContextProvider.js +6 -6
- package/lib/esm/Importer/Stepper/StepperSubmitModal.js +21 -4
- package/lib/esm/Importer/Stepper/index.js +35 -20
- package/lib/esm/Importer/Uploader/DragAndDropImporter/ImporterSectionHeader/index.js +1 -1
- package/lib/esm/Importer/WarningsBanner.d.ts +3 -0
- package/lib/esm/Importer/WarningsBanner.js +42 -0
- package/lib/esm/Importer/common/Spreadsheet/DuplicateDataContextProvider/index.d.ts +5 -4
- package/lib/esm/Importer/common/Spreadsheet/DuplicateDataContextProvider/index.js +104 -50
- package/lib/esm/Importer/common/Spreadsheet/FilteredDataContextProvider/index.d.ts +1 -0
- package/lib/esm/Importer/common/Spreadsheet/FilteredDataContextProvider/index.js +6 -1
- package/lib/esm/Importer/common/Spreadsheet/KeyboardEventContextProvider/index.d.ts +7 -0
- package/lib/esm/Importer/common/Spreadsheet/KeyboardEventContextProvider/index.js +73 -0
- package/lib/esm/Importer/common/Spreadsheet/SearchContextProvider/index.d.ts +15 -0
- package/lib/esm/Importer/common/Spreadsheet/SearchContextProvider/index.js +43 -0
- package/lib/esm/Importer/common/Spreadsheet/SpreadsheetContextProvider/hashCalculators.d.ts +3 -2
- package/lib/esm/Importer/common/Spreadsheet/SpreadsheetContextProvider/hashCalculators.js +40 -26
- package/lib/esm/Importer/common/Spreadsheet/SpreadsheetContextProvider/index.d.ts +2 -1
- package/lib/esm/Importer/common/Spreadsheet/SpreadsheetContextProvider/index.js +2 -1
- package/lib/esm/Importer/common/Spreadsheet/SpreadsheetContextProvider/useBatchProcessing.d.ts +2 -2
- package/lib/esm/Importer/common/Spreadsheet/SpreadsheetContextProvider/useBatchProcessing.js +13 -4
- package/lib/esm/Importer/common/Spreadsheet/SpreadsheetContextProvider/useCellSelection.d.ts +24 -0
- package/lib/esm/Importer/common/Spreadsheet/SpreadsheetContextProvider/useCellSelection.js +207 -0
- package/lib/esm/Importer/common/Spreadsheet/SpreadsheetContextProvider/useDataSetManipulation.d.ts +4 -0
- package/lib/esm/Importer/common/Spreadsheet/SpreadsheetContextProvider/useDataSetManipulation.js +118 -12
- package/lib/esm/Importer/common/Spreadsheet/UndoRedoContextProvider/index.d.ts +16 -0
- package/lib/esm/Importer/common/Spreadsheet/UndoRedoContextProvider/index.js +104 -0
- package/lib/esm/Importer/common/Spreadsheet/ValidationContextProvider/index.d.ts +1 -1
- package/lib/esm/Importer/common/Spreadsheet/ValidationContextProvider/index.js +39 -14
- package/lib/esm/Importer/common/Spreadsheet/common/index.d.ts +1 -1
- package/lib/esm/Importer/common/Spreadsheet/common/index.js +13 -5
- package/lib/esm/Importer/common/Spreadsheet/components/FindAndReplace/index.d.ts +6 -0
- package/lib/esm/Importer/common/Spreadsheet/components/FindAndReplace/index.js +94 -0
- package/lib/esm/Importer/common/Spreadsheet/components/SpreadsheetData/CellContextProvider.d.ts +23 -0
- package/lib/esm/Importer/common/Spreadsheet/components/SpreadsheetData/CellContextProvider.js +128 -0
- package/lib/esm/Importer/common/Spreadsheet/components/{SpreadsheetData.d.ts → SpreadsheetData/index.d.ts} +1 -1
- package/lib/esm/Importer/common/Spreadsheet/components/{SpreadsheetData.js → SpreadsheetData/index.js} +19 -18
- package/lib/esm/Importer/common/Spreadsheet/components/SpreadsheetRowCheckboxes.js +7 -7
- package/lib/esm/Importer/common/Spreadsheet/components/fields/SpeadsheetAutocomplete.js +3 -4
- package/lib/esm/Importer/common/Spreadsheet/components/fields/SpreadsheetInput.js +8 -8
- package/lib/esm/Importer/common/Spreadsheet/components/fields/index.d.ts +11 -0
- package/lib/esm/Importer/common/Spreadsheet/components/fields/index.js +26 -18
- package/lib/esm/Importer/common/Spreadsheet/transformation/index.d.ts +1 -2
- package/lib/esm/Importer/common/Spreadsheet/transformation/index.js +4 -8
- package/lib/esm/Importer/common/Spreadsheet/transformation/transformators/dateTimeAutoformatUtils.d.ts +5 -0
- package/lib/esm/Importer/common/Spreadsheet/transformation/transformators/dateTimeAutoformatUtils.js +231 -0
- package/lib/esm/Importer/common/Spreadsheet/transformation/{transformators.d.ts → transformators/index.d.ts} +6 -6
- package/lib/esm/Importer/common/Spreadsheet/transformation/{transformators.js → transformators/index.js} +24 -45
- package/lib/esm/Importer/common/Spreadsheet/validation/validators.d.ts +1 -1
- package/lib/esm/Importer/common/Spreadsheet/validation/validators.js +2 -0
- package/lib/esm/Importer/common/theme.d.ts +1 -0
- package/lib/esm/Importer/contexts/ImporterContextProvider.d.ts +8 -1
- package/lib/esm/Importer/contexts/ImporterContextProvider.js +18 -5
- package/lib/esm/Importer/data/index.d.ts +0 -1
- package/lib/esm/Importer/data/index.js +0 -37
- package/lib/esm/Importer/hooks/useSubmitToServer.d.ts +1 -1
- package/lib/esm/Importer/hooks/useSubmitToServer.js +55 -9
- package/lib/esm/common/CircleSpinner.d.ts +1 -0
- package/lib/esm/common/CircleSpinner.js +13 -0
- package/lib/esm/common/FileUploadDropzone/ImporterDropzone.js +56 -21
- package/lib/esm/common/Table/TableActions/CustomActions/CustomActions.js +28 -23
- package/lib/esm/common/Table/TableActions/FilterByErrors/FilterByErrors.js +3 -3
- package/lib/esm/common/Table/TableActions/RowFilters.js +3 -3
- package/lib/esm/common/Table/TableActions/SearchRows.js +25 -25
- package/lib/esm/common/Table/TableActions/TableActions.js +7 -4
- package/lib/esm/common/Table/TableActions/TableActions.styles.js +2 -2
- package/lib/esm/common/Table/TableActions/TransformedRecordsCount.js +3 -3
- package/lib/esm/common/Table/TableActions/icons.d.ts +1 -0
- package/lib/esm/common/Table/TableActions/icons.js +1 -0
- package/lib/esm/common/Table/TableActions/useFindAndReplace.d.ts +5 -0
- package/lib/esm/common/Table/TableActions/useFindAndReplace.js +45 -0
- package/lib/esm/common/Table/TableView/TableRows/TableRow.js +1 -1
- package/lib/esm/common/Table/TableView/index.d.ts +1 -1
- package/lib/esm/common/Table/TableView/index.js +2 -2
- package/lib/esm/common/Table/TableView/types.d.ts +1 -0
- package/lib/esm/common/Toast.d.ts +42 -3
- package/lib/esm/common/Toast.js +56 -19
- package/lib/esm/common/datePatterns.d.ts +0 -1
- package/lib/esm/common/datePatterns.js +0 -10
- package/lib/esm/common/icons/index.d.ts +3 -0
- package/lib/esm/common/icons/index.js +5 -2
- package/lib/esm/common/inputs/Autocomplete.js +2 -2
- package/lib/esm/common/inputs/Checkbox.d.ts +2 -1
- package/lib/esm/common/inputs/Checkbox.js +9 -7
- package/lib/esm/common/inputs/TextInput.d.ts +1 -0
- package/lib/esm/common/inputs/TextInput.js +10 -2
- package/lib/esm/index.js +1 -1
- package/lib/esm/locales/de.d.ts +10 -0
- package/lib/esm/locales/de.js +10 -0
- package/lib/esm/locales/en.d.ts +23 -0
- package/lib/esm/locales/en.js +23 -0
- package/lib/esm/locales/es.d.ts +10 -0
- package/lib/esm/locales/es.js +10 -0
- package/lib/esm/locales/fr.d.ts +10 -0
- package/lib/esm/locales/fr.js +10 -0
- package/lib/esm/styled/theme/colorPalette.d.ts +2 -0
- package/lib/esm/styled/theme/colorPalette.js +1 -0
- package/lib/esm/styled/theme/index.d.ts +1 -0
- package/lib/esm/types.d.ts +1 -0
- package/lib/main.js +6 -6
- package/package.json +1 -1
- package/lib/esm/Importer/TrialModeBanner.d.ts +0 -1
- package/lib/esm/Importer/TrialModeBanner.js +0 -22
|
@@ -11,7 +11,7 @@ export var isEmpty = function (value) {
|
|
|
11
11
|
(value.length === 0 || value.trim().length === 0)));
|
|
12
12
|
};
|
|
13
13
|
export var isEmail = function (value) {
|
|
14
|
-
var emailRegex = /^[\w+.-]+@([\w-]+\.)+[\w-]
|
|
14
|
+
var emailRegex = /^[\w+.-]+@([\w-]+\.)+[\w-]+$/;
|
|
15
15
|
return emailRegex.test(value);
|
|
16
16
|
};
|
|
17
17
|
export var isUrl = function (value) {
|
|
@@ -52,10 +52,18 @@ export var isRecordEmpty = function (record, fields) {
|
|
|
52
52
|
export var parseValue = function (fieldType, value, enumSet) {
|
|
53
53
|
if (isEmpty(value))
|
|
54
54
|
return value;
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
55
|
+
var cleanNumber = function (val) {
|
|
56
|
+
// Remove all non-numeric characters except the decimal point.
|
|
57
|
+
return typeof val === "string" ? val.replace(/[^\d.]/g, "") : val;
|
|
58
|
+
};
|
|
59
|
+
if (fieldType === FieldTypes.float) {
|
|
60
|
+
var cleanedValue = cleanNumber(value);
|
|
61
|
+
return isFloat(cleanedValue) ? parseFloat(cleanedValue) : value;
|
|
62
|
+
}
|
|
63
|
+
if (fieldType === FieldTypes.integer) {
|
|
64
|
+
var cleanedValue = cleanNumber(value);
|
|
65
|
+
return isInteger(cleanedValue) ? parseInt(cleanedValue, 10) : value;
|
|
66
|
+
}
|
|
59
67
|
if (fieldType === FieldTypes.boolean)
|
|
60
68
|
return isTrue(value) ? true : false;
|
|
61
69
|
if (fieldType === FieldTypes.enum && enumSet)
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
13
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
14
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
15
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
16
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
17
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
18
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
19
|
+
});
|
|
20
|
+
};
|
|
21
|
+
var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
22
|
+
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
|
|
23
|
+
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
24
|
+
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
25
|
+
function step(op) {
|
|
26
|
+
if (f) throw new TypeError("Generator is already executing.");
|
|
27
|
+
while (g && (g = 0, op[0] && (_ = 0)), _) try {
|
|
28
|
+
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
|
29
|
+
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
30
|
+
switch (op[0]) {
|
|
31
|
+
case 0: case 1: t = op; break;
|
|
32
|
+
case 4: _.label++; return { value: op[1], done: false };
|
|
33
|
+
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
34
|
+
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
35
|
+
default:
|
|
36
|
+
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
37
|
+
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
38
|
+
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
39
|
+
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
40
|
+
if (t[2]) _.ops.pop();
|
|
41
|
+
_.trys.pop(); continue;
|
|
42
|
+
}
|
|
43
|
+
op = body.call(thisArg, _);
|
|
44
|
+
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
45
|
+
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
46
|
+
}
|
|
47
|
+
};
|
|
48
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
49
|
+
import { Div } from "../../../../../styled";
|
|
50
|
+
import { Button, Modal, addToast } from "../../../../../common";
|
|
51
|
+
import { useTranslation } from "react-i18next";
|
|
52
|
+
import { TextInput } from "../../../../../common/inputs/TextInput";
|
|
53
|
+
import { Checkbox } from "../../../../../common";
|
|
54
|
+
import { useEffect, useRef, useState } from "react";
|
|
55
|
+
import { useDataSetManipulation } from "../../SpreadsheetContextProvider/useDataSetManipulation";
|
|
56
|
+
import { useFilteredDataContext } from "../../FilteredDataContextProvider";
|
|
57
|
+
export var FindAndReplaceModal = function (_a) {
|
|
58
|
+
var initialText = _a.initialText, onClose = _a.onClose;
|
|
59
|
+
var t = useTranslation("general").t;
|
|
60
|
+
var _b = useState(initialText), searchText = _b[0], setSearchText = _b[1];
|
|
61
|
+
var _c = useState(""), replaceText = _c[0], setReplaceText = _c[1];
|
|
62
|
+
var findAndReplaceInSpreadsheet = useDataSetManipulation().findAndReplaceInSpreadsheet;
|
|
63
|
+
var _d = useState(false), useRegex = _d[0], setUseRegex = _d[1];
|
|
64
|
+
var _e = useState(true), matchCase = _e[0], setMatchCase = _e[1];
|
|
65
|
+
var setFilteredInputValue = useFilteredDataContext().setFilteredInputValue;
|
|
66
|
+
var findRef = useRef();
|
|
67
|
+
useEffect(function () {
|
|
68
|
+
if (!findRef.current)
|
|
69
|
+
return;
|
|
70
|
+
findRef.current.focus();
|
|
71
|
+
}, [findRef.current]);
|
|
72
|
+
var findAndReplace = function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
73
|
+
var records;
|
|
74
|
+
return __generator(this, function (_a) {
|
|
75
|
+
switch (_a.label) {
|
|
76
|
+
case 0: return [4 /*yield*/, findAndReplaceInSpreadsheet(searchText, replaceText, matchCase, useRegex)];
|
|
77
|
+
case 1:
|
|
78
|
+
records = _a.sent();
|
|
79
|
+
if (records.length > 0) {
|
|
80
|
+
addToast(t("find_and_replace_modal.records_replaced", {
|
|
81
|
+
length: records.length,
|
|
82
|
+
}), "success");
|
|
83
|
+
onClose();
|
|
84
|
+
setFilteredInputValue("");
|
|
85
|
+
}
|
|
86
|
+
else {
|
|
87
|
+
addToast(t("find_and_replace_modal.no_records_found"), "error");
|
|
88
|
+
}
|
|
89
|
+
return [2 /*return*/];
|
|
90
|
+
}
|
|
91
|
+
});
|
|
92
|
+
}); };
|
|
93
|
+
return (_jsx(Modal, __assign({ isOpen: true, onClose: function () { return onClose(); } }, { children: _jsxs(Div, __assign({ p: "17px 20px", w: 500 }, { children: [_jsx(Div, __assign({ textAlignCenter: true, h5: true }, { children: t("find_and_replace_modal.title") })), _jsx(Div, __assign({ mt: 20, mb: 20, textAlignCenter: true, body1: true }, { children: t("find_and_replace_modal.description") })), _jsxs(Div, __assign({ mb: 20, w: 500, textAlignCenter: true, body1: true }, { children: [_jsx(TextInput, { setInputRef: findRef, "data-cy": "find-input", mb: 20, name: t("find_and_replace_modal.find"), label: t("find_and_replace_modal.find"), value: searchText, onChange: function (value) { return setSearchText(value); } }), _jsx(TextInput, { "data-cy": "replace-input", label: t("find_and_replace_modal.replace_with"), value: replaceText, onChange: function (value) { return setReplaceText(value); } })] })), _jsx(Div, __assign({ mb: 12 }, { children: _jsx(Checkbox, { "data-cy": "use-regex", label: t("find_and_replace_modal.use_regex"), isChecked: useRegex, onChange: function (v) { return setUseRegex(v); } }) })), _jsx(Div, __assign({ mb: 12 }, { children: _jsx(Checkbox, { "data-cy": "case-sensitive", label: t("find_and_replace_modal.use_case_sensitive"), isChecked: matchCase, onChange: function (v) { return setMatchCase(v); } }) })), _jsxs(Div, __assign({ dflex: true, centered: true, mt: 40 }, { children: [_jsx(Button, __assign({ variant: "secondary", onClick: function () { return onClose(); }, w: 160, mr: 16 }, { children: t("find_and_replace_modal.cancel") })), _jsx(Button, __assign({ "data-cy": "find-replace-submit", variant: "primary", onClick: function () { return findAndReplace(); } }, { children: t("find_and_replace_modal.submit") }))] }))] })) })));
|
|
94
|
+
};
|
package/lib/esm/Importer/common/Spreadsheet/components/SpreadsheetData/CellContextProvider.d.ts
ADDED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { css } from "styled-components";
|
|
3
|
+
type SelectionProps = {
|
|
4
|
+
onClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
|
|
5
|
+
onDragStart: (e: React.DragEvent<HTMLDivElement>) => void;
|
|
6
|
+
onDragEnd: () => void;
|
|
7
|
+
onDragOver: () => void;
|
|
8
|
+
onBlur: () => void;
|
|
9
|
+
draggable: boolean;
|
|
10
|
+
};
|
|
11
|
+
type State = {
|
|
12
|
+
isSelected: boolean;
|
|
13
|
+
selectedCellStyles: ReturnType<typeof css>;
|
|
14
|
+
selectionProps: SelectionProps | {};
|
|
15
|
+
};
|
|
16
|
+
type Props = {
|
|
17
|
+
children: JSX.Element;
|
|
18
|
+
rowIndex: number;
|
|
19
|
+
colIndex: number;
|
|
20
|
+
};
|
|
21
|
+
export declare const CellContextProvider: ({ children, rowIndex, colIndex, }: Props) => JSX.Element;
|
|
22
|
+
export declare const useCellContext: () => State;
|
|
23
|
+
export {};
|
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
2
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
3
|
+
return cooked;
|
|
4
|
+
};
|
|
5
|
+
var __assign = (this && this.__assign) || function () {
|
|
6
|
+
__assign = Object.assign || function(t) {
|
|
7
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
8
|
+
s = arguments[i];
|
|
9
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
10
|
+
t[p] = s[p];
|
|
11
|
+
}
|
|
12
|
+
return t;
|
|
13
|
+
};
|
|
14
|
+
return __assign.apply(this, arguments);
|
|
15
|
+
};
|
|
16
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
17
|
+
import { createContext, useContext, useRef, useState } from "react";
|
|
18
|
+
import { css } from "styled-components";
|
|
19
|
+
import { useSpreadsheetContext } from "../../SpreadsheetContextProvider";
|
|
20
|
+
// 1x1 transparent GIF to prevent drag image from showing
|
|
21
|
+
var img = new Image();
|
|
22
|
+
img.src =
|
|
23
|
+
"data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==";
|
|
24
|
+
var CellContext = createContext({});
|
|
25
|
+
export var CellContextProvider = function (_a) {
|
|
26
|
+
var children = _a.children, rowIndex = _a.rowIndex, colIndex = _a.colIndex;
|
|
27
|
+
var _b = useState(false), isFocused = _b[0], setIsFocused = _b[1];
|
|
28
|
+
var _c = useSpreadsheetContext(), isReadOnly = _c.isReadOnly, selectedCellRect = _c.selectedCellRect, setSelectedCellRect = _c.setSelectedCellRect;
|
|
29
|
+
var isSelected = (function () {
|
|
30
|
+
var start = selectedCellRect.start, end = selectedCellRect.end;
|
|
31
|
+
var isRowSelected = rowIndex >= start.rowIndex && rowIndex <= end.rowIndex;
|
|
32
|
+
var isColSelected = colIndex >= start.colIndex && colIndex <= end.colIndex;
|
|
33
|
+
return isRowSelected && isColSelected;
|
|
34
|
+
})();
|
|
35
|
+
var selectedCellsCount = (function () {
|
|
36
|
+
var start = selectedCellRect.start, end = selectedCellRect.end;
|
|
37
|
+
return ((end.rowIndex - start.rowIndex + 1) * (end.colIndex - start.colIndex + 1));
|
|
38
|
+
})();
|
|
39
|
+
var updateSelectionRect = function (newRowIndex, newColIndex) {
|
|
40
|
+
setSelectedCellRect(function (prev) {
|
|
41
|
+
return __assign(__assign({}, prev), { start: {
|
|
42
|
+
rowIndex: Math.min(prev.initialCell.rowIndex, newRowIndex),
|
|
43
|
+
colIndex: Math.min(prev.initialCell.colIndex, newColIndex),
|
|
44
|
+
}, end: {
|
|
45
|
+
rowIndex: Math.max(prev.initialCell.rowIndex, newRowIndex),
|
|
46
|
+
colIndex: Math.max(prev.initialCell.colIndex, newColIndex),
|
|
47
|
+
} });
|
|
48
|
+
});
|
|
49
|
+
};
|
|
50
|
+
var onClick = function (e) {
|
|
51
|
+
if (e.shiftKey) {
|
|
52
|
+
updateSelectionRect(rowIndex, colIndex);
|
|
53
|
+
}
|
|
54
|
+
else {
|
|
55
|
+
setIsFocused(true);
|
|
56
|
+
setSelectedCellRect({
|
|
57
|
+
start: { rowIndex: rowIndex, colIndex: colIndex },
|
|
58
|
+
end: { rowIndex: rowIndex, colIndex: colIndex },
|
|
59
|
+
initialCell: { rowIndex: rowIndex, colIndex: colIndex },
|
|
60
|
+
});
|
|
61
|
+
}
|
|
62
|
+
};
|
|
63
|
+
var onBlur = function () {
|
|
64
|
+
setIsFocused(false);
|
|
65
|
+
};
|
|
66
|
+
var onDragOver = function () {
|
|
67
|
+
if (isUpdatingSelection.current)
|
|
68
|
+
return;
|
|
69
|
+
isUpdatingSelection.current = true;
|
|
70
|
+
setTimeout(function () {
|
|
71
|
+
isUpdatingSelection.current = false;
|
|
72
|
+
updateSelectionRect(rowIndex, colIndex);
|
|
73
|
+
}, 50);
|
|
74
|
+
};
|
|
75
|
+
var onDragStart = function (e) {
|
|
76
|
+
e.dataTransfer.setDragImage(img, -10, -10);
|
|
77
|
+
setSelectedCellRect({
|
|
78
|
+
start: { rowIndex: rowIndex, colIndex: colIndex },
|
|
79
|
+
end: { rowIndex: rowIndex, colIndex: colIndex },
|
|
80
|
+
initialCell: { rowIndex: rowIndex, colIndex: colIndex },
|
|
81
|
+
editMode: true,
|
|
82
|
+
});
|
|
83
|
+
};
|
|
84
|
+
var isUpdatingSelection = useRef(false);
|
|
85
|
+
var onDragEnd = function () {
|
|
86
|
+
setSelectedCellRect(function (p) { return (__assign(__assign({}, p), { editMode: false })); });
|
|
87
|
+
};
|
|
88
|
+
var selectedCellStyles = css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), function (p) {
|
|
89
|
+
var start = selectedCellRect.start, end = selectedCellRect.end, initialCell = selectedCellRect.initialCell;
|
|
90
|
+
var isTopEdge = rowIndex === start.rowIndex;
|
|
91
|
+
var isBottomEdge = rowIndex === end.rowIndex;
|
|
92
|
+
var isLeftEdge = colIndex === start.colIndex;
|
|
93
|
+
var isRightEdge = colIndex === end.colIndex;
|
|
94
|
+
var withDashedBorder = selectedCellRect.isDashed;
|
|
95
|
+
var isInitialCell = rowIndex === (initialCell === null || initialCell === void 0 ? void 0 : initialCell.rowIndex) &&
|
|
96
|
+
colIndex === (initialCell === null || initialCell === void 0 ? void 0 : initialCell.colIndex);
|
|
97
|
+
// add selection rect border
|
|
98
|
+
var boxShadow = [
|
|
99
|
+
isTopEdge ? "inset 0 1px 0 ".concat(p.theme.colors.blue500) : "",
|
|
100
|
+
isRightEdge
|
|
101
|
+
? "inset -2px 0 0 ".concat(p.theme.colors.blue500)
|
|
102
|
+
: "inset -1px 0 0 ".concat(p.theme.colors.gray300),
|
|
103
|
+
isBottomEdge ? "inset 0 -1px 0 ".concat(p.theme.colors.blue500) : "",
|
|
104
|
+
isLeftEdge ? "inset 1px 0 0 ".concat(p.theme.colors.blue500) : "",
|
|
105
|
+
]
|
|
106
|
+
.filter(Boolean)
|
|
107
|
+
.join(", ");
|
|
108
|
+
var isInSelectionRect = selectedCellsCount > 1 && isSelected;
|
|
109
|
+
return (isInSelectionRect && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background-color: ", ";\n box-shadow: ", ";\n ", "\n ", "\n "], ["\n background-color: ", ";\n box-shadow: ", ";\n ", "\n ", "\n "])), p.theme.colors.blue100, boxShadow, withDashedBorder && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n box-shadow: inset -1px 0 0 ", ";\n position: relative;\n &::before {\n content: \"\";\n position: absolute;\n top: ", ";\n right: ", ";\n bottom: ", ";\n left: ", ";\n border: 2.5px dashed ", ";\n }\n "], ["\n box-shadow: inset -1px 0 0 ", ";\n position: relative;\n &::before {\n content: \"\";\n position: absolute;\n top: ", ";\n right: ", ";\n bottom: ", ";\n left: ", ";\n border: 2.5px dashed ", ";\n }\n "])), function (p) { return p.theme.colors.gray300; }, isTopEdge ? "0" : "-2.5px", isRightEdge ? "0" : "-2.5px", isBottomEdge ? "0" : "-2.5px", isLeftEdge ? "0" : "-2.5px", p.theme.colors.blue500), isInitialCell && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n box-shadow: inset 0 0 0 2px ", ";\n "], ["\n box-shadow: inset 0 0 0 2px ", ";\n "])), p.theme.colors.blue500)));
|
|
110
|
+
});
|
|
111
|
+
var selectionProps = isReadOnly
|
|
112
|
+
? {}
|
|
113
|
+
: {
|
|
114
|
+
onClick: onClick,
|
|
115
|
+
onDragStart: onDragStart,
|
|
116
|
+
onDragEnd: onDragEnd,
|
|
117
|
+
onDragOver: onDragOver,
|
|
118
|
+
onBlur: onBlur,
|
|
119
|
+
draggable: !isFocused,
|
|
120
|
+
};
|
|
121
|
+
return (_jsx(CellContext.Provider, __assign({ value: {
|
|
122
|
+
isSelected: selectedCellsCount > 1 ? isSelected : false,
|
|
123
|
+
selectionProps: selectionProps,
|
|
124
|
+
selectedCellStyles: selectedCellStyles,
|
|
125
|
+
} }, { children: children })));
|
|
126
|
+
};
|
|
127
|
+
export var useCellContext = function () { return useContext(CellContext); };
|
|
128
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
@@ -23,21 +23,22 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
23
23
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
24
24
|
import React, { useCallback, useEffect, useMemo, useRef } from "react";
|
|
25
25
|
import { areEqual } from "react-window";
|
|
26
|
-
import {
|
|
27
|
-
import {
|
|
28
|
-
import { Div } from "
|
|
29
|
-
import useWindowDimensions from "
|
|
30
|
-
import {
|
|
31
|
-
import { spreadsheetHeaderHeightPx, spreadsheetRowHeightPx } from "
|
|
32
|
-
import {
|
|
33
|
-
import
|
|
34
|
-
import {
|
|
35
|
-
import
|
|
36
|
-
import {
|
|
37
|
-
import {
|
|
38
|
-
import
|
|
39
|
-
import {
|
|
40
|
-
import {
|
|
26
|
+
import { getTableHeight } from "../../..";
|
|
27
|
+
import { TableActions } from "../../../../../common/Table/TableActions";
|
|
28
|
+
import { Div } from "../../../../../styled/utils";
|
|
29
|
+
import useWindowDimensions from "../../../../../utils/hooks/useWindowSize";
|
|
30
|
+
import { useImporterContext } from "../../../../contexts/ImporterContextProvider";
|
|
31
|
+
import { spreadsheetHeaderHeightPx, spreadsheetRowHeightPx, } from "../../common";
|
|
32
|
+
import { useDataSetContext } from "../../DataSetContextProvider";
|
|
33
|
+
import { useFilteredDataContext } from "../../FilteredDataContextProvider";
|
|
34
|
+
import { useSpreadsheetContext } from "../../SpreadsheetContextProvider";
|
|
35
|
+
import * as S from "../../styles";
|
|
36
|
+
import { useValidationContext } from "../../ValidationContextProvider";
|
|
37
|
+
import { FieldHeader } from "../FieldHeader";
|
|
38
|
+
import GlobalStyle from "../GlobalStyle";
|
|
39
|
+
import { inputTypes } from "../inputs";
|
|
40
|
+
import { SpreadsheetRowCheckboxes } from "../SpreadsheetRowCheckboxes";
|
|
41
|
+
import { CellContextProvider } from "./CellContextProvider";
|
|
41
42
|
var getItemKey = function (record) { return record._meta.id; };
|
|
42
43
|
var SpreadsheetData = function (props) {
|
|
43
44
|
var _a = useSpreadsheetContext(), fields = _a.fields, filteredDataIds = _a.filteredDataIds, isReadOnly = _a.isReadOnly, options = _a.options, selectedRows = _a.selectedRows, setSelectedRows = _a.setSelectedRows, checkboxColumnWidth = _a.checkboxColumnWidth;
|
|
@@ -82,8 +83,8 @@ var SpreadsheetData = function (props) {
|
|
|
82
83
|
Header: function () { return _jsx(FieldHeader, { field: field }); },
|
|
83
84
|
Content: function (record) {
|
|
84
85
|
var Input = inputTypes[field.type];
|
|
85
|
-
var rowIndex = record.rowIndex, columnWidth = record.columnWidth, recordProp = __rest(record, ["rowIndex", "columnWidth"]);
|
|
86
|
-
return (_jsx(Input, { id: "".concat(field.name, "-").concat(rowIndex), fieldType: field.type, name: field.name, options: field.options, record: recordProp, columnWidth: columnWidth }));
|
|
86
|
+
var rowIndex = record.rowIndex, colIndex = record.colIndex, columnWidth = record.columnWidth, recordProp = __rest(record, ["rowIndex", "colIndex", "columnWidth"]);
|
|
87
|
+
return (_jsx(CellContextProvider, __assign({ rowIndex: rowIndex, colIndex: colIndex }, { children: _jsx(Input, { id: "".concat(field.name, "-").concat(rowIndex), fieldType: field.type, name: field.name, options: field.options, record: recordProp, columnWidth: columnWidth }) })));
|
|
87
88
|
},
|
|
88
89
|
}); });
|
|
89
90
|
}, [fields, handleSortByFieldErrors, dataSet.current]);
|
|
@@ -113,6 +114,6 @@ var SpreadsheetData = function (props) {
|
|
|
113
114
|
currentStepIndex === 0, dflex: true, h100: true }, { children: [(options === null || options === void 0 ? void 0 : options.showCheckboxColumn) && (_jsx(SpreadsheetRowCheckboxes, { gridRef: rowCheckboxesGridRef, height: spreadsheetHeight, isLoadingData: showValidationProgress })), _jsx(S.TableView, { rowCount: filteredDataIds.length, tableHeadersHeight: spreadsheetHeaderHeightPx, rowHeight: spreadsheetRowHeightPx, h: null, rowWidthScalingFactor: rowWidthScalingFactor, dataRefIds: {
|
|
114
115
|
ref: dataSet,
|
|
115
116
|
ids: filteredDataIds,
|
|
116
|
-
}, columns: columns, onTableScroll: onTableScroll, getItemKey: getItemKey, checkboxColumnWidth: checkboxColumnWidth, isFiltering: isFiltering })] }))] }))] })));
|
|
117
|
+
}, columns: columns, onTableScroll: onTableScroll, getItemKey: getItemKey, checkboxColumnWidth: checkboxColumnWidth, isFiltering: isFiltering, shouldHideTable: dataLength === 0 })] }))] }))] })));
|
|
117
118
|
};
|
|
118
119
|
export default React.memo(SpreadsheetData, areEqual);
|
|
@@ -40,13 +40,13 @@ import { FixedSizeGrid as Grid } from "react-window";
|
|
|
40
40
|
import styled, { css } from "styled-components";
|
|
41
41
|
import { Checkbox } from "../../../../common/inputs/Checkbox";
|
|
42
42
|
import { Div } from "../../../../styled/utils";
|
|
43
|
-
import { useImporterContext } from "../../../contexts/ImporterContextProvider";
|
|
44
43
|
import { useReviewContext } from "../../../Review/ReviewContextProvider";
|
|
45
|
-
import {
|
|
46
|
-
import { spreadsheetHeaderHeightPx } from "../common/index";
|
|
44
|
+
import { useImporterContext } from "../../../contexts/ImporterContextProvider";
|
|
47
45
|
import { useDataSetContext } from "../DataSetContextProvider";
|
|
48
46
|
import { useSpreadsheetContext } from "../SpreadsheetContextProvider";
|
|
49
47
|
import { rowIsEmpty } from "../SpreadsheetContextProvider/utils";
|
|
48
|
+
import { spreadsheetRowHeightPx } from "../common";
|
|
49
|
+
import { spreadsheetHeaderHeightPx } from "../common/index";
|
|
50
50
|
var StyledGrid = styled(Grid)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background: ", ";\n overflow-y: scroll;\n"], ["\n background: ", ";\n overflow-y: scroll;\n"])), function (_a) {
|
|
51
51
|
var theme = _a.theme;
|
|
52
52
|
return theme.colors.white50;
|
|
@@ -60,14 +60,14 @@ var gridStyles = {
|
|
|
60
60
|
export var SpreadsheetRowCheckboxes = function (_a) {
|
|
61
61
|
var height = _a.height, gridRef = _a.gridRef, isLoadingData = _a.isLoadingData, props = __rest(_a, ["height", "gridRef", "isLoadingData"]);
|
|
62
62
|
var _b = useSpreadsheetContext(), selectedRows = _b.selectedRows, options = _b.options, filteredDataIds = _b.filteredDataIds, lastClickedIndexRef = _b.lastClickedIndexRef, setSelectedRows = _b.setSelectedRows, checkboxColumnWidth = _b.checkboxColumnWidth;
|
|
63
|
-
var
|
|
63
|
+
var hasTransformedRecords = useReviewContext().hasTransformedRecords;
|
|
64
64
|
var getRecord = useDataSetContext().getRecord;
|
|
65
65
|
var currentStepIndex = useImporterContext().currentStepIndex;
|
|
66
66
|
var nonEmptyRows = useMemo(function () { return filteredDataIds.filter(function (rowId) { return !rowIsEmpty(getRecord(rowId)); }); }, [filteredDataIds]);
|
|
67
67
|
var isIndeterminate = selectedRows.length > 0 && selectedRows.length < nonEmptyRows.length;
|
|
68
68
|
var handleRowSelect = function (checked, rowIndex, rowMetaId) {
|
|
69
69
|
var _a;
|
|
70
|
-
if (
|
|
70
|
+
if (hasTransformedRecords)
|
|
71
71
|
return;
|
|
72
72
|
var recordId = filteredDataIds[rowIndex];
|
|
73
73
|
var record = getRecord(recordId);
|
|
@@ -93,7 +93,7 @@ export var SpreadsheetRowCheckboxes = function (_a) {
|
|
|
93
93
|
};
|
|
94
94
|
var handleSelectMultipleRows = function (rowIndex) {
|
|
95
95
|
var _a;
|
|
96
|
-
if (
|
|
96
|
+
if (hasTransformedRecords)
|
|
97
97
|
return;
|
|
98
98
|
var rowId = filteredDataIds[rowIndex];
|
|
99
99
|
var record = getRecord(rowId);
|
|
@@ -133,7 +133,7 @@ export var SpreadsheetRowCheckboxes = function (_a) {
|
|
|
133
133
|
}
|
|
134
134
|
};
|
|
135
135
|
var handleSelectAllRows = function (checked) {
|
|
136
|
-
if (
|
|
136
|
+
if (hasTransformedRecords)
|
|
137
137
|
return;
|
|
138
138
|
if (checked) {
|
|
139
139
|
var allRows = filteredDataIds.filter(function (recordId) {
|
|
@@ -34,10 +34,9 @@ export var SpreadsheetAutocomplete = function (props) {
|
|
|
34
34
|
var _a, _b, _c;
|
|
35
35
|
var name = props.name, record = props.record, options = props.options, fieldType = props.fieldType, _d = props.isInputDisabled, isInputDisabled = _d === void 0 ? false : _d, id = props.id;
|
|
36
36
|
var _e = useSpreadsheetField(name, record, fieldType), value = _e.value, setValue = _e.setValue, validationError = _e.validationError, validationWarning = _e.validationWarning;
|
|
37
|
-
var
|
|
38
|
-
var isHighlighted =
|
|
39
|
-
|
|
40
|
-
return (_jsx(SpreadsheetField, __assign({ validationError: validationError, validationWarning: validationWarning, isHighlighted: isHighlighted }, { children: _jsx(Autocomplete, { placement: "bottom", isInputDisabled: isInputDisabled, hasError: !!validationError, hasWarning: !!validationWarning, options: options, value: value, icon: chevronDownIcon, onChange: function (v) { return !isTransformTooltipOpened && setValue(v); }, disabledWhen: isTransformTooltipOpened, id: id }) })));
|
|
37
|
+
var hasTransformedRecords = useReviewContext().hasTransformedRecords;
|
|
38
|
+
var isHighlighted = hasTransformedRecords && ((_c = (_b = (_a = record._meta) === null || _a === void 0 ? void 0 : _a.transformedRow) === null || _b === void 0 ? void 0 : _b[name]) === null || _c === void 0 ? void 0 : _c.transformed);
|
|
39
|
+
return (_jsx(SpreadsheetField, __assign({ validationError: validationError, validationWarning: validationWarning, isHighlighted: isHighlighted }, { children: _jsx(Autocomplete, { placement: "bottom", isInputDisabled: isInputDisabled, hasError: !!validationError, hasWarning: !!validationWarning, options: options, value: value, icon: chevronDownIcon, onChange: function (v) { return !hasTransformedRecords && setValue(v); }, disabledWhen: hasTransformedRecords, id: id }) })));
|
|
41
40
|
};
|
|
42
41
|
var chevronDownIcon = (_jsx("svg", __assign({ width: "10", height: "6", viewBox: "0 0 10 6", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { d: "M8.46289 1L4.98131 4.48159L1.49972 1", stroke: "black", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })));
|
|
43
42
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
@@ -28,6 +28,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
28
28
|
import { useMemo } from "react";
|
|
29
29
|
import styled, { css } from "styled-components";
|
|
30
30
|
import { SpreadsheetField, useSpreadsheetField } from ".";
|
|
31
|
+
import { handleInputPaste } from "../../../../../common";
|
|
31
32
|
import { Div } from "../../../../../styled/utils";
|
|
32
33
|
import { useReviewContext } from "../../../../Review/ReviewContextProvider";
|
|
33
34
|
import { AVERAGE_CHAR_SIZE, getFieldContentWidth } from "./utils";
|
|
@@ -39,16 +40,15 @@ export var SpreadsheetInput = function (_a) {
|
|
|
39
40
|
var _b, _c, _d, _e, _f, _g;
|
|
40
41
|
var name = _a.name, record = _a.record, fieldType = _a.fieldType, columnWidth = _a.columnWidth, props = __rest(_a, ["name", "record", "fieldType", "columnWidth"]);
|
|
41
42
|
var _h = useSpreadsheetField(name, record, fieldType), value = _h.value, setValue = _h.setValue, validationError = _h.validationError, validationWarning = _h.validationWarning;
|
|
42
|
-
var
|
|
43
|
+
var hasTransformedRecords = useReviewContext().hasTransformedRecords;
|
|
43
44
|
var defaultWidthAsNumber = Number.parseInt(columnWidth.replace("px", ""));
|
|
44
45
|
var _fieldContentWidth = getFieldContentWidth({
|
|
45
46
|
record: record,
|
|
46
47
|
fieldType: fieldType,
|
|
47
|
-
isTooltipOpened:
|
|
48
|
+
isTooltipOpened: hasTransformedRecords,
|
|
48
49
|
name: name,
|
|
49
50
|
});
|
|
50
|
-
var isHighlighted =
|
|
51
|
-
((_d = (_c = (_b = record._meta) === null || _b === void 0 ? void 0 : _b.transformedRow) === null || _c === void 0 ? void 0 : _c[name]) === null || _d === void 0 ? void 0 : _d.transformed);
|
|
51
|
+
var isHighlighted = hasTransformedRecords && ((_d = (_c = (_b = record._meta) === null || _b === void 0 ? void 0 : _b.transformedRow) === null || _c === void 0 ? void 0 : _c[name]) === null || _d === void 0 ? void 0 : _d.transformed);
|
|
52
52
|
var expandedFieldWidth = useMemo(function () {
|
|
53
53
|
// if the value is falsy, returns the default width
|
|
54
54
|
if (!value)
|
|
@@ -60,11 +60,11 @@ export var SpreadsheetInput = function (_a) {
|
|
|
60
60
|
? "".concat(totalInputSize, "px")
|
|
61
61
|
: "".concat(defaultWidthAsNumber, "px");
|
|
62
62
|
}, [value, record, columnWidth]);
|
|
63
|
-
return (_jsxs(SpreadsheetField, __assign({ validationError: validationError, validationWarning: validationWarning, isHighlighted: isHighlighted, defaultFieldWidth: defaultWidthAsNumber, expandedFieldWidth: expandedFieldWidth, shouldExpandInput: true }, { children: [_jsx(Input, __assign({ autoComplete: "off", hasError: !!validationError, hasWarning: !!validationWarning, value: parseValue(value), onChange: function (_a) {
|
|
63
|
+
return (_jsxs(SpreadsheetField, __assign({ validationError: validationError, validationWarning: validationWarning, isHighlighted: isHighlighted, defaultFieldWidth: defaultWidthAsNumber, expandedFieldWidth: expandedFieldWidth, shouldExpandInput: true }, { children: [_jsx(Input, __assign({ onPaste: handleInputPaste, autoComplete: "off", hasError: !!validationError, hasWarning: !!validationWarning, value: parseValue(value), onChange: function (_a) {
|
|
64
64
|
var value = _a.target.value;
|
|
65
|
-
return !
|
|
66
|
-
}, disabledWhen:
|
|
67
|
-
|
|
65
|
+
return !hasTransformedRecords && setValue(value);
|
|
66
|
+
}, disabledWhen: hasTransformedRecords }, props)), ((_g = (_f = (_e = record === null || record === void 0 ? void 0 : record._meta) === null || _e === void 0 ? void 0 : _e.transformedRow) === null || _f === void 0 ? void 0 : _f[name]) === null || _g === void 0 ? void 0 : _g.original) &&
|
|
67
|
+
hasTransformedRecords && (_jsx(SuffixText, __assign({ className: "suffix", fieldWidth: _fieldContentWidth }, { children: record._meta.transformedRow[name].original })))] })));
|
|
68
68
|
};
|
|
69
69
|
var SuffixText = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n color: #1c1c1c;\n font-family: DM Sans;\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n position: absolute;\n left: ", "px;\n text-decoration: line-through;\n white-space: nowrap;\n"], ["\n color: #1c1c1c;\n font-family: DM Sans;\n font-size: 16px;\n font-style: normal;\n font-weight: 400;\n position: absolute;\n left: ", "px;\n text-decoration: line-through;\n white-space: nowrap;\n"])), function (_a) {
|
|
70
70
|
var fieldWidth = _a.fieldWidth;
|
|
@@ -6,6 +6,17 @@ export declare const useSpreadsheetField: (name: string, record: Record, fieldTy
|
|
|
6
6
|
validationError: any;
|
|
7
7
|
validationWarning: any;
|
|
8
8
|
};
|
|
9
|
+
type ContentContainerProps = {
|
|
10
|
+
hasError?: boolean;
|
|
11
|
+
hasWarning?: boolean;
|
|
12
|
+
isReadOnly?: boolean;
|
|
13
|
+
isHighlighted?: boolean;
|
|
14
|
+
expandedFieldWidth?: string;
|
|
15
|
+
shouldExpandInput?: boolean;
|
|
16
|
+
defaultFieldWidth?: number;
|
|
17
|
+
isSelected?: boolean;
|
|
18
|
+
};
|
|
19
|
+
export declare const ContentContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../../../../../styled/utils").CSSProps & ContentContainerProps, never>;
|
|
9
20
|
type SpreadsheetFieldProps = {
|
|
10
21
|
validationError: string | JSX.Element;
|
|
11
22
|
validationWarning: string | JSX.Element;
|
|
@@ -62,16 +62,17 @@ import { useSpreadsheetContext } from "../../SpreadsheetContextProvider";
|
|
|
62
62
|
import { useDataSetManipulation } from "../../SpreadsheetContextProvider/useDataSetManipulation";
|
|
63
63
|
import { useValidationContext } from "../../ValidationContextProvider";
|
|
64
64
|
import { parseValue } from "../../common";
|
|
65
|
+
import { useCellContext } from "../SpreadsheetData/CellContextProvider";
|
|
65
66
|
export var useSpreadsheetField = function (name, record, fieldType) {
|
|
66
67
|
var appendNewRecordToSpreadsheet = useDataSetManipulation().appendNewRecordToSpreadsheet;
|
|
67
|
-
var
|
|
68
|
-
var
|
|
68
|
+
var _a = useFilteredDataContext(), lastFilteredRecordId = _a.lastFilteredRecordId, spreadsheetFilter = _a.spreadsheetFilter;
|
|
69
|
+
var _b = useValidationContext(), updateRecordAndRevalidate = _b.updateRecordAndRevalidate, warnings = _b.warnings, errors = _b.errors;
|
|
69
70
|
var getRecord = useDataSetContext().getRecord;
|
|
70
|
-
var
|
|
71
|
-
var
|
|
72
|
-
var
|
|
73
|
-
var
|
|
74
|
-
var
|
|
71
|
+
var _c = useState(record), recordState = _c[0], setRecordState = _c[1];
|
|
72
|
+
var _d = useState(record[name]), value = _d[0], setValue = _d[1];
|
|
73
|
+
var _e = useEventManagerContext(), on = _e.on, off = _e.off;
|
|
74
|
+
var _f = useState(get(errors.current, "".concat(record._meta.id, ".").concat(name), null)), validationError = _f[0], setValidationError = _f[1];
|
|
75
|
+
var _g = useState(get(warnings.current, "".concat(record._meta.id, ".").concat(name), null)), validationWarning = _g[0], setValidationWarning = _g[1];
|
|
75
76
|
useEffect(function () {
|
|
76
77
|
var listener = function (newRecord) {
|
|
77
78
|
var _record = getRecord(record._meta.id);
|
|
@@ -91,7 +92,8 @@ export var useSpreadsheetField = function (name, record, fieldType) {
|
|
|
91
92
|
_record[name] = parseValue(fieldType, value);
|
|
92
93
|
updateRecordAndRevalidate(_record);
|
|
93
94
|
setRecordState(_record);
|
|
94
|
-
if (record._meta.id === lastFilteredRecordId.current
|
|
95
|
+
if (record._meta.id === lastFilteredRecordId.current &&
|
|
96
|
+
spreadsheetFilter.byRow === "all") {
|
|
95
97
|
appendNewRecordToSpreadsheet();
|
|
96
98
|
}
|
|
97
99
|
return [2 /*return*/];
|
|
@@ -113,34 +115,40 @@ export var useSpreadsheetField = function (name, record, fieldType) {
|
|
|
113
115
|
validationWarning: validationWarning,
|
|
114
116
|
};
|
|
115
117
|
};
|
|
116
|
-
var ContentContainer = styled(Div)(
|
|
118
|
+
export var ContentContainer = styled(Div)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n height: calc(100% - 1px);\n width: ", ";\n overflow: hidden;\n\n ", "\n\n &:focus-within, \n &:hover {\n ", "\n }\n\n &:focus-within, \n &:hover {\n ", "\n }\n\n ", ";\n ", "\n ", "\n ", "\n\n ", "\n\n ", "\n"], ["\n height: calc(100% - 1px);\n width: ", ";\n overflow: hidden;\n\n ", "\n\n &:focus-within, \n &:hover {\n ", "\n }\n\n &:focus-within, \n &:hover {\n ", "\n }\n\n ", ";\n ", "\n ", "\n ", "\n\n ", "\n\n ", "\n"])), function (_a) {
|
|
117
119
|
var defaultFieldWidth = _a.defaultFieldWidth;
|
|
118
120
|
return defaultFieldWidth ? "".concat(defaultFieldWidth, "px") : "100%";
|
|
119
121
|
}, function (_a) {
|
|
120
122
|
var expandedFieldWidth = _a.expandedFieldWidth;
|
|
121
123
|
return expandedFieldWidth && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: absolute;\n "], ["\n position: absolute;\n "])));
|
|
122
124
|
}, function (_a) {
|
|
123
|
-
var hasError = _a.hasError, hasWarning = _a.hasWarning, isHighlighted = _a.isHighlighted, theme = _a.theme, shouldExpandInput = _a.shouldExpandInput;
|
|
125
|
+
var hasError = _a.hasError, hasWarning = _a.hasWarning, isHighlighted = _a.isHighlighted, theme = _a.theme, shouldExpandInput = _a.shouldExpandInput, isSelected = _a.isSelected;
|
|
124
126
|
return shouldExpandInput &&
|
|
125
127
|
!hasError &&
|
|
126
|
-
!hasWarning &&
|
|
128
|
+
!hasWarning &&
|
|
129
|
+
!isSelected && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background: ", ";\n box-shadow: 0px 0px 0px 2px ", " inset;\n "], ["\n background: ", ";\n box-shadow: 0px 0px 0px 2px ", " inset;\n "])), !isHighlighted
|
|
127
130
|
? theme.colors.white
|
|
128
131
|
: theme.colors.blue100, function (p) { return p.theme.colors.blue500; });
|
|
129
132
|
}, function (_a) {
|
|
130
133
|
var expandedFieldWidth = _a.expandedFieldWidth, shouldExpandInput = _a.shouldExpandInput;
|
|
131
|
-
return shouldExpandInput && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: ", ";\n
|
|
134
|
+
return shouldExpandInput && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: ", ";\n\n .suffix {\n right: 12px;\n }\n "], ["\n width: ", ";\n\n .suffix {\n right: 12px;\n }\n "])), expandedFieldWidth || "auto");
|
|
132
135
|
}, function (p) { return p.theme.css.alignCenter; }, function (p) {
|
|
133
|
-
return p.
|
|
136
|
+
return p.hasWarning && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n color: ", ";\n background: ", ";\n /* internal border */\n box-shadow: 0px 0px 0px 1px ", " inset;\n ", "\n "], ["\n color: ", ";\n background: ", ";\n /* internal border */\n box-shadow: 0px 0px 0px 1px ", " inset;\n ", "\n "])), function (p) { return p.theme.colors.orange1200; }, function (p) { return p.theme.colors.orange1100; }, function (p) { return p.theme.colors.orange500; }, p.isSelected && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n filter: brightness(90%);\n "], ["\n filter: brightness(90%);\n "]))));
|
|
134
137
|
}, function (p) {
|
|
135
|
-
return p.
|
|
138
|
+
return p.hasError && css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n color: ", ";\n background: ", ";\n /* internal border */\n box-shadow: 0px 0px 0px 1px ", " inset;\n ", "\n "], ["\n color: ", ";\n background: ", ";\n /* internal border */\n box-shadow: 0px 0px 0px 1px ", " inset;\n ", "\n "])), function (p) { return p.theme.colors.error; }, function (p) { return p.theme.colors.red100; }, function (p) { return p.theme.colors.error; }, p.isSelected && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n filter: brightness(90%);\n "], ["\n filter: brightness(90%);\n "]))));
|
|
136
139
|
}, function (p) {
|
|
137
|
-
return p.
|
|
140
|
+
return p.isHighlighted && css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n background: ", ";\n /* internal border */\n box-shadow: 0px 0px 0px 2px ", " inset;\n z-index: 99;\n color: ", ";\n\n &:hover {\n z-index: 100;\n }\n\n input {\n color: ", ";\n }\n "], ["\n background: ", ";\n /* internal border */\n box-shadow: 0px 0px 0px 2px ", " inset;\n z-index: 99;\n color: ", ";\n\n &:hover {\n z-index: 100;\n }\n\n input {\n color: ", ";\n }\n "])), function (p) { return p.theme.colors.blue100; }, function (p) { return p.theme.colors.blue500; }, function (p) { return p.theme.colors.gray1000; }, function (p) { return p.theme.colors.gray1000; });
|
|
141
|
+
}, function (_a) {
|
|
142
|
+
var shouldExpandInput = _a.shouldExpandInput, isHighlighted = _a.isHighlighted;
|
|
143
|
+
return shouldExpandInput &&
|
|
144
|
+
!isHighlighted && css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n z-index: 1;\n "], ["\n z-index: 1;\n "])));
|
|
138
145
|
}, function (p) {
|
|
139
|
-
return p.isReadOnly && css(
|
|
146
|
+
return p.isReadOnly && css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n pointer-events: none;\n "], ["\n pointer-events: none;\n "])));
|
|
140
147
|
});
|
|
141
148
|
export var SpreadsheetField = function (_a) {
|
|
142
149
|
var validationError = _a.validationError, validationWarning = _a.validationWarning, children = _a.children, isHighlighted = _a.isHighlighted, expandedFieldWidth = _a.expandedFieldWidth, shouldExpandInput = _a.shouldExpandInput, defaultFieldWidth = _a.defaultFieldWidth;
|
|
143
150
|
var isReadOnly = useSpreadsheetContext().isReadOnly;
|
|
144
|
-
|
|
151
|
+
var _b = useCellContext(), selectedCellStyles = _b.selectedCellStyles, selectionProps = _b.selectionProps, isSelected = _b.isSelected;
|
|
152
|
+
return (_jsx(Div, __assign({ dim: "100%" }, selectionProps, { children: _jsx(TooltipProvider, __assign({ tooltip: validationError || validationWarning }, { children: _jsx(Div, __assign({ dim: "100%" }, { children: _jsx(ContentContainer, __assign({ css: selectedCellStyles, hasError: validationError !== null, hasWarning: validationWarning !== null, isSelected: isSelected, isHighlighted: isHighlighted, expandedFieldWidth: expandedFieldWidth, defaultFieldWidth: defaultFieldWidth, shouldExpandInput: shouldExpandInput, isReadOnly: isReadOnly, className: "input-content" }, { children: children })) })) })) })));
|
|
145
153
|
};
|
|
146
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
|
|
154
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
|
|
@@ -2,7 +2,6 @@ import { Field, Record, TransformedRecord } from "../../../../types";
|
|
|
2
2
|
type TransformRecordArgs = {
|
|
3
3
|
record: Record;
|
|
4
4
|
fields: Field[];
|
|
5
|
-
possibleDateFormats?: string[];
|
|
6
5
|
};
|
|
7
|
-
export declare const transformRecord: ({ record, fields
|
|
6
|
+
export declare const transformRecord: ({ record, fields }: TransformRecordArgs) => TransformedRecord;
|
|
8
7
|
export {};
|