@symply.io/basic-components 1.0.5 → 1.0.6-beta.1

package/FileUploader/index.d.ts

@@ -0,0 +1,4 @@
+import { FileUploaderProps } from "./types";
+declare function FileUploader(props: FileUploaderProps): JSX.Element;
+export default FileUploader;
+export * from "./types";

package/FileUploader/index.js

@@ -0,0 +1,62 @@
+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);
+};
+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 } from "react/jsx-runtime";
+import Link from "@mui/material/Link";
+import Grid from "@mui/material/Grid";
+import Button from "@mui/material/Button";
+import Typography from "@mui/material/Typography";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import CircularProgress from "@mui/material/CircularProgress";
+import ThemeProvider from "@mui/material/styles/ThemeProvider";
+import useInteractions from "./useInteractions";
+import useCustomTheme from "../useCustomTheme";
+function FileUploader(props) {
+    var _a = props.height, height = _a === void 0 ? "150px" : _a, _b = props.maxWidth, maxWidth = _b === void 0 ? "430px" : _b, loading = props.loading, disabled = props.disabled, dropFileText = props.dropFileText, chooseFileText = props.chooseFileText, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["height", "maxWidth", "loading", "disabled", "dropFileText", "chooseFileText", "primaryColor", "secondaryColor"]);
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
+    var lessThanSm = useMediaQuery(theme.breakpoints.down("sm"));
+    var _c = useInteractions(__assign(__assign({}, rest), { disabled: disabled })), alertArgs = _c.alertArgs, rootProps = _c.rootProps, onCloseAlert = _c.onCloseAlert, onSelectFile = _c.onSelectFile, getRootProps = _c.getRootProps, getInputProps = _c.getInputProps;
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: lessThanSm ? (_jsxs("div", __assign({}, getRootProps(), { children: [_jsx("input", __assign({}, getInputProps())), _jsx(Link, __assign({ color: disabled ? theme.palette.grey[400] : theme.palette.primary.main, sx: {
+                        fontFamily: "Roboto, Helvetica, Arial, sans-serif",
+                        cursor: disabled ? "not-allowed" : "pointer"
+                    } }, { children: loading ? (_jsx(CircularProgress, { sx: { height: "25px", width: "25px" } })) : (chooseFileText || "Choose a file") }))] }))) : (_jsx(Grid, __assign({ container: true, direction: "column", justifyContent: "center", alignItems: "center", sx: {
+                border: "1px dashed #0099a7",
+                borderRadius: "5px",
+                outline: "none",
+                backgroundColor: "#F2F2F2",
+                maxWidth: maxWidth,
+                height: height,
+                width: "100%"
+            } }, rootProps, { children: loading ? (_jsx(CircularProgress, { style: { height: "30px", width: "30px" } })) : (_jsxs("div", { children: [_jsx("input", __assign({}, getInputProps())), _jsx(Typography, __assign({ component: "p", variant: "caption", sx: {
+                            fontSize: ".875rem",
+                            textAlign: "center"
+                        } }, { children: dropFileText || "Drop files here" })), _jsx(Button, __assign({ variant: "contained", onClick: onSelectFile, sx: {
+                            backgroundColor: "white !important",
+                            color: disabled
+                                ? theme.palette.grey[400]
+                                : theme.palette.primary.main,
+                            fontFamily: "Roboto, Helvetica, Arial, sans-serif",
+                            cursor: disabled ? "not-allowed" : "pointer"
+                        }, disabled: disabled }, { children: _jsx(Typography, { children: chooseFileText || "Choose a file" }) }))] })) }))) })));
+}
+export default FileUploader;
+export * from "./types";

package/FileUploader/types.d.ts

@@ -0,0 +1,21 @@
+import { CSSProperties } from "react";
+import { DropzoneProps } from "react-dropzone";
+export interface InterfaceProps {
+    sizeExceededErrorText?: string;
+    wrongFileTypeErrorText?: string;
+    onUpload: (files: Array<File>) => void;
+    disabled?: boolean;
+    maxSize?: number;
+    accept?: DropzoneProps["accept"];
+    maxFiles?: DropzoneProps["maxFiles"];
+    multiple?: DropzoneProps["multiple"];
+}
+export interface FileUploaderProps extends InterfaceProps {
+    loading?: boolean;
+    dropFileText?: string;
+    chooseFileText?: string;
+    height?: CSSProperties["height"];
+    maxWidth?: CSSProperties["maxWidth"];
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
+}

package/FileUploader/types.js

@@ -0,0 +1 @@
+export {};

package/FileUploader/useInteractions.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { InterfaceProps } from "./types";
+declare function useInteractions(props: InterfaceProps): {
+    alertArgs: {
+        open: boolean;
+        message: string;
+    };
+    rootProps: {
+        onClick: (e: import("react").MouseEvent<HTMLElement, MouseEvent>) => void;
+        onKeyDown: (e: import("react").KeyboardEvent<HTMLElement>) => void;
+    };
+    onCloseAlert: () => void;
+    onSelectFile: () => void;
+    getRootProps: <T extends import("react-dropzone").DropzoneRootProps>(props?: T | undefined) => T;
+    getInputProps: <T_1 extends import("react-dropzone").DropzoneInputProps>(props?: T_1 | undefined) => T_1;
+};
+export default useInteractions;

package/FileUploader/useInteractions.js

@@ -0,0 +1,79 @@
+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 { useState, useCallback, useMemo } from "react";
+import { useDropzone } from "react-dropzone";
+function useInteractions(props) {
+    var multiple = props.multiple, disabled = props.disabled, maxFiles = props.maxFiles, _a = props.maxSize, maxSize = _a === void 0 ? 1024 * 1024 * 5 : _a, accept = props.accept, onUpload = props.onUpload, sizeExceededErrorText = props.sizeExceededErrorText, wrongFileTypeErrorText = props.wrongFileTypeErrorText;
+    var ERROR_TYPE_MSG = useMemo(function () {
+        return wrongFileTypeErrorText ||
+            "The type of the file you uploaded is not accepted, please reupload!";
+    }, [wrongFileTypeErrorText]);
+    var ERROR_SIZE_MSG = useMemo(function () {
+        return sizeExceededErrorText ||
+            "Your file exceed the max size of ".concat(maxSize / 1024 / 1024, "MB.");
+    }, [sizeExceededErrorText, maxSize]);
+    var _b = useState({ open: false, message: "" }), alertArgs = _b[0], setAlertArgs = _b[1];
+    var onOpenAlert = useCallback(function (message) {
+        setAlertArgs(function (args) { return (__assign(__assign({}, args), { open: true, message: message })); });
+    }, []);
+    var onCloseAlert = useCallback(function () {
+        setAlertArgs({ open: false, message: "" });
+    }, []);
+    var onDrop = useCallback(function (acceptedFiles, rejectedFiles) {
+        if (rejectedFiles && rejectedFiles.length > 0) {
+            rejectedFiles.some(function (rejectedFile) {
+                var file = rejectedFile.file, errors = rejectedFile.errors;
+                if (accept && !Object.keys(accept).includes(file.type)) {
+                    onOpenAlert(ERROR_TYPE_MSG);
+                    return true;
+                }
+                if (file.size > maxSize) {
+                    onOpenAlert(ERROR_SIZE_MSG);
+                    return true;
+                }
+                if (errors.length > 0) {
+                    onOpenAlert(errors.join("; "));
+                    return true;
+                }
+                return false;
+            });
+        }
+        else {
+            onUpload(acceptedFiles);
+        }
+    }, [accept, onUpload]);
+    var _c = useDropzone({
+        onDrop: onDrop,
+        accept: accept,
+        multiple: multiple,
+        disabled: disabled,
+        maxSize: maxSize,
+        maxFiles: maxFiles
+    }), getRootProps = _c.getRootProps, getInputProps = _c.getInputProps, onSelectFile = _c.open;
+    var rootProps = getRootProps({
+        onClick: function (e) { return e.stopPropagation(); },
+        onKeyDown: function (e) {
+            if (e.key === "Space" || e.key === "Enter") {
+                e.stopPropagation();
+            }
+        }
+    });
+    return {
+        alertArgs: alertArgs,
+        rootProps: rootProps,
+        onCloseAlert: onCloseAlert,
+        onSelectFile: onSelectFile,
+        getRootProps: getRootProps,
+        getInputProps: getInputProps
+    };
+}
+export default useInteractions;

package/index.d.ts

@@ -10,6 +10,7 @@ export * from "./DateInput";
 export * from "./DigitInput";
 export * from "./DynamicHeaderBar";
 export * from "./FeinInput";
+export * from "./FileUploader";
 export * from "./FormRadioGroup";
 export * from "./FormSelector";
 export * from "./HelpCaption";
@@ -35,6 +36,7 @@ export { default as Copyright } from "./Copyright";
 export { default as DigitInput } from "./DigitInput";
 export { default as DynamicHeaderBar } from "./DynamicHeaderBar";
 export { default as FeinInput } from "./FeinInput";
+export { default as FileUploader } from "./FileUploader";
 export { default as FormRadioGroup } from "./FormRadioGroup";
 export { default as HelpCaption } from "./HelpCaption";
 export { default as LoadingModal } from "./LoadingModal";

package/index.js

@@ -10,6 +10,7 @@ export * from "./DateInput";
 export * from "./DigitInput";
 export * from "./DynamicHeaderBar";
 export * from "./FeinInput";
+export * from "./FileUploader";
 export * from "./FormRadioGroup";
 export * from "./FormSelector";
 export * from "./HelpCaption";
@@ -35,6 +36,7 @@ export { default as Copyright } from "./Copyright";
 export { default as DigitInput } from "./DigitInput";
 export { default as DynamicHeaderBar } from "./DynamicHeaderBar";
 export { default as FeinInput } from "./FeinInput";
+export { default as FileUploader } from "./FileUploader";
 export { default as FormRadioGroup } from "./FormRadioGroup";
 export { default as HelpCaption } from "./HelpCaption";
 export { default as LoadingModal } from "./LoadingModal";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symply.io/basic-components",
-  "version": "1.0.5",
+  "version": "1.0.6-beta.1",
   "description": "Basic and reusable components for all frontend of Symply apps",
   "keywords": [
     "react",
@@ -58,6 +58,7 @@
     "@mui/system": "~5.4.2",
     "@reach/router": "^1.3.4",
     "color-alpha": "^1.1.3",
+    "react-dropzone": "~14.2.3",
     "react-player": "^2.9.0",
     "rifm": "^0.12.1"
   },