lucid-ui/lib/components/LoadingSkeletons/LoadingSkeleton.js

A UI component library from AppNexus.

import _times from "lodash/times";

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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

import React from 'react';
import ReactPlaceholder from 'react-placeholder';
import { lucidClassNames } from '../../util/style-helpers';
import LoadingIndicator from '../LoadingIndicator/LoadingIndicator';
import Panel from '../Panel/Panel';
var animationStyle = lucidClassNames.bind('&-LoadingSkeleton-animatedSkeleton');
export var LoadingSkeleton = function LoadingSkeleton(props) {
  var _props = _objectSpread({}, props),
      Skeleton = _props.Skeleton,
      isLoading = _props.isLoading,
      children = _props.children,
      className = _props.className,
      header = _props.header,
      style = _props.style,
      _props$width = _props.width,
      width = _props$width === void 0 ? undefined : _props$width,
      _props$height = _props.height,
      height = _props$height === void 0 ? undefined : _props$height,
      _props$isPanel = _props.isPanel,
      isPanel = _props$isPanel === void 0 ? false : _props$isPanel,
      _props$hasOverlay = _props.hasOverlay,
      hasOverlay = _props$hasOverlay === void 0 ? false : _props$hasOverlay,
      _props$overlayKind = _props.overlayKind,
      overlayKind = _props$overlayKind === void 0 ? 'light' : _props$overlayKind,
      _props$numRows = _props.numRows,
      numRows = _props$numRows === void 0 ? 1 : _props$numRows,
      _props$numColumns = _props.numColumns,
      numColumns = _props$numColumns === void 0 ? 1 : _props$numColumns,
      _props$marginTop = _props.marginTop,
      marginTop = _props$marginTop === void 0 ? 2 : _props$marginTop,
      _props$marginBottom = _props.marginBottom,
      marginBottom = _props$marginBottom === void 0 ? 2 : _props$marginBottom,
      _props$marginRight = _props.marginRight,
      marginRight = _props$marginRight === void 0 ? 2 : _props$marginRight,
      _props$marginLeft = _props.marginLeft,
      marginLeft = _props$marginLeft === void 0 ? 2 : _props$marginLeft;

  if (!isLoading) {
    return /*#__PURE__*/React.createElement("div", {
      className: className,
      "data-test-id": "loadingSkeleton-Children"
    }, children);
  }

  if (!Skeleton) {
    return /*#__PURE__*/React.createElement(LoadingIndicator, {
      "data-test-id": "loadingSkeleton-LoadingIndicator",
      isLoading: true,
      isVisible: true,
      hasOverlay: hasOverlay,
      overlayKind: overlayKind
    });
  }

  var skeletonProps = _objectSpread(_objectSpread({}, style), {}, {
    width: width,
    height: height,
    display: 'flex'
  });

  var skeletonPlaceholder = /*#__PURE__*/React.createElement(Skeleton, _extends({
    "data-test-id": "loadingSkeleton_Skeleton"
  }, skeletonProps));

  var matrix = _times(numColumns, function (column) {
    return /*#__PURE__*/React.createElement("div", {
      key: "column".concat(column),
      style: {
        display: 'inline-block',
        marginRight: marginRight,
        marginLeft: marginLeft
      },
      "data-test-id": "loadingSkeleton-SkeletonColumn"
    }, /*#__PURE__*/React.createElement("div", {
      style: {
        display: 'inline-block'
      }
    }, _times(numRows, function (row) {
      return /*#__PURE__*/React.createElement("div", {
        className: animationStyle('&', className),
        "data-test-id": "loadingSkeleton-ReactPlaceholder",
        key: "row".concat(row),
        style: {
          marginTop: marginTop,
          marginBottom: marginBottom
        }
      }, /*#__PURE__*/React.createElement("div", null, header ? /*#__PURE__*/React.createElement("div", {
        "data-test-id": "loadingSkeleton-SkeletonHeader",
        style: {
          marginBottom: 2
        }
      }, header) : null, /*#__PURE__*/React.createElement(ReactPlaceholder, {
        showLoadingAnimation: true,
        ready: !isLoading,
        customPlaceholder: skeletonPlaceholder
      })));
    })));
  });

  var skeletonMatrix = /*#__PURE__*/React.createElement("div", null, matrix);
  return isPanel ? /*#__PURE__*/React.createElement(Panel, {
    "data-test-id": "loadingSkeleton-Panel"
  }, skeletonMatrix) : skeletonMatrix;
};
export default LoadingSkeleton;