update(🚚): housekeeping

osamaqarem · Aug 17, 2020 · 4cfdd08 · 4cfdd08
1 parent d80aa82
commit 4cfdd08
Show file tree

Hide file tree

Showing 10 changed files with 263 additions and 216 deletions.
diff --git a/template/src/common/components/CardModal.tsx b/template/src/common/components/CardModal.tsx
@@ -1,4 +1,4 @@
-import React, { memo, ReactNode } from "react"
+import React, { ReactNode, useMemo } from "react"
 import Animated, {
   cond,
   multiply,
@@ -9,88 +9,107 @@ import Animated, {
   Value,
 } from "react-native-reanimated"
 import { bin, spring, useValue } from "react-native-redash"
+import { StyleSheet, ViewStyle } from "react-native"
 import { layoutUtil } from "../helpers/layoutUtil"
 
 const HEIGHT_OFFSET = 0.7
 const TUCK_IN_HEIGHT = -0.05 * layoutUtil.height
 
 interface Props {
   children: ReactNode
-  tuckedIn: boolean
+  visible: boolean
   cardHeight?: number
   almostTuckedIn?: boolean
+  cardStyle?: ViewStyle
 }
 
-const CardModal = memo(
-  ({
-    children,
-    tuckedIn,
-    cardHeight = layoutUtil.height,
-    almostTuckedIn = false,
-  }: Props) => {
-    const animation = useValue(0)
-    const heightValue = multiply(-cardHeight, HEIGHT_OFFSET)
+const CardModal = ({
+  children,
+  visible,
+  cardHeight = layoutUtil.height,
+  almostTuckedIn = false,
+  cardStyle,
+}: Props) => {
+  const animation = useValue(0)
+  const heightValue = useMemo(() => multiply(-cardHeight, HEIGHT_OFFSET), [
+    cardHeight,
+  ])
 
-    useCode(
-      () => [
-        cond(
-          // down animation
-          or(not(bin(tuckedIn)), bin(almostTuckedIn)),
+  const isTuckedIn = bin(visible)
+  const isAlmostTuckedIn = bin(almostTuckedIn)
+
+  useCode(
+    () => [
+      cond(
+        // down animation
+        or(not(isTuckedIn), isAlmostTuckedIn),
+        set(
+          animation,
+          spring({
+            to: cond(isAlmostTuckedIn, TUCK_IN_HEIGHT, 0),
+            from: animation,
+            config: {
+              damping: new Value(20),
+              mass: 0.6,
+            },
+          })
+        ),
+        cond(or(isTuckedIn, not(isAlmostTuckedIn)), [
+          // up animation
           set(
             animation,
             spring({
-              to: cond(bin(almostTuckedIn), TUCK_IN_HEIGHT, 0),
+              to: heightValue,
               from: animation,
               config: {
                 damping: new Value(20),
+                mass: 0.8,
               },
             })
           ),
-          cond(or(bin(tuckedIn), not(bin(almostTuckedIn))), [
-            // up animation
-            set(
-              animation,
-              spring({
-                to: heightValue,
-                from: animation,
-                config: {
-                  damping: new Value(20),
-                },
-              })
-            ),
-          ])
-        ),
-      ],
-      [tuckedIn, heightValue, almostTuckedIn]
-    )
+        ])
+      ),
+    ],
+    [visible, heightValue, almostTuckedIn]
+  )
 
-    return (
+  return (
+    <>
       <Animated.View
-        style={{
-          backgroundColor: "#fff",
-          borderRadius: 16,
-          position: "absolute",
-          flex: 1,
-          width: "100%",
-          height: cardHeight * HEIGHT_OFFSET,
-          bottom: -cardHeight * HEIGHT_OFFSET,
-          shadowColor: "#000",
-          shadowOffset: {
-            width: 0,
-            height: 3,
+        style={[
+          styles.card,
+          {
+            height: cardHeight * HEIGHT_OFFSET,
+            bottom: -cardHeight * HEIGHT_OFFSET,
+            transform: [{ translateY: animation }],
           },
-          shadowOpacity: 0.27,
-          shadowRadius: 6.65,
-          elevation: 6,
-          transform: [{ translateY: animation }],
-          zIndex: 10,
-        }}
+          cardStyle,
+        ]}
       >
         {children}
       </Animated.View>
-    )
-  }
-)
+    </>
+  )
+}
+
+const styles = StyleSheet.create({
+  card: {
+    backgroundColor: "white",
+    borderTopRightRadius: 16,
+    borderTopLeftRadius: 16,
+    position: "absolute",
+    flex: 1,
+    width: "100%",
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 3,
+    },
+    shadowOpacity: 0.27,
+    shadowRadius: 6.65,
+    elevation: 6,
+    zIndex: 10,
+  },
+})
 
-CardModal.displayName = "CardModal"
-export default CardModal
+export default React.memo(CardModal)
diff --git a/template/src/common/components/LoadingPopup.tsx b/template/src/common/components/LoadingPopup.tsx
@@ -9,7 +9,7 @@ interface LoadingPopupProps {
 }
 const LoadingPopup = ({ visible }: LoadingPopupProps) => {
   const opacity = useTimingTransition(visible, {
-    duration: visible ? 400 : 100,
+    duration: visible ? 100 : 50,
   })
 
   return (
@@ -20,7 +20,7 @@ const LoadingPopup = ({ visible }: LoadingPopupProps) => {
       >
         <View style={styles.card}>
           <ActivityIndicator size={44} animating={visible} />
-          <Text style={styles.text}>Loading... This could take a minute.</Text>
+          <Text style={styles.text}>Please wait...</Text>
         </View>
       </Animated.View>
     </Portal>