dialog-react - npm Package Compare versions

Comparing version 0.1.2 to 0.2.0

index.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.Toast = exports.Confirm = exports.Prompt = undefined;
+exports.Toast = exports.Confirm = exports.Prompt = exports.ComfirmAuto = undefined;
 
@@ -27,5 +27,121 @@ 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 Prompt = exports.Prompt = function (_Component) {
-	_inherits(Prompt, _Component);
+var ComfirmAuto = exports.ComfirmAuto = function (_Component) {
+	_inherits(ComfirmAuto, _Component);
 
+	function ComfirmAuto() {
+		_classCallCheck(this, ComfirmAuto);
+
+		var _this = _possibleConstructorReturn(this, (ComfirmAuto.__proto__ || Object.getPrototypeOf(ComfirmAuto)).call(this));
+
+		_this.count = 3;
+		_this.state = {
+			count: _this.count
+		};
+		return _this;
+	}
+
+	_createClass(ComfirmAuto, [{
+		key: "componentWillReceiveProps",
+		value: function componentWillReceiveProps(props) {
+			if (props.show) {
+				this.countdown();
+			}
+		}
+	}, {
+		key: "componentDidMount",
+		value: function componentDidMount() {
+			this.countdown();
+		}
+	}, {
+		key: "countdown",
+		value: function countdown() {
+			var _this2 = this;
+
+			this.timer = setInterval(function () {
+				var _count = --_this2.state.count;
+				if (_count < 1) {
+					clearInterval(_this2.timer);
+					_this2.props.close();
+				}
+				_this2.setState({
+					count: _count < 1 ? _this2.count : _count
+				});
+			}, 1000);
+		}
+	}, {
+		key: "render",
+		value: function render() {
+			return _react2.default.createElement(
+				"div",
+				{ style: this.props.show ? confirmAutoStyles.container : confirmAutoStyles.container_hidden },
+				_react2.default.createElement(
+					"div",
+					{ style: confirmAutoStyles.box },
+					_react2.default.createElement(
+						"div",
+						{ style: confirmAutoStyles.content },
+						this.props.content || "请携带 content 参数"
+					),
+					_react2.default.createElement(
+						"div",
+						{ style: confirmAutoStyles.count, onClick: this.props.close },
+						this.state.count
+					)
+				)
+			);
+		}
+	}]);
+
+	return ComfirmAuto;
+}(_react.Component);
+
+var confirmAutoStyles = {
+	container: {
+		zIndex: "999",
+		position: "fixed",
+		left: "0",
+		top: "0",
+		width: "100%",
+		height: "100%",
+		backgroundColor: "rgba(0, 0, 0, 0.2)",
+		display: "flex",
+		justifyContent: "center",
+		alignItems: "center"
+	},
+	container_hidden: {
+		zIndex: "999",
+		position: "fixed",
+		left: "0",
+		top: "0",
+		width: "100%",
+		height: "100%",
+		backgroundColor: "rgba(0, 0, 0, 0.2)",
+		display: "none",
+		justifyContent: "center",
+		alignItems: "center"
+	},
+	box: {
+		position: "relative",
+		height: "140px",
+		width: "180px",
+		backgroundColor: "rgba(0, 0, 0, 0.8)",
+		borderRadius: "10px",
+		display: "flex",
+		justifyContent: "center",
+		alignItems: "center"
+	},
+	content: {
+		color: "white",
+		textAlign: "center"
+	},
+	count: {
+		position: "absolute",
+		color: "#999",
+		bottom: "20px"
+	}
+};
+
+var Prompt = exports.Prompt = function (_Component2) {
+	_inherits(Prompt, _Component2);
+
 	function Prompt() {
@@ -151,4 +267,4 @@ _classCallCheck(this, Prompt);
 
-var Confirm = exports.Confirm = function (_Component2) {
-	_inherits(Confirm, _Component2);
+var Confirm = exports.Confirm = function (_Component3) {
+	_inherits(Confirm, _Component3);
 
@@ -246,4 +362,4 @@ function Confirm() {
 
-var Toast = exports.Toast = function (_Component3) {
-	_inherits(Toast, _Component3);
+var Toast = exports.Toast = function (_Component4) {
+	_inherits(Toast, _Component4);
 
@@ -253,8 +369,8 @@ function Toast(props) {
 
-		var _this3 = _possibleConstructorReturn(this, (Toast.__proto__ || Object.getPrototypeOf(Toast)).call(this, props));
+		var _this5 = _possibleConstructorReturn(this, (Toast.__proto__ || Object.getPrototypeOf(Toast)).call(this, props));
 
-		_this3.state = {
+		_this5.state = {
 			show: props.show
 		};
-		return _this3;
+		return _this5;
 	}
@@ -265,7 +381,7 @@
 		value: function componentDidMount() {
-			var _this4 = this;
+			var _this6 = this;
 
 			setTimeout(function () {
-				_this4.props.close();
-				_this4.isShow = false;
+				_this6.props.close();
+				_this6.isShow = false;
 			}, this.props.long * 1000);
@@ -272,0 +388,0 @@ }

lib/dialog.js

 import React, {Component} from "react"
 import PropTypes from "prop-types"
 
+export class ComfirmAuto extends Component {
+	constructor() {
+		super()
+		this.count = 3
+		this.state = {
+			count: this.count
+		}
+	}
+
+	componentWillReceiveProps(props) {
+		if(props.show) {
+			this.countdown()
+		}
+	}
+
+	componentDidMount() {
+		this.countdown()
+	}
+
+	countdown() {
+		this.timer = setInterval(() => {
+			let _count = --this.state.count
+			if(_count < 1) {
+				clearInterval(this.timer)
+				this.props.close()
+			}
+			this.setState({
+				count: _count < 1 ? this.count : _count
+			})
+		}, 1000)
+	}
+
+	render() {
+		return (
+			<div style={this.props.show ? confirmAutoStyles.container : confirmAutoStyles.container_hidden}>
+				<div style={confirmAutoStyles.box}>
+					<div style={confirmAutoStyles.content}>
+						{this.props.content || "请携带 content 参数"}
+					</div>
+					<div style={confirmAutoStyles.count} onClick={this.props.close}>
+						{this.state.count}
+					</div>
+				</div>
+			</div>
+		)
+	}
+}
+
+let confirmAutoStyles = {
+	container: {
+		zIndex: "999",
+		position: "fixed",
+		left: "0",
+		top: "0",
+		width: "100%",
+		height: "100%",
+		backgroundColor: "rgba(0, 0, 0, 0.2)",
+		display: "flex",
+		justifyContent: "center",
+		alignItems: "center"
+	},
+	container_hidden: {
+		zIndex: "999",
+		position: "fixed",
+		left: "0",
+		top: "0",
+		width: "100%",
+		height: "100%",
+		backgroundColor: "rgba(0, 0, 0, 0.2)",
+		display: "none",
+		justifyContent: "center",
+		alignItems: "center"
+	},
+	box: {
+		position: "relative",
+		height: "140px",
+		width: "180px",
+		backgroundColor: "rgba(0, 0, 0, 0.8)",
+		borderRadius: "10px",
+		display: "flex",
+		justifyContent: "center",
+		alignItems: "center"
+	},
+	content: {
+		color: "white",
+		textAlign: "center"
+	},
+	count: {
+		position: "absolute",
+		color: "#999",
+		bottom: "20px"
+	}
+}
+
 export class Prompt extends Component {
@@ -5,0 +99,0 @@ render() {

package.json

 {
   "name": "dialog-react",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "toast confirm prompt",
@@ -28,9 +28,8 @@ "main": "index.js",
   "devDependencies": {
-    "babel-cli": "^6.24.1",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-react": "^6.24.1",
-    "babel-preset-stage-0": "^6.24.1",
-    "react": "^15.5.4",
-    "react-dom": "^15.5.4"
+    "babel-cli": "",
+    "babel-core": "",
+    "babel-preset-es2015": "",
+    "babel-preset-react": "",
+    "babel-preset-stage-0": ""
   }
 }

README.md

@@ -7,4 +7,6 @@ * **install**
 
-`import {Toast, Confirm, Prompt} from "dialog-react"`
+`import {Toast, Confirm, Prompt, ComfirmAuto} from "dialog-react"`
 
+> many or one more
+
 * **use**
@@ -37,1 +39,8 @@
 ```
+
+```
+<ComfirmAuto
+	content="测试用例"
+	show={this.state.showDialog}
+	close={() => this.setState({showDialog: false})} />
+```

No alert changes

Improved metrics

Total package byte prevSize

20139

27.63%

Dev dependency count

5

-16.67%

Lines of code

733

36.5%

Number of lines in readme file

45

25%

No dependency changes