@beisen/ethos
Version:
beisencloud pc react components
206 lines (181 loc) • 6.36 kB
JavaScript
'use strict';
var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
var _createClass2 = require('babel-runtime/helpers/createClass');
var _createClass3 = _interopRequireDefault(_createClass2);
var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
var _inherits2 = require('babel-runtime/helpers/inherits');
var _inherits3 = _interopRequireDefault(_inherits2);
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
require('./index.scss');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/*
* author:lianglongfei
* desc:loading component
*
* add props hidden zhongjiahao
* custom style
*/
var Loading = function (_Component) {
(0, _inherits3.default)(Loading, _Component);
function Loading(props) {
(0, _classCallCheck3.default)(this, Loading);
var _this = (0, _possibleConstructorReturn3.default)(this, (Loading.__proto__ || (0, _getPrototypeOf2.default)(Loading)).call(this, props));
_this.cancelBubble = function (event) {
var evt = event || window.event;
if (evt.stopPropagation) {
// W3C
evt.stopPropagation();
} else {
// IE
evt.cancelBubble = true;
}
};
_this.state = {
hidden: _this.props.hidden
};
return _this;
}
(0, _createClass3.default)(Loading, [{
key: 'renderElm',
value: function renderElm(count, type) {
var temp = [];
for (var i = 1; i <= count; i++) {
type ? temp.push(_react2.default.createElement('div', { key: i, className: "Loading__block" + i })) : temp.push(_react2.default.createElement('div', { key: i, className: "loading__img" + i }));
}
return temp;
}
}, {
key: 'renderAnimation',
value: function renderAnimation() {
var self = this;
var _props = this.props,
type = _props.type,
wrapStyle = _props.wrapStyle;
var imgCount = type == "index" ? 3 : type == "standar" ? 3 : 5;
var blockCount = type == "index" ? 4 : type == "standar" ? 5 : 6;
switch (type) {
case "index":
return _react2.default.createElement(
'div',
{ className: 'Loading__container Loading__index-container' },
_react2.default.createElement(
'div',
{ className: 'loading__indexPage' },
self.renderElm(imgCount)
),
_react2.default.createElement('div', { className: 'Loading__temp' }),
this.renderElm(blockCount, 1),
_react2.default.createElement('div', { className: 'Loading__shadow' })
);
break;
case "standar":
return _react2.default.createElement(
'div',
{ className: 'Loading__container Loading__standar-container' },
_react2.default.createElement(
'div',
{ className: 'loading__standarPage' },
self.renderElm(imgCount)
),
_react2.default.createElement('div', { className: 'Loading__temp' }),
this.renderElm(blockCount, 1),
_react2.default.createElement('div', { className: 'Loading__shadow' })
);
break;
case "detail":
return _react2.default.createElement(
'div',
{ className: 'Loading__container Loading__detail-container' },
_react2.default.createElement(
'div',
{ className: 'loading__detailPage' },
self.renderElm(imgCount)
),
_react2.default.createElement('div', { className: 'Loading__temp' }),
this.renderElm(blockCount, 1),
_react2.default.createElement('div', { className: 'Loading__shadow' })
);
break;
case "small":
return _react2.default.createElement(
'div',
{ className: 'loading__wrap', style: wrapStyle },
_react2.default.createElement(
'div',
{ className: 'loading__showarea' },
_react2.default.createElement(
'div',
{ className: 'loading__xwrap' },
_react2.default.createElement(
'div',
{ className: 'loading__ywrap' },
_react2.default.createElement('div', { className: 'loading__small' })
)
)
)
);
break;
default:
return _react2.default.createElement(
'div',
{ className: 'loading__wrap', style: wrapStyle },
_react2.default.createElement(
'div',
{ className: 'loading__showarea' },
_react2.default.createElement(
'div',
{ className: 'loading__xwrap' },
_react2.default.createElement(
'div',
{ className: 'loading__ywrap' },
_react2.default.createElement('div', { className: 'loading__sun' })
)
)
),
_react2.default.createElement(
'div',
{ className: 'loading__threeLine' },
_react2.default.createElement('div', { className: "loading__line longding__longline" }),
_react2.default.createElement('div', { className: "loading__line loading__midline" }),
_react2.default.createElement('div', { className: "loading__line loading__shortline" })
)
);
}
}
}, {
key: 'render',
value: function render() {
var _style = {
background: 'rgba(255, 255, 255, 0.8)',
position: this.props.isFixed ? 'fixed' : 'absolute',
transform: 'translateZ(0)', // 解决ie下小太阳错位问题
zIndex: '999999',
width: '100%',
height: '100%',
top: 0,
left: 0
};
var _props2 = this.props,
_props2$hidden = _props2.hidden,
hidden = _props2$hidden === undefined ? false : _props2$hidden,
_props2$style = _props2.style,
style = _props2$style === undefined ? {} : _props2$style;
var tempDis = this.props.hidden ? { display: 'none' } : { display: 'block' };
var __style = (0, _extends3.default)(tempDis, _style, style);
return _react2.default.createElement(
'div',
{ className: "loading " + "loading_is-show", style: __style, onClick: this.cancelBubble },
this.renderAnimation()
);
}
}]);
return Loading;
}(_react.Component);
module.exports = Loading;