@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
67 lines (66 loc) • 3.32 kB
JavaScript
"use strict";
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 rebass_1 = require("rebass");
const join_1 = tslib_1.__importDefault(require("../utils/join"));
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-space-1)', 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: `ab-CheckBox-input`, ref: checkboxRef, disabled: disabled, readOnly: readOnly, checked: !!computedChecked, type: "checkbox", name: name, value: value, style: {
verticalAlign: 'middle',
opacity: 0,
cursor: 'pointer',
}, onChange: onInputChange }));
return (React.createElement(rebass_1.Box, { my: 2, ...props, className: (0, join_1.default)('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(rebass_1.Flex, { className: "ab-CheckBoxGroup", flexDirection: orientation == 'horizontal' ? 'row' : 'column', alignItems: orientation == 'horizontal' ? 'center' : 'flex=start', ...flexProps }));
};
exports.CheckBoxGroup = CheckBoxGroup;