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

Set of react components.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _designSystem = require("@talend/design-system");
var _Inject = _interopRequireDefault(require("../Inject"));
var _TabBar = _interopRequireDefault(require("../TabBar"));
var _OneColumn = _interopRequireDefault(require("./OneColumn"));
var _TwoColumns = _interopRequireDefault(require("./TwoColumns"));
var _SkipLinks = _interopRequireDefault(require("./SkipLinks"));
var _LayoutModule = _interopRequireDefault(require("./Layout.module.scss"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
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 = (0, _classnames.default)('tc-layout', _LayoutModule.default.layout, hasTheme && TALEND_T7_THEME_CLASSNAME);
  const headerCSS = (0, _classnames.default)('tc-layout-header', _LayoutModule.default.header);
  const footerCSS = (0, _classnames.default)('tc-layout-footer', _LayoutModule.default.footer);
  let Component;
  let skipLinkNavigationId;
  switch (mode) {
    case DISPLAY_MODES.ONE_COLUMN:
      Component = _OneColumn.default;
      break;
    case DISPLAY_MODES.TWO_COLUMNS:
      Component = _TwoColumns.default;
      skipLinkNavigationId = '#tc-layout-side-menu';
      break;
    default:
      Component = _OneColumn.default;
  }
  const safeDrawers = _Inject.default.getReactElement(getComponent, drawers);
  const safeHeader = _Inject.default.getReactElement(getComponent, header);
  const safeSubHeader = _Inject.default.getReactElement(getComponent, subHeader);
  const safeContent = _Inject.default.getReactElement(getComponent, content);
  const safeFooter = _Inject.default.getReactElement(getComponent, footer);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_designSystem.ThemeProvider, {
    theme: theme,
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      id: id,
      className: appCSS,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: _LayoutModule.default['skip-links'],
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SkipLinks.default, {
          navigationId: skipLinkNavigationId,
          mainId: "#tc-layout-main"
        })
      }), safeHeader && /*#__PURE__*/(0, _jsxRuntime.jsx)("header", {
        role: "banner",
        className: headerCSS,
        children: safeHeader
      }, "banner"), safeSubHeader && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: "subheader",
        children: safeSubHeader
      }, "subheader"), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Component, {
        drawers: safeDrawers,
        tabs: tabs,
        getComponent: getComponent,
        ...rest,
        children: [safeContent, children]
      }, "main"), safeFooter && /*#__PURE__*/(0, _jsxRuntime.jsx)("footer", {
        role: "contentinfo",
        className: footerCSS,
        children: safeFooter
      }, "footer")]
    })
  });
}
Layout.displayName = 'Layout';
Layout.propTypes = {
  id: _propTypes.default.string,
  header: _Inject.default.getReactElement.propTypes,
  content: _Inject.default.getReactElement.propTypes,
  footer: _Inject.default.getReactElement.propTypes,
  subHeader: _Inject.default.getReactElement.propTypes,
  mode: _propTypes.default.oneOf([DISPLAY_MODES.ONE_COLUMN, DISPLAY_MODES.TWO_COLUMNS]),
  drawers: _propTypes.default.arrayOf(_propTypes.default.element),
  tabs: _propTypes.default.shape(_TabBar.default.propTypes),
  hasTheme: _propTypes.default.bool,
  theme: _propTypes.default.string,
  children: _propTypes.default.node,
  getComponent: _propTypes.default.func
};
Layout.DISPLAY_MODES = DISPLAY_MODES;
Layout.TALEND_T7_THEME_APPS = TALEND_T7_THEME_APPS;
Layout.TALEND_T7_THEME_CLASSNAME = TALEND_T7_THEME_CLASSNAME;
var _default = exports.default = Layout;
//# sourceMappingURL=Layout.component.js.map