@carbon/ibm-cloud-cognitive-cdai/lib/components/IdeNavigation/PageHeader/IdePageHeader.js

Carbon for Cloud & Cognitive CD&AI UI components

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _carbonComponents = require("carbon-components");
var _IDHelper = require("../../../component_helpers/IDHelper");
var _IdePageContent = _interopRequireDefault(require("../PageContent/IdePageContent.js"));
var _settings = require("../../../globals/js/settings");
var _excluded = ["breadcrumb", "headingRenderFunction", "heading", "subtitle", "tabs", "customContent", "className"]; //
// Copyright IBM Corp. 2020, 2020
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.
//
var prefix = _carbonComponents.settings.prefix;
var renderBreadcrumb = function renderBreadcrumb(breadcrumbContent) {
  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
    key: "IdePageHeader--breadcrumb-container",
    className: "".concat(_settings.idePrefix, "-page-header--breadcrumb-container")
  }, (0, _IDHelper.idAttribute)('IdePageHeader--breadcrumb-container')), breadcrumbContent);
};
var renderHeader = function renderHeader(header, headingRenderFunction) {
  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
    key: "IdePageHeader--heading--container",
    className: "".concat(_settings.idePrefix, "-page-header--heading-container")
  }, (0, _IDHelper.idAttribute)('IdePageHeader--heading-container')), header ? headingRenderFunction(/*#__PURE__*/_react.default.createElement("p", (0, _extends2.default)({
    key: "IdePageHeader--heading",
    className: "".concat(_settings.idePrefix, "-page-header--heading")
  }, (0, _IDHelper.idAttribute)('IdePageHeader--heading')), header)) : headingRenderFunction(null));
};
var renderSubtitle = function renderSubtitle(subtitle) {
  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
    key: "IdePageHeader--subtitle--container",
    className: "".concat(_settings.idePrefix, "-page-header--subtitle-container")
  }, (0, _IDHelper.idAttribute)('IdePageHeader--subtitle-container')), subtitle ? /*#__PURE__*/_react.default.createElement("p", (0, _extends2.default)({
    key: "IdePageHeader--subtitle",
    className: "".concat(_settings.idePrefix, "-page-header--subtitle")
  }, (0, _IDHelper.idAttribute)('IdePageHeader--subtitle')), subtitle) : null);
};
var renderTabs = function renderTabs(tabContent) {
  return tabContent ? /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
    key: "IdePageHeader--tabs-container",
    className: "".concat(_settings.idePrefix, "-page-header--tabs-container")
  }, (0, _IDHelper.idAttribute)('IdePageHeader--tabs-container')), tabContent) : /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
    className: "".concat(_settings.idePrefix, "-page-header--tabs-container__empty"),
    key: "IdePageHeader--tabs-container"
  }, (0, _IDHelper.idAttribute)('IdePageHeader--tabs-container')));
};
var IdePageHeader = function IdePageHeader(_ref) {
  var breadcrumb = _ref.breadcrumb,
    headingRenderFunction = _ref.headingRenderFunction,
    heading = _ref.heading,
    subtitle = _ref.subtitle,
    tabs = _ref.tabs,
    customContent = _ref.customContent,
    className = _ref.className,
    others = (0, _objectWithoutProperties2.default)(_ref, _excluded);
  // depending on the case, render some aspects of the navigation, depending on the properties provided
  var navContent = null;
  if (breadcrumb && !heading && !tabs) {
    navContent = renderBreadcrumb(breadcrumb);
  } else if (!breadcrumb && !heading && tabs) {
    navContent = renderTabs(tabs);
  } else {
    navContent = [renderBreadcrumb(breadcrumb), renderHeader(heading, headingRenderFunction), renderSubtitle(subtitle), renderTabs(tabs)];
  }
  return /*#__PURE__*/_react.default.createElement("section", (0, _extends2.default)({}, (0, _IDHelper.idAttribute)('IdePageHeader'), {
    className: "".concat(_settings.idePrefix, "-page-header ").concat(className)
  }, others), /*#__PURE__*/_react.default.createElement(_IdePageContent.default, {
    bleedClassName: "".concat(_settings.idePrefix, "-page-header__backgroundColour")
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "".concat(prefix, "--row")
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: "".concat(prefix, "--col")
  }, navContent), customContent ? /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
    className: "".concat(prefix, "--col ").concat(_settings.idePrefix, "-page-header--custom-content-container")
  }, (0, _IDHelper.idAttribute)('IdePageHeader--custom-content-container')), customContent) : null)));
};
IdePageHeader.defaultProps = {
  breadcrumb: null,
  headingRenderFunction: function headingRenderFunction(headerJSX) {
    return headerJSX;
  },
  heading: null,
  subtitle: null,
  tabs: null,
  customContent: null,
  className: ''
};
IdePageHeader.propTypes = {
  /** optional - an instance of the Carbon Breadcrumb component representing you current navigation state */
  breadcrumb: _propTypes.default.node,
  /** optional - className. Use this to add any custom css you may need */
  className: _propTypes.default.string,
  /** optional - an area of bespoke JSX rendering. Use this if you want to position specific elements alongside/in this navigation element */
  customContent: _propTypes.default.node,
  /** optional - a string to display as the header text */
  heading: _propTypes.default.string,
  /** optional - a render function, which will pass as parameter one the JSX for your header. Use this to render other content alongisde the header (eg an icon)  */
  headingRenderFunction: _propTypes.default.func,
  /** optional - a string to display as the subtitle under the header text */
  subtitle: _propTypes.default.string,
  /** optional - an instance of the Carbon Tabs component, with child tabs contained within. Itended content of the Tab are react-router links to navigate you around the UI */
  tabs: _propTypes.default.node
};
var _default = exports.default = IdePageHeader;