@wix/design-system/dist/cjs/Accordion/components/AccordionItem/AccordionItem.js

@wix/design-system

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _Text = _interopRequireDefault(require("../../../Text"));
var _Toggle = _interopRequireDefault(require("../../../Transition/Toggle"));
var _AccordionItemCaret = _interopRequireDefault(require("../AccordionItemCaret"));
var _constants = require("../../../Transition/constants");
var _constants2 = require("../../constants");
var _AccordionItemSt = require("./AccordionItem.st.css.js");
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,
    toggleIconPlacement,
    icon,
    iconDataHook,
    caretProps
  } = _ref;
  var shouldShowToggleIcon = toggleIconPlacement === position;
  return shouldShowToggleIcon || icon ? /*#__PURE__*/_react.default.createElement("div", {
    className: _AccordionItemSt.classes.iconsContainer,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 32,
      columnNumber: 5
    }
  }, shouldShowToggleIcon && position === 'start' && /*#__PURE__*/_react.default.createElement(_AccordionItemCaret.default, (0, _extends2.default)({}, caretProps, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 34,
      columnNumber: 9
    }
  })), icon && /*#__PURE__*/_react.default.createElement("div", {
    className: _AccordionItemSt.classes.affix,
    "data-hook": iconDataHook,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 37,
      columnNumber: 9
    }
  }, icon), shouldShowToggleIcon && position === 'end' && /*#__PURE__*/_react.default.createElement(_AccordionItemCaret.default, (0, _extends2.default)({}, caretProps, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 42,
      columnNumber: 9
    }
  }))) : null;
};
function AccordionItem(_ref2) {
  var {
    icon,
    prefix,
    suffix,
    title,
    subtitle,
    open,
    children,
    onToggle,
    onMouseLeave,
    onMouseEnter,
    disabled,
    skin,
    hideShadow,
    className,
    size,
    horizontalPadding,
    contentPadding,
    last,
    transitionSpeed = 'medium',
    onAnimationEnter,
    onAnimationExit,
    buttonType = 'textButton',
    expandLabel,
    collapseLabel,
    toggleIconPlacement = 'end',
    showLabel,
    titleSize
  } = _ref2;
  // needed for toggle button label visibility
  var [hover, setHover] = (0, _react.useState)(false);
  var caretProps = {
    hover,
    buttonType,
    expandLabel,
    collapseLabel,
    showLabel,
    open,
    disabled,
    skin
  };
  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.dataHooks.item,
    className: (0, _AccordionItemSt.st)(_AccordionItemSt.classes.root, {
      disabled,
      open,
      skin,
      hideShadow,
      size,
      horizontalPadding,
      contentPadding,
      last,
      titleSize
    }, className),
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 102,
      columnNumber: 5
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    onClick: !disabled ? onToggle : () => {},
    className: (0, _AccordionItemSt.st)(_AccordionItemSt.classes.header, {
      size
    }),
    "data-hook": _constants2.dataHooks.header,
    onMouseEnter: _onMouseEnter,
    onMouseLeave: _onMouseLeave,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 120,
      columnNumber: 7
    }
  }, /*#__PURE__*/_react.default.createElement(IconsContainer, {
    position: "start",
    toggleIconPlacement: toggleIconPlacement,
    icon: prefix || icon,
    caretProps: caretProps,
    iconDataHook: _constants2.dataHooks.prefix,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 127,
      columnNumber: 9
    }
  }), /*#__PURE__*/_react.default.createElement("div", {
    className: _AccordionItemSt.classes.titleWrapper,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 134,
      columnNumber: 9
    }
  }, title && /*#__PURE__*/_react.default.createElement("div", {
    "data-hook": "titleContainer",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 136,
      columnNumber: 13
    }
  }, typeof title === 'string' ? /*#__PURE__*/_react.default.createElement(_Text.default, {
    dataHook: "title",
    ellipsis: true,
    weight: "normal",
    className: _AccordionItemSt.classes.title,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 138,
      columnNumber: 17
    }
  }, title) : title), subtitle && /*#__PURE__*/_react.default.createElement("div", {
    "data-hook": _constants2.dataHooks.subtitle,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 152,
      columnNumber: 13
    }
  }, typeof subtitle === 'string' ? /*#__PURE__*/_react.default.createElement(_Text.default, {
    size: "small",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 154,
      columnNumber: 17
    }
  }, subtitle) : subtitle)), /*#__PURE__*/_react.default.createElement(IconsContainer, {
    position: "end",
    toggleIconPlacement: toggleIconPlacement,
    icon: suffix,
    caretProps: caretProps,
    iconDataHook: _constants2.dataHooks.suffix,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 161,
      columnNumber: 9
    }
  })), /*#__PURE__*/_react.default.createElement(_Toggle.default, {
    show: open,
    timeout: _constants.timingMap[transitionSpeed],
    onStart: onAnimationEnter,
    onEnd: onAnimationExit,
    unmountOnExit: true,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 169,
      columnNumber: 7
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    "data-hook": "children",
    className: _AccordionItemSt.classes.children,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 176,
      columnNumber: 9
    }
  }, children)));
}
var _default = exports.default = AccordionItem;
//# sourceMappingURL=AccordionItem.js.map