@carbon/ibm-products/lib/components/PageHeader/PageHeaderTitle.js

Carbon for IBM Products

/**
 * Copyright IBM Corp. 2020, 2025
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

'use strict';

var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
var React = require('react');
var index = require('../../_virtual/index.js');
var cx = require('classnames');
var react = require('@carbon/react');
var EditInPlace = require('../EditInPlace/EditInPlace.js');
var useOverflowString = require('../../global/js/hooks/useOverflowString.js');

/**
 *
 * Utility component used by Page Header
 */
// eslint-disable-next-line react/prop-types
const PageHeaderTitle = _ref => {
  let {
    blockClass,
    hasBreadcrumbRow,
    title
  } = _ref;
  let titleInnards;
  // eslint-disable-next-line
  // debugger;

  let {
    text,
    content,
    loading,
    icon,
    asText,
    onChange,
    onSave,
    editDescription,
    editableLabel,
    cancelDescription,
    saveDescription,
    tooltipAlignment = 'bottom',
    ...rest
  } = title;
  let titleText;
  let isEditable = !!onSave;
  const titleRef = React.useRef();
  const isEllipsisApplied = useOverflowString.useOverflowStringWidth(titleRef);
  if (text || !content) {
    if (text === undefined && typeof title === 'string') {
      text = title;
      asText = title;
    }
    const TitleIcon = icon;
    const titleContent = /*#__PURE__*/React.createElement("span", {
      ref: titleRef,
      className: `${blockClass}__titleText`
    }, text);
    titleInnards = /*#__PURE__*/React.createElement(React.Fragment, null, icon && !loading ? /*#__PURE__*/React.createElement("span", {
      className: `${blockClass}__title-icon-wrapper`
    }, /*#__PURE__*/React.createElement(TitleIcon, {
      className: `${blockClass}__title-icon`
    })) : null, loading ? /*#__PURE__*/React.createElement(react.SkeletonText, {
      className: `${blockClass}__title-skeleton`
    }) : isEditable ? /*#__PURE__*/React.createElement(EditInPlace.EditInPlace, _rollupPluginBabelHelpers.extends({
      tooltipAlignment: "bottom",
      value: text,
      cancelLabel: cancelDescription,
      editLabel: editDescription,
      saveLabel: saveDescription,
      labelText: editableLabel,
      onChange: onChange,
      onSave: onSave,
      size: "md",
      inheritTypography: true
    }, rest)) : isEllipsisApplied ? /*#__PURE__*/React.createElement(react.DefinitionTooltip, {
      openOnHover: false,
      align: tooltipAlignment,
      definition: text,
      className: `${blockClass}__tooltip`
    }, titleContent) : titleContent);
  } else {
    titleInnards = content;
    titleText = asText;
  }
  return /*#__PURE__*/React.createElement("h1", {
    className: cx(`${blockClass}__title`, {
      [`${blockClass}__title--editable`]: isEditable
    }, {
      [`${blockClass}__title--fades`]: hasBreadcrumbRow
    }),
    title: titleText
  }, titleInnards);
};
const editInPlaceRequired = _ref2 => {
  let {
    onSave
  } = _ref2;
  return !!onSave;
};
PageHeaderTitle.propTypes = {
  // passed from page header
  blockClass: index.default.string.isRequired,
  /**
   * controlled from within page header
   */
  hasBreadcrumbRow: index.default.bool,
  /**
   * An optional page title supplied as a string or object with the following attributes: text, icon, loading
   *
   * Can be supplied either as:
   * - String
   * - Object containing
   *    - text: title string
   *    - icon: optional icon
   *    - loading: boolean shows loading indicator if true
   *    - onChange: function to process the live value (React change === HTML Input)
   *    - onSave: function to process a confirmed change
   *    - editDescription: description for edit button
   *    - editableLabel: label for edit required if onSave supplied
   *    - cancelDescription: description for edit cancel button
   *    - saveDescription: description for edit save button
   * - Object containing user defined contents. These must fit within the area defined for the title in both main part of the header and the breadcrumb.
   *    - content: title or name of current location shown in main part of page header
   *    - breadcrumbContent: version of content used in the breadcrumb on scroll. If not supplied
   *    - asText: String based representation of the title
   */
  title: index.default.oneOfType([index.default.shape({
    // Update docgen if changed
    text: index.default.string.isRequired,
    icon: index.default.oneOfType([index.default.func, index.default.object]),
    loading: index.default.bool,
    // inline edit version properties
    editDescription: index.default.string.isRequired.if(editInPlaceRequired),
    editableLabel: index.default.string.isRequired.if(editInPlaceRequired),
    id: index.default.string.isRequired.if(editInPlaceRequired),
    onChange: index.default.func,
    onSave: index.default.func,
    cancelDescription: index.default.string.isRequired.if(editInPlaceRequired),
    saveDescription: index.default.string.isRequired.if(editInPlaceRequired),
    tooltipAlignment: index.default.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right'])
    // Update docgen if changed
  }), index.default.string, index.default.shape({
    content: index.default.node.isRequired,
    breadcrumbContent: index.default.node,
    asText: index.default.string.isRequired
  })])
};

exports.PageHeaderTitle = PageHeaderTitle;
exports.editInPlaceRequired = editInPlaceRequired;