sard 1.0.0-canary.0

package/dist/upload/Preview.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { Image, View } from '@tarojs/components';
+import { Icon } from '../icon';
+import { Loading } from '../loading';
+import { isVideoUrl, isImageUrl } from '../utils';
+import { useBem, useEvent } from '../use';
+import Ellipsis from '../ellipsis';
+import PreviewVideo from './PreviewVideo';
+export const UploadPreview = (props) => {
+    const { className, style, index, removable = true, remove, beforeRemove, onRemove, disabled, readOnly, file, name, url, isImage: _isImage, isVideo: _isVideo, status = 'pending', message, onImageClick, mode = 'aspectFill', contextId, ...restProps } = props;
+    const [bem] = useBem('upload');
+    const handleRemove = useEvent(() => {
+        if (!removable || disabled || readOnly)
+            return;
+        function remove() {
+            onRemove?.(index);
+        }
+        if (beforeRemove) {
+            const ret = beforeRemove(index);
+            if (!ret) {
+                return;
+            }
+            if (ret instanceof Promise) {
+                ret
+                    .then(() => {
+                    remove();
+                })
+                    .catch(() => {
+                    null;
+                });
+                return;
+            }
+        }
+        remove();
+    });
+    const isImage = _isImage || file?.type === 'image' || (url && isImageUrl(url));
+    const isVideo = _isVideo || file?.type === 'video' || (url && isVideoUrl(url));
+    return (_jsxs(View, { ...restProps, className: classNames(bem.e('preview'), bem.em('preview', 'video', isVideo), className), style: style, children: [isImage ? (_jsx(Image, { mode: mode, className: bem.e('image'), src: url || file?.path || '', onClick: () => onImageClick?.(index) })) : isVideo ? (_jsx(PreviewVideo, { contextId: contextId, src: url || file?.path || '' })) : (_jsxs(View, { className: bem.e('file'), children: [_jsx(Icon, { className: bem.e('file-icon'), name: "file" }), _jsx(Ellipsis, { className: bem.e('file-name'), children: name })] })), (status === 'uploading' || status === 'failed') && (_jsxs(View, { className: bem.e('status'), children: [status === 'uploading' && (_jsx(Loading, { size: 24, className: bem.e('loading-icon') })), status === 'failed' && (_jsx(Icon, { name: "x-circle", className: bem.e('failed-icon') })), message && (_jsx(Ellipsis, { className: bem.e('status-message'), children: message }))] })), removable && !disabled && !readOnly && status !== 'uploading' && (_jsx(View, { className: bem.e('remove'), onClick: handleRemove, children: remove ?? (_jsx(View, { className: bem.e('close'), children: _jsx(Icon, { name: "close", className: bem.e('close-icon') }) })) }))] }));
+};
+export default UploadPreview;

package/dist/upload/PreviewVideo.d.ts

@@ -0,0 +1,7 @@
+import { BaseProps } from '../base';
+export interface CustomVideoProps extends BaseProps {
+    src?: string;
+    contextId?: string;
+}
+export declare const CustomVideo: (props: CustomVideoProps) => import("react/jsx-runtime").JSX.Element;
+export default CustomVideo;

package/dist/upload/PreviewVideo.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Video } from '@tarojs/components';
+import { useEffect, useRef, useState } from 'react';
+import { View } from '@tarojs/components';
+import { useBem, useSelectorId } from '../use';
+import Icon from '../icon';
+import Taro from '@tarojs/taro';
+import { getElementById, isBoolean } from '../utils';
+export const CustomVideo = (props) => {
+    const { src = '', contextId } = props;
+    const [bem] = useBem('upload');
+    const videoId = useSelectorId();
+    const videoContext = useRef();
+    const [controlsVisible, setControlsVisible] = useState(false);
+    useEffect(() => {
+        videoContext.current = Taro.createVideoContext(videoId, contextId && getElementById(contextId)?.ctx);
+    }, []);
+    const handlePlayClick = () => {
+        videoContext.current?.requestFullScreen({
+            direction: 0,
+        });
+        videoContext.current?.play();
+    };
+    const handleFullScreenChange = (event) => {
+        const fullScreen = event.detail?.fullScreen;
+        if (isBoolean(fullScreen)) {
+            if (fullScreen) {
+                setControlsVisible(true);
+            }
+            else {
+                videoContext.current?.pause();
+                setControlsVisible(false);
+            }
+        }
+    };
+    return (_jsxs(View, { className: bem.e('video-wrapper'), children: [_jsx(Video, { id: videoId, objectFit: "contain", className: bem.e('video'), src: src, crossOrigin: 'anonymous', controls: controlsVisible, showCenterPlayBtn: controlsVisible, onFullscreenChange: handleFullScreenChange, onFullScreenChange: handleFullScreenChange }), _jsx(View, { className: bem.e('video-play'), onClick: handlePlayClick, children: _jsx(Icon, { name: "play", size: 40, className: bem.e('video-play-icon') }) })] }));
+};
+export default CustomVideo;

package/dist/upload/PreviewVideo.rn.d.ts

@@ -0,0 +1,6 @@
+import { BaseProps } from '../base';
+export interface CustomVideoProps extends BaseProps {
+    src?: string;
+}
+export declare const CustomVideo: (props: any) => import("react/jsx-runtime").JSX.Element;
+export default CustomVideo;

package/dist/upload/PreviewVideo.rn.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { Video, ResizeMode } from 'expo-av';
+import { View } from '@tarojs/components';
+import { useBem } from '../use';
+import Icon from '../icon';
+export const CustomVideo = (props) => {
+    const { src = '' } = props;
+    const [bem] = useBem('upload');
+    const videoRef = useRef(null);
+    const handlePlayClick = () => {
+        videoRef.current?.presentFullscreenPlayer();
+        videoRef.current?.playAsync();
+    };
+    const handleFullscreenUpdate = (event) => {
+        if (event.fullscreenUpdate === 2) {
+            videoRef.current?.stopAsync();
+        }
+    };
+    return (_jsxs(View, { className: bem.e('video-wrapper'), children: [_jsx(Video, { ref: videoRef, style: { width: '100%', height: '100%' }, resizeMode: ResizeMode.CONTAIN, source: {
+                    uri: src,
+                }, onFullscreenUpdate: handleFullscreenUpdate }), _jsx(View, { className: bem.e('video-play'), onClick: handlePlayClick, children: _jsx(Icon, { name: "play", size: 40, className: bem.e('video-play-icon') }) })] }));
+};
+export default CustomVideo;

package/dist/upload/chooseMedia.d.ts

@@ -0,0 +1,26 @@
+import Taro from '@tarojs/taro';
+interface chooseMediaOptions {
+    count?: number;
+    mediaType?: 'image' | 'video';
+    sourceType?: ('album' | 'camera')[];
+    maxDuration?: number;
+    sizeType?: ('original' | 'compressed')[];
+    camera?: 'back' | 'front';
+    success?: (result: chooseMediaResult) => void;
+    fail?: (err: any) => void;
+    complete?: () => void;
+}
+interface chooseMediaResult {
+    tempFiles: {
+        tempFilePath: string;
+        size: number;
+        duration: number;
+        height: number;
+        width: number;
+        thumbTempFilePath: string;
+        fileType: 'image' | 'video';
+    }[];
+    type: 'image' | 'video';
+}
+export declare function chooseMedia(options: chooseMediaOptions): Promise<Taro.chooseImage.SuccessCallbackResult> | Promise<Taro.chooseVideo.SuccessCallbackResult>;
+export {};

package/dist/upload/chooseMedia.h5.d.ts

@@ -0,0 +1,25 @@
+interface chooseMediaOptions {
+    count?: number;
+    mediaType?: 'image' | 'video';
+    sourceType?: ('album' | 'camera')[];
+    maxDuration?: number;
+    sizeType?: ('original' | 'compressed')[];
+    camera?: 'back' | 'front';
+    success?: (result: chooseMediaResult) => void;
+    fail?: (err: any) => void;
+    complete?: () => void;
+}
+interface chooseMediaResult {
+    tempFiles: {
+        tempFilePath: string;
+        size: number;
+        duration: number;
+        height: number;
+        width: number;
+        thumbTempFilePath: string;
+        fileType: 'image' | 'video';
+    }[];
+    type: 'image' | 'video';
+}
+export declare function chooseMedia(options: chooseMediaOptions): Promise<chooseMediaResult>;
+export {};

package/dist/upload/chooseMedia.h5.js

@@ -0,0 +1,117 @@
+import ActionSheet from '../action-sheet';
+let input;
+export async function chooseMedia(options) {
+    const { count = 9, mediaType = 'image', sourceType = ['album', 'camera'], camera = 'back', success, fail, complete, } = options;
+    let finalSourceType = 'album';
+    if (sourceType.length > 1) {
+        const { index } = await ActionSheet.show({
+            itemList: ['拍摄', '从相册选择'],
+            cancel: '取消',
+        });
+        finalSourceType = index === 0 ? 'camera' : 'album';
+    }
+    else if (sourceType.length === 1) {
+        finalSourceType = sourceType[0];
+    }
+    if (!input) {
+        input = document.createElement('input');
+        input.type = 'file';
+        input.style.cssText =
+            'position: fixed; z-index: -100; opacity: 0; pointer-events: none';
+    }
+    input.multiple = count > 1;
+    if (finalSourceType === 'camera') {
+        input.setAttribute('capture', camera === 'back' ? 'environment' : 'user');
+    }
+    else {
+        input.removeAttribute('capture');
+    }
+    input.setAttribute('accept', mediaType === 'image' ? 'image/*' : 'video/*');
+    try {
+        const result = await new Promise((resolve, reject) => {
+            input.onchange = async () => {
+                const files = input.files || [];
+                const tempFiles = [];
+                try {
+                    for (const file of [...files]) {
+                        tempFiles.push(await loadMedia(file, mediaType));
+                    }
+                }
+                catch (err) {
+                    reject(err);
+                }
+                resolve({
+                    tempFiles,
+                    type: mediaType,
+                });
+                input.value = '';
+            };
+            input.click();
+        });
+        success?.(result);
+        return result;
+    }
+    catch (err) {
+        if (fail) {
+            fail(err);
+        }
+        else {
+            throw err;
+        }
+    }
+    finally {
+        complete?.();
+    }
+}
+async function loadMedia(file, type) {
+    const url = URL.createObjectURL(file);
+    const result = {
+        tempFilePath: url,
+        size: file.size,
+        duration: 0,
+        height: 0,
+        width: 0,
+        thumbTempFilePath: '',
+        fileType: type,
+    };
+    if (type === 'video') {
+        await new Promise((resolve, reject) => {
+            const video = document.createElement('video');
+            video.crossOrigin = 'Anonymous';
+            video.preload = 'metadata';
+            video.src = url;
+            video.onloadedmetadata = () => {
+                result.duration = video.duration;
+                result.width = video.videoWidth;
+                result.height = video.videoHeight;
+                resolve();
+            };
+            video.onerror = () => {
+                reject();
+            };
+        });
+    }
+    else {
+        await new Promise((resolve, reject) => {
+            const img = new Image();
+            img.crossOrigin = url;
+            img.src = url;
+            if (img.complete) {
+                result.width = img.width;
+                result.height = img.height;
+                resolve();
+            }
+            else {
+                img.onload = () => {
+                    result.width = img.width;
+                    result.height = img.height;
+                    resolve();
+                };
+                img.onerror = () => {
+                    reject();
+                };
+            }
+        });
+    }
+    return result;
+}

package/dist/upload/chooseMedia.js

@@ -0,0 +1,55 @@
+import Taro from '@tarojs/taro';
+export function chooseMedia(options) {
+    const { count = 9, mediaType = 'image', sourceType = ['album', 'camera'], maxDuration = 10, sizeType = ['original', 'compressed'], camera = 'back', success, fail, complete, } = options;
+    if (mediaType === 'image') {
+        return Taro.chooseImage({
+            count,
+            sizeType,
+            sourceType,
+            success(res) {
+                success?.({
+                    type: 'image',
+                    tempFiles: res.tempFiles.map((file) => {
+                        return {
+                            tempFilePath: file.path,
+                            size: file.size,
+                            duration: 0,
+                            height: 0,
+                            width: 0,
+                            thumbTempFilePath: '',
+                            fileType: 'image',
+                        };
+                    }),
+                });
+            },
+            fail,
+            complete,
+        });
+    }
+    else {
+        return Taro.chooseVideo({
+            sourceType,
+            compressed: sizeType.includes('compressed'),
+            maxDuration,
+            camera,
+            success(res) {
+                success?.({
+                    type: 'video',
+                    tempFiles: [
+                        {
+                            tempFilePath: res.tempFilePath,
+                            size: res.size,
+                            duration: res.duration,
+                            height: res.height,
+                            width: res.width,
+                            thumbTempFilePath: '',
+                            fileType: 'video',
+                        },
+                    ],
+                });
+            },
+            fail,
+            complete,
+        });
+    }
+}

package/dist/upload/index.d.ts

@@ -0,0 +1,37 @@
+import { ForwardRefExoticComponent, PropsWithoutRef, ReactNode, RefAttributes } from 'react';
+import { ImageProps } from '@tarojs/components';
+import { UploadPreview, UploadFileItem, UploadFile } from './Preview';
+import { BaseProps } from '../base';
+export * from './Preview';
+export interface UploadProps extends Omit<BaseProps, 'children'> {
+    accept?: 'image' | 'video';
+    multiple?: boolean;
+    sourceType?: ('album' | 'camera')[];
+    sizeType?: ('original' | 'compressed')[];
+    maxDuration?: number;
+    camera?: 'back' | 'front';
+    fileList?: UploadFileItem[];
+    defaultFileList?: UploadFileItem[];
+    onChange?: (fileItemList: UploadFileItem[]) => void;
+    maxCount?: number;
+    maxSize?: number | ((file: UploadFile) => boolean);
+    overSize?: (fileItem: UploadFileItem | UploadFileItem[]) => void;
+    select?: ReactNode;
+    disabled?: boolean;
+    readOnly?: boolean;
+    beforeRead?: (file: UploadFile) => boolean | Promise<UploadFile>;
+    afterRead?: (fileItem: UploadFileItem | UploadFileItem[]) => void;
+    removable?: boolean;
+    remove?: ReactNode;
+    beforeRemove?: (...args: unknown[]) => boolean | Promise<void>;
+    onRemove?: (index: number) => void;
+    mode?: ImageProps['mode'];
+}
+export interface UploadRef {
+    select: () => void;
+}
+export interface UploadFC extends ForwardRefExoticComponent<PropsWithoutRef<UploadProps> & RefAttributes<UploadRef>> {
+    Preview: typeof UploadPreview;
+}
+export declare const Upload: UploadFC;
+export default Upload;

package/dist/upload/index.js

@@ -0,0 +1,167 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { forwardRef, useImperativeHandle, } from 'react';
+import classNames from 'classnames';
+import Taro from '@tarojs/taro';
+import { CustomWrapper, View } from '@tarojs/components';
+import { useBem, useControllableValue, useEvent, useSelectorId } from '../use';
+import { getFileName, isFunction, isImageUrl, noop } from '../utils';
+import { Icon } from '../icon';
+import { UploadPreview } from './Preview';
+import Pressable from '../pressable';
+import { chooseMedia } from './chooseMedia';
+export * from './Preview';
+export const Upload = forwardRef((props, ref) => {
+    const { className, style, accept = 'image', multiple, sourceType = ['album', 'camera'], sizeType = ['original', 'compressed'], maxDuration = 60, camera = 'back', fileList, defaultFileList, onChange, maxCount = Number.MAX_SAFE_INTEGER, maxSize = Number.MAX_SAFE_INTEGER, overSize, select, disabled, readOnly, beforeRead, afterRead, removable = true, remove, beforeRemove, onRemove, mode = 'aspectFill', ...restProps } = props;
+    const [bem] = useBem('upload');
+    const contextId = useSelectorId();
+    const [innerPreviewList, setInnerPreviewList] = useControllableValue({
+        value: fileList,
+        defaultValue: defaultFileList,
+        trigger: onChange,
+        initialValue: () => [],
+    });
+    const limitCountNode = (files, next) => {
+        const remainCount = maxCount - innerPreviewList.length;
+        if (files.length > remainCount) {
+            files = files.slice(0, remainCount);
+        }
+        next(files);
+    };
+    const beforeReadNode = (files, next) => {
+        Promise.allSettled(files.map((file) => new Promise((resolve, reject) => {
+            if (beforeRead) {
+                const ret = beforeRead(file);
+                if (!ret) {
+                    reject();
+                    return;
+                }
+                if (ret instanceof Promise) {
+                    ret
+                        .then((mayNewFile) => {
+                        resolve(mayNewFile ?? file);
+                    })
+                        .catch(() => {
+                        reject();
+                    });
+                    return;
+                }
+            }
+            resolve(file);
+        }))).then((results) => {
+            const fileList = results
+                .filter((result) => result.status === 'fulfilled')
+                .map((result) => result.value);
+            next(fileList);
+        });
+    };
+    const toUploadFileNode = (files, next) => {
+        const fileList = files.map((file) => {
+            return {
+                file,
+                name: file.path && getFileName(file.path),
+            };
+        });
+        next(fileList);
+    };
+    const limitSizeNode = (fileList, next) => {
+        const valid = [];
+        const invalid = [];
+        fileList.forEach((item) => {
+            const file = item.file;
+            const isFunc = isFunction(maxSize);
+            if ((isFunc && file && maxSize(file)) ||
+                (!isFunc && file && file.size && file.size > maxSize)) {
+                invalid.push(item);
+            }
+            else {
+                valid.push(item);
+            }
+        });
+        if (invalid.length) {
+            if (multiple) {
+                overSize?.(invalid);
+            }
+            else {
+                overSize?.(invalid[0]);
+            }
+        }
+        if (valid.length) {
+            setInnerPreviewList([...innerPreviewList, ...valid]);
+            next(valid);
+        }
+    };
+    const afterReadNode = (fileList) => {
+        if (multiple) {
+            afterRead?.(fileList);
+        }
+        else {
+            afterRead?.(fileList[0]);
+        }
+    };
+    function toChain(files) {
+        const chain = [
+            limitCountNode,
+            beforeReadNode,
+            toUploadFileNode,
+            limitSizeNode,
+            afterReadNode,
+        ].reduceRight((next, node) => (data) => {
+            node(data, next);
+        }, () => {
+            null;
+        });
+        chain(files);
+    }
+    const handleSelect = useEvent(() => {
+        if (disabled || readOnly || innerPreviewList.length >= maxCount) {
+            return;
+        }
+        chooseMedia({
+            mediaType: accept,
+            count: multiple ? 9999 : 1,
+            sizeType,
+            sourceType,
+            maxDuration,
+            camera,
+            success(result) {
+                toChain(result.tempFiles.map((file) => {
+                    return {
+                        type: file.fileType,
+                        size: file.size,
+                        path: file.tempFilePath,
+                        duration: file.duration,
+                        width: file.width,
+                        height: file.height,
+                        originalFileObj: null,
+                    };
+                }));
+            },
+            fail: noop,
+        }).catch(noop);
+    });
+    const handleRemove = useEvent((index, item) => {
+        const list = innerPreviewList.filter((_, i) => i !== index);
+        setInnerPreviewList(list);
+        item.onRemove?.(index);
+        onRemove?.(index);
+    });
+    const handleImageClick = useEvent((index) => {
+        const currentFileItem = innerPreviewList[index];
+        const fileList = innerPreviewList.filter((item) => (item.url && isImageUrl(item.url)) || item.file?.type === 'image');
+        const currentIndex = fileList.findIndex((item) => item === currentFileItem);
+        const urls = fileList.map((item) => (item.url || item.file?.path));
+        Taro.previewImage({
+            urls,
+            current: urls[currentIndex],
+        });
+    });
+    useImperativeHandle(ref, () => ({
+        select: handleSelect,
+    }), []);
+    return (_jsx(CustomWrapper, { id: contextId, children: _jsx(View, { ...restProps, className: classNames(bem.b(), bem.m('disabled', disabled), bem.m('readonly', readOnly), className), style: style, children: _jsxs(View, { className: bem.e('wrapper'), children: [innerPreviewList.map((item, index) => {
+                        return (_createElement(UploadPreview, { ...item, key: index, index: index, disabled: disabled, readOnly: readOnly, removable: item.removable ?? removable, remove: item.remove ?? remove, beforeRemove: item.beforeRemove ?? beforeRemove, onRemove: (index) => handleRemove(index, item), onImageClick: handleImageClick, mode: mode, contextId: contextId }));
+                    }), !disabled && !readOnly && innerPreviewList.length < maxCount && (_jsx(Pressable, { disabled: disabled || readOnly, children: ({ pressed }) => (_jsx(View, { className: classNames(bem.e('select'), bem.em('select', 'pressed', pressed)), onClick: handleSelect, children: select ?? (_jsx(Icon, { name: "plus", className: bem.e('select-icon') })) })) }))] }) }) }));
+});
+Upload.Preview = UploadPreview;
+export default Upload;