@mskcc/carbon-react
Version:
Carbon react components for the MSKCC DSM
252 lines (246 loc) • 7.86 kB
JavaScript
/**
* MSKCC 2021, 2024
*/
import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
import * as React from 'react';
import PropTypes from 'prop-types';
// 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.createElement(Component, _extends({
className: `msk-layout-${layout}-slot msk-layout-${layout}-slot-main`
}, rest), /*#__PURE__*/React.createElement("div", {
className: `msk-layout-${layout}-slot-container`
}, /*#__PURE__*/React.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.createElement(BookwormLayout, other, children);
case 'potato':
return /*#__PURE__*/React.createElement(PotatoLayout, other, children);
case 'sarge':
return /*#__PURE__*/React.createElement(SargeLayout, other, children);
case 'bullseye':
return /*#__PURE__*/React.createElement(BullseyeLayout, _extends({
side: side
}, other), children);
case 'buster':
return /*#__PURE__*/React.createElement(BusterLayout, _extends({
side: side
}, other), children);
case 'slink':
return /*#__PURE__*/React.createElement(SlinkLayout, _extends({
side: side
}, other), children);
default:
return /*#__PURE__*/React.createElement(BookwormLayout, other, children);
}
};
const BookwormLayout = _ref3 => {
let {
as = 'main',
children,
...other
} = _ref3;
return /*#__PURE__*/React.createElement("div", _extends({
className: "msk-layout-stage"
}, other), /*#__PURE__*/React.createElement("div", {
className: "msk-layout-bookworm"
}, /*#__PURE__*/React.createElement("div", {
className: "msk-layout-bookworm-container"
}, /*#__PURE__*/React.createElement(Child, {
as: as,
layout: "bookworm"
}, children))));
};
const PotatoLayout = _ref4 => {
let {
as = 'main',
children,
...other
} = _ref4;
return /*#__PURE__*/React.createElement("div", _extends({
className: "msk-layout-stage"
}, other), /*#__PURE__*/React.createElement("div", {
className: "msk-layout-potato"
}, /*#__PURE__*/React.createElement("div", {
className: "msk-layout-potato-container"
}, /*#__PURE__*/React.createElement(Child, {
as: as,
layout: "potato"
}, children))));
};
const SargeLayout = _ref5 => {
let {
as = 'main',
children,
...other
} = _ref5;
return /*#__PURE__*/React.createElement("div", _extends({
className: "msk-layout-stage"
}, other), /*#__PURE__*/React.createElement("div", {
className: "msk-layout-sarge"
}, /*#__PURE__*/React.createElement("div", {
className: "msk-layout-sarge-container"
}, /*#__PURE__*/React.createElement(Child, {
as: as,
layout: "sarge"
}, children))));
};
const BullseyeLayout = _ref6 => {
let {
as = 'main',
children,
side,
...other
} = _ref6;
return /*#__PURE__*/React.createElement("div", _extends({
className: "msk-layout-stage"
}, other), /*#__PURE__*/React.createElement("div", {
className: "msk-layout-bullseye"
}, /*#__PURE__*/React.createElement("div", {
className: "msk-layout-bullseye-container"
}, /*#__PURE__*/React.createElement("aside", {
className: "msk-layout-bullseye-slot msk-layout-bullseye-slot-left"
}, /*#__PURE__*/React.createElement("div", {
className: "msk-layout-bullseye-slot-container"
}, /*#__PURE__*/React.createElement("div", {
className: "msk-layout-bullseye-slot-content"
}, side))), /*#__PURE__*/React.createElement(Child, {
as: as,
layout: "bullseye"
}, children))));
};
const SlinkLayout = _ref7 => {
let {
as = 'main',
children,
side,
...other
} = _ref7;
return /*#__PURE__*/React.createElement("div", _extends({
className: "msk-layout-stage"
}, other), /*#__PURE__*/React.createElement("div", {
className: "msk-layout-slink"
}, /*#__PURE__*/React.createElement("div", {
className: "msk-layout-slink-container"
}, /*#__PURE__*/React.createElement("aside", {
className: "msk-layout-slink-slot msk-layout-slink-slot-left"
}, /*#__PURE__*/React.createElement("div", {
className: "msk-layout-slink-slot-container"
}, /*#__PURE__*/React.createElement("div", {
className: "msk-layout-slink-slot-content"
}, side))), /*#__PURE__*/React.createElement(Child, {
as: as,
layout: "slink"
}, children))));
};
const BusterLayout = _ref8 => {
let {
as = 'main',
children,
side,
...other
} = _ref8;
return /*#__PURE__*/React.createElement("div", _extends({
className: "msk-layout-stage"
}, other), /*#__PURE__*/React.createElement("div", {
className: "msk-layout-buster"
}, /*#__PURE__*/React.createElement("div", {
className: "msk-layout-buster-container"
}, /*#__PURE__*/React.createElement(Child, {
as: as,
layout: "buster"
}, children), /*#__PURE__*/React.createElement("aside", {
className: "msk-layout-buster-slot msk-layout-buster-slot-right"
}, /*#__PURE__*/React.createElement("div", {
className: "msk-layout-buster-slot-container"
}, /*#__PURE__*/React.createElement("div", {
className: "msk-layout-buster-slot-content"
}, side))))));
};
PageLayout.displayName = 'PageLayout';
PageLayout.propTypes = {
children: PropTypes.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.oneOf(['bookworm', 'potato', 'sarge', 'bullseye', 'buster', 'slink']),
/**
* Side content for Bullseye, Buster, and Slink layouts
*/
side: PropTypes.node
};
export { PageLayout, PageLayout as default };