lucid-ui
Version:
A UI component library from AppNexus.
89 lines (88 loc) • 3.06 kB
JavaScript
import _ from 'lodash';
import React from 'react';
import PropTypes from 'react-peek/prop-types';
import { lucidClassNames } from '../../util/style-helpers';
import { findTypes, omitProps, } from '../../util/component-types';
const cx = lucidClassNames.bind('&-Panel');
const { bool, node, object, string } = PropTypes;
const PanelHeader = (_props) => null;
PanelHeader.displayName = 'Panel.Header';
PanelHeader.peek = {
description: `
Content displayed at the top of the panel.
`,
};
PanelHeader.propTypes = {
description: string,
children: node,
};
PanelHeader.propName = 'Header';
const PanelFooter = (_props) => null;
PanelFooter.displayName = 'Panel.Footer';
PanelFooter.peek = {
description: `
Content displayed at the bottom of the panel.
`,
};
PanelFooter.propTypes = {
description: string,
children: node,
};
PanelFooter.propName = 'Footer';
const defaultProps = {
isGutterless: false,
hasMargin: true,
isScrollable: true,
};
export const Panel = (props) => {
const { children, className, isGutterless, hasMargin, style, isScrollable, ...passThroughs } = props;
const headerChildProp = _.first(_.map(findTypes(props, Panel.Header), 'props'));
const footerChildProp = _.first(_.map(findTypes(props, Panel.Footer), 'props'));
return (React.createElement("div", Object.assign({}, omitProps(passThroughs, undefined, _.keys(Panel.propTypes)), { className: cx('&', className, {
'&-is-not-gutterless': !isGutterless,
'&-has-margin': hasMargin,
'&-is-scrollable': isScrollable,
}), style: style }),
headerChildProp ? (React.createElement("header", Object.assign({}, headerChildProp, { className: cx('&-Header', headerChildProp.className) }))) : null,
React.createElement("section", { className: cx('&-content') }, children),
footerChildProp ? (React.createElement("footer", Object.assign({}, footerChildProp, { className: cx('&-Footer', footerChildProp.className) }))) : null));
};
Panel.defaultProps = defaultProps;
Panel.displayName = 'Panel';
Panel.peek = {
description: `
Panel is used to wrap content to better organize elements in window.
`,
categories: ['layout'],
};
Panel.propTypes = {
className: string `
Appended to the component-specific class names set on the root element.
`,
Header: node `
*Child Element* - Header contents. Only one \`Header\` is used.
`,
Footer: node `
*Child Element* - Footer contents. Only one \`Footer\` is used.
`,
children: node `
Generally you should only have a single child element so the centering
works correctly.
`,
isGutterless: bool `
If set to true, creates a content section with no padding.
`,
hasMargin: bool `
If set to false, removes margin around the Panel
`,
style: object `
Styles that are passed through to root element.
`,
isScrollable: bool `
If set to true, makes content overflow scrollable, when Panel has a set
height.
`,
};
Panel.Header = PanelHeader;
Panel.Footer = PanelFooter;
export default Panel;