@seakoi/native-ui 1.0.0

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

@@ -0,0 +1,194 @@
+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 { useTheme } from '#native-provider';
+
+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: '请选择省市区、街道' },
+};
+export const AddressPicker: React.FC<AddressPickerProps> = props => {
+  const {
+    confirmText = '确定',
+    cancelText = '取消',
+    onCancel,
+    onConfirm,
+    columns,
+    itemHeight = 40,
+    selectType = 'district',
+    title,
+    ...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, {
+    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);
+
+    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 options = getSelectedOptions(columns, pickerValue);
+    onChange(pickerValue, options);
+    onConfirm?.(pickerValue, options);
+  });
+  /**
+   * @description 取消选择
+   * @returns void
+   * */
+  const handleCancel = useMemoizedFn(() => {
+    setPickerValue(value || []);
+    onCancel?.();
+  });
+
+  /**
+   * @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 => {
+          /** 剪裁列，移除子项 */
+          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;
+      });
+    };
+
+    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>
+
+        {/* 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>
+  );
+};

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

@@ -0,0 +1,2 @@
+export * from './address-picker';
+export type * from './types';

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

@@ -0,0 +1,54 @@
+import { createThemedStyles } from '#native-provider';
+
+export const useAddressPickerStyles = createThemedStyles(theme => ({
+  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

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

package/src/components/base/async-boundary/async-boundary.tsx

@@ -0,0 +1,87 @@
+import { useLatest } from 'ahooks';
+import React, { useMemo } from 'react';
+import { View } from 'react-native';
+
+import { Button, Loading, Result, type ResultType } from '#components/base';
+import { isNetworkError } from '#shared/utils';
+
+import { useAsyncBoundaryStyles } from './style';
+import { type AsyncBoundaryProps, AsyncBoundaryStatus } from './types';
+
+export const AsyncBoundary: React.FC<AsyncBoundaryProps> = ({
+  status = AsyncBoundaryStatus.COMPLETE,
+  loading,
+  error,
+  onReload,
+  reloadText = '重新加载',
+  style,
+  loadingSize = 'large',
+  loadingComponent,
+  emptyType = 'empty-noDetail',
+  emptyComponent,
+  errorComponent,
+  children,
+}) => {
+  const styles = useAsyncBoundaryStyles();
+  const onReloadRef = useLatest(onReload);
+
+  /** 计算实际状态（loading 和 error 优先级高于 status） */
+  const currentStatus = useMemo<AsyncBoundaryStatus>(() => {
+    if (loading) return AsyncBoundaryStatus.LOADING;
+    if (error) return AsyncBoundaryStatus.ERROR;
+    return status;
+  }, [status, error, loading]);
+
+  /** 渲染 Loading 状态 */
+  const renderLoading = () => {
+    if (loadingComponent) return loadingComponent;
+    return <Loading size={loadingSize} />;
+  };
+
+  /** 渲染 Error 状态 */
+  const renderError = () => {
+    if (errorComponent) return errorComponent;
+
+    const errorType: ResultType = isNetworkError(error)
+      ? 'error-network'
+      : 'error-other';
+
+    return (
+      <Result
+        type={errorType}
+        extra={
+          onReloadRef.current && (
+            <Button text={reloadText} size="medium" onPress={onReloadRef.current} />
+          )
+        }
+      />
+    );
+  };
+
+  /** 渲染 Empty 状态 */
+  const renderEmpty = () => {
+    if (emptyComponent) return emptyComponent;
+    return <Result type={emptyType} />;
+  };
+
+  // 完成状态直接返回 children，避免多余的 View 包裹
+  if (currentStatus === AsyncBoundaryStatus.COMPLETE) {
+    return children;
+  }
+
+  // 根据状态渲染对应内容
+  const renderContent = () => {
+    switch (currentStatus) {
+      case AsyncBoundaryStatus.LOADING:
+        return renderLoading();
+      case AsyncBoundaryStatus.ERROR:
+        return renderError();
+      case AsyncBoundaryStatus.EMPTY:
+        return renderEmpty();
+      default:
+        return null;
+    }
+  };
+
+  return <View style={[styles.container, style]}>{renderContent()}</View>;
+};

package/src/components/base/async-boundary/index.ts

@@ -0,0 +1,2 @@
+export * from './async-boundary';
+export * from './types';

package/src/components/base/async-boundary/style/index.ts

@@ -0,0 +1,9 @@
+import { createThemedStyles } from '#native-provider';
+
+export const useAsyncBoundaryStyles = createThemedStyles(() => ({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+}));

package/src/components/base/async-boundary/types.ts

@@ -0,0 +1,82 @@
+import type { PropsWithChildren } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+import type { LoadingProps, ResultType } from '#components/base';
+
+/**
+ * 异步边界状态枚举
+ */
+export enum AsyncBoundaryStatus {
+  /** 加载中 */
+  LOADING = 'loading',
+  /** 错误 */
+  ERROR = 'error',
+  /** 空数据 */
+  EMPTY = 'empty',
+  /** 完成 */
+  COMPLETE = 'complete',
+}
+
+/**
+ * AsyncBoundary 组件属性
+ */
+export interface AsyncBoundaryProps extends PropsWithChildren {
+  /**
+   * 异步状态
+   * @default AsyncBoundaryStatus.COMPLETE
+   */
+  status?: AsyncBoundaryStatus;
+
+  /**
+   * 加载状态（优先级高于 status）
+   */
+  loading?: boolean;
+
+  /**
+   * 错误信息（优先级高于 status）
+   */
+  error?: Error;
+
+  /**
+   * 重新加载回调
+   */
+  onReload?: () => void;
+
+  /**
+   * 重新加载按钮文案
+   * @default '重新加载'
+   */
+  reloadText?: string;
+
+  /**
+   * 容器样式
+   */
+  style?: StyleProp<ViewStyle>;
+
+  /**
+   * Loading 组件尺寸
+   * @default 'large'
+   */
+  loadingSize?: LoadingProps['size'];
+
+  /**
+   * 自定义 Loading 组件
+   */
+  loadingComponent?: React.ReactNode;
+
+  /**
+   * 空状态类型
+   * @default 'empty-noDetail'
+   */
+  emptyType?: ResultType;
+
+  /**
+   * 自定义空状态组件
+   */
+  emptyComponent?: React.ReactNode;
+
+  /**
+   * 自定义错误组件
+   */
+  errorComponent?: React.ReactNode;
+}

package/src/components/base/avatar/avatar-context.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export interface AvatarContextValue {
+  /** 头像大小 */
+  size?: number;
+  /** 头像形状 */
+  variant?: 'square' | 'rounded' | 'circle';
+}
+export const AvatarContext = React.createContext<AvatarContextValue | null>(null);

package/src/components/base/avatar/avatar-group.tsx

@@ -0,0 +1,101 @@
+import React, { Children, useMemo } from 'react';
+import { type StyleProp, type TextStyle, View, type ViewStyle } from 'react-native';
+
+import { Flex } from '#components/base';
+import { useTheme } from '#native-provider';
+
+import { Avatar } from './avatar';
+import { AvatarContext, type AvatarContextValue } from './avatar-context';
+
+const CASCADING_OFFSET = 12;
+
+type CascadingDirection = 'left-up' | 'right-up';
+type AvatarGroupMax =
+  | number
+  | {
+      count: number;
+      textStyle?: StyleProp<TextStyle>;
+      containerStyle?: StyleProp<ViewStyle>;
+    };
+export interface AvatarGroupProps extends AvatarContextValue {
+  /** 最大显示数量 */
+  max?: AvatarGroupMax;
+  /** 子元素 */
+  children: React.ReactNode;
+  /** 折叠层级 */
+  cascading?:
+    | CascadingDirection
+    | { direction: CascadingDirection; offset?: number };
+  /** 渲染超出最大数量的头像 */
+  renderSurplus?: (surplus: number) => React.ReactElement | string;
+}
+export const AvatarGroup: React.FC<AvatarGroupProps> = props => {
+  const theme = useTheme();
+
+  const cascading = useMemo(() => {
+    if (typeof props.cascading === 'object') {
+      return {
+        direction: props.cascading.direction,
+        offset: props.cascading.offset ?? CASCADING_OFFSET,
+      };
+    }
+    return {
+      offset: CASCADING_OFFSET,
+      direction: props.cascading ?? 'left-up',
+    };
+  }, [props.cascading]);
+
+  const avatarGroupMax = useMemo(() => {
+    if (typeof props.max === 'object') return props.max;
+    return { count: props.max } as Partial<Exclude<AvatarGroupMax, number>>;
+  }, [props.max]);
+
+  const childrenArray = Children.toArray(props.children);
+  const maxShowAvatarCount = avatarGroupMax.count ?? childrenArray.length;
+  const surplus = childrenArray.length - maxShowAvatarCount;
+
+  return (
+    <AvatarContext.Provider
+      value={{
+        size: props.size,
+        variant: props.variant,
+      }}
+    >
+      <Flex gap={theme.spacing.none}>
+        {childrenArray.slice(0, maxShowAvatarCount).map((child, index) => {
+          return (
+            <View
+              key={index}
+              style={[
+                !!index && { marginLeft: -cascading.offset },
+                { zIndex: cascading.direction !== 'left-up' ? index : -index },
+              ]}
+            >
+              {child}
+            </View>
+          );
+        })}
+        {!!surplus && (
+          <View
+            style={[
+              { marginLeft: -cascading.offset },
+              {
+                zIndex:
+                  cascading.direction !== 'left-up'
+                    ? maxShowAvatarCount
+                    : -maxShowAvatarCount,
+              },
+            ]}
+          >
+            <Avatar
+              textStyle={avatarGroupMax?.textStyle}
+              containerStyle={avatarGroupMax?.containerStyle}
+            >
+              {props.renderSurplus?.(surplus) ?? `+${surplus}`}
+            </Avatar>
+          </View>
+        )}
+      </Flex>
+    </AvatarContext.Provider>
+  );
+};