react-native-system-ui 0.0.4 → 0.0.6

package/dist/cjs/components/uploader/Uploader.js

@@ -1,557 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-function _react() {
-  const data = _interopRequireWildcard(require("react"));
-  _react = function () {
-    return data;
-  };
-  return data;
-}
-function _reactNative() {
-  const data = require("react-native");
-  _reactNative = function () {
-    return data;
-  };
-  return data;
-}
-var _tokens = require("./tokens");
-var _hooks = require("../../hooks");
-var _image = _interopRequireDefault(require("../image"));
-var _imagePreview = _interopRequireDefault(require("../image-preview"));
-var _array = require("../../utils/array");
-var _number = require("../../utils/number");
-var _validate = require("../../utils/validate");
-var _utils = require("./utils");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-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); }
-const statusDefaults = {
-  pending: '上传中',
-  failed: '上传失败'
-};
-const Uploader = /*#__PURE__*/_react().default.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 = (0, _tokens.useUploaderTokens)(tokensOverride);
-  const [rawItems, triggerChange] = (0, _hooks.useControllableValue)(props, {
-    defaultValue: []
-  });
-  const items = (0, _array.toArray)(rawItems ?? []);
-  const itemsRef = (0, _react().useRef)(items);
-  (0, _react().useEffect)(() => {
-    itemsRef.current = items;
-  }, [items]);
-  const normalizeKeyRef = (0, _react().useRef)(0);
-  const normalizeItem = (item, keyFallback) => {
-    const key = item.key ?? keyFallback ?? `rv-uploader-${normalizeKeyRef.current++}`;
-    return item.key === key ? item : {
-      ...item,
-      key
-    };
-  };
-  const objectUrlsRef = (0, _react().useRef)(new Set());
-  const createObjectUrl = file => {
-    if (typeof URL === 'undefined' || !(0, _validate.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' || !(0, _validate.isFunction)(URL.revokeObjectURL)) return;
-    URL.revokeObjectURL(url);
-    objectUrlsRef.current.delete(url);
-  };
-  const prevItemUrlsRef = (0, _react().useRef)(new Set());
-  (0, _react().useEffect)(() => {
-    const current = new Set();
-    items.forEach(item => {
-      if ((0, _validate.isString)(item.url)) {
-        current.add(item.url);
-      }
-    });
-    prevItemUrlsRef.current.forEach(url => {
-      if (!current.has(url)) {
-        revokeObjectUrl(url);
-      }
-    });
-    prevItemUrlsRef.current = current;
-  }, [items]);
-  (0, _react().useEffect)(() => {
-    return () => {
-      objectUrlsRef.current.forEach(url => {
-        if (typeof URL !== 'undefined' && (0, _validate.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((0, _number.parseNumber)(maxCount, Number.MAX_VALUE)));
-  const maxSizeValue = (0, _utils.normalizeMaxSize)(maxSize, Number.MAX_VALUE);
-  const sizeValue = (0, _number.parseNumber)(previewSize, tokens.size);
-  const idRef = (0, _react().useRef)(0);
-  const [tasks, setTasks] = (0, _react().useState)([]);
-  const tasksRef = (0, _react().useRef)(tasks);
-  (0, _react().useEffect)(() => {
-    tasksRef.current = tasks;
-  }, [tasks]);
-  const [previewVisible, setPreviewVisible] = (0, _react().useState)(false);
-  const [previewIndex, setPreviewIndex] = (0, _react().useState)(0);
-  const imageFiles = items.filter(item => (0, _utils.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 => (0, _utils.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
-    } = (0, _utils.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 (0, _utils.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 = (0, _react().useRef)(null);
-  const webHandlerRef = (0, _react().useRef)(() => {});
-  webHandlerRef.current = handleWebFiles;
-  (0, _react().useEffect)(() => {
-    if (_reactNative().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;
-      }
-    };
-  }, []);
-  (0, _react().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 (_reactNative().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(() => {});
-  };
-  const closeImagePreview = () => setPreviewVisible(false);
-  (0, _react().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 = [statusStyle, {
-      backgroundColor: tokens.colors.maskBackground
-    }];
-    if (status === 'pending') {
-      return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-        style: baseStyle,
-        testID: "rv-uploader-status-pending"
-      }, /*#__PURE__*/_react().default.createElement(_reactNative().ActivityIndicator, {
-        color: tokens.colors.maskText
-      }), /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
-        style: [styles.statusText, {
-          color: tokens.colors.maskText,
-          fontSize: tokens.typography.statusTextSize
-        }]
-      }, statusTextRender?.(status) ?? statusDefaults.pending));
-    }
-    if (status === 'failed') {
-      return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-        style: baseStyle,
-        testID: "rv-uploader-status-failed"
-      }, /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
-        style: [styles.statusText, {
-          color: tokens.colors.failed,
-          fontSize: tokens.typography.statusTextSize
-        }]
-      }, 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 placeholderStyle = [styles.placeholder, {
-    paddingHorizontal: tokens.spacing.placeholderPaddingHorizontal
-  }];
-  const placeholderNameStyle = [styles.placeholderName, {
-    color: tokens.colors.text,
-    fontSize: tokens.typography.placeholderNameSize,
-    marginTop: tokens.spacing.placeholderNameMarginTop
-  }];
-  const deleteStyle = [styles.delete, {
-    backgroundColor: tokens.colors.deleteBackground,
-    borderRadius: tokens.radii.deleteButton,
-    top: tokens.spacing.deleteOffset,
-    right: tokens.spacing.deleteOffset,
-    minWidth: tokens.sizing.deleteMinSize,
-    minHeight: tokens.sizing.deleteMinSize,
-    paddingHorizontal: tokens.spacing.deletePaddingHorizontal
-  }];
-  const deleteIconStyle = {
-    color: tokens.colors.deleteIcon
-  };
-  const statusStyle = [styles.status, {
-    gap: tokens.spacing.statusGap
-  }];
-  const uploadContentStyle = [styles.uploadContent, {
-    gap: tokens.spacing.uploadContentGap
-  }];
-  const renderPlaceholder = name => /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: placeholderStyle
-  }, /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
-    style: [styles.placeholderIcon, {
-      fontSize: tokens.typography.placeholderIconSize
-    }]
-  }, "FILE"), name && /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
-    style: placeholderNameStyle,
-    numberOfLines: 1
-  }, name));
-  const renderDelete = (onPress, testID) => deleteRender ? deleteRender(onPress) : /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, {
-    hitSlop: 8,
-    onPress: onPress,
-    testID: testID
-  }, /*#__PURE__*/_react().default.createElement(_reactNative().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().default.createElement(_reactNative().View, _extends({
-    style: [styles.container, style]
-  }, rest, {
-    testID: "rv-uploader"
-  }), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: styles.items
-  }, previewImage ? /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, items.map((item, index) => {
-    const isImage = (0, _utils.isImageFile)(item, isImageUrl?.(item));
-    const source = (0, _utils.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().default.createElement(_reactNative().View, {
-      key: item.key ?? index,
-      style: boxStyle,
-      testID: `rv-uploader-item-${index}`
-    }, /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, {
-      style: ({
-        pressed
-      }) => [styles.preview, frameStyle, pressed && {
-        opacity: tokens.opacity.pressed
-      }],
-      onPress: () => handlePreview(item, index),
-      testID: `rv-uploader-preview-${index}`
-    }, source ? /*#__PURE__*/_react().default.createElement(_image.default, {
-      source: source,
-      style: styles.image,
-      fit: imageFit
-    }) : renderPlaceholder(fileName), previewCoverRender && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-      style: styles.cover,
-      pointerEvents: "none"
-    }, previewCoverRender(item)), renderStatus(item.status), deletable && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-      style: deleteStyle
-    }, renderDelete(() => handleDelete(item, index), `rv-uploader-delete-${index}`))));
-  }), tasks.map(task => /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    key: `task-${task.id}`,
-    style: boxStyle,
-    testID: `rv-uploader-task-${task.id}`
-  }, /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: [styles.preview, frameStyle]
-  }, task.url ? /*#__PURE__*/_react().default.createElement(_image.default, {
-    source: {
-      uri: task.url
-    },
-    style: styles.image,
-    fit: imageFit
-  }) : renderPlaceholder(task.file?.name), renderStatus(task.status), task.status !== 'pending' && /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: deleteStyle
-  }, renderDelete(() => removeTask(task.id), `rv-uploader-task-delete-${task.id}`)))))) : null, canShowUpload ? /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, {
-    style: ({
-      pressed
-    }) => [styles.upload, boxStyle, frameStyle, pressed && {
-      opacity: tokens.opacity.pressed
-    }, uploadDisabled && {
-      opacity: tokens.opacity.disabled
-    }],
-    onPress: handleUploadPress,
-    disabled: uploadDisabled,
-    testID: "rv-uploader-upload"
-  }, children ?? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
-    style: uploadContentStyle
-  }, uploadIcon ?? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
-    style: [styles.uploadIcon, {
-      color: tokens.colors.icon,
-      fontSize: tokens.typography.uploadIconSize
-    }]
-  }, "+"), uploadText ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
-    style: [styles.uploadText, {
-      color: tokens.colors.text,
-      fontSize: tokens.typography.uploadTextSize
-    }]
-  }, uploadText) : null)) : null), previewFullImage ? /*#__PURE__*/_react().default.createElement(_imagePreview.default, _extends({}, previewOptions, {
-    visible: previewVisible,
-    images: previewImages,
-    startPosition: previewIndex,
-    onClose: params => {
-      previewOptions?.onClose?.(params);
-      closePreview();
-    },
-    onClosed: () => {
-      previewOptions?.onClosed?.();
-      setPreviewVisible(false);
-    }
-  })) : null);
-});
-const styles = _reactNative().StyleSheet.create({
-  container: {},
-  items: {
-    flexDirection: 'row',
-    flexWrap: 'wrap'
-  },
-  preview: {
-    flex: 1,
-    borderWidth: _reactNative().StyleSheet.hairlineWidth,
-    overflow: 'hidden'
-  },
-  image: {
-    width: '100%',
-    height: '100%'
-  },
-  placeholder: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  placeholderIcon: {
-    fontWeight: '600'
-  },
-  placeholderName: {},
-  cover: {
-    ..._reactNative().StyleSheet.absoluteFillObject,
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  status: {
-    ..._reactNative().StyleSheet.absoluteFillObject,
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  statusText: {},
-  delete: {
-    position: 'absolute',
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  upload: {
-    borderWidth: _reactNative().StyleSheet.hairlineWidth,
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  uploadContent: {
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  uploadIcon: {
-    fontWeight: '600'
-  },
-  uploadText: {}
-});
-Uploader.displayName = 'Uploader';
-var _default = exports.default = Uploader;

package/dist/cjs/components/uploader/index.js

@@ -1,22 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "Uploader", {
-  enumerable: true,
-  get: function () {
-    return _Uploader.default;
-  }
-});
-exports.default = void 0;
-Object.defineProperty(exports, "useUploaderTokens", {
-  enumerable: true,
-  get: function () {
-    return _tokens.useUploaderTokens;
-  }
-});
-var _Uploader = _interopRequireDefault(require("./Uploader"));
-var _tokens = require("./tokens");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = _Uploader.default;

package/dist/cjs/components/uploader/tokens.js

@@ -1,58 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useUploaderTokens = void 0;
-var _designSystem = require("../../design-system");
-const createTokens = foundations => {
-  const {
-    palette,
-    spacing,
-    radii,
-    fontSize
-  } = foundations;
-  const onPrimary = palette.primary.foreground ?? '#ffffff';
-  return {
-    size: 80,
-    gap: spacing.sm,
-    radius: radii.md,
-    spacing: {
-      placeholderPaddingHorizontal: spacing.ssm,
-      placeholderNameMarginTop: spacing.ssm,
-      statusGap: spacing.xs,
-      uploadContentGap: spacing.xs,
-      deleteOffset: spacing.xs,
-      deletePaddingHorizontal: spacing.xs
-    },
-    sizing: {
-      deleteMinSize: spacing.xl
-    },
-    opacity: {
-      pressed: 0.85,
-      disabled: 0.65
-    },
-    radii: {
-      deleteButton: radii.lg
-    },
-    typography: {
-      placeholderIconSize: fontSize.xl,
-      placeholderNameSize: 11,
-      statusTextSize: fontSize.xs,
-      uploadIconSize: 24,
-      uploadTextSize: fontSize.xs
-    },
-    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]
-    }
-  };
-};
-const useUploaderTokens = exports.useUploaderTokens = (0, _designSystem.createComponentTokensHook)('uploader', createTokens);