@wix/design-system
Version:
@wix/design-system
145 lines (144 loc) • 6.68 kB
JavaScript
"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 _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _react = _interopRequireDefault(require("react"));
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", "fullWidth"];
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/SegmentedToggle/SegmentedToggle.jsx";
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
var SegmentedToggle = /*#__PURE__*/function (_React$Component) {
function SegmentedToggle() {
var _this;
(0, _classCallCheck2["default"])(this, SegmentedToggle);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _callSuper(this, SegmentedToggle, [].concat(args));
_this.state = {
selected: _this.props.defaultSelected
};
_this._onClick = function (evt) {
var _this$props = _this.props,
onClick = _this$props.onClick,
selected = _this$props.selected;
var value = evt.currentTarget.value;
if (evt.currentTarget.disabled) {
return;
}
if (selected) {
return onClick && onClick(evt, value);
}
_this.setState({
selected: value
}, function () {
return onClick && onClick(evt, value);
});
};
_this._addDividers = function (childrenNodes, disabled) {
var childrenNodesWithDividers = [];
var isTransparent = function isTransparent(childNode1, childNode2) {
return 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: disabled,
transparent: transparent
}),
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 45,
columnNumber: 9
}
});
childrenNodesWithDividers.push(childNode1, divider);
}
var lastChild = childrenNodes[childrenNodes.length - 1];
childrenNodesWithDividers.push(lastChild);
return childrenNodesWithDividers;
};
return _this;
}
(0, _inherits2["default"])(SegmentedToggle, _React$Component);
return (0, _createClass2["default"])(SegmentedToggle, [{
key: "render",
value: function render() {
var _this2 = this;
var _this$props2 = this.props,
dataHook = _this$props2.dataHook,
children = _this$props2.children,
disabled = _this$props2.disabled,
size = _this$props2.size,
defaultSelected = _this$props2.defaultSelected,
onClick = _this$props2.onClick,
selected = _this$props2.selected,
ariaLabel = _this$props2.ariaLabel,
ariaLabelledby = _this$props2.ariaLabelledby,
fullWidth = _this$props2.fullWidth,
rest = (0, _objectWithoutProperties2["default"])(_this$props2, _excluded);
var selection = selected || this.state.selected;
var childrenNodes = _react["default"].Children.map(children, function (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: _this2._onClick,
selected: child.props.value === selection,
size: size,
className: (0, _SegmentedToggleSt.st)(_SegmentedToggleSt.classes.toggleItem, {
selected: child.props.value === selection,
size: 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: disabled,
size: size,
selected: selected,
fullWidth: fullWidth
}),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 97,
columnNumber: 7
}
}), childrenNodes);
}
}]);
}(_react["default"].Component);
SegmentedToggle.displayName = 'SegmentedToggle';
SegmentedToggle.defaultProps = {
children: [],
size: 'medium',
fullWidth: false
};
SegmentedToggle.Button = _ToggleButton["default"];
SegmentedToggle.Icon = _ToggleIcon["default"];
var _default = exports["default"] = SegmentedToggle;