sard 1.0.0-canary.0

package/dist/picker/InertialMotion.js

@@ -0,0 +1,141 @@
+// 启动惯性滑动的时间阈值
+const momentumTimeThreshold = 300;
+// 启动惯性滑动的距离阈值
+const momentumYThreshold = 15;
+// 惯性滑动加速度
+const deceleration = 0.003;
+// 回弹阻力
+const bounceRate = 10;
+// 强弱回弹的分割值
+const bounceThreshold = 300;
+// 回弹的最大限度
+const durationMap = {
+    noBounce: 1000,
+    weekBounce: 800,
+    strongBounce: 400,
+};
+// 回弹时间
+const resetDuration = 500;
+// 阻尼系数
+const damping = 3;
+const bezierMap = {
+    noBounce: 'cubic-bezier(.23,1,.68,1)',
+    weekBounce: 'cubic-bezier(.25,.46,.45,.94)',
+    strongBounce: 'cubic-bezier(.25,.46,.45,.94)',
+    reset: 'cubic-bezier(.165, .84, .44, 1)',
+};
+export function createInertialMotion(options) {
+    const { scrollHeight: _scrollHeight, contentHeight: _contentHeight, onReset, onStop, onMove: _onMove, onOutsideEnd, onInsideEnd, beforeMonmentum, onMomentum, maxOverflowY = 0, } = options;
+    let scrollHeight = _scrollHeight;
+    let contentHeight = _contentHeight;
+    let startClientY = 0;
+    let currentOffsetY = 0;
+    let startOffsetY = 0;
+    let momentumStartY = 0;
+    let startTime = 0;
+    let minY = scrollHeight - contentHeight;
+    const maxY = 0;
+    function setSize(scrollH, contentH) {
+        scrollHeight = scrollH;
+        contentHeight = contentH;
+        minY = scrollHeight - contentHeight;
+    }
+    let timer;
+    function momentumEnd(duration) {
+        timer = setTimeout(() => {
+            timer = null;
+            isNeedReset();
+        }, duration);
+    }
+    function stop() {
+        if (timer) {
+            clearTimeout(timer);
+        }
+        onStop();
+    }
+    function destroy() {
+        if (timer) {
+            clearTimeout(timer);
+        }
+    }
+    function onStart(clientY) {
+        stop();
+        startClientY = clientY;
+        momentumStartY = startOffsetY = currentOffsetY;
+        startTime = Date.now();
+    }
+    function onMove(clientY) {
+        const deltaY = clientY - startClientY;
+        let offsetY = Math.round(startOffsetY + deltaY);
+        if (offsetY < minY) {
+            offsetY = Math.round(minY + (offsetY - minY) / damping);
+        }
+        else if (offsetY > maxY) {
+            offsetY = Math.round(offsetY / damping);
+        }
+        currentOffsetY = offsetY;
+        const now = Date.now();
+        if (now - startTime > momentumTimeThreshold) {
+            momentumStartY = currentOffsetY;
+            startTime = now;
+        }
+        _onMove(currentOffsetY);
+    }
+    function onEnd() {
+        const resetValue = isNeedReset();
+        if (resetValue) {
+            onOutsideEnd(currentOffsetY);
+            return;
+        }
+        const absDeltaY = Math.abs(currentOffsetY - momentumStartY);
+        const duration = Date.now() - startTime;
+        if (duration < momentumTimeThreshold && absDeltaY > momentumYThreshold) {
+            momentum(currentOffsetY, momentumStartY, duration);
+        }
+        else {
+            onInsideEnd(currentOffsetY);
+        }
+    }
+    function isNeedReset() {
+        const offsetY = Math.min(Math.max(minY, currentOffsetY), maxY);
+        if (offsetY !== currentOffsetY) {
+            currentOffsetY = offsetY;
+            onReset(offsetY, resetDuration, bezierMap.reset);
+            return true;
+        }
+    }
+    function momentum(current, start, duration) {
+        const offset = current - start;
+        const speed = (2 * Math.abs(offset)) / duration;
+        const direction = offset < 0 ? -1 : 1;
+        const distance = (speed / deceleration) * direction;
+        let destination = current + distance;
+        let type = 'noBounce';
+        let overflowY;
+        if (destination < minY) {
+            overflowY = minY - destination;
+            type = overflowY > bounceThreshold ? 'strongBounce' : 'weekBounce';
+            destination = Math.max(minY - maxOverflowY, minY - overflowY / bounceRate);
+        }
+        else if (destination > maxY) {
+            overflowY = destination - maxY;
+            type = overflowY > bounceThreshold ? 'strongBounce' : 'weekBounce';
+            destination = Math.min(maxY + maxOverflowY, maxY + overflowY / bounceRate);
+        }
+        destination = beforeMonmentum(destination);
+        currentOffsetY = destination;
+        onMomentum(destination, durationMap[type], bezierMap[type]);
+        momentumEnd(durationMap[type]);
+    }
+    function setCurrentOffsetY(offsetY) {
+        currentOffsetY = offsetY;
+    }
+    return {
+        onStart,
+        onMove,
+        onEnd,
+        setCurrentOffsetY,
+        setSize,
+        destroy,
+    };
+}

package/dist/picker/PickerView.d.ts

@@ -0,0 +1 @@
+export { PickerView, type PickerViewProps, PickerViewColumn, } from '@tarojs/components';

package/dist/picker/PickerView.h5.d.ts

@@ -0,0 +1,17 @@
+import { AnyFunction, BaseProps } from '../base';
+import { PickerViewColumn } from './PickerViewColumn';
+export { PickerViewColumn };
+export interface PickerViewProps extends BaseProps {
+    value?: number[];
+    onChange?: (event: {
+        detail: {
+            value: number[];
+        };
+    }) => void;
+    immediateChange?: boolean;
+    onPickEnd?: AnyFunction;
+    maskClass?: string;
+    indicatorStyle?: string;
+    indicatorClass?: string;
+}
+export declare const PickerView: (props: PickerViewProps) => import("react/jsx-runtime").JSX.Element;

package/dist/picker/PickerView.h5.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children, cloneElement, useEffect, useRef } from 'react';
+import classNames from 'classnames';
+import { View } from '@tarojs/components';
+import { useBem } from '../use';
+import { PickerViewColumn } from './PickerViewColumn';
+export { PickerViewColumn };
+export const PickerView = (props) => {
+    const { children, className, value, onChange, immediateChange, maskClass, indicatorStyle, indicatorClass, ...restProps } = props;
+    const [bem] = useBem('picker');
+    const currentValue = useRef(value || []);
+    useEffect(() => {
+        if (value) {
+            currentValue.current = value;
+        }
+    }, [value]);
+    return (_jsx(View, { ...restProps, className: classNames(bem.e('wrapper'), className), children: Children.map(children, (element, i) => {
+            return cloneElement(element, {
+                value: value?.[i] || 0,
+                immediateChange,
+                maskClass,
+                indicatorStyle,
+                indicatorClass,
+                onChange(index) {
+                    currentValue.current[i] = index;
+                    const nextValue = currentValue.current.map((item) => item || 0);
+                    currentValue.current = nextValue.slice();
+                    onChange?.({
+                        detail: {
+                            value: nextValue,
+                        },
+                    });
+                },
+            });
+        }) }));
+};

package/dist/picker/PickerView.js

@@ -0,0 +1 @@
+export { PickerView, PickerViewColumn, } from '@tarojs/components';

package/dist/picker/PickerViewColumn copy.d.ts

@@ -0,0 +1,9 @@
+import { ReactElement } from 'react';
+export interface PickerViewColumnProps {
+    children?: ReactElement | ReactElement[];
+    indicatorHeight?: number;
+    value?: number;
+    onChange?: (value: number) => void;
+    immediateChange?: boolean;
+}
+export declare const PickerViewColumn: (props: PickerViewColumnProps) => import("react/jsx-runtime").JSX.Element;

package/dist/picker/PickerViewColumn copy.js

@@ -0,0 +1,143 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, cloneElement, useEffect, useMemo, useRef, } from 'react';
+import classNames from 'classnames';
+import { View } from '@tarojs/components';
+import { useBem, useEvent } from '../use';
+import { isNullish, minmax } from '../utils';
+import Halfline from '../halfline';
+import { usePan } from '../pan-gesture-detector/usePan';
+import PanGestureDetector from '../pan-gesture-detector';
+import { createInertialMotion } from './InertialMotion';
+export const PickerViewColumn = (props) => {
+    const { children, indicatorHeight = 48, value, onChange } = props;
+    const [bem] = useBem('picker');
+    const columns = Children.toArray(children);
+    const itemCount = columns.length;
+    const groupRef = useRef(null);
+    const currentIndex = useRef();
+    const setTranslate = useEvent((value) => {
+        if (groupRef.current) {
+            groupRef.current.style.transform = `translateY(${value}px) translateZ(0px)`;
+        }
+    });
+    const setDuration = (duration) => {
+        if (groupRef.current) {
+            groupRef.current.style.transitionDuration = `${duration}ms`;
+        }
+    };
+    const setBezier = (bezier) => {
+        if (groupRef.current) {
+            groupRef.current.style.transitionTimingFunction = bezier;
+        }
+    };
+    const setIndex = useEvent((index, emitChange = false, animated = false) => {
+        index = minmax(index, 0, itemCount - 1);
+        if (index === currentIndex.current) {
+            return false;
+        }
+        const to = -index * indicatorHeight;
+        currentIndex.current = index;
+        motion.setCurrentOffsetY(to);
+        setDuration(animated ? 300 : 0);
+        setTranslate(to);
+        if (emitChange) {
+            onChange?.(index);
+        }
+    });
+    const handleStop = useEvent(() => {
+        setDuration(0);
+        if (groupRef.current) {
+            const offsetY = +window
+                .getComputedStyle(groupRef.current)
+                .getPropertyValue('transform')
+                .split(')')[0]
+                .split(', ')[5];
+            setTranslate(offsetY);
+            motion.setCurrentOffsetY(offsetY);
+        }
+    });
+    const handleReset = useEvent((offsetY, duration, bezier) => {
+        setTranslate(offsetY);
+        setDuration(duration);
+        setBezier(bezier);
+    });
+    const handleMotionEnd = useEvent((offsetY) => {
+        const index = Math.round(Math.abs(offsetY) / indicatorHeight);
+        const correctOffsetY = -index * indicatorHeight;
+        if (correctOffsetY !== offsetY) {
+            setDuration(300);
+            setTranslate(correctOffsetY);
+            motion.setCurrentOffsetY(correctOffsetY);
+        }
+        if (currentIndex.current !== index) {
+            currentIndex.current = index;
+            onChange?.(index);
+        }
+    });
+    const beforeMonmentum = useEvent((offsetY) => {
+        // inside
+        if (offsetY < 0 && offsetY > -(itemCount - 1) * indicatorHeight) {
+            const index = Math.round(Math.abs(offsetY) / indicatorHeight);
+            const correctOffsetY = -index * indicatorHeight;
+            if (currentIndex.current !== index) {
+                currentIndex.current = index;
+                onChange?.(index);
+            }
+            return correctOffsetY;
+        }
+        // outside
+        const index = offsetY > 0 ? 0 : itemCount - 1;
+        if (currentIndex.current !== index) {
+            currentIndex.current = index;
+            onChange?.(index);
+        }
+        return offsetY;
+    });
+    const handleMomentum = useEvent((offsetY, duration, bezier) => {
+        setTranslate(offsetY);
+        setDuration(duration);
+        setBezier(bezier);
+    });
+    const motion = useMemo(() => {
+        return createInertialMotion({
+            scrollHeight: indicatorHeight,
+            contentHeight: indicatorHeight * itemCount,
+            maxOverflowY: 0,
+            onStop: handleStop,
+            onMove: (offsetY) => {
+                setTranslate(offsetY);
+            },
+            onOutsideEnd: handleMotionEnd,
+            onInsideEnd: handleMotionEnd,
+            beforeMonmentum: beforeMonmentum,
+            onMomentum: handleMomentum,
+            onReset: handleReset,
+        });
+    }, []);
+    useMemo(() => {
+        motion.setSize(indicatorHeight, indicatorHeight * itemCount);
+    }, [indicatorHeight, itemCount]);
+    const handlers = usePan({
+        start(event) {
+            motion.onStart(event.y0);
+        },
+        move(event) {
+            motion.onMove(event.moveY);
+        },
+        end: motion.onEnd,
+    });
+    const handleItemClick = (index) => {
+        setIndex(index, true, true);
+    };
+    useEffect(() => {
+        if (!isNullish(value)) {
+            setIndex(value, false, false);
+        }
+    }, [value]);
+    useEffect(() => motion.destroy, []);
+    return (_jsx(PanGestureDetector, { handlers: handlers, children: _jsxs(View, { className: bem.e('column'), children: [_jsx(View, { className: classNames(bem.e('mask'), bem.em('mask', 'top')) }), _jsxs(View, { className: bem.e('indicator'), style: { height: indicatorHeight + 'px' }, children: [_jsx(View, { className: bem.e('item-group'), ref: groupRef, children: Children.map(children, (element, i) => {
+                                return cloneElement(element, {
+                                    onClick: () => handleItemClick(i),
+                                });
+                            }) }), _jsx(Halfline, { direction: "top" }), _jsx(Halfline, { direction: "bottom" })] }), _jsx(View, { className: classNames(bem.e('mask'), bem.em('mask', 'bottom')) })] }) }));
+};

package/dist/picker/PickerViewColumn.d.ts

@@ -0,0 +1,12 @@
+import { ReactElement } from 'react';
+export interface PickerViewColumnProps {
+    children?: ReactElement | ReactElement[];
+    indicatorHeight?: number;
+    value?: number;
+    onChange?: (value: number) => void;
+    immediateChange?: boolean;
+    maskClass?: string;
+    indicatorStyle?: string;
+    indicatorClass?: string;
+}
+export declare const PickerViewColumn: (props: PickerViewColumnProps) => import("react/jsx-runtime").JSX.Element;

package/dist/picker/PickerViewColumn.js

@@ -0,0 +1,238 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, cloneElement, useEffect, useRef } from 'react';
+import { View } from '@tarojs/components';
+import { useBem, useEvent } from '../use';
+import { animate, easeOutCubic, easeOutQuad, getDirectionByTwoPoints, getDistanceByTowPoints, getRectDampingValue, isNullish, minmax, } from '../utils';
+import Halfline from '../halfline';
+import { usePan } from '../pan-gesture-detector/usePan';
+import PanGestureDetector from '../pan-gesture-detector';
+import classNames from 'classnames';
+// 回弹运动强度判断阈值，不超出边界无回弹，超出此值为强回弹，否则为弱回弹
+const bounceThreshold = 300;
+// 阻尼系数
+const damping = 2;
+// 回正运动时间
+const correctDuration = 300;
+// 惯性运动时间，会与速度相乘得到运动距离
+const inertiaTime = 250;
+// 允许超出边界的item数量
+const maxOverflowCount = 2;
+// 触发平移的最小距离
+const panMinDistance = 5;
+// 触发平移滑动的速度 px/ms
+const panSwipeMinSpeed = 0.3;
+const maxLastMoveCoordCount = 3;
+// 不同回弹强度对应的运动时间
+const mapBounceDuration = {
+    noBounce: 1000,
+    weekBounce: 650,
+    strongBounce: 500,
+};
+// 不同回弹强度对应的缓动公式
+const mapBounceEase = {
+    noBounce: easeOutCubic,
+    weekBounce: easeOutQuad,
+    strongBounce: easeOutQuad,
+};
+// 不同回弹强度允许越出边界的距离（相对于item高度）
+const mapBounceInertiaOverflowExtra = {
+    noBounce: 0,
+    weekBounce: 0.5,
+    strongBounce: 1,
+};
+export const PickerViewColumn = (props) => {
+    const { children, indicatorHeight = 48, value, onChange, immediateChange, maskClass, indicatorStyle, indicatorClass, } = props;
+    void maskClass;
+    void indicatorStyle;
+    void indicatorClass;
+    const [bem] = useBem('picker');
+    const columns = Children.toArray(children);
+    const itemCount = columns.length;
+    const isMoving = useRef(false);
+    const translate = useRef(0);
+    const downTranslate = useRef(0);
+    const stopInertia = useRef();
+    const stopCorrect = useRef();
+    const groupRef = useRef(null);
+    const currentIndex = useRef();
+    const setTranslate = (value) => {
+        translate.current = value;
+        if (groupRef.current) {
+            groupRef.current.style.transform = `translate3d(0, ${value}px, 0)`;
+        }
+    };
+    const changedAtLeastOnce = useRef(false);
+    const complete = (index, emitChange) => {
+        if (currentIndex.current !== index) {
+            currentIndex.current = index;
+            if (emitChange) {
+                changedAtLeastOnce.current = true;
+                onChange?.(index);
+            }
+        }
+    };
+    const toCorrectPosition = (to, animated = true, emitChange = true) => {
+        if (immediateChange) {
+            complete(Math.abs(to / indicatorHeight), emitChange);
+        }
+        stopCorrect.current = animate({
+            from: translate.current,
+            to,
+            duration: animated ? correctDuration : 0,
+            step(value) {
+                setTranslate(value);
+            },
+            finish(value) {
+                if (immediateChange) {
+                    return;
+                }
+                complete(Math.abs(value / indicatorHeight), emitChange);
+            },
+        });
+    };
+    const getCurrentDampedVaule = (value, division = false) => {
+        return getRectDampingValue(value, indicatorHeight, indicatorHeight * itemCount, division ? 1 / damping || 0 : damping);
+    };
+    const setIndex = useEvent((index, emitChange = false, animated = false) => {
+        index = minmax(index, 0, columns.length - 1);
+        if (index === currentIndex.current) {
+            return false;
+        }
+        stopInertia.current?.();
+        stopCorrect.current?.();
+        const to = -index * indicatorHeight;
+        toCorrectPosition(to, animated, emitChange);
+        return true;
+    });
+    const handleTouchStart = useEvent(() => {
+        stopInertia.current?.();
+        stopCorrect.current?.();
+        downTranslate.current = getCurrentDampedVaule(translate.current);
+    });
+    const moveCoordQueue = useRef([]);
+    const handleTouchMove = useEvent((event) => {
+        moveCoordQueue.current.push({
+            x: event.moveX,
+            y: event.moveY,
+            time: Date.now(),
+        });
+        if (moveCoordQueue.current.length > maxLastMoveCoordCount) {
+            moveCoordQueue.current = moveCoordQueue.current.slice(-maxLastMoveCoordCount);
+        }
+        isMoving.current = true;
+        setTranslate(getCurrentDampedVaule(downTranslate.current + event.dy, true));
+    });
+    const swipeInfo = useRef({
+        direction: undefined,
+        speed: 0,
+    });
+    const isPanSwipe = () => {
+        const points = moveCoordQueue.current;
+        moveCoordQueue.current = [];
+        if (points.length >= 2) {
+            const point1 = points[0];
+            const point2 = points[points.length - 1];
+            const distance = getDistanceByTowPoints(point1, point2);
+            if (distance > panMinDistance) {
+                const speed = distance / (point2.time - point1.time);
+                if (speed >= panSwipeMinSpeed) {
+                    const direction = getDirectionByTwoPoints(point1, point2);
+                    swipeInfo.current = {
+                        speed,
+                        direction,
+                    };
+                    return true;
+                }
+            }
+        }
+    };
+    const handlePanSwipe = () => {
+        const endEdge = (1 - itemCount) * indicatorHeight;
+        const isOverflow = translate.current > 0 || translate.current < endEdge;
+        if (isOverflow) {
+            return;
+        }
+        const direction = swipeInfo.current.direction === 'up' ? -1 : 1;
+        let to = translate.current + direction * (swipeInfo.current.speed * inertiaTime);
+        to = Math.round(to / indicatorHeight) * indicatorHeight;
+        let type = 'noBounce';
+        if (to > bounceThreshold || to < endEdge - bounceThreshold) {
+            type = 'strongBounce';
+        }
+        else if (to > 0 || to < endEdge) {
+            type = 'weekBounce';
+        }
+        const maxOverflow = maxOverflowCount * indicatorHeight;
+        to = minmax(to, endEdge - maxOverflow, maxOverflow);
+        if (immediateChange) {
+            complete(Math.abs(minmax(to, endEdge, 0) / indicatorHeight), true);
+        }
+        stopInertia.current = animate({
+            from: translate.current,
+            to,
+            duration: mapBounceDuration[type],
+            easing: mapBounceEase[type],
+            step(value) {
+                const extra = mapBounceInertiaOverflowExtra[type];
+                const withinTranslate = minmax(value, (1 - itemCount - extra) * indicatorHeight, extra * indicatorHeight);
+                if (value !== withinTranslate) {
+                    stopInertia.current?.();
+                    toCorrectPosition(withinTranslate >= 0 ? 0 : endEdge, true, !immediateChange);
+                }
+                else {
+                    setTranslate(value);
+                }
+            },
+            finish(value) {
+                if (value > 0 || value < endEdge) {
+                    toCorrectPosition(value > 0 ? 0 : endEdge, true, !immediateChange);
+                }
+                else {
+                    complete(Math.abs(value / indicatorHeight), !immediateChange);
+                }
+            },
+        });
+    };
+    const handleTouchEnd = useEvent(() => {
+        if (isMoving.current) {
+            setTimeout(() => {
+                isMoving.current = false;
+            }, 0);
+        }
+        const endEdge = (1 - itemCount) * indicatorHeight;
+        const isOverflow = translate.current > 0 || translate.current < endEdge;
+        if (isPanSwipe() && !isOverflow) {
+            handlePanSwipe();
+            return;
+        }
+        toCorrectPosition(Math.round(minmax(translate.current, endEdge, 0) / indicatorHeight) *
+            indicatorHeight);
+    });
+    const handlers = usePan({
+        start: handleTouchStart,
+        move: handleTouchMove,
+        end: handleTouchEnd,
+    });
+    const handleItemClick = (index) => {
+        if (isMoving.current) {
+            return;
+        }
+        setIndex(index, true, true);
+    };
+    useEffect(() => {
+        if (!isNullish(value)) {
+            setIndex(value, false, false);
+        }
+    }, [value]);
+    useEffect(() => {
+        return () => {
+            stopInertia.current?.();
+            stopCorrect.current?.();
+        };
+    }, []);
+    return (_jsx(PanGestureDetector, { handlers: handlers, children: _jsxs(View, { className: bem.e('column'), children: [_jsx(View, { className: classNames(bem.e('mask')) }), _jsxs(View, { className: bem.e('indicator'), style: { height: indicatorHeight + 'px' }, children: [_jsx(View, { className: bem.e('item-group'), ref: groupRef, children: Children.map(children, (element, i) => {
+                                return cloneElement(element, {
+                                    onClick: () => handleItemClick(i),
+                                });
+                            }) }), _jsx(Halfline, { direction: "top" }), _jsx(Halfline, { direction: "bottom" })] })] }) }));
+};

package/dist/picker/index.d.ts

@@ -0,0 +1,38 @@
+import { ForwardRefExoticComponent, RefAttributes, PropsWithoutRef } from 'react';
+import { PickerViewProps } from './PickerView';
+import { PopoutProps } from '../popout';
+export * from './PickerView';
+export interface PickerOptionKeys {
+    label?: string;
+    value?: string;
+    children?: string;
+}
+type PickerOptionObject = {
+    label?: string | number;
+    value?: string | number;
+    children?: PickerOption[];
+    [key: PropertyKey]: any;
+};
+export type PickerOption = PickerOptionObject | string | number;
+export interface PickerProps extends Omit<PickerViewProps, 'value' | 'onChange'> {
+    columns?: PickerOption[] | PickerOption[][];
+    optionKeys?: PickerOptionKeys;
+    value?: any;
+    defaultValue?: any;
+    onChange?: (value: any, selectedOptions: PickerOption[], selectedIndex: number[]) => void;
+    withPopout?: boolean;
+    popoutProps?: PopoutProps;
+    outletFormatter?: (labels: (string | number)[]) => string;
+}
+export interface PickerRef {
+    getValueForcibly: () => any;
+}
+export interface PickerFC extends ForwardRefExoticComponent<PropsWithoutRef<PickerProps> & RefAttributes<PickerRef>> {
+    alwaysHasValue: boolean;
+    outletFormatter: typeof outletFormatter;
+    defaultOutletFormatter: typeof defaultOutletFormatter;
+}
+declare function defaultOutletFormatter(labels: (string | number)[]): string;
+declare function outletFormatter(props: PickerProps, value: any): string;
+export declare const Picker: PickerFC;
+export default Picker;