Merge pull request #3 from RafaelAugustoS/feedback-ui

Toast
rafaelaugustos · Sep 20, 2019 · 736ff8e · 736ff8e
2 parents 0f9b26c + 98174cc
commit 736ff8e
Show file tree

Hide file tree

Showing 18 changed files with 244 additions and 11 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git 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 `<Popup />` in its component.
+Simply declare the method in your event `Popup.show({...})` in its component.
 
 ```
 <Root>
@@ -54,6 +63,27 @@ Simply declare the tag `<Popup />` in its component.
 </Root>
 ```
 
+You can also use the `Toast` component.
+
+```
+    // Is necessary make the import to Toast (import { Root, Toast } from 'popup-ui')
+    <Root>
+        <View>
+            <TouchableOpacity
+                onPress={() => 
+                    Toast.show({
+                        title: 'User created',
+                        text: 'Your user was successfully created, use the app now.',
+                        color: '#2ecc71'
+                    })
+                }
+            >
+                <Text>Call Toast</Text>
+            </TouchableOpacity>
+        </View>
+    </Root>
+```
+
 ### 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
diff --git a/assets/toast-02.gif b/assets/toast-02.gif
diff --git a/assets/toast-03.gif b/assets/toast-03.gif
diff --git 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(
       <Root>
         <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center'}}>
+          <TouchableOpacity
+            onPress={() => 
+              Toast.show({
+                title: 'User created',
+                text: 'Your user was successfully created, use the app now.',
+                color: '#2ecc71',
+                timing: 2000,
+                icon: <Image source={require('./assets/tick.png')} style={{ width: 25, height: 25 }} resizeMode="contain" />
+              })
+            }
+          >
+            <Text>Toast Success</Text>
+          </TouchableOpacity>
+
+          <TouchableOpacity
+            onPress={() => 
+              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: <Image source={require('./assets/close.png')} style={{ width: 15, height: 15 }} resizeMode="contain" />
+              })
+            }
+          >
+            <Text>Toast Error</Text>
+          </TouchableOpacity>
+
+          <TouchableOpacity
+            onPress={() => 
+              Toast.show({
+                title: 'Profile edited',
+                text: 'Your profile has been edited, you can now see your new information.',
+                color: '#f39c12',
+                timing: 2000,
+                icon: <Image source={require('./assets/warning.png')} style={{ width: 25, height: 25 }} resizeMode="contain" />
+              })
+            }
+          >
+            <Text>Toast Warning</Text>
+          </TouchableOpacity>
+
+
+
           <TouchableOpacity 
             onPress={() => 
               Popup.show({ 
@@ -19,7 +63,7 @@ class App extends Component {
               })
             }
           >
-            <Text>Success</Text>
+            <Text>Popup Success</Text>
           </TouchableOpacity>
           <TouchableOpacity 
             onPress={() => 
@@ -32,7 +76,7 @@ class App extends Component {
               })
             }
           >
-            <Text>Warning</Text>
+            <Text>Popup Warning</Text>
           </TouchableOpacity>
           <TouchableOpacity 
             onPress={() => 
@@ -45,7 +89,7 @@ class App extends Component {
               })
             }
           >
-            <Text>Danger</Text>
+            <Text>Popup Danger</Text>
           </TouchableOpacity>
         </View>
       </Root>

diff --git a/examples/assets/close.png b/examples/assets/close.png
diff --git a/examples/assets/tick.png b/examples/assets/tick.png
diff --git a/examples/assets/warning.png b/examples/assets/warning.png
diff --git a/examples/package-lock.json b/examples/package-lock.json
diff --git 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
@@ -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
 }
diff --git 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 → popup-ui-1.0.5.tgz b/popup-ui-1.0.4.tgz → popup-ui-1.0.5.tgz
diff --git a/src/.DS_Store b/src/.DS_Store
diff --git a/src/assets/wifi.png b/src/assets/wifi.png
diff --git 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
           }}
         />
+
+        <Toast 
+          ref={c => {
+            if (c) Toast.toastInstance = c
+          }}
+        />
       </View>
     )
   }

diff --git a/src/basic/Toast/index.js 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(
+            <Animated.View 
+                ref={c => this._root = c}
+                style={[styles.toast, {
+                    transform: [
+                        { translateY: this.state.toast }
+                    ]
+                }]}
+            >
+                <View style={[styles.timing, { backgroundColor: color }]} />
+                <View style={styles.content}>
+                    <Text style={[styles.title, { color }]}>{ title }</Text>
+                    <Text style={styles.subtitle}>{ text }</Text>
+                </View>
+
+                <View style={[styles.iconStatus, { backgroundColor: color }]}>
+                    { icon }
+                </View>
+            </Animated.View>
+        )
+    }
+}
+
+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