@wix/design-system
Version:
@wix/design-system
99 lines • 5.19 kB
JavaScript
import React, { cloneElement, PureComponent, } from 'react';
import { withFocusable } from '../common/Focusable';
import { classes } from './ToggleButton.classes';
import Tooltip from '../Tooltip';
import Text from '../Text';
import { dataHooks, iconChildSize, SHAPES } from './constants';
import { WixDesignSystemContext } from '../WixDesignSystemProvider/context';
import ButtonCore from '../Button/ButtonCore';
const Icon = ({ children, size, shape, 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: classes.icon({}, className), onBlur: focusableOnBlur, onFocus: focusableOnFocus },
topInsideLabel,
cloneElement(icon, {
className: classes.rootIcon({}, icon.props?.className),
width: iconSize,
height: iconSize,
}),
bottomInsideLabel),
bottomOutsideLabel)));
};
const ToggleButtonIcon = withFocusable(Icon);
class ToggleButton extends PureComponent {
constructor() {
super(...arguments);
this.renderLabel = () => {
const { disabled, labelValue, labelEllipsis } = this.props;
return (React.createElement(Text, { className: classes.label(), 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);
// A pill always renders an inline label, so it is never icon-only.
const iconOnly = hasIcon &&
shape !== SHAPES['pill'] &&
(shape === SHAPES['round'] ||
labelPlacement === 'tooltip' ||
labelPlacement === 'bottom');
return (React.createElement(WixDesignSystemContext.Consumer, null, ({ mobile }) => (React.createElement(Tooltip, { className: classes.tooltip({ disabled, interactive }), ...tooltipProps, size: "small", content: labelValue, disabled: !labelValue ||
tooltipDisabled ||
tooltipProps?.disabled ||
labelPlacement !== 'tooltip' ||
shape === 'pill' ||
mobile, "data-hook": dataHook },
React.createElement(ButtonCore, { ...rest, type: undefined, onFocus: rest?.onFocus, onBlur: rest?.onBlur, className: classes.root({
disabled,
selected,
interactive,
skin,
labelPlacement,
shape,
mobile,
size,
hasIcon,
border,
iconOnly,
}, 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, 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.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