jb-image-input-react/dist/JBImageInput.js

react image input component

import React, { useEffect, useRef, useState, useImperativeHandle } from 'react';
import 'jb-image-input';

function useEvent(dom, event, handler, passive = false) {
    useEffect(() => {
        if (dom) {
            // initiate the event handler
            dom.addEventListener(event, handler, passive);
        }
        // this will clean up the event every time the component is re-rendered
        return function cleanup() {
            if (dom) {
                dom.removeEventListener(event, handler, passive);
            }
        };
    });
}

const JBImageInput = React.forwardRef((props, ref) => {
    const element = useRef(null);
    const [refChangeCount, refChangeCountSetter] = useState(0);
    useImperativeHandle(ref, () => (element ? element.current : {}), [element]);
    useEffect(() => {
        refChangeCountSetter(refChangeCount + 1);
    }, [element.current]);
    useEffect(() => {
        if (props.config && element.current) {
            element.current.config = props.config;
        }
    }, [props.config]);
    useEffect(() => {
        if (props.bridge && element.current) {
            element.current.bridge = props.bridge;
        }
    }, [props.bridge]);
    useEffect(() => {
        if (props.multiple) {
            element.current?.setAttribute('multiple', 'true');
        }
        else {
            element.current?.removeAttribute('multiple');
        }
    }, [props.multiple]);
    useEffect(() => {
        if (props.value !== undefined && element.current) {
            element.current.value = props.value;
        }
    }, [props.value]);
    useEffect(() => {
        if (props.file) {
            element.current?.selectImageByFile(props.file);
        }
    }, [props.file]);
    useEffect(() => {
        if (props.acceptTypes && element.current) {
            element.current.acceptTypes = props.acceptTypes;
        }
    }, [props.acceptTypes]);
    useEffect(() => {
        if (props.maxFileSize !== undefined && element.current) {
            element.current.maxFileSize = props.maxFileSize;
        }
    }, [props.maxFileSize]);
    function onChange(e) {
        if (typeof props.onChange == "function") {
            props.onChange(e);
        }
    }
    function onImageSelected(e) {
        if (typeof props.onImageSelected == "function") {
            props.onImageSelected(e);
        }
    }
    function onMaxSizeExceed(e) {
        if (typeof props.onMaxSizeExceed == "function") {
            props.onMaxSizeExceed(e);
        }
    }
    useEvent(element.current, 'change', onChange);
    useEvent(element.current, 'imageSelected', onImageSelected);
    useEvent(element.current, 'maxSizeExceed', onMaxSizeExceed);
    return (React.createElement("jb-image-input", { ref: element, class: props.className || '', label: props.label, "upload-type": props.uploadType || 'AUTO', required: props.required, name: props.name, message: props.message || "" }, props.children));
});
JBImageInput.displayName = "JBImageInput";

export { JBImageInput };
//# sourceMappingURL=JBImageInput.js.map