zkit-ui 1.0.0

package/dist/ui/WheelColumn/index.d.ts

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { type StyleProp, type TextStyle, type ViewProps, type ViewStyle } from 'react-native';
+export { WHEEL_SELECTION_BACKGROUND_COLOR } from './constants';
+export declare const WHEEL_VISIBLE_ITEMS = 5;
+export declare const WHEEL_VIEWPORT_HEIGHT: number;
+export declare const WHEEL_AREA_HEIGHT: number;
+export declare const WHEEL_AREA_VERTICAL_INSET: number;
+export declare const WHEEL_ITEM_HEIGHT: number;
+export type WheelColumnValue = string | number;
+export type WheelColumnOption<TValue extends WheelColumnValue = WheelColumnValue> = {
+    value: TValue;
+    label: string;
+    disabled?: boolean;
+    key?: React.Key;
+    testID?: string;
+    accessibilityLabel?: string;
+};
+export type WheelColumnChangeSource = 'user' | 'accessibility';
+export type WheelColumnChangePayload<TValue extends WheelColumnValue = WheelColumnValue> = {
+    value: TValue;
+    index: number;
+    option: WheelColumnOption<TValue>;
+    source: WheelColumnChangeSource;
+};
+export type WheelColumnHandle = {
+    scrollToIndex: (index: number, animated?: boolean) => void;
+    scrollToValue: (value: WheelColumnValue, animated?: boolean) => void;
+    settleToNearest: (animated?: boolean) => number;
+    syncCurrentSelection: () => Promise<number>;
+};
+type NativeViewProps = Omit<ViewProps, 'children' | 'style' | 'onChange'>;
+export type WheelColumnProps<TValue extends WheelColumnValue = WheelColumnValue> = NativeViewProps & {
+    options: WheelColumnOption<TValue>[];
+    value?: TValue | null;
+    defaultValue?: TValue | null;
+    onChange?: (payload: WheelColumnChangePayload<TValue>) => void;
+    disabled?: boolean;
+    width?: number;
+    style?: StyleProp<ViewStyle>;
+    itemTextStyle?: StyleProp<TextStyle>;
+    selectedItemTextStyle?: StyleProp<TextStyle>;
+    disabledItemTextStyle?: StyleProp<TextStyle>;
+    numberOfLines?: number;
+};
+export type WheelOption<TValue extends WheelColumnValue = WheelColumnValue> = WheelColumnOption<TValue>;
+export declare const WheelColumn: React.NamedExoticComponent<NativeViewProps & {
+    options: WheelColumnOption<WheelColumnValue>[];
+    value?: WheelColumnValue | null | undefined;
+    defaultValue?: WheelColumnValue | null | undefined;
+    onChange?: ((payload: WheelColumnChangePayload<WheelColumnValue>) => void) | undefined;
+    disabled?: boolean;
+    width?: number;
+    style?: StyleProp<ViewStyle>;
+    itemTextStyle?: StyleProp<TextStyle>;
+    selectedItemTextStyle?: StyleProp<TextStyle>;
+    disabledItemTextStyle?: StyleProp<TextStyle>;
+    numberOfLines?: number;
+} & React.RefAttributes<WheelColumnHandle>>;
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/WheelColumn/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/WheelColumn/index.tsx"],"names":[],"mappings":"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"}

package/dist/ui/WheelColumn/index.js

@@ -0,0 +1,547 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WheelColumn = exports.WHEEL_ITEM_HEIGHT = exports.WHEEL_AREA_VERTICAL_INSET = exports.WHEEL_AREA_HEIGHT = exports.WHEEL_VIEWPORT_HEIGHT = exports.WHEEL_VISIBLE_ITEMS = exports.WHEEL_SELECTION_BACKGROUND_COLOR = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
+const react_native_worklets_1 = require("react-native-worklets");
+const zkit_tools_1 = require("zkit-tools");
+const useTheme_1 = require("../../theme/useTheme");
+const ZKitWheelPickerNativeComponent_1 = require("./ZKitWheelPickerNativeComponent");
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "WHEEL_SELECTION_BACKGROUND_COLOR", { enumerable: true, get: function () { return constants_1.WHEEL_SELECTION_BACKGROUND_COLOR; } });
+exports.WHEEL_VISIBLE_ITEMS = 5;
+// iOS 走系统 UIPickerView，Android/Web 走自绘 transform 路径。
+// 这些尺寸是当前 app 端多轮调校后的稳定观感，保留为默认公共规格。
+const IOS_CONFIRM_SYNC_TIMEOUT_MS = 64;
+const IOS_NATIVE_PICKER_HEIGHT = (0, zkit_tools_1.wp)(260);
+const IOS_NATIVE_PICKER_ROW_HEIGHT = (0, zkit_tools_1.wp)(50);
+const IOS_NATIVE_PICKER_FONT_SIZE = (0, zkit_tools_1.sp)(22);
+const BASE_WHEEL_ITEM_HEIGHT = (0, zkit_tools_1.wp)(44);
+const BASE_WHEEL_AREA_HEIGHT = BASE_WHEEL_ITEM_HEIGHT * exports.WHEEL_VISIBLE_ITEMS;
+exports.WHEEL_VIEWPORT_HEIGHT = react_native_1.Platform.OS === 'ios' ? IOS_NATIVE_PICKER_HEIGHT : BASE_WHEEL_AREA_HEIGHT;
+exports.WHEEL_AREA_HEIGHT = react_native_1.Platform.OS === 'ios' ? Math.max(IOS_NATIVE_PICKER_HEIGHT, BASE_WHEEL_AREA_HEIGHT) : BASE_WHEEL_AREA_HEIGHT;
+exports.WHEEL_AREA_VERTICAL_INSET = Math.max(0, exports.WHEEL_AREA_HEIGHT - exports.WHEEL_VIEWPORT_HEIGHT) / 2;
+exports.WHEEL_ITEM_HEIGHT = react_native_1.Platform.OS === 'ios' ? IOS_NATIVE_PICKER_HEIGHT / exports.WHEEL_VISIBLE_ITEMS : BASE_WHEEL_ITEM_HEIGHT;
+const CENTER_OFFSET = exports.WHEEL_ITEM_HEIGHT * Math.floor(exports.WHEEL_VISIBLE_ITEMS / 2);
+const IOS_SETTLE_DELAY_MS = 90;
+const SNAP_DURATION_MIN = 140;
+const SNAP_DURATION_MAX = 280;
+const SNAP_DURATION_PER_ITEM = 24;
+const RELEASE_VELOCITY_DEADZONE = 220;
+const RELEASE_LOCK_DISTANCE_ITEMS = 0.1;
+const RELEASE_LOCK_MAX_VELOCITY = 380;
+const MAX_FLING_ITEMS = 7;
+const ANDROID_VELOCITY_WINDOW_MS = 90;
+const SNAP_EASING = react_native_reanimated_1.Easing.bezier(0.22, 1, 0.36, 1);
+function clampNumber(n, min, max) {
+    'worklet';
+    return Math.max(min, Math.min(max, n));
+}
+function indexToOffset(index) {
+    'worklet';
+    return index * exports.WHEEL_ITEM_HEIGHT;
+}
+function getReleaseDeltaItems(velocityY) {
+    const speed = Math.abs(velocityY);
+    if (speed < RELEASE_VELOCITY_DEADZONE)
+        return 0;
+    const projected = Math.pow(speed / 1400, 1.05) * 3.6;
+    return clampNumber(projected, 0, MAX_FLING_ITEMS);
+}
+function getTargetIndexFromRelease(offset, velocityY, maxIndex) {
+    const currentIndexFloat = offset / exports.WHEEL_ITEM_HEIGHT;
+    const nearestIndex = Math.round(currentIndexFloat);
+    const distanceToNearest = Math.abs(currentIndexFloat - nearestIndex);
+    const speed = Math.abs(velocityY);
+    if (speed < RELEASE_VELOCITY_DEADZONE) {
+        return clampNumber(nearestIndex, 0, maxIndex);
+    }
+    if (distanceToNearest < RELEASE_LOCK_DISTANCE_ITEMS && speed < RELEASE_LOCK_MAX_VELOCITY) {
+        return clampNumber(nearestIndex, 0, maxIndex);
+    }
+    const deltaItems = getReleaseDeltaItems(velocityY);
+    if (deltaItems <= 0) {
+        return clampNumber(nearestIndex, 0, maxIndex);
+    }
+    const direction = velocityY < 0 ? 1 : -1;
+    let targetIndex = Math.round(currentIndexFloat + direction * deltaItems);
+    if (targetIndex === nearestIndex) {
+        targetIndex = nearestIndex + direction;
+    }
+    return clampNumber(targetIndex, 0, maxIndex);
+}
+function getSnapDuration(fromOffset, toOffset) {
+    const distanceItems = Math.abs(toOffset - fromOffset) / exports.WHEEL_ITEM_HEIGHT;
+    return clampNumber(Math.round(SNAP_DURATION_MIN + distanceItems * SNAP_DURATION_PER_ITEM), SNAP_DURATION_MIN, SNAP_DURATION_MAX);
+}
+function findOptionIndex(options, value) {
+    if (value == null)
+        return -1;
+    return options.findIndex((option) => Object.is(option.value, value));
+}
+function findNearestEnabledIndex(options, index, direction = 0) {
+    var _a, _b, _c;
+    if (!options.length)
+        return -1;
+    const clampedIndex = clampNumber(Math.round(index), 0, options.length - 1);
+    if (!((_a = options[clampedIndex]) === null || _a === void 0 ? void 0 : _a.disabled))
+        return clampedIndex;
+    const walkForward = () => {
+        var _a;
+        for (let i = clampedIndex + 1; i < options.length; i += 1) {
+            if (!((_a = options[i]) === null || _a === void 0 ? void 0 : _a.disabled))
+                return i;
+        }
+        return -1;
+    };
+    const walkBackward = () => {
+        var _a;
+        for (let i = clampedIndex - 1; i >= 0; i -= 1) {
+            if (!((_a = options[i]) === null || _a === void 0 ? void 0 : _a.disabled))
+                return i;
+        }
+        return -1;
+    };
+    if (direction > 0) {
+        const next = walkForward();
+        return next >= 0 ? next : walkBackward();
+    }
+    if (direction < 0) {
+        const previous = walkBackward();
+        return previous >= 0 ? previous : walkForward();
+    }
+    for (let distance = 1; distance < options.length; distance += 1) {
+        const previous = clampedIndex - distance;
+        if (previous >= 0 && !((_b = options[previous]) === null || _b === void 0 ? void 0 : _b.disabled))
+            return previous;
+        const next = clampedIndex + distance;
+        if (next < options.length && !((_c = options[next]) === null || _c === void 0 ? void 0 : _c.disabled))
+            return next;
+    }
+    return -1;
+}
+function resolveDisplayIndex(options, value) {
+    if (!options.length)
+        return 0;
+    const selectedIndex = findOptionIndex(options, value);
+    if (selectedIndex >= 0)
+        return selectedIndex;
+    const firstEnabledIndex = findNearestEnabledIndex(options, 0);
+    return firstEnabledIndex >= 0 ? firstEnabledIndex : 0;
+}
+function normalizeFontWeight(fontWeight) {
+    if (fontWeight == null)
+        return undefined;
+    return String(fontWeight);
+}
+function normalizeFontStyle(fontStyle) {
+    if (fontStyle == null)
+        return undefined;
+    return fontStyle;
+}
+function optionKey(option, index) {
+    var _a, _b;
+    return (_b = (_a = option.key) !== null && _a !== void 0 ? _a : option.value) !== null && _b !== void 0 ? _b : index;
+}
+function resolveWebInteractionStyle(disabled) {
+    if (react_native_1.Platform.OS !== 'web')
+        return undefined;
+    return {
+        cursor: disabled ? 'not-allowed' : 'grab',
+        touchAction: 'none',
+        userSelect: 'none',
+    };
+}
+const WheelColumnBase = React.forwardRef(function WheelColumn({ options, value, defaultValue, onChange, disabled = false, width, style, itemTextStyle, selectedItemTextStyle, disabledItemTextStyle, numberOfLines = 1, accessibilityLabel, accessibilityHint, accessibilityState, testID, ...viewProps }, ref) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    const theme = (0, useTheme_1.useTheme)();
+    const isControlled = value !== undefined;
+    const firstDefaultValue = React.useMemo(() => {
+        var _a, _b, _c, _d;
+        if (defaultValue != null && findOptionIndex(options, defaultValue) >= 0)
+            return defaultValue;
+        const firstEnabledIndex = findNearestEnabledIndex(options, 0);
+        if (firstEnabledIndex >= 0)
+            return (_b = (_a = options[firstEnabledIndex]) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : null;
+        return (_d = (_c = options[0]) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : null;
+    }, [defaultValue, options]);
+    const [uncontrolledValue, setUncontrolledValue] = React.useState(firstDefaultValue);
+    const resolvedValue = isControlled ? value : uncontrolledValue;
+    const maxIndex = Math.max(0, options.length - 1);
+    const maxOffset = indexToOffset(maxIndex);
+    const displayIndex = resolveDisplayIndex(options, resolvedValue);
+    const offsetY = (0, react_native_reanimated_1.useSharedValue)(indexToOffset(displayIndex));
+    const dragStartOffset = (0, react_native_reanimated_1.useSharedValue)(indexToOffset(displayIndex));
+    const isUserInteracting = (0, react_native_reanimated_1.useSharedValue)(false);
+    const iosPickerRef = React.useRef(null);
+    const iosSelectedIndexRef = React.useRef(displayIndex);
+    const iosSettleTimerRef = React.useRef(null);
+    const iosSyncTimerRef = React.useRef(null);
+    const iosSyncResolverRef = React.useRef(null);
+    const [iosSelectedIndex, setIosSelectedIndex] = React.useState(displayIndex);
+    const selectedValueRef = React.useRef(resolvedValue);
+    const displayIndexRef = React.useRef(displayIndex);
+    const flattenedItemTextStyle = React.useMemo(() => { var _a; return (_a = react_native_1.StyleSheet.flatten(itemTextStyle)) !== null && _a !== void 0 ? _a : {}; }, [itemTextStyle]);
+    const flattenedSelectedItemTextStyle = React.useMemo(() => { var _a; return (_a = react_native_1.StyleSheet.flatten(selectedItemTextStyle)) !== null && _a !== void 0 ? _a : {}; }, [selectedItemTextStyle]);
+    const flattenedDisabledItemTextStyle = React.useMemo(() => { var _a; return (_a = react_native_1.StyleSheet.flatten(disabledItemTextStyle)) !== null && _a !== void 0 ? _a : {}; }, [disabledItemTextStyle]);
+    const selectedTextColor = ((_b = (_a = flattenedSelectedItemTextStyle.color) !== null && _a !== void 0 ? _a : flattenedItemTextStyle.color) !== null && _b !== void 0 ? _b : theme.colors.onSurface);
+    const itemTextColor = ((_c = flattenedItemTextStyle.color) !== null && _c !== void 0 ? _c : theme.colors.muted);
+    const disabledTextColor = ((_d = flattenedDisabledItemTextStyle.color) !== null && _d !== void 0 ? _d : theme.colors.disabled);
+    const nativeFontSize = typeof flattenedSelectedItemTextStyle.fontSize === 'number'
+        ? flattenedSelectedItemTextStyle.fontSize
+        : typeof flattenedItemTextStyle.fontSize === 'number'
+            ? flattenedItemTextStyle.fontSize
+            : IOS_NATIVE_PICKER_FONT_SIZE;
+    const nativeFontWeight = (_f = (_e = normalizeFontWeight(flattenedSelectedItemTextStyle.fontWeight)) !== null && _e !== void 0 ? _e : normalizeFontWeight(flattenedItemTextStyle.fontWeight)) !== null && _f !== void 0 ? _f : '500';
+    const nativeFontFamily = (_g = flattenedSelectedItemTextStyle.fontFamily) !== null && _g !== void 0 ? _g : flattenedItemTextStyle.fontFamily;
+    const nativeFontStyle = (_h = normalizeFontStyle(flattenedSelectedItemTextStyle.fontStyle)) !== null && _h !== void 0 ? _h : normalizeFontStyle(flattenedItemTextStyle.fontStyle);
+    const clearIOSSettleTimer = React.useCallback(() => {
+        if (iosSettleTimerRef.current != null) {
+            clearTimeout(iosSettleTimerRef.current);
+            iosSettleTimerRef.current = null;
+        }
+    }, []);
+    const clearIOSSyncTimer = React.useCallback(() => {
+        if (iosSyncTimerRef.current != null) {
+            clearTimeout(iosSyncTimerRef.current);
+            iosSyncTimerRef.current = null;
+        }
+    }, []);
+    const resolveSelectableIndex = React.useCallback((index, direction = 0) => {
+        const next = findNearestEnabledIndex(options, index, direction);
+        return next >= 0 ? next : clampNumber(Math.round(index), 0, maxIndex);
+    }, [maxIndex, options]);
+    const resolveIOSSyncRequest = React.useCallback((index) => {
+        const resolver = iosSyncResolverRef.current;
+        if (!resolver)
+            return;
+        iosSyncResolverRef.current = null;
+        clearIOSSyncTimer();
+        resolver(resolveSelectableIndex(index));
+    }, [clearIOSSyncTimer, resolveSelectableIndex]);
+    const syncIOSSelectedIndex = React.useCallback((index) => {
+        const nextIndex = clampNumber(index, 0, maxIndex);
+        iosSelectedIndexRef.current = nextIndex;
+        setIosSelectedIndex((previous) => (previous === nextIndex ? previous : nextIndex));
+        return nextIndex;
+    }, [maxIndex]);
+    const emitSelectedIndex = React.useCallback((index, source) => {
+        if (!options.length)
+            return;
+        const nextIndex = resolveSelectableIndex(index, index - displayIndexRef.current);
+        const option = options[nextIndex];
+        if (!option || option.disabled)
+            return;
+        const sameAsCurrent = displayIndexRef.current === nextIndex && Object.is(selectedValueRef.current, option.value);
+        if (sameAsCurrent)
+            return;
+        selectedValueRef.current = option.value;
+        displayIndexRef.current = nextIndex;
+        if (!isControlled) {
+            setUncontrolledValue(option.value);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange({
+            value: option.value,
+            index: nextIndex,
+            option,
+            source,
+        });
+    }, [isControlled, onChange, options, resolveSelectableIndex]);
+    const scheduleIOSSettle = React.useCallback((index) => {
+        clearIOSSettleTimer();
+        iosSettleTimerRef.current = setTimeout(() => {
+            iosSettleTimerRef.current = null;
+            const nextIndex = resolveSelectableIndex(index, index - displayIndexRef.current);
+            if (nextIndex !== index) {
+                syncIOSSelectedIndex(nextIndex);
+            }
+            emitSelectedIndex(nextIndex, 'user');
+        }, IOS_SETTLE_DELAY_MS);
+    }, [clearIOSSettleTimer, emitSelectedIndex, resolveSelectableIndex, syncIOSSelectedIndex]);
+    const scrollToIndex = React.useCallback((index, animated = false) => {
+        const nextIndex = clampNumber(index, 0, maxIndex);
+        if (react_native_1.Platform.OS === 'ios') {
+            clearIOSSettleTimer();
+            syncIOSSelectedIndex(nextIndex);
+            return;
+        }
+        const nextOffset = indexToOffset(nextIndex);
+        (0, react_native_reanimated_1.cancelAnimation)(offsetY);
+        isUserInteracting.value = false;
+        if (animated) {
+            offsetY.value = (0, react_native_reanimated_1.withTiming)(nextOffset, {
+                duration: getSnapDuration(offsetY.value, nextOffset),
+                easing: SNAP_EASING,
+            });
+            return;
+        }
+        offsetY.value = nextOffset;
+    }, [clearIOSSettleTimer, isUserInteracting, maxIndex, offsetY, syncIOSSelectedIndex]);
+    const scrollToValue = React.useCallback((nextValue, animated = false) => {
+        const index = findOptionIndex(options, nextValue);
+        if (index < 0)
+            return;
+        scrollToIndex(index, animated);
+    }, [options, scrollToIndex]);
+    const settleToNearest = React.useCallback((animated = false) => {
+        const rawIndex = react_native_1.Platform.OS === 'ios'
+            ? iosSelectedIndexRef.current
+            : Math.round(clampNumber(offsetY.value, 0, maxOffset) / exports.WHEEL_ITEM_HEIGHT);
+        const nextIndex = resolveSelectableIndex(rawIndex, rawIndex - displayIndexRef.current);
+        scrollToIndex(nextIndex, animated);
+        return nextIndex;
+    }, [maxOffset, offsetY, resolveSelectableIndex, scrollToIndex]);
+    const syncCurrentSelection = React.useCallback(() => {
+        if (react_native_1.Platform.OS !== 'ios') {
+            return Promise.resolve(settleToNearest(false));
+        }
+        clearIOSSettleTimer();
+        resolveIOSSyncRequest(iosSelectedIndexRef.current);
+        return new Promise((resolve) => {
+            iosSyncResolverRef.current = resolve;
+            if (iosPickerRef.current != null && (0, ZKitWheelPickerNativeComponent_1.syncZKitWheelPickerCurrentSelection)(iosPickerRef.current)) {
+                iosSyncTimerRef.current = setTimeout(() => {
+                    resolveIOSSyncRequest(iosSelectedIndexRef.current);
+                }, IOS_CONFIRM_SYNC_TIMEOUT_MS);
+                return;
+            }
+            resolveIOSSyncRequest(iosSelectedIndexRef.current);
+        });
+    }, [clearIOSSettleTimer, resolveIOSSyncRequest, settleToNearest]);
+    React.useImperativeHandle(ref, () => ({ scrollToIndex, scrollToValue, settleToNearest, syncCurrentSelection }), [scrollToIndex, scrollToValue, settleToNearest, syncCurrentSelection]);
+    React.useEffect(() => {
+        selectedValueRef.current = resolvedValue;
+        displayIndexRef.current = displayIndex;
+    }, [displayIndex, resolvedValue]);
+    React.useEffect(() => {
+        var _a, _b;
+        if (isControlled || !options.length)
+            return;
+        if (findOptionIndex(options, uncontrolledValue) >= 0)
+            return;
+        const firstEnabledIndex = findNearestEnabledIndex(options, 0);
+        const nextValue = firstEnabledIndex >= 0 ? (_a = options[firstEnabledIndex]) === null || _a === void 0 ? void 0 : _a.value : (_b = options[0]) === null || _b === void 0 ? void 0 : _b.value;
+        setUncontrolledValue(nextValue !== null && nextValue !== void 0 ? nextValue : null);
+    }, [isControlled, options, uncontrolledValue]);
+    React.useEffect(() => {
+        if (!options.length) {
+            clearIOSSettleTimer();
+            iosSelectedIndexRef.current = 0;
+            setIosSelectedIndex(0);
+            (0, react_native_reanimated_1.cancelAnimation)(offsetY);
+            offsetY.value = 0;
+            return;
+        }
+        clearIOSSettleTimer();
+        syncIOSSelectedIndex(displayIndex);
+        scrollToIndex(displayIndex, false);
+    }, [clearIOSSettleTimer, displayIndex, offsetY, options.length, scrollToIndex, syncIOSSelectedIndex]);
+    React.useEffect(() => () => {
+        clearIOSSettleTimer();
+        resolveIOSSyncRequest(iosSelectedIndexRef.current);
+    }, [clearIOSSettleTimer, resolveIOSSyncRequest]);
+    const handleIOSChange = React.useCallback((event) => {
+        const rawIndex = syncIOSSelectedIndex(event.nativeEvent.newIndex);
+        const nextIndex = resolveSelectableIndex(rawIndex, rawIndex - displayIndexRef.current);
+        resolveIOSSyncRequest(nextIndex);
+        scheduleIOSSettle(nextIndex);
+    }, [resolveIOSSyncRequest, resolveSelectableIndex, scheduleIOSSettle, syncIOSSelectedIndex]);
+    const startInteraction = React.useCallback(() => {
+        (0, react_native_reanimated_1.cancelAnimation)(offsetY);
+        isUserInteracting.value = true;
+        dragStartOffset.value = offsetY.value;
+    }, [dragStartOffset, isUserInteracting, offsetY]);
+    const updateInteraction = React.useCallback((translationY) => {
+        offsetY.value = clampNumber(dragStartOffset.value - translationY, 0, maxOffset);
+    }, [dragStartOffset, maxOffset, offsetY]);
+    const finishInteraction = React.useCallback((velocityY) => {
+        const currentOffset = clampNumber(offsetY.value, 0, maxOffset);
+        const rawIndex = getTargetIndexFromRelease(currentOffset, velocityY, maxIndex);
+        const currentIndex = Math.round(currentOffset / exports.WHEEL_ITEM_HEIGHT);
+        const nextIndex = resolveSelectableIndex(rawIndex, rawIndex - currentIndex);
+        const nextOffset = indexToOffset(nextIndex);
+        offsetY.value = (0, react_native_reanimated_1.withTiming)(nextOffset, {
+            duration: getSnapDuration(currentOffset, nextOffset),
+            easing: SNAP_EASING,
+        }, (finished) => {
+            if (!finished)
+                return;
+            isUserInteracting.value = false;
+            (0, react_native_worklets_1.scheduleOnRN)(emitSelectedIndex, nextIndex, 'user');
+        });
+    }, [emitSelectedIndex, isUserInteracting, maxIndex, maxOffset, offsetY, resolveSelectableIndex]);
+    const touchStateRef = React.useRef({
+        startPageY: 0,
+        samples: [],
+    });
+    const beginTouch = React.useCallback((pageY, timestamp) => {
+        const ts = typeof timestamp === 'number' ? timestamp : Date.now();
+        touchStateRef.current = {
+            startPageY: pageY,
+            samples: [{ pageY, timestamp: ts }],
+        };
+        startInteraction();
+    }, [startInteraction]);
+    const recordTouchSample = React.useCallback((pageY, timestamp) => {
+        var _a;
+        const ts = typeof timestamp === 'number' ? timestamp : Date.now();
+        const { samples } = touchStateRef.current;
+        samples.push({ pageY, timestamp: ts });
+        while (samples.length > 6) {
+            samples.shift();
+        }
+        const minTs = ts - ANDROID_VELOCITY_WINDOW_MS;
+        while (samples.length > 2 && ((_a = samples[0]) === null || _a === void 0 ? void 0 : _a.timestamp) < minTs) {
+            samples.shift();
+        }
+    }, []);
+    const moveTouch = React.useCallback((pageY, timestamp) => {
+        updateInteraction(pageY - touchStateRef.current.startPageY);
+        recordTouchSample(pageY, timestamp);
+    }, [recordTouchSample, updateInteraction]);
+    const endTouch = React.useCallback((pageY, timestamp) => {
+        var _a, _b, _c, _d;
+        recordTouchSample(pageY, timestamp);
+        const { samples } = touchStateRef.current;
+        const firstSample = samples[0];
+        const lastSample = samples[samples.length - 1];
+        const deltaY = ((_a = lastSample === null || lastSample === void 0 ? void 0 : lastSample.pageY) !== null && _a !== void 0 ? _a : pageY) - ((_b = firstSample === null || firstSample === void 0 ? void 0 : firstSample.pageY) !== null && _b !== void 0 ? _b : pageY);
+        const deltaT = Math.max(1, ((_c = lastSample === null || lastSample === void 0 ? void 0 : lastSample.timestamp) !== null && _c !== void 0 ? _c : Date.now()) - ((_d = firstSample === null || firstSample === void 0 ? void 0 : firstSample.timestamp) !== null && _d !== void 0 ? _d : Date.now()));
+        finishInteraction((deltaY / deltaT) * 1000);
+    }, [finishInteraction, recordTouchSample]);
+    const handleAccessibilityAction = React.useCallback((event) => {
+        if (disabled)
+            return;
+        const actionName = event.nativeEvent.actionName;
+        const direction = actionName === 'increment' ? 1 : actionName === 'decrement' ? -1 : 0;
+        if (direction === 0)
+            return;
+        const nextIndex = findNearestEnabledIndex(options, displayIndexRef.current + direction, direction);
+        if (nextIndex < 0)
+            return;
+        scrollToIndex(nextIndex, true);
+        emitSelectedIndex(nextIndex, 'accessibility');
+    }, [disabled, emitSelectedIndex, options, scrollToIndex]);
+    const contentStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
+        transform: [{ translateY: CENTER_OFFSET - offsetY.value }],
+    }));
+    const items = React.useMemo(() => options.map((item, index) => {
+        var _a;
+        return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.itemContainer, children: (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.Text, { accessibilityLabel: (_a = item.accessibilityLabel) !== null && _a !== void 0 ? _a : item.label, maxFontSizeMultiplier: (0, zkit_tools_1.getMaxFontSizeMultiplier)(), numberOfLines: numberOfLines, style: [
+                    styles.itemText,
+                    { color: itemTextColor },
+                    itemTextStyle,
+                    index === displayIndex && [styles.itemTextSelected, { color: selectedTextColor }, selectedItemTextStyle],
+                    item.disabled && [styles.itemTextDisabled, { color: disabledTextColor }, disabledItemTextStyle],
+                ], testID: item.testID, children: item.label }) }, `${String(optionKey(item, index))}-${index}`));
+    }), [
+        disabledItemTextStyle,
+        disabledTextColor,
+        displayIndex,
+        itemTextColor,
+        itemTextStyle,
+        numberOfLines,
+        options,
+        selectedItemTextStyle,
+        selectedTextColor,
+    ]);
+    const nativeItems = React.useMemo(() => options.map((item, index) => {
+        var _a;
+        return ({
+            label: item.label,
+            value: item.value,
+            textColor: item.disabled ? disabledTextColor : undefined,
+            testID: (_a = item.testID) !== null && _a !== void 0 ? _a : `wheel-item-${String(item.value)}-${index}`,
+        });
+    }), [disabledTextColor, options]);
+    const selectedOption = options[displayIndex];
+    const canInteract = !disabled && options.length > 1 && findNearestEnabledIndex(options, displayIndex) >= 0;
+    const columnStyle = React.useMemo(() => [styles.column, width != null && { width }, resolveWebInteractionStyle(disabled), style], [disabled, style, width]);
+    const resolvedAccessibilityState = React.useMemo(() => ({
+        ...accessibilityState,
+        disabled,
+    }), [accessibilityState, disabled]);
+    if (react_native_1.Platform.OS === 'ios') {
+        return ((0, jsx_runtime_1.jsx)(react_native_1.View, { ...viewProps, accessibilityHint: accessibilityHint, accessibilityLabel: accessibilityLabel, accessibilityState: resolvedAccessibilityState, accessibilityValue: { text: (_j = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) !== null && _j !== void 0 ? _j : '' }, style: columnStyle, pointerEvents: canInteract ? 'auto' : 'none', testID: testID, children: (0, jsx_runtime_1.jsx)(ZKitWheelPickerNativeComponent_1.ZKitWheelPicker, { ref: iosPickerRef, items: nativeItems, selectedIndex: iosSelectedIndex, onChange: handleIOSChange, numberOfLines: numberOfLines, rowHeight: IOS_NATIVE_PICKER_ROW_HEIGHT, style: styles.iosPicker, fontFamily: nativeFontFamily, fontSize: nativeFontSize, fontStyle: nativeFontStyle, fontWeight: nativeFontWeight, color: selectedTextColor }) }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { ...viewProps, accessibilityActions: [{ name: 'increment' }, { name: 'decrement' }], accessibilityHint: accessibilityHint, accessibilityLabel: accessibilityLabel, accessibilityRole: "adjustable", accessibilityState: resolvedAccessibilityState, accessibilityValue: { text: (_k = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) !== null && _k !== void 0 ? _k : '' }, collapsable: false, onAccessibilityAction: handleAccessibilityAction, style: columnStyle, testID: testID, children: [(0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [styles.content, contentStyle], pointerEvents: "none", renderToHardwareTextureAndroid: react_native_1.Platform.OS === 'android', shouldRasterizeIOS: false, children: items }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.touchSurface, collapsable: false, pointerEvents: "box-only", onStartShouldSetResponder: () => canInteract, onStartShouldSetResponderCapture: () => canInteract, onMoveShouldSetResponder: () => canInteract, onMoveShouldSetResponderCapture: () => canInteract, onResponderTerminationRequest: () => false, onResponderGrant: (event) => {
+                    beginTouch(event.nativeEvent.pageY, event.nativeEvent.timestamp);
+                }, onResponderMove: (event) => {
+                    moveTouch(event.nativeEvent.pageY, event.nativeEvent.timestamp);
+                }, onResponderRelease: (event) => {
+                    endTouch(event.nativeEvent.pageY, event.nativeEvent.timestamp);
+                }, onResponderTerminate: (event) => {
+                    endTouch(event.nativeEvent.pageY, event.nativeEvent.timestamp);
+                } })] }));
+});
+exports.WheelColumn = React.memo(WheelColumnBase);
+const styles = react_native_1.StyleSheet.create({
+    column: {
+        height: exports.WHEEL_VIEWPORT_HEIGHT,
+        overflow: 'hidden',
+    },
+    iosPicker: {
+        width: '100%',
+        height: IOS_NATIVE_PICKER_HEIGHT,
+    },
+    content: {
+        width: '100%',
+    },
+    touchSurface: {
+        ...react_native_1.StyleSheet.absoluteFillObject,
+        backgroundColor: 'transparent',
+        zIndex: 5,
+    },
+    itemContainer: {
+        height: exports.WHEEL_ITEM_HEIGHT,
+        justifyContent: 'center',
+        alignItems: 'center',
+        paddingHorizontal: (0, zkit_tools_1.wp)(8),
+    },
+    itemText: {
+        fontSize: (0, zkit_tools_1.sp)(18),
+        textAlign: 'center',
+        fontWeight: '500',
+    },
+    itemTextSelected: {
+        opacity: 1,
+    },
+    itemTextDisabled: {
+        opacity: 0.62,
+    },
+});

package/ios/ZKitWheelPicker.h

@@ -0,0 +1,18 @@
+#import <UIKit/UIKit.h>
+
+#import <React/RCTComponent.h>
+
+@interface ZKitWheelPicker : UIPickerView <UIPickerViewDataSource, UIPickerViewDelegate, UIPickerViewAccessibilityDelegate>
+
+@property (nonatomic, copy) NSArray<NSDictionary *> *items;
+@property (nonatomic, assign) NSInteger selectedIndex;
+@property (nonatomic, strong) UIColor *color;
+@property (nonatomic, strong) UIFont *font;
+@property (nonatomic, assign) CGFloat rowHeight;
+@property (nonatomic, assign) NSInteger numberOfLines;
+
+@property (nonatomic, copy) RCTBubblingEventBlock onChange;
+
+- (void)syncCurrentSelection;
+
+@end