@adaptabletools/adaptable/src/components/CheckBox/index.js

Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { useRef, useState } from 'react';
import { Box, Flex } from '../Flex';
import { cn } from '../../lib/utils';
import { targetPeer } from '../twUtils';
const Square = (props) => {
    return (_jsx("div", { className: cn(`ab-CheckBox__square ab-CheckBox__square--${props.type}`, targetPeer.focusVisibleOutline, props.className) }));
};
const CheckBox = ({ children, checked, onChange, value, name, disabled, readOnly, variant = 'default', gapDistance = 'var(--ab-base-space)', childrenPosition = 'end', checkSquareClassName, tabIndex, as = 'label', ...props }) => {
    const [stateChecked, setStateChecked] = useState(false);
    const computedChecked = checked !== undefined ? checked : stateChecked;
    const onInputChange = (event) => {
        if (readOnly) {
            return;
        }
        const newChecked = event.target.checked;
        if (checked === undefined) {
            setStateChecked(newChecked);
        }
        if (onChange) {
            onChange(newChecked, event);
        }
    };
    const type = computedChecked === true
        ? 'checked'
        : computedChecked === false
            ? 'unchecked'
            : 'indeterminate';
    const gap = _jsx("div", { style: { marginLeft: gapDistance, display: 'inline-block' } });
    children = children ? (_jsx("div", { style: {
            display: 'inline-block',
            whiteSpace: 'nowrap',
            overflow: 'hidden',
            textOverflow: 'ellipsis',
        }, children: children })) : null;
    const before = childrenPosition === 'start' ? children : null;
    const beforeGap = childrenPosition === 'start' && children ? gap : null;
    const after = childrenPosition === 'end' ? children : null;
    const afterGap = childrenPosition === 'end' && children ? gap : null;
    let indeterminate = computedChecked === null;
    const checkboxRef = useRef(null);
    React.useEffect(() => {
        checkboxRef.current.indeterminate = indeterminate;
    }, [indeterminate]);
    let input = (_jsx("input", { className: cn(`ab-CheckBox-input twa:peer twa:align-middle twa:opacity-0`, {
            'twa:cursor-pointer': !readOnly && !disabled,
        }), ref: checkboxRef, disabled: disabled, readOnly: readOnly, checked: !!computedChecked, tabIndex: tabIndex, type: "checkbox", name: name, value: value, onChange: onInputChange }));
    return (_jsxs(Box, { ...props, className: cn('twa:my-2', 'ab-CheckBox', `ab-CheckBox--${type}`, `ab-CheckBox--variant-${variant}`, disabled ? 'ab-CheckBox--disabled' : '', readOnly ? 'ab-CheckBox--readonly' : '', props.className), style: props.style, as: as, children: [before, beforeGap, input, _jsx(Square, { type: type, className: checkSquareClassName }), afterGap, after] }));
};
export const CheckBoxGroup = (props) => {
    const { orientation, ...flexProps } = props;
    return (_jsx(Flex, { className: `ab-CheckBoxGroup ${orientation === 'horizontal' ? 'twa:items-center' : 'twa:items-start'}`, flexDirection: orientation == 'horizontal' ? 'row' : 'column', ...flexProps }));
};
export { CheckBox };