@6thquake/react-material/Panel/LoadingPanel.js

React components that implement Google's Material Design.

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _withStyles = _interopRequireDefault(require("../styles/withStyles"));

var _Progress = _interopRequireDefault(require("../Progress"));

var styles = function styles(theme) {
  var _mask;

  return {
    root1: {
      width: '100%',
      backgroundColor: 'white',
      position: 'relative'
    },
    progress: {
      position: 'relative',
      top: 0,
      zIndex: 99999
    },
    mask: (_mask = {
      position: 'absolute',
      top: 0,
      right: 0,
      bottom: 0,
      left: 0,
      overflow: 'hidden',
      outline: 0,
      backgroundColor: 'rgb(0, 0, 0)',
      filter: 'alpha(opacity=30)'
    }, (0, _defineProperty2.default)(_mask, "backgroundColor", 'rgba(0, 0, 0, 0.3)'), (0, _defineProperty2.default)(_mask, "zIndex", 9999), _mask),
    loading: {
      position: 'absolute',
      marginLeft: -40,
      marginTop: -20,
      top: '50%',
      left: '50%',
      width: 80,
      height: 40,
      margin: '0 auto',
      '@global span': {
        display: 'inline-block',
        width: 8,
        height: '100%',
        borderRadius: 4,
        marginLeft: 6,
        background: 'lightgreen',
        animation: 'load 1s ease infinite',
        '&:nth-child(2)': {
          animationDelay: '0.2s'
        },
        '&:nth-child(3)': {
          animationDelay: '0.4s'
        },
        '&:nth-child(4)': {
          animationDelay: '0.6s'
        },
        '&:nth-child(5)': {
          animationDelay: '0.8s'
        }
      }
    },
    '@keyframes load': {
      '0%,100%': {
        height: 40,
        background: 'lightgreen'
      },
      '50%': {
        height: 70,
        margin: '-15px 0',
        background: 'lightblue'
      }
    }
  };
};

var LoadingPanel =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(LoadingPanel, _Component);

  function LoadingPanel(props) {
    (0, _classCallCheck2.default)(this, LoadingPanel);
    return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(LoadingPanel).call(this, props));
  }

  (0, _createClass2.default)(LoadingPanel, [{
    key: "loading",
    value: function loading() {
      var classes = this.props.classes;
      return _react.default.createElement("div", {
        className: classes.mask
      }, _react.default.createElement("div", {
        className: classes.loading
      }, _react.default.createElement("span", null), _react.default.createElement("span", null), _react.default.createElement("span", null), _react.default.createElement("span", null), _react.default.createElement("span", null)));
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props = this.props,
          children = _this$props.children,
          type = _this$props.type,
          loaded = _this$props.loaded,
          estimatedTime = _this$props.estimatedTime,
          others = (0, _objectWithoutProperties2.default)(_this$props, ["children", "type", "loaded", "estimatedTime"]);
      var classes = this.props.classes;
      return _react.default.createElement("div", {
        className: classes.root1
      }, type === 'progress' ? _react.default.createElement("div", {
        className: classes.progress
      }, _react.default.createElement(_Progress.default, (0, _extends2.default)({
        isPromise: true,
        isFinish: loaded,
        estimatedTime: estimatedTime
      }, others))) : null, type === 'mask' && !loaded ? this.loading() : null, children);
    }
  }]);
  return LoadingPanel;
}(_react.Component);

LoadingPanel.propTypes = {
  /**
   * Loading estimated time
   */
  estimatedTime: _propTypes.default.number,

  /**
   * If true, loading is finish.
   */
  loaded: _propTypes.default.bool,

  /**
   * Loading type; if progress,loading without mask，if mask,loading with mask
   */
  type: _propTypes.default.string
};
LoadingPanel.defaultProps = {
  type: 'progress',
  loaded: false,
  estimatedTime: 1
};

var _default = (0, _withStyles.default)(styles, {
  name: 'RMLoadingPanel'
})(LoadingPanel);

exports.default = _default;