@6thquake/react-material/es/Loading/Loading.js

React components that implement Google's Material Design.

import _extends from "@babel/runtime/helpers/extends";

/**
 * @ignore - do not document.
 */
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '../styles';
import { withLocale } from '../LocaleProvider';
import CircularProgress from '../CircularProgress';
import Typography from '../Typography';
import Divider from '../Divider';

const styles = theme => ({
  root: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    paddingTop: theme.spacing(1),
    paddingBottom: theme.spacing(1)
  },
  progressBox: {
    display: 'flex'
  },
  progress: {
    marginRight: theme.spacing(1)
  },
  end: {
    width: '100%',
    display: 'flex',
    alignItems: 'center'
  },
  divider: {
    margin: `0 ${theme.spacing(2)}px`,
    flex: 1
  }
});

class Loading extends React.Component {
  render() {
    const {
      classes,
      size,
      CircularProgressProps,
      color,
      content,
      status,
      message
    } = this.props;
    return React.createElement("div", {
      className: classes.root
    }, status === 'loading' && React.createElement("div", {
      className: classes.progressBox
    }, React.createElement(CircularProgress, _extends({
      className: classes.progress,
      size: size,
      color: color
    }, CircularProgressProps)), React.createElement(Typography, null, content)), status === 'end' && React.createElement("div", {
      className: classes.end
    }, React.createElement(Divider, {
      className: classes.divider
    }), React.createElement(Typography, {
      variant: "caption"
    }, message), React.createElement(Divider, {
      className: classes.divider
    })));
  }

}

Loading.defaultProps = {
  size: 24,
  color: 'primary',
  status: 'closed',
  content: 'loading...',
  message: 'No more content'
};
process.env.NODE_ENV !== "production" ? Loading.propTypes = {
  /**
   * Override or extend the styles applied to the component.
   * See [CSS API](#css-api) below for more details.
   */
  CircularProgressProps: PropTypes.object,

  /**
   * the status of Loading
   */
  classes: PropTypes.object.isRequired,

  /**
   * size of icon
   */
  color: PropTypes.string,

  /**
   * color of icon
   */
  content: PropTypes.string,

  /**
   * tips to end
   */
  size: PropTypes.number,
  status: PropTypes.oneOf(['loading', 'end', 'closed'])
} : void 0;
export default withStyles(styles, {
  withTheme: true
})(withLocale({
  name: 'Loading'
})(Loading));