@particle-network/ui-native 0.1.3 → 0.1.4-beta.1

package/dist/components/date-picker/date-wheel-picker.js

@@ -0,0 +1,121 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { useI18n, useLocale } from "../../hooks/index.js";
+import { HStack } from "../layout/HStack.js";
+import wheel_column from "./wheel-column.js";
+const MONTHS_EN = [
+    'Jan',
+    'Feb',
+    'Mar',
+    'Apr',
+    'May',
+    'Jun',
+    'Jul',
+    'Aug',
+    'Sep',
+    'Oct',
+    'Nov',
+    'Dec'
+];
+const MONTHS_ZH = [
+    '1月',
+    '2月',
+    '3月',
+    '4月',
+    '5月',
+    '6月',
+    '7月',
+    '8月',
+    '9月',
+    '10月',
+    '11月',
+    '12月'
+];
+const DateWheelPicker = ({ selectedDate, onDateChange, minDate, maxDate })=>{
+    const i18n = useI18n();
+    const { locale } = useLocale();
+    const [month, setMonth] = useState(selectedDate.getMonth());
+    const [day, setDay] = useState(selectedDate.getDate());
+    const [year, setYear] = useState(selectedDate.getFullYear());
+    const years = useMemo(()=>{
+        const currentYear = new Date().getFullYear();
+        const minYear = minDate?.getFullYear() ?? currentYear - 100;
+        const maxYear = maxDate?.getFullYear() ?? currentYear + 100;
+        return Array.from({
+            length: maxYear - minYear + 1
+        }, (_, i)=>({
+                label: 'en' === locale ? (minYear + i).toString().padStart(4, '0') : `${minYear + i}年`,
+                value: minYear + i
+            }));
+    }, [
+        minDate,
+        maxDate,
+        locale
+    ]);
+    const daysInMonth = useMemo(()=>new Date(year, month + 1, 0).getDate(), [
+        year,
+        month
+    ]);
+    const days = useMemo(()=>Array.from({
+            length: daysInMonth
+        }, (_, i)=>({
+                label: 'en' === locale ? (i + 1).toString().padStart(2, '0') : `${i + 1}日`,
+                value: i + 1
+            })), [
+        daysInMonth,
+        locale
+    ]);
+    const months = useMemo(()=>('en' === locale ? MONTHS_EN : MONTHS_ZH).map((m, index)=>({
+                label: m,
+                value: index
+            })), [
+        locale
+    ]);
+    useEffect(()=>{
+        if (day > daysInMonth) setDay(daysInMonth);
+    }, [
+        day,
+        daysInMonth
+    ]);
+    useEffect(()=>{
+        const newDate = new Date(year, month, day);
+        newDate.setHours(selectedDate.getHours());
+        newDate.setMinutes(selectedDate.getMinutes());
+        newDate.setSeconds(selectedDate.getSeconds());
+        onDateChange(newDate);
+    }, [
+        month,
+        day,
+        year
+    ]);
+    return /*#__PURE__*/ jsxs(HStack, {
+        fullWidth: true,
+        children: [
+            'zh' === locale && /*#__PURE__*/ jsx(wheel_column, {
+                data: years,
+                label: i18n.datePicker.year,
+                selectedValue: year,
+                onValueChange: setYear
+            }),
+            /*#__PURE__*/ jsx(wheel_column, {
+                data: months,
+                label: i18n.datePicker.month,
+                selectedValue: month,
+                onValueChange: setMonth
+            }),
+            /*#__PURE__*/ jsx(wheel_column, {
+                data: days,
+                label: i18n.datePicker.day,
+                selectedValue: day,
+                onValueChange: setDay
+            }),
+            'en' === locale && /*#__PURE__*/ jsx(wheel_column, {
+                data: years,
+                label: i18n.datePicker.year,
+                selectedValue: year,
+                onValueChange: setYear
+            })
+        ]
+    });
+};
+export { DateWheelPicker };

package/dist/components/date-picker/index.d.ts

@@ -0,0 +1,3 @@
+export * from './date-picker';
+export * from './date-range-picker';
+export type * from './types';

package/dist/components/date-picker/index.js

@@ -0,0 +1,2 @@
+export * from "./date-picker.js";
+export * from "./date-range-picker.js";

package/dist/components/date-picker/time-wheel-picker.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface TimeWheelPickerProps {
+    selectedDate: Date;
+    onDateChange: (date: Date) => void;
+}
+export declare const TimeWheelPicker: React.FC<TimeWheelPickerProps>;
+export {};

package/dist/components/date-picker/time-wheel-picker.js

@@ -0,0 +1,64 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { useI18n } from "../../hooks/index.js";
+import { HStack } from "../layout/HStack.js";
+import wheel_column from "./wheel-column.js";
+const hours = Array.from({
+    length: 24
+}, (_, i)=>({
+        label: i.toString().padStart(2, '0'),
+        value: i
+    }));
+const minutes = Array.from({
+    length: 60
+}, (_, i)=>({
+        label: i.toString().padStart(2, '0'),
+        value: i
+    }));
+const seconds = Array.from({
+    length: 60
+}, (_, i)=>({
+        label: i.toString().padStart(2, '0'),
+        value: i
+    }));
+const TimeWheelPicker = ({ selectedDate, onDateChange })=>{
+    const i18n = useI18n();
+    const [hour, setHour] = useState(selectedDate.getHours());
+    const [minute, setMinute] = useState(selectedDate.getMinutes());
+    const [second, setSecond] = useState(selectedDate.getSeconds());
+    useEffect(()=>{
+        const newDate = new Date(selectedDate);
+        newDate.setHours(hour);
+        newDate.setMinutes(minute);
+        newDate.setSeconds(second);
+        onDateChange(newDate);
+    }, [
+        hour,
+        minute,
+        second
+    ]);
+    return /*#__PURE__*/ jsxs(HStack, {
+        fullWidth: true,
+        children: [
+            /*#__PURE__*/ jsx(wheel_column, {
+                data: hours,
+                label: i18n.datePicker.hour,
+                selectedValue: hour,
+                onValueChange: setHour
+            }),
+            /*#__PURE__*/ jsx(wheel_column, {
+                data: minutes,
+                label: i18n.datePicker.minute,
+                selectedValue: minute,
+                onValueChange: setMinute
+            }),
+            /*#__PURE__*/ jsx(wheel_column, {
+                data: seconds,
+                label: i18n.datePicker.second,
+                selectedValue: second,
+                onValueChange: setSecond
+            })
+        ]
+    });
+};
+export { TimeWheelPicker };

package/dist/components/date-picker/types.d.ts

@@ -0,0 +1,93 @@
+import type { HStackProps } from '../layout/HStack';
+import type { UXPressableProps } from '../UXPressable';
+export interface UXDatePickerProps extends Omit<UXPressableProps, 'children'> {
+    /**
+     * 当前值
+     */
+    value?: Date;
+    /**
+     * 默认值
+     */
+    defaultValue?: Date;
+    /**
+     * 确认回调
+     */
+    onConfirm?: (value: Date) => void;
+    /**
+     * 日期格式
+     */
+    format?: string;
+    /**
+     * 最小日期
+     */
+    minDate?: Date;
+    /**
+     * 最大日期
+     */
+    maxDate?: Date;
+    /**
+     * 日期占位符
+     */
+    placeholder?: string;
+    /**
+     * 是否禁用
+     */
+    isDisabled?: boolean;
+    /**
+     * 是否只读
+     */
+    isReadOnly?: boolean;
+}
+export interface UXDateRangePickerProps extends Omit<HStackProps, 'children'> {
+    /**
+     * 当前值
+     */
+    value?: DateRangeValue;
+    /**
+     * 默认值
+     */
+    defaultValue?: DateRangeValue;
+    /**
+     * 确认回调
+     */
+    onConfirm?: (value: DateRangeValue) => void;
+    /**
+     * 日期格式
+     */
+    format?: string;
+    /**
+     * 最小日期
+     */
+    minDate?: Date;
+    /**
+     * 最大日期
+     */
+    maxDate?: Date;
+    /**
+     * 开始日期占位符
+     */
+    startPlaceholder?: string;
+    /**
+     * 结束日期占位符
+     */
+    endPlaceholder?: string;
+    /**
+     * 是否禁用
+     */
+    isDisabled?: boolean;
+    /**
+     * 是否只读
+     */
+    isReadOnly?: boolean;
+}
+export interface DateRangeValue {
+    start?: Date;
+    end?: Date;
+}
+export interface WheelPickerProps {
+    selectedDate: Date;
+    onDateChange: (date: Date) => void;
+    minDate?: Date;
+    maxDate?: Date;
+}
+export type PickerType = 'date' | 'time';

package/dist/components/date-picker/utils.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 判断格式字符串是否包含时间部分
+ * @param format 格式字符串
+ * @returns 是否包含时间
+ */
+export declare const hasTimeInFormat: (format: string) => boolean;

package/dist/components/date-picker/utils.js

@@ -0,0 +1,2 @@
+const hasTimeInFormat = (format)=>/[HhmsAa]/.test(format);
+export { hasTimeInFormat };

package/dist/components/date-picker/wheel-column.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface WheelColumnProps {
+    data: {
+        label: string;
+        value: number;
+    }[];
+    selectedValue: number;
+    onValueChange: (value: number) => void;
+    label: string;
+}
+declare const WheelColumn: React.FC<WheelColumnProps>;
+export default WheelColumn;

package/dist/components/date-picker/wheel-column.js

@@ -0,0 +1,152 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import react, { useEffect } from "react";
+import { ScrollView } from "react-native";
+import { Box } from "../layout/Box/index.js";
+import { VStack } from "../layout/VStack.js";
+import { Text } from "../Text/index.js";
+import { UXPressable } from "../UXPressable/index.js";
+const ITEM_HEIGHT = 44;
+const WheelColumn = ({ data, selectedValue, onValueChange, label })=>{
+    const scrollViewRef = react.useRef(null);
+    const isScrolling = react.useRef(false);
+    const [scrollOffset, setScrollOffset] = react.useState(0);
+    const paddedData = react.useMemo(()=>{
+        const emptyItems = [
+            {
+                label: '',
+                value: -1
+            },
+            {
+                label: '',
+                value: -2
+            }
+        ];
+        return [
+            ...emptyItems,
+            ...data,
+            ...emptyItems
+        ];
+    }, [
+        data
+    ]);
+    const getItemOpacity = (index)=>{
+        const itemOffset = index * ITEM_HEIGHT;
+        const relativeOffset = itemOffset - scrollOffset;
+        const visibleIndex = Math.round(relativeOffset / ITEM_HEIGHT);
+        const opacityMap = {
+            0: 0.3,
+            1: 0.7,
+            2: 1,
+            3: 0.7,
+            4: 0.3
+        };
+        return opacityMap[visibleIndex] ?? 0.3;
+    };
+    useEffect(()=>{
+        const index = data.findIndex((item)=>item.value === selectedValue);
+        if (-1 !== index && scrollViewRef.current && !isScrolling.current) {
+            const targetY = index * ITEM_HEIGHT;
+            scrollViewRef.current.scrollTo({
+                y: targetY,
+                animated: false
+            });
+            setScrollOffset(targetY);
+        }
+    }, [
+        selectedValue,
+        data
+    ]);
+    const handleScroll = (event)=>{
+        const offsetY = event.nativeEvent.contentOffset.y;
+        setScrollOffset(offsetY);
+        const index = Math.round(offsetY / ITEM_HEIGHT);
+        if (data[index] && data[index].value !== selectedValue) onValueChange(data[index].value);
+    };
+    const handleScrollBegin = ()=>{
+        isScrolling.current = true;
+    };
+    const handleScrollEnd = ()=>{
+        isScrolling.current = false;
+    };
+    return /*#__PURE__*/ jsxs(VStack, {
+        fill: true,
+        items: "center",
+        gap: 8,
+        children: [
+            /*#__PURE__*/ jsx(Text, {
+                body2Bold: true,
+                color: "secondary",
+                children: label
+            }),
+            /*#__PURE__*/ jsxs(Box, {
+                fullWidth: true,
+                position: "relative",
+                h: 5 * ITEM_HEIGHT,
+                children: [
+                    /*#__PURE__*/ jsx(ScrollView, {
+                        ref: scrollViewRef,
+                        nestedScrollEnabled: true,
+                        scrollEnabled: true,
+                        showsVerticalScrollIndicator: false,
+                        snapToInterval: ITEM_HEIGHT,
+                        decelerationRate: "fast",
+                        scrollEventThrottle: 16,
+                        onScrollBeginDrag: handleScrollBegin,
+                        onMomentumScrollBegin: handleScrollBegin,
+                        onMomentumScrollEnd: handleScrollEnd,
+                        onScrollEndDrag: handleScrollEnd,
+                        onScroll: handleScroll,
+                        children: paddedData.map((item, idx)=>{
+                            const opacity = getItemOpacity(idx);
+                            return /*#__PURE__*/ jsx(UXPressable, {
+                                center: true,
+                                ph: 20,
+                                pv: 8,
+                                h: ITEM_HEIGHT,
+                                onPress: ()=>{
+                                    if (-1 !== item.value && -2 !== item.value) {
+                                        const dataIndex = data.findIndex((d)=>d.value === item.value);
+                                        if (-1 !== dataIndex) {
+                                            const targetY = dataIndex * ITEM_HEIGHT;
+                                            isScrolling.current = true;
+                                            scrollViewRef.current?.scrollTo({
+                                                y: targetY,
+                                                animated: true
+                                            });
+                                            setScrollOffset(targetY);
+                                            onValueChange(item.value);
+                                            setTimeout(()=>{
+                                                isScrolling.current = false;
+                                            }, 300);
+                                        }
+                                    }
+                                },
+                                children: /*#__PURE__*/ jsx(Text, {
+                                    body1Bold: true,
+                                    color: "foreground",
+                                    style: {
+                                        opacity
+                                    },
+                                    children: item.label
+                                })
+                            }, `${item.value}-${idx}`);
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(Box, {
+                        position: "absolute",
+                        zIndex: -1,
+                        top: 2 * ITEM_HEIGHT,
+                        left: 0,
+                        right: 0,
+                        h: ITEM_HEIGHT,
+                        borderTop: 1,
+                        borderBottom: 1,
+                        borderColor: "divider"
+                    })
+                ]
+            })
+        ]
+    });
+};
+const wheel_column = WheelColumn;
+export { wheel_column as default };

package/dist/components/index.d.ts

@@ -1,3 +1,4 @@
+export * from './date-picker';
 export * from './input';
 export * from './layout/Box';
 export * from './layout/Center';

package/dist/components/index.js

@@ -1,3 +1,4 @@
+export * from "./date-picker/index.js";
 export * from "./input/index.js";
 export * from "./layout/Box/index.js";
 export * from "./layout/Center.js";

package/dist/components/input/input.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { TextInput } from "react-native";
 import { useColors } from "../../hooks/index.js";
-import CloseIcon from "../../icons/CloseIcon.js";
+import { Icon } from "../../icons/index.js";
 import { HStack } from "../layout/HStack.js";
 import { VStack } from "../layout/VStack.js";
 import { Text } from "../Text/index.js";
@@ -142,7 +142,8 @@ const UXInput = /*#__PURE__*/ forwardRef((props, ref)=>{
                     }),
                     isClearable && !!internalValue && !isDisabled && !isReadOnly && /*#__PURE__*/ jsx(UXPressable, {
                         onPress: handleClear,
-                        children: /*#__PURE__*/ jsx(CloseIcon, {
+                        children: /*#__PURE__*/ jsx(Icon, {
+                            name: "close",
                             style: styles.clearButton
                         })
                     }),

package/dist/components/input/number-input.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { Platform, TextInput } from "react-native";
 import { useColors } from "../../hooks/index.js";
-import CloseIcon from "../../icons/CloseIcon.js";
+import { Icon } from "../../icons/index.js";
 import { HStack } from "../layout/HStack.js";
 import { VStack } from "../layout/VStack.js";
 import { Text } from "../Text/index.js";
@@ -236,7 +236,8 @@ const UXNumberInput = /*#__PURE__*/ forwardRef((props, ref)=>{
                     }),
                     isClearable && !isNaN(internalValue) && !isDisabled && !isReadOnly && /*#__PURE__*/ jsx(UXPressable, {
                         onPress: handleClear,
-                        children: /*#__PURE__*/ jsx(CloseIcon, {
+                        children: /*#__PURE__*/ jsx(Icon, {
+                            name: "close",
                             style: styles.clearButton,
                             color: "secondary"
                         })

package/dist/config/config.default.js

@@ -42,7 +42,7 @@ const defaultComponentConfig = {
         bg: 'overlay',
         backdrop: {
             light: '#00000050',
-            dark: '#00000050'
+            dark: '#00000070'
         }
     },
     tabs: {

package/dist/config/config.street.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentConfig } from '../types';
+export declare const streetComponentConfig: ComponentConfig;

package/dist/config/{config.ux.js → config.street.js}

@@ -1,4 +1,4 @@
-const uxComponentConfig = {
+const streetComponentConfig = {
     button: {
         defaultProps: {
             radius: 'full'
@@ -68,4 +68,4 @@ const uxComponentConfig = {
         radius: 'full'
     }
 };
-export { uxComponentConfig };
+export { streetComponentConfig };

package/dist/config/index.d.ts

@@ -1,4 +1,4 @@
 export declare const builtinComponentConfig: {
-    ux: import("..").ComponentConfig;
+    street: import("..").ComponentConfig;
     default: import("..").ComponentConfig;
 };

package/dist/config/index.js

@@ -1,7 +1,7 @@
 import { defaultComponentConfig } from "./config.default.js";
-import { uxComponentConfig } from "./config.ux.js";
+import { streetComponentConfig } from "./config.street.js";
 const builtinComponentConfig = {
-    ux: uxComponentConfig,
+    street: streetComponentConfig,
     default: defaultComponentConfig
 };
 export { builtinComponentConfig };

package/dist/hooks/index.d.ts

@@ -1,6 +1,8 @@
 export * from './useColors';
 export * from './useComponentConfig';
+export * from './useI18n';
 export * from './useKeyboard';
+export * from './useLocale';
 export * from './useMs';
 export * from './useRadius';
 export * from './useSpacing';

package/dist/hooks/index.js

@@ -1,6 +1,8 @@
 export * from "./useColors.js";
 export * from "./useComponentConfig.js";
+export * from "./useI18n.js";
 export * from "./useKeyboard.js";
+export * from "./useLocale.js";
 export * from "./useMs.js";
 export * from "./useRadius.js";
 export * from "./useSpacing.js";

package/dist/hooks/useI18n.d.ts

@@ -0,0 +1,5 @@
+import { type LocaleText } from '../locales';
+/**
+ * Hook to get internationalized text
+ */
+export declare function useI18n(): LocaleText;

package/dist/hooks/useI18n.js

@@ -0,0 +1,7 @@
+import { getLocaleText } from "../locales/index.js";
+import { useLocale } from "./useLocale.js";
+function useI18n() {
+    const { locale } = useLocale();
+    return getLocaleText(locale);
+}
+export { useI18n };

package/dist/hooks/useLocale.d.ts

@@ -0,0 +1,8 @@
+import type { Locale } from '../types';
+/**
+ * Hook to get and set the current locale
+ */
+export declare function useLocale(): {
+    locale: Locale;
+    setLocale: ((locale: Locale) => void) | undefined;
+};

package/dist/hooks/useLocale.js

@@ -0,0 +1,9 @@
+import { useThemeContext } from "../provider/ThemeContext.js";
+function useLocale() {
+    const { locale, setLocale } = useThemeContext();
+    return {
+        locale,
+        setLocale
+    };
+}
+export { useLocale };

package/dist/icons/{DotIcon.d.ts → index.d.ts}

@@ -1,4 +1,3 @@
 import React from 'react';
 import type { IconProps } from './types';
-declare const DotIcon: React.FC<IconProps>;
-export default DotIcon;
+export declare const Icon: React.FC<IconProps>;