wix-style-react
Version:
wix-style-react
30 lines • 1.43 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import { st, classes } from './ToggleButton.st.css';
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, ...rest }) => {
const { isFocusVisible, focusProps } = useFocusRing();
return (React.createElement("button", { ...rest, className: st(classes.root, { selected, size, 'focus-visible': isFocusVisible }, className), "data-hook": dataHook, "data-selected": selected, disabled: disabled, type: "button", ...focusProps },
addPrefix(prefixIcon, size),
React.createElement(Text, { ellipsis: true, size: size, weight: "thin", skin: disabled ? 'disabled' : 'standard' }, children)));
};
ToggleButton.propTypes = {
children: PropTypes.node,
prefixIcon: PropTypes.node,
value: PropTypes.string,
selected: PropTypes.bool,
disabled: PropTypes.bool,
};
ToggleButton.displayName = 'SegmentedToggle.Button';
export default ToggleButton;
//# sourceMappingURL=ToggleButton.js.map