@nutui/nutui-react-taro 1.5.1-beta.0 → 1.5.2-beta.0

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

@@ -1,177 +0,0 @@
-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

@@ -1,451 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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 };