@talend/react-components/lib-esm/SubHeaderBar/TitleSubHeader/TitleSubHeader.component.js

Set of react components.

import { useState } from 'react';
import PropTypes from 'prop-types';
import { InlineEditing } from '@talend/design-system';
import Skeleton from '../../Skeleton';
import titleSubHeaderCssModule from './TitleSubHeader.module.scss';
import Icon from '../../Icon';
import Inject from '../../Inject';
import getDefaultT from '../../translate';
import TooltipTrigger from '../../TooltipTrigger';
import { getTheme } from '../../theme';
import { SubTitle } from './SubTitle.component';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const theme = getTheme(titleSubHeaderCssModule);
function TitleSubHeader({
  title,
  iconId,
  loading,
  inProgress,
  editable,
  getComponent,
  onCancel,
  onSubmit,
  ...rest
}) {
  const [isEditMode, setIsEditMode] = useState(false);
  function handleSubmit(...args) {
    if (onSubmit) {
      onSubmit(...args);
    }
  }
  if (loading) {
    return /*#__PURE__*/_jsx(Skeleton, {
      type: Skeleton.TYPES.text,
      size: Skeleton.SIZES.large
    });
  }
  const InjectedInlineEditingText = Inject.get(getComponent, 'InlineEditing', InlineEditing.Text);
  return /*#__PURE__*/_jsxs("div", {
    className: theme('tc-subheader-details', {
      'tc-subheader-details-blink': inProgress
    }),
    children: [iconId && /*#__PURE__*/_jsx(Icon, {
      name: iconId,
      className: theme('tc-subheader-details-icon')
    }), /*#__PURE__*/_jsxs("div", {
      className: theme('tc-subheader-details-text'),
      children: [/*#__PURE__*/_jsx("div", {
        className: theme('tc-subheader-details-text-title'),
        children: editable ? /*#__PURE__*/_jsx(InjectedInlineEditingText, {
          required: true,
          renderValueAs: "h1",
          label: "",
          placeholder: "",
          defaultValue: title,
          loading: loading,
          onToggle: setIsEditMode,
          onEdit: handleSubmit,
          "data-feature": "subheaderbar.rename",
          ...rest
        }) : /*#__PURE__*/_jsx(TooltipTrigger, {
          label: title,
          tooltipPlacement: "bottom",
          children: /*#__PURE__*/_jsx("h1", {
            className: theme('tc-subheader-details-text-title-wording'),
            ...rest.titleProps,
            children: title
          })
        })
      }), !isEditMode ? /*#__PURE__*/_jsx(SubTitle, {
        ...rest
      }) : null]
    })]
  });
}
TitleSubHeader.propTypes = {
  title: PropTypes.string.isRequired,
  iconId: PropTypes.string,
  loading: PropTypes.bool,
  inProgress: PropTypes.bool,
  editable: PropTypes.bool,
  subTitle: PropTypes.node,
  onSubmit: PropTypes.func,
  t: PropTypes.func,
  ...Inject.PropTypes
};
TitleSubHeader.defaultProps = {
  loading: false,
  inProgress: false,
  t: getDefaultT(),
  editable: false
};
export { TitleSubHeader as default };
//# sourceMappingURL=TitleSubHeader.component.js.map