@rivtn/noseur 1.0.0

package/dist/esm/form/FileInput.js

@@ -0,0 +1,523 @@
+import "./Form.css";
+import React from 'react';
+import { Scheme } from "../constants/Scheme";
+import { Classname } from "../utils/Classname";
+import { ObjectHelper } from "../utils/ObjectHelper";
+import { Orientation } from "../constants/Orientation";
+import { DOMHelper, ObserverHandler } from "../utils/DOMUtils";
+import { Button, buildButtonControl } from "./Button";
+import { FileHelper } from "../utils/FileHelper";
+export var FileInputMode;
+(function (FileInputMode) {
+    FileInputMode[FileInputMode["BUTTON"] = 0] = "BUTTON";
+    FileInputMode[FileInputMode["PREVIEW"] = 1] = "PREVIEW";
+    FileInputMode[FileInputMode["ELEMENT"] = 2] = "ELEMENT";
+    FileInputMode[FileInputMode["CONTROLLED"] = 3] = "CONTROLLED";
+})(FileInputMode || (FileInputMode = {}));
+export var FileInputPreviewType;
+(function (FileInputPreviewType) {
+    FileInputPreviewType["PDF"] = "PDF";
+    FileInputPreviewType["AUTO"] = "AUTO";
+    FileInputPreviewType["NONE"] = "NONE";
+    FileInputPreviewType["HTML"] = "HTML";
+    FileInputPreviewType["TEXT"] = "TEXT";
+    FileInputPreviewType["IMAGE"] = "IMAGE";
+    FileInputPreviewType["VIDEO"] = "VIDEO";
+    FileInputPreviewType["AUDIO"] = "AUDIO";
+    FileInputPreviewType["BINARY"] = "BINARY";
+    FileInputPreviewType["CUSTOM"] = "CUSTOM";
+})(FileInputPreviewType || (FileInputPreviewType = {}));
+var ControlType;
+(function (ControlType) {
+    ControlType[ControlType["CLEAR"] = 0] = "CLEAR";
+    ControlType[ControlType["SELECT"] = 1] = "SELECT";
+    ControlType[ControlType["ACTION"] = 2] = "ACTION";
+})(ControlType || (ControlType = {}));
+const defaultButtonProps = {
+    text: "Select",
+    outlined: true,
+    fillOnHover: true,
+    loadingProps: {
+        disabled: true,
+        leftIcon: "fa fa-spinner fa-spin"
+    }
+};
+class FileInputComponent extends React.Component {
+    static defaultProps = {
+        accepts: "*/*",
+        attrsRelay: {},
+        elementProps: {},
+        defaultFiles: [],
+        noDragAndDrop: false,
+        scheme: Scheme.SECONDARY,
+        mode: FileInputMode.PREVIEW,
+        buttonProps: defaultButtonProps,
+        orientation: Orientation.VERTICAL,
+        previewType: FileInputPreviewType.AUTO,
+        clearControl: {
+            scheme: Scheme.DANGER,
+            leftIcon: "fa fa-times",
+        },
+        selectControl: {
+            leftIcon: "fa fa-plus",
+        },
+        actionControl: {
+            leftIcon: "fa fa-upload",
+        },
+        dragAndDropRefOptions: {
+            count: 20,
+            interval: 1000,
+        },
+    };
+    state = {
+        files: ObjectHelper.clone(this.props.defaultFiles),
+        maxFileSizeHumanReadable: FileHelper.humanFileSize(this.props.maxFileSize, true)
+    };
+    componentUnmounted = false;
+    buttonManagerRef;
+    internalControlElement;
+    internalInputElement;
+    internalCompoundElement;
+    internalListenersGarbageCollection = [];
+    internalResizeObserverEventHandler;
+    constructor(props) {
+        super(props);
+        this.onDrop = this.onDrop.bind(this);
+        this.onCancel = this.onCancel.bind(this);
+        this.onChange = this.onChange.bind(this);
+        this.onDragOver = this.onDragOver.bind(this);
+        this.onDragBegin = this.onDragBegin.bind(this);
+        this.onDragComplete = this.onDragComplete.bind(this);
+        this.onControlClick = this.onControlClick.bind(this);
+        this.destroyElementsListeners = this.destroyElementsListeners.bind(this);
+        this.initializeElementsListeners = this.initializeElementsListeners.bind(this);
+    }
+    componentDidMount() {
+        ObjectHelper.resolveManageRef(this, {
+            resolve: () => this.initializeElementsListeners,
+            select: (e) => {
+                this.onControlClick(ControlType.SELECT, e);
+            },
+            clear: () => {
+                if (!this.internalInputElement)
+                    return;
+                this.internalInputElement.files = null;
+                this.setState({ files: [] });
+                this.props.attachFileInputManageRef?.current?.clear?.();
+            },
+            files: () => {
+                return this.state.files;
+            },
+            value: () => {
+                const files = this.state.files;
+                return files.length ? files[0] : null;
+            },
+            setValue: (value) => {
+                this.setState({ files: [value] });
+                this.props.attachFileInputManageRef?.current?.setValue?.(value);
+            },
+            changeFiles: (files) => {
+                this.setState({ files });
+                this.props.onSelectFiles && this.props.onSelectFiles(files);
+                this.props.attachFileInputManageRef?.current?.changeFiles?.(files);
+            },
+        });
+        this.props.onMount && this.props.onMount((e) => this.onControlClick(ControlType.SELECT, e), this.onDrop, this.onDragOver);
+        this.initializeElementsListeners();
+        this.componentUnmounted = true;
+        this.rePositionControl();
+    }
+    rePositionControl() {
+        if (!this.internalControlElement || !this.internalCompoundElement || !this.props.attrsRelay.control
+            || !this.props.attrsRelay.control.alignment)
+            return;
+        DOMHelper.alignChildToParent(this.internalCompoundElement, this.internalControlElement, this.props.attrsRelay.control.alignment);
+    }
+    componentWillUnmount() {
+        if (!this.componentUnmounted)
+            return;
+        this.componentUnmounted = true;
+        this.props.onUnMount && this.props.onUnMount((e) => this.onControlClick(ControlType.SELECT, e), this.onDrop, this.onDragOver);
+        ObjectHelper.resolveManageRef(this, null);
+        this.destroyElementsListeners();
+        if (this.internalResizeObserverEventHandler) {
+            ObserverHandler.unobserve("resize", this.internalResizeObserverEventHandler);
+            this.internalResizeObserverEventHandler = undefined;
+        }
+    }
+    initializeElementsListeners() {
+        this.destroyElementsListeners();
+        if (this.props.dragAndDropRefs && this.props.dragAndDropRefs.length) {
+            this.props.dragAndDropRefs.forEach((dragAndDropRef) => {
+                this.internalListenersGarbageCollection.push({
+                    element: dragAndDropRef,
+                    events: {
+                        drop: this.onDrop,
+                        dragover: this.onDragOver,
+                        dragenter: this.onDragBegin,
+                        dragexit: this.onDragComplete,
+                    }
+                });
+            });
+        }
+        if (this.internalInputElement) {
+            this.internalListenersGarbageCollection.push({
+                element: { current: this.internalInputElement },
+                events: {
+                    cancel: this.onCancel
+                }
+            });
+        }
+        const dragAndDropRefOptions = this.props.dragAndDropRefOptions;
+        if (!dragAndDropRefOptions.count)
+            dragAndDropRefOptions.count = 20;
+        if (!dragAndDropRefOptions.interval)
+            dragAndDropRefOptions.interval = 100;
+        for (const record of this.internalListenersGarbageCollection) {
+            const { element, events } = record;
+            let count = 0;
+            const interval = setInterval(() => {
+                if (element.current) {
+                    Object.keys(events).forEach((type) => {
+                        if (element.current.addEventListener)
+                            element.current.addEventListener(type, events[type]);
+                    });
+                    clearInterval(interval);
+                    return;
+                }
+                if ((++count) >= dragAndDropRefOptions.count)
+                    clearInterval(interval);
+            }, dragAndDropRefOptions.interval);
+        }
+        if (!this.internalResizeObserverEventHandler) {
+            this.internalResizeObserverEventHandler = (_) => {
+                this.rePositionControl();
+            };
+            ObserverHandler.observe("resize", this.internalResizeObserverEventHandler);
+        }
+    }
+    destroyElementsListeners() {
+        for (const record of this.internalListenersGarbageCollection) {
+            const { element, events } = record;
+            Object.keys(events).forEach((type) => {
+                element.current?.removeEventListener(type, events[type]);
+            });
+        }
+        this.internalListenersGarbageCollection = [];
+    }
+    onCancel(event) {
+        if (!this.state.files.length && this.internalInputElement?.files?.length) {
+            this.onChange(event);
+            return;
+        }
+        this.buttonManagerRef?.setLoadingState(false);
+        this.props.onCancelDialog && this.props.onCancelDialog(event);
+    }
+    onDragOver(event) {
+        event.preventDefault();
+        this.props.onDragOver && this.props.onDragOver(event);
+    }
+    onDrop(event) {
+        this.props.onDrop && this.props.onDrop(event);
+        this.props.onDragComplete && this.props.onDragComplete(event);
+        if (event.currentTarget === this.internalCompoundElement && this.props.noDragAndDrop)
+            return;
+        event.preventDefault();
+        if (!event.dataTransfer || !event.dataTransfer.files || !event.dataTransfer.files.length)
+            return;
+        this.onSelectFiles(event.dataTransfer.files);
+    }
+    onDragBegin(event) {
+        this.props.onDragBegin && this.props.onDragBegin(event);
+    }
+    onDragComplete(event) {
+        this.props.onDragComplete && this.props.onDragComplete(event);
+    }
+    onChange(event) {
+        this.buttonManagerRef?.setLoadingState(false);
+        this.props.onChange && this.props.onChange(event);
+        if (!event.target || !event.target.files || !event.target.files.length)
+            return;
+        this.props.onConfirmDialog && this.props.onConfirmDialog(event);
+        this.onSelectFiles(event.target.files);
+    }
+    onSelectFiles(fileList) {
+        const files = this.props.concatNewFile ? this.state.files : [];
+        Array.from(fileList).forEach(file => {
+            let errorMessage;
+            if (this.props.maxFileSize && file.size > this.props.maxFileSize) {
+                errorMessage = `${file.name} exceeds maximum size of ${this.state.maxFileSizeHumanReadable}`;
+            }
+            else if (this.props.validateFile) {
+                errorMessage = this.props.validateFile(file);
+            }
+            if (errorMessage && (this.props.onValidationFail && this.props.onValidationFail(file, errorMessage))) {
+                return;
+            }
+            files.push(file);
+        });
+        if (!files.length)
+            return;
+        this.props.attachFileInputManageRef?.current?.changeFiles(files);
+        if (this.props.relayToAttachFileInputOnly)
+            return;
+        this.props.onSelectFiles && this.props.onSelectFiles(files);
+        this.setState({ files });
+    }
+    onControlClick(type, event) {
+        event?.stopPropagation();
+        switch (type) {
+            case ControlType.CLEAR:
+                if (this.internalInputElement)
+                    this.internalInputElement.files = null;
+                this.setState({ files: ObjectHelper.clone(this.props.defaultFiles) });
+                break;
+            case ControlType.ACTION:
+                this.props.onAction && this.props.onAction(this.state.files);
+                break;
+            case ControlType.SELECT:
+            default:
+                if (!this.internalInputElement)
+                    return;
+                this.buttonManagerRef?.setLoadingState(true);
+                this.internalInputElement.click();
+        }
+    }
+    buildInput() {
+        const style = this.props.mode === FileInputMode.ELEMENT ? null : { display: "none" };
+        const eventProps = ObjectHelper.extractEventProps(this.props, [
+            "onMount", "onAction", "onRemoveFile", "onBeforeDrop", "onSelectFiles",
+            "onCancelDialog", "onConfirmDialog", "onValidationFail", "onDragBegin", "onDragComplete"
+        ]);
+        const props = {
+            style,
+            ...eventProps,
+            id: this.props.id,
+            name: this.props.name,
+            onChange: this.onChange,
+            ...this.props.elementProps,
+            accept: this.props.accepts,
+            multiple: this.props.multiple,
+            ref: (r) => {
+                if (!r)
+                    return;
+                this.internalInputElement = r;
+                ObjectHelper.resolveRef(this.props.forwardRef, r);
+            },
+        };
+        if (this.props.mode === FileInputMode.ELEMENT) {
+            props.style = { ...(this.props.style || {}), ...props };
+            props.className = Classname.build(this.props.className, props.className);
+        }
+        return (React.createElement("input", { type: "file", ...props }));
+    }
+    buildInputButton() {
+        if (this.props.mode !== FileInputMode.BUTTON)
+            return null;
+        const props = {
+            ...defaultButtonProps,
+            ...this.props.buttonProps,
+            scheme: this.props.scheme,
+        };
+        return (React.createElement(Button, { ...props, onClick: (e) => this.onControlClick(ControlType.SELECT, e), manageRef: (r) => {
+                if (!r)
+                    return;
+                this.buttonManagerRef = r;
+            } }));
+    }
+    buildFileItem(index, file, onRemove) {
+        file.key = index;
+        const url = URL.createObjectURL(file);
+        const isTemplated = !!this.props.itemTemplate;
+        const formattedSize = FileHelper.humanFileSize(file.size, true);
+        const className = Classname.build("noseur-file-input-preview", this.props.attrsRelay.preview?.className, {
+            "noseur-cursor-pointer": this.props.clickToChange
+        });
+        const removeButton = this.props.stickyPreview || isTemplated ? null : buildButtonControl(this.props.clearControl, {
+            rounded: true,
+        }, (e) => onRemove(file, e), "noseur-close");
+        const previewElement = fileInputBuildFileInputPreview({
+            url,
+            file,
+            onRemove,
+            removeButton,
+            formattedSize,
+            previewType: this.props.previewType,
+        });
+        const options = {
+            url,
+            file,
+            index,
+            onRemove,
+            className,
+            formattedSize,
+            previewElement,
+            props: this.props,
+        };
+        if (isTemplated)
+            return this.props.itemTemplate(options);
+        return React.createElement("div", { key: index, className: className, onClick: this.props.clickToChange ? (e) => this.onControlClick(ControlType.SELECT, e) : undefined }, previewElement);
+    }
+    buildInputPreviews() {
+        if (!(this.props.mode === FileInputMode.PREVIEW || this.props.mode === FileInputMode.CONTROLLED))
+            return null;
+        if (!this.state.files.length || this.props.selectOnly) {
+            if (this.props.emptyTemplate) {
+                return this.props.emptyTemplate((e) => this.onControlClick(ControlType.SELECT, e), this.onDrop, this.onDragOver);
+            }
+            const className = Classname.build("noseur-file-input-preview noseur-file-input-preview-empty", (this.props.scheme ? `${this.props.scheme}-bd-cl-hv` : null));
+            return (React.createElement("div", { className: className, onClick: (e) => this.onControlClick(ControlType.SELECT, e) },
+                React.createElement("i", { className: "fa-solid fa-image" })));
+        }
+        return this.state.files.map((file, index) => this.buildFileItem(index, file, (file, event) => {
+            event?.stopPropagation();
+            let files = this.state.files;
+            const fileIndex = files.findIndex(f => f.name === file.name && f.size === file.size);
+            if (fileIndex < -1)
+                return;
+            files.splice(fileIndex, 1);
+            if (!files.length) {
+                if (this.internalInputElement)
+                    this.internalInputElement.files = null;
+            }
+            this.setState({ files });
+            this.props.onRemoveFile && this.props.onRemoveFile(file, event);
+        }));
+    }
+    renderFixture(isHeader = true) {
+        if (this.props.mode !== FileInputMode.CONTROLLED)
+            return null;
+        const selectControl = buildButtonControl(this.props.selectControl, {
+            text: "Choose",
+            scheme: this.props.scheme,
+        }, (e) => this.onControlClick(ControlType.SELECT, e), "noseur-close");
+        const clearControl = buildButtonControl(this.props.clearControl, {
+            text: "Clear",
+        }, (e) => this.onControlClick(ControlType.CLEAR, e), "noseur-close");
+        const actionControl = buildButtonControl(this.props.actionControl, {
+            text: "Upload",
+            scheme: this.props.scheme,
+        }, (e) => this.onControlClick(ControlType.ACTION, e), "noseur-close");
+        const options = {
+            clearControl,
+            actionControl,
+            selectControl,
+            props: this.props,
+            className: Classname.build("noseur-file-input-fixture", {
+                "noseur-file-input-header": isHeader,
+                "noseur-file-input-footer": !isHeader,
+            })
+        };
+        if (!isHeader) {
+            return this.props.footerTemplate ? this.props.footerTemplate(options) : null;
+        }
+        if (this.props.headerTemplate)
+            return this.props.headerTemplate(options);
+        return (React.createElement("div", { className: options.className },
+            selectControl,
+            actionControl,
+            clearControl));
+    }
+    buildControl() {
+        if (!this.props.control)
+            return;
+        const onClick = (this.props.controlIsManaged ? undefined : (e) => this.onControlClick(ControlType.SELECT, e));
+        const className = Classname.build("noseur-file-input-control", this.props.attrsRelay.control?.className);
+        return (React.createElement("div", { ref: (r) => {
+                this.internalControlElement = r;
+            }, onClick: onClick, className: className, style: this.props.attrsRelay.control?.style, id: this.props.attrsRelay.control?.id }, this.props.control));
+    }
+    render() {
+        const input = this.buildInput();
+        const control = this.buildControl();
+        const header = this.renderFixture();
+        const button = this.buildInputButton();
+        const footer = this.renderFixture(false);
+        const previews = this.buildInputPreviews();
+        const className = Classname.build("noseur-file-input", {
+            "noseur-rounded-bd": this.props.rounded,
+            "noseur-file-input-controlled": this.props.mode === FileInputMode.CONTROLLED
+        }, this.props.className, (this.props.scheme ? `${this.props.scheme}-vars` : null));
+        const previewsClassName = Classname.build("noseur-file-input-previews", this.props.attrsRelay.previews?.className, this.props.orientation === Orientation.HORIZONTAL ? "noseur-fl-d-r" : "noseur-fl-d-c");
+        if (this.props.mode === FileInputMode.ELEMENT)
+            return input;
+        return (React.createElement("div", { ref: (e) => {
+                if (!!this.internalCompoundElement && !e)
+                    this.componentWillUnmount();
+                else if (this.componentUnmounted && !!e)
+                    this.componentDidMount();
+                this.internalCompoundElement = e;
+            }, tabIndex: 0, className: className, style: this.props.style, onDragOver: this.onDragOver, onDragEnter: this.onDragBegin, onDragExit: this.onDragComplete, onDrop: this.onDrop },
+            input,
+            button,
+            header,
+            React.createElement("div", { className: previewsClassName, style: this.props.attrsRelay.previews?.style }, previews),
+            control,
+            footer));
+    }
+}
+export const FileInput = ({ ref, ...props }) => (React.createElement(FileInputComponent, { ...props, forwardRef: ref }));
+export function fileInputBuildFileInputPreview(options) {
+    const file = options.file ?? new File([], (options.url ?? "Unknown "));
+    let fileType = file.type;
+    let previewType = options.previewType ?? FileInputPreviewType.AUTO;
+    if (previewType === FileInputPreviewType.AUTO) {
+        if (fileType.includes("pdf"))
+            previewType = FileInputPreviewType.PDF;
+        if (fileType.includes("text"))
+            previewType = FileInputPreviewType.TEXT;
+        if (fileType.includes("html"))
+            previewType = FileInputPreviewType.HTML;
+        if (fileType.includes("video"))
+            previewType = FileInputPreviewType.VIDEO;
+        if (fileType.includes("image"))
+            previewType = FileInputPreviewType.IMAGE;
+        if (fileType.includes("audio"))
+            previewType = FileInputPreviewType.AUDIO;
+    }
+    const onRemove = options.onRemove;
+    const closeButton = options.removeButton;
+    const url = file.__noseur__url__ ?? options.url ?? URL.createObjectURL(file);
+    const formattedSize = options.formattedSize || FileHelper.humanFileSize(file.size, true);
+    if (previewType === FileInputPreviewType.IMAGE) {
+        return (React.createElement(React.Fragment, null,
+            React.createElement("img", { ref: options.ref, className: "noseur-file-input-preview-image", style: options.style, alt: options.alt ?? file.name, src: url }),
+            closeButton));
+    }
+    else if (previewType === FileInputPreviewType.HTML) {
+        return (React.createElement(React.Fragment, null,
+            React.createElement("iframe", { ref: options.ref, className: "noseur-file-input-preview-html", style: options.style, frameBorder: "0", srcDoc: url }),
+            closeButton));
+    }
+    else if (previewType === FileInputPreviewType.PDF || previewType === FileInputPreviewType.TEXT) {
+        return (React.createElement(React.Fragment, null,
+            React.createElement("iframe", { ref: options.ref, className: "noseur-file-input-preview-pdf-text", style: options.style, frameBorder: "0", src: url }),
+            closeButton));
+    }
+    else if (previewType === FileInputPreviewType.VIDEO) {
+        return (React.createElement(React.Fragment, null,
+            React.createElement("video", { ref: options.ref, className: "noseur-file-input-preview-video", style: options.style, src: url, controls: true },
+                React.createElement("source", { src: url }),
+                " Your browser does not support the video tag."),
+            closeButton));
+    }
+    else if (previewType === FileInputPreviewType.AUDIO) {
+        return (React.createElement(React.Fragment, null,
+            React.createElement("audio", { ref: options.ref, className: "noseur-file-input-preview-audio", style: options.style, src: url, controls: true },
+                React.createElement("source", { src: url }),
+                " Your browser does not support the audio tag."),
+            closeButton));
+    }
+    return (React.createElement("div", { ref: options.ref, className: "noseur-file-input-preview-binary", style: options.style },
+        React.createElement("i", { className: "fa fa-file" }),
+        file.name,
+        "(",
+        formattedSize,
+        ")",
+        !onRemove ? null : React.createElement("i", { className: "fa fa-close noseur-close noseur-danger-tx", onClick: (e) => onRemove(file, e) })));
+}
+export function fileInputFileFromUrl(url, name = "not-specified", type = "*/*") {
+    const file = new File([], name, { type });
+    file.__noseur__url__ = url;
+    return file;
+}