@mskcc/carbon-react/lib/components/MskLayout/pageLayout.js

Carbon react components for the MSKCC DSM

/**
 * MSKCC 2021, 2024
 */

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
var React = require('react');
var PropTypes = require('prop-types');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

function _interopNamespace(e) {
  if (e && e.__esModule) return e;
  var n = Object.create(null);
  if (e) {
    Object.keys(e).forEach(function (k) {
      if (k !== 'default') {
        var d = Object.getOwnPropertyDescriptor(e, k);
        Object.defineProperty(n, k, d.get ? d : {
          enumerable: true,
          get: function () { return e[k]; }
        });
      }
    });
  }
  n["default"] = e;
  return Object.freeze(n);
}

var React__namespace = /*#__PURE__*/_interopNamespace(React);
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);

// type ChildProps = {
//   children?: React.ReactNode;
//   as?: React.ElementType;
//   layout?: LayoutTypes;
// };

// const Child: React.FC<ChildProps> = ({ as, children, layout }) => {
//   return React.createElement(
//     as,
//     {
//       className: `msk-layout-${layout}-slot msk-layout-${layout}-slot-main`,
//     },
//     <div className={`msk-layout-${layout}-slot-container`}>
//       <div className={`msk-layout-${layout}-slot-content`}>{children}</div>
//     </div>
//   );
// };
const Child = _ref => {
  let {
    as: Component,
    children,
    layout,
    ...rest
  } = _ref;
  return /*#__PURE__*/React__namespace.createElement(Component, _rollupPluginBabelHelpers["extends"]({
    className: `msk-layout-${layout}-slot msk-layout-${layout}-slot-main`
  }, rest), /*#__PURE__*/React__namespace.createElement("div", {
    className: `msk-layout-${layout}-slot-container`
  }, /*#__PURE__*/React__namespace.createElement("div", {
    className: `msk-layout-${layout}-slot-content`
  }, children)));
};
// const Child: React.FC<ChildProps> = ({ as, children, layout }) => {
//   return React.createElement(
//     as,
//     {
//       className: `msk-layout-${layout}-slot msk-layout-${layout}-slot-main`,
//     },
//     <div className={`msk-layout-${layout}-slot-container`}>
//       <div className={`msk-layout-${layout}-slot-content`}>{children}</div>
//     </div>,
//   );
// };
const PageLayout = _ref2 => {
  let {
    layout = 'bookworm',
    side,
    children,
    ...other
  } = _ref2;
  switch (layout) {
    case 'bookworm':
      return /*#__PURE__*/React__namespace.createElement(BookwormLayout, other, children);
    case 'potato':
      return /*#__PURE__*/React__namespace.createElement(PotatoLayout, other, children);
    case 'sarge':
      return /*#__PURE__*/React__namespace.createElement(SargeLayout, other, children);
    case 'bullseye':
      return /*#__PURE__*/React__namespace.createElement(BullseyeLayout, _rollupPluginBabelHelpers["extends"]({
        side: side
      }, other), children);
    case 'buster':
      return /*#__PURE__*/React__namespace.createElement(BusterLayout, _rollupPluginBabelHelpers["extends"]({
        side: side
      }, other), children);
    case 'slink':
      return /*#__PURE__*/React__namespace.createElement(SlinkLayout, _rollupPluginBabelHelpers["extends"]({
        side: side
      }, other), children);
    default:
      return /*#__PURE__*/React__namespace.createElement(BookwormLayout, other, children);
  }
};
const BookwormLayout = _ref3 => {
  let {
    as = 'main',
    children,
    ...other
  } = _ref3;
  return /*#__PURE__*/React__namespace.createElement("div", _rollupPluginBabelHelpers["extends"]({
    className: "msk-layout-stage"
  }, other), /*#__PURE__*/React__namespace.createElement("div", {
    className: "msk-layout-bookworm"
  }, /*#__PURE__*/React__namespace.createElement("div", {
    className: "msk-layout-bookworm-container"
  }, /*#__PURE__*/React__namespace.createElement(Child, {
    as: as,
    layout: "bookworm"
  }, children))));
};
const PotatoLayout = _ref4 => {
  let {
    as = 'main',
    children,
    ...other
  } = _ref4;
  return /*#__PURE__*/React__namespace.createElement("div", _rollupPluginBabelHelpers["extends"]({
    className: "msk-layout-stage"
  }, other), /*#__PURE__*/React__namespace.createElement("div", {
    className: "msk-layout-potato"
  }, /*#__PURE__*/React__namespace.createElement("div", {
    className: "msk-layout-potato-container"
  }, /*#__PURE__*/React__namespace.createElement(Child, {
    as: as,
    layout: "potato"
  }, children))));
};
const SargeLayout = _ref5 => {
  let {
    as = 'main',
    children,
    ...other
  } = _ref5;
  return /*#__PURE__*/React__namespace.createElement("div", _rollupPluginBabelHelpers["extends"]({
    className: "msk-layout-stage"
  }, other), /*#__PURE__*/React__namespace.createElement("div", {
    className: "msk-layout-sarge"
  }, /*#__PURE__*/React__namespace.createElement("div", {
    className: "msk-layout-sarge-container"
  }, /*#__PURE__*/React__namespace.createElement(Child, {
    as: as,
    layout: "sarge"
  }, children))));
};
const BullseyeLayout = _ref6 => {
  let {
    as = 'main',
    children,
    side,
    ...other
  } = _ref6;
  return /*#__PURE__*/React__namespace.createElement("div", _rollupPluginBabelHelpers["extends"]({
    className: "msk-layout-stage"
  }, other), /*#__PURE__*/React__namespace.createElement("div", {
    className: "msk-layout-bullseye"
  }, /*#__PURE__*/React__namespace.createElement("div", {
    className: "msk-layout-bullseye-container"
  }, /*#__PURE__*/React__namespace.createElement("aside", {
    className: "msk-layout-bullseye-slot msk-layout-bullseye-slot-left"
  }, /*#__PURE__*/React__namespace.createElement("div", {
    className: "msk-layout-bullseye-slot-container"
  }, /*#__PURE__*/React__namespace.createElement("div", {
    className: "msk-layout-bullseye-slot-content"
  }, side))), /*#__PURE__*/React__namespace.createElement(Child, {
    as: as,
    layout: "bullseye"
  }, children))));
};
const SlinkLayout = _ref7 => {
  let {
    as = 'main',
    children,
    side,
    ...other
  } = _ref7;
  return /*#__PURE__*/React__namespace.createElement("div", _rollupPluginBabelHelpers["extends"]({
    className: "msk-layout-stage"
  }, other), /*#__PURE__*/React__namespace.createElement("div", {
    className: "msk-layout-slink"
  }, /*#__PURE__*/React__namespace.createElement("div", {
    className: "msk-layout-slink-container"
  }, /*#__PURE__*/React__namespace.createElement("aside", {
    className: "msk-layout-slink-slot msk-layout-slink-slot-left"
  }, /*#__PURE__*/React__namespace.createElement("div", {
    className: "msk-layout-slink-slot-container"
  }, /*#__PURE__*/React__namespace.createElement("div", {
    className: "msk-layout-slink-slot-content"
  }, side))), /*#__PURE__*/React__namespace.createElement(Child, {
    as: as,
    layout: "slink"
  }, children))));
};
const BusterLayout = _ref8 => {
  let {
    as = 'main',
    children,
    side,
    ...other
  } = _ref8;
  return /*#__PURE__*/React__namespace.createElement("div", _rollupPluginBabelHelpers["extends"]({
    className: "msk-layout-stage"
  }, other), /*#__PURE__*/React__namespace.createElement("div", {
    className: "msk-layout-buster"
  }, /*#__PURE__*/React__namespace.createElement("div", {
    className: "msk-layout-buster-container"
  }, /*#__PURE__*/React__namespace.createElement(Child, {
    as: as,
    layout: "buster"
  }, children), /*#__PURE__*/React__namespace.createElement("aside", {
    className: "msk-layout-buster-slot msk-layout-buster-slot-right"
  }, /*#__PURE__*/React__namespace.createElement("div", {
    className: "msk-layout-buster-slot-container"
  }, /*#__PURE__*/React__namespace.createElement("div", {
    className: "msk-layout-buster-slot-content"
  }, side))))));
};
PageLayout.displayName = 'PageLayout';
PageLayout.propTypes = {
  children: PropTypes__default["default"].node,
  /**
   *
   * Bookworm layout
   * 2400px max • 12 columns • 1 slot
   * Bookworm is a wide central container for dense applications.
   *
   * Potato layout
   * 144px max • 12 columns • 1 slot
   * The Potato layout is a single slot container that uses all
   * 12 columns.
   *
   * Sarge layout
   * 1440px max • 12 columns • 1 slot
   * The Sarge layout focuses the user by skipping 2 of the 12
   * columns when content does not flow very much horizontally.
   *
   * Bullesye layout
   * 1440px max • 12 columns • 2 slots
   * Bullseye has two slots, where the left could be use for a
   * table of contents or search filters.
   *
   * Buster layout
   * 1440px max • 12 columns • 2 slots
   * Buster is a great layout for an article where the right slot
   * is useful for reading tools (like printing and sharing) and
   * also to link out to related articles or authors.
   *
   * Slink layout
   * 1440px max • 12 columns • 2 slots
   * Slink has two slots, where the left could be used for a
   * table of contents or search filters. This one differs from
   * Bullseye in that there is no extra gutter between the left
   * and main slots. It's wider too.
   *
   */

  layout: PropTypes__default["default"].oneOf(['bookworm', 'potato', 'sarge', 'bullseye', 'buster', 'slink']),
  /**
   * Side content for  Bullseye, Buster, and Slink layouts
   */
  side: PropTypes__default["default"].node
};

exports.PageLayout = PageLayout;
exports["default"] = PageLayout;