@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 _propTypes = _interopRequireDefault(require("prop-types"));
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 _TooltipCommon = require("../../../common/PropTypes/TooltipCommon");
var _system = require("@wix/wix-ui-icons-common/system");
var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
var _Tooltip = _interopRequireDefault(require("../../../Tooltip"));
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 {
      title,
      infoTooltipContent,
      infoTooltipProps,
      maxLines,
      ellipsis
    } = this.props;
    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: 53,
        columnNumber: 9
      }
    }), title) : /*#__PURE__*/_react.default.createElement(_Heading.default, (0, _extends2.default)({}, headerProps, {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 57,
        columnNumber: 9
      }
    }), title);
    return /*#__PURE__*/_react.default.createElement(_Box.default, {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 61,
        columnNumber: 7
      }
    }, /*#__PURE__*/_react.default.createElement(HeaderText, {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 62,
        columnNumber: 9
      }
    }), infoTooltipContent && /*#__PURE__*/_react.default.createElement(_Box.default, {
      marginLeft: "tiny",
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 64,
        columnNumber: 11
      }
    }, /*#__PURE__*/_react.default.createElement(_InfoIcon.default, {
      dataHook: _constants.dataHooks.sidePanelHeaderTitleInfoIcon,
      content: infoTooltipContent,
      tooltipProps: infoTooltipProps,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 65,
        columnNumber: 13
      }
    })));
  }
  renderSubtitle() {
    var {
      subtitle
    } = this.props;
    if (!subtitle) return null;
    var isStringSubtitle = typeof subtitle === 'string';
    if (!isStringSubtitle) {
      return subtitle;
    }
    return /*#__PURE__*/_react.default.createElement(_Text.default, {
      skin: "standard",
      secondary: true,
      dataHook: _constants.dataHooks.sidePanelHeaderSubtitle,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 87,
        columnNumber: 7
      }
    }, subtitle);
  }
  renderBackButton() {
    var {
      ariaLabel,
      onClick,
      description,
      tooltipProps
    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
    var backButton = /*#__PURE__*/_react.default.createElement(_CloseButton.default, {
      dataHook: _constants.dataHooks.sidePanelHeaderBackButton,
      className: _HeaderSt.classes.backButton,
      onClick: onClick,
      size: "large",
      skin: "dark",
      "aria-label": ariaLabel,
      children: /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.ChevronLeftLarge, {
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 111,
          columnNumber: 19
        }
      }),
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 104,
        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: 117,
          columnNumber: 9
        }
      }), backButton);
    }
    return backButton;
  }
  renderTitle(skin, backButtonProps, closeButtonProps, helpButtonProps) {
    var {
      title
    } = this.props;
    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: 140,
        columnNumber: 7
      }
    }, this.props.prefix && /*#__PURE__*/_react.default.createElement("div", {
      "data-hook": _constants.dataHooks.sidePanelHeaderPrefix,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 146,
        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: 153,
        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: 176,
        columnNumber: 7
      }
    }, this.props.suffix && /*#__PURE__*/_react.default.createElement("div", {
      "data-hook": _constants.dataHooks.sidePanelHeaderSuffix,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 178,
        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,
      size: (_helpButtonProps$size = helpButtonProps.size) !== null && _helpButtonProps$size !== void 0 ? _helpButtonProps$size : 'large',
      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: 191,
          columnNumber: 23
        }
      }),
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 184,
        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,
      size: (_closeButtonProps$siz = closeButtonProps.size) !== null && _closeButtonProps$siz !== void 0 ? _closeButtonProps$siz : 'large',
      "aria-label": closeButtonProps.ariaLabel,
      skin: (_closeButtonProps$ski = closeButtonProps.skin) !== null && _closeButtonProps$ski !== void 0 ? _closeButtonProps$ski : 'dark',
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 195,
        columnNumber: 11
      }
    }));
  }
  render() {
    var {
      children,
      showDivider,
      className
    } = this.props;
    return /*#__PURE__*/_react.default.createElement(_SidePanelAPI.SidePanelContext.Consumer, {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 211,
        columnNumber: 7
      }
    }, _ref => {
      var {
        skin,
        isDraggable,
        backButtonProps,
        closeButtonProps,
        helpButtonProps
      } = _ref;
      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: 219,
          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: 231,
          columnNumber: 15
        }
      }));
    });
  }
}
Header.displayName = 'SidePanel.Header';
Header.propTypes = {
  className: _propTypes.default.string,
  title: _propTypes.default.node,
  subtitle: _propTypes.default.node,
  infoTooltipContent: _propTypes.default.node,
  infoTooltipProps: _propTypes.default.shape(_TooltipCommon.TooltipCommonProps),
  showDivider: _propTypes.default.bool,
  children: _propTypes.default.node,
  maxLines: _propTypes.default.number,
  ellipsis: _propTypes.default.bool
};
Header.defaultProps = {
  showDivider: true
};
var _default = exports.default = Header;
//# sourceMappingURL=Header.js.map