@wix/design-system
Version:
@wix/design-system
242 lines (241 loc) • 8.65 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.AccordionItem = AccordionItem;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _Text = require("../../../Text");
var _Toggle = require("../../../Transition/Toggle");
var _AccordionItemCaret = require("../AccordionItemCaret");
var _constants = require("../../../Transition/constants");
var _constants2 = require("../../constants");
var _context = require("../../../WixDesignSystemProvider/context");
var _AccordionItem = require("./AccordionItem.classes");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/Accordion/components/AccordionItem/AccordionItem.tsx";
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 IconsContainer = _ref => {
var position = _ref.position,
toggleIconPlacement = _ref.toggleIconPlacement,
icon = _ref.icon,
iconDataHook = _ref.iconDataHook,
caretProps = _ref.caretProps;
var shouldShowToggleIcon = toggleIconPlacement === position;
return shouldShowToggleIcon || icon ? /*#__PURE__*/_react.default.createElement("div", {
className: _AccordionItem.classes.iconsContainer(),
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 33,
columnNumber: 5
}
}, shouldShowToggleIcon && position === 'start' && /*#__PURE__*/_react.default.createElement(_AccordionItemCaret.AccordionItemCaret, (0, _extends2.default)({}, caretProps, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 35,
columnNumber: 9
}
})), icon && /*#__PURE__*/_react.default.createElement("div", {
className: _AccordionItem.classes.affix(),
"data-hook": iconDataHook,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 38,
columnNumber: 9
}
}, icon), shouldShowToggleIcon && position === 'end' && /*#__PURE__*/_react.default.createElement(_AccordionItemCaret.AccordionItemCaret, (0, _extends2.default)({}, caretProps, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 43,
columnNumber: 9
}
}))) : null;
};
function AccordionItem(_ref2) {
var icon = _ref2.icon,
prefix = _ref2.prefix,
suffix = _ref2.suffix,
title = _ref2.title,
subtitle = _ref2.subtitle,
open = _ref2.open,
children = _ref2.children,
onToggle = _ref2.onToggle,
onMouseLeave = _ref2.onMouseLeave,
onMouseEnter = _ref2.onMouseEnter,
disabled = _ref2.disabled,
skin = _ref2.skin,
hideShadow = _ref2.hideShadow,
className = _ref2.className,
size = _ref2.size,
horizontalPadding = _ref2.horizontalPadding,
contentPadding = _ref2.contentPadding,
last = _ref2.last,
_ref2$transitionSpeed = _ref2.transitionSpeed,
transitionSpeed = _ref2$transitionSpeed === void 0 ? 'medium' : _ref2$transitionSpeed,
onAnimationEnter = _ref2.onAnimationEnter,
onAnimationExit = _ref2.onAnimationExit,
_ref2$buttonType = _ref2.buttonType,
buttonType = _ref2$buttonType === void 0 ? 'textButton' : _ref2$buttonType,
expandLabel = _ref2.expandLabel,
collapseLabel = _ref2.collapseLabel,
_ref2$toggleIconPlace = _ref2.toggleIconPlacement,
toggleIconPlacement = _ref2$toggleIconPlace === void 0 ? 'end' : _ref2$toggleIconPlace,
showLabel = _ref2.showLabel,
titleSize = _ref2.titleSize;
// needed for toggle button label visibility
var _useState = (0, _react.useState)(false),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
hover = _useState2[0],
setHover = _useState2[1];
var _useContext = (0, _react.useContext)(_context.WixDesignSystemContext),
mobile = _useContext.mobile;
var isLabelShown = !!(showLabel === 'always' || hover || mobile);
var caretProps = {
hover,
buttonType,
expandLabel,
collapseLabel,
showLabel,
isLabelShown,
open,
disabled,
skin
};
var caretWithLabel = buttonType === _constants2.BUTTON_TYPES.textButton && isLabelShown && !!(open ? collapseLabel : expandLabel);
var _onMouseLeave = e => {
setHover(false);
!disabled && onMouseLeave && onMouseLeave(e);
};
var _onMouseEnter = e => {
setHover(true);
!disabled && onMouseEnter && onMouseEnter(e);
};
return /*#__PURE__*/_react.default.createElement("div", {
"data-hook": _constants2.DATA_HOOKS.item,
className: _AccordionItem.classes.root({
disabled,
open,
skin,
hideShadow,
size,
horizontalPadding,
contentPadding,
last,
titleSize,
transitionSpeed,
caretWithLabel
}, className),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 113,
columnNumber: 5
}
}, /*#__PURE__*/_react.default.createElement("div", {
onClick: !disabled ? onToggle : () => {},
className: _AccordionItem.classes.header(),
"data-hook": _constants2.DATA_HOOKS.header,
onMouseEnter: _onMouseEnter,
onMouseLeave: _onMouseLeave,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 132,
columnNumber: 7
}
}, /*#__PURE__*/_react.default.createElement(IconsContainer, {
position: "start",
toggleIconPlacement: toggleIconPlacement,
icon: prefix || icon,
caretProps: caretProps,
iconDataHook: _constants2.DATA_HOOKS.prefix,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 139,
columnNumber: 9
}
}), /*#__PURE__*/_react.default.createElement("div", {
className: _AccordionItem.classes.titleWrapper(),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 146,
columnNumber: 9
}
}, title && /*#__PURE__*/_react.default.createElement("div", {
"data-hook": "titleContainer",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 148,
columnNumber: 13
}
}, typeof title === 'string' ? /*#__PURE__*/_react.default.createElement(_Text.Text, {
dataHook: "title",
ellipsis: true,
weight: "normal",
className: _AccordionItem.classes.title(),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 150,
columnNumber: 17
}
}, title) : title), subtitle && /*#__PURE__*/_react.default.createElement("div", {
"data-hook": _constants2.DATA_HOOKS.subtitle,
className: _AccordionItem.classes.subtitle(),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 164,
columnNumber: 13
}
}, typeof subtitle === 'string' ? /*#__PURE__*/_react.default.createElement(_Text.Text, {
size: "small",
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 166,
columnNumber: 17
}
}, subtitle) : subtitle)), /*#__PURE__*/_react.default.createElement(IconsContainer, {
position: "end",
toggleIconPlacement: toggleIconPlacement,
icon: suffix,
caretProps: caretProps,
iconDataHook: _constants2.DATA_HOOKS.suffix,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 173,
columnNumber: 9
}
})), /*#__PURE__*/_react.default.createElement(_Toggle.Toggle, {
show: open,
timeout: _constants.timingMap[transitionSpeed],
onStart: onAnimationEnter,
onEnd: onAnimationExit,
className: _AccordionItem.classes.panel(),
unmountOnExit: true,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 181,
columnNumber: 7
}
}, /*#__PURE__*/_react.default.createElement("div", {
"data-hook": "children",
className: _AccordionItem.classes.content(),
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 189,
columnNumber: 9
}
}, children)));
}
//# sourceMappingURL=AccordionItem.js.map