@wix/design-system
Version:
@wix/design-system
30 lines • 2.03 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import { withFocusable } from '../../common/Focusable';
import { TooltipCommonProps } from '../../common/PropTypes/TooltipCommon';
import Tooltip from '../../Tooltip';
import { st, classes } from './ToggleIcon.st.css.js';
const Icon = ({ 'data-click': dataClick, selected, size, onClick, focusableOnFocus, focusableOnBlur, children, className, role, 'aria-checked': ariaChecked, ...rest }) => (React.createElement("button", { ...rest, role: role, className: st(classes.button, { size, selected }, className), "data-click": dataClick, "data-hook": "toggle-icon", "data-selected": selected, "aria-checked": ariaChecked, onClick: onClick, onFocus: focusableOnFocus, onBlur: focusableOnBlur, type: "button" }, children));
const FocusableIcon = withFocusable(Icon);
class ToggleIcon extends React.Component {
render() {
const { children, selected, size, tooltipText, tooltipProps, focusableOnFocus, focusableOnBlur, onClick, dataHook, 'data-click': dataClick, role, 'aria-checked': ariaChecked, ...rest } = this.props;
return (React.createElement(Tooltip, { appendTo: "window", placement: "top", timeout: 0, ...tooltipProps, content: tooltipText, className: st(classes.tooltip), dataHook: dataHook },
React.createElement(FocusableIcon, { ...rest, size: size, selected: selected, "data-click": dataClick, role: role, "aria-checked": ariaChecked, onClick: onClick, onFocus: focusableOnFocus, onBlur: focusableOnBlur }, children
? React.cloneElement(children, {
size: size === 'small' ? '18px' : '24px',
})
: null)));
}
}
ToggleIcon.displayName = 'SegmentedToggle.Icon';
ToggleIcon.propTypes = {
children: PropTypes.node,
selected: PropTypes.bool,
value: PropTypes.string,
tooltipText: PropTypes.string,
tooltipProps: PropTypes.shape(TooltipCommonProps),
disabled: PropTypes.bool,
};
export default ToggleIcon;
//# sourceMappingURL=ToggleIcon.js.map