rnnovaui 0.9.13 → 0.9.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rnnovaui",
-  "version": "0.9.13",
+  "version": "0.9.14",
   "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/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,