@nexara/nativeflow 0.1.7 → 0.1.9

package/src/components/Link/Link.tsx

@@ -1,48 +1,39 @@
-import type React from "react";
-import { StyledText } from "../StyledComponents";
-import { Linking, StyleSheet, TouchableOpacity, type TextStyle } from "react-native";
-import { useCallback } from "react";
-import type { TypographyVariant } from "../../types";
-
-
-type props = {
-    title: string;
-    href: string;
-    textVariant?: TypographyVariant;
-    style?: TextStyle
-}
-
-const Link: React.FC<props> = ({
-    title = '',
-    href,
-    textVariant = 'h5',
-    style
-}) => {
-    const onUserPress = useCallback(async () => {
-        const supported = await Linking.canOpenURL(href);
-        if (supported) {
-            await Linking.openURL(href);
-        }
-    }, [href]);
-    return (<>
-        <TouchableOpacity onPress={onUserPress}>
-            <StyledText
-                variant={textVariant}
-                color='#0000FF'
-                style={[STYLES.TEXT, style]}
-            >
-                {title}
-            </StyledText>
-        </TouchableOpacity>
-    </>)
-}
-
-export default Link;
-
-const STYLES = StyleSheet.create({
-    TEXT: {
-        borderBottomColor: '#0000FF',
-        borderBottomWidth: 0.8,
-        alignSelf: 'flex-start',
-    }
+import { useCallback, type FC } from "react";
+import { StyledText } from "../StyledComponents";
+import { Linking, StyleSheet } from "react-native";
+import type { LinkProps } from "../../types";
+
+
+const Link: FC<LinkProps> = ({
+    title = 'Link',
+    href,
+    style,
+    ...rest
+}) => {
+    const onUserPress = useCallback(async () => {
+        const supported = await Linking.canOpenURL(href);
+        if (supported) {
+            await Linking.openURL(href);
+        }
+    }, [href]);
+    return (
+        <StyledText
+            color='#0000FF'
+            style={[STYLES.TEXT, style]}
+            onPress={onUserPress}
+            {...rest}
+        >
+            {title}
+        </StyledText>
+    )
+}
+
+export default Link;
+
+const STYLES = StyleSheet.create({
+    TEXT: {
+        // borderBottomColor: '#0000FF',
+        // borderBottomWidth: 0.8,
+        // alignSelf: 'flex-start',
+    }
 });

package/src/components/Menu/Menu.tsx

@@ -1,140 +1,143 @@
-import React, { useState, useRef, useCallback, useEffect, useMemo, } from "react";
-import { StyleSheet, Pressable, View, ScrollView, Animated } from "react-native";
-import { StyledView } from "../StyledComponents";
-import Portal from "../Portal/Portal";
-import { positionCalculations } from "./calculations";
-import type { menuLayoutTypes, anchorLayoutTypes } from "./calculations";
-import { horizontalScale, verticalScale } from "../../helpers/ResponsiveCalculations";
-import type { MenuProps } from "../../types";
-
-const Menu: React.FC<MenuProps> = ({
-    placement = 'top',
-    anchor,
-    disableBuiltInState = false,
-    isOpen = false,
-    onRequestOpen,
-    onRequestClose,
-    onSelect,
-    style,
-    children
-}) => {
-    const [isVisible, setIsVisible] = useState<boolean>(false);
-    const anchorLayoutRef = useRef<anchorLayoutTypes>({ pageY: 0, pageX: 0, height: 0, width: 0 });
-    const menuLayoutRef = useRef<menuLayoutTypes>({ height: 0, width: 0 });
-    const buttonRef = useRef<View>(null!);
-    const animatedScaleRef = useRef(new Animated.Value(1)).current;
-
-    const positions = (useCallback(() => (positionCalculations(anchorLayoutRef.current, menuLayoutRef.current, placement)), [menuLayoutRef, anchorLayoutRef, placement]))();
-    const STYLES = useMemo(Styles, []);
-
-    useEffect(() => {
-        Animated.timing(animatedScaleRef, {
-            toValue: (disableBuiltInState && isOpen) || isVisible ? 1 : 0,
-            duration: 150,
-            useNativeDriver: true,
-        }).start();
-    }, [isOpen, isVisible]);
-
-    const measureLayout = useCallback(() => {
-        return new Promise((resolve) => {
-            buttonRef.current?.measure((_x, _y, width, height, pageX, pageY) => {
-                anchorLayoutRef.current = { pageY, pageX, height, width };
-                resolve(true);
-            });
-        });
-    }, []);
-
-    const onOpen = async () => {
-        await measureLayout();
-        if (disableBuiltInState) {
-            onRequestOpen?.();
-        } else {
-            setIsVisible(true);
-        }
-    }
-
-    const onClose = () => {
-        if (disableBuiltInState) {
-            onRequestClose?.();
-        } else {
-            setIsVisible(false);
-        }
-    }
-
-    const renderChildren = (useCallback(() => {
-        return (<ScrollView>
-            {React.Children?.toArray(children).map((child) => {
-                if (React.isValidElement<{ onPress: () => void; name: string; }>(child)) {
-                    return React.cloneElement(child, {
-                        onPress: () => {
-                            (child)?.props?.onPress?.();
-                            onSelect?.((child)?.props?.name);
-                            onClose();
-                        }
-                    });
-                }
-                return null;
-            })}
-        </ScrollView>)
-
-    }, [children]))();
-
-    const scale: number = disableBuiltInState ? Number(isOpen) : Number(isVisible);
-    const pointerEvent = (isVisible && !disableBuiltInState) || (isOpen && disableBuiltInState) ? 'auto' : 'none';
-
-    const dynamicStyles = {
-        left: positions.left,
-        top: positions.top,
-    };
-
-    const menuAnimatedStyle = {
-        transform: [{ scale: animatedScaleRef }],
-        opacity: animatedScaleRef
-    };
-
-    return (<>
-
-        <Portal
-            name='Menu'
-        >
-            <Pressable
-                style={[StyleSheet.absoluteFill, { transform: [{ scale }] }]}
-                pointerEvents={pointerEvent}
-                onPress={onClose}>
-                <Animated.View
-                    onStartShouldSetResponder={() => true}
-                    style={[STYLES.MENU_CONT, dynamicStyles, menuAnimatedStyle, style]}
-                    onLayout={({ nativeEvent: { layout: { height, width } } }) => menuLayoutRef.current = { width, height }}
-                >
-                    {renderChildren}
-                </Animated.View>
-            </Pressable>
-        </Portal>
-
-        <StyledView alignItems='flex-start' ref={buttonRef} onLayout={measureLayout}>
-            {anchor && React.isValidElement<{ onPress: () => void }>(anchor) && React.cloneElement(anchor, { onPress: onOpen })}
-        </StyledView>
-
-    </>)
-}
-export default Menu;
-export type { MenuProps };
-
-const Styles = () => StyleSheet.create({
-    MENU_CONT: {
-        shadowColor: "#000",
-        backgroundColor: '#fff',
-        shadowOffset: {
-            width: 0,
-            height: 2,
-        },
-        shadowOpacity: 0.23,
-        shadowRadius: 2.62,
-        elevation: 4,
-        position: 'absolute',
-        borderRadius: 5,
-        maxHeight: 400,
-        minWidth: horizontalScale(150),
-        paddingVertical: verticalScale(5)
-    }
+import React, { useState, useRef, useCallback, useEffect, useMemo, type FC, } from "react";
+import { StyleSheet, Pressable, View, ScrollView, Animated } from "react-native";
+import { StyledView } from "../StyledComponents";
+import Portal from "../Portal/Portal";
+import { positionCalculations } from "./calculations";
+import type { menuLayoutTypes, anchorLayoutTypes } from "./calculations";
+import { horizontalScale, verticalScale } from "../../helpers/ResponsiveCalculations";
+import type { MenuProps } from "../../types";
+import { useTheme } from "../../hooks";
+
+const Menu: FC<MenuProps> = ({
+    placement = 'top',
+    anchor,
+    disableBuiltInState = false,
+    isOpen = false,
+    onRequestOpen,
+    onRequestClose,
+    onSelect,
+    style,
+    children
+}) => {
+    const [isVisible, setIsVisible] = useState<boolean>(false);
+    const anchorLayoutRef = useRef<anchorLayoutTypes>({ pageY: 0, pageX: 0, height: 0, width: 0 });
+    const menuLayoutRef = useRef<menuLayoutTypes>({ height: 0, width: 0 });
+    const buttonRef = useRef<View>(null!);
+    const animatedScaleRef = useRef(new Animated.Value(1)).current;
+    const theme  = useTheme();
+
+    const positions = (useCallback(() => (positionCalculations(anchorLayoutRef.current, menuLayoutRef.current, placement)), [menuLayoutRef, anchorLayoutRef, placement]))();
+    const STYLES = useMemo(Styles, []);
+
+    useEffect(() => {
+        Animated.timing(animatedScaleRef, {
+            toValue: (disableBuiltInState && isOpen) || isVisible ? 1 : 0,
+            duration: 150,
+            useNativeDriver: true,
+        }).start();
+    }, [isOpen, isVisible]);
+
+    const measureLayout = useCallback(() => {
+        return new Promise((resolve) => {
+            buttonRef.current?.measure((_x, _y, width, height, pageX, pageY) => {
+                anchorLayoutRef.current = { pageY, pageX, height, width };
+                resolve(true);
+            });
+        });
+    }, []);
+
+    const onOpen = async () => {
+        await measureLayout();
+        if (disableBuiltInState) {
+            onRequestOpen?.();
+        } else {
+            setIsVisible(true);
+        }
+    }
+
+    const onClose = () => {
+        if (disableBuiltInState) {
+            onRequestClose?.();
+        } else {
+            setIsVisible(false);
+        }
+    }
+
+    const renderChildren = (useCallback(() => {
+        return (<ScrollView>
+            {React.Children?.toArray(children).map((child) => {
+                if (React.isValidElement<{ onPress: () => void; name: string; }>(child)) {
+                    return React.cloneElement(child, {
+                        onPress: () => {
+                            (child)?.props?.onPress?.();
+                            onSelect?.((child)?.props?.name);
+                            onClose();
+                        }
+                    });
+                }
+                return null;
+            })}
+        </ScrollView>)
+
+    }, [children]))();
+
+    const scale: number = disableBuiltInState ? Number(isOpen) : Number(isVisible);
+    const pointerEvent = (isVisible && !disableBuiltInState) || (isOpen && disableBuiltInState) ? 'auto' : 'none';
+
+    const dynamicStyles = {
+        left: positions.left,
+        top: positions.top,
+        backgroundColor: theme?.colors.background.elevated
+    };
+
+    const menuAnimatedStyle = {
+        transform: [{ scale: animatedScaleRef }],
+        opacity: animatedScaleRef
+    };
+
+    return (<>
+        <Portal
+            name='Menu'
+        >
+            <Pressable
+                style={[StyleSheet.absoluteFill, { transform: [{ scale }] }]}
+                pointerEvents={pointerEvent}
+                onPress={onClose}>
+                <Animated.View
+                    onStartShouldSetResponder={() => true}
+                    style={[STYLES.MENU_CONT, dynamicStyles, menuAnimatedStyle, style]}
+                    onLayout={({ nativeEvent: { layout: { height, width } } }) => menuLayoutRef.current = { width, height }}
+                >
+                    {renderChildren}
+                </Animated.View>
+            </Pressable>
+        </Portal>
+
+        <StyledView>
+            <StyledView ref={buttonRef} onLayout={measureLayout} alignSelf='flex-start'>
+                {anchor && React.isValidElement<{ onPress: () => void }>(anchor) && React.cloneElement(anchor, { onPress: onOpen})}
+            </StyledView>
+        </StyledView>
+    </>)
+}
+export default Menu;
+export type { MenuProps };
+
+const Styles = () => StyleSheet.create({
+    MENU_CONT: {
+        shadowColor: "#000",
+        backgroundColor: '#fff',
+        shadowOffset: {
+            width: 0,
+            height: 2,
+        },
+        shadowOpacity: 0.23,
+        shadowRadius: 2.62,
+        elevation: 4,
+        position: 'absolute',
+        borderRadius: 5,
+        maxHeight: 400,
+        minWidth: horizontalScale(150),
+        paddingVertical: verticalScale(5)
+    }
 });

package/src/components/Menu/MenuItem.tsx

@@ -1,34 +1,34 @@
-import React from "react";
-import { TouchableOpacity } from "react-native";
-import { StyledView } from "../StyledComponents";
-import { horizontalScale, moderateScale, verticalScale } from "../../helpers/ResponsiveCalculations";
-import type { MenuItemProps } from "../../types";
-
-const MenuItem: React.FC<MenuItemProps> = ({
-    paddingV = 11,
-    paddingH = 17,
-    gap = 12,
-    style,
-    children,
-    ...rest
-}) => {
-
-    return (<>
-        <TouchableOpacity
-            {...rest}
-        >
-            <StyledView
-                paddingHorizontal={horizontalScale(paddingH)}
-                paddingVertical={verticalScale(paddingV)}
-                flexDirection='row'
-                align="center"
-                gap={moderateScale(gap)}
-                style={style}
-            >
-                {children}
-            </StyledView>
-        </TouchableOpacity>
-    </>)
-}
-export default MenuItem;
+import { type FC } from "react";
+import { TouchableOpacity } from "react-native";
+import { StyledView } from "../StyledComponents";
+import { horizontalScale, verticalScale } from "../../helpers/ResponsiveCalculations";
+import type { MenuItemProps } from "../../types";
+
+const MenuItem: FC<MenuItemProps> = ({
+    paddingV = 11,
+    paddingH = 17,
+    gap = 12,
+    itemStyle,
+    children,
+    ...rest
+}) => {
+
+    return (<>
+        <TouchableOpacity
+            {...rest}
+        >
+            <StyledView
+                paddingHorizontal={horizontalScale(paddingH)}
+                paddingVertical={verticalScale(paddingV)}
+                flexDirection='row'
+                align="center"
+                gap={horizontalScale(gap)}
+                style={itemStyle}
+            >
+                {children}
+            </StyledView>
+        </TouchableOpacity>
+    </>)
+}
+export default MenuItem;
 export type { MenuItemProps };

package/src/components/Menu/MenuItemLabel.tsx

@@ -1,27 +1,22 @@
-import React from "react";
-import { StyledText } from "../StyledComponents";
-import type { MenuItemLabelProps } from "../../types";
-
-const MenuItemLabel: React.FC<MenuItemLabelProps> = ({
-    fs,
-    style,
-    children,
-    textVariant = 'h5',
-    ...rest
-}) => {
-
-    return (<>
-        <StyledText
-            fs={fs}
-            variant={textVariant}
-            color="#000"
-            numberOfLines={1}
-            flexShrink={1}
-            {...rest}
-        >
-            {children}
-        </StyledText>
-    </>)
-}
-export default MenuItemLabel;
+import { type FC } from "react";
+import { StyledText } from "../StyledComponents";
+import type { MenuItemLabelProps } from "../../types";
+
+const MenuItemLabel: FC<MenuItemLabelProps> = ({
+    children,
+    ...rest
+}) => {
+    return (<>
+        <StyledText
+            numberOfLines={1}
+            flexShrink={1}
+            fScale='sm'
+            variant='secondary'
+            {...rest}
+        >
+            {children}
+        </StyledText>
+    </>)
+}
+export default MenuItemLabel;
 export type { MenuItemLabelProps };

package/src/components/Menu/calculations.ts

@@ -1,34 +1,34 @@
-export type anchorLayoutTypes = {
-    pageY: number;
-    pageX: number;
-    height: number;
-    width: number;
-}
-export type menuLayoutTypes = {
-    height: number;
-    width: number;
-}
-
-const positionCalculations = ((anchorLayoutRef: anchorLayoutTypes, menuLayoutRef: menuLayoutTypes, placement: any) => {
-    let positionValues = { top: 0, bottom: 0, left: 0, right: 0 };
-
-    if (anchorLayoutRef.pageX < menuLayoutRef.width) {
-        positionValues.left = anchorLayoutRef.pageX + anchorLayoutRef.width;
-    } else {
-        positionValues.left = anchorLayoutRef.pageX - menuLayoutRef.width;
-    }
-    // else if (anchorLayoutRef.current.pageX + menuLayoutRef.current.width > SCREEN_WIDTH) {
-    //     positionValues.left = anchorLayoutRef.current.pageX - menuLayoutRef.current.width;
-    // }
-
-    if (placement === 'top') {
-        positionValues.top = anchorLayoutRef.pageY;
-    } else if (placement === 'bottom') {
-        positionValues.top = (anchorLayoutRef.pageY - menuLayoutRef.height) + anchorLayoutRef.height;
-    }
-    return positionValues;
-});
-
-export {
-    positionCalculations,
+export type anchorLayoutTypes = {
+    pageY: number;
+    pageX: number;
+    height: number;
+    width: number;
+}
+export type menuLayoutTypes = {
+    height: number;
+    width: number;
+}
+
+const positionCalculations = ((anchorLayoutRef: anchorLayoutTypes, menuLayoutRef: menuLayoutTypes, placement: any) => {
+    let positionValues = { top: 0, bottom: 0, left: 0, right: 0 };
+
+    if (anchorLayoutRef.pageX < menuLayoutRef.width) {
+        positionValues.left = anchorLayoutRef.pageX + anchorLayoutRef.width;
+    } else {
+        positionValues.left = anchorLayoutRef.pageX - menuLayoutRef.width;
+    }
+    // else if (anchorLayoutRef.current.pageX + menuLayoutRef.current.width > SCREEN_WIDTH) {
+    //     positionValues.left = anchorLayoutRef.current.pageX - menuLayoutRef.current.width;
+    // }
+
+    if (placement === 'top') {
+        positionValues.top = anchorLayoutRef.pageY;
+    } else if (placement === 'bottom') {
+        positionValues.top = (anchorLayoutRef.pageY - menuLayoutRef.height) + anchorLayoutRef.height;
+    }
+    return positionValues;
+});
+
+export {
+    positionCalculations,
 } 

package/src/components/Menu/index.ts

@@ -1,8 +1,8 @@
-export { default as Menu } from './Menu';
-export { default as MenuItem } from './MenuItem';
-export { default as MenuItemLabel } from './MenuItemLabel';
-
-
-export type { MenuProps } from './Menu';
-export type { MenuItemProps } from './MenuItem';
+export { default as Menu } from './Menu';
+export { default as MenuItem } from './MenuItem';
+export { default as MenuItemLabel } from './MenuItemLabel';
+
+
+export type { MenuProps } from './Menu';
+export type { MenuItemProps } from './MenuItem';
 export type { MenuItemLabelProps } from './MenuItemLabel';

package/src/components/Portal/Portal.tsx

@@ -1,19 +1,19 @@
-import React, { useContext, useEffect } from "react";
-import PortalContext from "./PortalContext";
-
-interface PortalProps {
-    children: React.ReactNode,
-    name?: string
-}
-const Portal: React.FC<PortalProps> = ({ children, name }) => {
-    const { addComponent, removeComponent } = useContext(PortalContext);
-
-    useEffect(() => {
-        const uniqueId = name ?? `${Math.random() * 50}`;
-        addComponent({ name: uniqueId, component: children });
-        return () => removeComponent(uniqueId);
-    }, [children, name]);
-
-    return null;
-}
+import React, { useContext, useEffect } from "react";
+import PortalContext from "./PortalContext";
+
+interface PortalProps {
+    children: React.ReactNode,
+    name?: string
+}
+const Portal: React.FC<PortalProps> = ({ children, name }) => {
+    const { addComponent, removeComponent } = useContext(PortalContext);
+
+    useEffect(() => {
+        const uniqueId = name ?? `${Math.random() * 50}`;
+        addComponent({ name: uniqueId, component: children });
+        return () => removeComponent(uniqueId);
+    }, [children, name]);
+
+    return null;
+}
 export default Portal;

package/src/components/Portal/PortalContext.tsx

@@ -1,10 +1,10 @@
-import * as React from 'react'
-interface Element {
-    name: string;
-    component: React.ReactNode;
-}
-const PortalContext = React.createContext({
-    addComponent: (element: Element) => { element },
-    removeComponent: (name: string) => { name }
-})
+import * as React from 'react'
+interface Element {
+    name: string;
+    component: React.ReactNode;
+}
+const PortalContext = React.createContext({
+    addComponent: (element: Element) => { element },
+    removeComponent: (name: string) => { name }
+})
 export default PortalContext;