@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
66 lines (65 loc) • 3.01 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ToggleGroup = exports.ToggleGroupContext = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const Flex_1 = require("../Flex");
const clsx_1 = tslib_1.__importDefault(require("clsx"));
const react_1 = require("react");
const contains_1 = tslib_1.__importDefault(require("../utils/contains"));
exports.ToggleGroupContext = React.createContext({
toggleButtons: [],
activeIndex: -1,
});
const ToggleGroup = (props) => {
const ref = (0, react_1.useRef)(null);
const [context, setContext] = React.useState({
toggleButtons: [],
activeIndex: 0,
});
const setActiveIndex = React.useCallback((index) => {
setContext((prev) => ({
...prev,
activeIndex: index,
}));
}, []);
return (React.createElement(exports.ToggleGroupContext.Provider, { value: context },
React.createElement(Flex_1.Flex, { ref: ref, tabIndex: 0, className: (0, clsx_1.default)('ab-Toggle-Group twa:shadow-sm', 'twa:bg-primary twa:text-text-on-primary', 'twa:rounded-standard twa:overflow-hidden', 'twa:inline-flex twa:w-fit', 'twa:focus:outline-0',
// make the shadow of child Toggle buttons invisible when the group is not focused
'twa:not-focus-within:[--ab-focus-light__box-shadow:none]', 'twa:not-focus-within:[--ab-focus__box-shadow:none]'), onMouseDown: (event) => {
const index = context.toggleButtons.findIndex((btn) => (0, contains_1.default)(btn.node, event.target));
if (index !== -1) {
setActiveIndex(index);
}
}, onKeyDown: (event) => {
const { toggleButtons, activeIndex } = context;
if (event.key === ' ') {
event.preventDefault();
event.stopPropagation();
const activeButton = toggleButtons[activeIndex];
if (!activeButton) {
return;
}
activeButton.toggle();
return;
}
if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
event.preventDefault();
event.stopPropagation();
const node = ref.current;
if (!node) {
return;
}
const dir = event.key === 'ArrowLeft' ? -1 : 1;
let nextIndex = activeIndex + dir;
if (nextIndex < 0) {
nextIndex = toggleButtons.length - 1;
}
else if (nextIndex > toggleButtons.length - 1) {
nextIndex = 0;
}
setActiveIndex(nextIndex);
}
} }, props.children)));
};
exports.ToggleGroup = ToggleGroup;