rnnovaui 0.12.0 → 0.12.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rnnovaui",
-  "version": "0.12.0",
+  "version": "0.12.2",
   "description": "",
   "main": "src/index.js",
   "react-native": "src/index.js",

package/src/components/UIBottomSheet/UIBottomSheet.js

@@ -12,6 +12,7 @@ import {
   Animated as RNAnimated,
   BackHandler,
   Dimensions,
+  KeyboardAvoidingView,
   Modal,
   PanResponder,
   Platform,
@@ -41,9 +42,7 @@ const { height: SCREEN_HEIGHT } = Dimensions.get("window");
 /* Helpers                                                                    */
 /* -------------------------------------------------------------------------- */
 
-const clamp = (value, min, max) => {
-  return Math.min(Math.max(value, min), max);
-};
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
 
 const resolveSnapPoint = (point, availableHeight) => {
   if (typeof point === "number") {
@@ -243,11 +242,15 @@ const UIBottomSheet = forwardRef(function UIBottomSheet(
     /* Header */
 
     header,
+
     title,
+
+    // NEW
     titlePosition = "left",
     titleFontSize = 18,
     titleColor,
     titleFontWeight = "700",
+
     titleStyle,
 
     showClose = false,
@@ -273,7 +276,7 @@ const UIBottomSheet = forwardRef(function UIBottomSheet(
 
     showsVerticalScrollIndicator = false,
 
-    /* Safe Area */
+    /* Safe area */
 
     safeArea = true,
 
@@ -302,11 +305,15 @@ const UIBottomSheet = forwardRef(function UIBottomSheet(
   ref,
 ) {
   const { theme } = useUITheme();
+
   const insets = useSafeAreaInsets();
 
   const colors = theme?.colors ?? {};
+
   const radius = theme?.radius ?? {};
+
   const shadows = theme?.shadows ?? {};
+
   const themeAnimation = theme?.animation ?? {};
 
   /* ---------------------------------------------------------------------- */
@@ -322,10 +329,11 @@ const UIBottomSheet = forwardRef(function UIBottomSheet(
   const [modalVisible, setModalVisible] = useState(isVisible);
 
   const mountedRef = useRef(false);
+
   const previousVisibleRef = useRef(isVisible);
 
   /* ---------------------------------------------------------------------- */
-  /* Sheet height                                                           */
+  /* Height                                                                 */
   /* ---------------------------------------------------------------------- */
 
   const availableHeight = useMemo(() => {
@@ -381,7 +389,7 @@ const UIBottomSheet = forwardRef(function UIBottomSheet(
   const backdropProgress = useSharedValue(0);
 
   /* ---------------------------------------------------------------------- */
-  /* Theme                                                                  */
+  /* Colors                                                                 */
   /* ---------------------------------------------------------------------- */
 
   const resolvedBackground =
@@ -391,12 +399,21 @@ const UIBottomSheet = forwardRef(function UIBottomSheet(
 
   const resolvedRadius = borderRadius ?? radius.xl ?? 18;
 
-  const resolvedTextColor = colors.text ?? "#111111";
+  const resolvedTextColor = titleColor ?? colors.text ?? "#111111";
 
   const resolvedCloseColor = closeIconColor ?? colors.text ?? "#111111";
 
   /* ---------------------------------------------------------------------- */
-  /* Visibility callback                                                    */
+  /* Title position                                                         */
+  /* ---------------------------------------------------------------------- */
+
+  const resolvedTitlePosition =
+    titlePosition === "center" || titlePosition === "right"
+      ? titlePosition
+      : "left";
+
+  /* ---------------------------------------------------------------------- */
+  /* Visibility                                                             */
   /* ---------------------------------------------------------------------- */
 
   const setVisibility = useCallback(
@@ -413,7 +430,7 @@ const UIBottomSheet = forwardRef(function UIBottomSheet(
   );
 
   /* ---------------------------------------------------------------------- */
-  /* Native open                                                            */
+  /* Native OPEN                                                            */
   /* ---------------------------------------------------------------------- */
 
   const animateNativeOpen = useCallback(
@@ -427,6 +444,7 @@ const UIBottomSheet = forwardRef(function UIBottomSheet(
       RNAnimated.parallel([
         RNAnimated.spring(nativeTranslateY, {
           toValue: targetTranslate,
+
           useNativeDriver: true,
 
           damping: springConfig?.damping ?? 18,
@@ -438,7 +456,9 @@ const UIBottomSheet = forwardRef(function UIBottomSheet(
 
         RNAnimated.timing(nativeBackdropOpacity, {
           toValue: 1,
+
           duration: animationDuration,
+
           useNativeDriver: true,
         }),
       ]).start();
@@ -453,34 +473,43 @@ const UIBottomSheet = forwardRef(function UIBottomSheet(
   );
 
   /* ---------------------------------------------------------------------- */
-  /* Native close                                                           */
+  /* Native CLOSE                                                           */
   /* ---------------------------------------------------------------------- */
 
-  const animateNativeClose = useCallback(
-    (callback) => {
-      RNAnimated.parallel([
-        RNAnimated.timing(nativeTranslateY, {
-          toValue: SCREEN_HEIGHT,
-          duration: animationDuration,
-          useNativeDriver: true,
-        }),
+  const finishClose = useCallback(() => {
+    setModalVisible(false);
 
-        RNAnimated.timing(nativeBackdropOpacity, {
-          toValue: 0,
-          duration: animationDuration,
-          useNativeDriver: true,
-        }),
-      ]).start(({ finished }) => {
-        if (finished && typeof callback === "function") {
-          callback();
-        }
-      });
-    },
-    [nativeTranslateY, nativeBackdropOpacity, animationDuration],
-  );
+    if (typeof onClose === "function") {
+      onClose();
+    }
+  }, [onClose]);
+
+  const animateNativeClose = useCallback(() => {
+    RNAnimated.parallel([
+      RNAnimated.timing(nativeTranslateY, {
+        toValue: SCREEN_HEIGHT,
+
+        duration: animationDuration,
+
+        useNativeDriver: true,
+      }),
+
+      RNAnimated.timing(nativeBackdropOpacity, {
+        toValue: 0,
+
+        duration: animationDuration,
+
+        useNativeDriver: true,
+      }),
+    ]).start(({ finished }) => {
+      if (finished) {
+        finishClose();
+      }
+    });
+  }, [nativeTranslateY, nativeBackdropOpacity, animationDuration, finishClose]);
 
   /* ---------------------------------------------------------------------- */
-  /* Reanimated open                                                        */
+  /* Reanimated OPEN                                                        */
   /* ---------------------------------------------------------------------- */
 
   const animateReanimatedOpen = useCallback(
@@ -511,19 +540,7 @@ const UIBottomSheet = forwardRef(function UIBottomSheet(
   );
 
   /* ---------------------------------------------------------------------- */
-  /* Finish close                                                           */
-  /* ---------------------------------------------------------------------- */
-
-  const finishClose = useCallback(() => {
-    setModalVisible(false);
-
-    if (typeof onClose === "function") {
-      onClose();
-    }
-  }, [onClose]);
-
-  /* ---------------------------------------------------------------------- */
-  /* Reanimated close                                                       */
+  /* Reanimated CLOSE                                                       */
   /* ---------------------------------------------------------------------- */
 
   const animateReanimatedClose = useCallback(() => {
@@ -545,7 +562,7 @@ const UIBottomSheet = forwardRef(function UIBottomSheet(
   }, [translateY, backdropProgress, animationDuration, finishClose]);
 
   /* ---------------------------------------------------------------------- */
-  /* Animate open                                                           */
+  /* Open animation                                                         */
   /* ---------------------------------------------------------------------- */
 
   const animateOpen = useCallback(
@@ -562,19 +579,19 @@ const UIBottomSheet = forwardRef(function UIBottomSheet(
   );
 
   /* ---------------------------------------------------------------------- */
-  /* Animate close                                                          */
+  /* Close animation                                                        */
   /* ---------------------------------------------------------------------- */
 
   const animateClose = useCallback(() => {
     if (reanimated) {
       animateReanimatedClose();
     } else {
-      animateNativeClose(finishClose);
+      animateNativeClose();
     }
-  }, [reanimated, animateReanimatedClose, animateNativeClose, finishClose]);
+  }, [reanimated, animateReanimatedClose, animateNativeClose]);
 
   /* ---------------------------------------------------------------------- */
-  /* Open                                                                    */
+  /* Public OPEN                                                            */
   /* ---------------------------------------------------------------------- */
 
   const open = useCallback(
@@ -612,7 +629,7 @@ const UIBottomSheet = forwardRef(function UIBottomSheet(
   );
 
   /* ---------------------------------------------------------------------- */
-  /* Close                                                                   */
+  /* Public CLOSE                                                           */
   /* ---------------------------------------------------------------------- */
 
   const close = useCallback(() => {
@@ -622,6 +639,7 @@ const UIBottomSheet = forwardRef(function UIBottomSheet(
     }
 
     setVisibility(false);
+
     animateClose();
   }, [modalVisible, setVisibility, animateClose]);
 
@@ -673,6 +691,7 @@ const UIBottomSheet = forwardRef(function UIBottomSheet(
       } else {
         RNAnimated.spring(nativeTranslateY, {
           toValue: targetTranslate,
+
           useNativeDriver: true,
 
           damping: springConfig?.damping ?? 18,
@@ -696,7 +715,7 @@ const UIBottomSheet = forwardRef(function UIBottomSheet(
   );
 
   /* ---------------------------------------------------------------------- */
-  /* Expand / collapse                                                      */
+  /* Expand / Collapse                                                      */
   /* ---------------------------------------------------------------------- */
 
   const expand = useCallback(() => {
@@ -708,7 +727,7 @@ const UIBottomSheet = forwardRef(function UIBottomSheet(
   }, [snapTo]);
 
   /* ---------------------------------------------------------------------- */
-  /* Imperative API                                                         */
+  /* Ref API                                                                */
   /* ---------------------------------------------------------------------- */
 
   useImperativeHandle(
@@ -727,7 +746,7 @@ const UIBottomSheet = forwardRef(function UIBottomSheet(
   );
 
   /* ---------------------------------------------------------------------- */
-  /* Controlled visibility                                                  */
+  /* Controlled state                                                       */
   /* ---------------------------------------------------------------------- */
 
   useEffect(() => {
@@ -751,8 +770,6 @@ const UIBottomSheet = forwardRef(function UIBottomSheet(
       return undefined;
     }
 
-    /* false -> true */
-
     if (isVisible && !previous) {
       setModalVisible(true);
 
@@ -763,8 +780,6 @@ const UIBottomSheet = forwardRef(function UIBottomSheet(
       return () => clearTimeout(timer);
     }
 
-    /* true -> false */
-
     if (!isVisible && previous) {
       animateClose();
     }
@@ -773,7 +788,7 @@ const UIBottomSheet = forwardRef(function UIBottomSheet(
   }, [isVisible, animateOpen, animateClose]);
 
   /* ---------------------------------------------------------------------- */
-  /* Android back                                                           */
+  /* Android Back                                                           */
   /* ---------------------------------------------------------------------- */
 
   useEffect(() => {
@@ -848,6 +863,7 @@ const UIBottomSheet = forwardRef(function UIBottomSheet(
 
           if (distance < nearestDistance) {
             nearestDistance = distance;
+
             nearestIndex = index;
           }
         });
@@ -873,7 +889,7 @@ const UIBottomSheet = forwardRef(function UIBottomSheet(
   ]);
 
   /* ---------------------------------------------------------------------- */
-  /* Reanimated styles                                                      */
+  /* Animated styles                                                        */
   /* ---------------------------------------------------------------------- */
 
   const animatedSheetStyle = useAnimatedStyle(() => ({
@@ -916,7 +932,6 @@ const UIBottomSheet = forwardRef(function UIBottomSheet(
 
   const sheetStyle = [
     bottomSheetStyles.sheet,
-
     {
       width,
       height: finalSheetHeight,
@@ -965,15 +980,29 @@ const UIBottomSheet = forwardRef(function UIBottomSheet(
       return null;
     }
 
-    return (
-      <View style={[bottomSheetStyles.header, headerStyle]}>
-        <View style={bottomSheetStyles.headerTitle}>
+    /* -------------------------------------------------------------------- */
+    /* CENTER                                                               */
+    /* -------------------------------------------------------------------- */
+
+    if (resolvedTitlePosition === "center") {
+      return (
+        <View
+          style={[
+            bottomSheetStyles.header,
+            bottomSheetStyles.headerCenter,
+            headerStyle,
+          ]}
+        >
           {typeof title === "string" ? (
             <Text
+              numberOfLines={1}
               style={[
                 bottomSheetStyles.title,
+                bottomSheetStyles.titleCenter,
                 {
+                  fontSize: titleFontSize,
                   color: resolvedTextColor,
+                  fontWeight: titleFontWeight,
                 },
                 titleStyle,
               ]}
@@ -983,7 +1012,71 @@ const UIBottomSheet = forwardRef(function UIBottomSheet(
           ) : (
             title
           )}
+
+          {showClose ? (
+            <Pressable
+              accessibilityRole="button"
+              accessibilityLabel="Close"
+              hitSlop={10}
+              onPress={() => {
+                if (typeof onClosePress === "function") {
+                  onClosePress();
+                } else {
+                  close();
+                }
+              }}
+              style={[
+                bottomSheetStyles.closeButton,
+                bottomSheetStyles.closeButtonCenter,
+              ]}
+            >
+              <Ionicons
+                name={closeIcon}
+                size={closeIconSize}
+                color={resolvedCloseColor}
+              />
+            </Pressable>
+          ) : null}
         </View>
+      );
+    }
+
+    /* -------------------------------------------------------------------- */
+    /* LEFT / RIGHT                                                         */
+    /* -------------------------------------------------------------------- */
+
+    return (
+      <View
+        style={[
+          bottomSheetStyles.header,
+          resolvedTitlePosition === "right" && bottomSheetStyles.headerRight,
+          headerStyle,
+        ]}
+      >
+        {typeof title === "string" ? (
+          <Text
+            numberOfLines={1}
+            style={[
+              bottomSheetStyles.title,
+
+              {
+                fontSize: titleFontSize,
+                color: resolvedTextColor,
+                fontWeight: titleFontWeight,
+              },
+
+              resolvedTitlePosition === "right" && {
+                textAlign: "right",
+              },
+
+              titleStyle,
+            ]}
+          >
+            {title}
+          </Text>
+        ) : (
+          title
+        )}
 
         {showClose ? (
           <Pressable
@@ -1011,7 +1104,7 @@ const UIBottomSheet = forwardRef(function UIBottomSheet(
   };
 
   /* ---------------------------------------------------------------------- */
-  /* Sheet content                                                          */
+  /* Content                                                                */
   /* ---------------------------------------------------------------------- */
 
   const sheetContent = (
@@ -1060,7 +1153,7 @@ const UIBottomSheet = forwardRef(function UIBottomSheet(
   );
 
   /* ---------------------------------------------------------------------- */
-  /* Backdrop                                                               */
+  /* Backdrop press                                                         */
   /* ---------------------------------------------------------------------- */
 
   const handleBackdropPress = () => {
@@ -1070,7 +1163,7 @@ const UIBottomSheet = forwardRef(function UIBottomSheet(
   };
 
   /* ---------------------------------------------------------------------- */
-  /* Closed                                                                  */
+  /* Closed                                                                 */
   /* ---------------------------------------------------------------------- */
 
   if (!modalVisible) {
@@ -1078,7 +1171,7 @@ const UIBottomSheet = forwardRef(function UIBottomSheet(
   }
 
   /* ---------------------------------------------------------------------- */
-  /* Render                                                                  */
+  /* Render                                                                 */
   /* ---------------------------------------------------------------------- */
 
   return (
@@ -1198,32 +1291,65 @@ const bottomSheetStyles = StyleSheet.create({
     alignSelf: "center",
   },
 
+  /* -------------------------------------------------------------------- */
+  /* Header                                                               */
+  /* -------------------------------------------------------------------- */
+
   header: {
     width: "100%",
     minHeight: 50,
     flexDirection: "row",
     alignItems: "center",
-    justifyContent: "space-between",
   },
 
-  headerTitle: {
-    flex: 1,
+  headerCenter: {
+    position: "relative",
     justifyContent: "center",
   },
 
+  headerRight: {
+    justifyContent: "flex-end",
+  },
+
+  /* -------------------------------------------------------------------- */
+  /* Title                                                                */
+  /* -------------------------------------------------------------------- */
+
   title: {
+    flex: 1,
     fontSize: 18,
     lineHeight: 24,
     fontWeight: "700",
   },
 
+  titleCenter: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    textAlign: "center",
+  },
+
+  /* -------------------------------------------------------------------- */
+  /* Close                                                                 */
+  /* -------------------------------------------------------------------- */
+
   closeButton: {
     width: 44,
     height: 44,
     alignItems: "center",
     justifyContent: "center",
+    zIndex: 10,
   },
 
+  closeButtonCenter: {
+    marginLeft: "auto",
+    zIndex: 20,
+  },
+
+  /* -------------------------------------------------------------------- */
+  /* Content                                                               */
+  /* -------------------------------------------------------------------- */
+
   scrollView: {
     flex: 1,
     width: "100%",
@@ -1244,7 +1370,7 @@ const bottomSheetStyles = StyleSheet.create({
 });
 
 /* -------------------------------------------------------------------------- */
-/* Exports                                                                    */
+/* Export                                                                     */
 /* -------------------------------------------------------------------------- */
 
 export { UIBottomSheet };