wn-native-ui 0.0.0-stage → 0.1.0

package/src/components/Toast/Toast.tsx

@@ -0,0 +1,310 @@
+import type { PropsWithChildren, ReactNode } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import {
+  ActivityIndicator,
+  Animated,
+  Easing,
+  Text,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import Svg, { Path } from 'react-native-svg';
+
+import { uiTokens as token } from '../../ui/tokens';
+
+import { styles } from './styles';
+
+export type ToastPosition = 'bottom' | 'center' | 'top';
+export type ToastIcon = 'fail' | 'loading' | 'none' | 'success';
+
+export type ToastShowOptions = {
+  afterClose?: () => void;
+  content: ReactNode;
+  duration?: number;
+  icon?: ReactNode | ToastIcon;
+  maskClickable?: boolean;
+  position?: ToastPosition;
+};
+
+export type ToastProviderProps = PropsWithChildren<{
+  defaultDuration?: number;
+  defaultPosition?: ToastPosition;
+  style?: StyleProp<ViewStyle>;
+}>;
+
+export type ToastShowResult = {
+  close: () => void;
+  id: number;
+};
+
+type ToastItem = Required<Pick<ToastShowOptions, 'duration' | 'maskClickable' | 'position'>> & {
+  afterClose?: () => void;
+  content: ReactNode;
+  icon?: ReactNode | ToastIcon;
+  id: number;
+};
+
+type ToastEvent = { item: ToastItem; type: 'show' } | { id?: number; type: 'clear' };
+
+type ToastListener = (event: ToastEvent) => void;
+
+let toastSeed = 0;
+const listeners = new Set<ToastListener>();
+
+export const Toast = {
+  clear(id?: number) {
+    emitToastEvent({ id, type: 'clear' });
+  },
+  fail(content: ReactNode, options?: Omit<ToastShowOptions, 'content' | 'icon'>) {
+    return Toast.show({ ...options, content, icon: 'fail' });
+  },
+  loading(content: ReactNode = '加载中', options?: Omit<ToastShowOptions, 'content' | 'icon'>) {
+    return Toast.show({ duration: 0, ...options, content, icon: 'loading', maskClickable: false });
+  },
+  show(contentOrOptions: ReactNode | ToastShowOptions): ToastShowResult {
+    const options = normalizeToastOptions(contentOrOptions);
+    const id = createToastId();
+    emitToastEvent({
+      item: {
+        content: options.content,
+        duration: options.duration ?? defaultToastDuration,
+        icon: options.icon,
+        id,
+        maskClickable: options.maskClickable ?? true,
+        position: options.position ?? 'center',
+        afterClose: options.afterClose,
+      },
+      type: 'show',
+    });
+    return {
+      close: () => Toast.clear(id),
+      id,
+    };
+  },
+  success(content: ReactNode, options?: Omit<ToastShowOptions, 'content' | 'icon'>) {
+    return Toast.show({ ...options, content, icon: 'success' });
+  },
+};
+
+const defaultToastDuration = 2000;
+const animationDuration = 180;
+
+export function ToastProvider({
+  children,
+  defaultDuration = defaultToastDuration,
+  defaultPosition = 'center',
+  style,
+}: ToastProviderProps) {
+  const insets = useSafeAreaInsets();
+  const [toast, setToast] = useState<ToastItem | null>(null);
+  const [opacity] = useState(() => new Animated.Value(0));
+  const [scale] = useState(() => new Animated.Value(0.96));
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const closingRef = useRef(false);
+  const toastRef = useRef<ToastItem | null>(null);
+
+  const clearTimer = useCallback(() => {
+    if (!timerRef.current) return;
+    clearTimeout(timerRef.current);
+    timerRef.current = null;
+  }, []);
+
+  const closeToast = useCallback(
+    (id?: number) => {
+      const currentToast = toastRef.current;
+      if (!currentToast || closingRef.current) return;
+      if (id !== undefined && currentToast.id !== id) return;
+
+      closingRef.current = true;
+      clearTimer();
+      Animated.parallel([
+        Animated.timing(opacity, {
+          duration: animationDuration,
+          easing: Easing.in(Easing.cubic),
+          toValue: 0,
+          useNativeDriver: true,
+        }),
+        Animated.timing(scale, {
+          duration: animationDuration,
+          easing: Easing.in(Easing.cubic),
+          toValue: 0.96,
+          useNativeDriver: true,
+        }),
+      ]).start(({ finished }) => {
+        if (!finished) return;
+        const closedToast = toastRef.current;
+        toastRef.current = null;
+        setToast(null);
+        closingRef.current = false;
+        closedToast?.afterClose?.();
+      });
+    },
+    [clearTimer, opacity, scale],
+  );
+
+  const showToast = useCallback(
+    (item: ToastItem) => {
+      const nextToast: ToastItem = {
+        ...item,
+        duration: item.duration ?? defaultDuration,
+        position: item.position ?? defaultPosition,
+      };
+
+      closingRef.current = false;
+      toastRef.current = nextToast;
+      clearTimer();
+      opacity.stopAnimation();
+      scale.stopAnimation();
+      opacity.setValue(0);
+      scale.setValue(0.96);
+      setToast(nextToast);
+      Animated.parallel([
+        Animated.timing(opacity, {
+          duration: animationDuration,
+          easing: Easing.out(Easing.cubic),
+          toValue: 1,
+          useNativeDriver: true,
+        }),
+        Animated.timing(scale, {
+          duration: animationDuration,
+          easing: Easing.out(Easing.cubic),
+          toValue: 1,
+          useNativeDriver: true,
+        }),
+      ]).start();
+
+      if (nextToast.duration > 0) {
+        timerRef.current = setTimeout(() => closeToast(nextToast.id), nextToast.duration);
+      }
+    },
+    [clearTimer, closeToast, defaultDuration, defaultPosition, opacity, scale],
+  );
+
+  useEffect(() => {
+    const listener: ToastListener = (event) => {
+      if (event.type === 'show') {
+        showToast(event.item);
+        return;
+      }
+      closeToast(event.id);
+    };
+
+    listeners.add(listener);
+    return () => {
+      listeners.delete(listener);
+      clearTimer();
+    };
+  }, [clearTimer, closeToast, showToast]);
+
+  return (
+    <View style={[styles.provider, style]}>
+      {children}
+      {toast ? (
+        <View
+          pointerEvents={toast.maskClickable ? 'box-none' : 'auto'}
+          style={[
+            styles.overlay,
+            stylesByPosition[toast.position],
+            toast.position === 'top' && { paddingTop: Math.max(insets.top + token.space.s16, 60) },
+            toast.position === 'bottom' && {
+              paddingBottom: Math.max(insets.bottom + token.space.s24, 72),
+            },
+          ]}
+        >
+          <Animated.View
+            accessibilityLiveRegion="polite"
+            accessibilityRole="alert"
+            style={[
+              styles.toast,
+              hasToastIcon(toast.icon) ? styles.toastWithIcon : null,
+              { opacity, transform: [{ scale }] },
+            ]}
+          >
+            <ToastIconView icon={toast.icon} />
+            {typeof toast.content === 'string' || typeof toast.content === 'number' ? (
+              <Text style={styles.content}>{toast.content}</Text>
+            ) : (
+              toast.content
+            )}
+          </Animated.View>
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+const stylesByPosition: Record<ToastPosition, StyleProp<ViewStyle>> = {
+  bottom: styles.overlayBottom,
+  center: styles.overlayCenter,
+  top: styles.overlayTop,
+};
+
+function ToastIconView({ icon }: { icon?: ReactNode | ToastIcon }) {
+  if (!hasToastIcon(icon)) {
+    return null;
+  }
+
+  if (icon === 'loading') {
+    return <ActivityIndicator color={token.color.onTint} size="small" />;
+  }
+
+  if (icon === 'success') {
+    return (
+      <Svg fill="none" height={28} viewBox="0 0 28 28" width={28}>
+        <Path
+          d="m8 14.4 3.8 3.8L20.5 9"
+          stroke={token.color.onTint}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2.4}
+        />
+      </Svg>
+    );
+  }
+
+  if (icon === 'fail') {
+    return (
+      <Svg fill="none" height={28} viewBox="0 0 28 28" width={28}>
+        <Path
+          d="M9 9 19 19M19 9 9 19"
+          stroke={token.color.onTint}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2.4}
+        />
+      </Svg>
+    );
+  }
+
+  return <>{icon}</>;
+}
+
+function hasToastIcon(icon?: ReactNode | ToastIcon) {
+  return Boolean(icon && icon !== 'none');
+}
+
+function createToastId() {
+  toastSeed += 1;
+  return toastSeed;
+}
+
+function emitToastEvent(event: ToastEvent) {
+  listeners.forEach((listener) => listener(event));
+}
+
+function normalizeToastOptions(contentOrOptions: ReactNode | ToastShowOptions): ToastShowOptions {
+  if (
+    contentOrOptions &&
+    typeof contentOrOptions === 'object' &&
+    !Array.isArray(contentOrOptions) &&
+    'content' in contentOrOptions
+  ) {
+    return contentOrOptions;
+  }
+
+  return {
+    content: contentOrOptions,
+  };
+}

package/src/components/Toast/index.ts

@@ -0,0 +1,8 @@
+export { Toast, ToastProvider } from './Toast';
+export type {
+  ToastIcon,
+  ToastPosition,
+  ToastProviderProps,
+  ToastShowOptions,
+  ToastShowResult,
+} from './Toast';

package/src/components/Toast/styles.ts

@@ -0,0 +1,58 @@
+import { StyleSheet } from 'react-native';
+
+import { uiTokens as token } from '../../ui/tokens';
+
+export const styles = StyleSheet.create({
+  content: {
+    color: token.color.onTint,
+    textAlign: 'center',
+    ...token.type.footnote,
+    fontWeight: '600',
+  },
+  overlay: {
+    bottom: 0,
+    left: 0,
+    paddingHorizontal: token.space.s24,
+    position: 'absolute',
+    right: 0,
+    top: 0,
+    zIndex: 999,
+  },
+  overlayBottom: {
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+  },
+  overlayCenter: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  overlayTop: {
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+  },
+  provider: {
+    flex: 1,
+  },
+  toast: {
+    alignItems: 'center',
+    backgroundColor: 'rgba(25, 43, 50, 0.88)',
+    borderRadius: token.radius.large,
+    maxWidth: '88%',
+    minHeight: 44,
+    minWidth: 120,
+    paddingHorizontal: token.space.s16,
+    paddingVertical: token.space.s12,
+    shadowColor: token.color.tabBarShadow,
+    shadowOffset: { height: 8, width: 0 },
+    shadowOpacity: 0.14,
+    shadowRadius: 20,
+    elevation: token.shadow.floatingElevation,
+  },
+  toastWithIcon: {
+    gap: token.space.s8,
+    minHeight: 96,
+    minWidth: 112,
+    paddingHorizontal: token.space.s20,
+    paddingVertical: token.space.s16,
+  },
+});

package/src/components/Upload/README.md

@@ -0,0 +1,93 @@
+# Upload 上传
+
+## 作用
+
+`Upload` 统一承载头像、图片宫格和文件列表的选择、单文件校验、上传任务状态、删除与重试。组件参考设计稿中的 `Upload · picture`，每个条目独立显示待上传、上传中、上传成功和上传失败状态。
+
+## 适用场景
+
+- `listType="avatar"`：单张头像。
+- `listType="picture"`：多图宫格、凭证和成长记录。
+- `listType="file"`：PDF、Office 等普通文件列表。
+
+不适用于页面专属附件卡片、业务接口编排或服务端附件关系维护。字段标签、必填标识和表单错误由 `Field` / `Form.Item` 负责。
+
+## 基础用法
+
+```tsx
+const [files, setFiles] = useState<UploadItem[]>([]);
+
+<Upload
+  accept={['image/jpeg', 'image/png']}
+  maxCount={9}
+  maxSize={10 * 1024 * 1024}
+  multiple
+  onChange={setFiles}
+  upload={async (asset) => {
+    const response = await repository.upload(asset);
+    return { fileId: response.id, url: response.url };
+  }}
+  value={files}
+/>;
+```
+
+不传 `upload` 时，选择结果保持 `pending`，由表单最终提交时统一上传：
+
+```tsx
+<Form.Item label="荣誉资料" name="attachments" trigger="onChange">
+  <Upload listType="file" maxCount={10} />
+</Form.Item>
+```
+
+## 核心 Props
+
+| 属性                   | 说明                                   | 默认值                                 |
+| ---------------------- | -------------------------------------- | -------------------------------------- |
+| `value / defaultValue` | 受控值 / 非受控初始值                  | `[]`                                   |
+| `onChange`             | 任一条目状态或列表变化回调             | -                                      |
+| `listType`             | `avatar / picture / file`              | `picture`                              |
+| `sources`              | `camera / library / document` 来源     | 图片为相机、相册、文件；文件列表为文档 |
+| `accept`               | MIME 或扩展名白名单，支持 `image/*`    | 图片为 `image/*`，文件为 `*/*`         |
+| `maxCount`             | 最大条目数                             | 图片 `9`，其他 `1`                     |
+| `maxSize`              | 单个文件的最大字节数                   | -                                      |
+| `multiple`             | 是否允许系统选择器多选                 | 根据 `maxCount` 推断                   |
+| `upload`               | 自动上传函数；未提供时保留 `pending`   | -                                      |
+| `beforeAdd`            | 上传前转换或返回 `false` 忽略文件      | -                                      |
+| `onReject`             | 类型、数量、大小、权限或选择器失败回调 | -                                      |
+| `onRemove`             | 删除前回调，返回 `false` 可阻止删除    | -                                      |
+| `previewable`          | 成功图片点击后打开 `ImagePreview`      | `true`                                 |
+| `deletable`            | 是否显示删除操作                       | `true`                                 |
+| `readOnly`             | 禁止选择、删除和重试，但允许预览       | `false`                                |
+| `disabled`             | 整体禁用，包括预览                     | `false`                                |
+
+## 值与状态
+
+`UploadItem.status` 为：
+
+- `pending`：已选择，等待调用方提交。
+- `uploading`：正在执行 `upload`；只有上传函数调用 `onProgress` 时才显示真实百分比，不伪造进度。
+- `uploaded`：上传成功，可点击图片进入独立预览层。
+- `failed`：上传失败；保留“重试”和右上角删除。
+
+`UploadItem` 只保存通用文件信息，不包含业务 `scene`、API DTO 或 repository 类型。系统选择器返回的原始对象保存在 `raw`，来源保存在 `source`；调用方可以使用 `extra` 保存不可见的业务映射。
+
+## 校验规则
+
+- `maxSize` 只校验单个图片或文件，不累计总大小。
+- 校验发生在上传函数执行前；超限文件不进入列表，也不调用 `upload`。
+- 多选时仅拒绝不合规文件，其他文件继续添加。
+- 无法从系统选择器获得 `size` 时不猜测大小，由后端继续执行最终限制。
+
+## 交互与无障碍
+
+- 图片删除视觉为右上角小叉，外层点击区域固定为 `44 × 44pt`。
+- 只有 `uploaded` 图片可以打开预览；失败图片同时保留重试和删除。
+- 上传状态包含文字，不只依赖颜色。
+- 多来源选择直接组合公共 `BottomSheet`，统一展示拍照、相册和文件入口；来源列表保留为 `Upload` 内部实现，不公开 `UploadSourceSheet`。
+- 当前上传函数完成后才能确认成功；移除上传中条目不会取消已经发出的网络请求，调用方需要避免因此生成孤立附件。
+
+## 组件边界
+
+- `Upload` 组合公共 `ImagePreview`，但不直接请求 API、不读取 repository、route 或业务 store。
+- 服务端删除、附件解绑、鉴权图片请求头和上传 `scene` 均由调用方处理。
+- 展示入口：`ComponentIndex` 的 `Upload + ImagePreview` 区域。