@wix/design-system
Version:
@wix/design-system
22 lines • 1.32 kB
JavaScript
import React from 'react';
import { classes } from './ToggleButton.classes';
import { useFocusRing } from '../../providers/useFocusRing/useFocusRing';
import Text from '../../Text';
const addPrefix = (icon, size) => {
const dimension = size === 'small' || size === 'tiny' ? '18' : '24';
return (icon &&
React.cloneElement(icon, {
width: dimension,
height: dimension,
className: classes.prefix(),
}));
};
const ToggleButton = ({ children, prefixIcon, selected, size, dataHook, focusableOnFocus, focusableOnBlur, disabled, className, role, 'aria-checked': ariaChecked, ...rest }) => {
const { focusProps } = useFocusRing();
return (React.createElement("button", { ...rest, role: role, className: classes.root({ selected, size, disabled }, className), "data-hook": dataHook, "data-selected": selected, "aria-checked": ariaChecked, disabled: disabled, type: "button", ...focusProps },
addPrefix(prefixIcon, size),
React.createElement(Text, { className: classes.label(), ellipsis: true, size: size === 'tiny' ? 'small' : size, weight: "thin", disabled: disabled, skin: disabled ? 'disabled' : 'standard' }, children)));
};
ToggleButton.displayName = 'SegmentedToggle.Button';
export default ToggleButton;
//# sourceMappingURL=ToggleButton.js.map