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

A UI component library from AppNexus.

import _keys from "lodash/keys";
import _get from "lodash/get";

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; }

/* eslint-disable react/prop-types */
import React from 'react';
import PropTypes from 'react-peek/prop-types';
import { lucidClassNames } from '../../util/style-helpers';
import { getFirst, rejectTypes, omitProps } from '../../util/component-types';
import { CSSTransition } from 'react-transition-group';
var cx = lucidClassNames.bind('&-OverlayWrapper');
var bool = PropTypes.bool,
    node = PropTypes.node,
    oneOf = PropTypes.oneOf,
    string = PropTypes.string;
export var OverlayWrapperMessage = function OverlayWrapperMessage(_props) {
  return null;
};
OverlayWrapperMessage.displayName = 'OverlayWrapper.Message';
OverlayWrapperMessage.peek = {
  description: "\n\t\tThe Message to display in the overlay.\n\t"
};
OverlayWrapperMessage.propName = 'Message';
OverlayWrapperMessage.propTypes = {
  children: node
};
var defaultProps = {
  hasOverlay: true,
  overlayKind: 'light',
  anchorMessage: false,
  fixedMessage: false,
  isVisible: false
};
export var OverlayWrapper = function OverlayWrapper(props) {
  var hasOverlay = props.hasOverlay,
      isVisible = props.isVisible,
      className = props.className,
      children = props.children,
      overlayKind = props.overlayKind,
      anchorMessage = props.anchorMessage,
      fixedMessage = props.fixedMessage,
      passThroughs = _objectWithoutProperties(props, ["hasOverlay", "isVisible", "className", "children", "overlayKind", "anchorMessage", "fixedMessage"]);

  var messageElementProp = _get(getFirst(props, OverlayWrapperMessage), 'props', {});

  var otherChildren = rejectTypes(children, [OverlayWrapperMessage]);
  return /*#__PURE__*/React.createElement("div", _extends({}, omitProps(passThroughs, undefined, _keys(OverlayWrapper.propTypes)), {
    className: cx('&', className)
  }), otherChildren, /*#__PURE__*/React.createElement(CSSTransition, {
    in: isVisible,
    classNames: cx('&-message-container'),
    timeout: 300,
    unmountOnExit: true
  }, /*#__PURE__*/React.createElement("div", {
    className: cx('&-message-container', {
      '&-has-overlay': hasOverlay,
      '&-kind-light': hasOverlay && overlayKind === 'light',
      '&-anchored-message': anchorMessage,
      '&-fixed-message': fixedMessage
    })
  }, /*#__PURE__*/React.createElement("div", messageElementProp))));
};
OverlayWrapper.defaultProps = defaultProps;
OverlayWrapper.displayName = 'OverlayWrapper';
OverlayWrapper.peek = {
  description: "\n\t\tA wrapper with optional overlay to wrap content. `Overlay` is meant\n\t\tfor overlaying an entire page, while this component is meant to wrap\n\t\tanother component and cover its content.\n\t",
  categories: ['utility']
};
OverlayWrapper.propTypes = {
  isVisible: bool,
  hasOverlay: bool,
  className: string,
  children: node,
  overlayKind: oneOf(['light', 'dark']),
  anchorMessage: bool,
  fixedMessage: bool,
  Message: node
};
OverlayWrapper.Message = OverlayWrapperMessage;
export default OverlayWrapper;