lucid-ui/lib/components/Panel/Panel.js

A UI component library from AppNexus.

import _keys from "lodash/keys";
import _map from "lodash/map";
import _first from "lodash/first";

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

import React from 'react';
import PropTypes from 'react-peek/prop-types';
import { lucidClassNames } from '../../util/style-helpers';
import { findTypes, omitProps } from '../../util/component-types';
var cx = lucidClassNames.bind('&-Panel');
var bool = PropTypes.bool,
    node = PropTypes.node,
    object = PropTypes.object,
    string = PropTypes.string;

var PanelHeader = function PanelHeader(_props) {
  return null;
};

PanelHeader.displayName = 'Panel.Header';
PanelHeader.peek = {
  description: "\n\t\tContent displayed at the top of the panel.\n\t"
};
PanelHeader.propTypes = {
  description: string,
  children: node
};
PanelHeader.propName = 'Header';

var PanelFooter = function PanelFooter(_props) {
  return null;
};

PanelFooter.displayName = 'Panel.Footer';
PanelFooter.peek = {
  description: "\n\t\tContent displayed at the bottom of the panel.\n\t"
};
PanelFooter.propTypes = {
  description: string,
  children: node
};
PanelFooter.propName = 'Footer';
var defaultProps = {
  isGutterless: false,
  hasMargin: true,
  isScrollable: true
};
export var Panel = function Panel(props) {
  var children = props.children,
      className = props.className,
      isGutterless = props.isGutterless,
      hasMargin = props.hasMargin,
      style = props.style,
      isScrollable = props.isScrollable,
      passThroughs = _objectWithoutProperties(props, ["children", "className", "isGutterless", "hasMargin", "style", "isScrollable"]);

  var headerChildProp = _first(_map(findTypes(props, Panel.Header), 'props'));

  var footerChildProp = _first(_map(findTypes(props, Panel.Footer), 'props'));

  return /*#__PURE__*/React.createElement("div", _extends({}, omitProps(passThroughs, undefined, _keys(Panel.propTypes)), {
    className: cx('&', className, {
      '&-is-not-gutterless': !isGutterless,
      '&-has-margin': hasMargin,
      '&-is-scrollable': isScrollable
    }),
    style: style
  }), headerChildProp ? /*#__PURE__*/React.createElement("header", _extends({}, headerChildProp, {
    className: cx('&-Header', headerChildProp.className)
  })) : null, /*#__PURE__*/React.createElement("section", {
    className: cx('&-content')
  }, children), footerChildProp ? /*#__PURE__*/React.createElement("footer", _extends({}, footerChildProp, {
    className: cx('&-Footer', footerChildProp.className)
  })) : null);
};
Panel.defaultProps = defaultProps;
Panel.displayName = 'Panel';
Panel.peek = {
  description: "\n\t\tPanel is used to wrap content to better organize elements in window.\n\t",
  categories: ['layout']
};
Panel.propTypes = {
  className: string,
  Header: node,
  Footer: node,
  children: node,
  isGutterless: bool,
  hasMargin: bool,
  style: object,
  isScrollable: bool
};
Panel.Header = PanelHeader;
Panel.Footer = PanelFooter;
export default Panel;