@wix/design-system
Version:
@wix/design-system
89 lines • 4.24 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
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, ...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 }) }, childrenNodes));
}
}
SegmentedToggle.displayName = 'SegmentedToggle';
SegmentedToggle.propTypes = {
/** Applies a data-hook HTML attribute that can be used in the tests */
dataHook: PropTypes.string,
/** Specifies the initially selected option */
defaultSelected: PropTypes.node,
/** Specifies whether an option is selected */
selected: PropTypes.node,
/** Controls the size of the segmented toggle */
size: PropTypes.oneOf(['medium', 'small']),
/** Defines a callback function which is called every time option is clicked. Returns a selected element and its value. */
onClick: PropTypes.func,
/** Specifies whether interactions are disabled. */
disabled: PropTypes.bool,
/** Accepts <SegmentedToggle.Icon/> or <SegmentedToggle.Button/> as child items to list down available options */
children: PropTypes.array.isRequired,
/** Accessible label for the segmented toggle group */
ariaLabel: PropTypes.string,
/** ID of element that labels the segmented toggle group */
ariaLabelledby: PropTypes.string,
};
SegmentedToggle.defaultProps = {
children: [],
size: 'medium',
};
SegmentedToggle.Button = ToggleButton;
SegmentedToggle.Icon = ToggleIcon;
export default SegmentedToggle;
//# sourceMappingURL=SegmentedToggle.js.map