@wix/design-system
Version:
@wix/design-system
113 lines (112 loc) • 3.52 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,
dataHook,
prefixIcon,
suffixIcon,
size,
baseSkin,
disabled,
id,
tabIndex,
skin,
selected,
onChange,
'aria-controls': ariaControls,
focusableOnFocus,
focusableOnBlur
} = _ref;
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: 58,
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: 80,
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: 95,
columnNumber: 9
}
}, prefixIcon), /*#__PURE__*/_react.default.createElement(_.Text, {
className: _VerticalTabsItemSt.classes.text,
weight: "thin",
size: size === _VerticalTabs.SIZE.TINY ? _VerticalTabs.SIZE.SMALL : size,
dataHook: _VerticalTabsItem.DATA_HOOKS.ITEM_TEXT,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 103,
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: 112,
columnNumber: 9
}
}, suffixIcon)));
};
exports.SelectableItem = SelectableItem;
//# sourceMappingURL=SelectableItem.js.map