@wix/design-system/dist/cjs/SidePanel/components/Header/Header.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 _SidePanelAPI = require("../../SidePanelAPI");
var _HeaderSt = require("./Header.st.css.js");
var _constants = require("../../constants");
var _Heading = _interopRequireDefault(require("../../../Heading"));
var _Divider = _interopRequireDefault(require("../../../Divider"));
var _CloseButton = _interopRequireDefault(require("../../../CloseButton"));
var _Box = _interopRequireDefault(require("../../../Box"));
var _InfoIcon = _interopRequireDefault(require("../../../InfoIcon"));
var _Text = _interopRequireDefault(require("../../../Text"));
var _system = require("@wix/wix-ui-icons-common/system");
var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
var _Tooltip = _interopRequireDefault(require("../../../Tooltip"));
var _WixDesignSystemDefaultPropsProvider = require("../../../WixDesignSystemDefaultPropsProvider");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/SidePanel/components/Header/Header.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); }
class Header extends _react.PureComponent {
  renderStringTitle(skin) {
    var _this$props = this.props,
      title = _this$props.title,
      infoTooltipContent = _this$props.infoTooltipContent,
      infoTooltipProps = _this$props.infoTooltipProps,
      maxLines = _this$props.maxLines,
      ellipsis = _this$props.ellipsis;
    var headerProps = {
      placement: 'auto',
      ellipsis,
      maxLines,
      size: 'medium',
      as: 'h2',
      dataHook: _constants.dataHooks.sidePanelHeaderTitle
    };
    var HeaderText = () => skin === 'floating' ? /*#__PURE__*/_react.default.createElement(_Text.default, (0, _extends2.default)({
      className: _HeaderSt.classes.floatingTitle
    }, headerProps, {
      weight: "bold",
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 39,
        columnNumber: 9
      }
    }), title) : /*#__PURE__*/_react.default.createElement(_Heading.default, (0, _extends2.default)({
      className: _HeaderSt.classes.standardTitle
    }, headerProps, {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 43,
        columnNumber: 9
      }
    }), title);
    return /*#__PURE__*/_react.default.createElement(_Box.default, {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 49,
        columnNumber: 7
      }
    }, /*#__PURE__*/_react.default.createElement(HeaderText, {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 50,
        columnNumber: 9
      }
    }), infoTooltipContent && /*#__PURE__*/_react.default.createElement(_Box.default, {
      marginLeft: "tiny",
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 52,
        columnNumber: 11
      }
    }, /*#__PURE__*/_react.default.createElement(_InfoIcon.default, {
      dataHook: _constants.dataHooks.sidePanelHeaderTitleInfoIcon,
      content: infoTooltipContent,
      tooltipProps: infoTooltipProps,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 53,
        columnNumber: 13
      }
    })));
  }
  renderSubtitle() {
    var subtitle = this.props.subtitle;
    if (!subtitle) return null;
    var isStringSubtitle = typeof subtitle === 'string';
    if (!isStringSubtitle) {
      return subtitle;
    }
    return /*#__PURE__*/_react.default.createElement(_Text.default, {
      className: _HeaderSt.classes.subtitle,
      skin: "standard",
      secondary: true,
      dataHook: _constants.dataHooks.sidePanelHeaderSubtitle,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 75,
        columnNumber: 7
      }
    }, subtitle);
  }
  renderBackButton() {
    var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
      ariaLabel = _ref.ariaLabel,
      onClick = _ref.onClick,
      onMouseDown = _ref.onMouseDown,
      description = _ref.description,
      tooltipProps = _ref.tooltipProps;
    var backButton = /*#__PURE__*/_react.default.createElement(_CloseButton.default, {
      dataHook: _constants.dataHooks.sidePanelHeaderBackButton,
      className: _HeaderSt.classes.backButton,
      onClick: onClick,
      onMouseDown: onMouseDown,
      size: "large",
      skin: "dark",
      "aria-label": ariaLabel,
      children: /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.ChevronLeftLarge, {
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 102,
          columnNumber: 19
        }
      }),
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 94,
        columnNumber: 7
      }
    });
    if (description) {
      return /*#__PURE__*/_react.default.createElement(_Tooltip.default, (0, _extends2.default)({}, tooltipProps, {
        content: description,
        dataHook: _constants.dataHooks.sidePanelHeaderBackButtonTooltip,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 108,
          columnNumber: 9
        }
      }), backButton);
    }
    return backButton;
  }
  renderTitle(skin, backButtonProps, closeButtonProps, helpButtonProps) {
    var title = this.props.title;
    var isStringTitle = typeof title === 'string';
    return /*#__PURE__*/_react.default.createElement("div", {
      className: (0, _HeaderSt.st)(_HeaderSt.classes.titleContainer, {
        noCloseButton: !(closeButtonProps != null && closeButtonProps.onClick)
      }),
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 131,
        columnNumber: 7
      }
    }, this.props.prefix && /*#__PURE__*/_react.default.createElement("div", {
      "data-hook": _constants.dataHooks.sidePanelHeaderPrefix,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 137,
        columnNumber: 11
      }
    }, this.props.prefix), (backButtonProps == null ? void 0 : backButtonProps.onClick) && this.renderBackButton(backButtonProps), /*#__PURE__*/_react.default.createElement("div", {
      className: _HeaderSt.classes.title,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 144,
        columnNumber: 9
      }
    }, isStringTitle ? this.renderStringTitle(skin) : title, this.renderSubtitle()), this.renderButtons(closeButtonProps, helpButtonProps));
  }
  renderButtons(closeButtonProps, helpButtonProps) {
    var _helpButtonProps$size, _helpButtonProps$skin, _closeButtonProps$siz, _closeButtonProps$ski;
    if (!(closeButtonProps != null && closeButtonProps.onClick) && !(helpButtonProps != null && helpButtonProps.onClick) && !this.props.suffix) {
      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
    }
    return /*#__PURE__*/_react.default.createElement("div", {
      className: _HeaderSt.classes.buttonBox,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 167,
        columnNumber: 7
      }
    }, this.props.suffix && /*#__PURE__*/_react.default.createElement("div", {
      "data-hook": _constants.dataHooks.sidePanelHeaderSuffix,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 169,
        columnNumber: 11
      }
    }, this.props.suffix), (helpButtonProps == null ? void 0 : helpButtonProps.onClick) && /*#__PURE__*/_react.default.createElement(_CloseButton.default, {
      dataHook: _constants.dataHooks.sidePanelHeaderHelpButton,
      className: _HeaderSt.classes.helpButton,
      onClick: helpButtonProps.onClick,
      onMouseDown: helpButtonProps.onMouseDown,
      size: (_helpButtonProps$size = helpButtonProps.size) !== null && _helpButtonProps$size !== void 0 ? _helpButtonProps$size : 'medium',
      skin: (_helpButtonProps$skin = helpButtonProps.skin) !== null && _helpButtonProps$skin !== void 0 ? _helpButtonProps$skin : 'dark',
      "aria-label": helpButtonProps.ariaLabel,
      children: /*#__PURE__*/_react.default.createElement(_system.Help24, {
        className: _HeaderSt.classes.helpIcon,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 183,
          columnNumber: 23
        }
      }),
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 175,
        columnNumber: 11
      }
    }), (closeButtonProps == null ? void 0 : closeButtonProps.onClick) && /*#__PURE__*/_react.default.createElement(_CloseButton.default, {
      dataHook: _constants.dataHooks.sidePanelHeaderCloseButton,
      className: _HeaderSt.classes.closeButton,
      onClick: closeButtonProps.onClick,
      onMouseDown: closeButtonProps.onMouseDown,
      size: (_closeButtonProps$siz = closeButtonProps.size) !== null && _closeButtonProps$siz !== void 0 ? _closeButtonProps$siz : 'medium',
      "aria-label": closeButtonProps.ariaLabel,
      skin: (_closeButtonProps$ski = closeButtonProps.skin) !== null && _closeButtonProps$ski !== void 0 ? _closeButtonProps$ski : 'dark',
      autoFocus: closeButtonProps.autoFocus,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 187,
        columnNumber: 11
      }
    }));
  }
  render() {
    var _this$props2 = this.props,
      children = _this$props2.children,
      showDivider = _this$props2.showDivider,
      className = _this$props2.className;
    return /*#__PURE__*/_react.default.createElement(_SidePanelAPI.SidePanelContext.Consumer, {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 205,
        columnNumber: 7
      }
    }, _ref2 => {
      var skin = _ref2.skin,
        isDraggable = _ref2.isDraggable,
        backButtonProps = _ref2.backButtonProps,
        closeButtonProps = _ref2.closeButtonProps,
        helpButtonProps = _ref2.helpButtonProps;
      return /*#__PURE__*/_react.default.createElement("div", {
        className: (0, _HeaderSt.st)(_HeaderSt.classes.root, {
          skin,
          isDraggable
        }, className),
        "data-hook": _constants.dataHooks.sidePanelHeader,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 213,
          columnNumber: 11
        }
      }, this.renderTitle(skin, backButtonProps, closeButtonProps, helpButtonProps), children, showDivider && /*#__PURE__*/_react.default.createElement(_Divider.default, {
        className: _HeaderSt.classes.divider,
        dataHook: _constants.dataHooks.sidePanelHeaderDivider,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 225,
          columnNumber: 15
        }
      }));
    });
  }
}
Header.displayName = 'SidePanel.Header';
Header.defaultProps = {
  showDivider: true
};
var _default = exports.default = (0, _WixDesignSystemDefaultPropsProvider.withDefaultProps)(Header, 'SidePanel.Header');
//# sourceMappingURL=Header.js.map