mrcio-ui
Version:
223 lines (195 loc) • 11.1 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _react = require("react");
var _react2 = _interopRequireDefault(_react);
var _dialog = require("../../dialog/dialog");
var _dialog2 = _interopRequireDefault(_dialog);
var _index = require("../../svg/index");
var _index2 = _interopRequireDefault(_index);
var _style = require("./style");
var _style2 = _interopRequireDefault(_style);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
//全局loading 大loading
var GlobalLoading = function (_Component) {
_inherits(GlobalLoading, _Component);
function GlobalLoading(props) {
_classCallCheck(this, GlobalLoading);
var _this = _possibleConstructorReturn(this, (GlobalLoading.__proto__ || Object.getPrototypeOf(GlobalLoading)).call(this, props));
_this.state = {
left: -80,
right: 0,
leftFlag: false,
rightFlag: false
};
return _this;
}
_createClass(GlobalLoading, [{
key: "componentDidMount",
/*
* this.props.open
* this.props.type
* submitting/loading 不需要传 btnText 和cancelBtnText
* title 传的是标题说明 不传就不显示 如提交中 加载中(必填)
*
* hint cancelBtnText传的是取消按钮的说明 如返回 取消 默认取消
* btnText 传的是确认的按钮的说明 如提交 确认 默认确认
* title 传的是标题说明 不传就不显示
* content 补充说明文字
* this.props.handleClose 是cancelBtnText对应按钮的方法 只在type为hint的时候传
* this.props.handleFn 是btnText对应的按钮的方法
*
*
* fail btnText 传的是确认的按钮的说明 如提交 确认 默认确认
* title 传的是标题说明 不传就不显示
* content 补充说明文字
* this.props.handleFn 是btnText对应的按钮的方法
*
* success title 传的是标题说明 不传就不显示
* content 补充说明文字
* this.props.handleFn 是btnText对应的按钮的方法
*
*
*
* */
value: function componentDidMount() {
//this.initCanvas();
}
}, {
key: "componentWillReceiveProps",
value: function componentWillReceiveProps(newProps) {
if (newProps.open && newProps.type == "loading") {
this.initCanvas();
}
}
}, {
key: "initCanvas",
value: function initCanvas() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
canvas.width = canvas.parentNode.offsetWidth;
canvas.height = canvas.parentNode.offsetHeight;
//如果浏览器支持requestAnimFrame则使用requestAnimFrame否则使用setTimeout
var requestAnimFrame = function () {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (callback) {
window.setTimeout(callback, 1000 / 60);
};
}();
// 波浪大小
var boHeight = canvas.height / 10;
var posHeight = canvas.height / 1.2;
//初始角度为0
var step = 0;
//定义三条不同波浪的颜色
var lines = ["rgba(0,222,255, 0.2)", "rgba(157,192,249, 0.2)", "rgba(0,168,255, 0.2)"];
function loop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
step++;
//画3个不同颜色的矩形
for (var j = lines.length - 1; j >= 0; j--) {
ctx.fillStyle = lines[j];
//每个矩形的角度都不同，每个之间相差45度
var angle = (step + j * 50) * Math.PI / 180;
var deltaHeight = Math.sin(angle) * boHeight;
var deltaHeightRight = Math.cos(angle) * boHeight;
ctx.beginPath();
ctx.moveTo(0, posHeight + deltaHeight);
ctx.bezierCurveTo(canvas.width / 2, posHeight + deltaHeight - boHeight, canvas.width / 2, posHeight + deltaHeightRight - boHeight, canvas.width, posHeight + deltaHeightRight);
ctx.lineTo(canvas.width, canvas.height);
ctx.lineTo(0, canvas.height);
ctx.lineTo(0, posHeight + deltaHeight);
ctx.closePath();
ctx.fill();
}
requestAnimFrame(loop);
}
loop();
}
}, {
key: "render",
value: function render() {
var _this2 = this;
var contentStyle = { width: '31.25rem', background: "#fff", maxWidth: '120rem', borderRadius: '0.25rem' };
var bodyStyle = { padding: '0', width: '100%' };
//onRequestClose={this.props.handleFn}
return _react2.default.createElement(
_dialog2.default,
{ open: this.props.open, contentStyle: contentStyle,
bodyStyle: bodyStyle },
_react2.default.createElement(
"div",
{ style: Object.assign(this.props.open ? _style2.default.tipsBoxShow : _style2.default.tipsBoxHide), ref: "aa" },
_react2.default.createElement(
"div",
{ style: this.props.type == "loading" ? null : _style2.default.svgBox },
function () {
switch (_this2.props.type) {
case 'success':
return _react2.default.createElement(_index2.default, { type: "Correct", width: "3.75rem", height: "3.75rem", fill: "#7FE57F" });
case 'fail':
return _react2.default.createElement(_index2.default, { type: "Error", width: "3.75rem", height: "3.75rem", fill: "#ff6f72" });
case 'hint':
return _react2.default.createElement(_index2.default, { type: "Hint", width: "3.75rem", height: "3.75rem", fill: "#ffbe62" });
default:
return null;
}
}()
),
_react2.default.createElement(
"div",
{
style: this.props.type == 'loading' ? _style2.default.body1 : _style2.default.body },
this.props.title ? _react2.default.createElement(
"p",
{ style: _style2.default.title },
this.props.title
) : null,
this.props.content ? _react2.default.createElement(
"p",
{ style: _style2.default.content },
this.props.content
) : null
),
this.props.type == 'fail' || this.props.type == 'success' ? _react2.default.createElement(
"div",
{ style: this.props.open ? _style2.default.buttonBoxOn : _style2.default.buttonBoxOff,
onClick: this.props.handleClose },
_react2.default.createElement(
"p",
{ style: _style2.default[this.props.type] },
this.props.btnText ? this.props.btnText : '返回'
)
) : null,
this.props.type == 'hint' ? _react2.default.createElement(
"div",
{ style: this.props.open ? _style2.default.buttonBoxOn : _style2.default.buttonBoxOff },
this.props.btnText ? _react2.default.createElement(
"p",
{ style: _style2.default.hintLeft, onClick: this.props.submitFn },
this.props.btnText
) : null,
_react2.default.createElement(
"p",
{ style: this.props.btnText ? _style2.default.hintRight : _style2.default.hint,
onClick: this.props.handleClose },
this.props.cancelBtnText ? this.props.cancelBtnText : '取消'
)
) : null,
_react2.default.createElement("canvas", { id: "canvas", style: _style2.default.canvasBox
//Object.assign(
//this.props.type == 'loading' ? {display: "block"} : {display: "none"},
//TipStyle.canvasBox)
})
)
);
}
}]);
return GlobalLoading;
}(_react.Component);
exports.default = GlobalLoading;
//# sourceMappingURL=index.js.map