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

A UI component library from AppNexus.

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

/* 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 OverlayWrapper, { OverlayWrapperMessage } from '../OverlayWrapper/OverlayWrapper';
import LoadingMessage from '../LoadingMessage/LoadingMessage';
var cx = lucidClassNames.bind('&-LoadingIndicator');
var bool = PropTypes.bool,
    node = PropTypes.node,
    oneOf = PropTypes.oneOf,
    string = PropTypes.string;
var defaultProps = {
  hasOverlay: true,
  isLoading: false,
  overlayKind: 'light',
  anchorMessage: false,
  fixedMessage: false
};
export var LoadingIndicator = function LoadingIndicator(props) {
  var children = props.children,
      className = props.className,
      isLoading = props.isLoading,
      anchorMessage = props.anchorMessage,
      fixedMessage = props.fixedMessage;
  var messageElement = getFirst(props, LoadingIndicator.LoadingMessage, /*#__PURE__*/React.createElement(LoadingMessage, null));
  var otherChildren = rejectTypes(children, LoadingIndicator.LoadingMessage);
  return /*#__PURE__*/React.createElement(OverlayWrapper, _extends({}, omitProps(props, undefined, // _.keys(LoadingIndicator.propTypes)
  ['children', 'className', 'isLoading', 'Message']), {
    className: cx('&', className),
    isVisible: isLoading,
    anchorMessage: anchorMessage,
    fixedMessage: fixedMessage
  }), otherChildren, /*#__PURE__*/React.createElement(OverlayWrapperMessage, null, messageElement));
};
LoadingIndicator.LoadingMessage = LoadingMessage;
LoadingIndicator.displayName = 'LoadingIndicator';
LoadingIndicator.peek = {
  description: "\n\t\tA loading indicator wrapper with optional overlay.\n\t",
  notes: {
    overview: "\n\t\t\tA visual indication that a section or component of the interface is loading.\n\t\t",
    intendedUse: "\n\t\t\t- Use in places where data takes time to load. LoadingIndicator lets users know that the information they expect to see will appear shortly.\n\t\t\t- Use the light overlay, `overlayKind: \"light\"`\n\t\t",
    technicalRecommendations: "\n\t\t\tIf a page is displaying a lot of data coming from multiple sources, try as best as possible to load the individual parts of the UI, so as not to disrupt the user and block them from interacting with the entire page until all data is loaded.\n\t\t"
  },
  categories: ['Loading Indicator'],
  madeFrom: ['OverlayWrapper', 'LoadingMessage']
};
LoadingIndicator.propTypes = {
  className: string,
  children: node,
  hasOverlay: bool,
  isLoading: bool,
  anchorMessage: bool,
  fixedMessage: bool,
  overlayKind: oneOf(['light', 'dark'])
};
LoadingIndicator.defaultProps = defaultProps;
export default LoadingIndicator;