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

image input web component

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

function useEvents(element, props) {
    useEvent(element, 'load', props.onLoad, true);
    useEvent(element, 'init', props.onInit, true);
    useEvent(element, "change", props.onChange);
    useEvent(element, "imageSelected", props.onImageSelected);
    useEvent(element, "maxSizeExceed", props.onMaxSizeExceed);
}

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]);
    useEvents(element, props);
    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