rnnovaui 0.9.4 → 0.9.6

package/package.json

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

package/src/components/Accordion/UIAccordionContent.js

@@ -10,7 +10,6 @@ export const UIAccordionContent = memo(function UIAccordionContent({
   style,
   innerStyle,
   testID,
-  onLayout,
 }) {
   const accordion = useUIAccordion();
 
@@ -18,129 +17,52 @@ export const UIAccordionContent = memo(function UIAccordionContent({
 
   const [contentHeight, setContentHeight] = useState(0);
 
-  const [mounted, setMounted] = useState(item.open);
-
   const heightAnimation = useRef(new Animated.Value(item.open ? 1 : 0)).current;
 
   const opacityAnimation = useRef(
     new Animated.Value(item.open ? 1 : 0),
   ).current;
 
-  const previousOpen = useRef(item.open);
-
   /*
-   * -----------------------------------------------
-   * CONTENT MEASUREMENT
-   * -----------------------------------------------
-   *
-   * We only update the cached height when the
-   * actual content height changes.
+   * ------------------------------------------------
+   * MEASURE REAL CONTENT HEIGHT
+   * ------------------------------------------------
    */
 
-  const handleContentLayout = (event) => {
+  const handleLayout = (event) => {
     const height = Math.ceil(event.nativeEvent.layout.height);
 
     if (height > 0 && height !== contentHeight) {
       setContentHeight(height);
     }
-
-    onLayout?.(event);
   };
 
   /*
-   * -----------------------------------------------
-   * OPEN / CLOSE ANIMATION
-   * -----------------------------------------------
+   * ------------------------------------------------
+   * ANIMATION
+   * ------------------------------------------------
    */
 
   useEffect(() => {
-    const wasOpen = previousOpen.current;
-
-    previousOpen.current = item.open;
-
     /*
-     * Nothing changed.
+     * If content has not been measured yet,
+     * don't try to animate to an unknown height.
      */
-    if (wasOpen === item.open) {
+    if (contentHeight <= 0) {
       return;
     }
 
-    /*
-     * ---------------------------------------------
-     * OPEN
-     * ---------------------------------------------
-     */
-
-    if (item.open) {
-      setMounted(true);
-
-      /*
-       * If content has not been measured yet,
-       * wait for onLayout.
-       */
-      if (contentHeight <= 0) {
-        heightAnimation.setValue(0);
-
-        opacityAnimation.setValue(0);
-
-        return;
-      }
-
-      if (!accordion.animated) {
-        heightAnimation.setValue(1);
-
-        opacityAnimation.setValue(1);
-
-        return;
-      }
-
-      /*
-       * Start exactly from closed.
-       */
-      heightAnimation.setValue(0);
-
-      opacityAnimation.setValue(0);
-
-      Animated.parallel([
-        Animated.timing(heightAnimation, {
-          toValue: 1,
-
-          duration: accordion.animationDuration,
-
-          useNativeDriver: false,
-        }),
-
-        Animated.timing(opacityAnimation, {
-          toValue: 1,
-
-          duration: Math.min(accordion.animationDuration, 160),
-
-          useNativeDriver: false,
-        }),
-      ]).start();
-
-      return;
-    }
-
-    /*
-     * ---------------------------------------------
-     * CLOSE
-     * ---------------------------------------------
-     */
-
     if (!accordion.animated) {
-      heightAnimation.setValue(0);
-
-      opacityAnimation.setValue(0);
+      heightAnimation.setValue(item.open ? 1 : 0);
 
-      setMounted(false);
+      opacityAnimation.setValue(item.open ? 1 : 0);
 
       return;
     }
 
     Animated.parallel([
       Animated.timing(heightAnimation, {
-        toValue: 0,
+        toValue: item.open ? 1 : 0,
 
         duration: accordion.animationDuration,
 
@@ -148,17 +70,13 @@ export const UIAccordionContent = memo(function UIAccordionContent({
       }),
 
       Animated.timing(opacityAnimation, {
-        toValue: 0,
+        toValue: item.open ? 1 : 0,
 
-        duration: Math.min(accordion.animationDuration, 150),
+        duration: Math.min(accordion.animationDuration, 160),
 
-        useNativeDriver: false,
+        useNativeDriver: true,
       }),
-    ]).start(({ finished }) => {
-      if (finished) {
-        setMounted(false);
-      }
-    });
+    ]).start();
   }, [
     item.open,
     contentHeight,
@@ -169,51 +87,26 @@ export const UIAccordionContent = memo(function UIAccordionContent({
   ]);
 
   /*
-   * -----------------------------------------------
-   * IMPORTANT:
-   *
-   * Keep the content mounted while measuring.
-   *
-   * We use a wrapper whose height is animated.
-   * The inner content itself keeps its natural
-   * height.
-   * -----------------------------------------------
+   * ------------------------------------------------
+   * ANIMATED HEIGHT
+   * ------------------------------------------------
    */
 
-  if (!mounted) {
-    /*
-     * Keep a non-visible measurement copy mounted
-     * only when the component has never measured.
-     *
-     * Once contentHeight is known, don't keep
-     * measurement content around.
-     */
-    if (contentHeight > 0) {
-      return null;
-    }
+  const animatedHeight = heightAnimation.interpolate({
+    inputRange: [0, 1],
 
-    return (
-      <View style={styles.measureOnly} pointerEvents="none">
-        <View onLayout={handleContentLayout}>{children}</View>
-      </View>
-    );
-  }
+    outputRange: [0, contentHeight],
+  });
 
   /*
-   * -----------------------------------------------
-   * ANIMATED HEIGHT
-   * -----------------------------------------------
+   * ------------------------------------------------
+   * CONTENT
+   * ------------------------------------------------
+   *
+   * The inner content remains mounted all the time.
+   * Therefore backend content can have any height.
    */
 
-  const animatedHeight =
-    contentHeight > 0
-      ? heightAnimation.interpolate({
-          inputRange: [0, 1],
-
-          outputRange: [0, contentHeight],
-        })
-      : 0;
-
   return (
     <Animated.View
       testID={testID}
@@ -229,7 +122,7 @@ export const UIAccordionContent = memo(function UIAccordionContent({
         style,
       ]}
     >
-      <View style={[styles.inner, innerStyle]} onLayout={handleContentLayout}>
+      <View style={[styles.inner, innerStyle]} onLayout={handleLayout}>
         {children}
       </View>
     </Animated.View>
@@ -246,18 +139,6 @@ const styles = StyleSheet.create({
   inner: {
     width: "100%",
   },
-
-  measureOnly: {
-    position: "absolute",
-
-    left: 0,
-
-    right: 0,
-
-    opacity: 0,
-
-    zIndex: -1,
-  },
 });
 
 UIAccordionContent.displayName = "UIAccordion.Content";

package/src/components/Tabs/UITabs.js

@@ -69,12 +69,12 @@ export const UITabsAnimationPresets = {
   },
 
   smooth: {
-    animation: "indicatorSlide",
-    duration: 240,
+    animation: "fade",
+    duration: 220,
   },
 
   snappy: {
-    animation: "indicatorSlide",
+    animation: "fade",
     duration: 160,
   },
 
@@ -100,27 +100,29 @@ const TabsContext = createContext(null);
  * ======================================================= */
 
 function getSizeConfig(size) {
-  if (size === "sm") {
-    return {
-      height: 42,
-      horizontalPadding: 10,
-      fontSize: 12,
-    };
-  }
+  switch (size) {
+    case "sm":
+      return {
+        height: 42,
+        horizontalPadding: 10,
+        fontSize: 12,
+      };
 
-  if (size === "lg") {
-    return {
-      height: 58,
-      horizontalPadding: 16,
-      fontSize: 16,
-    };
-  }
+    case "lg":
+      return {
+        height: 58,
+        horizontalPadding: 16,
+        fontSize: 16,
+      };
 
-  return {
-    height: 48,
-    horizontalPadding: 12,
-    fontSize: 14,
-  };
+    case "md":
+    default:
+      return {
+        height: 48,
+        horizontalPadding: 12,
+        fontSize: 14,
+      };
+  }
 }
 
 function getEasing(type) {
@@ -196,9 +198,14 @@ const UITabsRoot = forwardRef(function UITabs(
 
     indicatorAnimation,
 
+    /*
+     * IMPORTANT:
+     * Content defaults to fade.
+     * It does NOT slide by default.
+     */
     contentAnimation = "fade",
 
-    directionAware = true,
+    directionAware = false,
 
     spring = {
       damping: 18,
@@ -302,6 +309,7 @@ const UITabsRoot = forwardRef(function UITabs(
       if (
         old &&
         old.x === layout.x &&
+        old.y === layout.y &&
         old.width === layout.width &&
         old.height === layout.height
       ) {
@@ -574,7 +582,7 @@ const UITabsList = memo(function UITabsList({
           showsHorizontalScrollIndicator={showsHorizontalScrollIndicator}
           keyboardShouldPersistTaps={keyboardShouldPersistTaps}
           bounces
-          contentContainerStyle={styles.scrollContent}
+          contentContainerStyle={[styles.scrollContent]}
         >
           {content}
         </ScrollView>
@@ -657,7 +665,9 @@ const UITabsTrigger = memo(function UITabsTrigger({
     if (animation === "opacity") {
       Animated.timing(opacity, {
         toValue: 0.65,
+
         duration: 80,
+
         useNativeDriver: true,
       }).start();
 
@@ -675,7 +685,9 @@ const UITabsTrigger = memo(function UITabsTrigger({
 
       Animated.timing(opacity, {
         toValue: 0.8,
+
         duration: 80,
+
         useNativeDriver: true,
       }),
     ]).start();
@@ -693,7 +705,9 @@ const UITabsTrigger = memo(function UITabsTrigger({
 
       Animated.timing(opacity, {
         toValue: 1,
+
         duration: 100,
+
         useNativeDriver: true,
       }),
     ]).start();
@@ -887,9 +901,9 @@ const UITabsIndicator = memo(function UITabsIndicator({
 
     const targetWidth = activeLayout.width;
 
-    const animation = tabs.indicatorAnimation;
+    const indicatorAnimation = tabs.indicatorAnimation;
 
-    if (!tabs.animated || animation === "none") {
+    if (!tabs.animated || indicatorAnimation === "none") {
       animatedX.setValue(targetX);
 
       animatedWidth.setValue(targetWidth);
@@ -901,37 +915,51 @@ const UITabsIndicator = memo(function UITabsIndicator({
       return;
     }
 
-    if (animation === "indicatorFade" || animation === "indicatorFadeScale") {
+    if (indicatorAnimation === "indicatorFade") {
       animatedOpacity.setValue(0);
     }
 
-    if (animation === "indicatorScale" || animation === "indicatorFadeScale") {
+    if (
+      indicatorAnimation === "indicatorScale" ||
+      indicatorAnimation === "indicatorFadeScale"
+    ) {
       animatedScale.setValue(0.8);
     }
 
-    if (animation === "indicatorSpring" || animation === "spring") {
+    if (
+      indicatorAnimation === "indicatorSpring" ||
+      indicatorAnimation === "spring"
+    ) {
       Animated.parallel([
         Animated.spring(animatedX, {
           toValue: targetX,
+
           useNativeDriver: false,
+
           ...tabs.spring,
         }),
 
         Animated.spring(animatedWidth, {
           toValue: targetWidth,
+
           useNativeDriver: false,
+
           ...tabs.spring,
         }),
 
         Animated.spring(animatedScale, {
           toValue: 1,
+
           useNativeDriver: false,
+
           ...tabs.spring,
         }),
 
         Animated.timing(animatedOpacity, {
           toValue: 1,
+
           duration: tabs.animationDuration,
+
           useNativeDriver: false,
         }),
       ]).start();
@@ -942,27 +970,37 @@ const UITabsIndicator = memo(function UITabsIndicator({
     Animated.parallel([
       Animated.timing(animatedX, {
         toValue: targetX,
+
         duration: tabs.animationDuration,
+
         easing: getEasing(tabs.animationEasing),
+
         useNativeDriver: false,
       }),
 
       Animated.timing(animatedWidth, {
         toValue: targetWidth,
+
         duration: tabs.animationDuration,
+
         easing: getEasing(tabs.animationEasing),
+
         useNativeDriver: false,
       }),
 
       Animated.timing(animatedOpacity, {
         toValue: 1,
+
         duration: tabs.animationDuration,
+
         useNativeDriver: false,
       }),
 
       Animated.timing(animatedScale, {
         toValue: 1,
+
         duration: tabs.animationDuration,
+
         useNativeDriver: false,
       }),
     ]).start();
@@ -1039,6 +1077,18 @@ const UITabsContent = memo(function UITabsContent({
   style,
   contentContainerStyle,
 
+  /*
+   * Default is fade.
+   *
+   * Supported:
+   * none
+   * fade
+   * scale
+   * fadeScale
+   * slide
+   * slideFade
+   * slideScale
+   */
   animation,
 
   animationDuration,
@@ -1065,9 +1115,7 @@ const UITabsContent = memo(function UITabsContent({
 
   const previousActive = useRef(active);
 
-  const direction = tabs.getDirection(value);
-
-  const resolvedAnimation = animation || tabs.contentAnimation;
+  const resolvedAnimation = animation ?? tabs.contentAnimation ?? "fade";
 
   useEffect(() => {
     if (active) {
@@ -1119,6 +1167,8 @@ const UITabsContent = memo(function UITabsContent({
 
       duration: animationDuration ?? tabs.animationDuration,
 
+      easing: getEasing(tabs.animationEasing),
+
       useNativeDriver: true,
     }).start(() => {
       if (unmountOnExit) {
@@ -1142,10 +1192,22 @@ const UITabsContent = memo(function UITabsContent({
     return null;
   }
 
+  /*
+   * IMPORTANT:
+   *
+   * Default fade has:
+   * - opacity animation
+   * - NO translateX
+   * - NO translateY
+   *
+   * Therefore it cannot behave
+   * like a carousel.
+   */
+
   const isFade =
     resolvedAnimation === "fade" ||
-    resolvedAnimation === "slideFade" ||
-    resolvedAnimation === "fadeScale";
+    resolvedAnimation === "fadeScale" ||
+    resolvedAnimation === "slideFade";
 
   const isScale =
     resolvedAnimation === "scale" ||
@@ -1157,40 +1219,48 @@ const UITabsContent = memo(function UITabsContent({
     resolvedAnimation === "slideFade" ||
     resolvedAnimation === "slideScale";
 
-  const translateX = isSlide
+  const translateX = isSlide && tabs.directionAware ? 16 : 0;
+
+  const animatedTranslateX = isSlide
     ? progress.interpolate({
         inputRange: [0, 1],
-        outputRange: [direction * 16, 0],
+        outputRange: [translateX, 0],
       })
     : 0;
 
-  const scale = isScale
+  const animatedScale = isScale
     ? progress.interpolate({
         inputRange: [0, 1],
-        outputRange: [0.96, 1],
+        outputRange: [0.98, 1],
       })
     : 1;
 
+  const animatedOpacity = isFade ? progress : 1;
+
   return (
     <Animated.View
       testID={testID}
       accessible={accessible}
       accessibilityLabel={accessibilityLabel}
       style={[
+        styles.content,
+
         {
-          opacity: isFade ? progress : 1,
+          opacity: animatedOpacity,
 
           transform: [
             {
-              translateX,
+              translateX: animatedTranslateX,
             },
+
             {
-              scale,
+              scale: animatedScale,
             },
           ],
         },
 
         style,
+
         contentContainerStyle,
       ]}
       {...props}
@@ -1222,19 +1292,21 @@ export function useUITabs() {
  * COMPOUND COMPONENT API
  * ======================================================= */
 
-UITabsRoot.List = UITabsList;
+const UITabs = memo(UITabsRoot);
 
-UITabsRoot.Trigger = UITabsTrigger;
+UITabs.List = UITabsList;
 
-UITabsRoot.Content = UITabsContent;
+UITabs.Trigger = UITabsTrigger;
 
-UITabsRoot.Indicator = UITabsIndicator;
+UITabs.Content = UITabsContent;
+
+UITabs.Indicator = UITabsIndicator;
 
 /* =========================================================
  * DISPLAY NAMES
  * ======================================================= */
 
-UITabsRoot.displayName = "UITabs";
+UITabs.displayName = "UITabs";
 
 UITabsList.displayName = "UITabs.List";
 
@@ -1248,7 +1320,7 @@ UITabsIndicator.displayName = "UITabs.Indicator";
  * EXPORT
  * ======================================================= */
 
-export const UITabs = memo(UITabsRoot);
+export { UITabs };
 
 /* =========================================================
  * STYLES
@@ -1261,6 +1333,7 @@ const styles = StyleSheet.create({
 
   list: {
     width: "100%",
+
     overflow: "hidden",
   },
 
@@ -1335,4 +1408,8 @@ const styles = StyleSheet.create({
 
     zIndex: 20,
   },
+
+  content: {
+    width: "100%",
+  },
 });