@wix/design-system
Version:
@wix/design-system
75 lines (74 loc) • 2.93 kB
JavaScript
;
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 _ToggleButtonSt = require("./ToggleButton.st.css.js");
var _useFocusRing2 = require("../../providers/useFocusRing/useFocusRing");
var _Text = _interopRequireDefault(require("../../Text"));
var _excluded = ["children", "prefixIcon", "selected", "size", "dataHook", "focusableOnFocus", "focusableOnBlur", "disabled", "className", "role", "aria-checked"];
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/SegmentedToggle/ToggleButton/ToggleButton.jsx",
_this = void 0;
var addPrefix = function addPrefix(icon, size) {
var dimension = size === 'small' || size === 'tiny' ? '18' : '24';
return icon && /*#__PURE__*/_react["default"].cloneElement(icon, {
width: dimension,
height: dimension,
className: (0, _ToggleButtonSt.st)(_ToggleButtonSt.classes.prefix, {
size: size
})
});
};
var ToggleButton = function ToggleButton(_ref) {
var children = _ref.children,
prefixIcon = _ref.prefixIcon,
selected = _ref.selected,
size = _ref.size,
dataHook = _ref.dataHook,
focusableOnFocus = _ref.focusableOnFocus,
focusableOnBlur = _ref.focusableOnBlur,
disabled = _ref.disabled,
className = _ref.className,
role = _ref.role,
ariaChecked = _ref['aria-checked'],
rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
var _useFocusRing = (0, _useFocusRing2.useFocusRing)(),
focusProps = _useFocusRing.focusProps;
return /*#__PURE__*/_react["default"].createElement("button", (0, _extends2["default"])({}, rest, {
role: role,
className: (0, _ToggleButtonSt.st)(_ToggleButtonSt.classes.root, {
selected: selected,
size: size,
disabled: disabled
}, className),
"data-hook": dataHook,
"data-selected": selected,
"aria-checked": ariaChecked,
disabled: disabled,
type: "button"
}, focusProps, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 35,
columnNumber: 5
}
}), addPrefix(prefixIcon, size), /*#__PURE__*/_react["default"].createElement(_Text["default"], {
className: (0, _ToggleButtonSt.st)(_ToggleButtonSt.classes.label),
ellipsis: true,
size: size,
weight: "thin",
disabled: disabled,
skin: disabled ? 'disabled' : 'standard',
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 47,
columnNumber: 7
}
}, children));
};
ToggleButton.displayName = 'SegmentedToggle.Button';
var _default = exports["default"] = ToggleButton;