rnnovaui 0.8.13 → 0.9.0

package/package.json

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

package/src/components/Accordion/UIAccordion.js

@@ -0,0 +1,222 @@
+import React, {
+  Children,
+  createContext,
+  isValidElement,
+  memo,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+} from "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);
+
+export const UIAccordion = memo(function UIAccordion({
+  children,
+
+  value,
+  defaultValue,
+
+  multiple = false,
+
+  onValueChange,
+
+  disabled = false,
+
+  animated = true,
+  animationDuration = 220,
+
+  variant = "default",
+  size = "md",
+
+  separator = true,
+
+  containerStyle,
+  itemStyle,
+
+  testID,
+}) {
+  const { theme } = useUITheme();
+
+  const colors = theme?.colors || {};
+
+  const normalizeValue = useCallback(
+    (input) => {
+      if (multiple) {
+        if (Array.isArray(input)) {
+          return input;
+        }
+
+        if (input === undefined || input === null) {
+          return [];
+        }
+
+        return [input];
+      }
+
+      if (Array.isArray(input)) {
+        return input[0] ?? null;
+      }
+
+      return input ?? null;
+    },
+    [multiple],
+  );
+
+  const controlled = value !== undefined;
+
+  const [internalValue, setInternalValue] = useState(() =>
+    normalizeValue(defaultValue),
+  );
+
+  const currentValue = controlled ? normalizeValue(value) : internalValue;
+
+  const isOpen = useCallback(
+    (itemValue) => {
+      if (multiple) {
+        return currentValue.includes(itemValue);
+      }
+
+      return currentValue === itemValue;
+    },
+    [currentValue, multiple],
+  );
+
+  const toggle = useCallback(
+    (itemValue) => {
+      if (disabled) {
+        return;
+      }
+
+      let nextValue;
+
+      if (multiple) {
+        const current = Array.isArray(currentValue) ? currentValue : [];
+
+        if (current.includes(itemValue)) {
+          nextValue = current.filter((item) => item !== itemValue);
+        } else {
+          nextValue = [...current, itemValue];
+        }
+      } else {
+        nextValue = currentValue === itemValue ? null : itemValue;
+      }
+
+      if (!controlled) {
+        setInternalValue(nextValue);
+      }
+
+      onValueChange?.(nextValue);
+    },
+    [disabled, multiple, currentValue, controlled, onValueChange],
+  );
+
+  const contextValue = useMemo(
+    () => ({
+      colors,
+
+      currentValue,
+
+      multiple,
+
+      disabled,
+
+      animated,
+      animationDuration,
+
+      variant,
+      size,
+
+      separator,
+
+      isOpen,
+      toggle,
+    }),
+    [
+      colors,
+      currentValue,
+      multiple,
+      disabled,
+      animated,
+      animationDuration,
+      variant,
+      size,
+      separator,
+      isOpen,
+      toggle,
+    ],
+  );
+
+  return (
+    <AccordionContext.Provider value={contextValue}>
+      <View
+        testID={testID}
+        style={[
+          styles.container,
+
+          {
+            backgroundColor: colors.card || colors.background || "transparent",
+
+            borderColor: colors.border || "#E5E5E5",
+          },
+
+          variant === "outlined" ? styles.outlined : null,
+
+          containerStyle,
+        ]}
+      >
+        {Children.map(children, (child) => {
+          if (!isValidElement(child)) {
+            return child;
+          }
+
+          return React.cloneElement(child, {
+            style: [itemStyle, child.props.style],
+          });
+        })}
+      </View>
+    </AccordionContext.Provider>
+  );
+});
+
+export function useUIAccordion() {
+  const context = useContext(AccordionContext);
+
+  if (!context) {
+    throw new Error("Accordion components must be used inside UIAccordion.");
+  }
+
+  return context;
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: "100%",
+    overflow: "hidden",
+  },
+
+  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

@@ -0,0 +1,103 @@
+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,
+
+  style,
+
+  innerStyle,
+
+  testID,
+}) {
+  const accordion = useUIAccordion();
+
+  const item = useUIAccordionItem();
+
+  const progress = useRef(new Animated.Value(item.open ? 1 : 0)).current;
+
+  const [mounted, setMounted] = useState(item.open);
+
+  useEffect(() => {
+    if (item.open) {
+      setMounted(true);
+
+      if (!accordion.animated) {
+        progress.setValue(1);
+        return;
+      }
+
+      Animated.timing(progress, {
+        toValue: 1,
+
+        duration: accordion.animationDuration,
+
+        useNativeDriver: false,
+      }).start();
+
+      return;
+    }
+
+    if (!accordion.animated) {
+      progress.setValue(0);
+      setMounted(false);
+      return;
+    }
+
+    Animated.timing(progress, {
+      toValue: 0,
+
+      duration: accordion.animationDuration,
+
+      useNativeDriver: false,
+    }).start(() => {
+      setMounted(false);
+    });
+  }, [item.open, accordion.animated, accordion.animationDuration, progress]);
+
+  if (!mounted) {
+    return null;
+  }
+
+  return (
+    <Animated.View
+      testID={testID}
+      style={[
+        styles.animatedContainer,
+
+        {
+          opacity: progress,
+
+          maxHeight: progress.interpolate({
+            inputRange: [0, 1],
+
+            outputRange: [0, 1000],
+          }),
+        },
+
+        style,
+      ]}
+    >
+      <View style={[styles.inner, innerStyle]}>{children}</View>
+    </Animated.View>
+  );
+});
+
+const styles = StyleSheet.create({
+  animatedContainer: {
+    width: "100%",
+
+    overflow: "hidden",
+  },
+
+  inner: {
+    width: "100%",
+  },
+});
+
+UIAccordionContent.displayName = "UIAccordion.Content";

package/src/components/Accordion/UIAccordionHeader.js

@@ -0,0 +1,55 @@
+import React, { memo } from "react";
+
+import { StyleSheet, View } from "react-native";
+
+import { useUIAccordion } from "./UIAccordion";
+
+import { useUIAccordionItem } from "./UIAccordionItem";
+
+export const UIAccordionHeader = memo(function UIAccordionHeader({
+  children,
+
+  style,
+
+  testID,
+}) {
+  const accordion = useUIAccordion();
+
+  const item = useUIAccordionItem();
+
+  return (
+    <View
+      testID={testID}
+      style={[
+        styles.header,
+
+        {
+          minHeight:
+            accordion.size === "sm" ? 44 : accordion.size === "lg" ? 60 : 52,
+
+          borderBottomColor: accordion.colors.border || "#E5E5E5",
+        },
+
+        accordion.separator && item.open ? styles.headerOpen : null,
+
+        style,
+      ]}
+    >
+      {children}
+    </View>
+  );
+});
+
+const styles = StyleSheet.create({
+  header: {
+    width: "100%",
+
+    justifyContent: "center",
+  },
+
+  headerOpen: {
+    borderBottomWidth: 1,
+  },
+});
+
+UIAccordionHeader.displayName = "UIAccordion.Header";

package/src/components/Accordion/UIAccordionIcon.js

@@ -0,0 +1,130 @@
+import React, { memo, useEffect, useRef } from "react";
+
+import { Animated, Text, View } from "react-native";
+
+import { useUIAccordion } from "./UIAccordion";
+
+import { useUIAccordionItem } from "./UIAccordionItem";
+
+export const UIAccordionIcon = memo(function UIAccordionIcon({
+  children,
+
+  openIcon,
+  closedIcon,
+
+  size,
+
+  color,
+
+  style,
+
+  animated = true,
+
+  rotation = 180,
+}) {
+  const accordion = useUIAccordion();
+
+  const item = useUIAccordionItem();
+
+  const animation = useRef(new Animated.Value(item.open ? 1 : 0)).current;
+
+  useEffect(() => {
+    if (!animated) {
+      animation.setValue(item.open ? 1 : 0);
+
+      return;
+    }
+
+    Animated.timing(animation, {
+      toValue: item.open ? 1 : 0,
+
+      duration: accordion.animationDuration,
+
+      useNativeDriver: true,
+    }).start();
+  }, [item.open, animated, accordion.animationDuration, animation]);
+
+  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`],
+                  }),
+                },
+              ],
+            },
+
+            style,
+          ]}
+        >
+          {customIcon}
+        </Animated.View>
+      );
+    }
+
+    return (
+      <Animated.View
+        style={[
+          {
+            transform: [
+              {
+                rotate: animation.interpolate({
+                  inputRange: [0, 1],
+
+                  outputRange: ["0deg", `${rotation}deg`],
+                }),
+              },
+            ],
+          },
+
+          style,
+        ]}
+      >
+        {children}
+      </Animated.View>
+    );
+  }
+
+  return (
+    <Animated.View
+      style={[
+        {
+          transform: [
+            {
+              rotate: animation.interpolate({
+                inputRange: [0, 1],
+
+                outputRange: ["0deg", `${rotation}deg`],
+              }),
+            },
+          ],
+        },
+
+        style,
+      ]}
+    >
+      <Text
+        style={{
+          fontSize: size || 20,
+
+          color: color || accordion.colors.text || "#111111",
+
+          lineHeight: size || 20,
+        }}
+      >
+        ›
+      </Text>
+    </Animated.View>
+  );
+});
+
+UIAccordionIcon.displayName = "UIAccordion.Icon";

package/src/components/Accordion/UIAccordionItem.js

@@ -0,0 +1,70 @@
+import React, { createContext, memo, useContext } from "react";
+
+import { StyleSheet, View } from "react-native";
+
+import { useUIAccordion } from "./UIAccordion";
+
+const AccordionItemContext = createContext(null);
+
+export const UIAccordionItem = memo(function UIAccordionItem({
+  children,
+
+  value,
+
+  disabled = false,
+
+  style,
+
+  testID,
+}) {
+  const accordion = useUIAccordion();
+
+  const open = accordion.isOpen(value);
+
+  const itemContext = {
+    value,
+
+    open,
+
+    disabled: disabled || accordion.disabled,
+  };
+
+  return (
+    <AccordionItemContext.Provider value={itemContext}>
+      <View
+        testID={testID}
+        style={[
+          styles.item,
+
+          {
+            backgroundColor: accordion.colors.card || "transparent",
+          },
+
+          style,
+        ]}
+      >
+        {children}
+      </View>
+    </AccordionItemContext.Provider>
+  );
+});
+
+export function useUIAccordionItem() {
+  const context = useContext(AccordionItemContext);
+
+  if (!context) {
+    throw new Error(
+      "UIAccordion.Item components must be used inside UIAccordion.Item.",
+    );
+  }
+
+  return context;
+}
+
+const styles = StyleSheet.create({
+  item: {
+    width: "100%",
+  },
+});
+
+UIAccordionItem.displayName = "UIAccordion.Item";

package/src/components/Accordion/UIAccordionTrigger.js

@@ -0,0 +1,92 @@
+import React, { memo } from "react";
+
+import { Pressable, StyleSheet, View } from "react-native";
+
+import { useUIAccordion } from "./UIAccordion";
+
+import { useUIAccordionItem } from "./UIAccordionItem";
+
+export const UIAccordionTrigger = memo(function UIAccordionTrigger({
+  children,
+
+  onPress,
+
+  disabled,
+
+  style,
+
+  contentStyle,
+
+  activeOpacity = 0.7,
+
+  testID,
+
+  accessibilityLabel,
+
+  ...props
+}) {
+  const accordion = useUIAccordion();
+
+  const item = useUIAccordionItem();
+
+  const isDisabled = disabled ?? item.disabled;
+
+  const handlePress = (event) => {
+    if (isDisabled) {
+      return;
+    }
+
+    accordion.toggle(item.value);
+
+    onPress?.(event);
+  };
+
+  return (
+    <Pressable
+      {...props}
+      testID={testID}
+      disabled={isDisabled}
+      onPress={handlePress}
+      accessibilityRole="button"
+      accessibilityState={{
+        expanded: item.open,
+        disabled: isDisabled,
+      }}
+      accessibilityLabel={accessibilityLabel}
+      style={({ pressed }) => [
+        styles.trigger,
+
+        {
+          minHeight:
+            accordion.size === "sm" ? 44 : accordion.size === "lg" ? 60 : 52,
+
+          opacity: isDisabled ? 0.5 : pressed ? activeOpacity : 1,
+        },
+
+        style,
+      ]}
+    >
+      <View style={[styles.content, contentStyle]}>{children}</View>
+    </Pressable>
+  );
+});
+
+const styles = StyleSheet.create({
+  trigger: {
+    width: "100%",
+
+    justifyContent: "center",
+  },
+
+  content: {
+    width: "100%",
+
+    flexDirection: "row",
+
+    alignItems: "center",
+
+    justifyContent: "space-between",
+  },
+});
+
+UIAccordionTrigger.displayName = "UIAccordion.Trigger";

package/src/components/Accordion/index.js

@@ -0,0 +1,11 @@
+export { UIAccordion } from "./UIAccordion";
+
+export { UIAccordionItem } from "./UIAccordionItem";
+
+export { UIAccordionHeader } from "./UIAccordionHeader";
+
+export { UIAccordionTrigger } from "./UIAccordionTrigger";
+
+export { UIAccordionContent } from "./UIAccordionContent";
+
+export { UIAccordionIcon } from "./UIAccordionIcon";