@seakoi/native-ui 1.1.0 → 1.1.1

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

@@ -1,192 +1,76 @@
 "use strict";
 
-import { CloseOutlined } from '@seakoi/svg-icons';
 import { useControllableValue, useMemoizedFn } from 'ahooks';
 import React, { useMemo, useState } from 'react';
-import { TouchableOpacity, View } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
-import { Button, PickerView, Text } from "./../index.js";
-import { useTheme } from "../../../native-provider/index.js";
+import { View } from 'react-native';
+import { Modal, PickerTrigger, Portal } from "./../index.js";
+import { AddressPickerView } from "../address-picker-view/index.js";
+import { getSelectedOptions } from "../address-picker-view/utils.js";
 import { useAddressPickerStyles } from "./style/index.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const ADDRESS_PICKER_CONFIG = {
-  province: {
-    depth: 1,
-    title: '请选择省'
-  },
-  city: {
-    depth: 2,
-    title: '请选择省市'
-  },
-  district: {
-    depth: 3,
-    title: '请选择省市区'
-  },
-  street: {
-    depth: 4,
-    title: '请选择省市区、街道'
-  }
-};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 export const AddressPicker = props => {
   const {
-    confirmText = '确定',
-    cancelText = '取消',
-    onCancel,
-    onConfirm,
+    placeholder = '请选择',
+    disabled = false,
+    style,
+    children,
     columns,
-    itemHeight = 40,
-    selectType = 'district',
-    title,
+    onConfirm,
     ...restProps
   } = props;
-  const theme = useTheme();
-  const defaultTitle = ADDRESS_PICKER_CONFIG[selectType].title;
-  const finalTitle = title ?? defaultTitle;
   const styles = useAddressPickerStyles();
 
-  /** 管理已确认的值（与父组件同步） 受控与非受控*/
-  const [value, onChange] = useControllableValue(props, {
+  // 使用 ahooks 管理受控/非受控 value
+  const [value, setValue] = useControllableValue(props, {
     defaultValue: []
   });
+  const [visible, setVisible] = useState(false);
 
-  /** 管理选择器的值（内部状态*/
-  const [pickerValue, setPickerValue] = useState(value || []);
-  /** 管理上一次确认的值（用于判断是否需要更新内部状态） */
-  const [prevValue, setPrevValue] = useState(value);
-  if (value !== prevValue) {
-    setPrevValue(value);
-    setPickerValue(value || []);
-  }
-  /**
-   * @param v 选择器的值
-   * @description 当选择器的值发生变化时，更新内部状态
-   * @returns void
-   *  */
-  const handlePickerChange = useMemoizedFn(v => {
-    console.log('选择的数据', v);
-    setPickerValue(v);
+  // 计算显示文本
+  const displayText = useMemo(() => {
+    if (!value || value.length === 0) return '';
+    const options = getSelectedOptions(columns, value);
+    // 如果找到了对应的选项，显示 label；否则（可能是初次加载数据还没到），暂不显示或显示 value
+    if (options.length === 0) return '';
+    return options.map(option => option.label).join(' / ');
+  }, [value, columns]);
+  const handleOpen = useMemoizedFn(() => {
+    setVisible(true);
   });
-  /**
-   * @description 确认选择
-   * @returns void
-   * */
-  const handleConfirm = useMemoizedFn(() => {
-    const getSelectedOptions = (cols, vals) => {
-      const options = [];
-      let currentCols = cols;
-      for (const val of vals) {
-        if (!currentCols) {
-          break;
-        }
-        const target = currentCols.find(col => col.value === val);
-        if (target) {
-          options.push(target);
-          currentCols = target.children;
-        } else {
-          break;
-        }
-      }
-      return options;
-    };
-    const options = getSelectedOptions(columns, pickerValue);
-    onChange(pickerValue, options);
-    onConfirm?.(pickerValue, options);
+  const handleClose = useMemoizedFn(() => {
+    setVisible(false);
   });
-  /**
-   * @description 取消选择
-   * @returns void
-   * */
-  const handleCancel = useMemoizedFn(() => {
-    setPickerValue(value || []);
-    onCancel?.();
+  const handleConfirm = useMemoizedFn((vals, options) => {
+    setValue(vals);
+    setVisible(false);
+    onConfirm?.(vals, options);
   });
-
-  /**
-   * @description 剪裁列
-   * @param columns 列
-   * @param selectType 选择类型
-   * @returns 剪裁后的列
-   * */
-  const prunedColumns = useMemo(() => {
-    const depth = ADDRESS_PICKER_CONFIG[selectType].depth || 3;
-    const prune = (cols, currentDepth) => {
-      if (!cols) {
-        return [];
-      }
-      if (currentDepth >= depth) {
-        return cols.map(col => {
-          /** 剪裁列，移除子项 */
-          const {
-            children,
-            ...rest
-          } = col;
-          return rest;
-        });
-      }
-      /** 递归剪裁子项 */
-      return cols.map(col => {
-        const option = col;
-        if (option.children) {
-          return {
-            ...option,
-            children: prune(option.children, currentDepth + 1)
-          };
-        }
-        return option;
-      });
-    };
-    return prune(columns, 1);
-  }, [columns, selectType]);
-  return /*#__PURE__*/_jsx(View, {
-    style: styles.container,
-    children: /*#__PURE__*/_jsxs(SafeAreaView, {
-      edges: ['bottom', 'left', 'right'],
-      children: [/*#__PURE__*/_jsxs(View, {
-        style: styles.header,
-        children: [/*#__PURE__*/React.isValidElement(finalTitle) ? finalTitle : /*#__PURE__*/_jsx(Text, {
-          style: styles.title,
-          children: finalTitle
-        }), /*#__PURE__*/_jsx(TouchableOpacity, {
-          onPress: handleCancel,
-          style: styles.closeIcon,
-          hitSlop: {
-            top: 10,
-            bottom: 10,
-            left: 10,
-            right: 10
-          },
-          children: /*#__PURE__*/_jsx(CloseOutlined, {
-            size: 20,
-            color: theme.palette.fontGray3
+  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",
+        contentHeight: "50%",
+        onClose: handleClose,
+        children: /*#__PURE__*/_jsx(View, {
+          style: styles.container,
+          children: /*#__PURE__*/_jsx(AddressPickerView, {
+            ...restProps,
+            columns: columns,
+            value: value,
+            onConfirm: handleConfirm,
+            onCancel: handleClose,
+            onClose: handleClose
           })
-        })]
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.pickerContainer,
-        children: /*#__PURE__*/_jsx(PickerView, {
-          ...restProps,
-          columns: prunedColumns,
-          value: pickerValue,
-          onChange: handlePickerChange,
-          itemHeight: itemHeight
         })
-      }), /*#__PURE__*/_jsxs(View, {
-        style: styles.footer,
-        children: [/*#__PURE__*/_jsx(Button, {
-          text: cancelText,
-          variant: "base",
-          theme: "secondary",
-          size: "large",
-          onPress: handleCancel,
-          buttonStyle: styles.button
-        }), /*#__PURE__*/_jsx(Button, {
-          text: confirmText,
-          variant: "base",
-          theme: "primary",
-          size: "large",
-          onPress: handleConfirm,
-          buttonStyle: styles.button
-        })]
-      })]
-    })
+      })
+    })]
   });
 };

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

@@ -1,55 +1,8 @@
 "use strict";
 
 import { createThemedStyles } from "../../../../native-provider/index.js";
-export const useAddressPickerStyles = createThemedStyles(theme => ({
+export const useAddressPickerStyles = createThemedStyles(() => ({
   container: {
-    backgroundColor: theme.palette.white,
-    borderTopLeftRadius: theme.roundness.lg,
-    borderTopRightRadius: theme.roundness.lg,
-    overflow: 'hidden'
-  },
-  header: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingHorizontal: theme.spacing.lg,
-    paddingVertical: theme.spacing.md,
-    borderBottomWidth: 1,
-    borderBottomColor: theme.palette.gray1 // Verify palette color
-  },
-  title: {
-    fontSize: 16,
-    fontWeight: '600',
-    color: theme.palette.fontGray1
-  },
-  closeIcon: {
-    padding: 4
-  },
-  pickerContainer: {},
-  footer: {
-    flexDirection: 'row',
-    padding: theme.spacing.lg,
-    gap: theme.spacing.md,
-    borderTopWidth: 1,
-    borderTopColor: theme.palette.gray1
-  },
-  button: {
     flex: 1
-  },
-  columnHeaderContainer: {
-    flexDirection: 'row',
-    borderBottomWidth: 1,
-    borderBottomColor: theme.palette.gray1,
-    backgroundColor: theme.palette.gray1
-  },
-  columnHeader: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingVertical: 8
-  },
-  columnHeaderText: {
-    fontSize: 12,
-    color: theme.palette.fontGray2
   }
 }));

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

@@ -0,0 +1,191 @@
+"use strict";
+
+import { CloseOutlined } from '@seakoi/svg-icons';
+import { useControllableValue, useMemoizedFn } from 'ahooks';
+import React, { useMemo, useState } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { Button, PickerView, Text } from "./../index.js";
+import { useTheme } from "../../../native-provider/index.js";
+import { useAddressPickerStyles } from "./style/index.js";
+import { getSelectedOptions } from "./utils.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const HIT_SLOP = {
+  top: 10,
+  bottom: 10,
+  left: 10,
+  right: 10
+};
+const ADDRESS_PICKER_CONFIG = {
+  province: {
+    depth: 1,
+    title: '请选择省'
+  },
+  city: {
+    depth: 2,
+    title: '请选择省市'
+  },
+  district: {
+    depth: 3,
+    title: '请选择省市区'
+  },
+  street: {
+    depth: 4,
+    title: '请选择省市区、街道'
+  }
+};
+export const AddressPickerView = props => {
+  const {
+    confirmText = '确定',
+    cancelText = '取消',
+    onCancel,
+    onConfirm,
+    columns,
+    selectType = 'district',
+    title,
+    onClose,
+    style,
+    ...restProps
+  } = props;
+  const theme = useTheme();
+  const defaultTitle = ADDRESS_PICKER_CONFIG[selectType].title;
+  const finalTitle = title ?? defaultTitle;
+  const visibleItemCount = 5;
+  const itemHeight = 42;
+  const styles = useAddressPickerStyles({
+    height: itemHeight * visibleItemCount
+  });
+
+  /** 管理已确认的值（与父组件同步） 受控与非受控*/
+  const [value, onChange] = useControllableValue(props, {
+    defaultValue: []
+  });
+
+  /** 管理选择器的值（内部状态*/
+  const [pickerValue, setPickerValue] = useState(value || []);
+  /** 管理上一次确认的值（用于判断是否需要更新内部状态） */
+  const [prevValue, setPrevValue] = useState(value);
+  if (value !== prevValue) {
+    setPrevValue(value);
+    setPickerValue(value || []);
+  }
+
+  /**
+   * @param v 选择器的值
+   * @description 当选择器的值发生变化时，更新内部状态
+   * @returns void
+   *  */
+  const handlePickerChange = useMemoizedFn(v => {
+    setPickerValue(v);
+  });
+  /**
+   * @description 确认选择
+   * @returns void
+   * */
+  const handleConfirm = useMemoizedFn(() => {
+    const options = getSelectedOptions(columns, pickerValue);
+    onChange(pickerValue, options);
+    onConfirm?.(pickerValue, options);
+  });
+  /**
+   * @description 取消选择
+   * @returns void
+   * */
+  const handleCancel = useMemoizedFn(() => {
+    setPickerValue(value || []);
+    onCancel?.();
+  });
+  const handleClose = useMemoizedFn(() => {
+    onClose?.();
+  });
+
+  /**
+   * @description 剪裁列
+   * @param columns 列
+   * @param selectType 选择类型
+   * @returns 剪裁后的列
+   * */
+  const prunedColumns = useMemo(() => {
+    const depth = ADDRESS_PICKER_CONFIG[selectType].depth || 3;
+    const prune = (cols, currentDepth) => {
+      if (!cols) {
+        return [];
+      }
+      if (currentDepth >= depth) {
+        return cols.map(col => {
+          /** 剪裁列，移除子项 */
+          if (typeof col === 'object' && col !== null && !Array.isArray(col) && 'children' in col) {
+            const {
+              children,
+              ...rest
+            } = col;
+            return rest;
+          }
+          return col;
+        });
+      }
+      /** 递归剪裁子项 */
+      return cols.map(col => {
+        if (typeof col === 'object' && col !== null && !Array.isArray(col) && 'children' in col) {
+          const option = col;
+          if (option.children) {
+            return {
+              ...option,
+              children: prune(option.children, currentDepth + 1)
+            };
+          }
+          return option;
+        }
+        return col;
+      });
+    };
+    return prune(columns, 1);
+  }, [columns, selectType]);
+  return /*#__PURE__*/_jsx(View, {
+    style: [styles.container, style],
+    children: /*#__PURE__*/_jsxs(SafeAreaView, {
+      edges: ['bottom', 'left', 'right'],
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.header,
+        children: [/*#__PURE__*/React.isValidElement(finalTitle) ? finalTitle : /*#__PURE__*/_jsx(Text, {
+          style: styles.title,
+          children: finalTitle
+        }), /*#__PURE__*/_jsx(TouchableOpacity, {
+          onPress: handleClose,
+          style: styles.closeIcon,
+          hitSlop: HIT_SLOP,
+          children: /*#__PURE__*/_jsx(CloseOutlined, {
+            size: 20,
+            color: theme.palette.fontGray3
+          })
+        })]
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.pickerContainer,
+        children: /*#__PURE__*/_jsx(PickerView, {
+          ...restProps,
+          columns: prunedColumns,
+          value: pickerValue,
+          onChange: handlePickerChange,
+          itemHeight: itemHeight
+        })
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.footer,
+        children: [/*#__PURE__*/_jsx(Button, {
+          text: cancelText,
+          variant: "base",
+          theme: "secondary",
+          size: "large",
+          onPress: handleCancel,
+          buttonStyle: styles.button
+        }), /*#__PURE__*/_jsx(Button, {
+          text: confirmText,
+          variant: "base",
+          theme: "primary",
+          size: "large",
+          onPress: handleConfirm,
+          buttonStyle: styles.button
+        })]
+      })]
+    })
+  });
+};

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

@@ -0,0 +1,3 @@
+"use strict";
+
+export * from "./address-picker-view.js";

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

@@ -0,0 +1,59 @@
+"use strict";
+
+import { createThemedStyles } from "../../../../native-provider/index.js";
+export const useAddressPickerStyles = createThemedStyles((theme, options) => ({
+  container: {
+    backgroundColor: theme.palette.white,
+    borderTopLeftRadius: theme.roundness.lg,
+    borderTopRightRadius: theme.roundness.lg,
+    overflow: 'hidden'
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: theme.spacing.lg,
+    paddingVertical: theme.spacing.md,
+    borderBottomWidth: 1,
+    borderBottomColor: theme.palette.gray1
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: theme.palette.fontGray1
+  },
+  closeIcon: {
+    padding: 4
+  },
+  pickerContainer: {
+    height: options?.height ?? 200,
+    // 默认高度，确保 Picker 可见
+    backgroundColor: theme.palette.gray1 // 可选：背景色
+  },
+  footer: {
+    flexDirection: 'row',
+    padding: theme.spacing.lg,
+    gap: theme.spacing.md,
+    borderTopWidth: 1,
+    borderTopColor: theme.palette.gray1
+  },
+  button: {
+    flex: 1
+  },
+  columnHeaderContainer: {
+    flexDirection: 'row',
+    borderBottomWidth: 1,
+    borderBottomColor: theme.palette.gray1,
+    backgroundColor: theme.palette.gray1
+  },
+  columnHeader: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 8
+  },
+  columnHeaderText: {
+    fontSize: 12,
+    color: theme.palette.fontGray2
+  }
+}));

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

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

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

@@ -0,0 +1,20 @@
+"use strict";
+
+export const getSelectedOptions = (cols, vals) => {
+  const options = [];
+  let currentCols = cols;
+  if (!vals || !currentCols) return [];
+  for (const val of vals) {
+    if (!currentCols) {
+      break;
+    }
+    const target = currentCols.find(col => col.value === val);
+    if (target) {
+      options.push(target);
+      currentCols = target.children;
+    } else {
+      break;
+    }
+  }
+  return options;
+};

package/dist/module/components/base/carousel/carousel-item.js

@@ -2,15 +2,39 @@
 
 import { View } from 'react-native';
 import { jsx as _jsx } from "react/jsx-runtime";
+const FULL_SIZE_STYLE = {
+  height: '100%',
+  width: '100%'
+};
+
+/**
+ * 轮播项组件
+ *
+ * 用于包裹轮播图中的每一项内容，自动填充父容器的宽高。
+ *
+ * @example
+ * ```tsx
+ * <Carousel>
+ *   <Carousel.Item>
+ *     <Image source={image1} />
+ *   </Carousel.Item>
+ *   <Carousel.Item>
+ *     <Image source={image2} />
+ *   </Carousel.Item>
+ * </Carousel>
+ * ```
+ *
+ * @param props - 组件属性
+ * @param props.children - 轮播项内容
+ * @param props.style - 容器样式
+ * @returns 轮播项组件
+ */
 export const CarouselItem = ({
   children,
   style
 }) => {
   return /*#__PURE__*/_jsx(View, {
-    style: [{
-      height: '100%',
-      width: '100%'
-    }, style],
+    style: [FULL_SIZE_STYLE, style],
     children: children
   });
 };