wix-style-react/dist/src/SidePanel/Header/Header.js

wix-style-react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _SidePanelAPI = require("../SidePanelAPI");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _HeaderSt = require("./Header.st.css");
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 _context = require("../../WixStyleReactProvider/context");
var _system = require("@wix/wix-ui-icons-common/system");
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/SidePanel/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() {
    var {
      title,
      infoTooltipContent,
      infoTooltipProps,
      maxLines,
      ellipsis
    } = this.props;
    return /*#__PURE__*/_react.default.createElement(_Box.default, {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 42,
        columnNumber: 7
      }
    }, /*#__PURE__*/_react.default.createElement(_Heading.default, {
      placement: "auto",
      ellipsis: ellipsis,
      maxLines: maxLines,
      size: "medium",
      as: "h2",
      dataHook: _constants.dataHooks.sidePanelHeaderTitle,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 43,
        columnNumber: 9
      }
    }, title), infoTooltipContent && /*#__PURE__*/_react.default.createElement(_Box.default, {
      marginLeft: "tiny",
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 54,
        columnNumber: 11
      }
    }, /*#__PURE__*/_react.default.createElement(_InfoIcon.default, {
      dataHook: _constants.dataHooks.sidePanelHeaderTitleInfoIcon,
      content: infoTooltipContent,
      tooltipProps: infoTooltipProps,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 55,
        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: 77,
        columnNumber: 7
      }
    }, subtitle);
  }
  renderTitle(onCloseButtonClick, onHelpButtonClick) {
    var {
      title
    } = this.props;
    var isStringTitle = typeof title === 'string';
    return /*#__PURE__*/_react.default.createElement("div", {
      className: (0, _HeaderSt.st)(_HeaderSt.classes.titleContainer, {
        noCloseButton: !onCloseButtonClick
      }),
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 95,
        columnNumber: 7
      }
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: _HeaderSt.classes.title,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 100,
        columnNumber: 9
      }
    }, isStringTitle ? this.renderStringTitle() : title, this.renderSubtitle()), this.renderButtons(onCloseButtonClick, onHelpButtonClick));
  }
  renderButtons(onCloseButtonClick, onHelpButtonClick) {
    if (!onCloseButtonClick && !onHelpButtonClick) {
      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: 119,
        columnNumber: 7
      }
    }, onHelpButtonClick &&
    /*#__PURE__*/
    // @ts-ignore
    _react.default.createElement(_CloseButton.default, {
      dataHook: _constants.dataHooks.sidePanelHeaderHelpButton,
      onClick: onHelpButtonClick,
      size: "large",
      skin: "dark",
      children: /*#__PURE__*/_react.default.createElement(_system.Help24, {
        className: _HeaderSt.classes.helpIcon,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 127,
          columnNumber: 23
        }
      }),
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 122,
        columnNumber: 11
      }
    }), onCloseButtonClick &&
    /*#__PURE__*/
    // @ts-ignore
    _react.default.createElement(_CloseButton.default, {
      dataHook: _constants.dataHooks.sidePanelHeaderCloseButton,
      className: _HeaderSt.classes.closeButton,
      onClick: onCloseButtonClick,
      size: "large",
      skin: "dark",
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 132,
        columnNumber: 11
      }
    }));
  }
  render() {
    var {
      children,
      showDivider,
      className
    } = this.props;
    return /*#__PURE__*/_react.default.createElement(_SidePanelAPI.SidePanelContext.Consumer, {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 147,
        columnNumber: 7
      }
    }, _ref => {
      var {
        skin,
        isDraggable,
        onCloseButtonClick,
        onHelpButtonClick
      } = _ref;
      return /*#__PURE__*/_react.default.createElement(_context.WixStyleReactContext.Consumer, {
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 149,
          columnNumber: 11
        }
      }, _ref2 => {
        var {
          newColorsBranding
        } = _ref2;
        return /*#__PURE__*/_react.default.createElement("div", {
          className: (0, _HeaderSt.st)(_HeaderSt.classes.root, {
            newColorsBranding,
            skin,
            isDraggable
          }, className),
          "data-hook": _constants.dataHooks.sidePanelHeader,
          __self: this,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 151,
            columnNumber: 15
          }
        }, this.renderTitle(onCloseButtonClick, onHelpButtonClick), children, showDivider &&
        /*#__PURE__*/
        // @ts-ignore
        _react.default.createElement(_Divider.default, {
          dataHook: _constants.dataHooks.sidePanelHeaderDivider,
          __self: this,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 163,
            columnNumber: 19
          }
        }));
      });
    });
  }
}
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