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

image input web component

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('jb-image-input'), require('jb-core/react')) :
  typeof define === 'function' && define.amd ? define(['exports', 'react', 'jb-image-input', 'jb-core/react'], factory) :
  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.JBImageInputReact = {}, global.React, null, global.JBCoreReact));
})(this, (function (exports, React, jbImageInput, react) { 'use strict';

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

  const JBImageInput = React.forwardRef((props, ref) => {
      const element = React.useRef(null);
      const [refChangeCount, refChangeCountSetter] = React.useState(0);
      React.useImperativeHandle(ref, () => (element ? element.current : {}), [element]);
      React.useEffect(() => {
          refChangeCountSetter(refChangeCount + 1);
      }, [element.current]);
      React.useEffect(() => {
          if (props.config && element.current) {
              element.current.config = props.config;
          }
      }, [props.config]);
      React.useEffect(() => {
          if (props.bridge && element.current) {
              element.current.bridge = props.bridge;
          }
      }, [props.bridge]);
      React.useEffect(() => {
          if (props.multiple) {
              element.current?.setAttribute('multiple', 'true');
          }
          else {
              element.current?.removeAttribute('multiple');
          }
      }, [props.multiple]);
      React.useEffect(() => {
          if (props.value !== undefined && element.current) {
              element.current.value = props.value;
          }
      }, [props.value]);
      React.useEffect(() => {
          if (props.file) {
              element.current?.selectImageByFile(props.file);
          }
      }, [props.file]);
      React.useEffect(() => {
          if (props.acceptTypes && element.current) {
              element.current.acceptTypes = props.acceptTypes;
          }
      }, [props.acceptTypes]);
      React.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";

  exports.JBImageInput = JBImageInput;

}));
//# sourceMappingURL=JBImageInput.umd.js.map