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

Set of react components.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = TitleSubHeader;
var _react = require("react");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _designSystem = require("@talend/design-system");
var _Skeleton = _interopRequireDefault(require("../../Skeleton"));
var _TitleSubHeaderModule = _interopRequireDefault(require("./TitleSubHeader.module.scss"));
var _Icon = _interopRequireDefault(require("../../Icon"));
var _Inject = _interopRequireDefault(require("../../Inject"));
var _translate = _interopRequireDefault(require("../../translate"));
var _TooltipTrigger = _interopRequireDefault(require("../../TooltipTrigger"));
var _theme = require("../../theme");
var _SubTitle = require("./SubTitle.component");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const theme = (0, _theme.getTheme)(_TitleSubHeaderModule.default);
function TitleSubHeader({
  title,
  iconId,
  loading,
  inProgress,
  editable,
  getComponent,
  onCancel,
  onSubmit,
  ...rest
}) {
  const [isEditMode, setIsEditMode] = (0, _react.useState)(false);
  function handleSubmit(...args) {
    if (onSubmit) {
      onSubmit(...args);
    }
  }
  if (loading) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, {
      type: _Skeleton.default.TYPES.text,
      size: _Skeleton.default.SIZES.large
    });
  }
  const InjectedInlineEditingText = _Inject.default.get(getComponent, 'InlineEditing', _designSystem.InlineEditing.Text);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: theme('tc-subheader-details', {
      'tc-subheader-details-blink': inProgress
    }),
    children: [iconId && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
      name: iconId,
      className: theme('tc-subheader-details-icon')
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: theme('tc-subheader-details-text'),
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: theme('tc-subheader-details-text-title'),
        children: editable ? /*#__PURE__*/(0, _jsxRuntime.jsx)(InjectedInlineEditingText, {
          required: true,
          renderValueAs: "h1",
          label: "",
          placeholder: "",
          defaultValue: title,
          loading: loading,
          onToggle: setIsEditMode,
          onEdit: handleSubmit,
          "data-feature": "subheaderbar.rename",
          ...rest
        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipTrigger.default, {
          label: title,
          tooltipPlacement: "bottom",
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("h1", {
            className: theme('tc-subheader-details-text-title-wording'),
            ...rest.titleProps,
            children: title
          })
        })
      }), !isEditMode ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_SubTitle.SubTitle, {
        ...rest
      }) : null]
    })]
  });
}
TitleSubHeader.propTypes = {
  title: _propTypes.default.string.isRequired,
  iconId: _propTypes.default.string,
  loading: _propTypes.default.bool,
  inProgress: _propTypes.default.bool,
  editable: _propTypes.default.bool,
  subTitle: _propTypes.default.node,
  onSubmit: _propTypes.default.func,
  t: _propTypes.default.func,
  ..._Inject.default.PropTypes
};
TitleSubHeader.defaultProps = {
  loading: false,
  inProgress: false,
  t: (0, _translate.default)(),
  editable: false
};
//# sourceMappingURL=TitleSubHeader.component.js.map