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

Carbon for Cloud & Cognitive CD&AI UI components

import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _extends from "@babel/runtime/helpers/extends";
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.
//

import React from 'react';
import PropTypes from 'prop-types';
import { settings } from 'carbon-components';
import { idAttribute } from '../../../component_helpers/IDHelper';
import IdePageContent from '../PageContent/IdePageContent.js';
import { idePrefix } from '../../../globals/js/settings';
var prefix = settings.prefix;
var renderBreadcrumb = function renderBreadcrumb(breadcrumbContent) {
  return /*#__PURE__*/React.createElement("div", _extends({
    key: "IdePageHeader--breadcrumb-container",
    className: "".concat(idePrefix, "-page-header--breadcrumb-container")
  }, idAttribute('IdePageHeader--breadcrumb-container')), breadcrumbContent);
};
var renderHeader = function renderHeader(header, headingRenderFunction) {
  return /*#__PURE__*/React.createElement("div", _extends({
    key: "IdePageHeader--heading--container",
    className: "".concat(idePrefix, "-page-header--heading-container")
  }, idAttribute('IdePageHeader--heading-container')), header ? headingRenderFunction(/*#__PURE__*/React.createElement("p", _extends({
    key: "IdePageHeader--heading",
    className: "".concat(idePrefix, "-page-header--heading")
  }, idAttribute('IdePageHeader--heading')), header)) : headingRenderFunction(null));
};
var renderSubtitle = function renderSubtitle(subtitle) {
  return /*#__PURE__*/React.createElement("div", _extends({
    key: "IdePageHeader--subtitle--container",
    className: "".concat(idePrefix, "-page-header--subtitle-container")
  }, idAttribute('IdePageHeader--subtitle-container')), subtitle ? /*#__PURE__*/React.createElement("p", _extends({
    key: "IdePageHeader--subtitle",
    className: "".concat(idePrefix, "-page-header--subtitle")
  }, idAttribute('IdePageHeader--subtitle')), subtitle) : null);
};
var renderTabs = function renderTabs(tabContent) {
  return tabContent ? /*#__PURE__*/React.createElement("div", _extends({
    key: "IdePageHeader--tabs-container",
    className: "".concat(idePrefix, "-page-header--tabs-container")
  }, idAttribute('IdePageHeader--tabs-container')), tabContent) : /*#__PURE__*/React.createElement("div", _extends({
    className: "".concat(idePrefix, "-page-header--tabs-container__empty"),
    key: "IdePageHeader--tabs-container"
  }, 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 = _objectWithoutProperties(_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.createElement("section", _extends({}, idAttribute('IdePageHeader'), {
    className: "".concat(idePrefix, "-page-header ").concat(className)
  }, others), /*#__PURE__*/React.createElement(IdePageContent, {
    bleedClassName: "".concat(idePrefix, "-page-header__backgroundColour")
  }, /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefix, "--row")
  }, /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefix, "--col")
  }, navContent), customContent ? /*#__PURE__*/React.createElement("div", _extends({
    className: "".concat(prefix, "--col ").concat(idePrefix, "-page-header--custom-content-container")
  }, 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.node,
  /** optional - className. Use this to add any custom css you may need */
  className: PropTypes.string,
  /** optional - an area of bespoke JSX rendering. Use this if you want to position specific elements alongside/in this navigation element */
  customContent: PropTypes.node,
  /** optional - a string to display as the header text */
  heading: PropTypes.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.func,
  /** optional - a string to display as the subtitle under the header text */
  subtitle: PropTypes.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.node
};
export default IdePageHeader;