@torq-north/react-tools 1.2.0 → 1.3.0

package/dist/index.cjs

@@ -817,6 +817,63 @@ var DropIndicator = material.styled(material.Box, {
     });
 });
 
+function isAsset(file) {
+    return "id" in file;
+}
+
+var FileBox = material.styled(material.Box)(function (_a) {
+    var disableInteraction = _a.disableInteraction, theme = _a.theme;
+    var alterFunc = theme.palette.mode === "dark" ? material.lighten : material.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 = material.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 = (jsxRuntime.jsxs(material.Stack, { p: 0.5, direction: "row", justifyContent: "space-between", children: [jsxRuntime.jsxs(material.Stack, { direction: "row", gap: 2, alignItems: "center", children: [isImage ? jsxRuntime.jsx(ImageIcon, {}) : jsxRuntime.jsx(FileIcon, {}), jsxRuntime.jsx(material.Typography, { children: isAsset(file) ? file.fileName : file.name }), file instanceof File && (jsxRuntime.jsx(material.Tooltip, { title: "New File", placement: "right", children: jsxRuntime.jsx(SparkleIcon, { color: "info" }) }))] }), allowDelete && (jsxRuntime.jsx(material.IconButton, { color: "error", onClick: function (e) {
+                    e.stopPropagation();
+                    onDelete && onDelete(file);
+                }, children: jsxRuntime.jsx(DeleteIcon, {}) }))] }));
+    return (jsxRuntime.jsxs(FileBox, { disableInteraction: disableLink, children: [!disableLink && (jsxRuntime.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 (jsxRuntime.jsx(material.Box, { children: jsxRuntime.jsx(IndividualFile, __assign({ file: files }, individualFileProps)) }));
+    }
+    return (jsxRuntime.jsx(material.Stack, { children: files.map(function (f) { return (jsxRuntime.jsx(IndividualFile, __assign({ file: f }, individualFileProps), isAsset(f) ? f.id : f.name)); }) }));
+}
+
 var propTypes = {exports: {}};
 
 var reactIs = {exports: {}};
@@ -4797,24 +4854,21 @@ function arrayify(value) {
     }
     return Array.isArray(value) ? value : [value];
 }
-function useFileEditorField(name, options) {
-    var _a = reactFinalForm.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 = React.useMemo(function () { return arrayify(input.value); }, [input.value]);
-    var _b = React.useState(false), showError = _b[0], setShowError = _b[1];
-    var _c = React.useState(""), errorMessage = _c[0], setErrorMessage = _c[1];
-    var _d = React.useState(false), dragOverDropzone = _d[0], setDragOverDropzone = _d[1];
+function useFileEditor(value, onChange, options) {
+    var values = React.useMemo(function () { return arrayify(value); }, [value]);
+    var _a = React.useState(false), showError = _a[0], setShowError = _a[1];
+    var _b = React.useState(""), errorMessage = _b[0], setErrorMessage = _b[1];
+    var _c = React.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);
@@ -4822,17 +4876,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 = React.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;
@@ -4841,8 +4891,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,
@@ -4853,77 +4903,37 @@ function useFileEditorField(name, options) {
         showError: showError,
         setShowError: setShowError,
         errorMessage: errorMessage,
-        meta: meta,
     };
 }
 
-function isAsset(file) {
-    return "id" in file;
-}
-
-var FileBox = material.styled(material.Box)(function (_a) {
-    var disableInteraction = _a.disableInteraction, theme = _a.theme;
-    var alterFunc = theme.palette.mode === "dark" ? material.lighten : material.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 = material.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 = (jsxRuntime.jsxs(material.Stack, { p: 0.5, direction: "row", justifyContent: "space-between", children: [jsxRuntime.jsxs(material.Stack, { direction: "row", gap: 2, alignItems: "center", children: [isImage ? jsxRuntime.jsx(ImageIcon, {}) : jsxRuntime.jsx(FileIcon, {}), jsxRuntime.jsx(material.Typography, { children: isAsset(file) ? file.fileName : file.name }), file instanceof File && (jsxRuntime.jsx(material.Tooltip, { title: "New File", placement: "right", children: jsxRuntime.jsx(SparkleIcon, { color: "info" }) }))] }), allowDelete && (jsxRuntime.jsx(material.IconButton, { color: "error", onClick: function (e) {
-                    e.stopPropagation();
-                    onDelete && onDelete(file);
-                }, children: jsxRuntime.jsx(DeleteIcon, {}) }))] }));
-    return (jsxRuntime.jsxs(FileBox, { disableInteraction: disableLink, children: [!disableLink && (jsxRuntime.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 (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(material.Box, { sx: { position: "relative" }, children: [jsxRuntime.jsx("input", __assign({}, getInputProps())), jsxRuntime.jsx(DropIndicator, __assign({ multiple: multiple, dragOver: dragOverDropzone, disabled: disabled }, getRootProps(), { children: jsxRuntime.jsxs(material.Stack, { gap: 1, children: [values.length > 0 && (jsxRuntime.jsx(material.Box, { sx: { opacity: disabled ? 0.4 : 1 }, children: jsxRuntime.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) && (jsxRuntime.jsx(material.Button, { onClick: open, startIcon: jsxRuntime.jsx(AddIcon, {}), fullWidth: true, disabled: disabled, children: placeholder !== null && placeholder !== void 0 ? placeholder : "Add File".concat(multiple ? "s" : "") }))] }) })), dragOverDropzone && (jsxRuntime.jsx(material.Stack, { position: "absolute", top: 0, bottom: 0, left: 0, right: 0, justifyContent: "center", alignItems: "center", sx: { pointerEvents: "none" }, children: jsxRuntime.jsx(NoteAddIcon, { sx: { fontSize: 50 } }) }))] }), jsxRuntime.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 (jsxRuntime.jsx(material.Box, { children: jsxRuntime.jsx(IndividualFile, __assign({ file: files }, individualFileProps)) }));
+var isFileRequired = function (value) {
+    if (value == null) {
+        return "This field is required";
     }
-    return (jsxRuntime.jsx(material.Stack, { children: files.map(function (f) { return (jsxRuntime.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 (jsxRuntime.jsxs(FieldWrapper, { icon: icon, showSpace: showSpace, children: [jsxRuntime.jsxs(material.FormControl, { fullWidth: true, sx: { position: "relative" }, children: [label && (jsxRuntime.jsx(material.FormLabel, { disabled: disabled, error: meta.touched && meta.error, children: label })), jsxRuntime.jsx("input", __assign({}, getInputProps())), jsxRuntime.jsx(DropIndicator, __assign({ multiple: multiple, dragOver: dragOverDropzone, disabled: disabled }, getRootProps(), { children: jsxRuntime.jsxs(material.Stack, { gap: 1, children: [values.length > 0 && (jsxRuntime.jsx(material.Box, { sx: { opacity: disabled ? 0.4 : 1 }, children: jsxRuntime.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) && (jsxRuntime.jsx(material.Button, { onClick: open, startIcon: jsxRuntime.jsx(AddIcon, {}), fullWidth: true, disabled: disabled, children: placeholder !== null && placeholder !== void 0 ? placeholder : "Add File".concat(multiple ? "s" : "") }))] }) })), dragOverDropzone && (jsxRuntime.jsx(material.Stack, { position: "absolute", top: 0, bottom: 0, left: 0, right: 0, justifyContent: "center", alignItems: "center", sx: { pointerEvents: "none" }, children: jsxRuntime.jsx(NoteAddIcon, { sx: { fontSize: 50 } }) })), jsxRuntime.jsx(material.FormHelperText, { error: (meta.touched && meta.error) || forceError, children: (meta.touched && meta.error) || helperText })] }), jsxRuntime.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 = reactFinalForm.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 (jsxRuntime.jsx(FieldWrapper, { icon: icon, showSpace: showSpace, children: jsxRuntime.jsxs(material.FormControl, { fullWidth: true, children: [label && (jsxRuntime.jsx(material.FormLabel, { disabled: disabled, error: meta.touched && meta.error, children: label })), jsxRuntime.jsx(FileEditor, { value: input.value, onChange: input.onChange, multiple: multiple, disabled: disabled, accept: accept, maxFiles: maxFiles, maxSize: maxSize, minSize: minSize, placeholder: placeholder }), jsxRuntime.jsx(material.FormHelperText, { error: (meta.touched && meta.error) || forceError, children: (meta.touched && meta.error) || helperText })] }) }));
 }
 
 function asInteger(value) {
@@ -5219,6 +5229,7 @@ exports.ExtendedTable = ExtendedTable;
 exports.FieldWrapper = FieldWrapper;
 exports.FileDisplay = FileDisplay;
 exports.FileDropper = FileDropper;
+exports.FileEditor = FileEditor;
 exports.FileEditorField = FileEditorField;
 exports.LabeledValue = LabeledValue;
 exports.LoaderButton = LoaderButton;
@@ -5243,5 +5254,6 @@ exports.useAsyncData = useAsyncData;
 exports.useAsyncDataCallback = useAsyncDataCallback;
 exports.useDebounce = useDebounce;
 exports.useDebounceEffect = useDebounceEffect;
+exports.useFileEditor = useFileEditor;
 exports.usePartialSetterState = usePartialSetterState;
 //# sourceMappingURL=index.cjs.map