UNPKG

@wix/design-system

Version:

@wix/design-system

117 lines (116 loc) 5.43 kB
"use strict"; var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); exports.__esModule = true; exports["default"] = void 0; 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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")); var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties")); var _react = _interopRequireDefault(require("react")); var _Focusable = require("../../common/Focusable"); var _Tooltip = _interopRequireDefault(require("../../Tooltip")); var _ToggleIconSt = require("./ToggleIcon.st.css.js"); var _excluded = ["data-click", "selected", "size", "onClick", "focusableOnFocus", "focusableOnBlur", "children", "className", "role", "aria-checked"], _excluded2 = ["children", "selected", "size", "tooltipText", "tooltipProps", "focusableOnFocus", "focusableOnBlur", "onClick", "dataHook", "data-click", "role", "aria-checked"]; var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/SegmentedToggle/ToggleIcon/ToggleIcon.jsx", _this = void 0; 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 Icon = function Icon(_ref) { var dataClick = _ref['data-click'], selected = _ref.selected, size = _ref.size, onClick = _ref.onClick, focusableOnFocus = _ref.focusableOnFocus, focusableOnBlur = _ref.focusableOnBlur, children = _ref.children, className = _ref.className, role = _ref.role, ariaChecked = _ref['aria-checked'], rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded); return /*#__PURE__*/_react["default"].createElement("button", (0, _extends2["default"])({}, rest, { role: role, className: (0, _ToggleIconSt.st)(_ToggleIconSt.classes.button, { size: size, selected: selected }, className), "data-click": dataClick, "data-hook": "toggle-icon", "data-selected": selected, "aria-checked": ariaChecked, onClick: onClick, onFocus: focusableOnFocus, onBlur: focusableOnBlur, type: "button", __self: _this, __source: { fileName: _jsxFileName, lineNumber: 20, columnNumber: 3 } }), children); }; var FocusableIcon = (0, _Focusable.withFocusable)(Icon); var ToggleIcon = /*#__PURE__*/function (_React$Component) { function ToggleIcon() { (0, _classCallCheck2["default"])(this, ToggleIcon); return _callSuper(this, ToggleIcon, arguments); } (0, _inherits2["default"])(ToggleIcon, _React$Component); return (0, _createClass2["default"])(ToggleIcon, [{ key: "render", value: function render() { var _this$props = this.props, children = _this$props.children, selected = _this$props.selected, size = _this$props.size, tooltipText = _this$props.tooltipText, tooltipProps = _this$props.tooltipProps, focusableOnFocus = _this$props.focusableOnFocus, focusableOnBlur = _this$props.focusableOnBlur, onClick = _this$props.onClick, dataHook = _this$props.dataHook, dataClick = _this$props['data-click'], role = _this$props.role, ariaChecked = _this$props['aria-checked'], rest = (0, _objectWithoutProperties2["default"])(_this$props, _excluded2); return /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], (0, _extends2["default"])({ appendTo: "window", placement: "top", timeout: 0 }, tooltipProps, { content: tooltipText, className: (0, _ToggleIconSt.st)(_ToggleIconSt.classes.tooltip), dataHook: dataHook, __self: this, __source: { fileName: _jsxFileName, lineNumber: 59, columnNumber: 7 } }), /*#__PURE__*/_react["default"].createElement(FocusableIcon, (0, _extends2["default"])({}, rest, { size: size, selected: selected, "data-click": dataClick, role: role, "aria-checked": ariaChecked, onClick: onClick, onFocus: focusableOnFocus, onBlur: focusableOnBlur, __self: this, __source: { fileName: _jsxFileName, lineNumber: 68, columnNumber: 9 } }), children ? /*#__PURE__*/_react["default"].cloneElement(children, { size: size === 'small' || size === 'tiny' ? '18px' : '24px' }) : null)); } }]); }(_react["default"].Component); ToggleIcon.displayName = 'SegmentedToggle.Icon'; var _default = exports["default"] = ToggleIcon;