@wix/design-system
Version:
@wix/design-system
33 lines • 1.63 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import { st, classes } from './ToggleButton.st.css.js';
import { useFocusRing } from '../../providers/useFocusRing/useFocusRing';
import Text from '../../Text';
const addPrefix = (icon, size) => {
const dimension = size === 'small' ? '18' : '24';
return (icon &&
React.cloneElement(icon, {
width: dimension,
height: dimension,
className: st(classes.prefix, { size }),
}));
};
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: st(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: st(classes.label), ellipsis: true, size: size, weight: "thin", disabled: disabled, skin: disabled ? 'disabled' : 'standard' }, children)));
};
ToggleButton.propTypes = {
children: PropTypes.node,
prefixIcon: PropTypes.node,
value: PropTypes.string,
selected: PropTypes.bool,
disabled: PropTypes.bool,
size: PropTypes.oneOf(['small', 'medium']),
dataHook: PropTypes.string,
'aria-checked': PropTypes.bool,
};
ToggleButton.displayName = 'SegmentedToggle.Button';
export default ToggleButton;
//# sourceMappingURL=ToggleButton.js.map