@ozen-ui/kit/__inner__/esm/components/CheckboxNext/Checkbox.js

React component library

import { __assign, __rest } from "tslib";
import './Checkbox.css';
import React, { forwardRef } from 'react';
import { useThemeProps } from '../../hooks/useThemeProps';
import { cn } from '../../utils/classname';
import { useCheckboxGroupContext } from '../CheckboxGroupNext';
import { FormControlCarcass } from '../FormControlCarcass';
import { CheckboxCheckIcon } from './components';
import { CHECKBOX_DEFAULT_MIRRORED, CHECKBOX_DEFAULT_ALIGN, CHECKBOX_DEFAULT_DISABLED, CHECKBOX_DEFAULT_SIZE, CHECKBOX_DEFAULT_VARIANT, } from './constants';
export var cnCheckbox = cn('CheckboxNext');
export var Checkbox = forwardRef(function (inProps, ref) {
    var props = useThemeProps({
        props: inProps,
        name: 'CheckboxNext',
    });
    var _a = props.align, alignProp = _a === void 0 ? CHECKBOX_DEFAULT_ALIGN : _a, _b = props.size, sizeProp = _b === void 0 ? CHECKBOX_DEFAULT_SIZE : _b, _c = props.variant, variantProp = _c === void 0 ? CHECKBOX_DEFAULT_VARIANT : _c, _d = props.mirrored, mirroredProp = _d === void 0 ? CHECKBOX_DEFAULT_MIRRORED : _d, className = props.className, label = props.label, carcassProps = props.carcassProps, _e = props.disabled, disabled = _e === void 0 ? CHECKBOX_DEFAULT_DISABLED : _e, checkedProp = props.checked, inputRef = props.inputRef, indeterminate = props.indeterminate, nameProp = props.name, onChangeProp = props.onChange, hintProps = props.hintProps, hint = props.hint, renderAfter = props.renderAfter, renderAfterProps = props.renderAfterProps, dataTestid = props.dataTestid, other = __rest(props, ["align", "size", "variant", "mirrored", "className", "label", "carcassProps", "disabled", "checked", "inputRef", "indeterminate", "name", "onChange", "hintProps", "hint", "renderAfter", "renderAfterProps", "dataTestid"]);
    var checked = checkedProp;
    var name = nameProp;
    var size = sizeProp;
    var variant = variantProp;
    var align = alignProp;
    var mirrored = mirroredProp;
    var checkboxGroupContext = useCheckboxGroupContext();
    if (checkboxGroupContext) {
        if (checked === undefined && checkboxGroupContext.value) {
            checked = checkboxGroupContext === null || checkboxGroupContext === void 0 ? void 0 : checkboxGroupContext.value.includes(other === null || other === void 0 ? void 0 : other.value);
        }
        if (name === undefined && checkboxGroupContext.name) {
            name = checkboxGroupContext.name;
        }
        if (inProps.size === undefined && checkboxGroupContext.size) {
            size = checkboxGroupContext.size;
        }
        if (inProps.variant === undefined && checkboxGroupContext.variant) {
            variant = checkboxGroupContext.variant;
        }
        if (inProps.align === undefined && checkboxGroupContext.align) {
            align = checkboxGroupContext.align;
        }
        if (inProps.mirrored === undefined && checkboxGroupContext.mirrored) {
            mirrored = checkboxGroupContext.mirrored;
        }
    }
    var onChange = function (event) {
        onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(event);
        checkboxGroupContext === null || checkboxGroupContext === void 0 ? void 0 : checkboxGroupContext.onChange(event);
    };
    return (React.createElement(FormControlCarcass, __assign({}, carcassProps, { ref: ref, size: size, variant: variant, align: align, mirrored: mirrored, hint: hint, label: label, hintProps: hintProps, disabled: disabled, className: cnCheckbox({
            indeterminate: indeterminate,
            disabled: disabled,
            variant: variant,
            mirrored: mirrored,
            size: size,
        }, [className]), controlProps: {
            className: cnCheckbox('Box'),
        }, renderAfter: renderAfter, renderAfterProps: renderAfterProps, "data-testid": dataTestid }),
        React.createElement("input", __assign({ type: "checkbox", className: cnCheckbox('Input'), disabled: disabled, checked: checked, onChange: onChange, name: name }, other, { ref: inputRef })),
        React.createElement("span", { className: cnCheckbox('IconWrapper') },
            React.createElement(CheckboxCheckIcon, { indeterminate: indeterminate, className: cnCheckbox('Icon') }))));
});
Checkbox.displayName = 'Checkbox';