wix-style-react/dist/src/SegmentedToggle/SegmentedToggle.js

wix-style-react

"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");
var _ToggleButton = _interopRequireDefault(require("./ToggleButton/ToggleButton"));
var _ToggleIcon = _interopRequireDefault(require("./ToggleIcon/ToggleIcon"));
var _context = require("../WixStyleReactProvider/context");
var _excluded = ["dataHook", "children", "disabled", "size", "defaultSelected", "onClick", "selected"];
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/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 (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: 62,
            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
      } = _this$props,
      rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
    var selection = selected || this.state.selected;
    var childrenNodes = _react.default.Children.map(children, (child, index) => /*#__PURE__*/_react.default.cloneElement(child, {
      disabled,
      'data-click': "segmented-toggle-".concat(index + 1),
      'aria-selected': child.props.value === selection,
      onClick: this._onClick,
      selected: child.props.value === selection,
      size
    }));
    childrenNodes = this._addDividers(childrenNodes, disabled);
    return /*#__PURE__*/_react.default.createElement(_context.WixStyleReactContext.Consumer, {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 106,
        columnNumber: 7
      }
    }, _ref => {
      var {
        newColorsBranding
      } = _ref;
      return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
        "data-hook": dataHook,
        "data-size": size,
        className: (0, _SegmentedToggleSt.st)(_SegmentedToggleSt.classes.root, {
          disabled,
          size,
          newColorsBranding
        }),
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 108,
          columnNumber: 11
        }
      }), 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
};
SegmentedToggle.defaultProps = {
  children: [],
  size: 'medium'
};
SegmentedToggle.Button = _ToggleButton.default;
SegmentedToggle.Icon = _ToggleIcon.default;
var _default = exports.default = SegmentedToggle;
//# sourceMappingURL=SegmentedToggle.js.map