@wix/design-system/dist/esm/SegmentedToggle/SegmentedToggle.js

@wix/design-system

import React from 'react';
import { st, classes } from './SegmentedToggle.st.css.js';
import ToggleButton from './ToggleButton/ToggleButton';
import ToggleIcon from './ToggleIcon/ToggleIcon';
class SegmentedToggle extends React.Component {
    constructor() {
        super(...arguments);
        this.state = {
            selected: this.props.defaultSelected,
        };
        this._onClick = evt => {
            const { onClick, selected } = this.props;
            const { value } = evt.currentTarget;
            if (evt.currentTarget.disabled) {
                return;
            }
            if (selected) {
                return onClick && onClick(evt, value);
            }
            this.setState({ selected: value }, () => onClick && onClick(evt, value));
        };
        this._addDividers = (childrenNodes, disabled) => {
            const childrenNodesWithDividers = [];
            const isTransparent = (childNode1, childNode2) => childNode1.props.selected !== childNode2.props.selected;
            for (let i = 0; i < childrenNodes.length - 1; i++) {
                const childNode1 = childrenNodes[i];
                const childNode2 = childrenNodes[i + 1];
                const transparent = isTransparent(childNode1, childNode2);
                const divider = (React.createElement("div", { key: `divider-${i}`, className: st(classes.divider, { disabled, transparent }) }));
                childrenNodesWithDividers.push(childNode1, divider);
            }
            const lastChild = childrenNodes[childrenNodes.length - 1];
            childrenNodesWithDividers.push(lastChild);
            return childrenNodesWithDividers;
        };
    }
    render() {
        const { dataHook, children, disabled, size, defaultSelected, onClick, selected, ariaLabel, ariaLabelledby, fullWidth, ...rest } = this.props;
        const selection = selected || this.state.selected;
        let childrenNodes = React.Children.map(children, (child, index) => {
            const isDisabled = child.props.disabled ?? disabled;
            return React.cloneElement(child, {
                disabled: isDisabled,
                'data-click': `segmented-toggle-${index + 1}`,
                'aria-checked': child.props.value === selection,
                role: 'radio',
                onClick: this._onClick,
                selected: child.props.value === selection,
                size,
                className: st(classes.toggleItem, {
                    selected: child.props.value === selection,
                    size,
                }),
            });
        });
        childrenNodes = this._addDividers(childrenNodes, disabled);
        return (React.createElement("div", { ...rest, role: "radiogroup", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "data-hook": dataHook, "data-size": size, className: st(classes.root, { disabled, size, selected, fullWidth }) }, childrenNodes));
    }
}
SegmentedToggle.displayName = 'SegmentedToggle';
SegmentedToggle.defaultProps = {
    children: [],
    size: 'medium',
    fullWidth: false,
};
SegmentedToggle.Button = ToggleButton;
SegmentedToggle.Icon = ToggleIcon;
export default SegmentedToggle;
//# sourceMappingURL=SegmentedToggle.js.map