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

@wix/design-system

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _SegmentedToggleSt = require("./SegmentedToggle.st.css.js");
var _ToggleButton = _interopRequireDefault(require("./ToggleButton/ToggleButton"));
var _ToggleIcon = _interopRequireDefault(require("./ToggleIcon/ToggleIcon"));
var _excluded = ["dataHook", "children", "disabled", "size", "defaultSelected", "onClick", "selected", "ariaLabel", "ariaLabelledby"];
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/SegmentedToggle/SegmentedToggle.js";
class SegmentedToggle extends _react.default.Component {
  constructor() {
    super(...arguments);
    this.state = {
      selected: this.props.defaultSelected
    };
    this._onClick = evt => {
      var {
        onClick,
        selected
      } = this.props;
      var {
        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) => {
      var childrenNodesWithDividers = [];
      var isTransparent = (childNode1, childNode2) => childNode1.props.selected !== childNode2.props.selected;
      for (var i = 0; i < childrenNodes.length - 1; i++) {
        var childNode1 = childrenNodes[i];
        var childNode2 = childrenNodes[i + 1];
        var transparent = isTransparent(childNode1, childNode2);
        var divider = /*#__PURE__*/_react.default.createElement("div", {
          key: "divider-".concat(i),
          className: (0, _SegmentedToggleSt.st)(_SegmentedToggleSt.classes.divider, {
            disabled,
            transparent
          }),
          __self: this,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 68,
            columnNumber: 9
          }
        });
        childrenNodesWithDividers.push(childNode1, divider);
      }
      var lastChild = childrenNodes[childrenNodes.length - 1];
      childrenNodesWithDividers.push(lastChild);
      return childrenNodesWithDividers;
    };
  }
  render() {
    var _this$props = this.props,
      {
        dataHook,
        children,
        disabled,
        size,
        defaultSelected,
        onClick,
        selected,
        ariaLabel,
        ariaLabelledby
      } = _this$props,
      rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
    var selection = selected || this.state.selected;
    var childrenNodes = _react.default.Children.map(children, (child, index) => {
      var _child$props$disabled;
      var isDisabled = (_child$props$disabled = child.props.disabled) !== null && _child$props$disabled !== void 0 ? _child$props$disabled : disabled;
      return /*#__PURE__*/_react.default.cloneElement(child, {
        disabled: isDisabled,
        'data-click': "segmented-toggle-".concat(index + 1),
        'aria-checked': child.props.value === selection,
        role: 'radio',
        onClick: this._onClick,
        selected: child.props.value === selection,
        size,
        className: (0, _SegmentedToggleSt.st)(_SegmentedToggleSt.classes.toggleItem, {
          selected: child.props.value === selection,
          size
        })
      });
    });
    childrenNodes = this._addDividers(childrenNodes, disabled);
    return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
      role: "radiogroup",
      "aria-label": ariaLabel,
      "aria-labelledby": ariaLabelledby,
      "data-hook": dataHook,
      "data-size": size,
      className: (0, _SegmentedToggleSt.st)(_SegmentedToggleSt.classes.root, {
        disabled,
        size,
        selected
      }),
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 119,
        columnNumber: 7
      }
    }), childrenNodes);
  }
}
SegmentedToggle.displayName = 'SegmentedToggle';
SegmentedToggle.propTypes = {
  /** Applies a data-hook HTML attribute that can be used in the tests */
  dataHook: _propTypes.default.string,
  /** Specifies the initially selected option */
  defaultSelected: _propTypes.default.node,
  /** Specifies whether an option is selected */
  selected: _propTypes.default.node,
  /** Controls the size of the segmented toggle */
  size: _propTypes.default.oneOf(['medium', 'small']),
  /** Defines a callback function which is called every time option is clicked. Returns a selected element and its value. */
  onClick: _propTypes.default.func,
  /** Specifies whether interactions are disabled. */
  disabled: _propTypes.default.bool,
  /** Accepts <SegmentedToggle.Icon/> or <SegmentedToggle.Button/> as child items to list down available options */
  children: _propTypes.default.array.isRequired,
  /** Accessible label for the segmented toggle group */
  ariaLabel: _propTypes.default.string,
  /** ID of element that labels the segmented toggle group */
  ariaLabelledby: _propTypes.default.string
};
SegmentedToggle.defaultProps = {
  children: [],
  size: 'medium'
};
SegmentedToggle.Button = _ToggleButton.default;
SegmentedToggle.Icon = _ToggleIcon.default;
var _default = exports.default = SegmentedToggle;
//# sourceMappingURL=SegmentedToggle.js.map