wix-style-react
Version:
wix-style-react
30 lines • 1.88 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';
const Icon = ({ 'data-click': dataClick, selected, size, onClick, focusableOnFocus, focusableOnBlur, children, className, ...rest }) => (React.createElement("button", { ...rest, className: st(classes.button, { selected, size }, className), "data-click": dataClick, "data-hook": "toggle-icon", "data-selected": selected, 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, ...rest } = this.props;
return (React.createElement(Tooltip, { ...tooltipProps, className: st(classes.tooltip), dataHook: dataHook, appendTo: "window", placement: "top", content: tooltipText, timeout: 0 },
React.createElement(FocusableIcon, { ...rest, size: size, selected: selected, "data-click": dataClick, 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