jb-date-input-react/dist/JBDateInput.umd.js

jalali date input react component

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('jb-date-input')) :
  typeof define === 'function' && define.amd ? define(['exports', 'react', 'jb-date-input'], factory) :
  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.JBDateInput = {}, 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 JBDateInput = React.forwardRef((props, ref) => {
      const element = React.useRef(null);
      const [refChangeCount, refChangeCountSetter] = React.useState(0);
      const onFormatChangeCallBackQueueRef = React.useRef([]);
      React.useImperativeHandle(ref, () => (element ? element.current : {}), [element]);
      React.useEffect(() => {
          refChangeCountSetter(refChangeCount + 1);
      }, [element.current]);
      const onchange = React.useCallback((e) => {
          if (props.onChange) {
              props.onChange(e);
          }
      }, [props.onChange]);
      const onKeyup = React.useCallback((e) => {
          if (props.onKeyup) {
              props.onKeyup(e);
          }
      }, [props.onKeyup]);
      const onSelect = React.useCallback((e) => {
          if (props.onSelect) {
              props.onSelect(e);
          }
      }, [props.onSelect]);
      useEvent(element.current, 'change', onchange, true);
      useEvent(element.current, 'keyup', onKeyup, true);
      useEvent(element.current, 'select', onSelect, true);
      React.useEffect(() => {
          if (props.format) {
              if (props.format !== element.current?.valueFormat) {
                  element.current?.setAttribute('format', props.format);
              }
              if (onFormatChangeCallBackQueueRef.current.length > 0) {
                  onFormatChangeCallBackQueueRef.current.forEach((callBack) => {
                      callBack();
                  });
                  onFormatChangeCallBackQueueRef.current = [];
              }
          }
      }, [props.format]);
      React.useEffect(() => {
          if (props.max) {
              if (props.format && props.format !== element.current?.valueFormat) {
                  onFormatChangeCallBackQueueRef.current.push(() => {
                      if (props.max) {
                          element.current?.setMaxDate(props.max);
                      }
                  });
              }
              else {
                  element.current?.setMaxDate(props.max);
              }
          }
      }, [props.max]);
      React.useEffect(() => {
          if (props.min) {
              if (props.format && props.format !== element.current?.valueFormat) {
                  onFormatChangeCallBackQueueRef.current.push(() => {
                      props.min && element.current?.setMinDate(props.min);
                  });
              }
              else {
                  element.current?.setMinDate(props.min);
              }
          }
      }, [props.min]);
      React.useEffect(() => {
          if (element.current && props.value) {
              element.current.value = props.value;
          }
      }, [props.value]);
      React.useEffect(() => {
          if (element.current) {
              element.current.setAttribute("message", props.message || "");
          }
      }, [props.message]);
      React.useEffect(() => {
          if (element.current && Array.isArray(props.jalaliMonthList)) {
              element.current.setMonthList("JALALI", props.jalaliMonthList);
          }
      }, [props.jalaliMonthList]);
      React.useEffect(() => {
          if (element.current && Array.isArray(props.gregorianMonthList)) {
              element.current.setMonthList("GREGORIAN", props.gregorianMonthList);
          }
      }, [props.gregorianMonthList]);
      React.useEffect(() => {
          if (element.current && props.placeholder !== undefined) {
              element.current.placeholder = props.placeholder;
          }
      }, [props.placeholder]);
      React.useEffect(() => {
          if (element.current && props.overflowHandler !== undefined) {
              element.current.elements.popover.overflowHandler = props.overflowHandler;
          }
      }, [props.overflowHandler]);
      React.useEffect(() => {
          if (element.current && props.overflowRef !== undefined) {
              element.current.elements.popover.overflowDom = props.overflowRef.current;
          }
      }, [props.overflowRef]);
      React.useEffect(() => {
          if (element.current) {
              if (typeof props.style == "string") {
                  element.current.setAttribute("style", props.style);
              }
          }
      }, [props.style]);
      React.useEffect(() => {
          if (element.current && Array.isArray(props.validationList)) {
              element.current.validation.list = props.validationList;
          }
      }, [props.validationList]);
      React.useEffect(() => {
          if (element.current && props.direction) {
              element.current.setAttribute('direction', props.direction);
          }
      }, [props.direction]);
      React.useEffect(() => {
          if (element.current) {
              if (props.required) {
                  element.current.required = true;
              }
              else {
                  element.current.required = false;
              }
          }
      }, [props.required, element.current]);
      React.useEffect(() => {
          if (typeof props.calendarDefaultDateView == "object" && props.calendarDefaultDateView.year && props.calendarDefaultDateView.month) {
              element.current?.setCalendarDefaultDateView(props.calendarDefaultDateView.year, props.calendarDefaultDateView.month, props.calendarDefaultDateView.dateType);
          }
      }, [props.calendarDefaultDateView]);
      React.useEffect(() => {
          if (props.showPersianNumber) {
              element.current?.setAttribute('show-persian-number', 'true');
          }
          else {
              element.current?.removeAttribute('show-persian-number');
          }
      }, [props.showPersianNumber]);
      return (React.createElement("jb-date-input", { class: props.className ? props.className : "", name: props.name, label: props.label, "value-type": props.valueType ? props.valueType : 'GREGORIAN', ref: element, "input-type": props.inputType ? props.inputType : 'JALALI' }, props.children));
  });
  JBDateInput.displayName = "JBDateInput";

  exports.JBDateInput = JBDateInput;

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