@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
57 lines (56 loc) • 3.16 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { cn } from '../../lib/utils';
import { IconComponent } from '../Icon';
import { ToggleGroupContext } from './ToggleGroup';
const baseClassName = 'ab-Toggle';
export const Toggle = ({ onPressedChange, pressed, icon, standalone = false, children, ...rest }) => {
const onPressedChangeRef = React.useRef(onPressedChange);
React.useLayoutEffect(() => {
onPressedChangeRef.current = onPressedChange;
}, [onPressedChange]);
const pressedRef = React.useRef(pressed);
React.useLayoutEffect(() => {
pressedRef.current = pressed;
}, [pressed]);
const toggle = React.useCallback(() => onPressedChangeRef.current(!pressedRef.current), []);
const toggleContext = React.useContext(ToggleGroupContext);
const [currentIndex, setCurrentIndex] = React.useState(-1);
const isActive = toggleContext.activeIndex === currentIndex;
const ref = React.useRef(null);
React.useEffect(() => {
if (standalone) {
return;
}
if (!toggleContext?.toggleButtons) {
return;
}
const thisButton = {
node: ref.current,
toggle,
};
toggleContext.toggleButtons.push(thisButton);
setCurrentIndex(toggleContext.toggleButtons.length - 1);
return () => {
const index = toggleContext.toggleButtons.indexOf(thisButton);
if (index !== -1) {
toggleContext.toggleButtons.splice(index, 1);
}
};
}, [toggleContext]);
return (_jsxs("button", { ...rest, ref: ref, tabIndex: standalone ? 0 : -1, className: cn('twa:border-0', 'twa:cursor-pointer twa:fill-current', 'twa:outline-0', 'twa:min-h-input twa:relative twa:py-1 twa:px-2', !standalone &&
'twa:not-first:after:content-[""] twa:not-first:after:border-l-2 twa:not-first:after:border-accent-foreground twa:not-first:after:h-[10px] twa:not-first:after:absolute twa:not-first:after:-left-px twa:not-first:after:top-1/2 twa:not-first:after:-translate-y-1/2', standalone && [
'ab-Toggle--standalone',
'twa:shadow-sm twa:rounded-standard twa:bg-primary twa:text-primary-foreground',
], {
'twa:text-inherit twa:bg-transparent': !pressed,
'twa:hover:bg-primarylight twa:hover:text-primary-foreground': !pressed,
[`${baseClassName}--pressed`]: pressed,
'twa:bg-accent twa:hover:bg-accent/90 twa:text-accent-foreground': pressed,
}, !standalone && {
'twa:before:rounded-standard twa:before:content-[""] twa:before:absolute twa:before:inset-1 twa:before:z-20 twa:before:pointer-events-none': true,
'twa:before:shadow-(--ab-focus-light__box-shadow)': isActive && pressed,
'twa:before:shadow-(--ab-focus__box-shadow)': isActive && !pressed,
}, standalone &&
'twa:focus-visible:ring-2 twa:focus-visible:ring-ring twa:focus-visible:ring-offset-1', baseClassName), onClick: toggle, children: [icon && _jsx(IconComponent, { icon: { name: icon } }), children] }));
};