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

Set of react components.

import PropTypes from 'prop-types';
import classnames from 'classnames';
import { ThemeProvider } from '@talend/design-system';
import Inject from '../Inject';
import TabBar from '../TabBar';
import OneColumn from './OneColumn';
import TwoColumns from './TwoColumns';
import SkipLinks from './SkipLinks';
import style from './Layout.module.scss';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const DISPLAY_MODES = {
  ONE_COLUMN: 'OneColumn',
  TWO_COLUMNS: 'TwoColumns'
};
const TALEND_T7_THEME_APPS = ['portal', 'tdc', 'tdp', 'tds', 'tfd', 'tmc', 'mdm'];
const TALEND_T7_THEME_CLASSNAME = 't7';

/**
 * The Layout component is a container
 * that should follow the body of your App.
 * If the Layout is not after the body you have to
 * add some CSS
 * @example
 body > div {
	display: flex;
	width: 100vw;
	max-height: 100vh;
	overflow: hidden;
}
 * @param {object} props react props
 * @example
 <Layout mode="TwoColumns" one={one} two={two}></Layout>
 */
function Layout({
  id,
  header,
  subHeader,
  content,
  footer,
  mode,
  drawers,
  tabs,
  hasTheme,
  theme,
  children,
  getComponent,
  ...rest
}) {
  const appCSS = classnames('tc-layout', style.layout, hasTheme && TALEND_T7_THEME_CLASSNAME);
  const headerCSS = classnames('tc-layout-header', style.header);
  const footerCSS = classnames('tc-layout-footer', style.footer);
  let Component;
  let skipLinkNavigationId;
  switch (mode) {
    case DISPLAY_MODES.ONE_COLUMN:
      Component = OneColumn;
      break;
    case DISPLAY_MODES.TWO_COLUMNS:
      Component = TwoColumns;
      skipLinkNavigationId = '#tc-layout-side-menu';
      break;
    default:
      Component = OneColumn;
  }
  const safeDrawers = Inject.getReactElement(getComponent, drawers);
  const safeHeader = Inject.getReactElement(getComponent, header);
  const safeSubHeader = Inject.getReactElement(getComponent, subHeader);
  const safeContent = Inject.getReactElement(getComponent, content);
  const safeFooter = Inject.getReactElement(getComponent, footer);
  return /*#__PURE__*/_jsx(ThemeProvider, {
    theme: theme,
    children: /*#__PURE__*/_jsxs("div", {
      id: id,
      className: appCSS,
      children: [/*#__PURE__*/_jsx("div", {
        className: style['skip-links'],
        children: /*#__PURE__*/_jsx(SkipLinks, {
          navigationId: skipLinkNavigationId,
          mainId: "#tc-layout-main"
        })
      }), safeHeader && /*#__PURE__*/_jsx("header", {
        role: "banner",
        className: headerCSS,
        children: safeHeader
      }, "banner"), safeSubHeader && /*#__PURE__*/_jsx("div", {
        className: "subheader",
        children: safeSubHeader
      }, "subheader"), /*#__PURE__*/_jsxs(Component, {
        drawers: safeDrawers,
        tabs: tabs,
        getComponent: getComponent,
        ...rest,
        children: [safeContent, children]
      }, "main"), safeFooter && /*#__PURE__*/_jsx("footer", {
        role: "contentinfo",
        className: footerCSS,
        children: safeFooter
      }, "footer")]
    })
  });
}
Layout.displayName = 'Layout';
Layout.propTypes = {
  id: PropTypes.string,
  header: Inject.getReactElement.propTypes,
  content: Inject.getReactElement.propTypes,
  footer: Inject.getReactElement.propTypes,
  subHeader: Inject.getReactElement.propTypes,
  mode: PropTypes.oneOf([DISPLAY_MODES.ONE_COLUMN, DISPLAY_MODES.TWO_COLUMNS]),
  drawers: PropTypes.arrayOf(PropTypes.element),
  tabs: PropTypes.shape(TabBar.propTypes),
  hasTheme: PropTypes.bool,
  theme: PropTypes.string,
  children: PropTypes.node,
  getComponent: PropTypes.func
};
Layout.DISPLAY_MODES = DISPLAY_MODES;
Layout.TALEND_T7_THEME_APPS = TALEND_T7_THEME_APPS;
Layout.TALEND_T7_THEME_CLASSNAME = TALEND_T7_THEME_CLASSNAME;
export default Layout;
//# sourceMappingURL=Layout.component.js.map