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

package/dist/components/UXButton/button.types.d.ts

@@ -8,7 +8,7 @@ export interface UXButtonProps extends Omit<UXPressableProps, 'style' | 'disable
     /**
      * 按钮尺寸
      * @default 'md'
-     * | size   | ux-pro | ux     |
+     * | size   | ux | street     |
      * | :----- | :----- | :----- |
      * | xs     | 20     | 36     |
      * | sm     | 24     | 40     |
@@ -16,7 +16,7 @@ export interface UXButtonProps extends Omit<UXPressableProps, 'style' | 'disable
      * | lg     | 44     | 48     |
      *
      * fontSize
-     * | size   | ux-pro | ux     |
+     * | size   | ux | street     |
      * | :----- | :----- | :----- |
      * | xs     | 11      | 12     |
      * | sm     | 10     | 14     |

package/dist/components/UXCheckbox/checkbox.js

@@ -1,8 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from "react";
 import { useMs } from "../../hooks/index.js";
-import CheckboxOffIcon from "../../icons/CheckboxOffIcon.js";
-import CheckboxOnIcon from "../../icons/CheckboxOnIcon.js";
+import { Icon } from "../../icons/index.js";
 import { disabledOpacity } from "../../theme/index.js";
 import { Flex } from "../layout/Flex/index.js";
 import { Text } from "../Text/index.js";
@@ -62,10 +61,12 @@ const UXCheckbox = ({ size, color, defaultSelected = false, isSelected, children
             items: "center",
             ...props,
             children: [
-                internalSelected ? /*#__PURE__*/ jsx(CheckboxOnIcon, {
+                internalSelected ? /*#__PURE__*/ jsx(Icon, {
+                    name: "checkboxOn",
                     color: checkboxColor,
                     size: iconSize
-                }) : /*#__PURE__*/ jsx(CheckboxOffIcon, {
+                }) : /*#__PURE__*/ jsx(Icon, {
+                    name: "checkboxOff",
                     color: "secondary",
                     size: iconSize
                 }),

package/dist/components/UXChip/styles.js

@@ -2,6 +2,7 @@ import { useMemo } from "react";
 import { StyleSheet } from "react-native";
 import { useColors, useMs } from "../../hooks/index.js";
 import { disabledOpacity } from "../../theme/index.js";
+const isCustomColor = (color)=>'string' == typeof color && color.startsWith('#');
 const useStyles = ({ size = 'md', color = 'default', variant = 'flat', isDisabled, bg })=>{
     const { getColor } = useColors();
     const { ms } = useMs();
@@ -22,8 +23,11 @@ const useStyles = ({ size = 'md', color = 'default', variant = 'flat', isDisable
         size
     ]);
     const textColor = useMemo(()=>{
-        if ('default' === color) return getColor('default');
-        if ('secondary' === color) return getColor('secondary');
+        if (isCustomColor(color)) {
+            if ('solid' === variant) return 'white';
+            return color;
+        }
+        if ('default' === color) return getColor('secondary');
         if ('solid' === variant) return getColor('white');
         return getColor(color);
     }, [
@@ -33,18 +37,20 @@ const useStyles = ({ size = 'md', color = 'default', variant = 'flat', isDisable
     ]);
     const backgroundColor = useMemo(()=>{
         if (bg) return getColor(bg);
+        if (isCustomColor(color)) {
+            if ('solid' === variant) return color;
+            return `${color}20`;
+        }
         if ('solid' === variant) {
             if ([
-                'default',
-                'secondary'
+                'default'
             ].includes(color)) return getColor('bg-200');
             return getColor(color);
         }
         if ('flat' === variant) {
             if ([
-                'default',
-                'secondary'
-            ].includes(color)) return getColor('bg-200');
+                'default'
+            ].includes(color)) return getColor('bg-300');
             return `${getColor(color)}20`;
         }
         return 'transparent';

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

@@ -2,7 +2,7 @@ import type React from 'react';
 import type { UXForegroundColor } from '@particle-network/ui-shared';
 import type { HStackProps } from '../layout/HStack';
 export interface UXChipProps extends HStackProps {
-    color?: UXForegroundColor;
+    color?: UXForegroundColor | `#${string}`;
     size?: 'sm' | 'md' | 'lg';
     variant?: 'solid' | 'flat';
     isDisabled?: boolean;

package/dist/components/UXHint/index.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import "react";
 import { useMs } from "../../hooks/index.js";
-import QuestionIcon from "../../icons/QuestionIcon.js";
+import { Icon } from "../../icons/index.js";
 import { Square } from "../layout/Square.js";
 import { UXTooltip } from "../UXTooltip/index.js";
 const UXHint = (props)=>{
@@ -14,7 +14,8 @@ const UXHint = (props)=>{
             center: true,
             size: 20,
             style: style,
-            children: /*#__PURE__*/ jsx(QuestionIcon, {
+            children: /*#__PURE__*/ jsx(Icon, {
+                name: "question",
                 color: "secondary",
                 size: ms(14),
                 style: iconStyle

package/dist/components/UXListBox/UXListBoxItem.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useContext } from "react";
 import { useMs } from "../../hooks/index.js";
-import CheckIcon from "../../icons/CheckIcon.js";
+import { Icon } from "../../icons/index.js";
 import { HStack } from "../layout/HStack.js";
 import { Text } from "../Text/index.js";
 import { UXTouchableOpacity } from "../UXTouchableOpacity/index.js";
@@ -47,7 +47,8 @@ const UXListBoxItem = ({ value = '', startContent, isDisabled = false, onPress,
                     })
                 ]
             }),
-            selectionMode && isSelected ? /*#__PURE__*/ jsx(CheckIcon, {
+            selectionMode && isSelected ? /*#__PURE__*/ jsx(Icon, {
+                name: "check",
                 size: ms(16),
                 color: "foreground"
             }) : null

package/dist/components/UXRadio/radio.js

@@ -2,8 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { Pressable } from "react-native";
 import { useMs } from "../../hooks/index.js";
-import RadioOffIcon from "../../icons/RadioOffIcon.js";
-import RadioOnIcon from "../../icons/RadioOnIcon.js";
+import { Icon } from "../../icons/index.js";
 import { disabledOpacity } from "../../theme/index.js";
 import { Flex } from "../layout/Flex/index.js";
 import { Text } from "../Text/index.js";
@@ -50,10 +49,12 @@ const UXRadio = ({ size, color, children, value, isDisabled, ...props })=>{
             items: "center",
             ...props,
             children: [
-                isSelected ? /*#__PURE__*/ jsx(RadioOnIcon, {
+                isSelected ? /*#__PURE__*/ jsx(Icon, {
+                    name: "radioOn",
                     color: radioColor,
                     size: iconSize
-                }) : /*#__PURE__*/ jsx(RadioOffIcon, {
+                }) : /*#__PURE__*/ jsx(Icon, {
+                    name: "radioOff",
                     color: "secondary",
                     size: iconSize
                 }),

package/dist/components/UXTabs/tab.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback } from "react";
-import DotIcon from "../../icons/DotIcon.js";
+import { Icon } from "../../icons/index.js";
 import { Box } from "../layout/Box/index.js";
 import { HStack } from "../layout/HStack.js";
 import { Text } from "../Text/index.js";
@@ -42,7 +42,8 @@ const UXTab = ({ tabKey = '', title, icon, style, notification })=>{
                         style: styles.tabText,
                         children: title
                     }),
-                    notification ? /*#__PURE__*/ jsx(DotIcon, {
+                    notification ? /*#__PURE__*/ jsx(Icon, {
+                        name: "dot",
                         color: "danger",
                         size: 5,
                         style: {

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

@@ -13,7 +13,7 @@ export interface UXTabsProps extends HStackProps {
      * | light   | 24  | 30  | 34  |
      *
      * variant-text 字号对比
-     * | text    | ux-pro | ux    |
+     * | text    | ux | street    |
      * | ------- | ------ | ----- |
      * | sm      | 12     | 14    |
      * | md      | 14     | 16    |

package/dist/components/UXToast/ToastView.js

@@ -6,7 +6,7 @@ import { HStack } from "../layout/HStack.js";
 import { Text } from "../Text/index.js";
 import { UXButton } from "../UXButton/index.js";
 import { useComponentConfig, useTheme } from "../../hooks/index.js";
-import CloseIcon from "../../icons/CloseIcon.js";
+import { Icon } from "../../icons/index.js";
 import { ToastIcon } from "./ToastIcon.js";
 const ToastView = ({ type, text, props: toastProps })=>{
     const { btnText, numberOfLines = 4, colorBg, onPress = ()=>null } = toastProps ?? {};
@@ -63,7 +63,8 @@ const ToastView = ({ type, text, props: toastProps })=>{
                 /*#__PURE__*/ jsx(UXButton, {
                     variant: "text",
                     onPress: ()=>react_native_toast_message.hide(),
-                    children: /*#__PURE__*/ jsx(CloseIcon, {
+                    children: /*#__PURE__*/ jsx(Icon, {
+                        name: "close",
                         color: colorBg ? 'white' : 'foreground',
                         size: 18
                     })

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { type UXPressableProps } from '../UXPressable';
+interface DateButtonProps extends UXPressableProps {
+    isSelected?: boolean;
+    text: string;
+}
+declare const DateButton: React.FC<DateButtonProps>;
+export default DateButton;

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

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { Text } from "../Text/index.js";
+import { UXPressable } from "../UXPressable/index.js";
+const DateButton = ({ isSelected, text, ...props })=>/*#__PURE__*/ jsx(UXPressable, {
+        fill: true,
+        center: true,
+        border: 1,
+        h: 30,
+        radius: "xs",
+        borderColor: isSelected ? 'primary' : 'bg-200',
+        bg: "bg-200",
+        ...props,
+        children: /*#__PURE__*/ jsx(Text, {
+            body3Bold: true,
+            color: isSelected ? 'foreground' : 'secondary',
+            children: text
+        })
+    });
+const date_button = DateButton;
+export { date_button as default };

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

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

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

@@ -0,0 +1,117 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from "react";
+import dayjs from "dayjs";
+import { useI18n } from "../../hooks/index.js";
+import { UXInput } from "../input/index.js";
+import { HStack } from "../layout/HStack.js";
+import { VStack } from "../layout/VStack.js";
+import { UXButton } from "../UXButton/index.js";
+import { UXModal } from "../UXModal/index.js";
+import { UXPressable } from "../UXPressable/index.js";
+import date_button from "./date-button.js";
+import { DateWheelPicker } from "./date-wheel-picker.js";
+import { TimeWheelPicker } from "./time-wheel-picker.js";
+import { hasTimeInFormat } from "./utils.js";
+const UXDatePicker = ({ value, defaultValue, onConfirm = ()=>null, format = 'YYYY/MM/DD', minDate, maxDate, placeholder, isDisabled = false, isReadOnly = false, ...uxPressableProps })=>{
+    const [isOpen, setIsOpen] = useState(false);
+    const [pickerType, setPickerType] = useState('date');
+    const [internalValue, setInternalValue] = useState(value || defaultValue || new Date());
+    const i18n = useI18n();
+    const [dateFormat, timeFormat] = format.split(' ');
+    const showTimePicker = hasTimeInFormat(format);
+    const displayPlaceholder = placeholder ?? format;
+    useEffect(()=>{
+        if (void 0 !== value) setInternalValue(value);
+    }, [
+        value
+    ]);
+    const handleOpenModal = useCallback((picker)=>{
+        if (isDisabled || isReadOnly) return;
+        setPickerType(picker);
+        setIsOpen(true);
+    }, [
+        isDisabled,
+        isReadOnly
+    ]);
+    const handleConfirm = useCallback(()=>{
+        onConfirm(internalValue);
+        setIsOpen(false);
+    }, [
+        internalValue,
+        onConfirm
+    ]);
+    const handleClose = useCallback(()=>{
+        setIsOpen(false);
+    }, []);
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(UXPressable, {
+                onPress: ()=>handleOpenModal('date'),
+                ...uxPressableProps,
+                children: /*#__PURE__*/ jsx(UXInput, {
+                    containerStyle: {
+                        flex: 1
+                    },
+                    editable: false,
+                    isDisabled: isDisabled,
+                    isReadOnly: isReadOnly,
+                    placeholder: displayPlaceholder,
+                    pointerEvents: "none",
+                    value: value ? dayjs(value).format(format) : format
+                })
+            }),
+            /*#__PURE__*/ jsx(UXModal, {
+                disableCloseBySwipe: true,
+                wrapPortal: true,
+                footer: /*#__PURE__*/ jsx(UXButton, {
+                    fullWidth: true,
+                    color: "primary",
+                    size: "lg",
+                    onPress: handleConfirm,
+                    children: i18n.datePicker.confirm
+                }),
+                isOpen: isOpen,
+                scrollViewProps: {
+                    scrollEnabled: false
+                },
+                title: i18n.datePicker.confirm,
+                onClose: handleClose,
+                children: /*#__PURE__*/ jsxs(VStack, {
+                    fullWidth: true,
+                    gap: "lg",
+                    children: [
+                        /*#__PURE__*/ jsxs(HStack, {
+                            fullWidth: true,
+                            items: "center",
+                            gap: 8,
+                            children: [
+                                /*#__PURE__*/ jsx(date_button, {
+                                    isSelected: 'date' === pickerType,
+                                    text: dayjs(internalValue).format(dateFormat),
+                                    onPress: ()=>setPickerType('date')
+                                }),
+                                showTimePicker && /*#__PURE__*/ jsx(date_button, {
+                                    isSelected: 'time' === pickerType,
+                                    text: dayjs(internalValue).format(timeFormat),
+                                    onPress: ()=>setPickerType('time')
+                                })
+                            ]
+                        }),
+                        'date' === pickerType && /*#__PURE__*/ jsx(DateWheelPicker, {
+                            maxDate: maxDate,
+                            minDate: minDate,
+                            selectedDate: internalValue,
+                            onDateChange: setInternalValue
+                        }),
+                        'time' === pickerType && /*#__PURE__*/ jsx(TimeWheelPicker, {
+                            selectedDate: internalValue,
+                            onDateChange: setInternalValue
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+};
+UXDatePicker.displayName = 'UXDatePicker';
+export { UXDatePicker };

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

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

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

@@ -0,0 +1,195 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from "react";
+import dayjs from "dayjs";
+import { useI18n } from "../../hooks/index.js";
+import { Icon } from "../../icons/index.js";
+import { UXInput } from "../input/index.js";
+import { HStack } from "../layout/HStack.js";
+import { VStack } from "../layout/VStack.js";
+import { Text } from "../Text/index.js";
+import { UXButton } from "../UXButton/index.js";
+import { UXModal } from "../UXModal/index.js";
+import { UXPressable } from "../UXPressable/index.js";
+import date_button from "./date-button.js";
+import { DateWheelPicker } from "./date-wheel-picker.js";
+import { TimeWheelPicker } from "./time-wheel-picker.js";
+import { hasTimeInFormat } from "./utils.js";
+const UXDateRangePicker = ({ value, defaultValue, onConfirm = ()=>null, format = 'YYYY/MM/DD', minDate, maxDate, startPlaceholder, endPlaceholder, isDisabled = false, isReadOnly = false, ...hStackProps })=>{
+    const [isOpen, setIsOpen] = useState(false);
+    const [currentEditType, setCurrentEditType] = useState('start');
+    const [pickerType, setPickerType] = useState('date');
+    const [internalStart, setInternalStart] = useState(value?.start || defaultValue?.start || new Date());
+    const [internalEnd, setInternalEnd] = useState(value?.end || defaultValue?.end || new Date());
+    const [error, setError] = useState('');
+    const i18n = useI18n();
+    const [dateFormat, timeFormat] = format.split(' ');
+    const showTimePicker = hasTimeInFormat(format);
+    const displayStartPlaceholder = startPlaceholder ?? format;
+    const displayEndPlaceholder = endPlaceholder ?? format;
+    useEffect(()=>{
+        if (value?.start !== void 0) setInternalStart(value?.start);
+        if (value?.end !== void 0) setInternalEnd(value?.end);
+    }, [
+        value
+    ]);
+    const handleOpenModal = useCallback((type, picker)=>{
+        if (isDisabled || isReadOnly) return;
+        setCurrentEditType(type);
+        setPickerType(picker);
+        setError('');
+        setIsOpen(true);
+    }, [
+        isDisabled,
+        isReadOnly
+    ]);
+    const handleConfirm = useCallback(()=>{
+        if (!internalStart || !internalEnd) return void setError(i18n.datePicker.errorBothRequired);
+        if (internalStart > internalEnd) return void setError(i18n.datePicker.errorStartBeforeEnd);
+        setError('');
+        onConfirm({
+            start: internalStart,
+            end: internalEnd
+        });
+        setIsOpen(false);
+    }, [
+        internalStart,
+        internalEnd,
+        onConfirm,
+        i18n
+    ]);
+    const handleClose = useCallback(()=>{
+        setIsOpen(false);
+    }, []);
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsxs(HStack, {
+                gap: 8,
+                ...hStackProps,
+                children: [
+                    /*#__PURE__*/ jsx(UXPressable, {
+                        fill: true,
+                        onPress: ()=>handleOpenModal('start', 'date'),
+                        children: /*#__PURE__*/ jsx(UXInput, {
+                            containerStyle: {
+                                flex: 1
+                            },
+                            editable: false,
+                            isDisabled: isDisabled,
+                            isReadOnly: isReadOnly,
+                            placeholder: displayStartPlaceholder,
+                            pointerEvents: "none",
+                            value: value?.start ? dayjs(value?.start).format(format) : format
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(Icon, {
+                        name: "arrow-right",
+                        color: "tertiary",
+                        size: 16
+                    }),
+                    /*#__PURE__*/ jsx(UXPressable, {
+                        fill: true,
+                        onPress: ()=>handleOpenModal('end', 'date'),
+                        children: /*#__PURE__*/ jsx(UXInput, {
+                            containerStyle: {
+                                flex: 1
+                            },
+                            editable: false,
+                            isDisabled: isDisabled,
+                            isReadOnly: isReadOnly,
+                            placeholder: displayEndPlaceholder,
+                            pointerEvents: "none",
+                            value: value?.end ? dayjs(value?.end).format(format) : format
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(UXModal, {
+                disableCloseBySwipe: true,
+                wrapPortal: true,
+                footer: /*#__PURE__*/ jsxs(VStack, {
+                    fullWidth: true,
+                    gap: 8,
+                    children: [
+                        error && /*#__PURE__*/ jsx(Text, {
+                            color: "danger",
+                            children: error
+                        }),
+                        /*#__PURE__*/ jsx(UXButton, {
+                            fullWidth: true,
+                            color: "primary",
+                            size: "lg",
+                            onPress: handleConfirm,
+                            children: i18n.datePicker.confirm
+                        })
+                    ]
+                }),
+                isOpen: isOpen,
+                scrollViewProps: {
+                    scrollEnabled: false
+                },
+                title: "Time Range",
+                onClose: handleClose,
+                children: /*#__PURE__*/ jsxs(VStack, {
+                    fullWidth: true,
+                    gap: "lg",
+                    children: [
+                        /*#__PURE__*/ jsxs(HStack, {
+                            fullWidth: true,
+                            items: "center",
+                            gap: 8,
+                            children: [
+                                /*#__PURE__*/ jsx(date_button, {
+                                    isSelected: 'start' === currentEditType && 'date' === pickerType,
+                                    text: dayjs(internalStart).format(dateFormat),
+                                    onPress: ()=>handleOpenModal('start', 'date')
+                                }),
+                                showTimePicker && /*#__PURE__*/ jsx(date_button, {
+                                    isSelected: 'start' === currentEditType && 'time' === pickerType,
+                                    text: dayjs(internalStart).format(timeFormat),
+                                    onPress: ()=>handleOpenModal('start', 'time')
+                                }),
+                                /*#__PURE__*/ jsx(Icon, {
+                                    name: "arrow-right",
+                                    color: "tertiary",
+                                    size: 16
+                                }),
+                                /*#__PURE__*/ jsx(date_button, {
+                                    isSelected: 'end' === currentEditType && 'date' === pickerType,
+                                    text: dayjs(internalEnd).format(dateFormat),
+                                    onPress: ()=>handleOpenModal('end', 'date')
+                                }),
+                                showTimePicker && /*#__PURE__*/ jsx(date_button, {
+                                    isSelected: 'end' === currentEditType && 'time' === pickerType,
+                                    text: dayjs(internalEnd).format(timeFormat),
+                                    onPress: ()=>handleOpenModal('end', 'time')
+                                })
+                            ]
+                        }),
+                        'start' === currentEditType && 'date' === pickerType && /*#__PURE__*/ jsx(DateWheelPicker, {
+                            maxDate: maxDate,
+                            minDate: minDate,
+                            selectedDate: internalStart,
+                            onDateChange: setInternalStart
+                        }),
+                        'start' === currentEditType && 'time' === pickerType && /*#__PURE__*/ jsx(TimeWheelPicker, {
+                            selectedDate: internalStart,
+                            onDateChange: setInternalStart
+                        }),
+                        'end' === currentEditType && 'date' === pickerType && /*#__PURE__*/ jsx(DateWheelPicker, {
+                            maxDate: maxDate,
+                            minDate: minDate,
+                            selectedDate: internalEnd,
+                            onDateChange: setInternalEnd
+                        }),
+                        'end' === currentEditType && 'time' === pickerType && /*#__PURE__*/ jsx(TimeWheelPicker, {
+                            selectedDate: internalEnd,
+                            onDateChange: setInternalEnd
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+};
+UXDateRangePicker.displayName = 'UXDateRangePicker';
+export { UXDateRangePicker };

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

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