@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
31 lines (30 loc) • 2.26 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Flex } from '../Flex';
import { twMerge } from '../../twMerge';
import { cn } from '../../lib/utils';
export const ToggleButton = ({ checked, onChange, disabled, className, children, style = {}, 'data-name': dataName, }) => {
const isChecked = Boolean(checked);
const handleChange = (event) => {
if (disabled) {
return;
}
onChange(Boolean(event.target.checked));
};
const baseClassName = 'ab-ToggleButton';
const preparedClassName = cn(baseClassName, 'twa:group twa:outline-0', 'twa:select-none twa:relative twa:inline-block', 'twa:min-w-[40px]', 'twa:min-h-input', 'twa:w-[77px]', {
[`${baseClassName}--checked`]: isChecked,
[`${baseClassName}--disabled`]: disabled,
'twa:hover:cursor-pointer twa:hover:opacity-85': !disabled,
}, className);
return (_jsxs("label", { "data-checked": isChecked, "data-name": dataName, style: style, className: twMerge(preparedClassName), children: [_jsx("input", { type: "checkbox", disabled: disabled, checked: isChecked, className: cn(`${baseClassName}__input`, 'twa:opacity-0 twa:size-0'), onChange: handleChange }), _jsx(Flex, { alignItems: "center", "data-checked": isChecked, className: cn(`${baseClassName}__slider`, 'twa:group:focus-within:ring-1 twa:group-focus-within:shadow-(--ab-focus__box-shadow)', 'twa:absolute twa:inset-0 twa:rounded-standard', {
'twa:bg-(--ab-cmp-toggle-button__background)': !isChecked,
'twa:bg-accent': isChecked,
'twa:justify-start': isChecked,
'twa:justify-end': !isChecked,
'twa:opacity-50': disabled,
}, 'twa:before:absolute twa:before:content-[""] twa:before:size-[24px]', 'twa:before:rounded-standard twa:before:bg-white'), children: _jsx("div", { className: cn(`${baseClassName}__text`, 'twa:font-semibold', 'twa:pr-2', 'twa:text-1', {
'twa:text-(--ab-cmp-toggle-button__color)': !isChecked,
'twa:text-(--ab-cmp-toggle-button--checked__color)': isChecked,
'twa:pl-2': isChecked,
}), children: children }) })] }));
};