@seakoi/native-ui 1.0.0

package/src/components/base/picker-view/picker-view-column.tsx

@@ -0,0 +1,134 @@
+import { useMemoizedFn } from 'ahooks';
+import { isEqual } from 'lodash-es';
+import { memo, useEffect, useMemo, useRef } from 'react';
+import {
+  FlatList,
+  type NativeScrollEvent,
+  type NativeSyntheticEvent,
+  View,
+} from 'react-native';
+
+import { Text } from '#components/base';
+
+import { usePickerColumnStyles } from './style';
+import type { PickerViewColumnProps } from './types';
+import { findUsableOptionIndex, getSelectedIndex } from './utils/column';
+
+export const PickerViewColumn: React.FC<PickerViewColumnProps> = memo(
+  ({ value, onChange, options, itemHeight, containerHeight }) => {
+    const flatListRef = useRef<FlatList>(null);
+
+    const styles = usePickerColumnStyles({ itemHeight });
+
+    const lastTop = useRef(0);
+
+    /** 选中区域上方/下方的 padding 高度（精确值） */
+    const verticalPadding = useMemo(() => {
+      if (containerHeight <= 0 || itemHeight <= 0) return 0;
+      return (containerHeight - itemHeight) / 2;
+    }, [containerHeight, itemHeight]);
+
+    const offsets = useMemo(() => {
+      return options.map((_, i) => i * itemHeight);
+    }, [options, itemHeight]);
+
+    const onMomentumScrollEnd = useMemoizedFn(
+      (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+        const offsetY = Math.min(
+          itemHeight * (options.length - 1),
+          Math.max(event.nativeEvent.contentOffset.y, 0),
+        );
+        let index = Math.floor(Math.floor(offsetY) / itemHeight);
+        const last = Math.floor(offsetY % itemHeight);
+        /** 如果滚动距离超过了一半，就认为用户是要滚动到下一个选项 */
+        if (last > itemHeight / 2) {
+          index++;
+        }
+
+        const isToNext = offsetY > lastTop.current;
+
+        if (options[index]?.disabled) {
+          index = findUsableOptionIndex(options, isToNext, index);
+        }
+
+        lastTop.current = offsetY;
+
+        const selectOption = options[index];
+
+        if (selectOption && selectOption.value !== value) {
+          onChange?.(selectOption);
+        }
+      },
+    );
+
+    const selectedIndex = getSelectedIndex(
+      options.findIndex(item => item.value === value),
+    );
+
+    useEffect(() => {
+      if (selectedIndex >= 0 && selectedIndex < options.length) {
+        flatListRef.current?.scrollToIndex({
+          index: selectedIndex,
+          animated: false,
+        });
+      }
+    }, [selectedIndex, options.length]);
+
+    const contentContainerStyle = useMemo(
+      () => ({
+        paddingTop: verticalPadding,
+        paddingBottom: verticalPadding,
+      }),
+      [verticalPadding],
+    );
+
+    return (
+      <View style={styles.pickerColumn}>
+        <FlatList
+          ref={flatListRef}
+          keyExtractor={(_, index) => String(index)}
+          initialScrollIndex={Math.max(0, selectedIndex)}
+          snapToOffsets={offsets}
+          contentContainerStyle={contentContainerStyle}
+          /** 用于决定当用户抬起手指之后，滚动视图减速停下的速度 */
+          decelerationRate="fast"
+          showsVerticalScrollIndicator={false}
+          data={options}
+          onMomentumScrollEnd={onMomentumScrollEnd}
+          getItemLayout={(_, index) => ({
+            length: itemHeight,
+            offset: itemHeight * index,
+            index,
+          })}
+          onScrollToIndexFailed={info => {
+            // // 处理 scrollToIndex 失败的情况，延迟重试
+            flatListRef.current?.scrollToIndex({
+              index: info.index,
+              animated: false,
+            });
+          }}
+          renderItem={({ item }) => (
+            <Text
+              size={16}
+              font={item.value === value ? 'semiBold' : 'regular'}
+              numberOfLines={1}
+              style={styles.pickerColumnText}
+            >
+              {item.label}
+            </Text>
+          )}
+        />
+      </View>
+    );
+  },
+  (prev, next) => {
+    // 自定义对比逻辑，确保所有影响渲染的 props 都参与比较
+    return (
+      isEqual(prev.options, next.options) &&
+      prev.value === next.value &&
+      prev.onChange === next.onChange &&
+      prev.containerHeight === next.containerHeight &&
+      prev.itemHeight === next.itemHeight
+    );
+  },
+);

package/src/components/base/picker-view/picker-view.tsx

@@ -0,0 +1,193 @@
+import { useControllableValue, useMemoizedFn } from 'ahooks';
+import { isEqual, isNil } from 'lodash-es';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { type LayoutChangeEvent, View } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+
+import { useTheme } from '#native-provider';
+
+import { Divider } from '../divider';
+import { PickerViewColumn } from './picker-view-column';
+import { usePickerStyles } from './style';
+import type { PickerOption, PickerValue, PickerViewProps } from './types';
+import {
+  buildOptions,
+  buildSelectedValue,
+  findDefaultValue,
+  findNextAllColumns,
+  getDataType,
+} from './utils/picker';
+
+export const PickerView: React.FC<PickerViewProps> = ({
+  columns,
+  itemHeight = 40,
+  ...restProps
+}) => {
+  /** 容器实际高度 */
+  const [containerHeight, setContainerHeight] = useState(0);
+
+  const styles = usePickerStyles({ itemHeight, containerHeight });
+
+  const [value, onChange] = useControllableValue<PickerValue[]>(restProps, {
+    defaultValue: [],
+  });
+
+  const theme = useTheme();
+
+  /**
+   * 获取当前选项是什么数据
+   * @description cascade 联级选择，multiple 多列选择，single 单列选择
+   */
+  const dataType = useMemo(() => getDataType(columns), [columns]);
+
+  const isControlled = 'value' in restProps;
+  const isNoDefaultValue = 'defaultValue' in restProps;
+
+  // 使用 useMemo 直接计算 options，避免 useState + useEffect 导致的两次渲染闪烁
+  const [options, columnDefaultValues] = useMemo(() => {
+    if (dataType === 'cascade') {
+      const [_options, _, _values] = buildOptions(dataType, columns, value);
+      return [_options, [] as PickerValue[]];
+    } else {
+      const [_options, defaultValues] = buildOptions(dataType, columns);
+      return [_options, defaultValues];
+    }
+  }, [dataType, columns, value]);
+
+  // 保存 columnDefaultValues 到 ref，供 handleChange 使用
+  const columnDefaultValuesRef = useRef<PickerValue[]>(columnDefaultValues);
+  columnDefaultValuesRef.current = columnDefaultValues;
+
+  /** 获取容器实际高度 */
+  const handleLayout = useCallback((event: LayoutChangeEvent) => {
+    const { height } = event.nativeEvent.layout;
+
+    setContainerHeight(height);
+  }, []);
+
+  const handleChange = useMemoizedFn(
+    (column: PickerOption, optionIndex: number) => {
+      switch (dataType) {
+        case 'cascade': {
+          const children = column.children || [];
+          const nextAll = findNextAllColumns(children);
+          const _options = options
+            .slice(0, optionIndex + 1)
+            .concat(nextAll.options);
+          const values = value
+            .slice(0, optionIndex)
+            .concat(column?.value)
+            .concat(nextAll.values);
+
+          const [v, o] = buildSelectedValue(values, _options);
+
+          onChange(v, o);
+          break;
+        }
+
+        case 'multiple': {
+          const newValues = [...value];
+
+          columnDefaultValuesRef.current.forEach((item, i) => {
+            if (isNil(newValues[i])) {
+              newValues[i] = item;
+            }
+          });
+
+          newValues[optionIndex] = column.value;
+          const [values, selectedColumns] = buildSelectedValue(newValues, options);
+
+          onChange(values, selectedColumns);
+          break;
+        }
+
+        default: {
+          const index = columns.findIndex(
+            (item: PickerOption) => item.value === column.value,
+          );
+          onChange([column.value], [columns[index]]);
+          break;
+        }
+      }
+    },
+  );
+
+  const handlers = useMemo(() => {
+    return columns.map((_, index) => item => handleChange(item, index));
+  }, [columns, handleChange]);
+
+  // 非受控模式的初始化：只在首次挂载时设置默认值
+  const initializedRef = useRef(false);
+  useEffect(() => {
+    if (
+      !initializedRef.current &&
+      !isControlled &&
+      !isNoDefaultValue &&
+      columnDefaultValues.length > 0
+    ) {
+      initializedRef.current = true;
+      const [v, o] = buildSelectedValue(columnDefaultValues, options);
+      onChange(v, o);
+    }
+  }, [columnDefaultValues, options, isControlled, isNoDefaultValue, onChange]);
+
+  // cascade 模式下的值校正
+  useEffect(() => {
+    if (dataType === 'cascade') {
+      const [_options, _, _values] = buildOptions(dataType, columns, value);
+      if (!isEqual(value, _values)) {
+        const [v, o] = buildSelectedValue(_values, _options);
+        onChange(v, o);
+      }
+    }
+  }, [onChange, value, dataType, columns]);
+
+  return (
+    <View style={styles.pickerContent} onLayout={handleLayout}>
+      <LinearGradient
+        pointerEvents="none"
+        colors={['white', 'rgba(255,255,255,0.4)']}
+        style={[styles.mask, styles.topMask]}
+      >
+        <Divider color={theme.palette.gray5} />
+      </LinearGradient>
+      <LinearGradient
+        pointerEvents="none"
+        colors={['rgba(255,255,255,0.4)', 'white']}
+        style={[styles.mask, styles.bottomMask]}
+      >
+        <Divider color={theme.palette.gray5} />
+      </LinearGradient>
+
+      {containerHeight > 0 &&
+        options.map((itemOptions, index) => {
+          const columnValue = (() => {
+            if (value[index]) {
+              return value[index];
+            }
+
+            if (!isControlled && !isNoDefaultValue) {
+              if (dataType === 'multiple') {
+                return columnDefaultValuesRef.current[index];
+              }
+
+              // 真的没有就默认第一个选项
+              return findDefaultValue(options[index][0].value, itemOptions)!;
+            }
+
+            return undefined;
+          })();
+          return (
+            <PickerViewColumn
+              key={index}
+              options={itemOptions}
+              itemHeight={itemHeight}
+              containerHeight={containerHeight}
+              onChange={handlers[index]}
+              value={columnValue}
+            />
+          );
+        })}
+    </View>
+  );
+};

package/src/components/base/picker-view/style/index.ts

@@ -0,0 +1,59 @@
+import { createThemedStyles } from '#native-provider';
+
+export const usePickerStyles = createThemedStyles(
+  (theme, options: { itemHeight: number; containerHeight: number }) => {
+    const { itemHeight, containerHeight } = options;
+
+    /** 选中区域上方/下方遮罩的高度 */
+    const maskHeight = (containerHeight - itemHeight) / 2;
+
+    return {
+      pickerContent: {
+        position: 'relative',
+        flex: 1,
+        flexDirection: 'row',
+        backgroundColor: theme.palette.white,
+        overflow: 'hidden',
+      },
+
+      mask: {
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        zIndex: 2,
+      },
+      topMask: {
+        top: 0,
+        height: maskHeight,
+        flexDirection: 'column-reverse',
+      },
+
+      bottomMask: {
+        bottom: 0,
+        height: maskHeight,
+      },
+      pickerLine: {
+        height: 1,
+        backgroundColor: theme.palette.gray5,
+      },
+    };
+  },
+);
+
+export const usePickerColumnStyles = createThemedStyles(
+  (_, options: { itemHeight: number }) => {
+    const { itemHeight } = options;
+
+    return {
+      pickerColumn: {
+        flex: 1,
+      },
+
+      pickerColumnText: {
+        height: itemHeight,
+        lineHeight: itemHeight,
+        textAlign: 'center',
+      },
+    };
+  },
+);

package/src/components/base/picker-view/types.ts

@@ -0,0 +1,52 @@
+import type { AnyObject } from '#shared/utils/types';
+
+export type PickerValue = string | number;
+
+export interface PickerOption extends AnyObject {
+  value: PickerValue;
+  label: PickerValue;
+  disabled?: boolean;
+}
+
+export type PickerOptionType = 'cascade' | 'multiple' | 'single';
+
+export type Column = PickerOption | PickerOption[];
+
+/** 联级选择 */
+export type PickerOptionCascade = PickerOption & {
+  children?: PickerOptionCascade[];
+};
+
+export interface PickerViewProps {
+  /** 选择器值 */
+  value?: PickerValue[];
+
+  /** 选择器默认值 */
+  defaultValue?: PickerValue[];
+
+  /** 变化时的回调函数 */
+  onChange?: (value: PickerValue[], options: Column[]) => void;
+
+  /** 选择器列 */
+  columns: Column[];
+
+  /** 选择器列高度 */
+  itemHeight?: number;
+}
+
+export interface PickerViewColumnProps {
+  /** 选择器列值 */
+  value?: PickerValue;
+
+  /** 变化时的回调函数 */
+  onChange?: (value: PickerOption) => void;
+
+  /** 选择器列选项 */
+  options: PickerOption[];
+
+  /** 选择器列高度 */
+  itemHeight: number;
+
+  /** 容器高度 */
+  containerHeight: number;
+}

package/src/components/base/picker-view/utils/column.ts

@@ -0,0 +1,62 @@
+import type { PickerOption } from '../types';
+
+/**
+ * 按照某个方向找到可用选项的下标
+ */
+const findAvailableOptionsIndex = (
+  options: PickerOption[],
+  start: number,
+  end: number,
+) => {
+  const isNext = end - start >= 0;
+
+  for (let iii = start; isNext ? iii <= end : iii >= end; iii += isNext ? 1 : -1) {
+    const item = options[iii];
+    if (!item.disabled) {
+      return iii;
+    }
+  }
+
+  return -1;
+};
+
+export const findUsableOptionIndex = (
+  options: PickerOption[],
+  /** 向下查找还是向上 */
+  next: boolean,
+  /** 起点下标 */
+  index: number,
+  /** 是否可以翻转查找 */
+  reverse = true,
+) => {
+  const maxIndex = options.length - 1;
+  // 两端的情况不能反转查找
+  if (reverse && (index === 0 || index === maxIndex)) {
+    reverse = false;
+  }
+
+  // 顶端不能继续向上找
+  if (index === 0 && !next) {
+    next = true;
+  }
+
+  // 末端不能继续向下找
+  if (index === maxIndex && next) {
+    next = false;
+  }
+
+  const getEnd = (cNext: boolean) => {
+    return cNext ? maxIndex : 0;
+  };
+
+  // 以当前为起点向某个方向找
+  let nIndex = findAvailableOptionsIndex(options, index, getEnd(next));
+
+  if (nIndex === -1 && reverse) {
+    nIndex = findAvailableOptionsIndex(options, index, getEnd(!next));
+  }
+
+  return nIndex;
+};
+
+export const getSelectedIndex = (n: number) => (n < 0 ? 0 : n);