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

jalali date input react component

'use strict';

var React = require('react');
require('jb-date-input');

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.cjs.js.map