@seakoi/native-ui 1.1.0 → 1.1.2

package/dist/typescript/shared/apis/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/shared/apis/index.ts"],"names":[],"mappings":"AAAA,iBAAiB;;;;;;;AAIjB,wBAE0C"}

package/dist/typescript/shared/constants/event-emitter-type.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"event-emitter-type.d.ts","sourceRoot":"","sources":["../../../../src/shared/constants/event-emitter-type.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,0BAA0B,+BAA+B,CAAC;AACvE,eAAO,MAAM,6BAA6B,kCAAkC,CAAC"}

package/dist/typescript/shared/constants/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/shared/constants/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC"}

package/dist/typescript/shared/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/shared/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC"}

package/dist/typescript/shared/hooks/use-back-top.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-back-top.d.ts","sourceRoot":"","sources":["../../../../src/shared/hooks/use-back-top.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,QAAQ,EACR,iBAAiB,EACjB,oBAAoB,EACpB,UAAU,EACV,WAAW,EACZ,MAAM,cAAc,CAAC;AAEtB;;GAEG;AACH,KAAK,aAAa,GAAG,UAAU,GAAG,QAAQ,GAAG,WAAW,CAAC;AAEzD;;GAEG;AACH,MAAM,WAAW,mBAAmB;IAClC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAAC,OAAO,GAAE,mBAAwB;IAuC1D;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;kBAxCgB,oBAAoB,CAAC,iBAAiB,CAAC;IA2C1D;;OAEG;;EAGN"}

package/dist/typescript/shared/hooks/use-merge-refs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-merge-refs.d.ts","sourceRoot":"","sources":["../../../../src/shared/hooks/use-merge-refs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,GAAG,EAAE,KAAK,WAAW,EAAe,MAAM,OAAO,CAAC;AAEhE,wBAAgB,YAAY,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,EAAE,kBAc3D"}

package/dist/typescript/shared/theme/fonts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fonts.d.ts","sourceRoot":"","sources":["../../../../src/shared/theme/fonts.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAG9C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C,MAAM,MAAM,gBAAgB,GACxB,OAAO,CAAC,SAAS,CAAC,YAAY,CAAC,EAAE,SAAS,CAAC,GAC3C,IAAI,CAAC,SAAS,EAAE,YAAY,GAAG,YAAY,CAAC,CAAC;AAEjD,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAC;AACrE,KAAK,sBAAsB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,aAAa;CAAE,CAAC;AAEnE,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,QAAQ,EAAE,gBAAgB,CAKjE,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,GAAI,CAAC,SAAS,MAAM,CAAC,QAAQ,EAAE,gBAAgB,CAAC,EAC5E,aAAa,CAAC,KACb,sBAAsB,CAAC,CAAC,CAoB1B,CAAC"}

package/dist/typescript/shared/theme/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/shared/theme/index.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAGL,KAAK,gBAAgB,EACrB,KAAK,QAAQ,EACd,MAAM,SAAS,CAAC;AAEjB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAErC,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,mBAAmB,SAAS,CAAC;AAE7B,MAAM,MAAM,WAAW,GAAG,WAAW,CACnC,IAAI,CAAC,KAAK,EAAE,OAAO,CAAC,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAA;CAAE,CACrE,CAAC;AACF;;;;GAIG;AACH,eAAO,MAAM,WAAW,GAAI,cAAc,WAAW,KAAG,KAcvD,CAAC"}

package/dist/typescript/shared/theme/tokens/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/shared/theme/tokens/index.ts"],"names":[],"mappings":"AAaA,SAAS;AACT,eAAO,MAAM,OAAO;;;;;;;;;CASV,CAAC;AAiBX,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAqD,CAAC"}

package/dist/typescript/shared/theme/tokens/palette.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"palette.d.ts","sourceRoot":"","sources":["../../../../../src/shared/theme/tokens/palette.ts"],"names":[],"mappings":"AAAA,aAAa;AACb,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgFV,CAAC"}

package/dist/typescript/shared/theme/tokens/shadow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shadow.d.ts","sourceRoot":"","sources":["../../../../../src/shared/theme/tokens/shadow.ts"],"names":[],"mappings":"AAKA,SAAS;AACT,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsFT,CAAC"}

package/dist/typescript/shared/theme/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/shared/theme/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACxC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAEvC,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAEzC,MAAM,MAAM,MAAM,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC;AACrC,MAAM,MAAM,OAAO,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC;AACvC,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC;AAC3C,MAAM,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC;AACnC,MAAM,MAAM,aAAa,GAAG,OAAO,MAAM,CAAC,SAAS,CAAC;AAEpD,MAAM,WAAW,KAAK;IACpB,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC;IACvC,MAAM,EAAE,OAAO,MAAM,CAAC,MAAM,CAAC;IAC7B,OAAO,EAAE,OAAO,MAAM,CAAC,OAAO,CAAC;IAC/B,SAAS,EAAE,OAAO,MAAM,CAAC,SAAS,CAAC;IACnC,OAAO,EAAE,OAAO,MAAM,CAAC,OAAO,CAAC;CAChC"}

package/dist/typescript/shared/utils/element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"element.d.ts","sourceRoot":"","sources":["../../../../src/shared/utils/element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,KAAK,YAAY,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE1E,KAAK,aAAa,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;AAE/C,eAAO,MAAM,oBAAoB,GAC/B,UAAU,SAAS,GAAG,SAAS,EAC/B,eAAe,CAAC,IAAI,EAAE,aAAa,KAAK,YAAY,2FAKrD,CAAC"}

package/dist/typescript/shared/utils/error.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"error.d.ts","sourceRoot":"","sources":["../../../../src/shared/utils/error.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,cAAc,GAAI,QAAQ,KAAK,YAI3C,CAAC"}

package/dist/typescript/shared/utils/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/shared/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,mBAAmB,SAAS,CAAC"}

package/dist/typescript/shared/utils/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/shared/utils/types.ts"],"names":[],"mappings":"AACA,MAAM,MAAM,GAAG,GAAG,GAAG,CAAC;AACtB,MAAM,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAC5C,MAAM,MAAM,WAAW,CAAC,CAAC,IAAI,CAAC,SAAS,MAAM,GACzC;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CAAE,GACtC,CAAC,CAAC;AAEN,MAAM,WAAW,aAAa;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,KAAK,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,CAAC;CAC3C;AAED;;;;;GAKG;AACH,MAAM,MAAM,aAAa,CACvB,CAAC,SAAS,MAAM,EAChB,MAAM,SAAS,MAAM,IACnB,CAAC,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC,EAAE,GAC/B,CAAC,SAAS,GAAG,MAAM,CAAC,SAAS,MAAM,EAAE,GACnC,CAAC,GACD,KAAK,GACP,KAAK,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seakoi/native-ui",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "type": "module",
   "keywords": [
     "ui-design",
@@ -9,8 +9,8 @@
   "exports": {
     ".": {
       "import": "./dist/module/index.js",
-      "types": "./dist/typescript/index.d.ts",
-      "default": "./dist/module/index.js"
+      "default": "./dist/module/index.js",
+      "types": "./dist/typescript/index.d.ts"
     },
     "./fonts/*": "./fonts/*",
     "./package.json": "./package.json"
@@ -20,7 +20,7 @@
     "babel-plugin-module-resolver": "^5.0.2",
     "react": "19.1.1",
     "react-native": "0.82.1",
-    "react-native-builder-bob": "^0.40.15",
+    "react-native-builder-bob": "0.35.2",
     "react-native-safe-area-context": "^5.6.2",
     "typescript": "^5.9.3"
   },
@@ -48,7 +48,7 @@
     ]
   },
   "release": {
-    "extends": "../../.releaserc.json",
+    "extends": "../../.releaserc.js",
     "tagFormat": "@seakoi/native-ui@${version}"
   },
   "react-native-builder-bob": {
@@ -74,7 +74,7 @@
       [
         "typescript",
         {
-          "project": "./tsconfig.json"
+          "project": "./tsconfig.build.json"
         }
       ]
     ]

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

@@ -1,194 +1,91 @@
-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 { View } from 'react-native';
 
-import { Button, PickerView, Text } from '#components/base';
-import { useTheme } from '#native-provider';
+import { Modal, PickerTrigger, Portal } from '#components/base';
+import { AddressPickerView } from '#components/base/address-picker-view';
+import { getSelectedOptions } from '#components/base/address-picker-view/utils';
+import type { PickerOptionCascade, PickerValue } from '#components/base/picker-view';
 
-import type {
-  Column,
-  PickerOptionCascade,
-  PickerValue,
-} from '../picker-view/types';
 import { useAddressPickerStyles } from './style';
-import type { AddressPickerProps, AddressPickerSelectType } from './types';
-const ADDRESS_PICKER_CONFIG: Record<
-  AddressPickerSelectType,
-  { depth: number; title: string }
-> = {
-  province: { depth: 1, title: '请选择省' },
-  city: { depth: 2, title: '请选择省市' },
-  district: { depth: 3, title: '请选择省市区' },
-  street: { depth: 4, title: '请选择省市区、街道' },
-};
+import type { AddressPickerProps } from './types';
+
 export const AddressPicker: React.FC<AddressPickerProps> = 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<PickerValue[]>(props, {
+  // 使用 ahooks 管理受控/非受控 value
+  const [value, setValue] = useControllableValue<PickerValue[]>(props, {
     defaultValue: [],
   });
 
-  /** 管理选择器的值（内部状态*/
-  const [pickerValue, setPickerValue] = useState<PickerValue[]>(value || []);
-  /** 管理上一次确认的值（用于判断是否需要更新内部状态） */
-  const [prevValue, setPrevValue] = useState(value);
-  if (value !== prevValue) {
-    setPrevValue(value);
-    setPickerValue(value || []);
-  }
-  /**
-   * @param v 选择器的值
-   * @description 当选择器的值发生变化时，更新内部状态
-   * @returns void
-   *  */
-  const handlePickerChange = useMemoizedFn((v: PickerValue[]) => {
-    console.log('选择的数据', v);
+  const [visible, setVisible] = useState(false);
 
-    setPickerValue(v);
-  });
-  /**
-   * @description 确认选择
-   * @returns void
-   * */
-  const handleConfirm = useMemoizedFn(() => {
-    const getSelectedOptions = (cols: Column[], vals: PickerValue[]) => {
-      const options: PickerOptionCascade[] = [];
-      let currentCols = cols as PickerOptionCascade[];
-
-      for (const val of vals) {
-        if (!currentCols) {
-          break;
-        }
-        const target = currentCols.find(col => col.value === val);
-        if (target) {
-          options.push(target);
-          currentCols = target.children as PickerOptionCascade[];
-        } else {
-          break;
-        }
-      }
-      return options;
-    };
+  // 计算显示文本
+  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 options = getSelectedOptions(columns, pickerValue);
-    onChange(pickerValue, options);
-    onConfirm?.(pickerValue, options);
-  });
-  /**
-   * @description 取消选择
-   * @returns void
-   * */
-  const handleCancel = useMemoizedFn(() => {
-    setPickerValue(value || []);
-    onCancel?.();
+  const handleOpen = useMemoizedFn(() => {
+    setVisible(true);
   });
 
-  /**
-   * @description 剪裁列
-   * @param columns 列
-   * @param selectType 选择类型
-   * @returns 剪裁后的列
-   * */
-  const prunedColumns = useMemo(() => {
-    const depth = ADDRESS_PICKER_CONFIG[selectType].depth || 3;
+  const handleClose = useMemoizedFn(() => {
+    setVisible(false);
+  });
 
-    const prune = (cols: Column[], currentDepth: number): Column[] => {
-      if (!cols) {
-        return [];
-      }
-      if (currentDepth >= depth) {
-        return cols.map(col => {
-          /** 剪裁列，移除子项 */
-          const { children, ...rest } = col as PickerOptionCascade;
-          return rest;
-        });
-      }
-      /** 递归剪裁子项 */
-      return cols.map(col => {
-        const option = col as PickerOptionCascade;
-        if (option.children) {
-          return {
-            ...option,
-            children: prune(
-              option.children,
-              currentDepth + 1,
-            ) as PickerOptionCascade[],
-          };
-        }
-        return option;
-      });
-    };
+  const handleConfirm = useMemoizedFn(
+    (vals: PickerValue[], options: PickerOptionCascade[]) => {
+      setValue(vals);
+      setVisible(false);
+      onConfirm?.(vals, options);
+    },
+  );
 
-    return prune(columns, 1);
-  }, [columns, selectType]);
   return (
-    <View style={styles.container}>
-      <SafeAreaView edges={['bottom', 'left', 'right']}>
-        {/* Header */}
-        <View style={styles.header}>
-          {React.isValidElement(finalTitle) ? (
-            finalTitle
-          ) : (
-            <Text style={styles.title}>{finalTitle}</Text>
-          )}
-          <TouchableOpacity
-            onPress={handleCancel}
-            style={styles.closeIcon}
-            hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
-          >
-            <CloseOutlined size={20} color={theme.palette.fontGray3} />
-          </TouchableOpacity>
-        </View>
-        {/* Picker Content */}
-        <View style={styles.pickerContainer}>
-          <PickerView
-            {...restProps}
-            columns={prunedColumns}
-            value={pickerValue}
-            onChange={handlePickerChange}
-            itemHeight={itemHeight}
-          />
-        </View>
+    <>
+      <PickerTrigger
+        displayText={displayText}
+        placeholder={placeholder}
+        disabled={disabled}
+        style={style}
+        onPress={handleOpen}
+      >
+        {children}
+      </PickerTrigger>
 
-        {/* Footer */}
-        <View style={styles.footer}>
-          <Button
-            text={cancelText}
-            variant="base"
-            theme="secondary"
-            size="large"
-            onPress={handleCancel}
-            buttonStyle={styles.button}
-          />
-          <Button
-            text={confirmText}
-            variant="base"
-            theme="primary"
-            size="large"
-            onPress={handleConfirm}
-            buttonStyle={styles.button}
-          />
-        </View>
-      </SafeAreaView>
-    </View>
+      <Portal>
+        <Modal
+          visible={visible}
+          position="bottom"
+          contentHeight="50%"
+          onClose={handleClose}
+        >
+          <View style={styles.container}>
+            <AddressPickerView
+              {...restProps}
+              columns={columns}
+              value={value}
+              onConfirm={handleConfirm}
+              onCancel={handleClose}
+              onClose={handleClose}
+            />
+          </View>
+        </Modal>
+      </Portal>
+    </>
   );
 };

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

@@ -1,54 +1,7 @@
 import { createThemedStyles } from '#native-provider';
 
-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/src/components/base/address-picker/types.ts

@@ -1,22 +1,22 @@
 import type { ReactNode } from 'react';
 
+import type { PickerTriggerControlledProps } from '#components/base';
+
+import type { AddressPickerSelectType } from '../address-picker-view/types';
 import type {
   Column,
   PickerOptionCascade,
   PickerValue,
 } from '../picker-view/types';
 
-export type AddressPickerSelectType = 'province' | 'city' | 'district' | 'street';
-
-export interface AddressPickerProps {
+export interface AddressPickerProps
+  extends PickerTriggerControlledProps<PickerValue[]> {
   /** 当前选中值 */
   value?: PickerValue[];
   /** 默认选中值 */
   defaultValue?: PickerValue[];
   /** 选项列表 */
   columns: Column[];
-  /** 选项高度 */
-  itemHeight?: number;
   /** 标题 */
   title?: ReactNode;
   /** 确认按钮文字 */
@@ -24,7 +24,7 @@ export interface AddressPickerProps {
   /** 取消按钮文字 */
   cancelText?: string;
   /** 值改变回调 */
-  onChange?: (value: PickerValue[], options: PickerOptionCascade[]) => void;
+  onChange?: (value: PickerValue[]) => void;
   /** 确认回调 */
   onConfirm?: (value: PickerValue[], options: PickerOptionCascade[]) => void;
   /** 取消回调 */
@@ -34,10 +34,3 @@ export interface AddressPickerProps {
   /** 选择类型（控制显示层级） */
   selectType?: AddressPickerSelectType;
 }
-
-export interface AddressPickerColumnProps {
-  value?: PickerValue;
-  onChange?: (value: PickerValue) => void;
-  options: PickerValue[];
-  itemHeight: number;
-}

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

@@ -0,0 +1,202 @@
+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 '#components/base';
+import type {
+  Column,
+  PickerOptionCascade,
+  PickerValue,
+} from '#components/base/picker-view';
+import { useTheme } from '#native-provider';
+
+import { useAddressPickerStyles } from './style';
+import type { AddressPickerSelectType, AddressPickerViewProps } from './types';
+import { getSelectedOptions } from './utils';
+
+const HIT_SLOP = { top: 10, bottom: 10, left: 10, right: 10 };
+
+const ADDRESS_PICKER_CONFIG: Record<
+  AddressPickerSelectType,
+  { depth: number; title: string }
+> = {
+  province: { depth: 1, title: '请选择省' },
+  city: { depth: 2, title: '请选择省市' },
+  district: { depth: 3, title: '请选择省市区' },
+  street: { depth: 4, title: '请选择省市区、街道' },
+};
+
+export const AddressPickerView: React.FC<AddressPickerViewProps> = 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<PickerValue[]>(props, {
+    defaultValue: [],
+  });
+
+  /** 管理选择器的值（内部状态*/
+  const [pickerValue, setPickerValue] = useState<PickerValue[]>(value || []);
+  /** 管理上一次确认的值（用于判断是否需要更新内部状态） */
+  const [prevValue, setPrevValue] = useState(value);
+  if (value !== prevValue) {
+    setPrevValue(value);
+    setPickerValue(value || []);
+  }
+
+  /**
+   * @param v 选择器的值
+   * @description 当选择器的值发生变化时，更新内部状态
+   * @returns void
+   *  */
+  const handlePickerChange = useMemoizedFn((v: PickerValue[]) => {
+    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: Column[], currentDepth: number): Column[] => {
+      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 as PickerOptionCascade;
+            return rest;
+          }
+          return col;
+        });
+      }
+      /** 递归剪裁子项 */
+      return cols.map(col => {
+        if (
+          typeof col === 'object' &&
+          col !== null &&
+          !Array.isArray(col) &&
+          'children' in col
+        ) {
+          const option = col as PickerOptionCascade;
+          if (option.children) {
+            return {
+              ...option,
+              children: prune(
+                option.children,
+                currentDepth + 1,
+              ) as PickerOptionCascade[],
+            };
+          }
+          return option;
+        }
+        return col;
+      });
+    };
+
+    return prune(columns, 1);
+  }, [columns, selectType]);
+  return (
+    <View style={[styles.container, style]}>
+      <SafeAreaView edges={['bottom', 'left', 'right']}>
+        {/* Header */}
+        <View style={styles.header}>
+          {React.isValidElement(finalTitle) ? (
+            finalTitle
+          ) : (
+            <Text style={styles.title}>{finalTitle}</Text>
+          )}
+          <TouchableOpacity
+            onPress={handleClose}
+            style={styles.closeIcon}
+            hitSlop={HIT_SLOP}
+          >
+            <CloseOutlined size={20} color={theme.palette.fontGray3} />
+          </TouchableOpacity>
+        </View>
+        {/* Picker Content */}
+        <View style={styles.pickerContainer}>
+          <PickerView
+            {...restProps}
+            columns={prunedColumns}
+            value={pickerValue}
+            onChange={handlePickerChange}
+            itemHeight={itemHeight}
+          />
+        </View>
+
+        {/* Footer */}
+        <View style={styles.footer}>
+          <Button
+            text={cancelText}
+            variant="base"
+            theme="secondary"
+            size="large"
+            onPress={handleCancel}
+            buttonStyle={styles.button}
+          />
+          <Button
+            text={confirmText}
+            variant="base"
+            theme="primary"
+            size="large"
+            onPress={handleConfirm}
+            buttonStyle={styles.button}
+          />
+        </View>
+      </SafeAreaView>
+    </View>
+  );
+};