react-native-system-ui 0.0.1-beta0 → 0.0.2

package/dist/es/uploader/Uploader.js

@@ -0,0 +1,534 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { ActivityIndicator, Platform, Pressable, StyleSheet, Text, View } from 'react-native';
+import { useUploaderTokens } from './tokens';
+import { useControllableValue } from '../../hooks';
+import Image from '../image';
+import ImagePreview from '../image-preview';
+import { toArray } from '../../utils/array';
+import { parseNumber } from '../../utils/number';
+import { isFunction, isString } from '../../utils/validate';
+import { isImageFile, resolveSource, normalizeMaxSize, filterFiles, readFileContent, processBeforeRead } from './utils';
+const statusDefaults = {
+  pending: '上传中',
+  failed: '上传失败'
+};
+const Uploader = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    tokensOverride,
+    accept = 'image/*',
+    multiple = false,
+    capture,
+    maxSize,
+    maxCount = Number.MAX_VALUE,
+    resultType = 'dataUrl',
+    previewSize,
+    imageFit = 'cover',
+    previewImage = true,
+    previewFullImage = true,
+    previewOptions,
+    previewCoverRender,
+    showUpload = true,
+    uploadText,
+    uploadIcon,
+    disabled = false,
+    readOnly = false,
+    deletable = true,
+    deleteRender,
+    statusTextRender,
+    children,
+    beforeRead,
+    onOversize,
+    onUpload,
+    onDelete,
+    onClickPreview,
+    onClosePreview,
+    onClickUpload,
+    isImageUrl,
+    upload,
+    style,
+    ...rest
+  } = props;
+  const uploadDisabled = disabled || readOnly;
+  const tokens = useUploaderTokens(tokensOverride);
+  const [rawItems, triggerChange] = useControllableValue(props, {
+    defaultValue: []
+  });
+  const items = toArray(rawItems ?? []);
+  const itemsRef = useRef(items);
+  useEffect(() => {
+    itemsRef.current = items;
+  }, [items]);
+  const normalizeKeyRef = useRef(0);
+  const normalizeItem = (item, keyFallback) => {
+    const key = item.key ?? keyFallback ?? `rv-uploader-${normalizeKeyRef.current++}`;
+    return item.key === key ? item : {
+      ...item,
+      key
+    };
+  };
+  const objectUrlsRef = useRef(new Set());
+  const createObjectUrl = file => {
+    if (typeof URL === 'undefined' || !isFunction(URL.createObjectURL)) return undefined;
+    const url = URL.createObjectURL(file);
+    objectUrlsRef.current.add(url);
+    return url;
+  };
+  const revokeObjectUrl = url => {
+    if (!url) return;
+    if (!objectUrlsRef.current.has(url)) return;
+    if (typeof URL === 'undefined' || !isFunction(URL.revokeObjectURL)) return;
+    URL.revokeObjectURL(url);
+    objectUrlsRef.current.delete(url);
+  };
+  const prevItemUrlsRef = useRef(new Set());
+  useEffect(() => {
+    const current = new Set();
+    items.forEach(item => {
+      if (isString(item.url)) {
+        current.add(item.url);
+      }
+    });
+    prevItemUrlsRef.current.forEach(url => {
+      if (!current.has(url)) {
+        revokeObjectUrl(url);
+      }
+    });
+    prevItemUrlsRef.current = current;
+  }, [items]);
+  useEffect(() => {
+    return () => {
+      objectUrlsRef.current.forEach(url => {
+        if (typeof URL !== 'undefined' && isFunction(URL.revokeObjectURL)) {
+          URL.revokeObjectURL(url);
+        }
+      });
+      objectUrlsRef.current.clear();
+    };
+  }, []);
+  const setItemsSafe = next => {
+    const normalized = next.map(it => normalizeItem(it));
+    itemsRef.current = normalized;
+    triggerChange(normalized);
+  };
+  const updateItems = updater => {
+    setItemsSafe(updater(itemsRef.current));
+  };
+  const maxCountValue = Math.max(0, Math.floor(parseNumber(maxCount, Number.MAX_VALUE)));
+  const maxSizeValue = normalizeMaxSize(maxSize, Number.MAX_VALUE);
+  const sizeValue = parseNumber(previewSize, tokens.size);
+  const idRef = useRef(0);
+  const [tasks, setTasks] = useState([]);
+  const tasksRef = useRef(tasks);
+  useEffect(() => {
+    tasksRef.current = tasks;
+  }, [tasks]);
+  const [previewVisible, setPreviewVisible] = useState(false);
+  const [previewIndex, setPreviewIndex] = useState(0);
+  const imageFiles = items.filter(item => isImageFile(item, isImageUrl?.(item)));
+  const previewImages = imageFiles.map(item => item.source ?? item.url ?? item.thumbnail).filter(value => value !== null && value !== undefined);
+  const handleWebFiles = async files => {
+    if (uploadDisabled) return;
+    if (!files.length) return;
+    let nextFiles = files;
+    if (beforeRead) {
+      const processed = await Promise.all(nextFiles.map(file => processBeforeRead(file, nextFiles, beforeRead)));
+      nextFiles = processed.filter(Boolean);
+    }
+    if (!nextFiles.length) return;
+    if (maxCountValue > 0) {
+      const exceed = itemsRef.current.length + tasksRef.current.length + nextFiles.length - maxCountValue;
+      if (exceed > 0) {
+        nextFiles = nextFiles.slice(0, Math.max(0, nextFiles.length - exceed));
+      }
+    }
+    if (!nextFiles.length) return;
+    const {
+      valid,
+      invalid
+    } = filterFiles(nextFiles, maxSizeValue);
+    if (invalid.length) onOversize?.(invalid);
+    nextFiles = valid;
+    if (!nextFiles.length) return;
+    const newTasks = nextFiles.map(file => ({
+      id: idRef.current++,
+      status: 'pending',
+      file,
+      url: file?.type?.indexOf('image') === 0 ? createObjectUrl(file) : undefined
+    }));
+    setTasks(prev => [...prev, ...newTasks]);
+    newTasks.forEach(task => {
+      void (async () => {
+        try {
+          let result = {};
+          if (upload) {
+            result = await upload(task.file);
+          } else {
+            const content = await readFileContent(task.file, resultType, createObjectUrl);
+            if (content) {
+              result.url = content;
+            }
+            result.file = task.file;
+            result.key = task.id;
+          }
+          const normalized = normalizeItem({
+            ...result,
+            file: result.file ?? task.file
+          }, result.key ?? task.id);
+          setTasks(prev => {
+            const current = prev.find(t => t.id === task.id);
+            if (current?.url && current.url !== normalized.url) {
+              revokeObjectUrl(current.url);
+            }
+            return prev.filter(t => t.id !== task.id);
+          });
+          updateItems(prev => {
+            if (maxCountValue > 0 && prev.length >= maxCountValue) {
+              return prev;
+            }
+            return [...prev, normalized];
+          });
+        } catch {
+          setTasks(prev => prev.map(t => t.id === task.id ? {
+            ...t,
+            status: 'failed'
+          } : t));
+        }
+      })();
+    });
+  };
+  const webInputRef = useRef(null);
+  const webHandlerRef = useRef(() => {});
+  webHandlerRef.current = handleWebFiles;
+  useEffect(() => {
+    if (Platform.OS !== 'web') return;
+    if (typeof document === 'undefined') return;
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.style.position = 'fixed';
+    input.style.left = '-9999px';
+    input.style.width = '1px';
+    input.style.height = '1px';
+    input.style.opacity = '0';
+    const onChange = () => {
+      const raw = input.files;
+      const files = raw ? Array.from(raw) : [];
+      input.value = '';
+      webHandlerRef.current(files);
+    };
+    input.addEventListener('change', onChange);
+    document.body.appendChild(input);
+    webInputRef.current = input;
+    return () => {
+      input.removeEventListener('change', onChange);
+      if (input.parentNode) {
+        input.parentNode.removeChild(input);
+      }
+      if (webInputRef.current === input) {
+        webInputRef.current = null;
+      }
+    };
+  }, []);
+  useEffect(() => {
+    const input = webInputRef.current;
+    if (!input) return;
+    input.accept = accept;
+    input.multiple = multiple;
+    input.disabled = uploadDisabled;
+    if (capture) {
+      input.setAttribute('capture', capture);
+    } else {
+      input.removeAttribute('capture');
+    }
+  }, [accept, capture, multiple, uploadDisabled]);
+  const canShowUpload = showUpload && (maxCountValue === 0 || items.length + tasks.length < maxCountValue);
+  const chooseFile = () => {
+    if (uploadDisabled) return;
+    if (Platform.OS === 'web' && webInputRef.current) {
+      webInputRef.current.click();
+      return;
+    }
+    if (!onUpload) return;
+    Promise.resolve(onUpload()).then(result => {
+      if (!result) return;
+      const next = Array.isArray(result) ? result : [result];
+      if (!next.length) return;
+      updateItems(prev => {
+        const available = maxCountValue > 0 ? Math.max(0, maxCountValue - prev.length) : next.length;
+        if (available <= 0) return prev;
+        return [...prev, ...next.slice(0, available).map(item => normalizeItem(item))];
+      });
+    }).catch(error => {
+      if (typeof __DEV__ !== 'undefined' && __DEV__) console.warn('[Uploader] onUpload rejected:', error);
+    });
+  };
+  const closeImagePreview = () => setPreviewVisible(false);
+  useImperativeHandle(ref, () => ({
+    chooseFile,
+    closeImagePreview
+  }), [chooseFile]);
+  const handleUploadPress = async event => {
+    if (uploadDisabled) return;
+    onClickUpload?.(event);
+    chooseFile();
+  };
+  const handleDelete = async (item, index) => {
+    if (onDelete) {
+      let result;
+      try {
+        result = await onDelete(item);
+      } catch {
+        return;
+      }
+      if (result === false) {
+        return;
+      }
+    }
+    updateItems(prev => {
+      const removed = prev[index];
+      if (removed?.url) {
+        revokeObjectUrl(removed.url);
+      }
+      return prev.filter((_, idx) => idx !== index);
+    });
+  };
+  const handlePreview = (item, index) => {
+    onClickPreview?.(item, index);
+    if (!previewFullImage) return;
+    const imageIndex = imageFiles.indexOf(item);
+    if (imageIndex < 0) return;
+    setPreviewIndex(imageIndex);
+    setPreviewVisible(true);
+  };
+  const closePreview = () => {
+    setPreviewVisible(false);
+    onClosePreview?.();
+  };
+  const renderStatus = status => {
+    if (!status) return null;
+    const baseStyle = [styles.status, {
+      backgroundColor: tokens.colors.maskBackground
+    }];
+    if (status === 'pending') {
+      return /*#__PURE__*/React.createElement(View, {
+        style: baseStyle,
+        testID: "rv-uploader-status-pending"
+      }, /*#__PURE__*/React.createElement(ActivityIndicator, {
+        color: tokens.colors.maskText
+      }), /*#__PURE__*/React.createElement(Text, {
+        style: [styles.statusText, {
+          color: tokens.colors.maskText
+        }]
+      }, statusTextRender?.(status) ?? statusDefaults.pending));
+    }
+    if (status === 'failed') {
+      return /*#__PURE__*/React.createElement(View, {
+        style: baseStyle,
+        testID: "rv-uploader-status-failed"
+      }, /*#__PURE__*/React.createElement(Text, {
+        style: [styles.statusText, {
+          color: tokens.colors.failed
+        }]
+      }, statusTextRender?.(status) ?? statusDefaults.failed));
+    }
+    return null;
+  };
+  const boxStyle = {
+    width: sizeValue,
+    height: sizeValue,
+    marginRight: tokens.gap,
+    marginBottom: tokens.gap
+  };
+  const frameStyle = {
+    borderRadius: tokens.radius,
+    backgroundColor: tokens.colors.background,
+    borderColor: tokens.colors.border
+  };
+  const placeholderNameStyle = [styles.placeholderName, {
+    color: tokens.colors.text
+  }];
+  const deleteStyle = [styles.delete, {
+    backgroundColor: tokens.colors.deleteBackground
+  }];
+  const deleteIconStyle = {
+    color: tokens.colors.deleteIcon
+  };
+  const renderPlaceholder = name => /*#__PURE__*/React.createElement(View, {
+    style: styles.placeholder
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: styles.placeholderIcon
+  }, "FILE"), name && /*#__PURE__*/React.createElement(Text, {
+    style: placeholderNameStyle,
+    numberOfLines: 1
+  }, name));
+  const renderDelete = (onPress, testID) => deleteRender ? deleteRender(onPress) : /*#__PURE__*/React.createElement(Pressable, {
+    hitSlop: 8,
+    onPress: onPress,
+    testID: testID
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: deleteIconStyle
+  }, "\xD7"));
+  const removeTask = id => {
+    setTasks(prev => {
+      const current = prev.find(t => t.id === id);
+      if (current?.url) {
+        revokeObjectUrl(current.url);
+      }
+      return prev.filter(t => t.id !== id);
+    });
+  };
+  return /*#__PURE__*/React.createElement(View, _extends({
+    style: [styles.container, style]
+  }, rest, {
+    testID: "rv-uploader"
+  }), /*#__PURE__*/React.createElement(View, {
+    style: styles.items
+  }, previewImage ? /*#__PURE__*/React.createElement(React.Fragment, null, items.map((item, index) => {
+    const isImage = isImageFile(item, isImageUrl?.(item));
+    const source = resolveSource(item, isImage);
+    const fileName = typeof item.file?.name === 'string' ? item.file.name : typeof item.url === 'string' ? item.url : typeof item.thumbnail === 'string' ? item.thumbnail : '';
+    return /*#__PURE__*/React.createElement(View, {
+      key: item.key ?? index,
+      style: boxStyle,
+      testID: `rv-uploader-item-${index}`
+    }, /*#__PURE__*/React.createElement(Pressable, {
+      style: ({
+        pressed
+      }) => [styles.preview, frameStyle, pressed && styles.pressed],
+      onPress: () => handlePreview(item, index),
+      testID: `rv-uploader-preview-${index}`
+    }, source ? /*#__PURE__*/React.createElement(Image, {
+      source: source,
+      style: styles.image,
+      fit: imageFit
+    }) : renderPlaceholder(fileName), previewCoverRender && /*#__PURE__*/React.createElement(View, {
+      style: styles.cover,
+      pointerEvents: "none"
+    }, previewCoverRender(item)), renderStatus(item.status), deletable && /*#__PURE__*/React.createElement(View, {
+      style: deleteStyle
+    }, renderDelete(() => handleDelete(item, index), `rv-uploader-delete-${index}`))));
+  }), tasks.map(task => /*#__PURE__*/React.createElement(View, {
+    key: `task-${task.id}`,
+    style: boxStyle,
+    testID: `rv-uploader-task-${task.id}`
+  }, /*#__PURE__*/React.createElement(View, {
+    style: [styles.preview, frameStyle]
+  }, task.url ? /*#__PURE__*/React.createElement(Image, {
+    source: {
+      uri: task.url
+    },
+    style: styles.image,
+    fit: imageFit
+  }) : renderPlaceholder(task.file?.name), renderStatus(task.status), task.status !== 'pending' && /*#__PURE__*/React.createElement(View, {
+    style: deleteStyle
+  }, renderDelete(() => removeTask(task.id), `rv-uploader-task-delete-${task.id}`)))))) : null, canShowUpload ? /*#__PURE__*/React.createElement(Pressable, {
+    style: ({
+      pressed
+    }) => [styles.upload, boxStyle, frameStyle, pressed && styles.pressed, uploadDisabled && styles.disabled],
+    onPress: handleUploadPress,
+    disabled: uploadDisabled,
+    testID: "rv-uploader-upload"
+  }, children ?? /*#__PURE__*/React.createElement(View, {
+    style: styles.uploadContent
+  }, uploadIcon ?? /*#__PURE__*/React.createElement(Text, {
+    style: [styles.uploadIcon, {
+      color: tokens.colors.icon
+    }]
+  }, "+"), uploadText ? /*#__PURE__*/React.createElement(Text, {
+    style: [styles.uploadText, {
+      color: tokens.colors.text
+    }]
+  }, uploadText) : null)) : null), previewFullImage ? /*#__PURE__*/React.createElement(ImagePreview, _extends({}, previewOptions, {
+    visible: previewVisible,
+    images: previewImages,
+    startPosition: previewIndex,
+    onClose: params => {
+      previewOptions?.onClose?.(params);
+      closePreview();
+    },
+    onClosed: () => {
+      previewOptions?.onClosed?.();
+      setPreviewVisible(false);
+    }
+  })) : null);
+});
+const styles = StyleSheet.create({
+  container: {},
+  items: {
+    flexDirection: 'row',
+    flexWrap: 'wrap'
+  },
+  preview: {
+    flex: 1,
+    borderWidth: StyleSheet.hairlineWidth,
+    overflow: 'hidden'
+  },
+  pressed: {
+    opacity: 0.85
+  },
+  disabled: {
+    opacity: 0.65
+  },
+  image: {
+    width: '100%',
+    height: '100%'
+  },
+  placeholder: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 6
+  },
+  placeholderIcon: {
+    fontSize: 20,
+    fontWeight: '600'
+  },
+  placeholderName: {
+    marginTop: 6,
+    fontSize: 11
+  },
+  cover: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  status: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: 4
+  },
+  statusText: {
+    fontSize: 12
+  },
+  delete: {
+    position: 'absolute',
+    top: 4,
+    right: 4,
+    minWidth: 20,
+    minHeight: 20,
+    borderRadius: 12,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 4
+  },
+  upload: {
+    borderWidth: StyleSheet.hairlineWidth,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  uploadContent: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: 4
+  },
+  uploadIcon: {
+    fontSize: 24,
+    fontWeight: '600'
+  },
+  uploadText: {
+    fontSize: 12
+  }
+});
+Uploader.displayName = 'Uploader';
+export default Uploader;

package/dist/es/uploader/index.js

@@ -0,0 +1,4 @@
+import Uploader from './Uploader';
+export { useUploaderTokens } from './tokens';
+export default Uploader;
+export { Uploader };

package/dist/es/uploader/tokens.js

@@ -0,0 +1,26 @@
+import { createComponentTokensHook } from '../../design-system';
+const createTokens = foundations => {
+  const {
+    palette,
+    spacing,
+    radii
+  } = foundations;
+  const onPrimary = palette.primary.foreground ?? '#ffffff';
+  return {
+    size: 80,
+    gap: spacing.sm,
+    radius: radii.md,
+    colors: {
+      background: palette.default[100],
+      border: palette.default[200],
+      text: palette.default[500],
+      icon: palette.default[500],
+      deleteBackground: 'rgba(0,0,0,0.65)',
+      deleteIcon: onPrimary,
+      maskBackground: 'rgba(0,0,0,0.45)',
+      maskText: onPrimary,
+      failed: palette.danger[500]
+    }
+  };
+};
+export const useUploaderTokens = createComponentTokensHook('uploader', createTokens);

package/dist/es/uploader/utils.js

@@ -0,0 +1,60 @@
+import { isImageUrlString, isFunction, isUndefined, parseNumber } from '../../utils';
+export const isImageFile = (item, forced) => {
+  if (forced !== undefined) return forced;
+  if (item.file?.type) return item.file.type.indexOf('image') === 0;
+  return isImageUrlString(item.url ?? item.thumbnail ?? '');
+};
+export const resolveSource = (item, isImage) => {
+  if (!isImage) return;
+  if (item.source) return item.source;
+  const uri = item.thumbnail ?? item.url;
+  return uri ? {
+    uri
+  } : undefined;
+};
+export const normalizeMaxSize = (maxSize, fallback) => {
+  if (isFunction(maxSize)) return maxSize;
+  return parseNumber(maxSize, fallback);
+};
+export const filterFiles = (files, maxSize) => {
+  const valid = [];
+  const invalid = [];
+  files.forEach(file => {
+    ;
+    ((isFunction(maxSize) ? maxSize(file) : file.size > maxSize) ? invalid : valid).push(file);
+  });
+  return {
+    valid,
+    invalid
+  };
+};
+export const readFileContent = async (file, resultType, createObjectUrl) => {
+  if (file?.type?.indexOf('image') === 0) {
+    return createObjectUrl(file);
+  }
+  if (resultType === 'file') return undefined;
+  if (isUndefined(FileReader)) {
+    return undefined;
+  }
+  return await new Promise(resolve => {
+    const reader = new FileReader();
+    reader.onload = event => {
+      const result = event.target?.result;
+      resolve(typeof result === 'string' ? result : undefined);
+    };
+    reader.onerror = () => resolve(undefined);
+    if (resultType === 'dataUrl') {
+      reader.readAsDataURL(file);
+    } else {
+      reader.readAsText(file);
+    }
+  });
+};
+export const processBeforeRead = async (file, files, beforeRead) => {
+  if (!beforeRead) return file;
+  try {
+    return await beforeRead(file, files);
+  } catch {
+    return false;
+  }
+};