@wix/design-system
Version:
@wix/design-system
126 lines • 6.09 kB
JavaScript
import React, { cloneElement, PureComponent, } from 'react';
import PropTypes from 'prop-types';
import { withFocusable } from '../common/Focusable';
import { classes, st } from './ToggleButton.st.css.js';
import Tooltip from '../Tooltip';
import Text from '../Text';
import { dataHooks, iconChildSize, SHAPES } from './constants';
import { TooltipCommonProps } from '../common/PropTypes/TooltipCommon';
import { WixDesignSystemContext } from '../WixDesignSystemProvider/context';
import ButtonCore from '../Button/ButtonCore';
const Icon = ({ children, size, shape, border, labelPlacement, focusableOnBlur, focusableOnFocus, className, }) => {
const iconSize = iconChildSize[size];
const isLabelOutside = shape === 'round' &&
(labelPlacement === 'end' || labelPlacement === 'start');
const isLabelStart = labelPlacement === 'start';
const isLabelEnd = labelPlacement === 'end' || (shape === 'pill' && !isLabelStart);
const [first, second] = React.Children.map(children, (child) => child);
const icon = isLabelStart ? second : first;
const topOutsideLabel = isLabelOutside && isLabelStart ? first : null;
const topInsideLabel = !isLabelOutside && isLabelStart ? first : null;
const bottomInsideLabel = !isLabelOutside && isLabelEnd ? second : null;
const bottomOutsideLabel = isLabelOutside && isLabelEnd ? second : null;
// TODO page is scrolled whenever icon focused and we press Space button
return (children && (React.createElement("span", { className: classes.labelContainer },
topOutsideLabel,
React.createElement("div", { className: st(classes.icon, { size, border }, className), onBlur: focusableOnBlur, onFocus: focusableOnFocus },
topInsideLabel,
cloneElement(icon, {
className: st(classes.rootIcon, {
iconOnly: !first || !second || shape === 'round',
}, icon.props?.className),
width: iconSize,
height: iconSize,
}),
bottomInsideLabel),
bottomOutsideLabel)));
};
const ToggleButtonIcon = withFocusable(Icon);
class ToggleButton extends PureComponent {
constructor() {
super(...arguments);
this.renderLabel = () => {
const { disabled, size, labelValue, labelPlacement, labelEllipsis, shape } = this.props;
return (React.createElement(Text, { className: st(classes.label, {
placement: shape !== SHAPES['pill'] && labelPlacement,
size,
shape,
}), disabled: disabled, dataHook: dataHooks.label, weight: "thin", ellipsis: labelEllipsis }, labelValue));
};
}
render() {
const { children, size = ToggleButton.defaultProps.size, shape = ToggleButton.defaultProps.shape, skin, tooltipProps, labelValue, selected, interactive, dataHook, labelPlacement, labelEllipsis, disabled, border = ToggleButton.defaultProps.border, tooltipDisabled, className, ...rest } = this.props;
const hasIcon = Boolean(children && React.Children.count(children) > 0);
return (React.createElement(WixDesignSystemContext.Consumer, null, ({ mobile }) => (React.createElement(Tooltip, { className: st(classes.tooltip, { disabled, interactive }), ...tooltipProps, size: "small", content: labelValue, disabled: tooltipDisabled ||
tooltipProps?.disabled ||
labelPlacement !== 'tooltip' ||
shape === 'pill' ||
mobile, "data-hook": dataHook },
React.createElement(ButtonCore, { ...rest, type: undefined, onFocus: rest?.onFocus, onBlur: rest?.onBlur, className: st(classes.root, {
disabled,
selected,
interactive,
skin,
labelPlacement,
shape,
mobile,
size,
hasIcon,
}, className), contentClassName: classes.btnContent, "data-hook": dataHooks.button, "data-placement": labelPlacement, "data-selected": selected, "data-skin": skin, "data-shape": shape, "aria-pressed": selected, disabled: disabled, "aria-label": labelValue?.toString() },
React.createElement(ToggleButtonIcon, { size: size, shape: shape, border: border, labelPlacement: labelPlacement },
labelPlacement === 'start' ? this.renderLabel() : null,
children,
labelPlacement === 'end' ||
(shape === SHAPES['pill'] && labelPlacement !== 'start')
? this.renderLabel()
: null),
labelPlacement === 'bottom' && shape !== SHAPES['pill']
? this.renderLabel()
: null)))));
}
}
ToggleButton.displayName = 'ToggleButton';
ToggleButton.propTypes = {
as: PropTypes.oneOfType([
PropTypes.func,
PropTypes.object,
PropTypes.string,
]),
className: PropTypes.string,
children: PropTypes.node,
skin: PropTypes.oneOf([
'standard',
'dark',
'inverted',
'destructive',
'success',
]),
size: PropTypes.oneOf(['tiny', 'small', 'medium', 'large']),
shape: PropTypes.oneOf(['square', 'round', 'pill']),
labelValue: PropTypes.node,
labelPlacement: PropTypes.oneOf(['tooltip', 'bottom', 'end', 'start']),
labelEllipsis: PropTypes.bool,
onClick: PropTypes.func,
selected: PropTypes.bool,
interactive: PropTypes.bool,
disabled: PropTypes.bool,
border: PropTypes.bool,
dataHook: PropTypes.string,
tooltipProps: PropTypes.shape(TooltipCommonProps),
};
ToggleButton.defaultProps = {
skin: 'standard',
size: 'medium',
shape: 'square',
border: false,
interactive: true,
disabled: false,
labelValue: '',
labelPlacement: 'tooltip',
labelEllipsis: false,
tooltipProps: {
placement: 'top',
},
};
export default ToggleButton;
//# sourceMappingURL=ToggleButton.js.map