@wix/design-system
Version:
@wix/design-system
113 lines (112 loc) • 3.79 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.SelectableItem = void 0;
var _react = _interopRequireDefault(require("react"));
var _VerticalTabsItemSt = require("../VerticalTabsItem.st.css.js");
var _Affix = require("./Affix");
var _VerticalTabsItem = require("../VerticalTabsItem.constants");
var _ = require("../..");
var _VerticalTabs = require("../../VerticalTabs/VerticalTabs.constants");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/VerticalTabsItem/components/SelectableItem.tsx";
var SelectableItem = _ref => {
var children = _ref.children,
dataHook = _ref.dataHook,
prefixIcon = _ref.prefixIcon,
suffixIcon = _ref.suffixIcon,
size = _ref.size,
baseSkin = _ref.baseSkin,
disabled = _ref.disabled,
id = _ref.id,
tabIndex = _ref.tabIndex,
skin = _ref.skin,
ellipsis = _ref.ellipsis,
selected = _ref.selected,
onChange = _ref.onChange,
ariaControls = _ref['aria-controls'],
focusableOnFocus = _ref.focusableOnFocus,
focusableOnBlur = _ref.focusableOnBlur;
var onKeyDown = e => {
if (e.key === ' ' || e.key === 'Space' || e.key === 'Enter') {
e.preventDefault();
if (id !== undefined) {
onChange == null || onChange(id);
}
}
};
return /*#__PURE__*/_react.default.createElement("div", {
className: (0, _VerticalTabsItemSt.st)(_VerticalTabsItemSt.classes.wrapper, (0, _VerticalTabsItemSt.cssStates)({
disabled,
baseSkin,
skin,
selected
})),
id: String(id),
role: "tab",
"data-hook": dataHook,
tabIndex: tabIndex,
"aria-selected": selected,
"aria-disabled": disabled,
"aria-controls": ariaControls,
onFocus: focusableOnFocus,
onBlur: focusableOnBlur,
onClick: !disabled && id !== undefined ? () => onChange == null ? void 0 : onChange(id) : undefined,
onKeyDown: !disabled ? e => onKeyDown(e) : undefined,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 60,
columnNumber: 5
}
}, /*#__PURE__*/_react.default.createElement("div", {
className: (0, _VerticalTabsItemSt.st)(_VerticalTabsItemSt.classes.root, _VerticalTabsItemSt.classes.selectableItem, (0, _VerticalTabsItemSt.cssStates)({
disabled,
size,
baseSkin,
skin,
suffixIcon: !!suffixIcon,
prefixIcon: !!prefixIcon,
selected
})),
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 82,
columnNumber: 7
}
}, /*#__PURE__*/_react.default.createElement(_Affix.Affix, {
dataHook: _VerticalTabsItem.DATA_HOOKS.ITEM_PREFIX_ICON,
size: size,
className: (0, _VerticalTabsItemSt.st)(_VerticalTabsItemSt.classes.prefixIcon),
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 97,
columnNumber: 9
}
}, prefixIcon), /*#__PURE__*/_react.default.createElement(_.Text, {
className: _VerticalTabsItemSt.classes.text,
weight: "thin",
ellipsis: ellipsis,
size: size === _VerticalTabs.SIZE.TINY ? _VerticalTabs.SIZE.SMALL : size,
dataHook: _VerticalTabsItem.DATA_HOOKS.ITEM_TEXT,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 105,
columnNumber: 9
}
}, children), /*#__PURE__*/_react.default.createElement(_Affix.Affix, {
dataHook: _VerticalTabsItem.DATA_HOOKS.ITEM_SUFFIX_ICON,
size: size,
className: _VerticalTabsItemSt.classes.suffixIcon,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 115,
columnNumber: 9
}
}, suffixIcon)));
};
exports.SelectableItem = SelectableItem;
//# sourceMappingURL=SelectableItem.js.map