@nafr/echo-ui
Version:
A UI library born for WAA
43 lines (42 loc) • 2.07 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef, useEffect, useContext, useCallback } from 'react';
import { usePropsWithGroup } from '../../../lib/hooks';
import { cn } from '../../../lib/utils';
import { ButtonGroupContext } from './context';
import { useStyle } from './styles';
import { RADIUS, SIZE } from './constants';
export const Button = forwardRef((props, ref) => {
const groupContext = useContext(ButtonGroupContext);
const isInGroup = groupContext !== null;
const { value, toggled: _toggled = false, disabled = false, size = SIZE, radius = RADIUS, onClick, onToggleChange, ...restProps } = usePropsWithGroup(props, groupContext, [
'classNames',
'styles',
]);
let toggled = _toggled;
if (isInGroup) {
if (Array.isArray(groupContext.value)) {
toggled = groupContext.value?.length ? groupContext.value.includes(value) : _toggled;
}
else
toggled = groupContext.value === value;
}
useEffect(() => {
if (disabled)
return;
onToggleChange && onToggleChange(toggled);
}, [disabled, toggled, onToggleChange]);
const handleClick = useCallback((e) => {
if (disabled)
return;
onClick && onClick(e);
// If the button is in a group and have the specifical value,
// we need to handle the toggling
if (!isInGroup || !value)
return;
groupContext.onChange && groupContext.onChange(value);
}, [disabled, isInGroup, groupContext, value, onClick]);
return (_jsx("button", { ...restProps, ref: ref, "data-toggled": toggled, "data-disable": disabled, disabled: disabled, className: cn(useStyle({ toggled, size, radius, isInGroup }), isInGroup && groupContext.classNames?.button, restProps.className), style: {
...(isInGroup && groupContext.styles?.button),
...restProps.style,
}, onClick: handleClick, children: _jsx("span", { className: cn(disabled && 'text-foreground/60'), children: restProps.children }) }));
});