@wix/design-system
Version:
@wix/design-system
257 lines (256 loc) • 8.7 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
exports.__esModule = true;
exports.SelectableAccordionItem = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _Checkbox = require("../../Checkbox");
var _ToggleSwitch = require("../../ToggleSwitch");
var _Radio = require("../../Radio");
var _Text = require("../../Text");
var _Collapse = require("../../Collapse");
var _Divider = require("../../Divider");
var _Tooltip = require("../../Tooltip");
var _constants = require("../constants");
var _StringUtils = require("../../utils/StringUtils");
var _useHover2 = require("../../common/useHover");
var _ItemSt = require("./Item.st.css.js");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/SelectableAccordion/Item/Item.jsx",
_this = void 0;
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var renderTitle = function renderTitle(title, disabled) {
if ((0, _StringUtils.isString)(title)) {
return /*#__PURE__*/_react["default"].createElement(_Text.Text, {
weight: "normal",
size: "medium",
skin: disabled ? 'disabled' : 'standard',
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 17,
columnNumber: 7
}
}, title);
}
return title;
};
var renderSubtitle = function renderSubtitle(subtitle, disabled) {
return (0, _StringUtils.isString)(subtitle) ? /*#__PURE__*/_react["default"].createElement(_Text.Text, {
ellipsis: true,
size: "small",
weight: "thin",
skin: disabled ? 'disabled' : 'standard',
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 31,
columnNumber: 5
}
}, subtitle) : subtitle;
};
var renderContent = function renderContent(content) {
return (0, _StringUtils.isString)(content) ? /*#__PURE__*/_react["default"].createElement(_Text.Text, {
className: _ItemSt.classes.text,
size: "small",
weight: "thin",
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 45,
columnNumber: 5
}
}, content) : content;
};
var renderSelector = function renderSelector(_ref) {
var type = _ref.type,
open = _ref.open,
disabled = _ref.disabled,
onChange = _ref.onChange;
var selector = null;
switch (type) {
case _constants.TYPES.CHECKBOX:
selector = /*#__PURE__*/_react["default"].createElement(_Checkbox.Checkbox, {
checked: open,
onChange: onChange,
disabled: disabled,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 58,
columnNumber: 9
}
});
break;
case _constants.TYPES.RADIO:
selector = /*#__PURE__*/_react["default"].createElement(_Radio.Radio, {
checked: open,
onChange: onChange,
disabled: disabled,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 63,
columnNumber: 9
}
});
break;
case _constants.TYPES.TOGGLE:
selector = /*#__PURE__*/_react["default"].createElement(_ToggleSwitch.ToggleSwitch, {
checked: open,
onChange: onChange,
size: "small",
disabled: disabled,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 68,
columnNumber: 9
}
});
break;
default:
break;
}
return /*#__PURE__*/_react["default"].createElement("span", {
className: _ItemSt.classes.selectorToggle,
onClick: function onClick(e) {
return e.stopPropagation();
},
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 80,
columnNumber: 5
}
}, selector);
};
var SelectableAccordionItem = exports.SelectableAccordionItem = function SelectableAccordionItem(_ref2) {
var _ref2$type = _ref2.type,
type = _ref2$type === void 0 ? 'toggle' : _ref2$type,
_ref2$onChange = _ref2.onChange,
onChange = _ref2$onChange === void 0 ? function () {} : _ref2$onChange,
idx = _ref2.idx,
open = _ref2.open,
disabled = _ref2.disabled,
tooltipContent = _ref2.tooltipContent,
verticalPadding = _ref2.verticalPadding,
title = _ref2.title,
subtitle = _ref2.subtitle,
content = _ref2.content;
var tooltipRef = (0, _react.useRef)(null);
var _useHover = (0, _useHover2.useHover)({
onHoverStart: function onHoverStart() {
var _tooltipRef$current;
return (_tooltipRef$current = tooltipRef.current) == null ? void 0 : _tooltipRef$current.open();
},
onHoverEnd: function onHoverEnd() {
var _tooltipRef$current2;
return (_tooltipRef$current2 = tooltipRef.current) == null ? void 0 : _tooltipRef$current2.close();
}
}),
hovered = _useHover.hovered,
hoverProps = _useHover.hoverProps;
var handleChange = (0, _react.useCallback)(function (event) {
if (disabled) {
return;
}
if (type === 'radio' && open) {
return;
}
onChange(event, idx, !open);
}, [disabled, type, open, onChange, idx]);
var hasTooltip = tooltipContent !== undefined && tooltipContent !== null;
var selector = renderSelector({
type: type,
open: open,
disabled: disabled,
onChange: handleChange
});
return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, hoverProps, {
"data-hook": _constants.dataHooks.item,
"data-state": open ? 'open' : 'collapsed',
"data-disabled": disabled,
className: (0, _ItemSt.st)(_ItemSt.classes.item, {
hovered: !open && hovered,
verticalPadding: verticalPadding,
disabled: disabled
}),
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 128,
columnNumber: 5
}
}), /*#__PURE__*/_react["default"].createElement("div", {
onClick: handleChange,
className: _ItemSt.classes.selector,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 139,
columnNumber: 7
}
}, hasTooltip ? /*#__PURE__*/_react["default"].createElement(_Tooltip.Tooltip, {
ref: tooltipRef,
dataHook: _constants.dataHooks.itemTooltip,
content: tooltipContent,
className: _ItemSt.classes.tooltip,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 141,
columnNumber: 11
}
}, selector) : selector), /*#__PURE__*/_react["default"].createElement("div", {
"data-hook": _constants.dataHooks.itemHeader,
onClick: handleChange,
className: _ItemSt.classes.header,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 153,
columnNumber: 7
}
}, renderTitle(title, disabled), renderSubtitle(subtitle, disabled)), /*#__PURE__*/_react["default"].createElement("div", {
className: _ItemSt.classes.content,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 161,
columnNumber: 7
}
}, content ? /*#__PURE__*/_react["default"].createElement(_Collapse.Collapse, {
open: open,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 163,
columnNumber: 11
}
}, /*#__PURE__*/_react["default"].createElement("div", {
className: _ItemSt.classes.inner,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 164,
columnNumber: 13
}
}, renderContent(content))) : null, /*#__PURE__*/_react["default"].createElement("div", {
className: _ItemSt.classes.divider,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 167,
columnNumber: 9
}
}, /*#__PURE__*/_react["default"].createElement(_Divider.Divider, {
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 168,
columnNumber: 11
}
}))));
};
SelectableAccordionItem.displayName = 'SelectableAccordionItem';