Explode ViewStack so that other components sharing the API can… (#1260)

Explode ViewStack so that other components sharing the API can be made

react/ViewStack/index.jsx → react/ViewStack/ViewStack.jsx

@@ -1,38 +1,12 @@
-import React, { useState, useContext } from 'react'
+import React from 'react'
 import SwipeableViews from 'react-swipeable-views'
+import { useStack } from './hooks'
+import { ViewStackContext } from './context'
 
 // This is guessed, I could not see how to interface properly with
 // react-swipeable-views's onTransitionEnd
 const STEPPER_TRANSITION_DURATION_MS = 500
 
-export const ViewStackContext = React.createContext()
-export const useViewStack = () => useContext(ViewStackContext)
-
-const sleep = duration => new Promise(resolve => setTimeout(resolve, duration))
-
-const useStack = initialState => {
-  const [arr, setArray] = useState(initialState)
-  const [curIndex, setCurIndex] = useState(initialState.length - 1)
-
-  const push = item => {
-    const newArr = [...arr, item]
-    setArray(newArr)
-    setCurIndex(curIndex + 1)
-  }
-
-  const pop = async () => {
-    if (arr.length <= 1) {
-      return
-    }
-    const newArr = arr.slice(0, -1)
-    setCurIndex(curIndex - 1)
-    await sleep(STEPPER_TRANSITION_DURATION_MS)
-    setArray(newArr)
-  }
-
-  return [arr, curIndex, push, pop]
-}
-
 /**
  * Wraps children to builds an animated carrousel where children
  * can push/pop views.
@@ -44,11 +18,11 @@ const useStack = initialState => {
  */
 const ViewStack = ({ children }) => {
   const [stChildren, curIndex, stackPush, stackPop] = useStack(
-    React.Children.toArray(children)
+    React.Children.toArray(children),
+    { popDelay: STEPPER_TRANSITION_DURATION_MS }
   )
 
   const contextValue = { stackPush, stackPop }
-
   return (
     <ViewStackContext.Provider value={contextValue}>
       <SwipeableViews animateHeight disabled index={curIndex}>

react/ViewStack/context.js

@@ -0,0 +1,4 @@
+import React, { useContext } from 'react'
+
+export const ViewStackContext = React.createContext()
+export const useViewStack = () => useContext(ViewStackContext)

react/ViewStack/hooks.js

@@ -0,0 +1,30 @@
+import { useState } from 'react'
+
+const sleep = duration => new Promise(resolve => setTimeout(resolve, duration))
+
+const useStack = (initialState, options = {}) => {
+  const [arr, setArray] = useState(initialState)
+  const [curIndex, setCurIndex] = useState(initialState.length - 1)
+
+  const push = (item, itemOptions) => {
+    const newArr = [...arr, itemOptions ? [item, itemOptions] : item]
+    setArray(newArr)
+    setCurIndex(curIndex + 1)
+  }
+
+  const pop = async () => {
+    if (arr.length <= 1) {
+      return
+    }
+    const newArr = arr.slice(0, -1)
+    setCurIndex(curIndex - 1)
+    if (options.popDelay) {
+      await sleep(options.popDelay)
+    }
+    setArray(newArr)
+  }
+
+  return [arr, curIndex, push, pop]
+}
+
+export { useStack }

react/ViewStack/index.js

@@ -0,0 +1,2 @@
+export { default } from './ViewStack'
+export { useViewStack, ViewStackContext } from './context'

react/index.js

@@ -85,6 +85,7 @@ export { default as QuotaAlert } from './QuotaAlert'
 export { default as ThresholdBar } from './ThresholdBar'
 export {
   default as ViewStack,
+  ModalStack,
   useViewStack,
   ViewStackContext
 } from './ViewStack'