@nutui/nutui-react-taro 2.0.0-alpha.1 → 2.0.0-alpha.11

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 };

package/dist/esm/switch.taro-34ca8228.js

@@ -1,50 +0,0 @@
-import React__default, { useState, useEffect } from 'react';
-import { c as cn } from './bem-350c1702.js';
-
-const defaultProps = {
-    isAsync: false,
-    checked: false,
-    disable: false,
-    activeColor: '',
-    inactiveColor: '',
-    activeText: '',
-    inactiveText: '',
-    className: '',
-};
-const Switch = (props) => {
-    const { isAsync, checked, disable, activeColor, inactiveColor, activeText, inactiveText, onChange, className, style, } = {
-        ...defaultProps,
-        ...props,
-    };
-    const [value, setValue] = useState(false);
-    const b = cn('switch');
-    useEffect(() => {
-        setValue(checked);
-    }, [checked]);
-    const classes = () => {
-        return `${b()} ${value ? 'switch-open' : 'switch-close'} ${disable ? `${b()}-disable` : ''} ${`${b()}-base`} ${className}`;
-    };
-    const styles = () => {
-        const myStyle = {
-            backgroundColor: value ? activeColor : inactiveColor,
-            ...(style || {}),
-        };
-        return myStyle;
-    };
-    const onClick = (event) => {
-        if (disable)
-            return;
-        if (!isAsync) {
-            setValue(!value);
-        }
-        onChange && onChange(!value, event);
-    };
-    return (React__default.createElement("div", { className: classes(), onClick: (e) => onClick(e), style: styles() },
-        React__default.createElement("div", { className: "switch-button" },
-            !value && React__default.createElement("div", { className: "close-line" }),
-            activeText && (React__default.createElement(React__default.Fragment, null, value ? (React__default.createElement("div", { className: `${b('label')} open` }, activeText)) : (React__default.createElement("div", { className: `${b('label')} close` }, inactiveText)))))));
-};
-Switch.defaultProps = defaultProps;
-Switch.displayName = 'NutSwitch';
-
-export { Switch as S };

package/dist/esm/tabbar.taro-9acfc2fa.js

@@ -1,59 +0,0 @@
-import React__default, { useState, useEffect } from 'react';
-import { c as cn } from './bem-350c1702.js';
-
-const defaultProps = {
-    visible: 0,
-    bottom: false,
-    size: 20,
-    unactiveColor: '',
-    activeColor: '',
-    safeAreaInsetBottom: false,
-    className: '',
-    style: {},
-    onSwitch: (child, activeVisible) => { },
-};
-const Tabbar = (props) => {
-    const { children, visible, activeVisible, bottom, size, activeColor, unactiveColor, safeAreaInsetBottom, className, style, onSwitch, } = {
-        ...defaultProps,
-        ...props,
-    };
-    const b = cn('tabbar');
-    const [selectIndex, setSelectIndex] = useState(activeVisible || visible);
-    const handleClick = (idx) => {
-        if (!('activeVisible' in props)) {
-            setSelectIndex(idx);
-        }
-    };
-    useEffect(() => {
-        if (activeVisible !== undefined) {
-            setSelectIndex(activeVisible);
-        }
-    }, [activeVisible]);
-    return (React__default.createElement("div", { className: [
-            `${b()}`,
-            bottom ? `${b('bottom')}` : '',
-            safeAreaInsetBottom ? `${b('bottom')} ${b('safebottom')}` : '',
-            className,
-        ].join(' '), style: style }, React__default.Children.map(children, (child, idx) => {
-        if (!React__default.isValidElement(child)) {
-            return null;
-        }
-        const childProps = {
-            ...child.props,
-            active: idx === selectIndex,
-            index: idx,
-            unactiveColor,
-            activeColor,
-            size,
-            handleClick: () => {
-                handleClick(idx);
-                onSwitch(child, idx);
-            },
-        };
-        return React__default.cloneElement(child, childProps);
-    })));
-};
-Tabbar.defaultProps = defaultProps;
-Tabbar.displayName = 'NutTabbar';
-
-export { Tabbar as T };

package/dist/esm/tabbaritem.taro-42ba353f.js

@@ -1,55 +0,0 @@
-import React__default, { useEffect } from 'react';
-import Taro from '@tarojs/taro';
-import { c as cn } from './bem-350c1702.js';
-import { C as ComponentDefaults } from './typings-d8491423.js';
-
-const defaultProps = {
-    ...ComponentDefaults,
-    dot: false,
-    className: '',
-    tabTitle: '',
-    icon: null,
-    href: '',
-    to: '',
-    num: '',
-    active: false,
-    activeColor: '',
-    unactiveColor: '',
-    index: 0,
-    handleClick: (idx) => { },
-};
-const TabbarItem = (props) => {
-    const { dot, className, style, tabTitle, icon, href, to, num, active, activeColor, unactiveColor, index, handleClick, } = {
-        ...defaultProps,
-        ...props,
-    };
-    const b = cn('tabbar-item');
-    const bIcon = cn('tabbar-item__icon-box');
-    useEffect(() => {
-        if (active && href) {
-            window.location.href = href;
-            return;
-        }
-        if (active && to) {
-            Taro.navigateTo({
-                url: to,
-            });
-        }
-    }, [active, href, to]);
-    return (React__default.createElement("div", { className: `${b({ active })} ${className}`, style: {
-            ...style,
-            color: active ? activeColor : unactiveColor,
-        }, onClick: () => {
-            handleClick(index);
-        } },
-        React__default.createElement("div", { className: `${bIcon()}` },
-            !dot ? (React__default.createElement(React__default.Fragment, null,
-                num && num <= 99 && (React__default.createElement("div", { className: `${bIcon('tips', [bIcon('num')])}` }, num)),
-                num && num >= 100 && (React__default.createElement("div", { className: `${bIcon('tips', [bIcon('nums')])}` }, "99+")))) : (React__default.createElement("div", { className: `${bIcon('tips', [bIcon('dot')])}` })),
-            icon || null),
-        tabTitle && (React__default.createElement("div", { className: bIcon({ 'nav-word': true }, [
-                bIcon({ 'big-word': !icon }),
-            ]) }, tabTitle))));
-};
-
-export { TabbarItem as T };