From bf2375ec4273e366256cfb513ed4233a34424980 Mon Sep 17 00:00:00 2001 From: Ny Samnang Date: Sat, 26 Jan 2019 01:05:53 +0700 Subject: [PATCH] Initail commit --- .gitignore | 5 ++ README.md | 171 +++++++++++++++++++++++++++++++++++++++++++++- index.js | 3 + package-lock.json | 35 ++++++++++ package.json | 32 +++++++++ src/index.js | 165 ++++++++++++++++++++++++++++++++++++++++++++ src/style.js | 59 ++++++++++++++++ 7 files changed, 469 insertions(+), 1 deletion(-) create mode 100644 .gitignore create mode 100644 index.js create mode 100644 package-lock.json create mode 100644 package.json create mode 100644 src/index.js create mode 100644 src/style.js diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..0e5a3b2 --- /dev/null +++ b/.gitignore @@ -0,0 +1,5 @@ +# OSX +.DS_Store + +# Node Module +node_modules/ diff --git a/README.md b/README.md index a97c070..4571cbe 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,171 @@ # react-native-alert-pro -The Pro Version of React Native Alert (Android & iOS) + +[![npm version](https://badge.fury.io/js/react-native-alert-pro.svg)](//npmjs.com/package/react-native-alert-pro) [![npm downloads](https://img.shields.io/npm/dm/react-native-alert-pro.svg) +](//npmjs.com/package/react-native-alert-pro) + +- Super lightweight component (50 KB) +- Smooth animation +- Beautiful +- Use method instead of state +- Work like a Pro +- Customize whatever you like +- Support all orientations +- Support both Android and iOS + +| iOS | Android | +| :-------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------: | +| ![](https://raw.githubusercontent.com/NYSamnang/stock-images/master/react-native-alert-pro/RNALP-IOS.gif) | ![](https://raw.githubusercontent.com/NYSamnang/stock-images/master/react-native-alert-pro/RNALP-AOS.gif) | + +## Installation + +``` +npm i react-native-alert-pro --save +``` + +### or + +``` +yarn add react-native-alert-pro +``` + +## Example + +```jsx +import React, { Component } from "react"; +import { StyleSheet, View, TouchableOpacity, Text } from "react-native"; +import AlertPro from "react-native-alert-pro"; + +class Example extends Component { + render() { + return ( + + REACT NATIVE ALERT PRO + + this.AlertPro.open()} + style={styles.button} + > + CUSTOM + + + + { + this.AlertPro = ref; + }} + onConfirm={() => this.AlertPro.close()} + title="Delete confirmation" + message="Are you sure to delete the entry?" + textCancel="Cancel" + textConfirm="Delete" + customStyles={{ + mask: { + backgroundColor: "transparent" + }, + container: { + borderWidth: 1, + borderColor: "#9900cc", + shadowColor: "#000000", + shadowOpacity: 0.1, + shadowRadius: 10 + }, + buttonCancel: { + backgroundColor: "#4da6ff" + }, + buttonConfirm: { + backgroundColor: "#ffa31a" + } + }} + /> + + ); + } +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: "center", + backgroundColor: "#fff" + }, + title: { + fontSize: 20, + marginTop: 120 + }, + buttonContainer: { + flex: 1, + alignItems: "center", + justifyContent: "center", + backgroundColor: "#FFFFFF" + }, + button: { + backgroundColor: "#4EB151", + paddingVertical: 11, + paddingHorizontal: 17, + borderRadius: 3, + marginBottom: 15 + }, + text: { + color: "#FFFFFF", + fontSize: 16, + fontWeight: "600" + } +}); + +export default Example; +``` + +## Props + +| Prop | Type | Description | Default | +| ---------------- | -------- | -------------------------------------------------------- | -------------------------- | +| title | string | AlertPro's title | "Do you want to continue?" | +| message | string | AlertPro's message | "" | +| showCancel | boolean | Show a Cancel button | true | +| showConfirm | boolean | Show a Confirm button | true | +| textCancel | string | Text display on Cancel button | "No" | +| textConfirm | string | Text display on Confirm button | "Yes" | +| closeOnPressMask | boolean | Close AlertPro when press on mask (The empty space area) | true | +| customStyles | object | Custom style to AlertPro | {} | +| onCancel | function | Event on Cancel button | | +| onConfirm | function | Event on Confirm button | | + +### Available Custom Style + +```jsx +customStyles: { + title: {...}, // AlertPro's title + message: {...}, // AlertPro's message + mask: {...}, // The empty space area + container: {...}, // AlertPro container + content: {...}, // AlertPro content + buttonCancel: {...}, // Cancel button + buttonConfirm: {...}, // Confirm button + textCancel: {...}, // Cancel button's Text + textConfirm: {...} // Confirm button's Text + +} +``` + +## Methods + +| Method Name | Description | +| ----------- | -------------- | +| open | Open AlertPro | +| close | Close AlertPro | + +### Note + +Always set `ref` to `AlertPro` and call each method by using `this.AlertPro.methodName()` like example above. + +### Give me a Star + +If you think this project is helpful just give me a ⭐️ Star is enough because i don't drink coffee :D + +## License + +This project is licensed under the MIT License - see the [LICENSE.md](https://github.com/NYSamnang/react-native-alert-pro/blob/master/LICENSE) file for details + +## Author + +Made with ❤️ by [NY Samnang](https://github.com/NYSamnang). diff --git a/index.js b/index.js new file mode 100644 index 0000000..daef382 --- /dev/null +++ b/index.js @@ -0,0 +1,3 @@ +import AlertPro from "./src"; + +export default AlertPro; diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..0209555 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,35 @@ +{ + "name": "react-native-alert-pro", + "version": "1.0.0", + "lockfileVersion": 1, + "requires": true, + "dependencies": { + "js-tokens": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" + }, + "loose-envify": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", + "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", + "requires": { + "js-tokens": "^3.0.0 || ^4.0.0" + } + }, + "object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=" + }, + "prop-types": { + "version": "15.6.2", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz", + "integrity": "sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==", + "requires": { + "loose-envify": "^1.3.1", + "object-assign": "^4.1.1" + } + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..0055c14 --- /dev/null +++ b/package.json @@ -0,0 +1,32 @@ +{ + "name": "react-native-alert-pro", + "version": "1.0.0", + "description": "The Pro Version of React Native Alert (Android & iOS)", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/NYSamnang/react-native-alert-pro.git" + }, + "keywords": [ + "react-native", + "alert", + "alert-pro", + "dialog", + "popup", + "confirm", + "modal", + "box" + ], + "author": "NY Samnang", + "license": "MIT", + "bugs": { + "url": "https://github.com/NYSamnang/react-native-alert-pro/issues" + }, + "homepage": "https://github.com/NYSamnang/react-native-alert-pro#readme", + "dependencies": { + "prop-types": "^15.6.2" + } +} diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..354093d --- /dev/null +++ b/src/index.js @@ -0,0 +1,165 @@ +import React, { Component } from "react"; +import PropTypes from "prop-types"; +import { Text, View, Animated, Modal, TouchableOpacity } from "react-native"; + +import styles from "./style"; + +const SUPPORTED_ORIENTATIONS = [ + "portrait", + "portrait-upside-down", + "landscape", + "landscape-left", + "landscape-right" +]; + +class AlertPro extends Component { + constructor() { + super(); + + this.state = { + visible: false + }; + + this.springValue = new Animated.Value(0); + + this.onCancel = this.onCancel.bind(this); + this.onConfirm = this.onConfirm.bind(this); + this.open = this.open.bind(this); + this.close = this.close.bind(this); + } + + componentWillUnmount() { + this.springValue.setValue(0); + } + + animatedConfirm() { + Animated.spring(this.springValue, { + toValue: 1, + speed: 15, + useNativeDriver: true + }).start(); + } + + onCancel() { + if (typeof this.props.onCancel === "function") { + this.props.onCancel(); + } + } + + onConfirm() { + if (typeof this.props.onConfirm === "function") { + this.props.onConfirm(); + } + } + + open() { + this.setState({ visible: true }, () => this.animatedConfirm()); + } + + close() { + this.setState({ visible: false }, () => this.springValue.setValue(0)); + } + + render() { + const { + title, + message, + showCancel, + showConfirm, + textCancel, + textConfirm, + customStyles, + closeOnPressMask + } = this.props; + return ( + {}} + onBackButtonPress={() => this.setState({ visible: false })} + > + + + + + {title} + {message ? ( + + {message} + + ) : null} + + + + {showCancel ? ( + + + {textCancel} + + + ) : null} + {showConfirm ? ( + + + {textConfirm} + + + ) : null} + + + + + + ); + } +} + +AlertPro.propTypes = { + customStyles: PropTypes.object, + title: PropTypes.string, + message: PropTypes.string, + showCancel: PropTypes.bool, + showConfirm: PropTypes.bool, + textCancel: PropTypes.string, + textConfirm: PropTypes.string, + onCancel: PropTypes.func, + onConfirm: PropTypes.func, + closeOnPressMask: PropTypes.bool +}; + +AlertPro.defaultProps = { + customStyles: {}, + title: "Do you want to continue?", + message: "", + showCancel: true, + showConfirm: true, + textCancel: "No", + textConfirm: "Yes", + closeOnPressMask: true +}; + +export default AlertPro; diff --git a/src/style.js b/src/style.js new file mode 100644 index 0000000..3ca9b65 --- /dev/null +++ b/src/style.js @@ -0,0 +1,59 @@ +import { StyleSheet } from "react-native"; + +const styles = StyleSheet.create({ + background: { + flex: 1, + backgroundColor: "rgba(0, 0, 0, 0.4)", + justifyContent: "center", + alignItems: "center" + }, + container: { + backgroundColor: "#FFF", + maxWidth: 350, + marginHorizontal: 30, + borderRadius: 5 + }, + content: { + justifyContent: "center", + padding: 20 + }, + title: { + textAlign: "center", + fontSize: 18, + color: "#333", + fontWeight: "500", + lineHeight: 25 + }, + message: { + textAlign: "center", + fontSize: 17, + color: "#666", + paddingTop: 10 + }, + buttonContainer: { + flexDirection: "row", + justifyContent: "center", + borderRadius: 5, + flexWrap: "wrap" + }, + button: { + backgroundColor: "#00ACEF", + marginBottom: 20, + marginHorizontal: 10, + alignItems: "center", + paddingVertical: 8, + borderRadius: 5, + minWidth: 90 + }, + buttonCancel: { + backgroundColor: "#F53D3D" + }, + textButton: { + fontSize: 15, + textAlign: "center", + color: "#FFF", + fontWeight: "600" + } +}); + +export default styles;