react-vant-nova 1.0.0-test

package/es/uploader/Uploader.js

@@ -0,0 +1,272 @@
+import { __awaiter } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';
+import cls from 'clsx';
+import { Photograph } from '@react-vant/icons';
+// Utils
+import { getSizeStyle, extend, createNamespace } from '../utils';
+import { isOversize, filterFiles, readFileContent, isImageFile } from './utils';
+import { UploaderPreviewItem } from './UploaderPreviewItem';
+// Components
+import ImagePreview from '../image-preview';
+import { useIsomorphicLayoutEffect, usePropsValue } from '../hooks';
+import { mergeProps } from '../utils/get-default-props';
+const [bem] = createNamespace('uploader');
+const Uploader = forwardRef((p, ref) => {
+  var _a;
+  const props = mergeProps(p, {
+    maxSize: Number.MAX_VALUE,
+    maxCount: Number.MAX_VALUE,
+    deletable: true,
+    showUpload: true,
+    previewImage: true,
+    previewFullImage: true,
+    name: '',
+    accept: 'image/*',
+    imageFit: 'cover',
+    resultType: 'dataUrl',
+    uploadIcon: _jsx(Photograph, {})
+  });
+  const [value, setValue] = usePropsValue(Object.assign(Object.assign({}, props), {
+    defaultValue: (_a = props.defaultValue) !== null && _a !== void 0 ? _a : []
+  }));
+  const imagePreview = useRef(null);
+  const inputRef = useRef();
+  const [tasks, setTasks] = useState([]);
+  const idCountRef = useRef(0);
+  useIsomorphicLayoutEffect(() => {
+    if (!Array.isArray(value)) return;
+    setTasks(prev => prev.filter(task => {
+      if (task.url === undefined) return true;
+      return !value.some(fileItem => fileItem.url === task.url);
+    }));
+  }, [value]);
+  const {
+    maxCount,
+    maxSize,
+    resultType,
+    beforeRead
+  } = props;
+  function processFile(file, fileList) {
+    return __awaiter(this, void 0, void 0, function* () {
+      let transformedFile = file;
+      transformedFile = yield beforeRead === null || beforeRead === void 0 ? void 0 : beforeRead(file, fileList);
+      return transformedFile;
+    });
+  }
+  const onChange = event => __awaiter(void 0, void 0, void 0, function* () {
+    var _b;
+    event.persist();
+    const {
+      files: rawFiles
+    } = event.target;
+    if (!rawFiles) return;
+    let files = [].slice.call(rawFiles);
+    event.target.value = '';
+    if (props.disabled) {
+      return;
+    }
+    if (props.beforeRead) {
+      const postFiles = files.map(file => {
+        return processFile(file, files);
+      });
+      yield Promise.all(postFiles).then(filesList => {
+        files = filesList.filter(Boolean);
+      });
+    }
+    if (files.length === 0) {
+      return;
+    }
+    if (maxCount > 0) {
+      const exceed = value.length + files.length - maxCount;
+      if (exceed > 0) {
+        files = files.slice(0, files.length - exceed);
+      }
+      if (isOversize(files, maxSize)) {
+        const result = filterFiles(files, maxSize);
+        (_b = props.onOversize) === null || _b === void 0 ? void 0 : _b.call(props, result.invalid);
+        return;
+      }
+    }
+    const newTasks = files.map(file => ({
+      id: idCountRef.current++,
+      status: 'pending',
+      file
+    }));
+    setTasks(prev => [...prev, ...newTasks]);
+    yield Promise.all(newTasks.map(currentTask => __awaiter(void 0, void 0, void 0, function* () {
+      try {
+        let result = {};
+        if (props.upload) {
+          result = yield props.upload(currentTask.file);
+        } else {
+          const dataUrl = yield readFileContent(currentTask.file, resultType);
+          result.url = dataUrl;
+          result.file = currentTask.file;
+          result.key = currentTask.id;
+        }
+        setTasks(prev => {
+          return prev.map(task => {
+            if (task.id === currentTask.id) {
+              return Object.assign(Object.assign({}, task), {
+                url: result.url
+              });
+            }
+            return task;
+          });
+        });
+        setValue(prev => {
+          const newVal = Object.assign(Object.assign({}, result), {
+            file: currentTask.file
+          });
+          return [...prev, newVal];
+        });
+      } catch (e) {
+        setTasks(prev => {
+          return prev.map(task => {
+            if (task.id === currentTask.id) {
+              return Object.assign(Object.assign({}, task), {
+                status: 'failed'
+              });
+            }
+            return task;
+          });
+        });
+        throw e;
+      }
+    }))).catch(error => console.error(error));
+  });
+  const previewImage = item => {
+    if (props.previewFullImage) {
+      const imageFiles = value.filter(v => {
+        var _a;
+        return isImageFile(v, (_a = props.isImageUrl) === null || _a === void 0 ? void 0 : _a.call(props, v));
+      });
+      const images = imageFiles.map(image => image.url || image.thumbnail).filter(Boolean);
+      imagePreview.current = ImagePreview.open(extend({
+        images,
+        startPosition: imageFiles.indexOf(item),
+        onClose: props.onClosePreview
+      }, props.previewOptions));
+    }
+  };
+  const closeImagePreview = () => {
+    if (imagePreview.current) {
+      imagePreview.current.close();
+    }
+  };
+  const renderPreviewItem = (item, index) => {
+    var _a, _b, _c;
+    return _jsx(UploaderPreviewItem, {
+      file: item.file,
+      name: props.name,
+      isImage: (_a = props.isImageUrl) === null || _a === void 0 ? void 0 : _a.call(props, item),
+      url: (_b = item.thumbnail) !== null && _b !== void 0 ? _b : item.url,
+      imageFit: props.imageFit,
+      deletable: props.deletable,
+      previewSize: props.previewSize,
+      deleteRender: props.deleteRender,
+      previewCoverRender: () => {
+        var _a;
+        return (_a = props.previewCoverRender) === null || _a === void 0 ? void 0 : _a.call(props, item);
+      },
+      onClick: () => {
+        var _a;
+        return (_a = props.onClickPreview) === null || _a === void 0 ? void 0 : _a.call(props, item, index);
+      },
+      onDelete: () => __awaiter(void 0, void 0, void 0, function* () {
+        var _d;
+        const canDelete = yield (_d = props.onDelete) === null || _d === void 0 ? void 0 : _d.call(props, item);
+        if (canDelete === false) return;
+        setValue(value.filter((_, i) => i !== index));
+      }),
+      onPreview: () => previewImage(item)
+    }, (_c = item.key) !== null && _c !== void 0 ? _c : `-${index}`);
+  };
+  const renderPreviewList = () => {
+    if (props.previewImage) {
+      return _jsxs(_Fragment, {
+        children: [value.map(renderPreviewItem), tasks.map(task => {
+          if (task.status === 'failed') return null;
+          return _jsx(UploaderPreviewItem, {
+            file: task.file,
+            status: task.status,
+            statusTextRender: props.statusTextRender,
+            deletable: task.status !== 'pending',
+            deleteRender: props.deleteRender,
+            imageFit: props.imageFit,
+            onDelete: () => {
+              setTasks(tasks.filter(x => x.id !== task.id));
+            }
+          }, task.id);
+        })]
+      });
+    }
+    return null;
+  };
+  const renderUploadIcon = () => {
+    if (props.uploadIcon) {
+      return React.cloneElement(props.uploadIcon, {
+        className: cls(bem('upload-icon'))
+      });
+    }
+    return null;
+  };
+  const renderUpload = () => {
+    if (props.showUpload && (maxCount === 0 || value.length + tasks.length < maxCount)) {
+      const Input = props.readOnly ? null : _jsx("input", {
+        ref: inputRef,
+        type: 'file',
+        className: cls(bem('input')),
+        accept: props.accept,
+        capture: props.capture,
+        multiple: props.multiple,
+        disabled: props.disabled,
+        onChange: onChange
+      });
+      if (props.children) {
+        return _jsxs("div", Object.assign({
+          className: cls(bem('input-wrapper')),
+          onClick: props.onClickUpload
+        }, {
+          children: [props.children, Input]
+        }));
+      }
+      return _jsxs("div", Object.assign({
+        className: cls(bem('upload', {
+          readOnly: props.readOnly
+        })),
+        style: getSizeStyle(props.previewSize),
+        onClick: props.onClickUpload
+      }, {
+        children: [renderUploadIcon(), props.uploadText && _jsx("span", Object.assign({
+          className: cls(bem('upload-text'))
+        }, {
+          children: props.uploadText
+        })), Input]
+      }));
+    }
+    return null;
+  };
+  const chooseFile = () => {
+    if (inputRef.current && !props.disabled) {
+      inputRef.current.click();
+    }
+  };
+  useImperativeHandle(ref, () => ({
+    chooseFile,
+    closeImagePreview
+  }));
+  return _jsx("div", Object.assign({
+    className: cls(bem())
+  }, {
+    children: _jsxs("div", Object.assign({
+      className: cls(bem('wrapper', {
+        disabled: props.disabled
+      }))
+    }, {
+      children: [renderPreviewList(), renderUpload()]
+    }))
+  }));
+});
+export default Uploader;

package/es/uploader/UploaderPreviewItem.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { UploaderPrviewItemProps } from './PropsType';
+export declare const UploaderPreviewItem: React.FC<UploaderPrviewItemProps>;

package/es/uploader/UploaderPreviewItem.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import cls from 'clsx';
+import { Close, Cross, Description } from '@react-vant/icons';
+// Utils
+import { isImageFile } from './utils';
+import { getSizeStyle, createNamespace } from '../utils';
+// Components
+import Image from '../image';
+import Loading from '../loading';
+const [bem] = createNamespace('uploader');
+export const UploaderPreviewItem = props => {
+  const {
+    onPreview,
+    statusTextRender,
+    status,
+    file,
+    url
+  } = props;
+  const isImage = useMemo(() => props.isImage || isImageFile({
+    file,
+    url
+  }), [file, url, props.isImage]);
+  const imageSrc = useMemo(() => {
+    if (isImage) {
+      return url ? url : URL.createObjectURL(file);
+    }
+    return '';
+  }, [isImage, file, url]);
+  const renderMask = () => {
+    if (status === 'failed' || status === 'pending') {
+      const MaskIcon = status === 'failed' ? _jsx(Close, {
+        className: cls(bem('mask-icon'))
+      }) : _jsx(Loading, {
+        className: cls(bem('loading'))
+      });
+      return _jsxs("div", Object.assign({
+        className: cls(bem('mask'))
+      }, {
+        children: [MaskIcon, statusTextRender && _jsx("div", Object.assign({
+          className: cls(bem('mask-message'))
+        }, {
+          children: statusTextRender(status)
+        }))]
+      }));
+    }
+    return null;
+  };
+  const renderDeleteIcon = () => {
+    if (props.deletable) {
+      return props.deleteRender ? props.deleteRender(props.onDelete) : _jsx("div", Object.assign({
+        className: cls(bem('preview-delete')),
+        onClick: props.onDelete
+      }, {
+        children: _jsx(Cross, {
+          className: cls(bem('preview-delete-icon'))
+        })
+      }));
+    }
+    return null;
+  };
+  const renderCover = () => {
+    var _a;
+    return (_a = props.previewCoverRender) === null || _a === void 0 ? void 0 : _a.call(props);
+  };
+  const renderPreview = () => {
+    if (isImage) {
+      return _jsx(Image, Object.assign({
+        fit: props.imageFit,
+        src: imageSrc,
+        className: cls(bem('preview-image')),
+        width: props.previewSize,
+        height: props.previewSize,
+        onClick: onPreview
+      }, {
+        children: renderCover()
+      }));
+    }
+    return _jsxs("div", Object.assign({
+      className: cls(bem('file')),
+      style: getSizeStyle(props.previewSize)
+    }, {
+      children: [_jsx(Description, {
+        className: cls(bem('file-icon'))
+      }), _jsx("div", Object.assign({
+        className: cls(bem('file-name'), 'rv-ellipsis')
+      }, {
+        children: file ? file.name : url
+      })), renderCover()]
+    }));
+  };
+  return _jsxs("div", Object.assign({
+    className: cls(bem('preview')),
+    onClick: props.onClick
+  }, {
+    children: [renderPreview(), renderMask(), renderDeleteIcon()]
+  }));
+};

package/es/uploader/index.d.ts

@@ -0,0 +1,4 @@
+import './style/index.less';
+import Uploader from './Uploader';
+export { Uploader };
+export type { UploaderProps, UploaderResultType, UploaderInstance, UploaderValueItem, } from './PropsType';

package/es/uploader/index.js

@@ -0,0 +1,3 @@
+import "./style/index.css";
+import Uploader from './Uploader';
+export { Uploader };

package/es/uploader/style/index.css

@@ -0,0 +1,166 @@
+:root {
+  --rv-uploader-size: 80px;
+  --rv-uploader-icon-size: 24px;
+  --rv-uploader-icon-color: var(--rv-gray-4);
+  --rv-uploader-text-color: var(--rv-gray-6);
+  --rv-uploader-text-font-size: var(--rv-font-size-sm);
+  --rv-uploader-upload-background-color: var(--rv-gray-1);
+  --rv-uploader-upload-active-color: var(--rv-active-color);
+  --rv-uploader-delete-color: var(--rv-white);
+  --rv-uploader-delete-icon-size: 14px;
+  --rv-uploader-delete-background-color: rgba(0, 0, 0, 0.7);
+  --rv-uploader-file-background-color: var(--rv-background-color);
+  --rv-uploader-file-icon-size: 24px;
+  --rv-uploader-file-icon-color: var(--rv-gray-7);
+  --rv-uploader-file-name-padding: 0 var(--rv-padding-base);
+  --rv-uploader-file-name-margin-top: var(--rv-padding-xs);
+  --rv-uploader-file-name-font-size: var(--rv-font-size-sm);
+  --rv-uploader-file-name-text-color: var(--rv-gray-7);
+  --rv-uploader-mask-text-color: var(--rv-white);
+  --rv-uploader-mask-background-color: rgba(50, 50, 51, 0.88);
+  --rv-uploader-mask-icon-size: 22px;
+  --rv-uploader-mask-message-font-size: var(--rv-font-size-sm);
+  --rv-uploader-mask-message-line-height: var(--rv-line-height-xs);
+  --rv-uploader-loading-icon-size: 22px;
+  --rv-uploader-loading-icon-color: var(--rv-white);
+  --rv-uploader-disabled-opacity: var(--rv-disabled-opacity);
+  --rv-uploader-gap: var(--rv-padding-xs);
+}
+.rv-uploader {
+  position: relative;
+  display: inline-block;
+}
+.rv-uploader__wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--rv-uploader-gap);
+  padding-bottom: var(--rv-uploader-gap);
+}
+.rv-uploader__wrapper--disabled {
+  opacity: var(--rv-uploader-disabled-opacity);
+}
+.rv-uploader__input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  cursor: pointer;
+  opacity: 0;
+}
+.rv-uploader__input-wrapper {
+  position: relative;
+}
+.rv-uploader__input:disabled {
+  cursor: not-allowed;
+}
+.rv-uploader__upload {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: var(--rv-uploader-size);
+  height: var(--rv-uploader-size);
+  background-color: var(--rv-uploader-upload-background-color);
+}
+.rv-uploader__upload:active {
+  background-color: var(--rv-uploader-upload-active-color);
+}
+.rv-uploader__upload--readOnly:active {
+  background-color: var(--rv-uploader-upload-background-color);
+}
+.rv-uploader__upload-icon {
+  color: var(--rv-uploader-icon-color);
+  font-size: var(--rv-uploader-icon-size);
+}
+.rv-uploader__upload-text {
+  margin-top: var(--rv-padding-xs);
+  color: var(--rv-uploader-text-color);
+  font-size: var(--rv-uploader-text-font-size);
+}
+.rv-uploader__preview {
+  position: relative;
+  cursor: pointer;
+}
+.rv-uploader__preview-image {
+  display: block;
+  width: var(--rv-uploader-size);
+  height: var(--rv-uploader-size);
+  overflow: hidden;
+}
+.rv-uploader__preview-delete {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--rv-uploader-delete-icon-size);
+  height: var(--rv-uploader-delete-icon-size);
+  background-color: var(--rv-uploader-delete-background-color);
+  border-radius: 0 0 0 12px;
+}
+.rv-uploader__preview-delete-icon {
+  color: var(--rv-uploader-delete-color);
+  font-size: var(--rv-uploader-delete-icon-size);
+  transform: scale(0.7) translate(10%, -10%);
+}
+.rv-uploader__preview-cover {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+.rv-uploader__mask {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: var(--rv-uploader-mask-text-color);
+  background-color: var(--rv-uploader-mask-background-color);
+}
+.rv-uploader__mask-icon {
+  font-size: var(--rv-uploader-mask-icon-size);
+}
+.rv-uploader__mask-message {
+  margin-top: 6px;
+  padding: 0 var(--rv-padding-base);
+  font-size: var(--rv-uploader-mask-message-font-size);
+  line-height: var(--rv-uploader-mask-message-line-height);
+}
+.rv-uploader__loading {
+  width: var(--rv-uploader-loading-icon-size);
+  height: var(--rv-uploader-loading-icon-size);
+  color: var(--rv-uploader-loading-icon-color);
+}
+.rv-uploader__file {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: var(--rv-uploader-size);
+  height: var(--rv-uploader-size);
+  background-color: var(--rv-uploader-file-background-color);
+}
+.rv-uploader__file-icon {
+  color: var(--rv-uploader-file-icon-color);
+  font-size: var(--rv-uploader-file-icon-size);
+}
+.rv-uploader__file-name {
+  box-sizing: border-box;
+  width: 100%;
+  margin-top: var(--rv-uploader-file-name-margin-top);
+  padding: var(--rv-uploader-file-name-padding);
+  color: var(--rv-uploader-file-name-text-color);
+  font-size: var(--rv-uploader-file-name-font-size);
+  text-align: center;
+}

package/es/uploader/utils.d.ts

@@ -0,0 +1,10 @@
+import { UploaderValueItem, UploaderMaxSize, UploaderResultType } from './PropsType';
+export declare function toArray<T>(item: T | T[]): T[];
+export declare function readFileContent(file: File, resultType: UploaderResultType): Promise<string | void>;
+export declare function isOversize(files: File[], maxSize: UploaderMaxSize): boolean;
+export declare function filterFiles(items: File[], maxSize: UploaderMaxSize): {
+    valid: File[];
+    invalid: File[];
+};
+export declare function isImageUrl(url: string): boolean;
+export declare function isImageFile(item: UploaderValueItem, isImage?: boolean): boolean;

package/es/uploader/utils.js

@@ -0,0 +1,75 @@
+import { isFunction } from '../utils';
+export function toArray(item) {
+  if (Array.isArray(item)) {
+    return item;
+  }
+  return [item];
+}
+export function readFileContent(file, resultType) {
+  return new Promise(resolve => {
+    if (resultType === 'file') {
+      resolve();
+      return;
+    }
+    if (isImageFile(file)) {
+      resolve(URL.createObjectURL(file));
+      return;
+    }
+    const reader = new FileReader();
+    reader.onload = event => {
+      resolve(event.target.result);
+    };
+    if (resultType === 'dataUrl') {
+      reader.readAsDataURL(file);
+    } else if (resultType === 'text') {
+      reader.readAsText(file);
+    }
+  });
+}
+export function isOversize(files, maxSize) {
+  return toArray(files).some(file => {
+    if (file) {
+      if (isFunction(maxSize)) {
+        return maxSize(file);
+      }
+      return file.size > maxSize;
+    }
+    return false;
+  });
+}
+export function filterFiles(items, maxSize) {
+  const valid = [];
+  const invalid = [];
+  items.forEach(item => {
+    if (isOversize([item], maxSize)) {
+      invalid.push(item);
+    } else {
+      valid.push(item);
+    }
+  });
+  return {
+    valid,
+    invalid
+  };
+}
+const IMAGE_REGEXP = /\.(jpeg|jpg|gif|png|svg|webp|jfif|bmp|dpg)/i;
+export function isImageUrl(url) {
+  return IMAGE_REGEXP.test(url);
+}
+export function isImageFile(item, isImage) {
+  // some special urls cannot be recognized
+  // user can add `isImage` flag to mark it as an image url
+  if (isImage) {
+    return true;
+  }
+  if (item.file && item.file.type) {
+    return item.file.type.indexOf('image') === 0;
+  }
+  if (item.url) {
+    return isImageUrl(item.url);
+  }
+  if (item.thumbnail) {
+    return isImageUrl(item.thumbnail);
+  }
+  return false;
+}

package/es/utils/base.d.ts

@@ -0,0 +1,18 @@
+export declare function noop(): void;
+export declare const extend: {
+    <T extends {}, U>(target: T, source: U): T & U;
+    <T_1 extends {}, U_1, V>(target: T_1, source1: U_1, source2: V): T_1 & U_1 & V;
+    <T_2 extends {}, U_2, V_1, W>(target: T_2, source1: U_2, source2: V_1, source3: W): T_2 & U_2 & V_1 & W;
+    (target: object, ...sources: any[]): any;
+};
+export declare const inBrowser: boolean;
+export declare function isDef<T>(val: T): val is NonNullable<T>;
+export declare function isFunction(val: unknown): val is Function;
+export declare function isPromise<T = any>(val: unknown): val is Promise<T>;
+export declare function isObject(val: unknown): val is Record<any, any>;
+export declare function get(object: any, path: string): any;
+export declare type Writeable<T> = {
+    -readonly [P in keyof T]: T[P];
+};
+export declare function pick<T, U extends keyof T>(obj: T, keys: ReadonlyArray<U>, ignoreUndefined?: boolean): Writeable<Pick<T, U>>;
+export declare function once(fn: (...args: any) => void): (...args: any) => void;

package/es/utils/base.js

@@ -0,0 +1,41 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export function noop() {}
+export const extend = Object.assign;
+export const inBrowser = typeof window !== 'undefined';
+export function isDef(val) {
+  return val !== undefined && val !== null;
+}
+// eslint-disable-next-line @typescript-eslint/ban-types
+export function isFunction(val) {
+  return typeof val === 'function';
+}
+export function isPromise(val) {
+  return isObject(val) && isFunction(val.then) && isFunction(val.catch);
+}
+export function isObject(val) {
+  return val !== null && typeof val === 'object';
+}
+export function get(object, path) {
+  const keys = path.split('.');
+  let result = object;
+  keys.forEach(key => {
+    var _a;
+    result = (_a = result[key]) !== null && _a !== void 0 ? _a : '';
+  });
+  return result;
+}
+export function pick(obj, keys, ignoreUndefined) {
+  return keys.reduce((ret, key) => {
+    if (!ignoreUndefined || obj[key] !== undefined) {
+      ret[key] = obj[key];
+    }
+    return ret;
+  }, {});
+}
+export function once(fn) {
+  return (...args) => {
+    if (!fn) return;
+    fn(...args);
+    fn = null;
+  };
+}