sard 1.0.0-canary.0

package/dist/transition/CSSTransition.rn.js

@@ -0,0 +1,312 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo, useRef } from 'react';
+import { Animated } from 'react-native';
+import { Transition, getTimeouts } from './index';
+import { useEvent, useSetTimeout } from '../use';
+import { isFunction } from '../utils';
+const createAnimStrategies = {
+    fade: (timeouts) => {
+        const opacityValue = new Animated.Value(0);
+        return {
+            enter() {
+                Animated.timing(opacityValue, {
+                    toValue: 1,
+                    duration: timeouts.enter,
+                    useNativeDriver: true,
+                }).start();
+            },
+            exit() {
+                Animated.timing(opacityValue, {
+                    toValue: 0,
+                    duration: timeouts.exit,
+                    useNativeDriver: true,
+                }).start();
+            },
+            style: {
+                opacity: opacityValue,
+            },
+        };
+    },
+    zoom: (timeouts) => {
+        const opacityValue = new Animated.Value(0);
+        const scaleValue = new Animated.Value(0.7);
+        return {
+            enter() {
+                Animated.parallel([
+                    Animated.timing(opacityValue, {
+                        toValue: 1,
+                        duration: timeouts.enter,
+                        useNativeDriver: true,
+                    }),
+                    Animated.timing(scaleValue, {
+                        toValue: 1,
+                        duration: timeouts.enter,
+                        useNativeDriver: true,
+                    }),
+                ], {
+                    stopTogether: false,
+                }).start();
+            },
+            exit() {
+                Animated.parallel([
+                    Animated.timing(opacityValue, {
+                        toValue: 0,
+                        duration: timeouts.exit,
+                        useNativeDriver: true,
+                    }),
+                    Animated.timing(scaleValue, {
+                        toValue: 0.9,
+                        duration: timeouts.exit,
+                        useNativeDriver: true,
+                    }),
+                ], {
+                    stopTogether: false,
+                }).start();
+            },
+            style: {
+                opacity: opacityValue,
+                transform: [{ scale: scaleValue }],
+            },
+        };
+    },
+    'slide-top': (timeouts) => {
+        const opacityValue = new Animated.Value(0);
+        const yValue = new Animated.Value(0);
+        return {
+            enter(rect) {
+                yValue.setValue(-rect.height);
+                Animated.parallel([
+                    Animated.timing(opacityValue, {
+                        toValue: 1,
+                        duration: timeouts.enter / 3,
+                        useNativeDriver: true,
+                    }),
+                    Animated.timing(yValue, {
+                        toValue: 0,
+                        duration: timeouts.enter,
+                        useNativeDriver: true,
+                    }),
+                ], {
+                    stopTogether: false,
+                }).start();
+            },
+            exit(rect) {
+                Animated.parallel([
+                    Animated.timing(opacityValue, {
+                        toValue: 0,
+                        duration: timeouts.exit,
+                        useNativeDriver: true,
+                    }),
+                    Animated.timing(yValue, {
+                        toValue: -rect.height,
+                        duration: timeouts.exit,
+                        useNativeDriver: true,
+                    }),
+                ], {
+                    stopTogether: false,
+                }).start();
+            },
+            style: {
+                opacity: opacityValue,
+                transform: [{ translateY: yValue }],
+            },
+        };
+    },
+    'slide-right': (timeouts) => {
+        const opacityValue = new Animated.Value(0);
+        const xValue = new Animated.Value(0);
+        return {
+            enter(rect) {
+                xValue.setValue(rect.width);
+                Animated.parallel([
+                    Animated.timing(opacityValue, {
+                        toValue: 1,
+                        duration: timeouts.enter / 3,
+                        useNativeDriver: true,
+                    }),
+                    Animated.timing(xValue, {
+                        toValue: 0,
+                        duration: timeouts.enter,
+                        useNativeDriver: true,
+                    }),
+                ], {
+                    stopTogether: false,
+                }).start();
+            },
+            exit(rect) {
+                Animated.parallel([
+                    Animated.timing(opacityValue, {
+                        toValue: 0,
+                        duration: timeouts.exit,
+                        useNativeDriver: true,
+                    }),
+                    Animated.timing(xValue, {
+                        toValue: rect.width,
+                        duration: timeouts.exit,
+                        useNativeDriver: true,
+                    }),
+                ], {
+                    stopTogether: false,
+                }).start();
+            },
+            style: {
+                opacity: opacityValue,
+                transform: [{ translateX: xValue }],
+            },
+        };
+    },
+    'slide-bottom': (timeouts) => {
+        const opacityValue = new Animated.Value(0);
+        const yValue = new Animated.Value(0);
+        return {
+            enter(rect) {
+                yValue.setValue(rect.height);
+                Animated.parallel([
+                    Animated.timing(opacityValue, {
+                        toValue: 1,
+                        duration: timeouts.enter / 3,
+                        useNativeDriver: true,
+                    }),
+                    Animated.timing(yValue, {
+                        toValue: 0,
+                        duration: timeouts.enter,
+                        useNativeDriver: true,
+                    }),
+                ], {
+                    stopTogether: false,
+                }).start();
+            },
+            exit(rect) {
+                Animated.parallel([
+                    Animated.timing(opacityValue, {
+                        toValue: 0,
+                        duration: timeouts.exit,
+                        useNativeDriver: true,
+                    }),
+                    Animated.timing(yValue, {
+                        toValue: rect.height,
+                        duration: timeouts.exit,
+                        useNativeDriver: true,
+                    }),
+                ], {
+                    stopTogether: false,
+                }).start();
+            },
+            style: {
+                opacity: opacityValue,
+                transform: [{ translateY: yValue }],
+            },
+        };
+    },
+    'slide-left': (timeouts) => {
+        const opacityValue = new Animated.Value(0);
+        const xValue = new Animated.Value(0);
+        return {
+            enter(rect) {
+                xValue.setValue(-rect.width);
+                Animated.parallel([
+                    Animated.timing(opacityValue, {
+                        toValue: 1,
+                        duration: timeouts.enter / 3,
+                        useNativeDriver: true,
+                    }),
+                    Animated.timing(xValue, {
+                        toValue: 0,
+                        duration: timeouts.enter,
+                        useNativeDriver: true,
+                    }),
+                ], {
+                    stopTogether: false,
+                }).start();
+            },
+            exit(rect) {
+                Animated.parallel([
+                    Animated.timing(opacityValue, {
+                        toValue: 0,
+                        duration: timeouts.exit,
+                        useNativeDriver: true,
+                    }),
+                    Animated.timing(xValue, {
+                        toValue: -rect.width,
+                        duration: timeouts.exit,
+                        useNativeDriver: true,
+                    }),
+                ], {
+                    stopTogether: false,
+                }).start();
+            },
+            style: {
+                opacity: opacityValue,
+                transform: [{ translateX: xValue }],
+            },
+        };
+    },
+};
+export const CSSTransition = (props) => {
+    const { children, effect, timeout = 300, onEnter, onEntering, onEntered, onExit, onExiting, onExited, ...restProps } = props;
+    const timeouts = useMemo(() => {
+        return getTimeouts(timeout);
+    }, [timeout]);
+    const anim = useMemo(() => {
+        if (!effect) {
+            return null;
+        }
+        return createAnimStrategies[effect](timeouts);
+    }, [effect, timeouts]);
+    const currentLayout = useRef({
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0,
+    });
+    const handleLayout = useEvent((event) => {
+        currentLayout.current = event.nativeEvent.layout;
+    });
+    const [startEnterLater] = useSetTimeout(() => {
+        startEnter();
+    }, 0);
+    const startEnter = useEvent(() => {
+        if (!anim) {
+            return;
+        }
+        if (currentLayout.current.width > 0 || currentLayout.current.height > 0) {
+            anim.enter(currentLayout.current);
+        }
+        else {
+            startEnterLater();
+        }
+    });
+    const startExit = useEvent(() => {
+        if (!anim) {
+            return;
+        }
+        anim.exit(currentLayout.current);
+    });
+    const handleEnter = () => {
+        onEnter?.();
+    };
+    const handleEntering = () => {
+        onEntering?.();
+        startEnter();
+    };
+    const handleEntered = () => {
+        onEntered?.();
+    };
+    const handleExit = () => {
+        onExit?.();
+        startExit();
+    };
+    const handleExiting = () => {
+        onExiting?.();
+    };
+    const handleExited = () => {
+        // tips: setTimeout 可以解决隐藏后闪烁一下的问题
+        setTimeout(() => {
+            onExited?.();
+        });
+    };
+    return (_jsx(Transition, { ...restProps, timeout: timeout, onEnter: handleEnter, onEntering: handleEntering, onEntered: handleEntered, onExit: handleExit, onExiting: handleExiting, onExited: handleExited, children: (options, props) => {
+            return (_jsx(Animated.View, { ...props, style: [props.style, anim?.style], onLayout: handleLayout, children: isFunction(children) ? children(options, restProps) : children }));
+        } }));
+};
+export default CSSTransition;

package/dist/transition/index.d.ts

@@ -0,0 +1,43 @@
+import { CSSProperties, FC, ReactNode } from 'react';
+export declare const ENTERING = "entering";
+export declare const ENTERED = "entered";
+export declare const EXITING = "exiting";
+export declare const EXITED = "exited";
+export type TransitionStatus = 'entering' | 'entered' | 'exiting' | 'exited';
+export type TransitionTimeout = number | Timeouts;
+export interface Timeouts {
+    enter: number;
+    exit: number;
+    appear?: number;
+}
+export interface TransitionProps {
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode | ((options: {
+        status: TransitionStatus;
+        timeouts: Timeouts;
+    }, props: {
+        [key: PropertyKey]: any;
+    }) => ReactNode);
+    in?: boolean;
+    mountOnEnter?: boolean;
+    unmountOnExit?: boolean;
+    appear?: boolean;
+    enter?: boolean;
+    exit?: boolean;
+    timeout?: TransitionTimeout;
+    onEnter?: () => void;
+    onEntering?: () => void;
+    onEntered?: () => void;
+    onExit?: () => void;
+    onExiting?: () => void;
+    onExited?: () => void;
+    [key: PropertyKey]: unknown;
+}
+export declare function getTimeouts(timeout: TransitionTimeout): {
+    exit: number;
+    enter: number;
+    appear: number;
+};
+export declare const Transition: FC<TransitionProps>;
+export default Transition;

package/dist/transition/index.js

@@ -0,0 +1,156 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { cloneElement, useLayoutEffect, useRef, useState, isValidElement, useMemo, } from 'react';
+import { isFunction, isNumber, noop } from '../utils';
+export const ENTERING = 'entering';
+export const ENTERED = 'entered';
+export const EXITING = 'exiting';
+export const EXITED = 'exited';
+export function getTimeouts(timeout) {
+    let exit, enter, appear;
+    exit = enter = appear = timeout;
+    if (timeout !== undefined && !isNumber(timeout)) {
+        exit = timeout.exit;
+        enter = timeout.enter;
+        appear = timeout.appear ?? enter;
+    }
+    return {
+        exit,
+        enter,
+        appear,
+    };
+}
+export const Transition = (props) => {
+    const { children, className, style, in: _in = false, mountOnEnter = false, unmountOnExit = false, appear = false, enter = true, exit = true, timeout = 0, onEnter = noop, onEntering = noop, onEntered = noop, onExit = noop, onExiting = noop, onExited = noop, ...restProps } = props;
+    const willAppear = useRef(false);
+    const initialUnmount = useRef(false);
+    const [status, setStatus] = useState(() => {
+        if (_in) {
+            if (appear) {
+                willAppear.current = true;
+                return EXITED;
+            }
+            else {
+                return ENTERED;
+            }
+        }
+        else {
+            if (unmountOnExit || mountOnEnter) {
+                initialUnmount.current = true;
+            }
+            return EXITED;
+        }
+    });
+    const timeouts = useMemo(() => getTimeouts(timeout), [timeout]);
+    const processing = useRef(false);
+    const nextCallback = useRef(null);
+    const setNextCallback = (callback) => {
+        let active = true;
+        nextCallback.current = (() => {
+            if (active) {
+                active = false;
+                nextCallback.current = null;
+                callback();
+            }
+        });
+        nextCallback.current.cancel = () => {
+            active = false;
+        };
+        return nextCallback.current;
+    };
+    const finishNextCallback = (_in) => {
+        if (!nextCallback.current) {
+            return;
+        }
+        cancelNextCallback();
+        processing.current = false;
+        if (_in) {
+            onExited?.();
+        }
+        else {
+            onEntered?.();
+        }
+    };
+    const cancelNextCallback = () => {
+        if (nextCallback.current) {
+            nextCallback.current.cancel();
+            nextCallback.current = null;
+        }
+    };
+    const onTransitionEnd = (timeout, handler) => {
+        setTimeout(setNextCallback(handler), timeout);
+    };
+    useLayoutEffect(() => {
+        if (_in) {
+            if (status !== ENTERING && status !== ENTERED) {
+                finishNextCallback(_in);
+                setStatus(ENTERING);
+                onEnter?.();
+                const timeout = willAppear.current
+                    ? timeouts.appear
+                    : enter
+                        ? timeouts.enter
+                        : 0;
+                onTransitionEnd(timeout, () => {
+                    setStatus(ENTERED);
+                });
+                if (willAppear.current) {
+                    willAppear.current = false;
+                }
+            }
+            if (status === ENTERING && !processing.current) {
+                processing.current = true;
+                onEntering?.();
+            }
+            if (status === ENTERED && processing.current) {
+                processing.current = false;
+                onEntered?.();
+            }
+        }
+        else {
+            if (status !== EXITING && status !== EXITED) {
+                finishNextCallback(_in);
+                setStatus(EXITING);
+                onExit?.();
+                onTransitionEnd(exit ? timeouts.exit : 0, () => {
+                    setStatus(EXITED);
+                });
+            }
+            if (status === EXITING && !processing.current) {
+                processing.current = true;
+                onExiting?.();
+            }
+            if (status === EXITED && processing.current) {
+                processing.current = false;
+                onExited?.();
+            }
+        }
+    });
+    useLayoutEffect(() => {
+        initialUnmount.current = false;
+        return cancelNextCallback;
+    }, []);
+    if (initialUnmount.current || (status === EXITED && unmountOnExit)) {
+        return null;
+    }
+    if (isFunction(children)) {
+        return (_jsx(_Fragment, { children: children({ status, timeouts }, {
+                ...restProps,
+                style,
+                className,
+            }) }));
+    }
+    if (isValidElement(children)) {
+        return cloneElement(children, {
+            ...children.props,
+            ...restProps,
+            className: classNames(children.props.className, className),
+            style: {
+                ...children.props.style,
+                ...style,
+            },
+        });
+    }
+    return _jsx(_Fragment, { children: children });
+};
+export default Transition;

package/dist/transition/index.scss

@@ -0,0 +1,158 @@
+@import '../style/base.scss';
+// #variables
+$sar-transition-duration: $sar-duration !default;
+// #endvariables
+
+@include bem(transition) {
+  // fade
+  @include m(fade-enter, fade-entering) {
+    animation: #{bem-ns(fade-enter)} $sar-transition-duration ease-out both;
+  }
+  @keyframes #{bem-ns(fade-enter)} {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+  @include m(fade-exiting, fade-exited) {
+    animation: #{bem-ns(fade-exit)} $sar-transition-duration ease-in both;
+  }
+  @keyframes #{bem-ns(fade-exit)} {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+
+  // zoom
+  @include m(zoom-enter, zoom-entering) {
+    animation: #{bem-ns(zoom-enter)} $sar-transition-duration ease both;
+  }
+  @keyframes #{bem-ns(zoom-enter)} {
+    from {
+      opacity: 0;
+      transform: scale(0.7);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+  @include m(zoom-exiting, zoom-exited) {
+    animation: #{bem-ns(zoom-exit)} $sar-transition-duration ease-in both;
+  }
+  @keyframes #{bem-ns(zoom-exit)} {
+    from {
+      opacity: 1;
+      transform: scale(1);
+    }
+    to {
+      opacity: 0;
+      transform: scale(0.9);
+    }
+  }
+
+  // slideTop
+  @include m(slide-top-enter, slide-top-entering) {
+    animation: #{bem-ns(slide-top-enter)} $sar-transition-duration ease-out both;
+  }
+  @keyframes #{bem-ns(slide-top-enter)} {
+    from {
+      transform: translate3d(0, -100%, 0);
+    }
+    to {
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
+  @include m(slide-top-exiting, slide-top-exited) {
+    animation: #{bem-ns(slide-top-exit)} $sar-transition-duration ease-in both;
+  }
+  @keyframes #{bem-ns(slide-top-exit)} {
+    from {
+      transform: translate3d(0, 0, 0);
+    }
+    to {
+      transform: translate3d(0, -100%, 0);
+    }
+  }
+
+  // slideRight
+  @include m(slide-right-enter, slide-right-entering) {
+    animation: #{bem-ns(slide-right-enter)} $sar-transition-duration ease-out both;
+  }
+  @keyframes #{bem-ns(slide-right-enter)} {
+    from {
+      transform: translate3d(100%, 0, 0);
+    }
+    to {
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
+  @include m(slide-right-exiting, slide-right-exited) {
+    animation: #{bem-ns(slide-right-exit)} $sar-transition-duration ease-in both;
+  }
+  @keyframes #{bem-ns(slide-right-exit)} {
+    from {
+      transform: translate3d(0, 0, 0);
+    }
+    to {
+      transform: translate3d(100%, 0, 0);
+    }
+  }
+
+  // slideBottom
+  @include m(slide-bottom-enter, slide-bottom-entering) {
+    animation: #{bem-ns(slide-bottom-enter)} $sar-transition-duration ease-out both;
+  }
+  @keyframes #{bem-ns(slide-bottom-enter)} {
+    from {
+      transform: translate3d(0, 100%, 0);
+    }
+    to {
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
+  @include m(slide-bottom-exiting, slide-bottom-exited) {
+    animation: #{bem-ns(slide-bottom-exit)} $sar-transition-duration ease-in both;
+  }
+  @keyframes #{bem-ns(slide-bottom-exit)} {
+    from {
+      transform: translate3d(0, 0, 0);
+    }
+    to {
+      transform: translate3d(0, 100%, 0);
+    }
+  }
+
+  // slideLeft
+  @include m(slide-left-enter, slide-left-entering) {
+    animation: #{bem-ns(slide-left-enter)} $sar-transition-duration ease-out;
+  }
+  @keyframes #{bem-ns(slide-left-enter)} {
+    from {
+      transform: translate3d(-100%, 0, 0);
+    }
+    to {
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
+  @include m(slide-left-exiting, slide-left-exited) {
+    animation: #{bem-ns(slide-left-exit)} $sar-transition-duration ease-in both;
+  }
+  @keyframes #{bem-ns(slide-left-exit)} {
+    from {
+      transform: translate3d(0, 0, 0);
+    }
+    to {
+      transform: translate3d(-100%, 0, 0);
+    }
+  }
+}

package/dist/upload/Preview.d.ts

@@ -0,0 +1,35 @@
+import { FC, ReactNode } from 'react';
+import { ImageProps } from '@tarojs/components';
+import { BaseProps } from '../base';
+export type UploadStatus = 'uploading' | 'failed' | 'done';
+export interface UploadFile {
+    type: 'image' | 'video';
+    size: number;
+    path: string;
+    duration: number;
+    width: number;
+    height: number;
+    originalFileObj: File | null;
+}
+export interface UploadPreviewProps extends Omit<BaseProps, 'children'> {
+    file?: UploadFile;
+    url?: string;
+    isImage?: boolean;
+    isVideo?: boolean;
+    index?: number;
+    disabled?: boolean;
+    readOnly?: boolean;
+    message?: string;
+    name?: string;
+    status?: UploadStatus;
+    onImageClick?: (index: number) => void;
+    removable?: boolean;
+    remove?: ReactNode;
+    beforeRemove?: (index: number) => boolean | Promise<void>;
+    onRemove?: (index: number) => void;
+    mode?: ImageProps['mode'];
+    contextId?: string;
+}
+export type UploadFileItem = Pick<UploadPreviewProps, 'className' | 'style' | 'file' | 'name' | 'url' | 'isImage' | 'isVideo' | 'status' | 'message' | 'removable' | 'remove' | 'beforeRemove' | 'onRemove'>;
+export declare const UploadPreview: FC<UploadPreviewProps>;
+export default UploadPreview;