@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
41 lines (40 loc) • 2.61 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ToggleButton = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const clsx_1 = tslib_1.__importDefault(require("clsx"));
const Flex_1 = require("../Flex");
const twMerge_1 = require("../../twMerge");
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 = (0, clsx_1.default)(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 (React.createElement("label", { "data-checked": isChecked, "data-name": dataName, style: style, className: (0, twMerge_1.twMerge)(preparedClassName) },
React.createElement("input", { type: "checkbox", disabled: disabled, checked: isChecked, className: (0, clsx_1.default)(`${baseClassName}__input`, 'twa:opacity-0 twa:size-0'), onChange: handleChange }),
React.createElement(Flex_1.Flex, { alignItems: "center", "data-checked": isChecked, className: (0, clsx_1.default)(`${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,
},
// the :before pseudo element
'twa:before:absolute twa:before:content-[""] twa:before:size-[24px]', 'twa:before:rounded-standard twa:before:bg-white') },
React.createElement("div", { className: (0, clsx_1.default)(`${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))));
};
exports.ToggleButton = ToggleButton;