Merge pull request #4 from 9gag-open-source/feature/1-renderSnackBarDynamically

Fix race condition by setting up callback properly

Author: georgejor

README.md

@@ -77,15 +77,30 @@ SnackBar.show('Making the world happier', {
 })
 ```
 
+A SnackBar with nested actions. Always dismiss current SnackBar before showing a new one using the dismiss callback.
+```javascript
+SnackBar.add('Making the world happier', {
+  confirmText: 'Learn more',
+  onConfirm: () => {
+    console.log('Thank you')
+    SnackBar.dismiss(() => {
+      SnackBar.show('Stay unstoppable!')
+    })
+  }
+})
+```
+
 ## Flow Control
 
 This library handles messages order with peace of mind.
+Calling these functions will show the message immediately if there is no active item.
+Callback is optional, but it is suggested to use for flow control.
 
-- `SnackBar.show(title, options)`
-<br />For some operations like taking a screenshot requires the message to show it immediately. Using this method to give highest order among all Snack message.
+- `SnackBar.show(title, options, [callback])`
+<br />Give highest priority to show among all Snack messages.
 
-- `SnackBar.add(title, options)`
-<br />It will show it immediately if there isn't any active Snack message. Otherwise, it will enqueue and show it one by one when calling the `dismiss` function.
+- `SnackBar.add(title, options, [callback])`
+<br />Enqueue and show it one by one when calling the `dismiss` function.
 
-- `SnackBar.dismiss()`
-<br />Adding it manually to `onConfirm` and `onCancel` props action to control the flow of show / hide.
+- `SnackBar.dismiss([callback])`
+<br />Control when and where to dismiss an active item, e.g. `onConfirm` and `onCancel` props action.

__tests__/manager.js

@@ -6,40 +6,41 @@ const TITLE = 'Making the world happier'
 it('shows Snack item properly', () => {
   const SnackBar = new SnackBarManager()
 
-  SnackBar.show(TITLE)
-
-  const { current, queue } = SnackBar.get()
-  expect(current).toBeInstanceOf(RootSiblings)
-  expect(queue).toHaveLength(0)
+  SnackBar.show(TITLE, () => {
+    const { current, queue } = SnackBar.get()
+    expect(current).toBeInstanceOf(RootSiblings)
+    expect(queue).toHaveLength(0)
+  })
 })
 
 it('adds Snack item immediately when there is no active item', () => {
   const SnackBar = new SnackBarManager()
 
-  SnackBar.add(TITLE)
-
-  const { current, queue } = SnackBar.get()
-  expect(current).toBeInstanceOf(RootSiblings)
-  expect(queue).toHaveLength(0)
+  SnackBar.add(TITLE, () => {
+    const { current, queue } = SnackBar.get()
+    expect(current).toBeInstanceOf(RootSiblings)
+    expect(queue).toHaveLength(0)
+  })
 })
 
 it('adds Snack item properly when there is an active item', () => {
   const SnackBar = new SnackBarManager()
   const newTitle = 'Making a happier world'
 
-  SnackBar.add(TITLE)
-  SnackBar.add(newTitle)
-
-  const { current, queue } = SnackBar.get()
+  SnackBar.add(TITLE, () => {
+    SnackBar.add(newTitle, () => {
+      const { current, queue } = SnackBar.get()
 
-  expect(current).toBeInstanceOf(RootSiblings)
-  expect(queue).toHaveLength(1)
-  expect(queue[0]).toMatchObject({
-    title: newTitle
+      expect(current).toBeInstanceOf(RootSiblings)
+      expect(queue).toHaveLength(1)
+      expect(queue[0]).toMatchObject({
+        title: newTitle
+      })
+    })
   })
 })
 
-it('should dismiss current item properly', () => {
+it('dismisses current item properly', () => {
   const SnackBar = new SnackBarManager()
 
   SnackBar.add(TITLE, () => {
@@ -52,7 +53,7 @@ it('should dismiss current item properly', () => {
   })
 })
 
-it('should show the next item when dismissing', () => {
+it('shows the next item when dismissing', () => {
   const SnackBar = new SnackBarManager()
   const newTitle = 'Making a happier world'
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-snackbar-dialog",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "A react native snackbar with dialog options",
   "main": "dist/index.js",
   "scripts": {

src/SnackBar.js

@@ -21,7 +21,6 @@ const INITIAL_POSITION: number = -180
 
 const STYLE_BANNER_COLOR: string = '#000000'
 const TEXT_COLOR_ACCENT: string = '#0088ff'
-const HIT_SLOP = { top: 8, bottom: 8, left: 8, right: 8 }
 
 const TIMEOUT_ID: string = 'snackBar'
 
@@ -44,6 +43,11 @@ const styles = StyleSheet.create({
     fontSize: 16
   },
 
+  buttonContainer: {
+    paddingHorizontal: 12,
+    paddingVertical: 10
+  },
+
   button: {
     fontSize: 16,
     fontWeight: '500'
@@ -52,8 +56,8 @@ const styles = StyleSheet.create({
   actionRow: {
     flexDirection: 'row',
     justifyContent: 'flex-end',
-    padding: 18,
-    marginBottom: 6
+    padding: 8,
+    marginBottom: 8
   },
 
   inlineRow: {
@@ -196,7 +200,7 @@ export default class SnackBar extends Component {
     const { buttonColor } = this.props
 
     return (
-      <TouchableOpacity hitSlop={HIT_SLOP} onPress={onPress}>
+      <TouchableOpacity style={styles.buttonContainer} onPress={onPress}>
         <Text style={[styles.button, style, { color: buttonColor }]}>
           {text}
         </Text>

src/SnackBarManager.js

@@ -13,12 +13,11 @@ export default class SnackBarManager {
     this.queue = []
   }
 
-  _hasQueue = (): boolean => {
-    return Array.isArray(this.queue) && this.queue.length
-  }
-
-  _addCurrent = (props: SnackItemType, callback?: Function = () => {}): void => {
-    this.current = new RootSiblings(<SnackBar {...props} onAutoDismiss={this.dismiss} />, callback)
+  _setCurrent = (props: SnackItemType, callback?: Function = () => {}): void => {
+    const current = new RootSiblings(<SnackBar {...props} onAutoDismiss={this.dismiss} />, () => {
+      this.current = current
+      callback()
+    })
   }
 
   _removeCurrent = (callback?: Function = () => {}): void => {
@@ -53,31 +52,34 @@ export default class SnackBarManager {
       return
     }
 
-    this._addCurrent(props, callback)
+    this._setCurrent(props, callback)
   }
 
-  show = (title: string, options?: SnackItemType): void => {
+  show = (
+    title: string,
+    options?: SnackItemType,
+    callback?: Function = () => {}
+  ): void => {
     const props = { title, ...options }
 
-    if (!this.current) {
-      this._addCurrent(props)
+    if (this.current) {
+      this.queue.unshift(props)
+      callback()
       return
     }
 
-    this._removeCurrent(() => {
-      this._addCurrent(props)
-    })
+    this._setCurrent(props, callback)
   }
 
   dismiss = (callback?: Function = () => {}): void => {
     this._removeCurrent(() => {
-      if (!this._hasQueue()) {
+      if (!this.queue.length) {
         callback()
         return
       }
 
       const current = this.queue.shift()
-      this._addCurrent(current, callback)
+      this._setCurrent(current, callback)
     })
   }
 }