react-native-system-ui 0.0.4 → 0.0.6

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

@@ -1,473 +0,0 @@
-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 { FlatList, Platform, View, StyleSheet, PanResponder } from 'react-native';
-import { clamp } from '../../utils';
-import { findEnabledIndex } from './utils';
-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 styles = 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 getVelocityBucket = velocity => {
-  const abs = Math.abs(velocity);
-  if (abs > 1.2) return 2;
-  if (abs > 0.6) return 1;
-  return 0;
-};
-const WheelPickerInner = ({
-  data,
-  selectedIndex,
-  onChange,
-  onInteractStart,
-  onInteractEnd,
-  renderItem,
-  itemHeight,
-  visibleRest,
-  readOnly,
-  indicatorColor,
-  decelerationRate = Platform.select({
-    ios: 0.9975,
-    android: 0.989,
-    default: 0.989
-  }) ?? 'normal',
-  scrollEventThrottle = 16,
-  swipeDuration = 300
-}) => {
-  const isWeb = Platform.OS === 'web';
-  const listRef = 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 initialRenderCount = Math.min(total || visibleCount, visibleCount);
-  const maxBatchRenderCount = Math.min(total || visibleCount * 2, Math.max(visibleCount * 2, 10));
-  const windowSize = total > visibleCount * 12 ? 7 : 5;
-  const batchingPeriod = total > visibleCount * 20 ? 32 : 16;
-  const effectiveScrollThrottle = total > visibleCount * 20 ? 32 : scrollEventThrottle;
-  const webVirtualEnabled = total > visibleCount * 4;
-  const Spacer = useCallback(() => /*#__PURE__*/React.createElement(View, {
-    style: {
-      height: spacerHeight
-    }
-  }), [spacerHeight]);
-  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;
-    listRef.current?.scrollToOffset({
-      offset,
-      animated: false
-    });
-  }, [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 keyExtractor = useCallback((item, idx) => `${idx}-${String(item.value ?? '')}`, []);
-  const renderListItem = useCallback(({
-    item,
-    index
-  }) => {
-    const content = renderItem(item, index);
-    return /*#__PURE__*/React.createElement(View, {
-      style: [styles.option, {
-        height: itemHeight
-      }]
-    }, content);
-  }, [itemHeight, renderItem]);
-  const webIndex = clamp(Math.round(-webOffset / itemHeight), 0, maxIndex);
-  const webRender = (() => {
-    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;
-      const content = renderItem(item, index);
-      items.push(/*#__PURE__*/React.createElement(View, {
-        key: `${index}-${String(item.value ?? '')}`,
-        style: [styles.option, {
-          height: itemHeight
-        }]
-      }, content));
-    }
-    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
-        }
-      })
-    };
-  })();
-  const webTransform = {
-    transform: [{
-      translateY: webOffset
-    }]
-  };
-  const webTransitionStyle = webTransition ? {
-    transitionProperty: 'transform',
-    transitionDuration: `${webTransition}ms`,
-    transitionTimingFunction: 'cubic-bezier(0.23, 1, 0.68, 1)',
-    willChange: 'transform'
-  } : undefined;
-  const handleWebTransitionEnd = useCallback(event => {
-    const propertyName = event.nativeEvent?.propertyName ?? event.propertyName;
-    if (propertyName && propertyName !== 'transform' && propertyName !== 'webkitTransform') return;
-    finalizePendingChange();
-  }, [finalizePendingChange]);
-  const panResponder = 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);
-    }
-  });
-  if (isWeb) {
-    return /*#__PURE__*/React.createElement(View, _extends({
-      style: [styles.column, {
-        height: containerHeight
-      }, webOnlyStyles.grab],
-      onWheel: handleWheel
-    }, panResponder.panHandlers), /*#__PURE__*/React.createElement(View, {
-      style: [styles.indicator, {
-        height: itemHeight,
-        top: itemHeight * visibleRest,
-        borderColor: indicatorColor
-      }],
-      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;
-  return /*#__PURE__*/React.createElement(View, {
-    style: [styles.column, {
-      height: containerHeight
-    }],
-    collapsable: false
-  }, /*#__PURE__*/React.createElement(View, {
-    style: [styles.indicator, {
-      height: itemHeight,
-      top: itemHeight * visibleRest,
-      borderColor: indicatorColor
-    }],
-    pointerEvents: "none"
-  }), /*#__PURE__*/React.createElement(FlatList, {
-    ref: listRef,
-    data: data,
-    keyExtractor: keyExtractor,
-    initialScrollIndex: total > 0 ? safeSelectedIndex : undefined,
-    initialNumToRender: initialRenderCount,
-    maxToRenderPerBatch: maxBatchRenderCount,
-    windowSize: windowSize,
-    updateCellsBatchingPeriod: batchingPeriod,
-    renderItem: renderListItem,
-    getItemLayout: (_, index) => ({
-      length: itemHeight,
-      offset: spacerHeight + index * itemHeight,
-      index
-    }),
-    showsVerticalScrollIndicator: false,
-    scrollEventThrottle: effectiveScrollThrottle,
-    decelerationRate: decelerationRate,
-    snapToInterval: itemHeight,
-    snapToAlignment: "start",
-    bounces: false,
-    overScrollMode: "never",
-    nestedScrollEnabled: true,
-    onStartShouldSetResponderCapture: () => shouldCapture,
-    onMoveShouldSetResponderCapture: () => shouldCapture,
-    removeClippedSubviews: !isWeb,
-    collapsable: false,
-    ListHeaderComponent: Spacer,
-    ListFooterComponent: Spacer,
-    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
-  }));
-};
-const WheelPicker = /*#__PURE__*/React.memo(WheelPickerInner);
-const webOnlyStyles = StyleSheet.create({
-  grab: {
-    cursor: 'pointer',
-    userSelect: 'none',
-    touchAction: 'none'
-  }
-});
-export default WheelPicker;

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

@@ -1,127 +0,0 @@
-import { isObject } 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 clamp = Math.min(Math.max(startIndex, 0), options.length - 1);
-  if (!options[clamp]?.disabled) return clamp;
-  for (let i = clamp + 1; i < options.length; i += 1) {
-    if (!options[i]?.disabled) return i;
-  }
-  for (let i = clamp - 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);
-};
-export const shallowEqualArray = (a = [], b = []) => {
-  if (a.length !== b.length) return false;
-  for (let i = 0; i < a.length; i += 1) {
-    if (a[i] !== b[i]) return false;
-  }
-  return true;
-};