@kadconsulting/dry
Version:
KAD Reusable Component Library
33 lines • 2.8 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo, useState, forwardRef, useEffect } from 'react';
import classnames from 'classnames';
import { v4 as uuid } from 'uuid';
// TODO-DRY: icon needs to be easer to use
import Icon from '../Icons/Icon/Icon';
import { Check, Minus } from '../Icons/paths';
import { IconSizes } from '../Icons/Icon/IconTypes';
import { useInputLabelContrastColor } from '../../hooks/useInputLabelContrastColor';
import './Checkbox.scss';
const Checkbox = forwardRef(({ checked = false, disabled, LabelProps, LabelContent, subText, extraText, extraTextPosition = 'right', indeterminate, color = 'light-contrast', className, isCard = false, passProps, value, onChange, extraColor, ...props }, ref) => {
const { labelColor, ...labelProps } = LabelProps ?? {};
const [id] = useState(() => props.id || `input-${uuid()}`);
const [isChecked, setIsChecked] = useState(checked);
const computedLabelColor = useInputLabelContrastColor(labelColor);
const checkColor = useMemo(() => (color === 'light-contrast' ? '#6c2d91' : '#cdace0'), [color]);
const handleOnChange = (e) => {
setIsChecked(e.target.checked);
onChange?.(e);
};
const checkboxClass = classnames('dry-checkbox', className, {
'dry-checkbox--disabled': disabled,
'dry-checkbox--card': isCard,
});
useEffect(() => {
setIsChecked(checked);
}, [checked]);
return (_jsxs("label", { ...labelProps, htmlFor: id, className: checkboxClass, style: { color: computedLabelColor, ...(LabelProps?.style ?? {}) }, children: [extraText && extraTextPosition === 'left' && (_jsx("span", { className: 'dry-checkbox__extra-text dry-checkbox__extra-text--left', children: extraText })), _jsx("input", { ...props, id: id, type: 'checkbox', disabled: disabled, checked: isChecked, className: 'dry-checkbox__input', "aria-checked": indeterminate ? 'mixed' : checked, onChange: handleOnChange }), _jsxs("div", { className: 'dry-checkbox__style', children: [isChecked && !indeterminate && (_jsx(Icon, { color: checkColor, Path: Check, size: IconSizes.SMALL })), indeterminate && (_jsx(Icon, { color: checkColor, Path: Minus, size: IconSizes.SMALL }))] }), _jsxs("div", { className: 'dry-checkbox__label-content', children: [_jsx("span", { className: 'dry-checkbox__text', style: extraColor
? { borderLeft: `3px solid ${extraColor}`, paddingLeft: '8px' }
: {}, children: LabelContent }), subText && _jsx("span", { className: 'dry-checkbox__sub-text', children: subText })] }), extraText && extraTextPosition === 'right' && (_jsx("span", { className: 'dry-checkbox__extra-text', children: extraText }))] }));
});
export default Checkbox;
//# sourceMappingURL=Checkbox.js.map