wix-style-react/dist/src/SidebarHeader/SidebarHeader.js

wix-style-react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _SidebarHeaderSt = require("./SidebarHeader.st.css");
var _constants = require("./constants");
var _Text = _interopRequireDefault(require("../Text"));
var _SidebarAPI = require("../Sidebar/SidebarAPI");
var _constants2 = require("../Sidebar/constants");
var _Box = _interopRequireDefault(require("../Box"));
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/SidebarHeader/SidebarHeader.js";
/** A header within the sidebar with title, subtitle and custom content at the bottom. */
class SidebarHeader extends _react.default.PureComponent {
  render() {
    var {
      dataHook,
      title,
      subtitle,
      children
    } = this.props;
    return /*#__PURE__*/_react.default.createElement(_SidebarAPI.SidebarContext.Consumer, {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 30,
        columnNumber: 7
      }
    }, context => {
      var skin = context && context.getSkin() || _constants2.sidebarSkins.dark;
      return /*#__PURE__*/_react.default.createElement("div", {
        "data-hook": dataHook,
        className: (0, _SidebarHeaderSt.st)(_SidebarHeaderSt.classes.root, {
          skin
        }),
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 35,
          columnNumber: 13
        }
      }, title && /*#__PURE__*/_react.default.createElement(_Box.default, {
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 37,
          columnNumber: 17
        }
      }, /*#__PURE__*/_react.default.createElement(_Text.default, {
        dataHook: _constants.dataHooks.title,
        className: _SidebarHeaderSt.classes.title,
        size: "medium",
        weight: "bold",
        ellipsis: true,
        light: skin === _constants2.sidebarSkins.dark,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 38,
          columnNumber: 19
        }
      }, title)), subtitle && /*#__PURE__*/_react.default.createElement(_Box.default, {
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 51,
          columnNumber: 17
        }
      }, /*#__PURE__*/_react.default.createElement(_Text.default, {
        dataHook: _constants.dataHooks.subtitle,
        className: _SidebarHeaderSt.classes.subtitle,
        size: "tiny",
        weight: "thin",
        ellipsis: true,
        light: skin === _constants2.sidebarSkins.dark,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 52,
          columnNumber: 19
        }
      }, subtitle)), children && /*#__PURE__*/_react.default.createElement("div", {
        "data-hook": _constants.dataHooks.children,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 64,
          columnNumber: 28
        }
      }, children));
    });
  }
}
SidebarHeader.displayName = 'SidebarHeader';
SidebarHeader.propTypes = {
  /** Applied as data-hook HTML attribute that can be used in the tests */
  dataHook: _propTypes.default.string,
  /** A text to show as the header title */
  title: _propTypes.default.node,
  /** A text to show as the header subtitle */
  subtitle: _propTypes.default.node,
  /** A custom node to render from the bottom */
  children: _propTypes.default.node
};
var _default = exports.default = SidebarHeader;
//# sourceMappingURL=SidebarHeader.js.map