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

Set of react components.

import { useTranslation } from 'react-i18next';
import classNames from 'classnames';
import PropTypes from 'prop-types';
import { ButtonIcon } from '@talend/design-system';
import ActionBar from '../ActionBar';
import { Action } from '../Actions';
import I18N_DOMAIN_COMPONENTS from '../constants';
import Inject from '../Inject';
import Skeleton from '../Skeleton';
import getDefaultT from '../translate';
import TitleSubHeader from './TitleSubHeader';
import theme from './SubHeaderBar.module.scss';
import { has } from "lodash";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function SubHeaderBarActions({
  children,
  tag,
  left,
  right,
  center,
  hasRight
}) {
  const className = classNames({
    'tc-subheader-left': left,
    'tc-subheader-center': center,
    'tc-subheader-right': right,
    'tc-subheader-right-no-margin-right': hasRight,
    [theme['tc-subheader-navbar-left']]: left,
    [theme['tc-subheader-navbar-center']]: center,
    [theme['tc-subheader-navbar-center-no-margin-right']]: hasRight,
    [theme['tc-subheader-navbar-right']]: right
  });
  return /*#__PURE__*/_jsx("div", {
    className: className,
    children: /*#__PURE__*/_jsx(ActionBar.Content, {
      tag: tag,
      left: left,
      center: center,
      right: right,
      children: children
    })
  });
}
SubHeaderBarActions.propTypes = {
  children: PropTypes.node,
  tag: PropTypes.string,
  right: PropTypes.bool,
  center: PropTypes.bool,
  left: PropTypes.bool,
  hasRight: PropTypes.bool
};
function CustomInject({
  getComponent,
  left,
  right,
  center,
  nowrap,
  ...props
}) {
  if (nowrap) {
    return /*#__PURE__*/_jsx(Inject, {
      getComponent: getComponent,
      ...props
    });
  }
  return /*#__PURE__*/_jsx(SubHeaderBarActions, {
    left: left,
    right: right,
    center: center,
    children: /*#__PURE__*/_jsx(Inject, {
      getComponent: getComponent,
      ...props
    })
  });
}
CustomInject.propTypes = {
  nowrap: PropTypes.bool,
  right: PropTypes.bool,
  center: PropTypes.bool,
  left: PropTypes.bool,
  getComponent: PropTypes.func
};
function SubHeaderBar({
  onGoBack,
  components,
  getComponent,
  goBackDataFeature,
  className,
  left,
  center,
  right,
  rightActionsLoading,
  children,
  ...rest
}) {
  const {
    t
  } = useTranslation(I18N_DOMAIN_COMPONENTS);
  const injected = Inject.all(getComponent, components, CustomInject);
  const Renderer = Inject.getAll(getComponent, {
    Action,
    ActionBar
  });
  const hasRight = Array.isArray(right) || has(components, 'before-right') || has(components, 'after-right');
  let rightActions;
  if (rightActionsLoading) {
    rightActions = /*#__PURE__*/_jsx(SubHeaderBarActions, {
      className: classNames(theme['tc-subheader-navbar-right'], 'tc-subheader-navbar-right'),
      right: true,
      children: /*#__PURE__*/_jsx(Skeleton, {
        type: Skeleton.TYPES.text,
        size: Skeleton.SIZES.large
      })
    });
  } else {
    rightActions = Array.isArray(right) && right.map((item, index) => /*#__PURE__*/_jsx(SubHeaderBarActions, {
      className: classNames(theme['tc-subheader-navbar-right'], 'tc-subheader-navbar-right'),
      right: true,
      children: /*#__PURE__*/_jsx(Renderer.Action, {
        ...item
      }, index)
    }, index));
  }
  return /*#__PURE__*/_jsxs("header", {
    className: classNames(theme['tc-subheader'], 'tc-subheader', className),
    children: [injected('before-actionbar'), /*#__PURE__*/_jsxs(Renderer.ActionBar, {
      className: classNames(theme['tc-subheader-navbar'], 'tc-subheader-navbar'),
      children: [injected('left'), /*#__PURE__*/_jsxs(SubHeaderBarActions, {
        left: true,
        children: [injected('before-back'), onGoBack && /*#__PURE__*/_jsx("div", {
          className: classNames(theme['tc-subheader-back-button'], 'tc-subheader-back-button'),
          children: /*#__PURE__*/_jsx(ButtonIcon, {
            icon: "arrow-left",
            size: "M",
            tooltipPlacement: "right",
            onClick: onGoBack,
            id: "backArrow",
            "data-testid": "tc-subheader-backArrow",
            "data-feature": goBackDataFeature,
            children: t('BACK_ARROW_TOOLTIP', {
              defaultValue: 'Go back'
            })
          })
        }), injected('before-title'), /*#__PURE__*/_jsx(TitleSubHeader, {
          t: t,
          getComponent: getComponent,
          ...rest
        }), injected('after-title')]
      }), children, Array.isArray(left) && /*#__PURE__*/_jsx(SubHeaderBarActions, {
        left: true,
        children: left.map((item, index) => /*#__PURE__*/_jsx(Renderer.Action, {
          ...item
        }, index))
      }), injected('center'), Array.isArray(center) && center.map((item, index) => /*#__PURE__*/_jsx(SubHeaderBarActions, {
        center: true,
        hasRight: hasRight,
        children: /*#__PURE__*/_jsx(Renderer.Action, {
          ...item
        }, index)
      }, index)), injected('right'), rightActions, injected('after-right')]
    }), injected('after-actionbar')]
  });
}
SubHeaderBar.displayName = 'SubHeaderBar';
SubHeaderBar.propTypes = {
  onGoBack: PropTypes.func.isRequired,
  className: PropTypes.string,
  t: PropTypes.func,
  left: PropTypes.array,
  right: PropTypes.array,
  center: PropTypes.array,
  inProgress: PropTypes.bool,
  rightActionsLoading: PropTypes.bool,
  ...Inject.PropTypes
};
SubHeaderBar.defaultProps = {
  t: getDefaultT()
};
SubHeaderBar.Content = SubHeaderBarActions;
SubHeaderBar.Inject = CustomInject;
export default SubHeaderBar;
//# sourceMappingURL=SubHeaderBar.component.js.map