@nutui/nutui-react-taro 1.5.2 → 1.5.3-beta.1

package/dist/esm/swipe.taro-ea35f07f.js

@@ -0,0 +1,177 @@
+import React__default, { forwardRef, useRef, useState, useMemo, useImperativeHandle, useEffect } from 'react';
+import classNames from 'classnames';
+import { useReady, nextTick } from '@tarojs/taro';
+import { c as cn } from './bem-350c1702.js';
+import { u as useTouch } from './useTouch-db24bb5c.js';
+import { g as getRectByTaro } from './useClientRect-1f8ed1fe.js';
+
+function preventDefault(event, isStopPropagation) {
+    if (typeof event.cancelable !== 'boolean' || event.cancelable) {
+        event.preventDefault();
+    }
+    if (isStopPropagation) {
+        event.stopPropagation();
+    }
+}
+const defaultProps = {
+    name: '',
+    leftWidth: 0,
+    rightWidth: 0,
+};
+const Swipe = forwardRef((props, instanceRef) => {
+    const swipeBem = cn('swipe');
+    const touch = useTouch();
+    // 获取元素的时候要在页面 onReady 后，需要参考小程序的事件周期
+    useReady(() => {
+        const getWidth = async () => {
+            if (leftWrapper.current) {
+                const leftRect = await getRectByTaro(leftWrapper.current);
+                setActionWidth((v) => ({ ...v, left: leftRect.width }));
+            }
+            if (rightWrapper.current) {
+                const rightRect = await getRectByTaro(rightWrapper.current);
+                setActionWidth((v) => ({ ...v, right: rightRect.width }));
+            }
+        };
+        nextTick(() => getWidth());
+    });
+    const { children, className, style } = { ...defaultProps, ...props };
+    const root = useRef();
+    const opened = useRef(false);
+    const lockClick = useRef(false);
+    const startOffset = useRef(0);
+    const [state, setState] = useState({
+        offset: 0,
+        dragging: false,
+    });
+    const [actionWidth, setActionWidth] = useState({
+        left: 0,
+        right: 0,
+    });
+    const wrapperStyle = {
+        transform: `translate3d(${state.offset}px, 0, 0)`,
+        transitionDuration: state.dragging ? '0s' : '.6s',
+    };
+    const leftWidth = useMemo(() => (props.leftWidth ? props.leftWidth : actionWidth.left), [props.leftWidth, actionWidth.left]);
+    const rightWidth = useMemo(() => (props.rightWidth ? props.rightWidth : actionWidth.right), [props.rightWidth, actionWidth.right]);
+    const onTouchStart = async (event) => {
+        if (leftWrapper.current) {
+            const leftRect = await getRectByTaro(leftWrapper.current);
+            setActionWidth((v) => ({ ...v, left: leftRect.width }));
+        }
+        if (rightWrapper.current) {
+            const rightRect = await getRectByTaro(rightWrapper.current);
+            setActionWidth((v) => ({ ...v, right: rightRect.width }));
+        }
+        if (!props.disabled) {
+            startOffset.current = state.offset;
+            touch.start(event);
+            props.onTouchStart && props.onTouchStart(event);
+        }
+    };
+    const onTouchMove = (event) => {
+        if (props.disabled) {
+            return;
+        }
+        touch.move(event);
+        props.onTouchMove && props.onTouchMove(event);
+        if (touch.isHorizontal()) {
+            lockClick.current = true;
+            const newState = { ...state, dragging: true };
+            const isEdge = !opened || touch.deltaX * startOffset.current < 0;
+            if (isEdge) {
+                preventDefault(event, true);
+            }
+            newState.offset = rangeCalculation(touch.deltaX + startOffset.current, -rightWidth || 0, leftWidth || 0);
+            setState(newState);
+        }
+    };
+    const onTouchEnd = (event) => {
+        if (state.dragging) {
+            setState((v) => ({ ...v, dragging: false }));
+            toggle(state.offset > 0 ? 'left' : 'right');
+            setTimeout(() => {
+                lockClick.current = false;
+            }, 0);
+            props.onTouchEnd && props.onTouchEnd(event);
+        }
+    };
+    const toggle = (side) => {
+        const offset = Math.abs(state.offset);
+        const base = 0.3;
+        const baseNum = opened ? 1 - base : base;
+        const width = side === 'left' ? leftWidth : rightWidth;
+        if (width && offset > Number(width) * baseNum) {
+            open(side);
+        }
+        else {
+            close(side);
+        }
+    };
+    const open = (side) => {
+        opened.current = true;
+        const offset = side === 'left' ? leftWidth : -rightWidth;
+        const name = props.name;
+        props.onOpen?.({ name, position: side });
+        setState((v) => ({ ...v, offset: Number(offset) || 0 }));
+    };
+    const close = (position) => {
+        if (opened.current) {
+            opened.current = false;
+            props.onClose?.({
+                name: props.name,
+                position: position || 'left',
+            });
+        }
+        setState((v) => ({ ...v, offset: 0 }));
+    };
+    const rangeCalculation = (num, min, max) => {
+        return Math.min(Math.max(Number(num), Number(min)), Number(max));
+    };
+    const leftWrapper = useRef(null);
+    const rightWrapper = useRef(null);
+    const renderActionContent = (side) => {
+        if (props[`${side}Action`]) {
+            return (React__default.createElement("div", { id: "left", ref: side === 'left' ? leftWrapper : rightWrapper, className: `${swipeBem(side)}`, onClick: (e) => handleOperate(e, side) }, props[`${side}Action`]));
+        }
+        return null;
+    };
+    const handleOperate = (event, position) => {
+        event.stopPropagation();
+        if (props.beforeClose) {
+            props.beforeClose(position);
+        }
+        else {
+            props.onActionClick && props.onActionClick(event, position);
+        }
+    };
+    useImperativeHandle(instanceRef, () => ({
+        open,
+        close: () => close(),
+    }));
+    useEffect(() => {
+        const handler = (event) => {
+            const targets = [root];
+            if (targets.some((targetItem) => {
+                const targetElement = targetItem.current || targetItem;
+                return !targetElement || targetElement?.contains(event.target);
+            })) {
+                return;
+            }
+            close();
+        };
+        document.addEventListener('touchstart', handler);
+        return () => {
+            document.removeEventListener('touchstart', handler);
+        };
+    }, []);
+    return (React__default.createElement("div", { ref: root, className: classNames(swipeBem(), className), onTouchStart: (e) => onTouchStart(e), onTouchMove: (e) => onTouchMove(e), onTouchEnd: (e) => onTouchEnd(e), style: style },
+        React__default.createElement("div", { className: `${swipeBem('wrapper')}`, style: wrapperStyle },
+            renderActionContent('left'),
+            children,
+            renderActionContent('right'))));
+});
+Swipe.defaultProps = defaultProps;
+Swipe.displayName = 'NutSwipe';
+
+export { Swipe as S };

package/dist/esm/swiper.taro-7a94e211.js

@@ -0,0 +1,451 @@
+import React__default, { useRef, useState, useMemo, useEffect } from 'react';
+import classNames from 'classnames';
+import { nextTick, useReady, createSelectorQuery } from '@tarojs/taro';
+import { D as DataContext } from './UserContext-e8176108.js';
+import { c as cn } from './bem-350c1702.js';
+
+const defaultProps = {
+    width: typeof window === 'object' ? window.innerWidth : 375,
+    height: 0,
+    duration: 500,
+    initPage: 0,
+    autoPlay: 0,
+    direction: 'horizontal',
+    paginationColor: '#fff',
+    paginationBgColor: '#ddd',
+    paginationVisible: false,
+    loop: true,
+    touchable: true,
+    isPreventDefault: true,
+    isStopPropagation: true,
+    isCenter: false,
+    className: '',
+};
+const DISTANCE = 5;
+const Swiper = React__default.forwardRef((props, ref) => {
+    const propSwiper = { ...defaultProps, ...props };
+    const { children, direction, className, pageContent, onChange, initPage, paginationColor, paginationVisible, touchable, isPreventDefault, isStopPropagation, autoPlay, isCenter, ...rest } = propSwiper;
+    const container = useRef(null);
+    const innerRef = useRef(null);
+    const _swiper = useRef({
+        moving: false,
+        autoplayTimer: null,
+        width: 0,
+        height: 0,
+        offset: 0,
+        size: 0,
+    });
+    const [refRandomId] = useState(Math.random().toString(36).slice(-8));
+    const isVertical = direction === 'vertical';
+    const [rect, setRect] = useState(null);
+    // eslint-disable-next-line prefer-const
+    let [active, setActive] = useState(0);
+    const [width, setWidth] = useState(0);
+    const [height, setHeight] = useState(0);
+    const [offset, setOffset] = useState(0);
+    const [childOffset, setChildOffset] = useState([]);
+    const [ready, setReady] = useState(false);
+    let size = isVertical ? height : width;
+    const [touch, setTouch] = useState({
+        startX: 0,
+        startY: 0,
+        deltaX: 0,
+        deltaY: 0,
+        offsetX: 0,
+        offsetY: 0,
+        stateDirection: '',
+        delta: 0,
+        touchTime: 0,
+    });
+    const { childs, childCount } = useMemo(() => {
+        let childCount = 0;
+        const childs = React__default.Children.map(props.children, (child) => {
+            if (!React__default.isValidElement(child))
+                return null;
+            childCount++;
+            return child;
+        });
+        return {
+            childs,
+            childCount,
+        };
+    }, [props.children]);
+    let trackSize = childCount * Number(size);
+    // 父组件参数传入子组件item
+    const parent = {
+        propSwiper,
+        size,
+    };
+    const minOffset = (() => {
+        if (rect) {
+            const base = isVertical ? rect?.height : rect?.width;
+            return base - Number(size) * childCount;
+        }
+        return 0;
+    })();
+    // 清除定时器
+    const stopAutoPlay = () => {
+        clearTimeout(_swiper.current.autoplayTimer);
+        _swiper.current.autoplayTimer = null;
+    };
+    // 定时轮播
+    const autoplay = () => {
+        if (propSwiper.autoPlay <= 0 || childCount <= 1)
+            return;
+        stopAutoPlay();
+        _swiper.current.autoplayTimer = setTimeout(() => {
+            next();
+            autoplay();
+        }, Number(propSwiper.autoPlay));
+    };
+    // 重置首尾位置信息
+    const resettPosition = () => {
+        _swiper.current.moving = true;
+        if (active <= -1) {
+            move({ pace: childCount });
+        }
+        if (active >= childCount) {
+            move({ pace: -childCount });
+        }
+    };
+    // 上一页
+    const prev = () => {
+        resettPosition();
+        touchReset();
+        requestFrame(() => {
+            requestFrame(() => {
+                _swiper.current.moving = false;
+                move({
+                    pace: -1,
+                    isEmit: true,
+                });
+            });
+        });
+    };
+    // 下一页
+    const next = () => {
+        resettPosition();
+        touchReset();
+        requestFrame(() => {
+            requestFrame(() => {
+                _swiper.current.moving = false;
+                move({
+                    pace: 1,
+                    isEmit: true,
+                });
+            });
+        });
+    };
+    // 前往指定页
+    const to = (index) => {
+        resettPosition();
+        touchReset();
+        requestFrame(() => {
+            requestFrame(() => {
+                _swiper.current.moving = false;
+                let targetIndex;
+                if (props.loop && childCount === index) {
+                    targetIndex = active === 0 ? 0 : index;
+                }
+                else {
+                    targetIndex = index % childCount;
+                }
+                move({
+                    pace: targetIndex - active,
+                    isEmit: true,
+                });
+            });
+        });
+    };
+    const resize = () => {
+        init(active);
+    };
+    // 切换方法
+    const move = ({ pace = 0, offset = 0, isEmit = false, movingStatus = false, }) => {
+        if (childCount <= 1)
+            return;
+        const targetActive = getActive(pace);
+        // 父级容器偏移量
+        const targetOffset = getOffset(targetActive, offset);
+        // 如果循环，调整开头结尾图片位置
+        if (props.loop) {
+            if (Array.isArray(children) &&
+                children[0] &&
+                targetOffset !== minOffset) {
+                const rightBound = targetOffset < minOffset;
+                childOffset[0] = rightBound ? trackSize : 0;
+            }
+            if (Array.isArray(children) &&
+                children[childCount - 1] &&
+                targetOffset !== 0) {
+                const leftBound = targetOffset > 0;
+                childOffset[childCount - 1] = leftBound ? -trackSize : 0;
+            }
+            setChildOffset(childOffset);
+        }
+        if (isEmit && active !== targetActive) {
+            props.onChange && props.onChange((targetActive + childCount) % childCount);
+        }
+        active = targetActive;
+        setActive(targetActive);
+        setOffset(targetOffset);
+        getStyle(targetOffset);
+    };
+    // 确定当前active 元素
+    const getActive = (pace) => {
+        if (pace) {
+            const _active = active + pace;
+            if (props.loop) {
+                return range(_active, -1, childCount);
+            }
+            return range(_active, 0, childCount - 1);
+        }
+        return active;
+    };
+    // 计算位移
+    const getOffset = (active, offset = 0) => {
+        let currentPosition = active * Number(size);
+        if (!props.loop) {
+            currentPosition = Math.min(currentPosition, -minOffset);
+        }
+        let targetOffset = offset - currentPosition;
+        if (!props.loop) {
+            targetOffset = range(targetOffset, minOffset, 0);
+        }
+        return targetOffset;
+    };
+    // 浏览器 帧 事件
+    const requestFrame = (fn) => {
+        window.requestAnimationFrame.call(window, fn);
+    };
+    // 取值 方法
+    const range = (num, min, max) => {
+        return Math.min(Math.max(num, min), max);
+    };
+    const getDirection = (x, y) => {
+        if (x > y && x > DISTANCE)
+            return 'horizontal';
+        if (y > x && y > DISTANCE)
+            return 'vertical';
+        return '';
+    };
+    // 重置 全部位移信息
+    const touchReset = () => {
+        touch.startX = 0;
+        touch.startY = 0;
+        touch.deltaX = 0;
+        touch.deltaY = 0;
+        touch.offsetX = 0;
+        touch.offsetY = 0;
+        touch.delta = 0;
+        touch.stateDirection = '';
+        touch.touchTime = 0;
+    };
+    // 触摸事件开始
+    const touchStart = (e) => {
+        touchReset();
+        touch.startX = e.touches[0].clientX;
+        touch.startY = e.touches[0].clientY;
+    };
+    // 触摸事件移动
+    const touchMove = (e) => {
+        touch.deltaX = e.touches[0].clientX - touch.startX;
+        touch.deltaY = e.touches[0].clientY - touch.startY;
+        touch.offsetX = Math.abs(touch.deltaX);
+        touch.offsetY = Math.abs(touch.deltaY);
+        touch.delta = isVertical ? touch.deltaY : touch.deltaX;
+        if (!touch.stateDirection) {
+            touch.stateDirection = getDirection(touch.offsetX, touch.offsetY);
+        }
+    };
+    const b = cn('swiper');
+    const classes = classNames(b(''));
+    const contentClass = classNames({
+        [`${b('inner')}`]: true,
+        [`${b('vertical')}`]: isVertical,
+    });
+    const getStyle = (moveOffset = offset) => {
+        const target = innerRef.current;
+        let _offset = 0;
+        if (!isCenter) {
+            _offset = moveOffset;
+        }
+        else {
+            const _size = isVertical ? height : width;
+            const val = isVertical
+                ? rect?.height - _size
+                : rect?.width - _size;
+            _offset =
+                moveOffset +
+                    (active === childCount - 1 && !props.loop ? -val / 2 : val / 2);
+        }
+        target.style.transitionDuration = `${_swiper.current.moving ? 0 : props.duration}ms`;
+        target.style[isVertical ? 'height' : 'width'] = `${Number(size) * childCount}px`;
+        target.style[isVertical ? 'width' : 'height'] = `${isVertical ? width : height}px`;
+        target.style.transform = `translate3D${!isVertical ? `(${_offset}px,0,0)` : `(0,${_offset}px,0)`}`;
+    };
+    const onTouchStart = (e) => {
+        if (props.isPreventDefault)
+            e.preventDefault();
+        if (props.isStopPropagation)
+            e.stopPropagation();
+        if (!props.touchable)
+            return;
+        touchStart(e);
+        touch.touchTime = Date.now();
+        stopAutoPlay();
+        resettPosition();
+    };
+    const onTouchMove = (e) => {
+        if (props.touchable && _swiper.current.moving) {
+            touchMove(e);
+            if (touch.stateDirection === props.direction) {
+                move({
+                    offset: touch.delta,
+                });
+            }
+        }
+    };
+    const onTouchEnd = (e) => {
+        if (!props.touchable || !_swiper.current.moving)
+            return;
+        const speed = touch.delta / (Date.now() - touch.touchTime);
+        const isShouldMove = Math.abs(speed) > 0.3 || Math.abs(touch.delta) > +(size / 2).toFixed(2);
+        let pace = 0;
+        _swiper.current.moving = false;
+        if (isShouldMove && touch.stateDirection === props.direction) {
+            const offset = isVertical ? touch.offsetY : touch.offsetX;
+            if (props.loop) {
+                if (offset > 0) {
+                    pace = touch.delta > 0 ? -1 : 1;
+                }
+                else {
+                    pace = 0;
+                }
+            }
+            else {
+                pace = -Math[touch.delta > 0 ? 'ceil' : 'floor'](touch.delta / size);
+            }
+            move({
+                pace,
+                isEmit: true,
+            });
+        }
+        else if (touch.delta) {
+            move({ pace: 0 });
+        }
+        else {
+            getStyle();
+        }
+        autoplay();
+    };
+    useEffect(() => {
+        _swiper.current.activePagination = (active + childCount) % childCount;
+    }, [active]);
+    const queryRect = (element) => {
+        return new Promise((resolve) => {
+            const query = createSelectorQuery();
+            query.select(`#${element.id}`) &&
+                query.select(`#${element.id}`).boundingClientRect();
+            query.exec((res) => {
+                resolve(res[0]);
+            });
+        });
+    };
+    const init = async (active = +propSwiper.initPage) => {
+        const rect = await queryRect(container.current);
+        const _active = Math.max(Math.min(childCount - 1, active), 0);
+        const _width = propSwiper.width ? +propSwiper.width : rect?.width;
+        const _height = propSwiper.height ? +propSwiper.height : rect?.height;
+        size = isVertical ? _height : _width;
+        trackSize = childCount * Number(size);
+        const targetOffset = getOffset(_active);
+        _swiper.current.moving = true;
+        if (ready) {
+            _swiper.current.moving = false;
+        }
+        setRect(rect);
+        setActive(_active);
+        setWidth(_width);
+        setHeight(_height);
+        setOffset(targetOffset);
+        setReady(true);
+    };
+    useEffect(() => {
+        if (ready) {
+            getStyle();
+        }
+    }, [isVertical, width, height, offset, ready]);
+    useEffect(() => {
+        if (ready) {
+            stopAutoPlay();
+            autoplay();
+        }
+        return () => {
+            setReady(false);
+        };
+    }, [ready]);
+    useEffect(() => {
+        stopAutoPlay();
+        autoplay();
+    }, [children]);
+    useEffect(() => {
+        nextTick(() => {
+            init();
+        });
+    }, [propSwiper.initPage]);
+    useEffect(() => {
+        return () => {
+            stopAutoPlay();
+        };
+    }, []);
+    useReady(() => {
+        nextTick(() => {
+            init();
+        });
+    });
+    const itemStyle = (index) => {
+        const style = {};
+        const _direction = propSwiper.direction || direction;
+        const _size = size;
+        if (_size) {
+            style[_direction === 'horizontal' ? 'width' : 'height'] = `${_size}px`;
+        }
+        const offset = childOffset[index];
+        if (offset) {
+            style.transform = `translate3D${_direction === 'horizontal' ? `(${offset}px,0,0)` : `(0,${offset}px,0)`}`;
+        }
+        return style;
+    };
+    React__default.useImperativeHandle(ref, () => ({
+        to,
+        next,
+        prev,
+        resize,
+    }));
+    return (React__default.createElement(DataContext.Provider, { value: parent },
+        React__default.createElement("div", { className: `${classes} ${className}`, ref: container, ...rest, id: `container-${refRandomId}`, onTouchStart: onTouchStart, onTouchMove: onTouchMove, onTouchEnd: onTouchEnd, 
+            // @ts-ignore
+            catchMove: isVertical },
+            React__default.createElement("div", { className: contentClass, ref: innerRef }, React__default.Children.map(childs, (child, index) => {
+                return (React__default.createElement("div", { className: b('item-wrapper'), style: itemStyle(index), key: index }, child));
+            })),
+            propSwiper.paginationVisible && !('pageContent' in propSwiper) ? (React__default.createElement("div", { className: classNames({
+                    [`${b('pagination')}`]: true,
+                    [`${b('pagination-vertical')}`]: isVertical,
+                }) }, React__default.Children.map(childs, (item, index) => {
+                return (React__default.createElement("i", { style: (active + childCount) % childCount === index
+                        ? {
+                            backgroundColor: propSwiper.paginationColor,
+                        }
+                        : {
+                            backgroundColor: propSwiper.paginationBgColor,
+                        }, className: classNames({
+                        active: (active + childCount) % childCount === index,
+                    }), key: index }));
+            }))) : (React__default.createElement("div", null, pageContent)))));
+});
+Swiper.defaultProps = defaultProps;
+Swiper.displayName = 'NutSwiper';
+
+export { Swiper as S };

package/dist/esm/swiperitem-c9e3d0d5.js

@@ -0,0 +1,29 @@
+import React__default, { useContext } from 'react';
+import classNames from 'classnames';
+import { D as DataContext } from './UserContext-e8176108.js';
+import { c as cn } from './bem-350c1702.js';
+
+const defaultProps = {
+    direction: 'horizontal',
+};
+const SwiperItem = React__default.forwardRef((props, ref) => {
+    const _props = { ...defaultProps, ...props };
+    const { className, style, children, direction, size } = _props;
+    const parent = useContext(DataContext);
+    const b = cn('swiper-item');
+    const classes = classNames(b(''), className);
+    const getStyle = () => {
+        const style = {};
+        const _direction = parent?.propSwiper.direction || direction;
+        const _size = parent?.size || size;
+        if (_size) {
+            style[_direction === 'horizontal' ? 'width' : 'height'] = `${_size}px`;
+        }
+        return style;
+    };
+    return (React__default.createElement("div", { className: classes, style: { ...style, ...getStyle() } }, children));
+});
+SwiperItem.defaultProps = defaultProps;
+SwiperItem.displayName = 'NutSwiperItem';
+
+export { SwiperItem as S };