dialog-react
Advanced tools
Comparing version
140
index.js
@@ -6,3 +6,3 @@ "use strict"; | ||
}); | ||
exports.Toast = exports.Confirm = exports.Prompt = exports.ConfirmAuto = undefined; | ||
exports.Toast = exports.Confirm = exports.Prompt = exports.ConfirmAuto = exports.Notification = undefined; | ||
@@ -29,11 +29,10 @@ 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 ConfirmAuto = exports.ConfirmAuto = function (_Component) { | ||
_inherits(ConfirmAuto, _Component); | ||
var Notification = exports.Notification = function (_Component) { | ||
_inherits(Notification, _Component); | ||
function ConfirmAuto() { | ||
_classCallCheck(this, ConfirmAuto); | ||
function Notification() { | ||
_classCallCheck(this, Notification); | ||
var _this = _possibleConstructorReturn(this, (ConfirmAuto.__proto__ || Object.getPrototypeOf(ConfirmAuto)).call(this)); | ||
var _this = _possibleConstructorReturn(this, (Notification.__proto__ || Object.getPrototypeOf(Notification)).call(this)); | ||
_this.count = 3; | ||
_this.state = { | ||
@@ -45,2 +44,90 @@ count: _this.count | ||
_createClass(Notification, [{ | ||
key: "componentDidMount", | ||
value: function componentDidMount() { | ||
var _circle = this.refs.circle; | ||
if (_circle.getContext) { | ||
var ctx = _circle.getContext("2d"); | ||
ctx.beginPath(); | ||
ctx.strokeStyle = "white"; | ||
var circle = { | ||
x: 15, //圆心的x轴坐标值 | ||
y: 15, //圆心的y轴坐标值 | ||
r: 14 //圆的半径 | ||
}; | ||
ctx.arc(circle.x, circle.y, circle.r, 0, Math.PI * 2, false); | ||
ctx.stroke(); | ||
ctx.beginPath(); | ||
ctx.moveTo(9, 9); | ||
ctx.lineTo(21, 21); | ||
ctx.stroke(); | ||
ctx.beginPath(); | ||
ctx.moveTo(21, 9); | ||
ctx.lineTo(9, 21); | ||
ctx.stroke(); | ||
ctx.beginPath(); | ||
ctx.moveTo(15, 30); | ||
ctx.lineTo(15, 50); | ||
ctx.stroke(); | ||
} | ||
} | ||
}, { | ||
key: "render", | ||
value: function render() { | ||
return _react2.default.createElement( | ||
"div", | ||
{ className: this.props.show ? "notification-container" : "notification-hidden" }, | ||
_react2.default.createElement( | ||
"div", | ||
{ className: "notification-box" }, | ||
_react2.default.createElement("canvas", { ref: "circle", className: "notification-tail", width: "30px", height: "50px" }), | ||
_react2.default.createElement( | ||
"div", | ||
{ className: "notification-title" }, | ||
"\u901A\u77E5" | ||
), | ||
_react2.default.createElement( | ||
"div", | ||
{ className: "notification-content" }, | ||
"\u7531\u4E8E\u7CFB\u7EDF\u539F\u56E0\uFF0C\u5173\u4E8E\u4FDD\u65F6\u6377\u54C1\u724C\u6240\u6709\u7684\u67E5\u8BE2\u65B9\u5F0F\u5C06\u6682\u505C\u67E5\u8BE2\uFF0C\u5173\u95ED\u65F6\u95F4\u7EA62\u5929\uFF0C\u82E5\u6062\u590D\u67E5\u8BE2\u6211\u4EEC\u4F1A\u7B2C\u4E00\u65F6\u95F4\u901A\u77E5\u5230\u60A8\uFF01\u8BF7\u6CE8\u610F\u67E5\u770B\u7CFB\u7EDF\u6D88\u606F\u3002\u611F\u8C22\u60A8\u7684\u652F\u6301\uFF01" | ||
), | ||
_react2.default.createElement( | ||
"div", | ||
{ className: "notification-buttons", onClick: this.props.close }, | ||
_react2.default.createElement("input", { className: "notification-close", type: "button", defaultValue: "\u5173\u95ED" }), | ||
_react2.default.createElement("input", { className: "notification-util", type: "button", value: "xxx" }) | ||
) | ||
) | ||
); | ||
} | ||
}]); | ||
return Notification; | ||
}(_react.Component); | ||
Notification.propTypes = { | ||
content: _propTypes2.default.string.isRequired, //显示内容 | ||
show: _propTypes2.default.bool.isRequired, //控制显示 | ||
close: _propTypes2.default.func.isRequired //控制关闭 | ||
}; | ||
var ConfirmAuto = exports.ConfirmAuto = function (_Component2) { | ||
_inherits(ConfirmAuto, _Component2); | ||
function ConfirmAuto() { | ||
_classCallCheck(this, ConfirmAuto); | ||
var _this2 = _possibleConstructorReturn(this, (ConfirmAuto.__proto__ || Object.getPrototypeOf(ConfirmAuto)).call(this)); | ||
_this2.count = 3; | ||
_this2.state = { | ||
count: _this2.count | ||
}; | ||
return _this2; | ||
} | ||
_createClass(ConfirmAuto, [{ | ||
@@ -56,3 +143,3 @@ key: "componentWillReceiveProps", | ||
value: function componentDidMount() { | ||
this.countdown(); | ||
if (this.props.show) this.countdown(); | ||
} | ||
@@ -62,12 +149,13 @@ }, { | ||
value: function countdown() { | ||
var _this2 = this; | ||
var _this3 = this; | ||
clearInterval(this.timer); | ||
this.timer = setInterval(function () { | ||
var _count = --_this2.state.count; | ||
var _count = --_this3.state.count; | ||
if (_count < 1) { | ||
clearInterval(_this2.timer); | ||
_this2.props.close(); | ||
clearInterval(_this3.timer); | ||
_this3.props.close(); | ||
} | ||
_this2.setState({ | ||
count: _count < 1 ? _this2.count : _count | ||
_this3.setState({ | ||
count: _count < 1 ? _this3.count : _count | ||
}); | ||
@@ -109,4 +197,4 @@ }, 1000); | ||
var Prompt = exports.Prompt = function (_Component2) { | ||
_inherits(Prompt, _Component2); | ||
var Prompt = exports.Prompt = function (_Component3) { | ||
_inherits(Prompt, _Component3); | ||
@@ -164,4 +252,4 @@ function Prompt() { | ||
var Confirm = exports.Confirm = function (_Component3) { | ||
_inherits(Confirm, _Component3); | ||
var Confirm = exports.Confirm = function (_Component4) { | ||
_inherits(Confirm, _Component4); | ||
@@ -208,4 +296,4 @@ function Confirm() { | ||
var Toast = exports.Toast = function (_Component4) { | ||
_inherits(Toast, _Component4); | ||
var Toast = exports.Toast = function (_Component5) { | ||
_inherits(Toast, _Component5); | ||
@@ -215,8 +303,8 @@ function Toast(props) { | ||
var _this5 = _possibleConstructorReturn(this, (Toast.__proto__ || Object.getPrototypeOf(Toast)).call(this, props)); | ||
var _this6 = _possibleConstructorReturn(this, (Toast.__proto__ || Object.getPrototypeOf(Toast)).call(this, props)); | ||
_this5.state = { | ||
_this6.state = { | ||
show: props.show | ||
}; | ||
return _this5; | ||
return _this6; | ||
} | ||
@@ -227,7 +315,7 @@ | ||
value: function componentDidMount() { | ||
var _this6 = this; | ||
var _this7 = this; | ||
setTimeout(function () { | ||
_this6.props.close(); | ||
_this6.isShow = false; | ||
_this7.props.close(); | ||
_this7.isShow = false; | ||
}, this.props.long * 1000); | ||
@@ -234,0 +322,0 @@ } |
@@ -5,2 +5,69 @@ import React, {Component} from "react" | ||
export class Notification extends Component { | ||
constructor() { | ||
super() | ||
this.state = { | ||
count: this.count | ||
} | ||
} | ||
componentDidMount() { | ||
let _circle = this.refs.circle | ||
if(_circle.getContext){ | ||
let ctx = _circle.getContext("2d") | ||
ctx.beginPath() | ||
ctx.strokeStyle = "white" | ||
let circle = { | ||
x : 15, //圆心的x轴坐标值 | ||
y : 15, //圆心的y轴坐标值 | ||
r : 14 //圆的半径 | ||
} | ||
ctx.arc(circle.x, circle.y, circle.r, 0, Math.PI * 2, false) | ||
ctx.stroke() | ||
ctx.beginPath() | ||
ctx.moveTo(9, 9) | ||
ctx.lineTo(21, 21) | ||
ctx.stroke() | ||
ctx.beginPath() | ||
ctx.moveTo(21, 9) | ||
ctx.lineTo(9, 21) | ||
ctx.stroke() | ||
ctx.beginPath() | ||
ctx.moveTo(15, 30) | ||
ctx.lineTo(15, 50) | ||
ctx.stroke() | ||
} | ||
} | ||
render() { | ||
return ( | ||
<div className={this.props.show ? "notification-container" : "notification-hidden"}> | ||
<div className="notification-box"> | ||
<canvas ref="circle" className="notification-tail" width="30px" height="50px"></canvas> | ||
<div className="notification-title"> | ||
通知 | ||
</div> | ||
<div className="notification-content"> | ||
由于系统原因,关于保时捷品牌所有的查询方式将暂停查询,关闭时间约2天,若恢复查询我们会第一时间通知到您!请注意查看系统消息。感谢您的支持! | ||
</div> | ||
<div className="notification-buttons" onClick={this.props.close}> | ||
<input className="notification-close" type="button" defaultValue="关闭" /> | ||
<input className="notification-util" type="button" value="xxx" /> | ||
</div> | ||
</div> | ||
</div> | ||
) | ||
} | ||
} | ||
Notification.propTypes = { | ||
content: PropTypes.string.isRequired, //显示内容 | ||
show: PropTypes.bool.isRequired, //控制显示 | ||
close: PropTypes.func.isRequired //控制关闭 | ||
} | ||
export class ConfirmAuto extends Component { | ||
@@ -22,6 +89,7 @@ constructor() { | ||
componentDidMount() { | ||
this.countdown() | ||
if(this.props.show) this.countdown() | ||
} | ||
countdown() { | ||
clearInterval(this.timer) | ||
this.timer = setInterval(() => { | ||
@@ -28,0 +96,0 @@ let _count = --this.state.count |
{ | ||
"name": "dialog-react", | ||
"version": "1.0.1", | ||
"version": "1.0.2", | ||
"description": "toast confirm prompt confirmAuto", | ||
@@ -5,0 +5,0 @@ "main": "index.js", |
@@ -0,1 +1,3 @@ | ||
### How to use | ||
* **install** | ||
@@ -2,0 +4,0 @@ |
20557
30.31%643
27.33%57
3.64%