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

react image input component

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

  function useEvent(dom, event, handler, passive = false) {
      React.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 = 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]);
      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";

  exports.JBImageInput = JBImageInput;

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