wix-style-react/dist/es/src/ToggleButton/ToggleButton.js

wix-style-react

import React, { cloneElement, PureComponent } from 'react';
import PropTypes from 'prop-types';
import { withFocusable } from '../common/Focusable';
import { st, classes } from './ToggleButton.st.css';
import Tooltip from '../Tooltip';
import Text from '../Text';
import { SHAPES, iconChildSize, pillTextSizesMap, dataHooks, } from './constants';
import { TooltipCommonProps } from '../common/PropTypes/TooltipCommon';
import { WixStyleReactContext } from '../WixStyleReactProvider/context';
import ButtonCore from '../Button/ButtonCore';
class Icon extends PureComponent {
    render() {
        const { children, size, shape, border, labelValue, labelPlacement, focusableOnBlur, focusableOnFocus, className, } = this.props;
        const iconSize = iconChildSize[size];
        const isLabelOutside = shape === 'round' && labelPlacement === 'end';
        const [icon, label] = React.Children.map(children, (children, child => child));
        // TODO page is scrolled whenever icon focused and we press Space button
        return (children && (React.createElement("span", { className: isLabelOutside ? classes.labelContainer : '' },
            React.createElement("div", { className: st(classes.icon, { size, border }, className), onBlur: focusableOnBlur, onFocus: focusableOnFocus },
                cloneElement(icon, {
                    width: iconSize,
                    height: iconSize,
                }),
                !isLabelOutside && label),
            isLabelOutside && label)));
    }
}
const ToggleButtonIcon = withFocusable(Icon);
class ToggleButton extends PureComponent {
    constructor() {
        super(...arguments);
        this.renderLabel = () => {
            const { disabled, size, labelValue, labelPlacement, labelEllipsis, shape } = this.props;
            const textSize = shape === SHAPES['pill'] ? pillTextSizesMap[size] : 'tiny';
            const textWeight = shape === SHAPES['pill'] && size === 'tiny' ? 'bold' : 'thin';
            return (React.createElement(Text, { className: st(classes.label, {
                    placement: shape !== SHAPES['pill'] && labelPlacement,
                    size,
                    shape,
                }), disabled: disabled, dataHook: dataHooks.label, size: textSize, weight: textWeight, ellipsis: labelEllipsis }, labelValue));
        };
    }
    render() {
        const { children, size, shape, skin, tooltipProps, labelValue, selected, dataHook, labelPlacement, labelEllipsis, disabled, border, tooltipDisabled, ...rest } = this.props;
        return (React.createElement(WixStyleReactContext.Consumer, null, ({ newColorsBranding }) => (React.createElement(Tooltip, { className: st(classes.tooltip), ...tooltipProps, size: "small", content: labelValue, disabled: tooltipDisabled ||
                tooltipProps.disabled ||
                labelPlacement !== 'tooltip' ||
                shape === 'pill', "data-hook": dataHook },
            React.createElement(ButtonCore, { ...rest, className: st(classes.root, {
                    disabled,
                    selected,
                    skin,
                    labelPlacement,
                    shape,
                    newColorsBranding,
                }), "data-hook": dataHooks.button, "data-placement": labelPlacement, "data-selected": selected, "data-skin": skin, "data-shape": shape, "aria-pressed": selected, disabled: disabled, "aria-label": labelValue },
                React.createElement(ToggleButtonIcon, { size: size, shape: shape, border: border, tooltipProps: tooltipProps, labelValue: labelValue, labelPlacement: labelPlacement },
                    children,
                    labelPlacement === 'end' || shape === SHAPES['pill']
                        ? this.renderLabel()
                        : null),
                labelPlacement === 'bottom' && shape !== SHAPES['pill']
                    ? this.renderLabel()
                    : null)))));
    }
}
ToggleButton.displayName = 'ToggleButton';
ToggleButton.propTypes = {
    /** render as some other component or DOM tag */
    as: PropTypes.oneOfType([
        PropTypes.func,
        PropTypes.object,
        PropTypes.string,
    ]),
    /** Used for passing any wix-style-react icon. For external icon make sure to follow ux sizing guidelines */
    children: PropTypes.node,
    /** Button skins */
    skin: PropTypes.oneOf([
        'standard',
        'dark',
        'inverted',
        'destructive',
        'success',
    ]),
    /** Button size */
    size: PropTypes.oneOf(['tiny', 'small', 'medium', 'large']),
    /** Button shape */
    shape: PropTypes.oneOf(['square', 'round', 'pill']),
    /** Label content */
    labelValue: PropTypes.node,
    /** Label placement */
    labelPlacement: PropTypes.oneOf(['tooltip', 'bottom', 'end']),
    /** Whether label should have ellipsis */
    labelEllipsis: PropTypes.bool,
    /** Click event handler  */
    onClick: PropTypes.func,
    /** Applies selected styles */
    selected: PropTypes.bool,
    /** Applies disabled styles */
    disabled: PropTypes.bool,
    /** Applies border */
    border: PropTypes.bool,
    /** String based data hook */
    dataHook: PropTypes.string,
    /** Tooltip props for label. Applied only when `labelPlacement` is `tooltip`.
     * @linkTypeTo components-overlays--tooltip
     * @setTypeName TooltipCommonProps
     */
    tooltipProps: PropTypes.shape(TooltipCommonProps),
};
ToggleButton.defaultProps = {
    skin: 'standard',
    size: 'medium',
    shape: 'square',
    border: false,
    disabled: false,
    labelValue: '',
    labelPlacement: 'tooltip',
    labelEllipsis: false,
    tooltipProps: {
        placement: 'top',
    },
};
export default ToggleButton;
//# sourceMappingURL=ToggleButton.js.map