diff --git a/.DS_Store b/.DS_Store index 95c2c35..4ed915e 100644 Binary files a/.DS_Store and b/.DS_Store differ diff --git a/README.md b/README.md index 79e72e0..1919571 100644 --- a/README.md +++ b/README.md @@ -6,10 +6,19 @@ A simple and fully customizable React Native component that implements a popup U - Function to close automatically - Receives callback prop to set button action +## Example popup + | Example One | Example Two | Example Three | | :-----------------------------------------------------------: | :-----------------------------------------------------------: | :-----------------------------------------------------------: | | ![](assets/popup-ui_1.gif) [examples/App.js](examples/App.js) | ![](assets/popup-ui_2.gif) [examples/App.js](examples/App.js) | ![](assets/popup-ui_3.gif) [examples/App.js](examples/App.js) | + +## Example toast + +| Example One | Example Two | Example Three | +| :-----------------------------------------------------------: | :-----------------------------------------------------------: | :-----------------------------------------------------------: | +| ![](assets/toast-01.gif) [examples/App.js](examples/App.js) | ![](assets/toast-02.gif) [examples/App.js](examples/App.js) | ![](assets/toast-03.gif) [examples/App.js](examples/App.js) | + ## Installation If using yarn: @@ -31,7 +40,7 @@ import { View, TouchableOpacity, Text } from 'react-native' import { Root, Popup } from 'popup-ui' ``` -Simply declare the tag `` in its component. +Simply declare the method in your event `Popup.show({...})` in its component. ``` @@ -54,6 +63,27 @@ Simply declare the tag `` in its component. ``` +You can also use the `Toast` component. + +``` + // Is necessary make the import to Toast (import { Root, Toast } from 'popup-ui') + + + + Toast.show({ + title: 'User created', + text: 'Your user was successfully created, use the app now.', + color: '#2ecc71' + }) + } + > + Call Toast + + + +``` + ### Popup Type Usage Popup contains a type-customization scheme `Type` props. @@ -106,6 +136,7 @@ Popup.show({ }) ``` + ## Documentation ### Popup Component @@ -122,6 +153,17 @@ Popup.show({ | timing | Sets the time for the popup to close by itself | 5000 | Number | | autoclose | sets whether the popup will close automatically | false | Bool | + +### Toast Component + +| Name | Description | Default | Type | +| ---------- | ----------------------------------------------- | ------------------ | --------- | +| title | Sets the main toast title | | String | +| text | Defines the text to toast | | String | +| color | Defines the color to title, border and iconC | #e1e1e1 | String | +| timing | Define your timing to close toast | 6s | Int | +| icon | Choose your the best icon to toast | | Component | + ## Contributing Pull requests are always welcome! Feel free to open a new GitHub issue for any changes that can be made. diff --git a/assets/toast-01.gif b/assets/toast-01.gif new file mode 100644 index 0000000..f3364c3 Binary files /dev/null and b/assets/toast-01.gif differ diff --git a/assets/toast-02.gif b/assets/toast-02.gif new file mode 100644 index 0000000..4eee4ff Binary files /dev/null and b/assets/toast-02.gif differ diff --git a/assets/toast-03.gif b/assets/toast-03.gif new file mode 100644 index 0000000..0def06d Binary files /dev/null and b/assets/toast-03.gif differ diff --git a/examples/App.js b/examples/App.js index aaf3b0d..8e17755 100644 --- a/examples/App.js +++ b/examples/App.js @@ -1,12 +1,56 @@ import React, { Component } from 'react'; -import { View, TouchableOpacity, Text } from 'react-native'; -import { Root, Popup } from 'popup-ui'; +import { View, TouchableOpacity, Text, Image } from 'react-native'; +import { Root, Popup, Toast } from 'popup-ui'; class App extends Component { render(){ return( + + Toast.show({ + title: 'User created', + text: 'Your user was successfully created, use the app now.', + color: '#2ecc71', + timing: 2000, + icon: + }) + } + > + Toast Success + + + + Toast.show({ + title: 'User deleted', + text: 'Your account has been deleted, you will no longer be able to access the app.', + color: '#e74c3c', + timing: 2000, + icon: + }) + } + > + Toast Error + + + + Toast.show({ + title: 'Profile edited', + text: 'Your profile has been edited, you can now see your new information.', + color: '#f39c12', + timing: 2000, + icon: + }) + } + > + Toast Warning + + + + Popup.show({ @@ -19,7 +63,7 @@ class App extends Component { }) } > - Success + Popup Success @@ -32,7 +76,7 @@ class App extends Component { }) } > - Warning + Popup Warning @@ -45,7 +89,7 @@ class App extends Component { }) } > - Danger + Popup Danger diff --git a/examples/assets/close.png b/examples/assets/close.png new file mode 100644 index 0000000..55851a4 Binary files /dev/null and b/examples/assets/close.png differ diff --git a/examples/assets/tick.png b/examples/assets/tick.png new file mode 100644 index 0000000..cc89a6c Binary files /dev/null and b/examples/assets/tick.png differ diff --git a/examples/assets/warning.png b/examples/assets/warning.png new file mode 100644 index 0000000..a4b3d1c Binary files /dev/null and b/examples/assets/warning.png differ diff --git a/examples/package-lock.json b/examples/package-lock.json index 4ea859a..2052ecc 100644 --- a/examples/package-lock.json +++ b/examples/package-lock.json @@ -6381,8 +6381,8 @@ "dev": true }, "popup-ui": { - "version": "file:../popup-ui-1.0.4.tgz", - "integrity": "sha512-Z/wzCfExwtt6fJ/G5ZVb1gBtqGSggnD+xVFD4XSoY6bSXzwpTDavJpil0qlIUSAbdCLLQF9BIFcUxG8r1puo0g==" + "version": "file:../popup-ui-1.0.5.tgz", + "integrity": "sha512-QTHstjTNoGQ3q44WvdtRU9GL5fa/wlsAuq9NF2nVbzcrEy5pLMCn3FsTL7fcKpAbpel8JSCmIJuALLd94+Axvg==" }, "posix-character-classes": { "version": "0.1.1", diff --git a/examples/package.json b/examples/package.json index edeec11..663c1ab 100644 --- a/examples/package.json +++ b/examples/package.json @@ -7,7 +7,7 @@ "test": "jest" }, "dependencies": { - "popup-ui": "file:../popup-ui-1.0.4.tgz", + "popup-ui": "file:../popup-ui-1.0.5.tgz", "react": "16.8.3", "react-native": "0.59.8" }, diff --git a/index.js b/index.js index ccf96d4..c3ea997 100644 --- a/index.js +++ b/index.js @@ -1,7 +1,9 @@ import Root from './src/basic/Root' import Popup from './src/basic/Popup' +import Toast from './src/basic/Toast' export { Root, - Popup + Popup, + Toast } \ No newline at end of file diff --git a/package.json b/package.json index 6fa2ae1..f3acc46 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "popup-ui", - "version": "1.0.4", + "version": "1.0.5", "description": "", "main": "index.js", "scripts": { diff --git a/popup-ui-1.0.4.tgz b/popup-ui-1.0.5.tgz similarity index 95% rename from popup-ui-1.0.4.tgz rename to popup-ui-1.0.5.tgz index 766e20f..16c859a 100644 Binary files a/popup-ui-1.0.4.tgz and b/popup-ui-1.0.5.tgz differ diff --git a/src/.DS_Store b/src/.DS_Store index 4196a59..5de8a45 100644 Binary files a/src/.DS_Store and b/src/.DS_Store differ diff --git a/src/assets/wifi.png b/src/assets/wifi.png new file mode 100644 index 0000000..8828a92 Binary files /dev/null and b/src/assets/wifi.png differ diff --git a/src/basic/Root/index.js b/src/basic/Root/index.js index 8ec4dd3..50523de 100644 --- a/src/basic/Root/index.js +++ b/src/basic/Root/index.js @@ -3,6 +3,7 @@ import { View, ViewPropTypes } from 'react-native' import PropTypes from 'prop-types' import Popup from '../Popup' +import Toast from '../Toast' class Root extends Component { @@ -19,6 +20,12 @@ class Root extends Component { if (c) Popup.popupInstance = c }} /> + + { + if (c) Toast.toastInstance = c + }} + /> ) } diff --git a/src/basic/Toast/index.js b/src/basic/Toast/index.js new file mode 100644 index 0000000..48ba97a --- /dev/null +++ b/src/basic/Toast/index.js @@ -0,0 +1,138 @@ +import React, { Component } from 'react' +import { View, Animated, Text, StyleSheet, Image, Dimensions } from 'react-native' + +const { height } = Dimensions.get('window') + +class Toast extends Component { + static toastInstance + + static show({ ...config }) { + this.toastInstance.start(config) + } + + static hide() { + this.toastInstance.hideToast() + } + + state = { + toast: new Animated.Value(height) + } + + start({ ...config }){ + this.setState({ + title: config.title, + text: config.text, + color: config.color, + icon: config.icon, + timing: config.timing + }) + + Animated.spring(this.state.toast, { + toValue: height - 130, + bounciness: 15, + useNativeDriver: true + }).start() + + const duration = config.timing > 0 ? config.timing : 5000 + + setTimeout(() => { + this.hideToast() + }, duration) + } + + hideToast(){ + Animated.timing(this.state.toast, { + toValue: height, + duration: 300, + useNativeDriver: true + }).start() + } + + render(){ + const { title, text, icon, color } = this.state + return( + this._root = c} + style={[styles.toast, { + transform: [ + { translateY: this.state.toast } + ] + }]} + > + + + { title } + { text } + + + + { icon } + + + ) + } +} + +const styles = StyleSheet.create({ + toast: { + position: 'absolute', + width: '80%', + alignSelf: 'center', + backgroundColor: '#fff', + borderRadius: 10, + minHeight: 90, + shadowColor: "#ccc", + borderWidth: 1, + borderColor: '#f5f5f5', + alignItems: 'center', + shadowOffset: { + width: 0, + height: 2, + }, + shadowOpacity: 0.25, + shadowRadius: 3.84, + elevation: 5, + flexDirection: 'row' + }, + timing: { + borderTopLeftRadius: 10, + borderTopRightRadius: 10, + height: 2, + width: '100%', + backgroundColor: '#f1f1f1', + position: 'absolute', + top: 0 + }, + content: { + width: '90%', + paddingLeft: 20, + paddingRight: 20 + }, + title: { + color: '#f1f1f1', + fontWeight: '600', + fontSize: 16 + }, + subtitle: { + marginTop: 5, + fontWeight: '300', + fontSize: 13 + }, + img: { + resizeMode: 'contain', + width: 20, + height: 20 + }, + iconStatus: { + width: 40, + height: 40, + backgroundColor: '#f1f1f1', + borderRadius: 50, + position: 'absolute', + right: -20, + justifyContent: 'center', + alignItems: 'center' + } +}) + +export default Toast \ No newline at end of file