@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
65 lines (64 loc) • 3.33 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.CheckBox = exports.CheckBoxGroup = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const react_1 = require("react");
const Flex_1 = require("../Flex");
const clsx_1 = tslib_1.__importDefault(require("clsx"));
const Square = (props) => {
return React.createElement("div", { className: `ab-CheckBox__square ab-CheckBox__square--${props.type}` });
};
const CheckBox = ({ children, checked, onChange, value, name, disabled, readOnly, variant = 'default', gapDistance = 'var(--ab-base-space)', childrenPosition = 'end', as = 'label', ...props }) => {
const [stateChecked, setStateChecked] = (0, react_1.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 = React.createElement("div", { style: { marginLeft: gapDistance, display: 'inline-block' } });
children = children ? (React.createElement("div", { style: {
display: 'inline-block',
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
} }, 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 = (0, react_1.useRef)(null);
React.useEffect(() => {
checkboxRef.current.indeterminate = indeterminate;
}, [indeterminate]);
let input = (React.createElement("input", { className: (0, clsx_1.default)(`ab-CheckBox-input twa:align-middle twa:opacity-0`, {
'twa:cursor-pointer': !readOnly && !disabled,
}), ref: checkboxRef, disabled: disabled, readOnly: readOnly, checked: !!computedChecked, type: "checkbox", name: name, value: value, onChange: onInputChange }));
return (React.createElement(Flex_1.Box, { ...props, className: (0, clsx_1.default)('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 },
before,
beforeGap,
input,
React.createElement(Square, { type: type }),
afterGap,
after));
};
exports.CheckBox = CheckBox;
const CheckBoxGroup = (props) => {
const { orientation, ...flexProps } = props;
return (React.createElement(Flex_1.Flex, { className: `ab-CheckBoxGroup ${orientation === 'horizontal' ? 'twa:items-center' : 'twa:items-start'}`, flexDirection: orientation == 'horizontal' ? 'row' : 'column', ...flexProps }));
};
exports.CheckBoxGroup = CheckBoxGroup;