lucid-ui
Version:
A UI component library from Xandr.
87 lines • 3.01 kB
JavaScript
import _ from 'lodash';
import React from 'react';
import PropTypes from 'prop-types';
import { lucidClassNames } from '../../util/style-helpers';
import { findTypes } 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", { ...passThroughs, className: cx('&', className, {
'&-is-not-gutterless': !isGutterless,
'&-has-margin': hasMargin,
'&-is-scrollable': isScrollable,
}), style: style },
headerChildProp ? (React.createElement("header", { ...headerChildProp, className: cx('&-Header', headerChildProp.className) })) : null,
React.createElement("section", { className: cx('&-content') }, children),
footerChildProp ? (React.createElement("footer", { ...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 = {
/**
Appended to the component-specific class names set on the root element.
*/
className: string,
/*
*Child Element* - Header contents. Only one \`Header\` is used.
*/
Header: node,
/**
*Child Element* - Footer contents. Only one \`Footer\` is used.
*/
Footer: node,
/**
Generally you should only have a single child element so the centering
works correctly.
*/
children: node,
/**
If set to true, creates a content section with no padding.
*/
isGutterless: bool,
/**
Styles that are passed through to root element.
*/
style: object,
/**
If set to true, makes content overflow scrollable, when Panel has a set
height.
*/
isScrollable: bool,
};
Panel.Header = PanelHeader;
Panel.Footer = PanelFooter;
export default Panel;
//# sourceMappingURL=Panel.js.map