@seakoi/native-ui 1.0.0

package/dist/module/components/base/picker/picker-trigger.js

@@ -0,0 +1,53 @@
+"use strict";
+
+import React, { cloneElement, isValidElement } from 'react';
+import { TouchableOpacity } from 'react-native';
+import { useTheme } from "../../../native-provider/index.js";
+import { Flex } from "../flex/index.js";
+import { Text } from "../text/index.js";
+import { usePickerFieldStyles } from "./style/index.js";
+
+/** Picker 基础触发器 Props */
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+export const PickerTrigger = ({
+  displayText,
+  placeholder = '请选择',
+  disabled = false,
+  style,
+  children,
+  onPress
+}) => {
+  const theme = useTheme();
+  const styles = usePickerFieldStyles();
+
+  /** 渲染触发器 */
+  const renderTrigger = () => {
+    if (children && /*#__PURE__*/isValidElement(children)) {
+      return /*#__PURE__*/cloneElement(children, {
+        onPress: onPress,
+        disabled
+      });
+    }
+
+    // 使用默认触发器
+    return /*#__PURE__*/_jsx(TouchableOpacity, {
+      style: styles.container,
+      activeOpacity: disabled ? 1 : 0.7,
+      onPress: onPress,
+      disabled: disabled,
+      children: /*#__PURE__*/_jsx(Flex, {
+        align: "center",
+        gap: theme.spacing.sm,
+        style: [styles.content, disabled && styles.disabled, style],
+        children: /*#__PURE__*/React.isValidElement(displayText) ? displayText : /*#__PURE__*/_jsx(Text, {
+          size: 14,
+          color: displayText ? theme.palette.fontGray1 : theme.palette.fontGray3,
+          children: displayText || placeholder
+        })
+      })
+    });
+  };
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: renderTrigger()
+  });
+};

package/dist/module/components/base/picker/picker.js

@@ -0,0 +1,105 @@
+"use strict";
+
+import { useControllableValue, useMemoizedFn } from 'ahooks';
+import { useMemo, useRef, useState } from 'react';
+import { Button } from "../button/index.js";
+import { Flex } from "../flex/index.js";
+import { Modal, ModalHeader } from "../modal/index.js";
+import { PickerView } from "../picker-view/index.js";
+import { findOptionsByValue, getDefaultValues } from "../picker-view/utils/picker.js";
+import { Portal } from "../portal/index.js";
+import { PickerTrigger } from "./picker-trigger.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+export const Picker = ({
+  placeholder = '请选择',
+  disabled = false,
+  title = '请选择',
+  formatter,
+  children,
+  style,
+  confirmText = '确定',
+  ...restProps
+}) => {
+  const [value, setValue] = useControllableValue(restProps, {
+    defaultValue: restProps.defaultValue
+  });
+  const [visible, setVisible] = useState(false);
+
+  // 内部状态用于管理滚动时的临时值
+  const [localValue, setLocalValue] = useState(restProps.value ?? restProps.defaultValue ?? []);
+
+  // 用 ref 同步保存最新值，解决 useMemoizedFn 闭包问题
+  const localValueRef = useRef(localValue);
+  localValueRef.current = localValue;
+
+  // 滑动时的临时 options（不用于 displayText）
+  const localOptionsRef = useRef([]);
+
+  /** 格式化显示文案 - 根据 value 从 columns 计算 */
+  const displayText = useMemo(() => {
+    if (!value?.length) return '';
+
+    // 从 columns 计算对应的 options
+    const options = findOptionsByValue(value, restProps.columns);
+    if (formatter) {
+      return formatter(value, options);
+    }
+    return options.map(opt => opt?.label).filter(Boolean).join(' / ');
+  }, [value, restProps.columns, formatter]);
+  const handleOpen = useMemoizedFn(() => {
+    // 打开时同步外部 value 到内部
+    // 如果 value 为空，使用 columns 的默认值（第一个选项）
+    const initialValue = value?.length ? value : getDefaultValues(restProps.columns);
+    setLocalValue(initialValue);
+    setVisible(true);
+  });
+  const handleClose = useMemoizedFn(() => {
+    setVisible(false);
+  });
+  const handleChange = useMemoizedFn((v, options) => {
+    setLocalValue(v);
+    localOptionsRef.current = options;
+  });
+  const handleConfirm = useMemoizedFn(() => {
+    setVisible(false);
+    setValue(localValueRef.current);
+  });
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(PickerTrigger, {
+      displayText: displayText,
+      placeholder: placeholder,
+      disabled: disabled,
+      style: style,
+      onPress: handleOpen,
+      children: children
+    }), /*#__PURE__*/_jsx(Portal, {
+      children: /*#__PURE__*/_jsx(Modal, {
+        visible: visible,
+        position: "bottom",
+        safeAreaInsetBottom: true,
+        contentHeight: '50%',
+        children: /*#__PURE__*/_jsxs(Flex, {
+          vertical: true,
+          align: "stretch",
+          gap: 16,
+          style: {
+            flex: 1,
+            padding: 16
+          },
+          children: [/*#__PURE__*/_jsx(ModalHeader, {
+            title: title,
+            onClose: handleClose
+          }), /*#__PURE__*/_jsx(PickerView, {
+            ...restProps,
+            value: localValue,
+            onChange: handleChange
+          }), /*#__PURE__*/_jsx(Button, {
+            text: confirmText,
+            size: "large",
+            onPress: handleConfirm
+          })]
+        })
+      })
+    })]
+  });
+};

package/dist/module/components/base/picker/style/index.js

@@ -0,0 +1,17 @@
+"use strict";
+
+import { createThemedStyles } from "../../../../native-provider/index.js";
+export const usePickerFieldStyles = createThemedStyles(theme => ({
+  container: {
+    flex: 1,
+    alignSelf: 'stretch'
+  },
+  content: {
+    backgroundColor: theme.palette.white,
+    paddingVertical: 12,
+    paddingHorizontal: 12
+  },
+  disabled: {
+    backgroundColor: theme.palette.blueGray2
+  }
+}));

package/dist/module/components/base/picker-view/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export * from "./picker-view.js";
+export { getDataType } from "./utils/picker.js";

package/dist/module/components/base/picker-view/picker-view-column.js

@@ -0,0 +1,102 @@
+"use strict";
+
+import { useMemoizedFn } from 'ahooks';
+import { isEqual } from 'lodash-es';
+import { memo, useEffect, useMemo, useRef } from 'react';
+import { FlatList, View } from 'react-native';
+import { Text } from "./../index.js";
+import { usePickerColumnStyles } from "./style/index.js";
+import { findUsableOptionIndex, getSelectedIndex } from "./utils/column.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const PickerViewColumn = /*#__PURE__*/memo(({
+  value,
+  onChange,
+  options,
+  itemHeight,
+  containerHeight
+}) => {
+  const flatListRef = useRef(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 => {
+    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 /*#__PURE__*/_jsx(View, {
+    style: styles.pickerColumn,
+    children: /*#__PURE__*/_jsx(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
+      }) => /*#__PURE__*/_jsx(Text, {
+        size: 16,
+        font: item.value === value ? 'semiBold' : 'regular',
+        numberOfLines: 1,
+        style: styles.pickerColumnText,
+        children: item.label
+      })
+    })
+  });
+}, (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/dist/module/components/base/picker-view/picker-view.js

@@ -0,0 +1,158 @@
+"use strict";
+
+import { useControllableValue, useMemoizedFn } from 'ahooks';
+import { isEqual, isNil } from 'lodash-es';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { View } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import { useTheme } from "../../../native-provider/index.js";
+import { Divider } from "../divider/index.js";
+import { PickerViewColumn } from "./picker-view-column.js";
+import { usePickerStyles } from "./style/index.js";
+import { buildOptions, buildSelectedValue, findDefaultValue, findNextAllColumns, getDataType } from "./utils/picker.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const PickerView = ({
+  columns,
+  itemHeight = 40,
+  ...restProps
+}) => {
+  /** 容器实际高度 */
+  const [containerHeight, setContainerHeight] = useState(0);
+  const styles = usePickerStyles({
+    itemHeight,
+    containerHeight
+  });
+  const [value, onChange] = useControllableValue(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, []];
+    } else {
+      const [_options, defaultValues] = buildOptions(dataType, columns);
+      return [_options, defaultValues];
+    }
+  }, [dataType, columns, value]);
+
+  // 保存 columnDefaultValues 到 ref，供 handleChange 使用
+  const columnDefaultValuesRef = useRef(columnDefaultValues);
+  columnDefaultValuesRef.current = columnDefaultValues;
+
+  /** 获取容器实际高度 */
+  const handleLayout = useCallback(event => {
+    const {
+      height
+    } = event.nativeEvent.layout;
+    setContainerHeight(height);
+  }, []);
+  const handleChange = useMemoizedFn((column, optionIndex) => {
+    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 => 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 /*#__PURE__*/_jsxs(View, {
+    style: styles.pickerContent,
+    onLayout: handleLayout,
+    children: [/*#__PURE__*/_jsx(LinearGradient, {
+      pointerEvents: "none",
+      colors: ['white', 'rgba(255,255,255,0.4)'],
+      style: [styles.mask, styles.topMask],
+      children: /*#__PURE__*/_jsx(Divider, {
+        color: theme.palette.gray5
+      })
+    }), /*#__PURE__*/_jsx(LinearGradient, {
+      pointerEvents: "none",
+      colors: ['rgba(255,255,255,0.4)', 'white'],
+      style: [styles.mask, styles.bottomMask],
+      children: /*#__PURE__*/_jsx(Divider, {
+        color: theme.palette.gray5
+      })
+    }), 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 /*#__PURE__*/_jsx(PickerViewColumn, {
+        options: itemOptions,
+        itemHeight: itemHeight,
+        containerHeight: containerHeight,
+        onChange: handlers[index],
+        value: columnValue
+      }, index);
+    })]
+  });
+};

package/dist/module/components/base/picker-view/style/index.js

@@ -0,0 +1,55 @@
+"use strict";
+
+import { createThemedStyles } from "../../../../native-provider/index.js";
+export const usePickerStyles = createThemedStyles((theme, options) => {
+  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) => {
+  const {
+    itemHeight
+  } = options;
+  return {
+    pickerColumn: {
+      flex: 1
+    },
+    pickerColumnText: {
+      height: itemHeight,
+      lineHeight: itemHeight,
+      textAlign: 'center'
+    }
+  };
+});

package/dist/module/components/base/picker-view/types.js

@@ -0,0 +1,3 @@
+"use strict";
+
+export {};

package/dist/module/components/base/picker-view/utils/column.js

@@ -0,0 +1,44 @@
+"use strict";
+
+/**
+ * 按照某个方向找到可用选项的下标
+ */
+const findAvailableOptionsIndex = (options, start, end) => {
+  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, next, index, /** 是否可以翻转查找 */
+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 => {
+    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 => n < 0 ? 0 : n;