fuse-importer 0.21.0 → 0.23.2

package/lib/esm/Importer/Uploader/HeadersPreview.js

@@ -30,6 +30,7 @@ import { useImporterContext } from "../ImporterContextProvider";
 import { FieldTypes } from "../../types";
 import { Div } from "../../styled/utils";
 import { getSpreadsheetRowWidth } from "../common/utils";
+import { useMemo } from "react";
 var HeaderButtonsWrapper = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  > div {\n    margin-left: 8px;\n    margin-right: 8px;\n  }\n"], ["\n  > div {\n    margin-left: 8px;\n    margin-right: 8px;\n  }\n"])));
 var HeaderButtons = function () {
     var _a = useImporterContext(), setCurrentStepIndex = _a.setCurrentStepIndex, resetImport = _a.resetImport;
@@ -40,13 +41,14 @@ var HeaderButtons = function () {
 };
 var HeadersPreview = function () {
     var uploadedData = useImporterContext().uploadedData;
-    var formattedData = (function () {
+    var formattedData = useMemo(function () {
         var firstRowLen = 0;
-        if (uploadedData.length > 0 && Array.isArray(uploadedData[0]))
+        if (uploadedData.length > 0 && Array.isArray(uploadedData[0])) {
             firstRowLen = uploadedData[0].length;
-        var placeholderHeaders = __spreadArray([], Array(firstRowLen), true).map(function (_, i) {
-            return String.fromCharCode(65 + i);
-        });
+        }
+        var placeholderHeaders = new Array(firstRowLen)
+            .fill(null)
+            .map(function (_, i) { return String.fromCharCode(65 + i); });
         var getDataRows = function () {
             var emptyRows = [];
             if (uploadedData.length < 20)
@@ -60,18 +62,18 @@ var HeadersPreview = function () {
                 return entry;
             });
         };
-        var dataRows = getDataRows();
-        return dataRows;
-    })();
-    var placeholderFields = Object.keys(formattedData[0]);
-    var readonlyFields = placeholderFields.map(function (key) {
-        return {
-            label: key,
-            name: key,
-            type: FieldTypes.string,
-            isRequired: false,
-        };
-    });
+        return getDataRows();
+    }, [uploadedData]);
+    var readonlyFields = useMemo(function () {
+        return Object.keys(formattedData[0]).map(function (key) {
+            return {
+                label: key,
+                name: key,
+                type: FieldTypes.string,
+                isRequired: false,
+            };
+        });
+    }, []);
     return (_jsx(_Fragment, { children: _jsxs(Div, __assign({ flexColumn: true, centered: true, pt: 40 }, { children: [_jsx(Div, __assign({ h2: true, mb: 16 }, { children: "Verify Your Column Headers" })), _jsx(Div, __assign({ body1: true, mb: 24, textAlignCenter: true }, { children: "File must contain column headers to proceed." })), _jsx(HeaderButtons, {}), _jsx(Div, __assign({ w100: true, centered: true, mb: 36 }, { children: _jsx(Spreadsheet, __assign({ rowWidth: getSpreadsheetRowWidth(readonlyFields, 6), isReadOnly: true, initialData: formattedData }, { fields: readonlyFields }, { highlightFirstRow: true })) }))] })) }));
 };
 export default HeadersPreview;

package/lib/esm/Importer/common/Spreadsheet/SpreadsheetContextProvider.js

@@ -55,7 +55,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext, useEffect, useState } from "react";
+import { createContext, useContext, useEffect, useState, useMemo, } from "react";
 import { formatBatchErrors } from "../../..";
 import { getRecordErrors, getRenderedRecordWithErrors, recordIsEmpty, } from "./common";
 var MINIMUM_ROW_COUNT = 20;
@@ -102,10 +102,10 @@ export var SpreadsheetContextProvider = function (_a) {
     }), columnErrorCounts = _l.columnErrorCounts, totalErrors = _l.totalErrors, isValidationComplete = _l.isValidationComplete;
     useEffect(function () {
         var init = function () { return __awaiter(void 0, void 0, void 0, function () {
-            var batchValidationDelayMs, batchValidationSize, addEmtpyRows, validateInBatches;
+            var batchValidationDelayMs, batchValidationSize, addEmptyRows, validateInBatches;
             return __generator(this, function (_a) {
                 batchValidationDelayMs = options.batchValidationDelayMs, batchValidationSize = options.batchValidationSize;
-                addEmtpyRows = function () {
+                addEmptyRows = function () {
                     var newData = __spreadArray([], data, true);
                     var emptyRecord = fields.reduce(function (obj, f) {
                         var _a;
@@ -120,7 +120,7 @@ export var SpreadsheetContextProvider = function (_a) {
                     setData(newData);
                 };
                 if (data.length < MINIMUM_ROW_COUNT)
-                    addEmtpyRows();
+                    addEmptyRows();
                 validateInBatches = function () { return __awaiter(void 0, void 0, void 0, function () {
                     var validationErrors, batchSize, batchCount, batchIdx, idx, batch, errors, validationPercentage;
                     return __generator(this, function (_a) {
@@ -280,7 +280,9 @@ var useValidationState = function (_a) {
         };
         updateErrorCounts();
     }, [data, batchValidationErrors]);
-    var totalErrors = Object.keys(columnErrorCounts).reduce(function (total, key) { return total + (columnErrorCounts[key] || 0); }, 0);
+    var totalErrors = useMemo(function () {
+        return Object.keys(columnErrorCounts).reduce(function (total, key) { return total + (columnErrorCounts[key] || 0); }, 0);
+    }, []);
     var isValidationComplete = batchValidationErrors && totalErrors === 0;
     return { columnErrorCounts: columnErrorCounts, totalErrors: totalErrors, isValidationComplete: isValidationComplete };
 };

package/lib/esm/Importer/common/Spreadsheet/common/FieldHeader.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { Field } from "../../../../types";
+export declare type FieldHeaderProps = {
+    field: Field;
+    sortByFieldErrors: (name: string) => void;
+};
+export declare const FieldHeader: React.FC<FieldHeaderProps>;

package/lib/esm/Importer/common/Spreadsheet/common/FieldHeader.js

@@ -0,0 +1,31 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { TooltipProvider } from "../../../../common";
+import { Div } from "../../../../styled/utils";
+import { useSpreadsheetContext } from "../SpreadsheetContextProvider";
+import styled, { css } from "styled-components";
+var ErrorCount = styled(Div)(function (_a) {
+    var _b = _a.theme, colors = _b.colors, c = _b.css;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    color: ", ";\n    background: ", ";\n    border: solid 1px ", ";\n    padding: 4px 7px;\n    border-radius: 56px;\n    min-width: 24px;\n    ", ";\n  "], ["\n    color: ", ";\n    background: ", ";\n    border: solid 1px ", ";\n    padding: 4px 7px;\n    border-radius: 56px;\n    min-width: 24px;\n    ", ";\n  "])), colors.error, colors.red100, colors.error, c.centered);
+});
+export var FieldHeader = function (_a) {
+    var field = _a.field, sortByFieldErrors = _a.sortByFieldErrors;
+    var columnErrorCounts = useSpreadsheetContext().columnErrorCounts;
+    var fieldErrorCount = columnErrorCounts[field.name];
+    return (_jsxs(Div, __assign({ p: "0 16px", spaceBetween: true, w100: true, alignCenter: true }, { children: [_jsxs(Div, __assign({ truncateText: true }, { children: [field.label, field.isRequired && "*"] })), fieldErrorCount && (_jsx(TooltipProvider, __assign({ mr: 3, w: 35, tooltip: "Sort by ".concat(field.label, " errors") }, { children: _jsx(ErrorCount, __assign({ onClick: function () { return sortByFieldErrors(field.name); } }, { children: _jsx(Div, __assign({ centered: true }, { children: _jsx(Div, __assign({ w: 35, textAlignCenter: true, label3: true, truncateText: true }, { children: fieldErrorCount })) })) })) })))] })));
+};
+var templateObject_1;

package/lib/esm/Importer/common/Spreadsheet/common/fields/SpeadsheetAutocomplete.d.ts

@@ -1,7 +1,12 @@
-/// <reference types="react" />
-export declare const SpreadsheetAutocomplete: ({ name, record, options, isInputDisabled, }: {
-    name: any;
-    record: any;
-    options: any;
+import React from "react";
+import { Option } from "../../../../../common/inputs/Autocomplete";
+import { Record, FieldTypes } from "../../../../../types";
+export declare type AutoCompleteOption = Option;
+export declare type SpreadsheetAutocompleteProps = {
+    name: string;
+    record: Record;
+    options: AutoCompleteOption[];
     isInputDisabled?: boolean;
-}) => JSX.Element;
+    fieldType: FieldTypes;
+};
+export declare const SpreadsheetAutocomplete: React.FC<SpreadsheetAutocompleteProps>;

package/lib/esm/Importer/common/Spreadsheet/common/fields/SpeadsheetAutocomplete.js

@@ -15,9 +15,9 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import styled, { css } from "styled-components";
-import { SpreadsheetField, useSpreadsheetField, useValidationError } from ".";
+import { SpreadsheetField, useSpreadsheetField } from ".";
 import { spreadsheetRowHeightPx } from "..";
-import { Autocomplete as AutocompleteBase } from "../../../../../common/inputs/Autocomplete";
+import { Autocomplete as AutocompleteBase, } from "../../../../../common/inputs/Autocomplete";
 import { SelectMenuDiv, SelectMenuScrollArea, } from "../../../../../common/inputs/SelectMenu";
 import { HTMLInput, TextInputIcon, } from "../../../../../common/inputs/TextInput";
 import { useSpreadsheetContext } from "../../SpreadsheetContextProvider";
@@ -26,12 +26,11 @@ var Autocomplete = styled(AutocompleteBase)(templateObject_3 || (templateObject_
 }, function (p) {
     return p.hasError && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          color: ", ";\n        "], ["\n          color: ", ";\n        "])), function (p) { return p.theme.colors.error; });
 }, TextInputIcon, SelectMenuDiv, SelectMenuScrollArea);
-export var SpreadsheetAutocomplete = function (_a) {
-    var name = _a.name, record = _a.record, options = _a.options, _b = _a.isInputDisabled, isInputDisabled = _b === void 0 ? false : _b;
-    var validationError = useValidationError(name, record).validationError;
-    var _c = useSpreadsheetField(name, record), value = _c.value, setValue = _c.setValue;
+export var SpreadsheetAutocomplete = function (props) {
+    var name = props.name, record = props.record, options = props.options, fieldType = props.fieldType, _a = props.isInputDisabled, isInputDisabled = _a === void 0 ? false : _a;
+    var _b = useSpreadsheetField(name, record, fieldType), value = _b.value, setValue = _b.setValue, validationError = _b.validationError;
     var setIsScrollingEnabled = useSpreadsheetContext().setIsScrollingEnabled;
-    return (_jsx(SpreadsheetField, __assign({}, { name: name, record: record }, { children: _jsx(Autocomplete, { placement: "bottom", isInputDisabled: isInputDisabled, hasError: !!validationError, onToggle: function (isOpen) { return setIsScrollingEnabled(!isOpen); }, options: options, value: value, icon: chevronDownIcon, onChange: function (v) { return setValue(v); } }) })));
+    return (_jsx(SpreadsheetField, __assign({ validationError: validationError }, { children: _jsx(Autocomplete, { placement: "bottom", isInputDisabled: isInputDisabled, hasError: !!validationError, onToggle: function (isOpen) { return setIsScrollingEnabled(!isOpen); }, options: options, value: value, icon: chevronDownIcon, onChange: function (v) { return setValue(v); } }) })));
 };
 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" }) })));
 var templateObject_1, templateObject_2, templateObject_3;

package/lib/esm/Importer/common/Spreadsheet/common/fields/SpreadsheetInput.d.ts

@@ -1,12 +1,12 @@
 /// <reference types="react" />
 import { HTMLInputCSSProps } from "../../../../../styled/utils";
-import { Record } from "../../../../../types";
-declare type SpreadsheetTextInputArgs = {
+import { FieldTypes, Record } from "../../../../../types";
+export declare type SpreadsheetTextInputArgs = {
     name: string;
     record: Record;
+    fieldType: FieldTypes;
 } & HTMLInputCSSProps;
-export declare const SpreadsheetInput: ({ name, record, ...props }: SpreadsheetTextInputArgs) => JSX.Element;
+export declare const SpreadsheetInput: ({ name, record, fieldType, ...props }: SpreadsheetTextInputArgs) => JSX.Element;
 export declare const Input: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {
     hasError: boolean;
 } & import("../../../../../styled/utils").HTMLInputProps & import("../../../../../styled/utils").CSSProps, never>;
-export {};

package/lib/esm/Importer/common/Spreadsheet/common/fields/SpreadsheetInput.js

@@ -26,12 +26,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import styled, { css } from "styled-components";
-import { SpreadsheetField, useSpreadsheetField, useValidationError } from ".";
+import { SpreadsheetField, useSpreadsheetField } from ".";
 export var SpreadsheetInput = function (_a) {
-    var name = _a.name, record = _a.record, props = __rest(_a, ["name", "record"]);
-    var validationError = useValidationError(name, record).validationError;
-    var _b = useSpreadsheetField(name, record), value = _b.value, setValue = _b.setValue;
-    return (_jsx(SpreadsheetField, __assign({}, { name: name, record: record }, { children: _jsx(Input, __assign({ hasError: !!validationError, value: value || "", onChange: function (_a) {
+    var name = _a.name, record = _a.record, fieldType = _a.fieldType, props = __rest(_a, ["name", "record", "fieldType"]);
+    var _b = useSpreadsheetField(name, record, fieldType), value = _b.value, setValue = _b.setValue, validationError = _b.validationError;
+    return (_jsx(SpreadsheetField, __assign({ validationError: validationError }, { children: _jsx(Input, __assign({ hasError: !!validationError, value: value || "", onChange: function (_a) {
                 var value = _a.target.value;
                 return setValue(value);
             } }, props)) })));

package/lib/esm/Importer/common/Spreadsheet/common/fields/index.d.ts

@@ -1,14 +1,15 @@
 import React from "react";
-import { Record } from "../../../../../types";
+import { FieldTypes, Record } from "../../../../../types";
+export declare const parseValue: (fieldType: FieldTypes, value: any) => any;
 export declare const useValidationError: (fieldName: string, record: Record) => {
     validationError: any;
 };
-export declare const useSpreadsheetField: (name: any, record: Record) => {
+export declare const useSpreadsheetField: (name: any, record: Record, fieldType: FieldTypes) => {
     value: any;
     setValue: React.Dispatch<any>;
+    validationError: any;
 };
-export declare const SpreadsheetField: ({ name, record, children }: {
-    name: any;
-    record: any;
+export declare const SpreadsheetField: ({ validationError, children }: {
+    validationError: any;
     children: any;
 }) => JSX.Element;

package/lib/esm/Importer/common/Spreadsheet/common/fields/index.js

@@ -61,11 +61,19 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import styled, { css } from "styled-components";
-import { getRecordErrors, getRenderedRecordWithErrors } from "..";
+import { getRecordErrors, getRenderedRecordWithErrors, isFloat, isInteger, } from "..";
 import { TooltipProvider } from "../../../../../common/TooltipProvider";
 import { Div } from "../../../../../styled/utils";
+import { FieldTypes } from "../../../../../types";
 import { useSpreadsheetReviewContext } from "../../../../SpreadsheetReviewContextProvider";
 import { useSpreadsheetContext } from "../../SpreadsheetContextProvider";
+export var parseValue = function (fieldType, value) {
+    if (fieldType === FieldTypes.float)
+        return isFloat(value) ? parseFloat(value) : value;
+    if (fieldType === FieldTypes.integer)
+        return isInteger(value) ? parseInt(value) : value;
+    return value;
+};
 export var useValidationError = function (fieldName, record) {
     var isSubmitting = useSpreadsheetReviewContext().isSubmitting;
     var _a = useSpreadsheetContext(), fields = _a.fields, submittedData = _a.submittedData, batchValidationErrors = _a.batchValidationErrors;
@@ -81,9 +89,10 @@ export var useValidationError = function (fieldName, record) {
     }
     return { validationError: validationError };
 };
-export var useSpreadsheetField = function (name, record) {
+export var useSpreadsheetField = function (name, record, fieldType) {
     var _a = useSpreadsheetContext(), data = _a.data, setData = _a.setData, onValidateRecord = _a.onValidateRecord;
     var _b = useState(record[name]), value = _b[0], setValue = _b[1];
+    var validationError = useValidationError(name, record).validationError;
     // used for debouncing validations
     var timeoutIdRef = useRef(null);
     // used for getting updated data in setTimeout
@@ -110,7 +119,7 @@ export var useSpreadsheetField = function (name, record) {
                 switch (_f.label) {
                     case 0:
                         newData = __spreadArray([], dataRef.current, true);
-                        newRecord = __assign(__assign({}, recordRef.current), (_d = {}, _d[name] = value, _d));
+                        newRecord = __assign(__assign({}, recordRef.current), (_d = {}, _d[name] = parseValue(fieldType, value), _d));
                         rowIndex = newData.findIndex(function (r) { return r._meta.id === record._meta.id; });
                         _a = newData;
                         _b = rowIndex;
@@ -128,7 +137,7 @@ export var useSpreadsheetField = function (name, record) {
             });
         }); }, 300);
     }, [value]);
-    return { value: value, setValue: setValue };
+    return { value: value, setValue: setValue, validationError: validationError };
 };
 var ContentContainer = styled(Div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: calc(100% - 1px);\n  width: 100%;\n  ", ";\n  ", "\n  ", "\n"], ["\n  height: calc(100% - 1px);\n  width: 100%;\n  ", ";\n  ", "\n  ", "\n"])), function (p) { return p.theme.css.alignCenter; }, function (p) {
     return p.hasError && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      color: ", ";\n      background: ", ";\n      /* internal border */\n      box-shadow: 0px 0px 0px 1px ", " inset;\n    "], ["\n      color: ", ";\n      background: ", ";\n      /* internal border */\n      box-shadow: 0px 0px 0px 1px ", " inset;\n    "])), function (p) { return p.theme.colors.error; }, function (p) { return p.theme.colors.red100; }, function (p) { return p.theme.colors.error; });
@@ -140,9 +149,8 @@ var Wrapper = styled(Div)(function (_a) {
     return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    ", "\n  "], ["\n    ", "\n  "])), isLoading && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      pointer-events: none;\n    "], ["\n      pointer-events: none;\n    "]))));
 });
 export var SpreadsheetField = function (_a) {
-    var name = _a.name, record = _a.record, children = _a.children;
+    var validationError = _a.validationError, children = _a.children;
     var _b = useSpreadsheetContext(), isReadOnly = _b.isReadOnly, isLoading = _b.isLoading;
-    var validationError = useValidationError(name, record).validationError;
     return (_jsx(Wrapper, __assign({ dim: "100%", isLoading: isLoading }, { children: _jsx(TooltipProvider, __assign({ tooltip: validationError }, { children: _jsx(Div, __assign({ dim: "100%" }, { children: _jsx(ContentContainer, __assign({ hasError: !!validationError, isReadOnly: isReadOnly }, { children: children })) })) })) })));
 };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/lib/esm/Importer/common/Spreadsheet/common/index.d.ts

@@ -1,6 +1,9 @@
 import { Field, Record, BatchValidationErrors } from "../../../../types";
 export declare const spreadsheetRowHeightPx = 40;
 export declare const spreadsheetHeaderHeightPx = 40;
+export declare const isTrue: (value: string) => boolean;
+export declare const isInteger: (value: string) => boolean;
+export declare const isFloat: (value: string) => boolean;
 export declare const recordIsEmpty: (record: any, fields: any) => any;
 export declare const getRenderedRecordWithErrors: ({ record, validationErrors, }: {
     record: any;

package/lib/esm/Importer/common/Spreadsheet/common/index.js

@@ -9,7 +9,9 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var _a;
 import { FieldTypes, } from "../../../../types";
+import { DateTime } from "luxon";
 export var spreadsheetRowHeightPx = 40;
 export var spreadsheetHeaderHeightPx = 40;
 var isEmpty = function (value) {
@@ -18,6 +20,22 @@ var isEmpty = function (value) {
         (typeof value === "object" && Object.keys(value).length === 0) ||
         (typeof value === "string" && value.trim().length === 0));
 };
+var isEmail = function (value) {
+    var emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+    return emailRegex.test(value);
+};
+var isUrl = function (value) {
+    var urlRegex = /^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/g;
+    return urlRegex.test(value);
+};
+export var isTrue = function (value) {
+    var _value = (value || "").toString().toLowerCase();
+    return ["true", "yes", "1", "y", "on", "t"].includes(_value);
+};
+export var isInteger = function (value) { return /^-?[0-9]+$/.test(value + ""); };
+export var isFloat = function (value) {
+    return /^-?[0-9]+(?:\.[0-9]+)?$/.test(value + "");
+};
 export var recordIsEmpty = function (record, fields) {
     return fields.reduce(function (isEmptyRecord, f) { return isEmptyRecord && isEmpty(record[f.name]); }, true);
 };
@@ -25,24 +43,50 @@ export var getRenderedRecordWithErrors = function (_a) {
     var record = _a.record, validationErrors = _a.validationErrors;
     return (__assign(__assign({}, record), { _meta: __assign(__assign({}, (record._meta || {})), { localValidationErrors: validationErrors, wasSeen: true }) }));
 };
+var validateDatePattern = function (field, fieldValue) {
+    var date = DateTime.fromFormat(fieldValue, field.pattern);
+    if (!date.isValid) {
+        return "".concat(field.label, " must match the pattern ").concat(field.pattern);
+    }
+};
+var validations = (_a = {},
+    _a[FieldTypes.email] = function (field, fieldValue) {
+        if (!isEmail(fieldValue)) {
+            return "".concat(field.label, " is not a valid email");
+        }
+    },
+    _a[FieldTypes.url] = function (field, fieldValue) {
+        if (!isUrl(fieldValue)) {
+            return "".concat(field.label, " is not a valid url");
+        }
+    },
+    _a[FieldTypes.integer] = function (field, fieldValue) {
+        if (!isInteger(fieldValue)) {
+            return "".concat(field.label, " is not a valid integer");
+        }
+    },
+    _a[FieldTypes.float] = function (field, fieldValue) {
+        if (!isFloat(fieldValue)) {
+            return "".concat(field.label, " is not a valid float");
+        }
+    },
+    _a[FieldTypes.date] = validateDatePattern,
+    _a[FieldTypes.time] = validateDatePattern,
+    _a[FieldTypes.datetime] = validateDatePattern,
+    _a);
 export var getRecordErrors = function (_a) {
     var record = _a.record, fields = _a.fields, batchValidationErrors = _a.batchValidationErrors, submittedData = _a.submittedData;
     var submittedRecord = submittedData === null || submittedData === void 0 ? void 0 : submittedData.find(function (r) { return r._meta.id === record._meta.id; });
-    var isEmail = function (value) {
-        var emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-        return emailRegex.test(value);
-    };
     var recordHasData = !recordIsEmpty(record, fields);
     if (recordHasData) {
         var recordTemplateValidationErrors = fields.reduce(function (errors, field) {
             var newErrors = __assign({}, errors);
             var fieldValue = record[field.name];
-            if (isEmpty(fieldValue)) {
-                if (field.isRequired)
-                    newErrors[field.name] = "".concat(field.label, " is required");
+            if (isEmpty(fieldValue) && field.isRequired) {
+                newErrors[field.name] = "".concat(field.label, " is required");
             }
-            else if (field.type === FieldTypes.email && !isEmail(fieldValue)) {
-                newErrors[field.name] = "".concat(field.label, " is not a valid email");
+            else if (validations[field.type]) {
+                newErrors[field.name] = validations[field.type](field, fieldValue);
             }
             return newErrors;
         }, {});

package/lib/esm/Importer/common/Spreadsheet/index.js

@@ -49,29 +49,34 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef, useState } from "react";
-import styled, { css } from "styled-components";
+import { useEffect, useMemo, useRef, useState, useCallback, } from "react";
+import styled from "styled-components";
 import { getTableHeight } from "..";
-import { TooltipProvider } from "../../../common";
 import { TableView as TableViewBase, TableViewCellContainer, TableViewRow, } from "../../../common/Table/TableView";
 import { colors } from "../../../styled/theme/colorPalette";
 import { Div } from "../../../styled/utils";
-import { FieldTypes, } from "../../../types";
 import { useSpreadsheetReviewContext } from "../../SpreadsheetReviewContextProvider";
 import { getUnsubmittedData } from "../utils";
 import { spreadsheetHeaderHeightPx, spreadsheetRowHeightPx } from "./common";
-import { SpreadsheetAutocomplete } from "./common/fields/SpeadsheetAutocomplete";
-import { SpreadsheetInput } from "./common/fields/SpreadsheetInput";
+import { FieldHeader } from "./common/FieldHeader";
 import GlobalStyle from "./GlobalStyle";
 import { SpreadsheetContextProvider, useSpreadsheetContext, } from "./SpreadsheetContextProvider";
 import { SpreadsheetRowNumbers } from "./SpreadsheetRowNumbers";
+import { inputTypes } from "./inputs";
 var SpreadSheetWrapper = styled(Div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border: solid 1px ", ";\n  border-radius: 8px;\n  background: ", ";\n  overflow: hidden !important;\n"], ["\n  border: solid 1px ", ";\n  border-radius: 8px;\n  background: ", ";\n  overflow: hidden !important;\n"])), function (p) { return p.theme.colors.gray300; }, function (p) { return p.theme.colors.white; });
 var TableView = styled(TableViewBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 100%;\n  border: none;\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n  overflow: hidden;\n  background-color: ", ";\n  ", " {\n    border-bottom: none;\n    height: 40px;\n  }\n  ", " {\n    padding: 0;\n    border-right: 1px solid ", ";\n  }\n"], ["\n  width: 100%;\n  border: none;\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n  overflow: hidden;\n  background-color: ", ";\n  ", " {\n    border-bottom: none;\n    height: 40px;\n  }\n  ", " {\n    padding: 0;\n    border-right: 1px solid ", ";\n  }\n"])), function (p) { return p.theme.colors.gray50; }, TableViewRow, TableViewCellContainer, function (p) { return p.theme.colors.gray300; });
-var ErrorCount = styled(Div)(function (_a) {
-    var _b = _a.theme, colors = _b.colors, c = _b.css;
-    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    color: ", ";\n    background: ", ";\n    border: solid 1px ", ";\n    padding: 4px 7px;\n    border-radius: 56px;\n    min-width: 24px;\n    ", ";\n  "], ["\n    color: ", ";\n    background: ", ";\n    border: solid 1px ", ";\n    padding: 4px 7px;\n    border-radius: 56px;\n    min-width: 24px;\n    ", ";\n  "])), colors.error, colors.red100, colors.error, c.centered);
-});
 var Spreadsheet = function (_a) {
     var isReadOnly = _a.isReadOnly, initialData = _a.initialData, rowWidth = _a.rowWidth, fields = _a.fields, appResponse = _a.appResponse, options = _a.options, _b = _a.onValidateRecord, onValidateRecord = _b === void 0 ? null : _b, submittedData = _a.submittedData, setReviewedData = _a.setReviewedData, _c = _a.onValidateBatch, onValidateBatch = _c === void 0 ? null : _c, _d = _a.highlightFirstRow, highlightFirstRow = _d === void 0 ? false : _d;
     return (_jsx(SpreadsheetContextProvider, __assign({}, {
@@ -95,10 +100,6 @@ var SpreadSheetWithContext = function () {
                     batchValidationPercentage < 100 &&
                     batchValidationProgressUI })), _jsx(SpreadsheetData, {})] }));
 };
-var booleanOptions = [
-    { label: "True", value: true },
-    { label: "False", value: false },
-];
 var SpreadsheetData = function () {
     var _a = useSpreadsheetReviewContext(), appResponse = _a.appResponse, isSubmitting = _a.isSubmitting;
     var _b = useSpreadsheetContext(), fields = _b.fields, data = _b.data, isLoading = _b.isLoading, isReadOnly = _b.isReadOnly, rowWidth = _b.rowWidth, sortByFieldErrors = _b.sortByFieldErrors, setSortByFieldErrors = _b.setSortByFieldErrors, validateRenderedRecords = _b.validateRenderedRecords, setIsLoading = _b.setIsLoading;
@@ -112,7 +113,7 @@ var SpreadsheetData = function () {
             setSortByFieldErrors(null);
         }, 10);
     }, [sortByFieldErrors]);
-    var onSectionRendered = function (_a) {
+    var onSectionRendered = useCallback(function (_a) {
         var data = _a.data;
         return __awaiter(void 0, void 0, void 0, function () {
             return __generator(this, function (_b) {
@@ -128,59 +129,29 @@ var SpreadsheetData = function () {
                 return [2 /*return*/];
             });
         });
-    };
+    }, [isSortingTableData]);
     var columns = useMemo(function () {
-        return fields.map(function (f) { return ({
-            Header: function () {
-                var columnErrorCounts = useSpreadsheetContext().columnErrorCounts;
-                var fieldErrorCount = columnErrorCounts[f.name];
-                return (_jsxs(Div, __assign({ p: "0 16px", spaceBetween: true, w100: true, alignCenter: true }, { children: [_jsxs(Div, __assign({ truncateText: true }, { children: [f.label, f.isRequired && "*"] })), fieldErrorCount && (_jsx(TooltipProvider, __assign({ mr: 3, w: 35, tooltip: "Sort by ".concat(f.label, " errors") }, { children: _jsx(ErrorCount, __assign({ onClick: function () { return setSortByFieldErrors(f.name); } }, { children: _jsx(Div, __assign({ centered: true }, { children: _jsx(Div, __assign({ w: 35, textAlignCenter: true, label3: true, truncateText: true }, { children: fieldErrorCount })) })) })) })))] })));
-            },
+        return fields.map(function (field) { return ({
+            Header: function () { return (_jsx(FieldHeader, { field: field, sortByFieldErrors: setSortByFieldErrors })); },
             Content: function (record) {
-                var props = {
-                    name: f.name,
-                    record: (function () {
-                        var res = __assign({}, record);
-                        delete res.rowIndex;
-                        return res;
-                    })(),
-                };
-                switch (f.type) {
-                    case FieldTypes.boolean:
-                        return (_jsx(SpreadsheetAutocomplete, __assign({ isInputDisabled: true }, props, { options: booleanOptions })));
-                    case FieldTypes.enum:
-                        return (_jsx(SpreadsheetAutocomplete, __assign({}, props, { options: f === null || f === void 0 ? void 0 : f.options.map(function (o) { return ({ label: o, value: o }); }) })));
-                    case FieldTypes.integer:
-                        return (_jsx(SpreadsheetInput, __assign({}, props, { type: "number", step: "1", onKeyDown: function (event) {
-                                if (event.key === "." ||
-                                    event.key === "," ||
-                                    event.key === "e") {
-                                    event.preventDefault();
-                                }
-                            } })));
-                    case FieldTypes.float:
-                        return (_jsx(SpreadsheetInput, __assign({}, props, { type: "number", onKeyDown: function (event) {
-                                if (event.key === "e") {
-                                    event.preventDefault();
-                                }
-                            } })));
-                    case FieldTypes.string:
-                        return _jsx(SpreadsheetInput, __assign({}, props, { type: "email" }));
-                    case FieldTypes.email:
-                        return _jsx(SpreadsheetInput, __assign({}, props, { type: "text" }));
-                }
+                var Input = inputTypes[field.type];
+                var rowIndex = record.rowIndex, recordProp = __rest(record, ["rowIndex"]);
+                return (_jsx(Input, { fieldType: field.type, name: field.name, options: field.options, record: recordProp }));
             },
         }); });
     }, [fields]);
-    var unsubmittedData = getUnsubmittedData(data, appResponse);
+    var unsubmittedData = useMemo(function () { return getUnsubmittedData(data, appResponse); }, [
+        data,
+        appResponse,
+    ]);
     var spreadsheetHeight = getTableHeight({
         headerHeight: spreadsheetHeaderHeightPx,
         rowHeight: spreadsheetRowHeightPx,
         dataCount: unsubmittedData.length,
-        mininmumTableHeight: 450,
+        minimumTableHeight: 450,
         maxVisibleRows: 12,
     });
     return (_jsxs(_Fragment, { children: [_jsx(GlobalStyle, {}), !isSortingTableData && !isSubmitting && (_jsxs(SpreadSheetWrapper, __assign({ h: spreadsheetHeight, dflex: true, w: 1400 }, { children: [_jsx(SpreadsheetRowNumbers, { spreadsheetHasXScroll: rowWidth > 1, scrollTop: scrollTop, height: spreadsheetHeight }), _jsx(TableView, { tableHeadersHeight: spreadsheetHeaderHeightPx, highlightFirstRow: isReadOnly, rowHeight: spreadsheetRowHeightPx, onSectionRendered: onSectionRendered, onTableScroll: function (_scrollTop) { return setScrollTop(_scrollTop); }, h: spreadsheetHeight, rowWidth: rowWidth, data: unsubmittedData, columns: columns, isLoading: isLoading })] })))] }));
 };
 export { Spreadsheet };
-var templateObject_1, templateObject_2, templateObject_3;
+var templateObject_1, templateObject_2;

package/lib/esm/Importer/common/Spreadsheet/inputs/Boolean.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { SpreadsheetAutocompleteProps } from "../common/fields/SpeadsheetAutocomplete";
+export declare const BooleanInput: React.FC<SpreadsheetAutocompleteProps>;

package/lib/esm/Importer/common/Spreadsheet/inputs/Boolean.js

@@ -0,0 +1,18 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SpreadsheetAutocomplete, } from "../common/fields/SpeadsheetAutocomplete";
+var booleanOptions = [
+    { label: "True", value: true },
+    { label: "False", value: false },
+];
+export var BooleanInput = function (props) { return (_jsx(SpreadsheetAutocomplete, __assign({ isInputDisabled: true }, props, { options: booleanOptions }))); };

package/lib/esm/Importer/common/Spreadsheet/inputs/EmailInput.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { SpreadsheetTextInputArgs } from "../common/fields/SpreadsheetInput";
+export declare const EmailInput: React.FC<SpreadsheetTextInputArgs>;

package/lib/esm/Importer/common/Spreadsheet/inputs/EmailInput.js

@@ -0,0 +1,14 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SpreadsheetInput, } from "../common/fields/SpreadsheetInput";
+export var EmailInput = function (props) { return (_jsx(SpreadsheetInput, __assign({}, props, { type: "email" }))); };

package/lib/esm/Importer/common/Spreadsheet/inputs/EnumInput.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { SpreadsheetAutocompleteProps } from "../common/fields/SpeadsheetAutocomplete";
+export declare type EnumInputProps = {
+    options: any;
+} & SpreadsheetAutocompleteProps;
+export declare const EnumInput: React.FC<EnumInputProps>;