@spscommerce/ds-web-components 5.20.2 → 5.20.3-ie

package/dist/components/file-upload/file-upload.d.ts

@@ -0,0 +1,119 @@
+import { ClassBindings, Dispatcher } from "../../decorators/index";
+export declare class SpsFileUploadComponent extends HTMLElement {
+    static readonly displayName = "sps-file-upload";
+    static readonly props: {
+        description: string;
+        multiple: string;
+        dismissable: string;
+        processing: string;
+        mini: string;
+        downloadLabel: string;
+        acceptExtensions: string;
+        maxSize: string;
+        customRequirement: string;
+        selection: {
+            event: boolean;
+            type: string;
+        };
+        dismissal: {
+            event: boolean;
+            type: string;
+        };
+        download: {
+            event: boolean;
+            type: string;
+        };
+    };
+    /**
+     * The "term" for what the user should upload. Defaults to "File" or "Files",
+     * but if you set the `acceptExtensions` prop you might set this to something
+     * more specific, such as "Spreadsheet" or "Images".
+     */
+    description: any;
+    /**
+     * If true, the component will accept multiple files at once. By default, you can
+     * only select one file at a time.
+     */
+    multiple: boolean;
+    /** Controls whether the component is visible. */
+    shown: boolean;
+    /** Controls whether the user can hide the component from view. */
+    dismissable: boolean;
+    /**
+     * Puts the component in "processing" state, where it displays a spinner and
+     * does not allow any files to be selected.
+     */
+    processing: boolean;
+    /** Specifies that the component should be displayed in the "mini" style. */
+    mini: boolean;
+    /** If provided, the content area width will be set to 50% of the overall width. */
+    constrainContentWidth: boolean;
+    /** If provided, a button will be rendered with this text as its label. */
+    downloadLabel: string;
+    /**
+     * A list of extensions, provided either as an array of strings or a
+     * string containing comma-separates extensions. Only files with the MIME types
+     * associated with those extensions will be able to be selected. The case of
+     * the extensions does not matter; neither does whether you prefix them with a
+     * dot. That is, ".doc", "DOCX", and "jpg" are all valid extensions for this prop.
+     */
+    acceptExtensions: string[] | string;
+    /** The maximum allowable size in bytes for files selected by the component. */
+    maxSize: string;
+    /** custom label in requirements place. */
+    customRequirement: string;
+    /**
+     * Event which emits when a file or files have been selected by the user. The
+     * event detail will be an array of Files.
+     */
+    selection: Dispatcher<File[]>;
+    /**
+     * If the `dismissable` prop has been set, this event will fire when the user
+     * opts to hide the component.
+     */
+    dismissal: Dispatcher<void>;
+    /**
+     * If the `downloadLabel` prop has been provided, this event will fire when the
+     * user clicks the download button that is rendered.
+     */
+    download: Dispatcher<void>;
+    /** The HTML file input element within the component. */
+    fileInput: HTMLInputElement;
+    /**
+     * The list of selected files. If the `multiple` prop has not been provided,
+     * it is still an array; it will simply be an array of one when the user selects
+     * a file.
+     */
+    files: File[];
+    private accept;
+    private acceptMIMETypes;
+    private acceptExtensionsDescription;
+    private maxSizeBytes;
+    private active;
+    private error;
+    private namesOfUnsupportedFiles;
+    get [ClassBindings](): string[];
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(attrName: string, oldValue: any, newValue: any): void;
+    /**
+     * If the `dismissable` prop has been set, this will programmatically
+     * dismiss the component and fire the "dismissal" event.
+     */
+    dismiss(): void;
+    /** If the `dismissable` prop has been set, this will programmatically show the component. */
+    show(): void;
+    render({ t }: {
+        t: any;
+    }): JSX.Element;
+    private parseAndValidateMaxSize;
+    private processAcceptExtensions;
+    private selectFiles;
+    private handleDragOver;
+    private handleDragEnter;
+    private handleDragLeave;
+    private handleDrop;
+    private handleBrowseLinkClick;
+    private handleDownloadButtonClick;
+    private handleFileInputChange;
+}

package/dist/components/file-upload/file-upload.examples.d.ts

@@ -0,0 +1,2 @@
+import type { DSReactExamples } from "@spscommerce/ds-shared";
+export declare const SpsFileUploadExamples: DSReactExamples;

package/dist/components/file-upload/file-upload.examples.js

@@ -0,0 +1,77 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { code } from "@spscommerce/utils";
+export var SpsFileUploadExamples = {
+    basic: {
+        label: "Basic File Upload",
+        description: code(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            <p>Simply allow the user to drag-and-drop or select either a single file or multiple files at once.</p>\n        "], ["\n            <p>Simply allow the user to drag-and-drop or select either a single file or multiple files at once.</p>\n        "]))),
+        examples: {
+            single: {
+                description: "<p>Single file upload</p>",
+                react: code(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n                    function Component() {\n                        const ref = React.useRef()\n\n                        function handleChange(event) {\n                            console.log(event.detail)\n                        }\n\n                        React.useEffect(() => {\n                            ref.current.addEventListener(\"selection\", handleChange)\n                            return () => {\n                                ref.current.removeEventListener(\"selection\", handleChange)\n                            }\n                        })\n\n                        return (\n                            <div className=\"sps-row\">\n                                <div className=\"col-12\">\n                                    <sps-file-upload ref={ref}/>\n                                </div>\n                            </div>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        const ref = React.useRef()\n\n                        function handleChange(event) {\n                            console.log(event.detail)\n                        }\n\n                        React.useEffect(() => {\n                            ref.current.addEventListener(\"selection\", handleChange)\n                            return () => {\n                                ref.current.removeEventListener(\"selection\", handleChange)\n                            }\n                        })\n\n                        return (\n                            <div className=\"sps-row\">\n                                <div className=\"col-12\">\n                                    <sps-file-upload ref={ref}/>\n                                </div>\n                            </div>\n                        )\n                    }\n                "]))),
+            },
+            multiple: {
+                description: "<p>Multiple file upload</p>",
+                react: code(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n                    function Component() {\n                        const ref = React.useRef()\n\n                        function handleChange(event) {\n                            console.log(event.detail)\n                        }\n\n                        React.useEffect(() => {\n                            ref.current.addEventListener(\"selection\", handleChange)\n                            return () => {\n                                ref.current.removeEventListener(\"selection\", handleChange)\n                            }\n                        })\n\n                        return (\n                            <div className=\"sps-row\">\n                                <div className=\"col-12\">\n                                    <sps-file-upload ref={ref} multiple/>\n                                </div>\n                            </div>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        const ref = React.useRef()\n\n                        function handleChange(event) {\n                            console.log(event.detail)\n                        }\n\n                        React.useEffect(() => {\n                            ref.current.addEventListener(\"selection\", handleChange)\n                            return () => {\n                                ref.current.removeEventListener(\"selection\", handleChange)\n                            }\n                        })\n\n                        return (\n                            <div className=\"sps-row\">\n                                <div className=\"col-12\">\n                                    <sps-file-upload ref={ref} multiple/>\n                                </div>\n                            </div>\n                        )\n                    }\n                "]))),
+            },
+        },
+    },
+    restrictions: {
+        label: "Restrictions",
+        description: code(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n            <p>You can place restrictions on what files will be accepted with an extension whitelist and/or a maximum size.</p>\n        "], ["\n            <p>You can place restrictions on what files will be accepted with an extension whitelist and/or a maximum size.</p>\n        "]))),
+        examples: {
+            size: {
+                description: "<p>Maximum size</p>",
+                react: code(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n                    function Component() {\n                        const ref = React.useRef()\n\n                        function handleChange(event) {\n                            console.log(event.detail)\n                        }\n\n                        React.useEffect(() => {\n                            ref.current.addEventListener(\"selection\", handleChange)\n                            return () => {\n                                ref.current.removeEventListener(\"selection\", handleChange)\n                            }\n                        })\n\n                        return (\n                            <div className=\"sps-row\">\n                                <div className=\"col-12\">\n                                    <sps-file-upload ref={ref} maxSize=\"100KB\"/>\n                                </div>\n                            </div>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        const ref = React.useRef()\n\n                        function handleChange(event) {\n                            console.log(event.detail)\n                        }\n\n                        React.useEffect(() => {\n                            ref.current.addEventListener(\"selection\", handleChange)\n                            return () => {\n                                ref.current.removeEventListener(\"selection\", handleChange)\n                            }\n                        })\n\n                        return (\n                            <div className=\"sps-row\">\n                                <div className=\"col-12\">\n                                    <sps-file-upload ref={ref} maxSize=\"100KB\"/>\n                                </div>\n                            </div>\n                        )\n                    }\n                "]))),
+            },
+            type: {
+                description: "<p>File type whitelist</p>",
+                react: code(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n                    function Component() {\n                        const ref = React.useRef()\n\n                        function handleChange(event) {\n                            console.log(event.detail)\n                        }\n\n                        React.useEffect(() => {\n                            ref.current.addEventListener(\"selection\", handleChange)\n                            return () => {\n                                ref.current.removeEventListener(\"selection\", handleChange)\n                            }\n                        })\n\n                        return (\n                            <div className=\"sps-row\">\n                                <div className=\"col-12\">\n                                    <sps-file-upload\n                                        ref={ref}\n                                        description=\"Spreadsheets\"\n                                        multiple\n                                        acceptExtensions=\"XLS, xlsx, .csv\"\n                                    />\n                                </div>\n                            </div>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        const ref = React.useRef()\n\n                        function handleChange(event) {\n                            console.log(event.detail)\n                        }\n\n                        React.useEffect(() => {\n                            ref.current.addEventListener(\"selection\", handleChange)\n                            return () => {\n                                ref.current.removeEventListener(\"selection\", handleChange)\n                            }\n                        })\n\n                        return (\n                            <div className=\"sps-row\">\n                                <div className=\"col-12\">\n                                    <sps-file-upload\n                                        ref={ref}\n                                        description=\"Spreadsheets\"\n                                        multiple\n                                        acceptExtensions=\"XLS, xlsx, .csv\"\n                                    />\n                                </div>\n                            </div>\n                        )\n                    }\n                "]))),
+            },
+            both: {
+                description: "<p>Both restrictions</p>",
+                react: code(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n                    function Component() {\n                        const ref = React.useRef()\n\n                        function handleChange(event) {\n                            console.log(event.detail)\n                        }\n\n                        React.useEffect(() => {\n                            ref.current.addEventListener(\"selection\", handleChange)\n                            return () => {\n                                ref.current.removeEventListener(\"selection\", handleChange)\n                            }\n                        })\n\n                        return (\n                            <div className=\"sps-row\">\n                                <div className=\"col-12\">\n                                    <sps-file-upload\n                                        ref={ref}\n                                        description=\"Spreadsheets\"\n                                        multiple\n                                        acceptExtensions=\"XLS, xlsx, .csv\"\n                                        maxSize=\"25MB\"\n                                    />\n                                </div>\n                            </div>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        const ref = React.useRef()\n\n                        function handleChange(event) {\n                            console.log(event.detail)\n                        }\n\n                        React.useEffect(() => {\n                            ref.current.addEventListener(\"selection\", handleChange)\n                            return () => {\n                                ref.current.removeEventListener(\"selection\", handleChange)\n                            }\n                        })\n\n                        return (\n                            <div className=\"sps-row\">\n                                <div className=\"col-12\">\n                                    <sps-file-upload\n                                        ref={ref}\n                                        description=\"Spreadsheets\"\n                                        multiple\n                                        acceptExtensions=\"XLS, xlsx, .csv\"\n                                        maxSize=\"25MB\"\n                                    />\n                                </div>\n                            </div>\n                        )\n                    }\n                "]))),
+            },
+        },
+    },
+    dismissable: {
+        label: "Dismissable",
+        description: code(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n            <p>With this option, the file upload component can be dismissed by the user. If the user does dismiss it, you can\n            show it again programmatically if you need to.</p>\n        "], ["\n            <p>With this option, the file upload component can be dismissed by the user. If the user does dismiss it, you can\n            show it again programmatically if you need to.</p>\n        "]))),
+        examples: {
+            dismissable: {
+                react: code(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n                    function Component() {\n                        const [showFileUpload, setShowFileUpload] = React.useState(true)\n                        const ref = React.useRef()\n\n                        function handleDismissal() {\n                            setShowFileUpload(false)\n                        }\n\n                        React.useEffect(() => {\n                            ref.current.addEventListener(\"dismissal\", handleDismissal)\n                            return () => {\n                                ref.current.removeEventListener(\"dismissal\", handleDismissal)\n                            }\n                        })\n\n                        return (\n                            <div className=\"sps-row\">\n                                <div className=\"col-12\">\n                                    <sps-file-upload\n                                        ref={ref}\n                                        dismissable\n                                        shown={showFileUpload}\n                                    />\n                                    {!showFileUpload && (\n                                    <SpsButton onClick={() => setShowFileUpload(true)}>\n                                        Reset\n                                    </SpsButton>\n                                    )}\n                                </div>\n                            </div>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        const [showFileUpload, setShowFileUpload] = React.useState(true)\n                        const ref = React.useRef()\n\n                        function handleDismissal() {\n                            setShowFileUpload(false)\n                        }\n\n                        React.useEffect(() => {\n                            ref.current.addEventListener(\"dismissal\", handleDismissal)\n                            return () => {\n                                ref.current.removeEventListener(\"dismissal\", handleDismissal)\n                            }\n                        })\n\n                        return (\n                            <div className=\"sps-row\">\n                                <div className=\"col-12\">\n                                    <sps-file-upload\n                                        ref={ref}\n                                        dismissable\n                                        shown={showFileUpload}\n                                    />\n                                    {!showFileUpload && (\n                                    <SpsButton onClick={() => setShowFileUpload(true)}>\n                                        Reset\n                                    </SpsButton>\n                                    )}\n                                </div>\n                            </div>\n                        )\n                    }\n                "]))),
+            },
+        },
+    },
+    downloadButton: {
+        label: "Download Button",
+        description: code(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n            <p>You can optionally provide a button to download a file. Typically this will be a template for\n            whatever the user is expected to upload. They can then fill out the template, save it, and upload it.</p>\n        "], ["\n            <p>You can optionally provide a button to download a file. Typically this will be a template for\n            whatever the user is expected to upload. They can then fill out the template, save it, and upload it.</p>\n        "]))),
+        examples: {
+            downloadButton: {
+                react: code(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n                    function Component() {\n                        const ref = React.useRef()\n\n                        function handleDownload() {\n                            console.log(\"Download triggered.\")\n                        }\n\n                        React.useEffect(() => {\n                            ref.current.addEventListener(\"download\", handleDownload)\n                            return () => {\n                                ref.current.removeEventListener(\"download\", handleDownload)\n                            }\n                        })\n\n                        return (\n                            <div className=\"sps-row\">\n                                <div className=\"col-12\">\n                                    <sps-file-upload\n                                        ref={ref}\n                                        description=\"Spreadsheet\"\n                                        acceptExtensions=\"xlsx\"\n                                        downloadLabel=\"Download Excel Template\"\n                                    />\n                                </div>\n                            </div>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        const ref = React.useRef()\n\n                        function handleDownload() {\n                            console.log(\"Download triggered.\")\n                        }\n\n                        React.useEffect(() => {\n                            ref.current.addEventListener(\"download\", handleDownload)\n                            return () => {\n                                ref.current.removeEventListener(\"download\", handleDownload)\n                            }\n                        })\n\n                        return (\n                            <div className=\"sps-row\">\n                                <div className=\"col-12\">\n                                    <sps-file-upload\n                                        ref={ref}\n                                        description=\"Spreadsheet\"\n                                        acceptExtensions=\"xlsx\"\n                                        downloadLabel=\"Download Excel Template\"\n                                    />\n                                </div>\n                            </div>\n                        )\n                    }\n                "]))),
+            },
+        },
+    },
+    mini: {
+        label: "Mini File Upload",
+        description: code(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n            <p>When the file upload component is to be placed in a small container,\n            it should be marked as a mini file upload so that everything fits.</p>\n        "], ["\n            <p>When the file upload component is to be placed in a small container,\n            it should be marked as a mini file upload so that everything fits.</p>\n        "]))),
+        examples: {
+            single: {
+                react: code(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n                    function Component() {\n                        const ref = React.useRef()\n\n                        function handleChange(event) {\n                            console.log(event.detail)\n                        }\n\n                        React.useEffect(() => {\n                            ref.current.addEventListener(\"selection\", handleChange)\n                            return () => {\n                                ref.current.removeEventListener(\"selection\", handleChange)\n                            }\n                        })\n\n                        return (\n                            <div className=\"sps-row\">\n                                <div className=\"col-4\">\n                                    <sps-file-upload ref={ref} mini/>\n                                </div>\n                            </div>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        const ref = React.useRef()\n\n                        function handleChange(event) {\n                            console.log(event.detail)\n                        }\n\n                        React.useEffect(() => {\n                            ref.current.addEventListener(\"selection\", handleChange)\n                            return () => {\n                                ref.current.removeEventListener(\"selection\", handleChange)\n                            }\n                        })\n\n                        return (\n                            <div className=\"sps-row\">\n                                <div className=\"col-4\">\n                                    <sps-file-upload ref={ref} mini/>\n                                </div>\n                            </div>\n                        )\n                    }\n                "]))),
+            },
+        },
+    },
+    constrainContentWidth: {
+        label: "Constrain Content Width",
+        description: code(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n            <p>If this prop is provided, the content will be restricted to 50% of\n            the overall width of the component. Consult your product designer if\n            you're not sure whether to use this variant.</p>\n        "], ["\n            <p>If this prop is provided, the content will be restricted to 50% of\n            the overall width of the component. Consult your product designer if\n            you're not sure whether to use this variant.</p>\n        "]))),
+        examples: {
+            constrainContentWidth: {
+                react: code(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n                    function Component() {\n                        const ref = React.useRef()\n\n                        function handleChange(event: CustomEvent<Array<File>>) {\n                            console.log(event.detail)\n                        }\n\n                        React.useEffect(() => {\n                            ref.current.addEventListener(\"selection\", handleChange)\n                            return () => {\n                                ref.current.removeEventListener(\"selection\", handleChange)\n                            }\n                        })\n\n                        return (\n                            <div className=\"sps-row\">\n                                <div className=\"col-4\">\n                                    <sps-file-upload ref={ref} constrainContentWidth/>\n                                </div>\n                            </div>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        const ref = React.useRef()\n\n                        function handleChange(event: CustomEvent<Array<File>>) {\n                            console.log(event.detail)\n                        }\n\n                        React.useEffect(() => {\n                            ref.current.addEventListener(\"selection\", handleChange)\n                            return () => {\n                                ref.current.removeEventListener(\"selection\", handleChange)\n                            }\n                        })\n\n                        return (\n                            <div className=\"sps-row\">\n                                <div className=\"col-4\">\n                                    <sps-file-upload ref={ref} constrainContentWidth/>\n                                </div>\n                            </div>\n                        )\n                    }\n                "]))),
+            },
+        },
+    },
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15;
+//# sourceMappingURL=file-upload.examples.js.map

package/dist/components/file-upload/file-upload.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload.examples.js","sourceRoot":"","sources":["../../../src/components/file-upload/file-upload.examples.ts"],"names":[],"mappings":";;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAG1C,MAAM,CAAC,IAAM,qBAAqB,GAAoB;IACpD,KAAK,EAAE;QACL,KAAK,EAAE,mBAAmB;QAC1B,WAAW,EAAE,IAAI,oMAAA,iIAEZ,IAAA;QACL,QAAQ,EAAE;YACR,MAAM,EAAE;gBACN,WAAW,EAAE,2BAA2B;gBACxC,KAAK,EAAE,IAAI,2+BAAA,w6BAuBF,IAAA;aACV;YACD,QAAQ,EAAE;gBACR,WAAW,EAAE,6BAA6B;gBAC1C,KAAK,EAAE,IAAI,o/BAAA,i7BAuBF,IAAA;aACV;SACF;KACF;IACD,YAAY,EAAE;QACZ,KAAK,EAAE,cAAc;QACrB,WAAW,EAAE,IAAI,gNAAA,6IAEZ,IAAA;QACL,QAAQ,EAAE;YACR,IAAI,EAAE;gBACJ,WAAW,EAAE,qBAAqB;gBAClC,KAAK,EAAE,IAAI,6/BAAA,07BAuBF,IAAA;aACV;YACD,IAAI,EAAE;gBACJ,WAAW,EAAE,4BAA4B;gBACzC,KAAK,EAAE,IAAI,gwCAAA,6rCA4BF,IAAA;aACV;YACD,IAAI,EAAE;gBACJ,WAAW,EAAE,0BAA0B;gBACvC,KAAK,EAAE,IAAI,0zCAAA,uvCA6BF,IAAA;aACV;SACF;KACF;IACD,WAAW,EAAE;QACX,KAAK,EAAE,aAAa;QACpB,WAAW,EAAE,IAAI,8QAAA,2MAGZ,IAAA;QACL,QAAQ,EAAE;YACR,WAAW,EAAE;gBACX,KAAK,EAAE,IAAI,yiDAAA,s+CAiCF,IAAA;aACV;SACF;KACF;IACD,cAAc,EAAE;QACd,KAAK,EAAE,iBAAiB;QACxB,WAAW,EAAE,IAAI,sTAAA,iPAGZ,IAAA;QACL,QAAQ,EAAE;YACR,cAAc,EAAE;gBACd,KAAK,EAAE,IAAI,iyCAAA,4tCA4BF,IAAA;aACV;SACF;KACF;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,kBAAkB;QACzB,WAAW,EAAE,IAAI,0PAAA,qLAGZ,IAAA;QACL,QAAQ,EAAE;YACR,MAAM,EAAE;gBACN,KAAK,EAAE,IAAI,i/BAAA,46BAuBF,IAAA;aACV;SACF;KACF;IACD,qBAAqB,EAAE;QACrB,KAAK,EAAE,yBAAyB;QAChC,WAAW,EAAE,IAAI,oTAAA,+OAIZ,IAAA;QACL,QAAQ,EAAE;YACR,qBAAqB,EAAE;gBACrB,KAAK,EAAE,IAAI,4hCAAA,u9BAuBF,IAAA;aACV;SACF;KACF;CACF,CAAC"}