@carbon/ibm-products/es/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.
 */

import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
import React__default, { useRef } from 'react';
import PropTypes from '../../_virtual/index.js';
import cx from 'classnames';
import { SkeletonText, DefinitionTooltip } from '@carbon/react';
import { EditInPlace } from '../EditInPlace/EditInPlace.js';
import { useOverflowStringWidth } from '../../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 = useRef();
  const isEllipsisApplied = useOverflowStringWidth(titleRef);
  if (text || !content) {
    if (text === undefined && typeof title === 'string') {
      text = title;
      asText = title;
    }
    const TitleIcon = icon;
    const titleContent = /*#__PURE__*/React__default.createElement("span", {
      ref: titleRef,
      className: `${blockClass}__titleText`
    }, text);
    titleInnards = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, icon && !loading ? /*#__PURE__*/React__default.createElement("span", {
      className: `${blockClass}__title-icon-wrapper`
    }, /*#__PURE__*/React__default.createElement(TitleIcon, {
      className: `${blockClass}__title-icon`
    })) : null, loading ? /*#__PURE__*/React__default.createElement(SkeletonText, {
      className: `${blockClass}__title-skeleton`
    }) : isEditable ? /*#__PURE__*/React__default.createElement(EditInPlace, _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__default.createElement(DefinitionTooltip, {
      openOnHover: false,
      align: tooltipAlignment,
      definition: text,
      className: `${blockClass}__tooltip`
    }, titleContent) : titleContent);
  } else {
    titleInnards = content;
    titleText = asText;
  }
  return /*#__PURE__*/React__default.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: PropTypes.string.isRequired,
  /**
   * controlled from within page header
   */
  hasBreadcrumbRow: PropTypes.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: PropTypes.oneOfType([PropTypes.shape({
    // Update docgen if changed
    text: PropTypes.string.isRequired,
    icon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
    loading: PropTypes.bool,
    // inline edit version properties
    editDescription: PropTypes.string.isRequired.if(editInPlaceRequired),
    editableLabel: PropTypes.string.isRequired.if(editInPlaceRequired),
    id: PropTypes.string.isRequired.if(editInPlaceRequired),
    onChange: PropTypes.func,
    onSave: PropTypes.func,
    cancelDescription: PropTypes.string.isRequired.if(editInPlaceRequired),
    saveDescription: PropTypes.string.isRequired.if(editInPlaceRequired),
    tooltipAlignment: PropTypes.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right'])
    // Update docgen if changed
  }), PropTypes.string, PropTypes.shape({
    content: PropTypes.node.isRequired,
    breadcrumbContent: PropTypes.node,
    asText: PropTypes.string.isRequired
  })])
};

export { PageHeaderTitle, editInPlaceRequired };