@particle-network/ui-native 0.4.2-beta.23 → 0.4.2-beta.24

package/dist/components/UXSlider/constants.d.ts

@@ -0,0 +1,7 @@
+export declare const THUMB_SIZE = 12;
+export declare const THUMB_INNER_SIZE = 8;
+export declare const TRACK_HEIGHT = 2;
+export declare const MARK_SIZE = 4;
+export declare const TOOLTIP_ARROW_SIZE = 6;
+export declare const TOOLTIP_MARGIN_BOTTOM = 4;
+export declare const LABEL_WIDTH = 40;

package/dist/components/UXSlider/constants.js

@@ -0,0 +1,8 @@
+const THUMB_SIZE = 12;
+const THUMB_INNER_SIZE = 8;
+const TRACK_HEIGHT = 2;
+const MARK_SIZE = 4;
+const TOOLTIP_ARROW_SIZE = 6;
+const TOOLTIP_MARGIN_BOTTOM = 4;
+const LABEL_WIDTH = 40;
+export { LABEL_WIDTH, MARK_SIZE, THUMB_INNER_SIZE, THUMB_SIZE, TOOLTIP_ARROW_SIZE, TOOLTIP_MARGIN_BOTTOM, TRACK_HEIGHT };

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

@@ -0,0 +1 @@
+export * from './slider';

package/dist/components/UXSlider/index.js

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

package/dist/components/UXSlider/slider.d.ts

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

package/dist/components/UXSlider/slider.js

@@ -0,0 +1,283 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from "react";
+import { View } from "react-native";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
+import react_native_reanimated, { useAnimatedStyle, useSharedValue } from "react-native-reanimated";
+import { scheduleOnRN } from "react-native-worklets";
+import { useTheme } from "../../hooks/index.js";
+import { Box } from "../layout/index.js";
+import { Text } from "../Text/index.js";
+import { UXPressable } from "../UXPressable/index.js";
+import { LABEL_WIDTH, MARK_SIZE, THUMB_SIZE } from "./constants.js";
+import { useStyles } from "./slider.styles.js";
+const UXSlider = ({ color = 'primary', minValue = 0, maxValue = 100, defaultValue, value: controlledValue, onChange, onChangeEnd, fillOffset, marks, showMarksSteps = true, step, showTooltip, getValue, ...restProps })=>{
+    const { colors } = useTheme();
+    const [trackWidth, setTrackWidth] = useState(0);
+    const [internalValue, setInternalValue] = useState(defaultValue ?? minValue);
+    const [isDragging, setIsDragging] = useState(false);
+    const [tooltipWidth, setTooltipWidth] = useState(0);
+    const styles = useStyles({
+        color
+    });
+    let currentValue = void 0 !== controlledValue ? Math.max(minValue, Math.min(maxValue, controlledValue)) : internalValue;
+    if (!Number.isFinite(currentValue)) currentValue = fillOffset ?? minValue;
+    const thumbX = useSharedValue(0);
+    const trackWidthShared = useSharedValue(0);
+    const valueToPosition = useCallback((val)=>{
+        if (0 === trackWidth) return THUMB_SIZE / 2;
+        const usableWidth = trackWidth - THUMB_SIZE;
+        return THUMB_SIZE / 2 + (val - minValue) / (maxValue - minValue) * usableWidth;
+    }, [
+        trackWidth,
+        minValue,
+        maxValue
+    ]);
+    const valueToMarkThumbPosition = useCallback((val)=>{
+        if (0 === trackWidth) return MARK_SIZE / 2;
+        const usableWidth = trackWidth - MARK_SIZE;
+        return MARK_SIZE / 2 + (val - minValue) / (maxValue - minValue) * usableWidth;
+    }, [
+        trackWidth,
+        minValue,
+        maxValue
+    ]);
+    const positionToValueWorklet = (pos, width)=>{
+        'worklet';
+        if (0 === width) return minValue;
+        const usableWidth = width - THUMB_SIZE;
+        if (usableWidth <= 0) return minValue;
+        const adjustedPos = pos - THUMB_SIZE / 2;
+        const percentage = Math.max(0, Math.min(1, adjustedPos / usableWidth));
+        let val = minValue + percentage * (maxValue - minValue);
+        if (step && step > 0) {
+            val = Math.round(val / step) * step;
+            const decimals = (step.toString().split('.')[1] || '').length;
+            val = Number(val.toFixed(decimals));
+        }
+        return Math.max(minValue, Math.min(maxValue, val));
+    };
+    useEffect(()=>{
+        thumbX.value = valueToPosition(currentValue);
+    }, [
+        currentValue,
+        valueToPosition,
+        thumbX
+    ]);
+    useEffect(()=>{
+        trackWidthShared.value = trackWidth;
+    }, [
+        trackWidth,
+        trackWidthShared
+    ]);
+    const setDraggingTrue = useCallback(()=>setIsDragging(true), []);
+    const setDraggingFalse = useCallback(()=>setIsDragging(false), []);
+    const handleValueChange = useCallback((newValue)=>{
+        if (void 0 === controlledValue) setInternalValue(newValue);
+        onChange?.(newValue);
+    }, [
+        controlledValue,
+        onChange
+    ]);
+    const handleChangeEnd = useCallback((finalValue)=>{
+        onChangeEnd?.(finalValue);
+    }, [
+        onChangeEnd
+    ]);
+    const panGesture = Gesture.Pan().activeOffsetX([
+        -8,
+        8
+    ]).failOffsetY([
+        -16,
+        16
+    ]).onStart((event)=>{
+        'worklet';
+        scheduleOnRN(setDraggingTrue);
+        const minPos = THUMB_SIZE / 2;
+        const maxPos = trackWidthShared.value - THUMB_SIZE / 2;
+        const touchX = Math.max(minPos, Math.min(event.x, maxPos));
+        thumbX.value = touchX;
+    }).onUpdate((event)=>{
+        'worklet';
+        const minPos = THUMB_SIZE / 2;
+        const maxPos = trackWidthShared.value - THUMB_SIZE / 2;
+        const touchX = Math.max(minPos, Math.min(event.x, maxPos));
+        thumbX.value = touchX;
+        const newValue = positionToValueWorklet(touchX, trackWidthShared.value);
+        scheduleOnRN(handleValueChange, newValue);
+    }).onEnd(()=>{
+        'worklet';
+        scheduleOnRN(setDraggingFalse);
+        const finalValue = positionToValueWorklet(thumbX.value, trackWidthShared.value);
+        scheduleOnRN(handleChangeEnd, finalValue);
+    });
+    const tapGesture = Gesture.Tap().onEnd((event)=>{
+        'worklet';
+        if (event.y > THUMB_SIZE) return;
+        const minPos = THUMB_SIZE / 2;
+        const maxPos = trackWidthShared.value - THUMB_SIZE / 2;
+        const touchX = Math.max(minPos, Math.min(event.x, maxPos));
+        thumbX.value = touchX;
+        const newValue = positionToValueWorklet(touchX, trackWidthShared.value);
+        scheduleOnRN(handleValueChange, newValue);
+        scheduleOnRN(handleChangeEnd, newValue);
+    });
+    const gesture = Gesture.Simultaneous(panGesture, tapGesture);
+    const labelBlockerGesture = Gesture.Native();
+    const thumbAnimatedStyle = useAnimatedStyle(()=>({
+            transform: [
+                {
+                    translateX: thumbX.value - THUMB_SIZE / 2
+                }
+            ]
+        }));
+    const fillAnimatedStyle = useAnimatedStyle(()=>{
+        if (void 0 !== fillOffset) {
+            const offsetPos = (fillOffset - minValue) / (maxValue - minValue) * trackWidthShared.value;
+            const currentPos = thumbX.value;
+            return currentPos >= offsetPos ? {
+                left: offsetPos,
+                width: currentPos - offsetPos
+            } : {
+                left: currentPos,
+                width: offsetPos - currentPos
+            };
+        }
+        return {
+            left: 0,
+            width: thumbX.value
+        };
+    });
+    const tooltipAnimatedStyle = useAnimatedStyle(()=>{
+        const left = thumbX.value - tooltipWidth / 2;
+        const clampedLeft = Math.max(0, Math.min(trackWidthShared.value - tooltipWidth, left));
+        return {
+            transform: [
+                {
+                    translateX: clampedLeft
+                }
+            ]
+        };
+    });
+    const getTooltipText = useCallback(()=>{
+        if (getValue) return getValue(currentValue);
+        return currentValue.toString();
+    }, [
+        currentValue,
+        getValue
+    ]);
+    const handleTrackLayout = (event)=>setTrackWidth(event.nativeEvent.layout.width);
+    const handleTooltipLayout = (event)=>setTooltipWidth(event.nativeEvent.layout.width);
+    const handleMarkLabelPress = useCallback((markValue)=>{
+        setIsDragging(false);
+        thumbX.value = valueToPosition(markValue);
+        handleValueChange(markValue);
+        handleChangeEnd(markValue);
+    }, [
+        thumbX,
+        valueToPosition,
+        handleValueChange,
+        handleChangeEnd
+    ]);
+    return /*#__PURE__*/ jsx(Box, {
+        fullWidth: true,
+        ph: marks && marks.length > 0 && marks.some((mark)=>mark.value === maxValue) ? LABEL_WIDTH / 2 : 0,
+        ...restProps,
+        children: /*#__PURE__*/ jsx(GestureDetector, {
+            gesture: gesture,
+            children: /*#__PURE__*/ jsxs(react_native_reanimated.View, {
+                style: styles.gestureWrapper,
+                children: [
+                    /*#__PURE__*/ jsxs(View, {
+                        style: styles.trackContainer,
+                        onLayout: handleTrackLayout,
+                        children: [
+                            showTooltip && isDragging && /*#__PURE__*/ jsx(react_native_reanimated.View, {
+                                style: [
+                                    styles.tooltipWrapper,
+                                    tooltipAnimatedStyle
+                                ],
+                                pointerEvents: "none",
+                                onLayout: handleTooltipLayout,
+                                children: /*#__PURE__*/ jsxs(View, {
+                                    style: styles.tooltip,
+                                    children: [
+                                        /*#__PURE__*/ jsx(Text, {
+                                            children: getTooltipText()
+                                        }),
+                                        /*#__PURE__*/ jsx(View, {
+                                            style: styles.tooltipArrow
+                                        })
+                                    ]
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(Box, {
+                                style: styles.track
+                            }),
+                            /*#__PURE__*/ jsx(react_native_reanimated.View, {
+                                style: [
+                                    styles.fill,
+                                    fillAnimatedStyle
+                                ]
+                            }),
+                            showMarksSteps && marks?.map((mark, index)=>{
+                                const markPos = valueToMarkThumbPosition(mark.value);
+                                const isActive = void 0 !== fillOffset ? currentValue >= fillOffset && mark.value <= currentValue && mark.value >= fillOffset || currentValue < fillOffset && mark.value >= currentValue && mark.value <= fillOffset : mark.value <= currentValue;
+                                return /*#__PURE__*/ jsx(View, {
+                                    style: [
+                                        styles.mark,
+                                        {
+                                            left: markPos - MARK_SIZE / 2,
+                                            backgroundColor: isActive ? colors[color] : colors.tertiary
+                                        }
+                                    ]
+                                }, index);
+                            }),
+                            /*#__PURE__*/ jsx(react_native_reanimated.View, {
+                                style: [
+                                    styles.thumb,
+                                    thumbAnimatedStyle
+                                ]
+                            })
+                        ]
+                    }),
+                    marks && marks.length > 0 && /*#__PURE__*/ jsx(GestureDetector, {
+                        gesture: labelBlockerGesture,
+                        children: /*#__PURE__*/ jsx(View, {
+                            style: styles.labelsContainer,
+                            children: marks.map((mark, index)=>{
+                                const isActive = void 0 !== fillOffset ? currentValue >= fillOffset && mark.value <= currentValue && mark.value >= fillOffset || currentValue < fillOffset && mark.value >= currentValue && mark.value <= fillOffset : mark.value <= currentValue;
+                                return /*#__PURE__*/ jsx(UXPressable, {
+                                    center: true,
+                                    style: [
+                                        styles.markLabelWrapper,
+                                        {
+                                            left: valueToMarkThumbPosition(mark.value) - LABEL_WIDTH / 2
+                                        }
+                                    ],
+                                    hitSlop: {
+                                        top: 8,
+                                        bottom: 8,
+                                        left: 8,
+                                        right: 8
+                                    },
+                                    onPress: ()=>handleMarkLabelPress(mark.value),
+                                    children: /*#__PURE__*/ jsx(Text, {
+                                        caption1: true,
+                                        style: [
+                                            {
+                                                color: isActive ? colors.foreground : colors.secondary
+                                            }
+                                        ],
+                                        numberOfLines: 1,
+                                        children: mark.label
+                                    })
+                                }, index);
+                            })
+                        })
+                    })
+                ]
+            })
+        })
+    });
+};
+export { UXSlider };

package/dist/components/UXSlider/slider.styles.d.ts

@@ -0,0 +1,92 @@
+import type { UXSliderProps } from './slider.types';
+export declare const useStyles: ({ color }: UXSliderProps) => {
+    gestureWrapper: {
+        width: "100%";
+    };
+    trackContainer: {
+        width: "100%";
+        justifyContent: "center";
+        position: "relative";
+        height: number;
+    };
+    track: {
+        width: "100%";
+        borderRadius: number;
+        position: "absolute";
+        backgroundColor: string;
+        height: number;
+    };
+    fill: {
+        position: "absolute";
+        borderRadius: number;
+        backgroundColor: string;
+        height: number;
+    };
+    mark: {
+        position: "absolute";
+        width: number;
+        height: number;
+        top: "50%";
+        marginTop: number;
+        borderRadius: number;
+    };
+    thumb: {
+        alignItems: "center";
+        justifyContent: "center";
+        position: "absolute";
+        top: "50%";
+        marginTop: number;
+        width: number;
+        height: number;
+        borderRadius: number;
+        shadowColor: string;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+        backgroundColor: string;
+    };
+    labelsContainer: {
+        width: "100%";
+        height: number;
+        marginTop: number;
+        position: "relative";
+    };
+    markLabelWrapper: {
+        position: "absolute";
+        width: number;
+        overflow: "visible";
+    };
+    tooltipWrapper: {
+        position: "absolute";
+        left: number;
+        top: number;
+        justifyContent: "center";
+        alignItems: "center";
+        zIndex: number;
+    };
+    tooltip: {
+        position: "absolute";
+        paddingHorizontal: number;
+        paddingVertical: number;
+        borderRadius: number;
+        alignItems: "center";
+        backgroundColor: string;
+        bottom: number;
+    };
+    tooltipArrow: {
+        position: "absolute";
+        bottom: number;
+        width: number;
+        height: number;
+        borderLeftWidth: number;
+        borderRightWidth: number;
+        borderTopWidth: number;
+        borderLeftColor: string;
+        borderRightColor: string;
+        borderTopColor: string;
+    };
+};

package/dist/components/UXSlider/slider.styles.js

@@ -0,0 +1,100 @@
+import { StyleSheet } from "react-native";
+import { useTheme } from "../../hooks/index.js";
+import { LABEL_WIDTH, MARK_SIZE, THUMB_SIZE, TOOLTIP_ARROW_SIZE, TOOLTIP_MARGIN_BOTTOM, TRACK_HEIGHT } from "./constants.js";
+const useStyles = ({ color })=>{
+    const { colors } = useTheme();
+    const colorValue = colors[color];
+    const styles = StyleSheet.create({
+        gestureWrapper: {
+            width: '100%'
+        },
+        trackContainer: {
+            width: '100%',
+            justifyContent: 'center',
+            position: 'relative',
+            height: THUMB_SIZE
+        },
+        track: {
+            width: '100%',
+            borderRadius: TRACK_HEIGHT / 2,
+            position: 'absolute',
+            backgroundColor: colors['bg-200'],
+            height: TRACK_HEIGHT
+        },
+        fill: {
+            position: 'absolute',
+            borderRadius: TRACK_HEIGHT / 2,
+            backgroundColor: colorValue,
+            height: TRACK_HEIGHT
+        },
+        mark: {
+            position: 'absolute',
+            width: MARK_SIZE,
+            height: MARK_SIZE,
+            top: '50%',
+            marginTop: -MARK_SIZE / 2,
+            borderRadius: 999
+        },
+        thumb: {
+            alignItems: 'center',
+            justifyContent: 'center',
+            position: 'absolute',
+            top: '50%',
+            marginTop: -THUMB_SIZE / 2,
+            width: THUMB_SIZE,
+            height: THUMB_SIZE,
+            borderRadius: 999,
+            shadowColor: '#000',
+            shadowOffset: {
+                width: 0,
+                height: 2
+            },
+            shadowOpacity: 0.1,
+            shadowRadius: 3,
+            elevation: 3,
+            backgroundColor: colorValue
+        },
+        labelsContainer: {
+            width: '100%',
+            height: 14,
+            marginTop: 6,
+            position: 'relative'
+        },
+        markLabelWrapper: {
+            position: 'absolute',
+            width: LABEL_WIDTH,
+            overflow: 'visible'
+        },
+        tooltipWrapper: {
+            position: 'absolute',
+            left: 0,
+            top: 0,
+            justifyContent: 'center',
+            alignItems: 'center',
+            zIndex: 100
+        },
+        tooltip: {
+            position: 'absolute',
+            paddingHorizontal: 12,
+            paddingVertical: 6,
+            borderRadius: 6,
+            alignItems: 'center',
+            backgroundColor: colorValue,
+            bottom: THUMB_SIZE / 2 + TOOLTIP_MARGIN_BOTTOM
+        },
+        tooltipArrow: {
+            position: 'absolute',
+            bottom: -TOOLTIP_ARROW_SIZE + 1,
+            width: 0,
+            height: 0,
+            borderLeftWidth: TOOLTIP_ARROW_SIZE,
+            borderRightWidth: TOOLTIP_ARROW_SIZE,
+            borderTopWidth: TOOLTIP_ARROW_SIZE,
+            borderLeftColor: 'transparent',
+            borderRightColor: 'transparent',
+            borderTopColor: colorValue
+        }
+    });
+    return styles;
+};
+export { useStyles };

package/dist/components/UXSlider/slider.types.d.ts

@@ -0,0 +1,30 @@
+import type { UXForegroundColor } from '@particle-network/ui-shared';
+import type { BoxProps } from '../layout';
+export interface UXSliderProps extends BoxProps {
+    color?: Exclude<UXForegroundColor, 'default' | 'white'>;
+    minValue?: number;
+    maxValue?: number;
+    defaultValue?: number;
+    value?: number;
+    onChange?: (value: number) => void;
+    onChangeEnd?: (value: number) => void;
+    /**
+     * 起始填充的偏移量
+     */
+    fillOffset?: number;
+    /**
+     * 滑杆底部标记点
+     */
+    marks?: {
+        value: number;
+        label: string;
+    }[];
+    /** 是否显示滑杆上标记记点 */
+    showMarksSteps?: boolean;
+    /** 拖动步长 */
+    step?: number;
+    /** 拖动时是否显示气泡提示框 */
+    showTooltip?: boolean;
+    /** 格式化 value，用于显示 tooltip 的文本 */
+    getValue?: (value: number) => string;
+}

package/dist/components/index.d.ts

@@ -13,6 +13,7 @@ export * from './UXListBox';
 export * from './UXModal';
 export * from './UXPressable';
 export * from './UXRadio';
+export * from './UXSlider';
 export * from './UXSpinner';
 export * from './UXSwitch';
 export * from './UXTabs';

package/dist/components/index.js

@@ -13,6 +13,7 @@ export * from "./UXListBox/index.js";
 export * from "./UXModal/index.js";
 export * from "./UXPressable/index.js";
 export * from "./UXRadio/index.js";
+export * from "./UXSlider/index.js";
 export * from "./UXSpinner/index.js";
 export * from "./UXSwitch/index.js";
 export * from "./UXTabs/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@particle-network/ui-native",
-  "version": "0.4.2-beta.23",
+  "version": "0.4.2-beta.24",
   "main": "./entry.js",
   "react-native": "./dist/index.js",
   "module": "./dist/index.js",
@@ -89,8 +89,8 @@
     "unfetch": "^4.2.0",
     "vite": "^6.3.5",
     "zustand": "^5.0.8",
-    "@particle-network/lintstaged-config": "0.1.0",
     "@particle-network/icons": "0.4.2-beta.9",
+    "@particle-network/lintstaged-config": "0.1.0",
     "@particle-network/eslint-config": "0.3.0"
   },
   "overrides": {