@particle-network/ui-native 0.0.2

package/dist/components/UXModal/index.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { ScrollView, type StyleProp, type ViewStyle } from 'react-native';
+export interface UXModalProps {
+    modalName?: string;
+    style?: StyleProp<ViewStyle>;
+    contentStyle?: StyleProp<ViewStyle>;
+    isOpen: boolean;
+    title?: React.ReactNode;
+    titleAlign?: 'left' | 'center';
+    footer?: React.ReactNode;
+    tip?: React.ReactNode;
+    onClose?: () => void;
+    onVisibleChange?: (visible: boolean) => void;
+    children: React.ReactNode;
+    disableCloseBySwipe?: boolean;
+    closeByLineOnly?: boolean;
+    wrapPortal?: boolean;
+    /**
+     * 键盘避开区域
+     * 如果想要遮挡 footer 则选择 content
+     */
+    keyboardAvoidPosition?: 'container' | 'content';
+}
+export declare const UXModal: React.ForwardRefExoticComponent<UXModalProps & React.RefAttributes<ScrollView>>;

package/dist/components/UXModal/index.js

@@ -0,0 +1,271 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import react, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Animated, Dimensions, PanResponder, Platform, ScrollView, StyleSheet } from "react-native";
+import { Modal, Portal } from "react-native-paper";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { ms } from "react-native-size-matters";
+import { Box, Circle, Flex, HStack, Text, VStack } from "../index.js";
+import { useColors, useKeyboard } from "../../hooks/index.js";
+const { height } = Dimensions.get('window');
+const UXModal = /*#__PURE__*/ forwardRef((props, scrollViewRef)=>{
+    const { style, contentStyle, isOpen, title, titleAlign = 'left', onClose, onVisibleChange, children, disableCloseBySwipe, closeByLineOnly, wrapPortal, footer, modalName, tip, keyboardAvoidPosition = 'container' } = props;
+    const { getColor } = useColors();
+    const insets = useSafeAreaInsets();
+    const { keyboardHeight } = useKeyboard();
+    const translateY = useRef(new Animated.Value(height)).current;
+    const scrollOffset = useRef(0);
+    const [touchStartY, setTouchStartY] = useState(0);
+    const [isDragging, setIsDragging] = useState(false);
+    const [modalHeight, setModalHeight] = useState(0);
+    const [footerHeight, setFooterHeight] = useState(0);
+    const isAndroid = 'android' === Platform.OS;
+    const onDismiss = useCallback(()=>{
+        if (onClose) onClose();
+        else if (onVisibleChange) onVisibleChange(false);
+        translateY.setValue(height);
+    }, [
+        onClose,
+        onVisibleChange
+    ]);
+    useEffect(()=>{
+        if (isOpen && modalName) console.log('BottomModal:', modalName);
+    }, [
+        isOpen,
+        modalName
+    ]);
+    useEffect(()=>{
+        if (isOpen) Animated.spring(translateY, {
+            toValue: 0,
+            useNativeDriver: !isAndroid,
+            damping: 500,
+            mass: 3,
+            stiffness: 1000
+        }).start();
+        else Animated.timing(translateY, {
+            toValue: height,
+            duration: 200,
+            useNativeDriver: !isAndroid
+        }).start();
+    }, [
+        isOpen,
+        height,
+        translateY
+    ]);
+    const panResponder = PanResponder.create({
+        onStartShouldSetPanResponder: ()=>false,
+        onMoveShouldSetPanResponder: (_, gestureState)=>Math.abs(gestureState.dy) > Math.abs(gestureState.dx) && scrollOffset.current <= 0 && gestureState.dy > 0,
+        onPanResponderMove: (_, gestureState)=>{
+            if (gestureState.dy > 0) translateY.setValue(gestureState.dy);
+        },
+        onPanResponderRelease: (_, gestureState)=>{
+            if (gestureState.dy > 100) Animated.timing(translateY, {
+                toValue: height,
+                duration: 200,
+                useNativeDriver: !isAndroid
+            }).start(()=>{
+                onDismiss();
+            });
+            else Animated.spring(translateY, {
+                toValue: 0,
+                useNativeDriver: !isAndroid
+            }).start();
+        }
+    });
+    const handleScroll = useCallback((event)=>{
+        scrollOffset.current = event.nativeEvent.contentOffset.y;
+    }, []);
+    const onTouchStartSideLine = useCallback((event)=>{
+        setTouchStartY(event.nativeEvent.pageY);
+        setIsDragging(true);
+    }, []);
+    const onTouchMoveSideLine = useCallback((event)=>{
+        if (!isDragging) return;
+        const currentY = event.nativeEvent.pageY;
+        const deltaY = currentY - touchStartY;
+        if (deltaY > 0) translateY.setValue(deltaY);
+    }, [
+        isDragging,
+        touchStartY,
+        translateY
+    ]);
+    const onTouchEndSideLine = useCallback((event)=>{
+        if (!isDragging) return;
+        const currentY = event.nativeEvent.pageY;
+        const deltaY = currentY - touchStartY;
+        const threshold = 0.1 * modalHeight;
+        if (deltaY > threshold) Animated.timing(translateY, {
+            toValue: height,
+            duration: 200,
+            useNativeDriver: !isAndroid
+        }).start(()=>{
+            onDismiss();
+        });
+        else Animated.spring(translateY, {
+            toValue: 0,
+            useNativeDriver: !isAndroid
+        }).start();
+        setIsDragging(false);
+    }, [
+        isDragging,
+        touchStartY,
+        modalHeight,
+        height,
+        translateY,
+        onDismiss
+    ]);
+    const keyboardAvoidValue = useMemo(()=>{
+        const containerValue = 'container' === keyboardAvoidPosition ? Math.max(insets.bottom, ms(32), keyboardHeight) : Math.max(insets.bottom, ms(32));
+        const contentValue = 'content' === keyboardAvoidPosition && keyboardHeight > 0 ? keyboardHeight - footerHeight - Math.max(insets.bottom, ms(32)) : 0;
+        return {
+            containerValue,
+            contentValue
+        };
+    }, [
+        keyboardAvoidPosition,
+        insets.bottom,
+        keyboardHeight,
+        footerHeight
+    ]);
+    const styles = StyleSheet.create({
+        modalContainer: {
+            margin: 0,
+            justifyContent: 'flex-end',
+            position: 'absolute',
+            bottom: 0,
+            left: 0,
+            right: 0
+        },
+        modal: {
+            marginBottom: 0,
+            marginTop: 0,
+            backgroundColor: 'transparent'
+        },
+        container: {
+            paddingHorizontal: ms(14),
+            borderTopLeftRadius: 24,
+            borderTopRightRadius: 24,
+            flex: 1,
+            gap: ms(20),
+            backgroundColor: getColor('overlay'),
+            maxHeight: isAndroid ? height : height - insets.top,
+            transform: [
+                {
+                    translateY
+                }
+            ],
+            paddingBottom: keyboardAvoidValue.containerValue
+        },
+        content: {
+            marginBottom: keyboardAvoidValue.contentValue
+        },
+        tip: {
+            flex: 1,
+            flexShrink: 1,
+            flexWrap: 'wrap'
+        }
+    });
+    const Wrapper = useMemo(()=>wrapPortal ? Portal : react.Fragment, [
+        wrapPortal
+    ]);
+    return /*#__PURE__*/ jsx(Wrapper, {
+        children: /*#__PURE__*/ jsx(Modal, {
+            dismissable: true,
+            dismissableBackButton: true,
+            contentContainerStyle: styles.modalContainer,
+            style: [
+                styles.modal,
+                style
+            ],
+            theme: {
+                colors: {
+                    backdrop: 'rgba(0, 0, 0, 0.8)'
+                }
+            },
+            visible: isOpen,
+            onDismiss: onDismiss,
+            children: /*#__PURE__*/ jsxs(Animated.View, {
+                style: styles.container,
+                onLayout: (event)=>{
+                    setModalHeight(event.nativeEvent.layout.height);
+                },
+                ...!disableCloseBySwipe && !closeByLineOnly ? panResponder.panHandlers : {},
+                children: [
+                    /*#__PURE__*/ jsx(HStack, {
+                        fullWidth: true,
+                        hitSlop: {
+                            top: 20,
+                            bottom: 20,
+                            left: 0,
+                            right: 0
+                        },
+                        justify: "center",
+                        mt: 10,
+                        onTouchEnd: onTouchEndSideLine,
+                        onTouchMove: onTouchMoveSideLine,
+                        onTouchStart: onTouchStartSideLine,
+                        children: /*#__PURE__*/ jsx(Box, {
+                            bg: "tertiary",
+                            h: 4,
+                            radius: "full",
+                            w: 40
+                        })
+                    }),
+                    title ? /*#__PURE__*/ jsx(Flex, {
+                        fullWidth: true,
+                        justify: 'center' === titleAlign ? 'center' : 'start',
+                        mt: -4,
+                        children: 'string' == typeof title ? /*#__PURE__*/ jsx(Text, {
+                            h3: true,
+                            children: title
+                        }) : title
+                    }) : null,
+                    /*#__PURE__*/ jsx(ScrollView, {
+                        ref: scrollViewRef,
+                        bounces: false,
+                        scrollEventThrottle: 16,
+                        showsHorizontalScrollIndicator: false,
+                        showsVerticalScrollIndicator: false,
+                        style: [
+                            styles.content,
+                            contentStyle
+                        ],
+                        onScroll: handleScroll,
+                        children: children
+                    }),
+                    /*#__PURE__*/ jsxs(VStack, {
+                        fullWidth: true,
+                        gap: "lg",
+                        onLayout: (event)=>{
+                            setFooterHeight(event.nativeEvent.layout.height);
+                        },
+                        children: [
+                            footer ? /*#__PURE__*/ jsx(VStack, {
+                                fullWidth: true,
+                                gap: "lg",
+                                children: footer
+                            }) : null,
+                            tip ? /*#__PURE__*/ jsxs(Flex, {
+                                gap: 8,
+                                children: [
+                                    /*#__PURE__*/ jsx(Circle, {
+                                        bg: "secondary",
+                                        mt: 5,
+                                        size: 5
+                                    }),
+                                    /*#__PURE__*/ jsx(Text, {
+                                        body2: true,
+                                        color: "secondary",
+                                        style: styles.tip,
+                                        children: tip
+                                    })
+                                ]
+                            }) : null
+                        ]
+                    })
+                ]
+            })
+        })
+    });
+});
+UXModal.displayName = 'UXModal';
+export { UXModal };

package/dist/components/UXPressable/index.d.ts

@@ -0,0 +1,4 @@
+import type { PressableProps, View } from 'react-native';
+import { type UseBoxProps, type UseFlexProps } from '..';
+export type UXPressableProps = PressableProps & UseBoxProps & UseFlexProps;
+export declare const UXPressable: import("react").ForwardRefExoticComponent<PressableProps & UseBoxProps & UseFlexProps & import("react").RefAttributes<View>>;

package/dist/components/UXPressable/index.js

@@ -0,0 +1,36 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback } from "react";
+import { Pressable } from "react-native";
+import useDebounceFn from "ahooks/es/useDebounceFn";
+import { useFlexBoxStyle } from "../index.js";
+const UXPressable = /*#__PURE__*/ forwardRef(({ style, onPress, ...props }, ref)=>{
+    const { run } = useDebounceFn(onPress || (()=>null), {
+        wait: 300,
+        leading: true,
+        trailing: false
+    });
+    const boxFlexStyle = useFlexBoxStyle(props);
+    const pressableStyle = useCallback(({ pressed })=>{
+        if ('function' == typeof style) return [
+            boxFlexStyle,
+            style({
+                pressed
+            })
+        ];
+        return [
+            boxFlexStyle,
+            style
+        ];
+    }, [
+        boxFlexStyle,
+        style
+    ]);
+    return /*#__PURE__*/ jsx(Pressable, {
+        ref: ref,
+        style: pressableStyle,
+        onPress: run,
+        ...props
+    });
+});
+UXPressable.displayName = 'UXPressable';
+export { UXPressable };

package/dist/components/UXRadio/context.d.ts

@@ -0,0 +1,7 @@
+import type { UXRadioCommonProps } from './types';
+type RadioGroupContextType = Omit<UXRadioCommonProps, 'children' | 'value'> & {
+    selectedValue: UXRadioCommonProps['value'];
+};
+export declare const RadioGroupContext: import("react").Context<RadioGroupContextType>;
+export declare const useRadioGroup: () => RadioGroupContextType;
+export {};

package/dist/components/UXRadio/context.js

@@ -0,0 +1,10 @@
+import { createContext, useContext } from "react";
+const RadioGroupContext = createContext({
+    selectedValue: '',
+    onValueChange: ()=>null
+});
+const useRadioGroup = ()=>{
+    const context = useContext(RadioGroupContext);
+    return context;
+};
+export { RadioGroupContext, useRadioGroup };

package/dist/components/UXRadio/index.d.ts

@@ -0,0 +1,2 @@
+export * from './radio';
+export * from './radio-group';

package/dist/components/UXRadio/index.js

@@ -0,0 +1,2 @@
+export * from "./radio.js";
+export * from "./radio-group.js";

package/dist/components/UXRadio/radio-group.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { type FlexProps } from '..';
+import type { UXRadioCommonProps } from './types';
+export type UXRadioGroupProps = UXRadioCommonProps & FlexProps;
+export declare const UXRadioGroup: React.FC<UXRadioGroupProps>;

package/dist/components/UXRadio/radio-group.js

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { Flex } from "../index.js";
+import { RadioGroupContext } from "./context.js";
+const UXRadioGroup = ({ value = '', onValueChange, color, size, isDisabled, children, gap = 8, ...props })=>/*#__PURE__*/ jsx(RadioGroupContext.Provider, {
+        value: {
+            size,
+            isDisabled,
+            color,
+            selectedValue: value,
+            onValueChange
+        },
+        children: /*#__PURE__*/ jsx(Flex, {
+            direction: "col",
+            gap: gap,
+            ...props,
+            children: children
+        })
+    });
+UXRadioGroup.displayName = 'UXRadioGroup';
+export { UXRadioGroup };

package/dist/components/UXRadio/radio.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { type FlexProps } from '..';
+import type { UXRadioCommonProps } from './types';
+export type UXRadioProps = Omit<UXRadioCommonProps, 'onValueChange'> & FlexProps;
+export declare const UXRadio: React.FC<UXRadioProps>;

package/dist/components/UXRadio/radio.js

@@ -0,0 +1,67 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Pressable } from "react-native";
+import { ms } from "react-native-size-matters";
+import { Flex, Text } from "../index.js";
+import RadioOffIcon from "../../icons/RadioOffIcon.js";
+import RadioOnIcon from "../../icons/RadioOnIcon.js";
+import { disabledOpacity } from "../../theme/index.js";
+import { useRadioGroup } from "./context.js";
+const UXRadio = ({ size, color, children, value, isDisabled, ...props })=>{
+    const groupContext = useRadioGroup();
+    const { selectedValue, size: groupSize, color: groupColor, onValueChange, isDisabled: groupIsDisabled } = groupContext;
+    const isSelected = selectedValue === value;
+    const radioColor = color || groupColor || 'primary';
+    const radioSize = size || groupSize || 'md';
+    const radioIsDisabled = isDisabled || groupIsDisabled;
+    const handleSelectChange = ()=>{
+        onValueChange(value);
+    };
+    const iconSize = useMemo(()=>{
+        if ('sm' === radioSize) return ms(10);
+        if ('lg' === radioSize) return ms(14);
+        return ms(12);
+    }, [
+        radioSize
+    ]);
+    const labelVariant = useMemo(()=>{
+        if ('sm' === radioSize) return 'body3';
+        if ('lg' === radioSize) return 'body1';
+        return 'body2';
+    }, [
+        radioSize
+    ]);
+    const gap = useMemo(()=>{
+        if ('sm' === radioSize) return 6;
+        return 8;
+    }, [
+        radioSize
+    ]);
+    return /*#__PURE__*/ jsx(Pressable, {
+        disabled: radioIsDisabled,
+        style: {
+            opacity: radioIsDisabled ? disabledOpacity : 1
+        },
+        onPress: handleSelectChange,
+        children: /*#__PURE__*/ jsxs(Flex, {
+            gap: gap,
+            items: "center",
+            ...props,
+            children: [
+                isSelected ? /*#__PURE__*/ jsx(RadioOnIcon, {
+                    color: radioColor,
+                    size: iconSize
+                }) : /*#__PURE__*/ jsx(RadioOffIcon, {
+                    color: "secondary",
+                    size: iconSize
+                }),
+                'string' == typeof children ? /*#__PURE__*/ jsx(Text, {
+                    variant: labelVariant,
+                    children: children
+                }) : children
+            ]
+        })
+    });
+};
+UXRadio.displayName = 'UXRadio';
+export { UXRadio };

package/dist/components/UXRadio/types.d.ts

@@ -0,0 +1,10 @@
+import type React from 'react';
+import type { UXForegroundColor } from '@particle-network/ui-shared';
+export interface UXRadioCommonProps {
+    color?: UXForegroundColor;
+    size?: 'sm' | 'md' | 'lg';
+    isDisabled?: boolean;
+    value: string;
+    onValueChange: (value: string) => void;
+    children: React.ReactNode;
+}

package/dist/components/UXSwitch/index.d.ts

@@ -0,0 +1,2 @@
+export * from './switch';
+export type * from './types';

package/dist/components/UXSwitch/index.js

@@ -0,0 +1 @@
+export * from "./switch.js";

package/dist/components/UXSwitch/styles.d.ts

@@ -0,0 +1,16 @@
+import type { UXSwitchProps } from './types';
+export declare const useStyles: ({ size, isSelected }: UXSwitchProps) => {
+    track: {
+        width: number;
+        height: number;
+        borderRadius: number;
+        justifyContent: "center";
+    };
+    thumb: {
+        backgroundColor: string;
+        width: number;
+        height: number;
+        borderRadius: number;
+        elevation: number;
+    };
+};

package/dist/components/UXSwitch/styles.js

@@ -0,0 +1,58 @@
+import { useEffect, useMemo, useRef } from "react";
+import { Animated, StyleSheet } from "react-native";
+import { ms } from "react-native-size-matters";
+const useStyles = ({ size = 'md', isSelected = false })=>{
+    const animatedValue = useRef(new Animated.Value(isSelected ? 1 : 0)).current;
+    useEffect(()=>{
+        Animated.timing(animatedValue, {
+            toValue: isSelected ? 1 : 0,
+            duration: 200,
+            useNativeDriver: false
+        }).start();
+    }, [
+        isSelected,
+        animatedValue
+    ]);
+    const height = useMemo(()=>{
+        if ('sm' === size) return ms(12);
+        if ('lg' === size) return ms(20);
+        return ms(14);
+    }, [
+        size
+    ]);
+    const width = useMemo(()=>{
+        if ('sm' === size) return ms(20);
+        if ('lg' === size) return ms(34);
+        return ms(24);
+    }, [
+        size
+    ]);
+    const thumbSize = useMemo(()=>{
+        if ('sm' === size) return ms(8);
+        if ('lg' === size) return ms(14);
+        return ms(10);
+    }, [
+        size
+    ]);
+    const styles = useMemo(()=>StyleSheet.create({
+            track: {
+                width,
+                height,
+                borderRadius: height / 2,
+                justifyContent: 'center'
+            },
+            thumb: {
+                backgroundColor: 'white',
+                width: thumbSize,
+                height: thumbSize,
+                borderRadius: thumbSize / 2,
+                elevation: 2
+            }
+        }), [
+        width,
+        height,
+        thumbSize
+    ]);
+    return styles;
+};
+export { useStyles };

package/dist/components/UXSwitch/switch.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { UXSwitchProps } from './types';
+export declare const UXSwitch: React.FC<UXSwitchProps>;

package/dist/components/UXSwitch/switch.js

@@ -0,0 +1,103 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Animated } from "react-native";
+import { ms } from "react-native-size-matters";
+import useUpdateEffect from "ahooks/es/useUpdateEffect";
+import { Text, UXTouchableOpacity } from "../index.js";
+import { useColors } from "../../hooks/index.js";
+import { disabledOpacity } from "../../theme/index.js";
+import { useStyles } from "./styles.js";
+const UXSwitch = (props)=>{
+    const { color = 'primary', size = 'md', defaultSelected = false, isSelected: isSelectedProps = false, onValueChange, isReadOnly, isDisabled, children, ...flexProps } = props;
+    const [isSelected, setIsSelected] = useState(isSelectedProps || defaultSelected);
+    useUpdateEffect(()=>{
+        setIsSelected(isSelectedProps);
+    }, [
+        isSelectedProps
+    ]);
+    const { getColor } = useColors();
+    const styles = useStyles(props);
+    const gap = useMemo(()=>{
+        if ('sm' === size) return ms(6);
+        return ms(8);
+    }, [
+        size
+    ]);
+    const labelVariant = useMemo(()=>{
+        if ('sm' === size) return 'body3Bold';
+        if ('lg' === size) return 'body1Bold';
+        return 'body2Bold';
+    }, [
+        size
+    ]);
+    const animatedValue = useRef(new Animated.Value(isSelected ? 1 : 0)).current;
+    useEffect(()=>{
+        Animated.timing(animatedValue, {
+            toValue: isSelected ? 1 : 0,
+            duration: 200,
+            useNativeDriver: false
+        }).start();
+    }, [
+        isSelected,
+        animatedValue
+    ]);
+    const thumbTranslateX = useMemo(()=>{
+        const padding = 'lg' === size ? ms(3) : ms(2);
+        return animatedValue.interpolate({
+            inputRange: [
+                0,
+                1
+            ],
+            outputRange: [
+                padding,
+                styles.track.width - styles.thumb.width - padding
+            ]
+        });
+    }, [
+        animatedValue,
+        styles,
+        size
+    ]);
+    const handlePress = ()=>{
+        if (isReadOnly || isDisabled) return;
+        setIsSelected(!isSelected);
+        onValueChange?.(!isSelected);
+    };
+    return /*#__PURE__*/ jsxs(UXTouchableOpacity, {
+        activeOpacity: 0.8,
+        disabled: isDisabled || isReadOnly,
+        gap: gap,
+        items: "center",
+        opacity: isDisabled ? disabledOpacity : 1,
+        onPress: handlePress,
+        ...flexProps,
+        children: [
+            /*#__PURE__*/ jsx(Animated.View, {
+                style: [
+                    styles.track,
+                    {
+                        backgroundColor: isSelected ? getColor(color) : getColor('tertiary')
+                    }
+                ],
+                children: /*#__PURE__*/ jsx(Animated.View, {
+                    style: [
+                        styles.thumb,
+                        {
+                            transform: [
+                                {
+                                    translateX: thumbTranslateX
+                                }
+                            ]
+                        }
+                    ]
+                })
+            }),
+            'string' == typeof children ? /*#__PURE__*/ jsx(Text, {
+                variant: labelVariant,
+                children: children
+            }) : children
+        ]
+    });
+};
+UXSwitch.displayName = 'UXSwitch';
+export { UXSwitch };