react-native-system-ui 0.0.5 → 0.0.7

package/dist/es/components/picker/Picker.js

@@ -1,12 +1,596 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { Pressable, Text, View, Platform, StyleSheet } from 'react-native';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Pressable, Text, View, Platform, StyleSheet, ScrollView, PanResponder } from 'react-native';
 import Loading from '../loading';
 import { withAlpha } from '../../utils/color';
-import { isFiniteNumber, isObject, isText } from '../../utils/validate';
+import { isFiniteNumber, isText } from '../../utils/validate';
+import { clamp, isObject, shallowEqualArray } from '../../utils';
 import { usePickerTokens } from './tokens';
-import WheelPicker from './WheelPicker';
-import { findEnabledIndex, normalizePicker, prepareColumns, shallowEqualArray, toArrayValue } from './utils';
+export const toArrayValue = value => {
+  if (Array.isArray(value)) return value.filter(v => v !== undefined && v !== null);
+  if (value === undefined || value === null) return [];
+  return [value];
+};
+const isColumnWithOptions = col => !!col && isObject(col) && 'options' in col && Array.isArray(col.options);
+const hasChildren = option => {
+  return !!option && isObject(option) && Array.isArray(option.children) && option.children.length > 0;
+};
+export const findEnabledIndex = (options, startIndex) => {
+  if (!options.length) return -1;
+  const clampIndex = Math.min(Math.max(startIndex, 0), options.length - 1);
+  if (!options[clampIndex]?.disabled) return clampIndex;
+  for (let i = clampIndex + 1; i < options.length; i += 1) {
+    if (!options[i]?.disabled) return i;
+  }
+  for (let i = clampIndex - 1; i >= 0; i -= 1) {
+    if (!options[i]?.disabled) return i;
+  }
+  return -1;
+};
+const normalizeMultiple = (columnsList, defaults, rawValue) => {
+  const values = [];
+  const options = [];
+  columnsList.forEach((opts, index) => {
+    const current = rawValue[index];
+    const defaultIndex = defaults[index] !== undefined ? opts.findIndex(item => item.value === defaults[index]) : -1;
+    const currentIndex = opts.findIndex(item => item.value === current);
+    const startIndex = currentIndex >= 0 ? currentIndex : defaultIndex >= 0 ? defaultIndex : 0;
+    const targetIndex = findEnabledIndex(opts, startIndex);
+    const target = targetIndex >= 0 ? opts[targetIndex] : undefined;
+    const valid = currentIndex >= 0 && !opts[currentIndex]?.disabled;
+    values[index] = valid ? current : target?.value ?? defaults[index] ?? opts[0]?.value;
+    options[index] = target;
+  });
+  return {
+    columns: columnsList,
+    values,
+    options
+  };
+};
+const normalizeCascade = (rootOptions, rawValue) => {
+  const columns = [];
+  const values = [];
+  const options = [];
+  let currentOptions = rootOptions;
+  let depth = 0;
+  while (currentOptions && currentOptions.length && depth < 10) {
+    columns.push(currentOptions);
+    const current = rawValue[depth];
+    const startIndex = currentOptions.findIndex(item => item.value === current || String(item.value) === String(current));
+    const targetIndex = findEnabledIndex(currentOptions, startIndex >= 0 ? startIndex : 0);
+    const target = targetIndex >= 0 ? currentOptions[targetIndex] : currentOptions[0];
+    values[depth] = target?.value;
+    options[depth] = target;
+    if (target && hasChildren(target)) {
+      currentOptions = target.children;
+      depth += 1;
+    } else {
+      break;
+    }
+  }
+  return {
+    columns,
+    values,
+    options
+  };
+};
+export const prepareColumns = (columnsInput = []) => {
+  if (!Array.isArray(columnsInput) || columnsInput.length === 0) {
+    return {
+      type: 'single',
+      columnsList: [],
+      defaults: [],
+      cascadeRoot: []
+    };
+  }
+  const everyPlainOption = columnsInput.every(item => !Array.isArray(item) && !isColumnWithOptions(item));
+  const cascade = everyPlainOption && columnsInput.some(item => hasChildren(item));
+  if (cascade) {
+    return {
+      type: 'cascade',
+      columnsList: [],
+      defaults: [],
+      cascadeRoot: columnsInput
+    };
+  }
+  const asArray = columnsInput;
+  const columnsList = [];
+  const defaults = [];
+  const treatAsSingleColumn = everyPlainOption && !cascade;
+  if (treatAsSingleColumn) {
+    columnsList.push(columnsInput);
+    defaults.push(undefined);
+  } else {
+    asArray.forEach(col => {
+      if (Array.isArray(col)) {
+        columnsList.push(col);
+        defaults.push(undefined);
+      } else if (isColumnWithOptions(col)) {
+        const c = col;
+        columnsList.push(c.options ?? []);
+        defaults.push(c.defaultValue);
+      }
+    });
+  }
+  return {
+    type: 'multiple',
+    columnsList,
+    defaults
+  };
+};
+export const normalizePicker = (prepared, rawValueInput = []) => {
+  const rawValue = Array.isArray(rawValueInput) ? rawValueInput : [];
+  if (prepared.type === 'cascade' && prepared.cascadeRoot?.length) {
+    return normalizeCascade(prepared.cascadeRoot, rawValue);
+  }
+  return normalizeMultiple(prepared.columnsList, prepared.defaults, rawValue);
+};
+const wheelStyles = StyleSheet.create({
+  column: {
+    flex: 1
+  },
+  option: {
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  indicator: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    zIndex: 3
+  }
+});
+const WheelPickerItemInner = ({
+  item,
+  index,
+  itemHeight,
+  active,
+  disabled,
+  renderItem
+}) => {
+  const content = renderItem(item, index, {
+    active,
+    disabled
+  });
+  return /*#__PURE__*/React.createElement(View, {
+    style: [wheelStyles.option, {
+      height: itemHeight
+    }]
+  }, content);
+};
+const WheelPickerItem = /*#__PURE__*/React.memo(WheelPickerItemInner, (prev, next) => prev.item === next.item && prev.index === next.index && prev.itemHeight === next.itemHeight && prev.active === next.active && prev.disabled === next.disabled && prev.renderItem === next.renderItem);
+const getVelocityBucket = velocity => {
+  const abs = Math.abs(velocity);
+  if (abs > 1.2) return 2;
+  if (abs > 0.6) return 1;
+  return 0;
+};
+const adjustIndex = (index, options) => {
+  const total = options.length;
+  if (!total) return 0;
+  const i = clamp(index, 0, total - 1);
+  const next = findEnabledIndex(options, i);
+  return next >= 0 ? next : i;
+};
+const indexToOffset = (index, itemHeight) => -index * itemHeight;
+const offsetToIndex = (offset, itemHeight, total, options) => {
+  const minOffset = -Math.max(0, total - 1) * itemHeight;
+  const off = clamp(offset, minOffset, 0);
+  let index = Math.round(-off / itemHeight);
+  index = adjustIndex(index, options);
+  const snapOffset = indexToOffset(index, itemHeight);
+  return {
+    index,
+    snapOffset
+  };
+};
+const shouldMomentum = (distance, duration) => duration < 500 && Math.abs(distance) > 8;
+const momentumTarget = (distance, duration, currentOffset, itemHeight, minOffset) => {
+  const speed = Math.abs(distance / duration);
+  const extra = speed / 0.0025 * (distance < 0 ? -1 : 1);
+  const target = clamp(currentOffset + extra, minOffset, 0);
+  const snapIndex = Math.round(-target / itemHeight);
+  return indexToOffset(snapIndex, itemHeight);
+};
+const WheelPickerInner = ({
+  data,
+  selectedIndex,
+  onChange,
+  onInteractStart,
+  onInteractEnd,
+  renderItem,
+  itemHeight,
+  visibleRest,
+  readOnly,
+  indicatorColor,
+  decelerationRate = Platform.select({
+    ios: 0.9985,
+    android: 0.995,
+    default: 0.995
+  }) ?? 'normal',
+  scrollEventThrottle = 16,
+  swipeDuration = 300
+}) => {
+  const isWeb = Platform.OS === 'web';
+  const listRef = useRef(null);
+  const scrollRef = useRef(null);
+  const spacerHeight = visibleRest * itemHeight;
+  const total = data.length;
+  const maxIndex = Math.max(0, total - 1);
+  const minOffset = -maxIndex * itemHeight;
+  const containerHeight = itemHeight * (visibleRest * 2 + 1);
+  const rawSelectedIndex = clamp(selectedIndex, 0, maxIndex);
+  const enabledSelectedIndex = findEnabledIndex(data, rawSelectedIndex);
+  const safeSelectedIndex = enabledSelectedIndex >= 0 ? enabledSelectedIndex : rawSelectedIndex;
+  const visibleCount = visibleRest * 2 + 1;
+  const effectiveScrollThrottle = total > visibleCount * 20 ? 32 : scrollEventThrottle;
+  const webVirtualEnabled = total > visibleCount * 4;
+  const Spacer = useCallback(() => /*#__PURE__*/React.createElement(View, {
+    style: {
+      height: spacerHeight
+    }
+  }), [spacerHeight]);
+  const indicatorStyle = useMemo(() => [wheelStyles.indicator, {
+    height: itemHeight,
+    top: itemHeight * visibleRest,
+    borderColor: indicatorColor
+  }], [itemHeight, visibleRest, indicatorColor]);
+  const dragEndTimerRef = useRef(null);
+  const momentumRef = useRef(false);
+  const lastOffsetRef = useRef(0);
+  const clearDragEndTimer = useCallback(() => {
+    if (dragEndTimerRef.current) {
+      clearTimeout(dragEndTimerRef.current);
+      dragEndTimerRef.current = null;
+    }
+  }, []);
+  const emitIndexFromOffset = useCallback((offsetY, animated) => {
+    if (readOnly) return;
+    const {
+      index,
+      snapOffset
+    } = offsetToIndex(-offsetY, itemHeight, total, data);
+    const nextOffset = -snapOffset;
+    if (Math.abs(nextOffset - offsetY) > 0.5) {
+      listRef.current?.scrollToOffset({
+        offset: nextOffset,
+        animated
+      });
+    }
+    onChange(index);
+  }, [data, itemHeight, onChange, readOnly, total]);
+  useEffect(() => {
+    const offset = safeSelectedIndex * itemHeight;
+    if (isWeb) return;
+    scrollRef.current?.scrollTo({
+      y: offset,
+      animated: false
+    });
+  }, [isWeb, itemHeight, safeSelectedIndex]);
+  const [webOffset, setWebOffset] = useState(() => indexToOffset(safeSelectedIndex, itemHeight));
+  const webOffsetRef = useRef(webOffset);
+  const startOffsetRef = useRef(0);
+  const startTimeRef = useRef(0);
+  const [webTransition, setWebTransition] = useState(0);
+  const [webVelocityBucket, setWebVelocityBucket] = useState(0);
+  const webVelocityBucketRef = useRef(0);
+  const lastWheelTimeRef = useRef(null);
+  const wheelDeltaRef = useRef(0);
+  const wheelRafRef = useRef(null);
+  const pendingIndexRef = useRef(null);
+  const pendingTimerRef = useRef(null);
+  const rafIdRef = useRef(null);
+  const isInteractingRef = useRef(false);
+  const notifyInteractStart = useCallback(() => {
+    if (readOnly) return;
+    if (isInteractingRef.current) return;
+    isInteractingRef.current = true;
+    onInteractStart?.();
+  }, [onInteractStart, readOnly]);
+  const notifyInteractEnd = useCallback(() => {
+    if (!isInteractingRef.current) return;
+    isInteractingRef.current = false;
+    onInteractEnd?.();
+  }, [onInteractEnd]);
+  const stopRaf = useCallback(() => {
+    if (rafIdRef.current != null && typeof cancelAnimationFrame !== 'undefined') {
+      cancelAnimationFrame(rafIdRef.current);
+      rafIdRef.current = null;
+    }
+    if (wheelRafRef.current != null && typeof cancelAnimationFrame !== 'undefined') {
+      cancelAnimationFrame(wheelRafRef.current);
+      wheelRafRef.current = null;
+    }
+  }, []);
+  const clearPendingTimer = useCallback(() => {
+    if (pendingTimerRef.current) {
+      clearTimeout(pendingTimerRef.current);
+      pendingTimerRef.current = null;
+    }
+  }, []);
+  useEffect(() => {
+    return () => {
+      clearDragEndTimer();
+      clearPendingTimer();
+      stopRaf();
+    };
+  }, [clearDragEndTimer, clearPendingTimer, stopRaf]);
+  const setVelocityBucket = useCallback(velocity => {
+    const next = getVelocityBucket(velocity);
+    if (next !== webVelocityBucketRef.current) {
+      webVelocityBucketRef.current = next;
+      setWebVelocityBucket(next);
+    }
+  }, []);
+  const updateWheelVelocity = useCallback(delta => {
+    const now = Date.now();
+    const last = lastWheelTimeRef.current;
+    if (last != null) {
+      const dt = Math.max(1, now - last);
+      setVelocityBucket(delta / dt);
+    }
+    lastWheelTimeRef.current = now;
+  }, [setVelocityBucket]);
+  useEffect(() => {
+    if (!isWeb) return;
+    clearPendingTimer();
+    pendingIndexRef.current = null;
+    setWebTransition(0);
+    const next = indexToOffset(safeSelectedIndex, itemHeight);
+    webOffsetRef.current = next;
+    setWebOffset(next);
+  }, [clearPendingTimer, isWeb, itemHeight, safeSelectedIndex, setWebTransition]);
+  const finalizePendingChange = useCallback(() => {
+    if (readOnly) return;
+    const nextIndex = pendingIndexRef.current;
+    if (nextIndex == null) return;
+    pendingIndexRef.current = null;
+    clearPendingTimer();
+    setWebTransition(0);
+    notifyInteractEnd();
+    onChange(nextIndex);
+  }, [clearPendingTimer, onChange, readOnly, setWebTransition]);
+  const startWebSnap = useCallback(targetIndex => {
+    if (readOnly) return;
+    notifyInteractStart();
+    const clampedIndex = clamp(targetIndex, 0, maxIndex);
+    const targetOffset = indexToOffset(clampedIndex, itemHeight);
+    clearPendingTimer();
+    pendingIndexRef.current = clampedIndex;
+    webOffsetRef.current = targetOffset;
+    setWebTransition(swipeDuration);
+    setWebOffset(targetOffset);
+    if (swipeDuration <= 0) {
+      finalizePendingChange();
+    } else {
+      pendingTimerRef.current = setTimeout(finalizePendingChange, swipeDuration + 80);
+    }
+  }, [clearPendingTimer, finalizePendingChange, itemHeight, maxIndex, readOnly, swipeDuration]);
+  const handleWheel = useCallback(event => {
+    if (readOnly) return;
+    const delta = event.nativeEvent?.deltaY ?? 0;
+    if (!delta) return;
+    wheelDeltaRef.current += delta;
+    if (wheelRafRef.current != null || typeof requestAnimationFrame === 'undefined') {
+      return;
+    }
+    wheelRafRef.current = requestAnimationFrame(() => {
+      wheelRafRef.current = null;
+      const queued = wheelDeltaRef.current;
+      wheelDeltaRef.current = 0;
+      if (!queued) return;
+      updateWheelVelocity(queued);
+      const direction = queued > 0 ? 1 : -1;
+      const {
+        index
+      } = offsetToIndex(webOffsetRef.current, itemHeight, total, data);
+      const nextIndex = clamp(index + direction, 0, maxIndex);
+      startWebSnap(nextIndex);
+    });
+  }, [data, itemHeight, maxIndex, readOnly, startWebSnap, total, updateWheelVelocity]);
+  const webIndex = clamp(Math.round(-webOffset / itemHeight), 0, maxIndex);
+  const webRender = useMemo(() => {
+    if (!isWeb || total <= 0) {
+      return {
+        items: null,
+        topSpacer: null,
+        bottomSpacer: null
+      };
+    }
+    let startIndex = 0;
+    let endIndex = maxIndex;
+    if (webVirtualEnabled) {
+      const baseBuffer = Math.max(visibleCount * 2, 8);
+      const velocityBoost = webVelocityBucket === 2 ? visibleCount * 4 : webVelocityBucket === 1 ? visibleCount * 2 : 0;
+      const buffer = Math.min(baseBuffer + velocityBoost, Math.max(visibleCount * 6, 24));
+      startIndex = clamp(webIndex - buffer, 0, maxIndex);
+      endIndex = clamp(webIndex + buffer, 0, maxIndex);
+    }
+    const items = [];
+    for (let index = startIndex; index <= endIndex; index += 1) {
+      const item = data[index];
+      if (!item) continue;
+      items.push(/*#__PURE__*/React.createElement(WheelPickerItem, {
+        key: `${index}-${String(item.value ?? '')}`,
+        item: item,
+        index: index,
+        itemHeight: itemHeight,
+        active: index === safeSelectedIndex,
+        disabled: !!item.disabled,
+        renderItem: renderItem
+      }));
+    }
+    const topHeight = startIndex * itemHeight;
+    const bottomHeight = (maxIndex - endIndex) * itemHeight;
+    return {
+      items,
+      topSpacer: topHeight > 0 && /*#__PURE__*/React.createElement(View, {
+        style: {
+          height: topHeight
+        }
+      }),
+      bottomSpacer: bottomHeight > 0 && /*#__PURE__*/React.createElement(View, {
+        style: {
+          height: bottomHeight
+        }
+      })
+    };
+  }, [data, isWeb, itemHeight, maxIndex, renderItem, safeSelectedIndex, total, visibleCount, webIndex, webVelocityBucket, webVirtualEnabled]);
+  const webTransform = useMemo(() => ({
+    transform: [{
+      translateY: webOffset
+    }]
+  }), [webOffset]);
+  const webTransitionStyle = useMemo(() => webTransition ? {
+    transitionProperty: 'transform',
+    transitionDuration: `${webTransition}ms`,
+    transitionTimingFunction: 'cubic-bezier(0.23, 1, 0.68, 1)',
+    willChange: 'transform'
+  } : undefined, [webTransition]);
+  const handleWebTransitionEnd = useCallback(event => {
+    const propertyName = event.nativeEvent?.propertyName ?? event.propertyName;
+    if (propertyName && propertyName !== 'transform' && propertyName !== 'webkitTransform') return;
+    finalizePendingChange();
+  }, [finalizePendingChange]);
+  const panResponder = useMemo(() => PanResponder.create({
+    onStartShouldSetPanResponder: () => !readOnly,
+    onMoveShouldSetPanResponder: () => !readOnly,
+    onPanResponderGrant: () => {
+      stopRaf();
+      pendingIndexRef.current = null;
+      notifyInteractStart();
+      setWebTransition(0);
+      startOffsetRef.current = webOffsetRef.current;
+      startTimeRef.current = Date.now();
+    },
+    onPanResponderMove: (_, gesture) => {
+      if (readOnly) return;
+      setVelocityBucket(gesture.vy);
+      const next = clamp(startOffsetRef.current + gesture.dy, minOffset, 0);
+      webOffsetRef.current = next;
+      if (typeof requestAnimationFrame === 'undefined') {
+        setWebOffset(next);
+        return;
+      }
+      if (rafIdRef.current != null) return;
+      rafIdRef.current = requestAnimationFrame(() => {
+        rafIdRef.current = null;
+        setWebOffset(webOffsetRef.current);
+      });
+    },
+    onPanResponderRelease: (_, gesture) => {
+      if (readOnly) return;
+      setVelocityBucket(0);
+      const duration = Date.now() - startTimeRef.current;
+      const distance = gesture.dy;
+      let target = clamp(startOffsetRef.current + distance, minOffset, 0);
+      if (shouldMomentum(distance, duration)) {
+        target = momentumTarget(distance, duration, startOffsetRef.current, itemHeight, minOffset);
+      }
+      const {
+        index
+      } = offsetToIndex(target, itemHeight, total, data);
+      startWebSnap(index);
+    },
+    onPanResponderTerminationRequest: () => false,
+    onPanResponderTerminate: () => {
+      notifyInteractEnd();
+      setWebTransition(0);
+    }
+  }), [data, itemHeight, minOffset, notifyInteractEnd, notifyInteractStart, readOnly, setVelocityBucket, startWebSnap, stopRaf, total]);
+  if (isWeb) {
+    return /*#__PURE__*/React.createElement(View, _extends({
+      style: [wheelStyles.column, {
+        height: containerHeight
+      }, webOnlyStyles.grab],
+      onWheel: handleWheel
+    }, panResponder.panHandlers), /*#__PURE__*/React.createElement(View, {
+      style: indicatorStyle,
+      pointerEvents: "none"
+    }), /*#__PURE__*/React.createElement(View, {
+      style: [webTransform, isWeb ? webTransitionStyle : undefined],
+      onTransitionEnd: handleWebTransitionEnd
+    }, /*#__PURE__*/React.createElement(Spacer, null), webRender.topSpacer, webRender.items, webRender.bottomSpacer, /*#__PURE__*/React.createElement(Spacer, null)));
+  }
+  const shouldCapture = !readOnly;
+  const contentContainerStyle = useMemo(() => ({
+    paddingVertical: spacerHeight
+  }), [spacerHeight]);
+  return /*#__PURE__*/React.createElement(View, {
+    style: [wheelStyles.column, {
+      height: containerHeight
+    }],
+    collapsable: false
+  }, /*#__PURE__*/React.createElement(View, {
+    style: indicatorStyle,
+    pointerEvents: "none"
+  }), /*#__PURE__*/React.createElement(ScrollView, {
+    ref: scrollRef,
+    showsVerticalScrollIndicator: false,
+    scrollEventThrottle: effectiveScrollThrottle,
+    decelerationRate: decelerationRate,
+    snapToInterval: itemHeight,
+    snapToAlignment: "start",
+    bounces: false,
+    overScrollMode: "never",
+    nestedScrollEnabled: true,
+    contentContainerStyle: contentContainerStyle,
+    onStartShouldSetResponderCapture: () => shouldCapture,
+    onMoveShouldSetResponderCapture: () => shouldCapture,
+    onScroll: e => {
+      lastOffsetRef.current = e.nativeEvent.contentOffset.y;
+    },
+    onScrollBeginDrag: () => {
+      momentumRef.current = false;
+      clearDragEndTimer();
+      notifyInteractStart();
+    },
+    onScrollEndDrag: e => {
+      if (readOnly) return;
+      const y = e.nativeEvent.contentOffset.y;
+      lastOffsetRef.current = y;
+      clearDragEndTimer();
+      dragEndTimerRef.current = setTimeout(() => {
+        if (!momentumRef.current) {
+          emitIndexFromOffset(lastOffsetRef.current, true);
+          notifyInteractEnd();
+        }
+      }, 80);
+    },
+    onMomentumScrollBegin: () => {
+      momentumRef.current = true;
+      clearDragEndTimer();
+      notifyInteractStart();
+    },
+    onMomentumScrollEnd: e => {
+      momentumRef.current = false;
+      clearDragEndTimer();
+      const y = e.nativeEvent.contentOffset.y;
+      lastOffsetRef.current = y;
+      emitIndexFromOffset(y, false);
+      notifyInteractEnd();
+    },
+    scrollEnabled: !readOnly
+  }, data.map((item, index) => /*#__PURE__*/React.createElement(WheelPickerItem, {
+    key: `${index}-${String(item.value ?? '')}`,
+    item: item,
+    index: index,
+    itemHeight: itemHeight,
+    active: index === safeSelectedIndex,
+    disabled: !!item.disabled,
+    renderItem: renderItem
+  }))));
+};
+const WheelPicker = /*#__PURE__*/React.memo(WheelPickerInner);
+const webOnlyStyles = StyleSheet.create({
+  grab: {
+    cursor: 'pointer',
+    userSelect: 'none',
+    touchAction: 'none'
+  }
+});
 export function usePickerValue({
   columns,
   valueProp,
@@ -15,7 +599,7 @@ export function usePickerValue({
   onChange,
   onConfirm
 }) {
-  const preparedColumns = prepareColumns(columns);
+  const preparedColumns = useMemo(() => prepareColumns(columns), [columns]);
   const isControlled = valueProp !== undefined;
   const [innerValue, setInnerValue] = useState(() => {
     const initial = toArrayValue(valueProp ?? defaultValue);
@@ -33,7 +617,7 @@ export function usePickerValue({
       commitValue(next);
     }
   }, [commitValue, isControlled, valueProp]);
-  const normalized = normalizePicker(preparedColumns, innerValue);
+  const normalized = useMemo(() => normalizePicker(preparedColumns, innerValue), [preparedColumns, innerValue]);
   useEffect(() => {
     if (isControlled) return;
     if (!shallowEqualArray(innerValue, normalized.values)) {
@@ -59,6 +643,7 @@ export function usePickerValue({
     onConfirm?.(normalized.values, normalized.options);
   }, [normalized, onConfirm]);
   return {
+    preparedColumns,
     normalized,
     handleSelect,
     handleConfirm
@@ -69,7 +654,7 @@ const getVisibleCount = count => {
   return normalized % 2 === 0 ? normalized + 1 : normalized;
 };
 const GRADIENT_OVERLAY_ALPHA = 0.25;
-const GRADIENT_STEPS = [0.98, 0.9075, 0.835, 0.7625, 0.69, 0.6175, 0.545, 0.4725, 0.4];
+const GRADIENT_STEPS = [0.95, 0.75, 0.55, 0.35];
 const GRADIENT_STEPS_REVERSED = [...GRADIENT_STEPS].reverse();
 const GradientMask = ({
   height,
@@ -78,14 +663,14 @@ const GradientMask = ({
   maskType
 }) => {
   const isWeb = Platform.OS === 'web';
-  const baseStyle = [styles.gradientMask, {
+  const baseStyle = useMemo(() => [styles.gradientMask, {
     height
   }, position === 'top' ? {
     top: 0
   } : {
     bottom: 0
-  }];
-  const overlayColor = withAlpha(color, GRADIENT_OVERLAY_ALPHA);
+  }], [height, position]);
+  const overlayColor = useMemo(() => withAlpha(color, GRADIENT_OVERLAY_ALPHA), [color]);
   if (maskType === 'solid') {
     return /*#__PURE__*/React.createElement(View, {
       pointerEvents: "none",
@@ -120,17 +705,6 @@ const GradientMask = ({
     }
   })));
 };
-const isCascadeColumns = columns => {
-  if (!Array.isArray(columns) || columns.length === 0) return false;
-  const first = columns[0];
-  if (Array.isArray(first)) return false;
-  if (isObject(first) && 'options' in first) return false;
-  return columns.some(option => {
-    if (!isObject(option)) return false;
-    const children = option.children;
-    return Array.isArray(children) && children.length > 0;
-  });
-};
 const PickerColumn = /*#__PURE__*/React.memo(props => {
   const {
     columnIndex,
@@ -149,11 +723,13 @@ const PickerColumn = /*#__PURE__*/React.memo(props => {
     swipeDuration
   } = props;
   const restVisible = Math.max(1, Math.floor((visibleItemCount - 1) / 2));
-  const selectedIndex = (() => {
+  const valueIndexMap = useMemo(() => new Map(options.map((option, idx) => [option.value, idx])), [options]);
+  const selectedIndex = useMemo(() => {
     if (!options.length) return 0;
-    const idx = options.findIndex(option => option.value === value);
-    return findEnabledIndex(options, idx >= 0 ? idx : 0);
-  })();
+    const idx = valueIndexMap.get(value);
+    const startIndex = typeof idx === 'number' && idx >= 0 ? idx : 0;
+    return findEnabledIndex(options, startIndex);
+  }, [options, value, valueIndexMap]);
   const handleChange = useCallback(index => {
     const target = findEnabledIndex(options, index);
     const option = options[target];
@@ -175,10 +751,9 @@ const PickerColumn = /*#__PURE__*/React.memo(props => {
     decelerationRate: decelerationRate,
     scrollEventThrottle: scrollEventThrottle,
     swipeDuration: swipeDuration,
-    renderItem: item => {
-      if (!item) return null;
-      const active = item.value === value;
-      const disabled = !!item.disabled;
+    renderItem: (item, _index, meta) => {
+      const active = meta?.active ?? false;
+      const disabled = meta?.disabled ?? false;
       const textColor = disabled ? tokens.colors.textDisabled : active ? tokens.colors.text : tokens.colors.textMuted;
       const content = optionRender ? optionRender(item, {
         columnIndex,
@@ -231,8 +806,8 @@ const Picker = props => {
     loading = false,
     readOnly = false,
     decelerationRate = Platform.select({
-      ios: 0.9975,
-      android: 0.989,
+      ios: 0.999,
+      android: 0.997,
       default: 0.989
     }) ?? 'normal',
     swipeDuration = tokens.defaults.swipeDuration,
@@ -253,11 +828,11 @@ const Picker = props => {
     ...rest
   } = props;
   const visibleItemCount = getVisibleCount(visibleItemCountProp ?? tokens.defaults.visibleItemCount);
-  const isCascade = isCascadeColumns(columns);
   const {
     normalized,
     handleSelect,
-    handleConfirm
+    handleConfirm,
+    preparedColumns
   } = usePickerValue({
     columns,
     valueProp,
@@ -266,6 +841,7 @@ const Picker = props => {
     onChange,
     onConfirm
   });
+  const isCascade = preparedColumns.type === 'cascade';
   const renderActionContent = (content, color) => {
     if (/*#__PURE__*/React.isValidElement(content)) return /*#__PURE__*/React.createElement(View, {
       style: {