jb-checkbox/react/dist/JBCheckbox.js

checkbox web component

import React, { useEffect, useRef, useState, useImperativeHandle, useCallback } from 'react';
import 'jb-checkbox';

function useBindEvent(ref, event, handler, passive = false) {
    useEffect(() => {
        const dom = ref.current;
        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);
            }
        };
    }, [ref, event, handler, passive]);
}

const JBCheckbox = React.forwardRef((props, ref) => {
    const element = useRef(null);
    const [refChangeCount, refChangeCountSetter] = useState(0);
    useImperativeHandle(ref, () => (element ? element.current : undefined), [element]);
    useEffect(() => {
        refChangeCountSetter(refChangeCount + 1);
    }, [element.current]);
    const onchange = useCallback((e) => {
        if (props.value !== undefined && props.value !== null) {
            e.preventDefault();
        }
        if (typeof props.onChange == "function") {
            props.onChange(e);
        }
    }, [props.onChange, props.value]);
    useBindEvent(element, 'before-change', onchange, true);
    useBindEvent(element, 'change', onchange, true);
    useEffect(() => {
        if (element.current && props.value !== null && props.value !== undefined) {
            element.current.value = props.value;
        }
    }, [props.value]);
    useEffect(() => {
        if (element.current && typeof props.style == "string") {
            element.current.setAttribute("style", props.style);
        }
    }, [props.style]);
    useEffect(() => {
        if (element.current && typeof props.name == "string") {
            element.current.setAttribute("name", props.name);
        }
        else if (element.current && props.name == null) {
            element.current.removeAttribute("name");
        }
    }, [props.name]);
    useEffect(() => {
        if (element.current) {
            element.current.disabled = Boolean(props.disabled);
        }
    }, [element.current, props.disabled]);
    useEffect(() => {
        if (element.current && Array.isArray(props.validationList)) {
            element.current.validation.list = props.validationList;
        }
    }, [props.validationList]);
    return (React.createElement("jb-checkbox", { class: props.className ? props.className : "", label: props.label ? props.label : '', ref: element }, props.children));
});
JBCheckbox.displayName = "JBSwitch";

export { JBCheckbox };
//# sourceMappingURL=JBCheckbox.js.map