rnnovaui 0.9.13 → 0.9.15

package/package.json

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

package/src/components/Accordion/UIAccordion.js

@@ -1,5 +1,7 @@
 import React, {
+  Children,
   createContext,
+  isValidElement,
   memo,
   useCallback,
   useContext,
@@ -10,52 +12,19 @@ import React, {
 import { StyleSheet, View } from "react-native";
 
 import { useUITheme } from "../../theme";
+import { UIAccordionItem } from "./UIAccordionItem";
+import { UIAccordionHeader } from "./UIAccordionHeader";
+import { UIAccordionTrigger } from "./UIAccordionTrigger";
+import { UIAccordionContent } from "./UIAccordionContent";
+import { UIAccordionIcon } from "./UIAccordionIcon";
 
 const AccordionContext = createContext(null);
 
-const ANIMATION_PRESETS = {
-  none: {
-    content: "none",
-    icon: "none",
-    press: "none",
-  },
-
-  subtle: {
-    content: "fade",
-    icon: "rotate",
-    press: "scale",
-  },
-
-  smooth: {
-    content: "fadeExpand",
-    icon: "rotate",
-    press: "scale",
-  },
-
-  snappy: {
-    content: "expand",
-    icon: "rotate",
-    press: "scale",
-  },
-
-  spring: {
-    content: "springExpand",
-    icon: "springRotate",
-    press: "scale",
-  },
-
-  bouncy: {
-    content: "springFadeExpand",
-    icon: "springRotate",
-    press: "scale",
-  },
-};
-
 export const UIAccordion = memo(function UIAccordion({
   children,
 
   value,
-  defaultValue = null,
+  defaultValue,
 
   multiple = false,
 
@@ -64,37 +33,15 @@ export const UIAccordion = memo(function UIAccordion({
   disabled = false,
 
   animated = true,
-
-  animationPreset = "smooth",
-
-  contentAnimation,
-  iconAnimation,
-  pressAnimation,
-
-  animationDuration = 260,
-
-  spring = {
-    damping: 18,
-    stiffness: 180,
-    mass: 0.8,
-  },
+  animationDuration = 220,
 
   variant = "default",
-
   size = "md",
 
   separator = true,
 
-  border = false,
-
-  radius = 12,
-
-  backgroundColor,
-
-  borderColor,
-
-  style,
   containerStyle,
+  itemStyle,
 
   testID,
 }) {
@@ -102,8 +49,6 @@ export const UIAccordion = memo(function UIAccordion({
 
   const colors = theme?.colors || {};
 
-  const controlled = value !== undefined;
-
   const normalizeValue = useCallback(
     (input) => {
       if (multiple) {
@@ -111,7 +56,7 @@ export const UIAccordion = memo(function UIAccordion({
           return input;
         }
 
-        if (input === null || input === undefined) {
+        if (input === undefined || input === null) {
           return [];
         }
 
@@ -127,26 +72,14 @@ export const UIAccordion = memo(function UIAccordion({
     [multiple],
   );
 
+  const controlled = value !== undefined;
+
   const [internalValue, setInternalValue] = useState(() =>
     normalizeValue(defaultValue),
   );
 
   const currentValue = controlled ? normalizeValue(value) : internalValue;
 
-  const preset = ANIMATION_PRESETS[animationPreset] || ANIMATION_PRESETS.smooth;
-
-  const resolvedContentAnimation = animated
-    ? (contentAnimation ?? preset.content)
-    : "none";
-
-  const resolvedIconAnimation = animated
-    ? (iconAnimation ?? preset.icon)
-    : "none";
-
-  const resolvedPressAnimation = animated
-    ? (pressAnimation ?? preset.press)
-    : "none";
-
   const isOpen = useCallback(
     (itemValue) => {
       if (multiple) {
@@ -191,36 +124,21 @@ export const UIAccordion = memo(function UIAccordion({
     () => ({
       colors,
 
-      value: currentValue,
+      currentValue,
 
       multiple,
 
       disabled,
 
-      size,
-
       animated,
-
       animationDuration,
 
-      spring,
-
-      contentAnimation: resolvedContentAnimation,
-
-      iconAnimation: resolvedIconAnimation,
-
-      pressAnimation: resolvedPressAnimation,
-
       variant,
+      size,
 
       separator,
 
-      border,
-
-      radius,
-
       isOpen,
-
       toggle,
     }),
     [
@@ -228,17 +146,11 @@ export const UIAccordion = memo(function UIAccordion({
       currentValue,
       multiple,
       disabled,
-      size,
       animated,
       animationDuration,
-      spring,
-      resolvedContentAnimation,
-      resolvedIconAnimation,
-      resolvedPressAnimation,
       variant,
+      size,
       separator,
-      border,
-      radius,
       isOpen,
       toggle,
     ],
@@ -252,23 +164,25 @@ export const UIAccordion = memo(function UIAccordion({
           styles.container,
 
           {
-            backgroundColor:
-              backgroundColor || colors.card || colors.surface || "transparent",
-
-            borderColor: borderColor || colors.border || "#E5E5E5",
+            backgroundColor: colors.card || colors.background || "transparent",
 
-            borderRadius: radius,
+            borderColor: colors.border || "#E5E5E5",
           },
 
-          border ? styles.border : null,
-
-          variant === "outlined" ? styles.border : null,
+          variant === "outlined" ? styles.outlined : null,
 
           containerStyle,
-          style,
         ]}
       >
-        {children}
+        {Children.map(children, (child) => {
+          if (!isValidElement(child)) {
+            return child;
+          }
+
+          return React.cloneElement(child, {
+            style: [itemStyle, child.props.style],
+          });
+        })}
       </View>
     </AccordionContext.Provider>
   );
@@ -278,24 +192,31 @@ export function useUIAccordion() {
   const context = useContext(AccordionContext);
 
   if (!context) {
-    throw new Error("Accordion components must be used inside <UIAccordion>.");
+    throw new Error("Accordion components must be used inside UIAccordion.");
   }
 
   return context;
 }
 
-export const UIAccordionAnimationPresets = ANIMATION_PRESETS;
-
 const styles = StyleSheet.create({
   container: {
     width: "100%",
-
     overflow: "hidden",
   },
 
-  border: {
+  outlined: {
     borderWidth: 1,
+    borderRadius: 12,
   },
 });
 
 UIAccordion.displayName = "UIAccordion";
+UIAccordion.Item = UIAccordionItem;
+
+UIAccordion.Header = UIAccordionHeader;
+
+UIAccordion.Trigger = UIAccordionTrigger;
+
+UIAccordion.Content = UIAccordionContent;
+
+UIAccordion.Icon = UIAccordionIcon;

package/src/components/Accordion/UIAccordionContent.js

@@ -3,183 +3,163 @@ import React, { memo, useEffect, useRef, useState } from "react";
 import { Animated, StyleSheet, View } from "react-native";
 
 import { useUIAccordion } from "./UIAccordion";
-
 import { useUIAccordionItem } from "./UIAccordionItem";
 
 export const UIAccordionContent = memo(function UIAccordionContent({
   children,
-
-  animation,
-
-  animationDuration,
-
   style,
-
   innerStyle,
-
-  contentStyle,
-
   testID,
 }) {
   const accordion = useUIAccordion();
-
   const item = useUIAccordionItem();
 
-  const animationType = animation ?? accordion.contentAnimation;
-
-  const duration = animationDuration ?? accordion.animationDuration;
+  const [contentHeight, setContentHeight] = useState(0);
 
-  const [mounted, setMounted] = useState(item.open);
+  const animation = useRef(new Animated.Value(item.open ? 1 : 0)).current;
 
-  const progress = useRef(new Animated.Value(item.open ? 1 : 0)).current;
+  /*
+   * ------------------------------------------------
+   * MEASURE REAL CONTENT
+   * ------------------------------------------------
+   */
 
-  const measuredHeight = useRef(0);
+  const handleMeasureLayout = (event) => {
+    const height = Math.ceil(event.nativeEvent.layout.height);
 
-  const handleLayout = (event) => {
-    const height = event.nativeEvent.layout.height;
-
-    if (height > measuredHeight.current) {
-      measuredHeight.current = height;
+    if (height > 0 && height !== contentHeight) {
+      setContentHeight(height);
     }
   };
 
-  useEffect(() => {
-    if (item.open) {
-      setMounted(true);
-
-      if (animationType === "none" || !accordion.animated) {
-        progress.setValue(1);
-        return;
-      }
+  /*
+   * ------------------------------------------------
+   * OPEN / CLOSE
+   * ------------------------------------------------
+   */
 
-      progress.setValue(0);
-
-      if (
-        animationType === "springExpand" ||
-        animationType === "springFadeExpand"
-      ) {
-        Animated.spring(progress, {
-          toValue: 1,
-
-          ...accordion.spring,
-
-          useNativeDriver: false,
-        }).start();
-
-        return;
-      }
-
-      Animated.timing(progress, {
-        toValue: 1,
-
-        duration,
-
-        useNativeDriver: false,
-      }).start();
-
-      return;
-    }
-
-    if (animationType === "none" || !accordion.animated) {
-      progress.setValue(0);
-      setMounted(false);
+  useEffect(() => {
+    if (contentHeight <= 0) {
       return;
     }
 
-    const finish = () => {
-      setMounted(false);
-    };
-
-    if (
-      animationType === "springExpand" ||
-      animationType === "springFadeExpand"
-    ) {
-      Animated.spring(progress, {
-        toValue: 0,
-
-        ...accordion.spring,
-
-        useNativeDriver: false,
-      }).start(finish);
+    if (!accordion.animated) {
+      animation.setValue(item.open ? 1 : 0);
 
       return;
     }
 
-    Animated.timing(progress, {
-      toValue: 0,
+    Animated.timing(animation, {
+      toValue: item.open ? 1 : 0,
 
-      duration,
+      duration: accordion.animationDuration,
+
+      easing: undefined,
 
       useNativeDriver: false,
-    }).start(finish);
+    }).start();
   }, [
     item.open,
-    animationType,
+    contentHeight,
     accordion.animated,
-    accordion.spring,
-    duration,
-    progress,
+    accordion.animationDuration,
+    animation,
   ]);
 
-  if (!mounted) {
-    return null;
-  }
+  /*
+   * ------------------------------------------------
+   * ANIMATED HEIGHT
+   * ------------------------------------------------
+   */
+
+  const animatedHeight = animation.interpolate({
+    inputRange: [0, 1],
+
+    outputRange: [0, contentHeight],
 
-  const shouldFade =
-    animationType === "fade" ||
-    animationType === "fadeExpand" ||
-    animationType === "springFadeExpand";
+    extrapolate: "clamp",
+  });
 
-  const shouldExpand =
-    animationType === "expand" ||
-    animationType === "fadeExpand" ||
-    animationType === "springExpand" ||
-    animationType === "springFadeExpand";
+  /*
+   * ------------------------------------------------
+   * MEASUREMENT CONTENT
+   *
+   * This is always rendered.
+   *
+   * It does NOT participate in normal layout.
+   * Therefore it cannot cause accordion shaking.
+   * ------------------------------------------------
+   */
 
   return (
-    <Animated.View
-      testID={testID}
-      accessibilityRole="region"
-      style={[
-        styles.container,
-
-        shouldFade
-          ? {
-              opacity: progress,
-            }
-          : null,
-
-        shouldExpand
-          ? {
-              maxHeight: progress.interpolate({
-                inputRange: [0, 1],
-
-                outputRange: [0, Math.max(measuredHeight.current, 1)],
-              }),
-            }
-          : null,
-
-        style,
-      ]}
-    >
-      <View
-        onLayout={handleLayout}
-        style={[styles.inner, innerStyle, contentStyle]}
-      >
-        {children}
+    <View style={styles.root}>
+      <View pointerEvents="none" style={styles.measureContainer}>
+        <View
+          style={[styles.measureContent, innerStyle]}
+          onLayout={handleMeasureLayout}
+        >
+          {children}
+        </View>
       </View>
-    </Animated.View>
+
+      <Animated.View
+        testID={testID}
+        style={[
+          styles.animatedContainer,
+
+          {
+            height: animatedHeight,
+          },
+
+          style,
+        ]}
+      >
+        <View style={[styles.visibleContent, innerStyle]}>{children}</View>
+      </Animated.View>
+    </View>
   );
 });
 
 const styles = StyleSheet.create({
-  container: {
+  root: {
+    width: "100%",
+  },
+
+  /*
+   * Hidden measurement layer.
+   *
+   * It remains available so onLayout can always
+   * calculate the real content height.
+   */
+  measureContainer: {
+    position: "absolute",
+
+    left: 0,
+    right: 0,
+
+    top: 0,
+
+    opacity: 0,
+
+    zIndex: -1,
+
+    pointerEvents: "none",
+  },
+
+  measureContent: {
+    width: "100%",
+  },
+
+  /*
+   * Visible animated layer.
+   */
+  animatedContainer: {
     width: "100%",
 
     overflow: "hidden",
   },
 
-  inner: {
+  visibleContent: {
     width: "100%",
   },
 });

package/src/components/Accordion/UIAccordionHeader.js

@@ -11,20 +11,12 @@ export const UIAccordionHeader = memo(function UIAccordionHeader({
 
   style,
 
-  borderBottomWidth,
-
-  borderBottomColor,
-
   testID,
 }) {
   const accordion = useUIAccordion();
 
   const item = useUIAccordionItem();
 
-  const resolvedBorderWidth =
-    borderBottomWidth ??
-    (accordion.separator && !item.open ? StyleSheet.hairlineWidth : 0);
-
   return (
     <View
       testID={testID}
@@ -35,12 +27,11 @@ export const UIAccordionHeader = memo(function UIAccordionHeader({
           minHeight:
             accordion.size === "sm" ? 44 : accordion.size === "lg" ? 60 : 52,
 
-          borderBottomWidth: resolvedBorderWidth,
-
-          borderBottomColor:
-            borderBottomColor || accordion.colors.border || "#E5E5E5",
+          borderBottomColor: accordion.colors.border || "#E5E5E5",
         },
 
+        accordion.separator && item.open ? styles.headerOpen : null,
+
         style,
       ]}
     >
@@ -55,6 +46,10 @@ const styles = StyleSheet.create({
 
     justifyContent: "center",
   },
+
+  headerOpen: {
+    borderBottomWidth: 1,
+  },
 });
 
 UIAccordionHeader.displayName = "UIAccordion.Header";

package/src/components/Accordion/UIAccordionIcon.js

@@ -12,65 +12,87 @@ export const UIAccordionIcon = memo(function UIAccordionIcon({
   openIcon,
   closedIcon,
 
-  animation,
-
-  rotation = 180,
-
-  size = 20,
+  size,
 
   color,
 
   style,
+
+  animated = true,
+
+  rotation = 180,
 }) {
   const accordion = useUIAccordion();
 
   const item = useUIAccordionItem();
 
-  const animationType = animation ?? accordion.iconAnimation;
-
-  const rotationValue = useRef(new Animated.Value(item.open ? 1 : 0)).current;
+  const animation = useRef(new Animated.Value(item.open ? 1 : 0)).current;
 
   useEffect(() => {
-    if (animationType === "none") {
-      rotationValue.setValue(item.open ? 1 : 0);
-
-      return;
-    }
-
-    if (animationType === "springRotate") {
-      Animated.spring(rotationValue, {
-        toValue: item.open ? 1 : 0,
-
-        ...accordion.spring,
-
-        useNativeDriver: true,
-      }).start();
+    if (!animated) {
+      animation.setValue(item.open ? 1 : 0);
 
       return;
     }
 
-    Animated.timing(rotationValue, {
+    Animated.timing(animation, {
       toValue: item.open ? 1 : 0,
 
       duration: accordion.animationDuration,
 
       useNativeDriver: true,
     }).start();
-  }, [
-    item.open,
-    animationType,
-    accordion.animationDuration,
-    accordion.spring,
-    rotationValue,
-  ]);
+  }, [item.open, animated, accordion.animationDuration, animation]);
 
-  const rotate = rotationValue.interpolate({
-    inputRange: [0, 1],
+  if (children || openIcon || closedIcon) {
+    const customIcon = item.open ? openIcon : closedIcon;
+
+    if (customIcon) {
+      return (
+        <Animated.View
+          style={[
+            {
+              transform: [
+                {
+                  rotate: animation.interpolate({
+                    inputRange: [0, 1],
+
+                    outputRange: ["0deg", `${rotation}deg`],
+                  }),
+                },
+              ],
+            },
 
-    outputRange: ["0deg", `${rotation}deg`],
-  });
+            style,
+          ]}
+        >
+          {customIcon}
+        </Animated.View>
+      );
+    }
 
-  const customIcon = item.open ? openIcon : closedIcon;
+    return (
+      <Animated.View
+        style={[
+          {
+            transform: [
+              {
+                rotate: animation.interpolate({
+                  inputRange: [0, 1],
+
+                  outputRange: ["0deg", `${rotation}deg`],
+                }),
+              },
+            ],
+          },
+
+          style,
+        ]}
+      >
+        {children}
+      </Animated.View>
+    );
+  }
 
   return (
     <Animated.View
@@ -78,7 +100,11 @@ export const UIAccordionIcon = memo(function UIAccordionIcon({
         {
           transform: [
             {
-              rotate,
+              rotate: animation.interpolate({
+                inputRange: [0, 1],
+
+                outputRange: ["0deg", `${rotation}deg`],
+              }),
             },
           ],
         },
@@ -86,25 +112,17 @@ export const UIAccordionIcon = memo(function UIAccordionIcon({
         style,
       ]}
     >
-      {customIcon || children ? (
-        customIcon || children
-      ) : (
-        <View>
-          <Text
-            style={{
-              fontSize: size,
-
-              lineHeight: size,
-
-              color: color || accordion.colors.text || "#111111",
-
-              fontWeight: "400",
-            }}
-          >
-            ›
-          </Text>
-        </View>
-      )}
+      <Text
+        style={{
+          fontSize: size || 20,
+
+          color: color || accordion.colors.text || "#111111",
+
+          lineHeight: size || 20,
+        }}
+      >
+        ›
+      </Text>
     </Animated.View>
   );
 });

package/src/components/Accordion/UIAccordionItem.js

@@ -15,30 +15,33 @@ export const UIAccordionItem = memo(function UIAccordionItem({
 
   style,
 
-  activeStyle,
-  inactiveStyle,
-
   testID,
 }) {
   const accordion = useUIAccordion();
 
   const open = accordion.isOpen(value);
 
-  const itemDisabled = disabled || accordion.disabled;
-
-  const contextValue = {
+  const itemContext = {
     value,
 
     open,
 
-    disabled: itemDisabled,
+    disabled: disabled || accordion.disabled,
   };
 
   return (
-    <AccordionItemContext.Provider value={contextValue}>
+    <AccordionItemContext.Provider value={itemContext}>
       <View
         testID={testID}
-        style={[styles.item, inactiveStyle, open ? activeStyle : null, style]}
+        style={[
+          styles.item,
+
+          {
+            backgroundColor: accordion.colors.card || "transparent",
+          },
+
+          style,
+        ]}
       >
         {children}
       </View>
@@ -51,7 +54,7 @@ export function useUIAccordionItem() {
 
   if (!context) {
     throw new Error(
-      "UIAccordion.Item components must be used inside <UIAccordion.Item>.",
+      "UIAccordion.Item components must be used inside UIAccordion.Item.",
     );
   }
 

package/src/components/index.js

@@ -115,7 +115,6 @@ export {
   UIAccordionTrigger,
   UIAccordionContent,
   UIAccordionIcon,
-  UIAccordionAnimationPresets,
 } from "./Accordion";
 export {
   UITabs,

package/src/index.js

@@ -125,7 +125,6 @@ export {
   UIAccordionTrigger,
   UIAccordionContent,
   UIAccordionIcon,
-  UIAccordionAnimationPresets,
   UITabs,
   UITabsList,
   UITabsTrigger,