@torq-north/react-tools 1.2.0 → 1.3.0

package/dist/index.es.js

@@ -815,6 +815,63 @@ var DropIndicator = styled(Box, {
     });
 });
 
+function isAsset(file) {
+    return "id" in file;
+}
+
+var FileBox = styled(Box)(function (_a) {
+    var disableInteraction = _a.disableInteraction, theme = _a.theme;
+    var alterFunc = theme.palette.mode === "dark" ? lighten : darken;
+    return {
+        transition: "0.2s",
+        cursor: disableInteraction ? undefined : "pointer",
+        "&:hover": disableInteraction
+            ? undefined
+            : {
+                backgroundColor: alterFunc(theme.palette.background.paper, 0.05),
+                "&:active": {
+                    transition: "0s",
+                    backgroundColor: alterFunc(theme.palette.background.paper, 0.1),
+                },
+            },
+        "&:nth-of-type(odd)": {
+            backgroundColor: alterFunc(theme.palette.background.paper, 0.05),
+            "&:hover": disableInteraction
+                ? undefined
+                : {
+                    backgroundColor: alterFunc(theme.palette.background.paper, 0.1),
+                    "&:active": {
+                        backgroundColor: alterFunc(theme.palette.background.paper, 0.15),
+                    },
+                },
+        },
+    };
+});
+
+var UnstyledLink = styled("a")({
+    color: "unset",
+    textDecoration: "none",
+});
+function IndividualFile(_a) {
+    var file = _a.file, disableLink = _a.disableLink, allowDelete = _a.allowDelete, onDelete = _a.onDelete;
+    var isImage = isAsset(file)
+        ? file.mimeType.startsWith("image")
+        : ["png", "jpg", "jpeg", "gif"].some(function (ext) { return file.name.endsWith(ext); });
+    var content = (jsxs(Stack, { p: 0.5, direction: "row", justifyContent: "space-between", children: [jsxs(Stack, { direction: "row", gap: 2, alignItems: "center", children: [isImage ? jsx(ImageIcon, {}) : jsx(FileIcon, {}), jsx(Typography, { children: isAsset(file) ? file.fileName : file.name }), file instanceof File && (jsx(Tooltip, { title: "New File", placement: "right", children: jsx(SparkleIcon, { color: "info" }) }))] }), allowDelete && (jsx(IconButton, { color: "error", onClick: function (e) {
+                    e.stopPropagation();
+                    onDelete && onDelete(file);
+                }, children: jsx(DeleteIcon, {}) }))] }));
+    return (jsxs(FileBox, { disableInteraction: disableLink, children: [!disableLink && (jsx(UnstyledLink, { href: isAsset(file) ? file.fullPath : "#", target: "_blank", children: content })), disableLink && content] }));
+}
+
+function FileDisplay(_a) {
+    var files = _a.files, individualFileProps = __rest(_a, ["files"]);
+    if (!Array.isArray(files)) {
+        return (jsx(Box, { children: jsx(IndividualFile, __assign({ file: files }, individualFileProps)) }));
+    }
+    return (jsx(Stack, { children: files.map(function (f) { return (jsx(IndividualFile, __assign({ file: f }, individualFileProps), isAsset(f) ? f.id : f.name)); }) }));
+}
+
 var propTypes = {exports: {}};
 
 var reactIs = {exports: {}};
@@ -4795,24 +4852,21 @@ function arrayify(value) {
     }
     return Array.isArray(value) ? value : [value];
 }
-function useFileEditorField(name, options) {
-    var _a = useField(name, __assign({ validate: function (v) {
-            return options.required && v == null ? "This field is required" : undefined;
-        } }, options.fieldProps)), input = _a.input, meta = _a.meta;
-    var values = useMemo(function () { return arrayify(input.value); }, [input.value]);
-    var _b = useState(false), showError = _b[0], setShowError = _b[1];
-    var _c = useState(""), errorMessage = _c[0], setErrorMessage = _c[1];
-    var _d = useState(false), dragOverDropzone = _d[0], setDragOverDropzone = _d[1];
+function useFileEditor(value, onChange, options) {
+    var values = useMemo(function () { return arrayify(value); }, [value]);
+    var _a = useState(false), showError = _a[0], setShowError = _a[1];
+    var _b = useState(""), errorMessage = _b[0], setErrorMessage = _b[1];
+    var _c = useState(false), dragOverDropzone = _c[0], setDragOverDropzone = _c[1];
     var multiple = options.multiple, disabled = options.disabled, otherOptions = __rest(options, ["multiple", "disabled"]);
-    var _e = useDropzone(__assign({ multiple: multiple, noClick: multiple || values.length == 0, noKeyboard: multiple, disabled: disabled, onDragEnter: function () { return setDragOverDropzone(true); }, onDragOver: function (e) {
+    var _d = useDropzone(__assign({ multiple: multiple, noClick: multiple || values.length == 0, noKeyboard: multiple, disabled: disabled, onDragEnter: function () { return setDragOverDropzone(true); }, onDragOver: function (e) {
             e.preventDefault();
             e.stopPropagation();
         }, onDragLeave: function () { return setDragOverDropzone(false); }, onDrop: function () { return setDragOverDropzone(false); }, onDropAccepted: function (acceptedFiles) {
             if (multiple) {
-                input.onChange((values !== null && values !== void 0 ? values : []).concat(acceptedFiles));
+                onChange((values !== null && values !== void 0 ? values : []).concat(acceptedFiles));
             }
             else {
-                input.onChange(acceptedFiles[0]);
+                onChange(acceptedFiles[0]);
             }
         }, onDropRejected: function (fileRejections) {
             setShowError(true);
@@ -4820,17 +4874,13 @@ function useFileEditorField(name, options) {
                 setErrorMessage("Multiple files cannot be added to this field");
             }
             else {
-                //Other than trying to add multiple files to a single input, the only other errors
-                // it could be would be size or type violations. Since those are case by case and kind
-                // of hard to cram into a single error message, it's easier to just cover all our bases
-                // with one message
                 setErrorMessage("Some files were rejected because they do not fit the size restriction or are not the right file type");
             }
-        } }, otherOptions)), getRootProps = _e.getRootProps, getInputProps = _e.getInputProps, open = _e.open;
+        } }, otherOptions)), getRootProps = _d.getRootProps, getInputProps = _d.getInputProps, open = _d.open;
     var removeFile = useCallback(function (file) {
         var _a, _b;
         if (!multiple) {
-            input.onChange(null);
+            onChange(null);
             return;
         }
         var index = (_a = values === null || values === void 0 ? void 0 : values.findIndex(function (f) { return f === file; })) !== null && _a !== void 0 ? _a : -1;
@@ -4839,8 +4889,8 @@ function useFileEditorField(name, options) {
         }
         var copy = (_b = values === null || values === void 0 ? void 0 : values.slice()) !== null && _b !== void 0 ? _b : [];
         copy.splice(index, 1);
-        input.onChange(copy);
-    }, [multiple, input.onChange, values]);
+        onChange(copy);
+    }, [multiple, onChange, values]);
     return {
         dragOverDropzone: dragOverDropzone,
         getRootProps: getRootProps,
@@ -4851,77 +4901,37 @@ function useFileEditorField(name, options) {
         showError: showError,
         setShowError: setShowError,
         errorMessage: errorMessage,
-        meta: meta,
     };
 }
 
-function isAsset(file) {
-    return "id" in file;
-}
-
-var FileBox = styled(Box)(function (_a) {
-    var disableInteraction = _a.disableInteraction, theme = _a.theme;
-    var alterFunc = theme.palette.mode === "dark" ? lighten : darken;
-    return {
-        transition: "0.2s",
-        cursor: disableInteraction ? undefined : "pointer",
-        "&:hover": disableInteraction
-            ? undefined
-            : {
-                backgroundColor: alterFunc(theme.palette.background.paper, 0.05),
-                "&:active": {
-                    transition: "0s",
-                    backgroundColor: alterFunc(theme.palette.background.paper, 0.1),
-                },
-            },
-        "&:nth-of-type(odd)": {
-            backgroundColor: alterFunc(theme.palette.background.paper, 0.05),
-            "&:hover": disableInteraction
-                ? undefined
-                : {
-                    backgroundColor: alterFunc(theme.palette.background.paper, 0.1),
-                    "&:active": {
-                        backgroundColor: alterFunc(theme.palette.background.paper, 0.15),
-                    },
-                },
-        },
-    };
-});
-
-var UnstyledLink = styled("a")({
-    color: "unset",
-    textDecoration: "none",
-});
-function IndividualFile(_a) {
-    var file = _a.file, disableLink = _a.disableLink, allowDelete = _a.allowDelete, onDelete = _a.onDelete;
-    var isImage = isAsset(file)
-        ? file.mimeType.startsWith("image")
-        : ["png", "jpg", "jpeg", "gif"].some(function (ext) { return file.name.endsWith(ext); });
-    var content = (jsxs(Stack, { p: 0.5, direction: "row", justifyContent: "space-between", children: [jsxs(Stack, { direction: "row", gap: 2, alignItems: "center", children: [isImage ? jsx(ImageIcon, {}) : jsx(FileIcon, {}), jsx(Typography, { children: isAsset(file) ? file.fileName : file.name }), file instanceof File && (jsx(Tooltip, { title: "New File", placement: "right", children: jsx(SparkleIcon, { color: "info" }) }))] }), allowDelete && (jsx(IconButton, { color: "error", onClick: function (e) {
-                    e.stopPropagation();
-                    onDelete && onDelete(file);
-                }, children: jsx(DeleteIcon, {}) }))] }));
-    return (jsxs(FileBox, { disableInteraction: disableLink, children: [!disableLink && (jsx(UnstyledLink, { href: isAsset(file) ? file.fullPath : "#", target: "_blank", children: content })), disableLink && content] }));
+function FileEditor(_a) {
+    var value = _a.value, onChange = _a.onChange, multiple = _a.multiple, disabled = _a.disabled, placeholder = _a.placeholder, accept = _a.accept, maxFiles = _a.maxFiles, maxSize = _a.maxSize, minSize = _a.minSize;
+    var _b = useFileEditor(value, onChange, {
+        multiple: multiple,
+        accept: accept,
+        disabled: disabled,
+        maxFiles: maxFiles,
+        maxSize: maxSize,
+        minSize: minSize,
+    }), getInputProps = _b.getInputProps, getRootProps = _b.getRootProps, dragOverDropzone = _b.dragOverDropzone, values = _b.values, removeFile = _b.removeFile, open = _b.open, showError = _b.showError, setShowError = _b.setShowError, errorMessage = _b.errorMessage;
+    return (jsxs(Fragment$1, { children: [jsxs(Box, { sx: { position: "relative" }, children: [jsx("input", __assign({}, getInputProps())), jsx(DropIndicator, __assign({ multiple: multiple, dragOver: dragOverDropzone, disabled: disabled }, getRootProps(), { children: jsxs(Stack, { gap: 1, children: [values.length > 0 && (jsx(Box, { sx: { opacity: disabled ? 0.4 : 1 }, children: jsx(FileDisplay, { files: values !== null && values !== void 0 ? values : [], disableLink: true, allowDelete: !disabled, onDelete: removeFile }) })), (multiple || (values === null || values === void 0 ? void 0 : values.length) == 0) && (jsx(Button, { onClick: open, startIcon: jsx(AddIcon, {}), fullWidth: true, disabled: disabled, children: placeholder !== null && placeholder !== void 0 ? placeholder : "Add File".concat(multiple ? "s" : "") }))] }) })), dragOverDropzone && (jsx(Stack, { position: "absolute", top: 0, bottom: 0, left: 0, right: 0, justifyContent: "center", alignItems: "center", sx: { pointerEvents: "none" }, children: jsx(NoteAddIcon, { sx: { fontSize: 50 } }) }))] }), jsx(ErrorNotification, { open: showError, onClose: function () { return setShowError(false); }, message: errorMessage })] }));
 }
 
-function FileDisplay(_a) {
-    var files = _a.files, individualFileProps = __rest(_a, ["files"]);
-    if (!Array.isArray(files)) {
-        return (jsx(Box, { children: jsx(IndividualFile, __assign({ file: files }, individualFileProps)) }));
+var isFileRequired = function (value) {
+    if (value == null) {
+        return "This field is required";
     }
-    return (jsx(Stack, { children: files.map(function (f) { return (jsx(IndividualFile, __assign({ file: f }, individualFileProps), isAsset(f) ? f.id : f.name)); }) }));
-}
+    if (Array.isArray(value) && value.length === 0) {
+        return "This field is required";
+    }
+    return undefined;
+};
 
 function FileEditorField(_a) {
-    var name = _a.name, label = _a.label, icon = _a.icon, showSpace = _a.showSpace, multiple = _a.multiple, disabled = _a.disabled, helperText = _a.helperText, placeholder = _a.placeholder, required = _a.required, slotProps = _a.slotProps, accept = _a.accept, forceError = _a.forceError;
-    var _b = useFileEditorField(name, {
-        multiple: multiple,
-        accept: accept,
-        disabled: disabled,
-        required: required,
-        fieldProps: slotProps === null || slotProps === void 0 ? void 0 : slotProps.field,
-    }), getInputProps = _b.getInputProps, getRootProps = _b.getRootProps, dragOverDropzone = _b.dragOverDropzone, values = _b.values, removeFile = _b.removeFile, open = _b.open, showError = _b.showError, setShowError = _b.setShowError, errorMessage = _b.errorMessage, meta = _b.meta;
-    return (jsxs(FieldWrapper, { icon: icon, showSpace: showSpace, children: [jsxs(FormControl, { fullWidth: true, sx: { position: "relative" }, children: [label && (jsx(FormLabel, { disabled: disabled, error: meta.touched && meta.error, children: label })), jsx("input", __assign({}, getInputProps())), jsx(DropIndicator, __assign({ multiple: multiple, dragOver: dragOverDropzone, disabled: disabled }, getRootProps(), { children: jsxs(Stack, { gap: 1, children: [values.length > 0 && (jsx(Box, { sx: { opacity: disabled ? 0.4 : 1 }, children: jsx(FileDisplay, { files: values !== null && values !== void 0 ? values : [], disableLink: true, allowDelete: !disabled, onDelete: removeFile }) })), (multiple || (values === null || values === void 0 ? void 0 : values.length) == 0) && (jsx(Button, { onClick: open, startIcon: jsx(AddIcon, {}), fullWidth: true, disabled: disabled, children: placeholder !== null && placeholder !== void 0 ? placeholder : "Add File".concat(multiple ? "s" : "") }))] }) })), dragOverDropzone && (jsx(Stack, { position: "absolute", top: 0, bottom: 0, left: 0, right: 0, justifyContent: "center", alignItems: "center", sx: { pointerEvents: "none" }, children: jsx(NoteAddIcon, { sx: { fontSize: 50 } }) })), jsx(FormHelperText, { error: (meta.touched && meta.error) || forceError, children: (meta.touched && meta.error) || helperText })] }), jsx(ErrorNotification, { open: showError, onClose: function () { return setShowError(false); }, message: errorMessage })] }));
+    var name = _a.name, label = _a.label, icon = _a.icon, showSpace = _a.showSpace, multiple = _a.multiple, disabled = _a.disabled, helperText = _a.helperText, placeholder = _a.placeholder, required = _a.required, slotProps = _a.slotProps, accept = _a.accept, maxFiles = _a.maxFiles, maxSize = _a.maxSize, minSize = _a.minSize, forceError = _a.forceError, _b = _a.validators, validators = _b === void 0 ? [] : _b;
+    var _c = useField(name, __assign({ validate: required
+            ? composeValidators.apply(void 0, __spreadArray(__spreadArray([], validators, false), [isFileRequired], false)) : composeValidators.apply(void 0, validators) }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.field)), input = _c.input, meta = _c.meta;
+    return (jsx(FieldWrapper, { icon: icon, showSpace: showSpace, children: jsxs(FormControl, { fullWidth: true, children: [label && (jsx(FormLabel, { disabled: disabled, error: meta.touched && meta.error, children: label })), jsx(FileEditor, { value: input.value, onChange: input.onChange, multiple: multiple, disabled: disabled, accept: accept, maxFiles: maxFiles, maxSize: maxSize, minSize: minSize, placeholder: placeholder }), jsx(FormHelperText, { error: (meta.touched && meta.error) || forceError, children: (meta.touched && meta.error) || helperText })] }) }));
 }
 
 function asInteger(value) {
@@ -5202,5 +5212,5 @@ function TabSet(_a) {
                     }) }) }), jsx(Panel, __assign({}, actualTab === null || actualTab === void 0 ? void 0 : actualTab.PanelProps, { children: actualTab === null || actualTab === void 0 ? void 0 : actualTab.content }))] }));
 }
 
-export { CheckboxFormField, CloseableDialog, ConfirmCancel, DateFormField, DateTimeFormField, EMAIL_REGEX, EditableBlock, ErrorMessage, ErrorNotification, ErrorOverlay, ExtendedPagination, ExtendedTable, FieldWrapper, FileDisplay, FileDropper, FileEditorField, LabeledValue, LoaderButton, MultiSelectFormField, POSTAL_CODE_REGEX, Panel, RadioFormField, SelectFormField, TabSet, TextFormField, asInteger, asPhoneNumber, enableAuthRedirect, isEmail, isPostalCode, sendDelete, sendFormDataPost, sendGet, sendPost, sendPut, useAsyncData, useAsyncDataCallback, useDebounce, useDebounceEffect, usePartialSetterState };
+export { CheckboxFormField, CloseableDialog, ConfirmCancel, DateFormField, DateTimeFormField, EMAIL_REGEX, EditableBlock, ErrorMessage, ErrorNotification, ErrorOverlay, ExtendedPagination, ExtendedTable, FieldWrapper, FileDisplay, FileDropper, FileEditor, FileEditorField, LabeledValue, LoaderButton, MultiSelectFormField, POSTAL_CODE_REGEX, Panel, RadioFormField, SelectFormField, TabSet, TextFormField, asInteger, asPhoneNumber, enableAuthRedirect, isEmail, isPostalCode, sendDelete, sendFormDataPost, sendGet, sendPost, sendPut, useAsyncData, useAsyncDataCallback, useDebounce, useDebounceEffect, useFileEditor, usePartialSetterState };
 //# sourceMappingURL=index.es.js.map