dialog-react - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

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 @@ }

lib/dialog.js

@@ -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

package.json

 {
   "name": "dialog-react",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "toast confirm prompt confirmAuto",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -0,1 +1,3 @@
+### How to use
+
 * **install**
@@ -2,0 +4,0 @@

No alert changes

Improved metrics

Total package byte prevSize

20557

30.31%

Lines of code

643

27.33%

Number of lines in readme file

57

3.64%

No dependency changes