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

package/dist/esm/noticebar.taro-49e7441f.js

@@ -1,427 +0,0 @@
-import React__default, { useRef, useState, useMemo, useEffect } from 'react';
-import classNames from 'classnames';
-import { c as cn } from './bem-350c1702.js';
-import { g as getRectByTaro } from './use-client-rect-1f8ed1fe.js';
-import { C as ComponentDefaults } from './typings-d8491423.js';
-import { Notice, Close } from '@nutui/icons-react-taro';
-
-const defaultProps = {
-    ...ComponentDefaults,
-    // 滚动方向  across 横向 vertical 纵向
-    direction: 'across',
-    list: [],
-    standTime: 1000,
-    complexAm: false,
-    height: 40,
-    text: '',
-    closeMode: false,
-    wrapable: false,
-    leftIcon: null,
-    rightIcon: null,
-    color: '',
-    background: '',
-    delay: 1,
-    scrollable: null,
-    speed: 50,
-};
-const NoticeBar = (props) => {
-    const { children, className, style, direction, list, standTime, complexAm, height, text, closeMode, wrapable, leftIcon, rightIcon, color, background, delay, scrollable, speed, close, click, onClose, onClick, onClickItem, } = {
-        ...defaultProps,
-        ...props,
-    };
-    const wrap = useRef(null);
-    const content = useRef(null);
-    const [showNoticeBar, SetShowNoticeBar] = useState(true);
-    const scrollList = useRef([]);
-    const [wrapWidth, SetWrapWidth] = useState(0);
-    const [firstRound, SetFirstRound] = useState(true);
-    const [duration, SetDuration] = useState(0);
-    const [offsetWidth, SetOffsetW] = useState(0);
-    const [animationClass, SetAnimationClass] = useState('');
-    const [animate, SetAnimate] = useState(false);
-    const [distance, SetDistance] = useState(0);
-    const [timer, SetTimer] = useState(0);
-    const [isCanScroll, SetIsCanScroll] = useState(null);
-    const isVertical = direction === 'vertical';
-    const [rect, setRect] = useState(null);
-    let active = 0;
-    const [ready, setReady] = useState(false);
-    const container = useRef(null);
-    const innerRef = useRef(null);
-    const _swiper = useRef({
-        moving: false,
-        autoplayTimer: null,
-        width: 0,
-        height: 0,
-        offset: 0,
-        size: 0,
-    });
-    const [childOffset, setChildOffset] = useState([]);
-    const [offset, setOffset] = useState(0);
-    const { childs, childCount } = useMemo(() => {
-        let childCount = 0;
-        const childs = React__default.Children.map(children, (child) => {
-            if (!React__default.isValidElement(child))
-                return null;
-            childCount++;
-            return child;
-        });
-        return {
-            childs,
-            childCount,
-        };
-    }, [children]);
-    let trackSize = childCount * Number(height);
-    const minOffset = (() => {
-        if (rect) {
-            const base = isVertical ? rect.height : rect.width;
-            return base - Number(height) * childCount;
-        }
-        return 0;
-    })();
-    useEffect(() => {
-        if (isVertical) {
-            if (children) {
-                scrollList.current = [].concat(childs);
-            }
-            else {
-                scrollList.current = [].concat(list);
-                // startRollEasy()
-                setTimeout(() => {
-                    startRollEasy();
-                }, Number(standTime));
-            }
-            setTimeout(() => {
-                complexAm && startRoll();
-            }, Number(standTime));
-        }
-        else {
-            initScrollWrap();
-        }
-        return () => {
-            // 销毁事件
-            clearInterval(timer);
-        };
-    }, []);
-    useEffect(() => {
-        initScrollWrap();
-    }, [text]);
-    useEffect(() => {
-        if (list && list.length) {
-            scrollList.current = [].concat(list);
-        }
-    }, [list]);
-    const initScrollWrap = (value) => {
-        if (showNoticeBar === false) {
-            return;
-        }
-        setTimeout(async () => {
-            if (!wrap.current || !content.current) {
-                return;
-            }
-            const warpRes = await getRectByTaro(wrap.current);
-            const contentRes = await getRectByTaro(content.current);
-            const wrapW = warpRes.width;
-            const offsetW = contentRes.width;
-            const canScroll = scrollable == null ? offsetW > wrapW : scrollable;
-            SetIsCanScroll(canScroll);
-            if (canScroll) {
-                SetWrapWidth(wrapW);
-                SetOffsetW(offsetW);
-                SetDuration(offsetW / speed);
-                SetAnimationClass('play');
-            }
-            else {
-                SetAnimationClass('');
-            }
-        }, 0);
-    };
-    const handleClick = (event) => {
-        click && click(event);
-        onClick && onClick(event);
-    };
-    const onClickIcon = (event) => {
-        event.stopPropagation();
-        SetShowNoticeBar(!closeMode);
-        close && close(event);
-        onClose && onClose(event);
-    };
-    const onAnimationEnd = () => {
-        SetFirstRound(false);
-        setTimeout(() => {
-            SetDuration((offsetWidth + wrapWidth) / speed);
-            SetAnimationClass('play-infinite');
-        }, 0);
-    };
-    /**
-     * 滚动方式一
-     */
-    const startRollEasy = () => {
-        showhorseLamp();
-        const time = height / speed / 4 < 1
-            ? Number((height / speed / 4).toFixed(1)) * 1000
-            : ~~(height / speed / 4) * 1000;
-        const timerCurr = window.setInterval(showhorseLamp, time + Number(standTime));
-        SetTimer(timerCurr);
-    };
-    const showhorseLamp = () => {
-        SetAnimate(true);
-        const time = height / speed / 4 < 1
-            ? Number((height / speed / 4).toFixed(1)) * 1000
-            : ~~(height / speed / 4) * 1000;
-        setTimeout(() => {
-            scrollList.current.push(scrollList.current[0]);
-            scrollList.current.shift();
-            SetAnimate(false);
-        }, time);
-    };
-    const startRoll = () => {
-        const timerCurr = window.setInterval(() => {
-            const chunk = 100;
-            for (let i = 0; i < chunk; i++) {
-                scroll(i, !(i < chunk - 1));
-            }
-        }, Number(standTime) + 100 * speed);
-        SetTimer(timerCurr);
-    };
-    const scroll = (n, last) => {
-        SetAnimate(true);
-        setTimeout(() => {
-            let long = distance;
-            long -= height / 100;
-            SetDistance(long);
-            if (last) {
-                scrollList.current.push(scrollList.current[0]);
-                scrollList.current.shift();
-                SetDistance(0);
-                SetAnimate(false);
-            }
-        }, n * speed);
-    };
-    /**
-     * 点击滚动单元
-     */
-    const handleClickIcon = (event) => {
-        event.stopPropagation();
-        SetShowNoticeBar(!closeMode);
-        close && close(event);
-        onClose && onClose(event);
-    };
-    const isEllipsis = () => {
-        if (isCanScroll == null) {
-            return wrapable;
-        }
-        return !isCanScroll && !wrapable;
-    };
-    const contentStyle = {
-        animationDelay: `${firstRound ? delay : 0}s`,
-        animationDuration: `${duration}s`,
-        transform: `translateX(${firstRound ? 0 : `${wrapWidth}px`})`,
-    };
-    const barStyle = {
-        color,
-        background,
-        height: isVertical ? `${height}px` : '',
-    };
-    const duringTime = height / speed / 4 < 1
-        ? Number((height / speed / 4).toFixed(1))
-        : ~~(height / speed / 4);
-    const noDuring = height / speed < 1 ? (height / speed).toFixed(1) : ~~(height / speed);
-    const horseLampStyle = {
-        transform: complexAm ? `translateY(${distance}px)` : '',
-        transition: animate
-            ? `all ${duringTime === 0 ? noDuring : duringTime}s`
-            : '',
-        marginTop: animate ? `-${height}px` : '',
-    };
-    const b = cn('noticebar');
-    const noticebarClass = classNames({
-        'nut-noticebar-page': true,
-        withicon: closeMode,
-        close: closeMode,
-        wrapable,
-    });
-    /**
-     * 垂直自定义滚动方式
-     */
-    const init = (active = +0) => {
-        if (!container?.current)
-            return;
-        setTimeout(async () => {
-            const rects = await getRectByTaro(container?.current);
-            const _active = Math.max(Math.min(childCount - 1, active), 0);
-            const _height = rects.height;
-            trackSize = childCount * Number(_height);
-            const targetOffset = getOffset(_active);
-            _swiper.current.moving = true;
-            if (ready) {
-                _swiper.current.moving = false;
-            }
-            active = _active;
-            setRect(rects);
-            setOffset(targetOffset);
-            setReady(true);
-        }, 0);
-    };
-    useEffect(() => {
-        if (ready) {
-            stopAutoPlay();
-            autoplay();
-        }
-        return () => {
-            setReady(false);
-        };
-    }, [ready]);
-    useEffect(() => {
-        if (isVertical && children) {
-            setTimeout(() => {
-                init();
-                stopAutoPlay();
-                autoplay();
-            }, 300);
-        }
-    }, [children, container?.current]);
-    // 清除定时器
-    const stopAutoPlay = () => {
-        clearTimeout(_swiper.current.autoplayTimer);
-        _swiper.current.autoplayTimer = null;
-    };
-    // 定时轮播
-    const autoplay = () => {
-        if (childCount <= 1)
-            return;
-        stopAutoPlay();
-        _swiper.current.autoplayTimer = setTimeout(() => {
-            next();
-            autoplay();
-        }, Number(standTime) + 100 * speed);
-    };
-    // 切换方法
-    const move = ({ pace = 0, offset = 0 }) => {
-        if (childCount <= 1)
-            return;
-        const targetActive = getActive(pace);
-        // 父级容器偏移量
-        const targetOffset = getOffset(targetActive, offset);
-        // 如果循环，调整开头结尾图片位置
-        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);
-        active = targetActive;
-        setOffset(targetOffset);
-        getStyle(targetOffset);
-    };
-    // 下一页
-    const next = () => {
-        resettPosition();
-        requestFrame(() => {
-            requestFrame(() => {
-                _swiper.current.moving = false;
-                move({
-                    pace: 1,
-                });
-            });
-        });
-    };
-    const handleItemClick = (event, value) => {
-        onClickItem && onClickItem(event, value);
-    };
-    const getStyle = (moveOffset = offset) => {
-        const target = innerRef.current;
-        let _offset = 0;
-        // 容器高度-元素高度
-        const val = rect.height - height;
-        _offset = moveOffset + Number(active === childCount - 1 && val / 2);
-        target.style.transitionDuration = `${_swiper.current.moving ? 0 : standTime}ms`;
-        target.style.height = `${Number(height) * childCount}px`;
-        target.style.transform = `translate3D(0,${_offset}px,0)`;
-    };
-    // 无缝滚动第一个元素位移控制
-    const itemStyle = (index) => {
-        const style = {};
-        if (height) {
-            style.height = `${height}px`;
-            style.lineHeight = `${height}px`;
-        }
-        const offset = childOffset[index];
-        if (offset) {
-            style.transform = `translate3D(0,${offset}px,0)`;
-        }
-        return style;
-    };
-    // 确定当前active 元素
-    const getActive = (pace) => {
-        if (pace) {
-            const _active = active + pace;
-            return range(_active, -1, childCount);
-        }
-        return active;
-    };
-    // 计算位移
-    const getOffset = (active, offset = 0) => {
-        const currentPosition = active * Number(height);
-        const targetOffset = offset - currentPosition;
-        return targetOffset;
-    };
-    // 浏览器 帧 事件
-    const requestFrame = (fn) => {
-        window.requestAnimationFrame.call(window, fn);
-    };
-    // 取值 方法
-    const range = (num, min, max) => {
-        return Math.min(Math.max(num, min), max);
-    };
-    // 重置首尾位置信息
-    const resettPosition = () => {
-        _swiper.current.moving = true;
-        if (active <= -1) {
-            move({ pace: childCount });
-        }
-        if (active >= childCount) {
-            move({ pace: -childCount });
-        }
-    };
-    useEffect(() => {
-        return () => {
-            stopAutoPlay();
-        };
-    }, []);
-    return (React__default.createElement("div", { className: `${b()} ${className || ''}`, style: style },
-        showNoticeBar && direction === 'across' ? (React__default.createElement("div", { className: noticebarClass, style: barStyle, onClick: handleClick },
-            React__default.createElement("div", { className: "left-icon" }, leftIcon || React__default.createElement(Notice, { size: 16, color: color })),
-            React__default.createElement("div", { ref: wrap, className: "wrap" },
-                React__default.createElement("div", { ref: content, className: `content ${animationClass} ${isEllipsis() ? 'nut-ellipsis' : ''}`, style: contentStyle, onAnimationEnd: onAnimationEnd },
-                    children,
-                    text)),
-            closeMode || rightIcon ? (React__default.createElement("div", { className: "right-icon", onClick: onClickIcon }, rightIcon || React__default.createElement(Close, { size: 12, color: color }))) : null)) : null,
-        showNoticeBar && scrollList.current.length > 0 && isVertical ? (React__default.createElement("div", { className: "nut-noticebar-vertical", style: barStyle, ref: container, onClick: handleClick },
-            leftIcon ? React__default.createElement("div", { className: "left-icon" }, leftIcon) : null,
-            children ? (React__default.createElement(React__default.Fragment, null,
-                React__default.createElement("div", { className: "nut-noticebar__inner", ref: innerRef }, scrollList.current.map((item, index) => {
-                    return (React__default.createElement("div", { className: "scroll-inner ", style: itemStyle(index), key: index, onClick: (e) => {
-                            handleItemClick(e, item);
-                        } }, item));
-                })))) : (React__default.createElement("div", { className: "horseLamp_list", style: horseLampStyle }, scrollList.current.map((item, index) => {
-                return (
-                // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-                React__default.createElement("div", { className: "horseLamp_list_item", style: { height }, key: index, onClick: (e) => {
-                        handleItemClick(e, item);
-                    } }, item));
-            }))),
-            React__default.createElement("div", { className: "go", onClick: (e) => {
-                    handleClickIcon(e);
-                } }, rightIcon ||
-                (closeMode ? React__default.createElement(Close, { size: 12, color: color }) : null)))) : null));
-};
-NoticeBar.defaultProps = defaultProps;
-NoticeBar.displayName = 'NutNoticeBar';
-
-export { NoticeBar as N };

package/dist/esm/notify.taro-e17c6f82.js

@@ -1,75 +0,0 @@
-import React__default, { useState, useEffect } from 'react';
-import classNames from 'classnames';
-import { CSSTransition } from 'react-transition-group';
-import { c as cn } from './bem-350c1702.js';
-
-const defaultProps = {
-    id: '',
-    msg: '',
-    color: '',
-    duration: 3000,
-    type: 'danger',
-    className: '',
-    background: '',
-    position: 'top',
-    isWrapTeleport: true,
-    visible: false,
-    onClosed: () => { },
-    onClick: () => { },
-};
-const Notify = (props) => {
-    const { id, children, style, msg, color, background, type, className, position, isWrapTeleport, visible, duration, onClosed, onClick, ...rest } = { ...defaultProps, ...props };
-    let timer;
-    const [showNotify, SetShow] = useState(false);
-    useEffect(() => {
-        if (visible) {
-            SetShow(true);
-            show();
-        }
-        else {
-            hide();
-        }
-    }, [visible]);
-    const clickHandle = () => {
-        onClick();
-    };
-    const show = () => {
-        clearTimer();
-        if (duration) {
-            timer = window.setTimeout(() => {
-                hide();
-            }, duration);
-        }
-    };
-    const clearTimer = () => {
-        if (timer) {
-            clearTimeout(timer);
-            timer = null;
-        }
-    };
-    const hide = () => {
-        SetShow(false);
-        if (id) {
-            const element = document.getElementById(id);
-            element && element.parentNode && element.parentNode.removeChild(element);
-        }
-        onClosed();
-    };
-    cn('notify');
-    const classes = classNames({
-        'nut-notify--popup-top': position === 'top',
-        'nut-notify--popup-bottom': position === 'bottom',
-        'nut-notify': true,
-        [`nut-notify--${type}`]: true,
-    });
-    return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(CSSTransition, { in: showNotify, timeout: 300, classNames: "fade", unmountOnExit: true, appear: true, position: position, id: id },
-            React__default.createElement("div", { className: `${classes} ${className}`, style: {
-                    color: `${color || ''}`,
-                    background: `${background || ''}`,
-                }, onClick: clickHandle }, children || msg))));
-};
-Notify.defaultProps = defaultProps;
-Notify.displayName = 'NutNotify';
-
-export { Notify as N };

package/dist/esm/numberkeyboard.taro-ed9b2149.js

@@ -1,159 +0,0 @@
-import React__default, { useState, useEffect } from 'react';
-import classNames from 'classnames';
-import { c as cn } from './bem-350c1702.js';
-import { P as Popup } from './popup.taro-020bf791.js';
-import { u as useConfig } from './configprovider.taro-c8c54556.js';
-
-const defaultProps = {
-    confirmText: '',
-    title: '',
-    visible: false,
-    overlay: false,
-    type: 'default',
-    customKey: [],
-    className: '',
-    randomKeys: false,
-    popClass: '',
-    onClose: () => { },
-};
-const NumberKeyboard = (props) => {
-    const { locale } = useConfig();
-    const { title, confirmText, visible, overlay, type, customKey, randomKeys, popClass, style, className, onChange, onDelete, onClose, } = props;
-    const b = cn('numberkeyboard');
-    const [show, setShow] = useState(visible);
-    const [clickKeyIndex, setClickKeyIndex] = useState(undefined);
-    const [keysList, setKeysList] = useState([]);
-    useEffect(() => {
-        setShow(visible);
-    }, [visible]);
-    const defaultKey = () => {
-        let leftBottomKey = {
-            id: 'lock',
-            type: 'lock',
-        };
-        if (customKey) {
-            const customKeys = Array.isArray(customKey)
-                ? customKey
-                : [customKey];
-            if (customKeys.length > 0) {
-                const newCustomKey = customKeys[0];
-                leftBottomKey = {
-                    id: newCustomKey,
-                    type: 'custom',
-                };
-            }
-        }
-        return [
-            ...getBasicKeys(),
-            leftBottomKey,
-            { id: 0, type: 'number' },
-            { id: 'delete', type: 'delete' },
-        ];
-    };
-    const getBasicKeys = () => {
-        const keys = [];
-        for (let i = 1; i <= 9; i++) {
-            keys.push({ id: i, type: 'number' });
-        }
-        if (randomKeys) {
-            return keys.sort(() => (Math.random() > 0.5 ? 1 : -1));
-        }
-        return keys;
-    };
-    const genCustomKeys = () => {
-        const keys = getBasicKeys();
-        if (!customKey)
-            return [];
-        let customKeys = Array.isArray(customKey) ? customKey : [customKey];
-        if (customKeys.length > 2) {
-            customKeys = [customKeys[0], customKeys[1]];
-        }
-        if (customKeys.length === 2 &&
-            props.title &&
-            props.type !== 'rightColumn') {
-            customKeys = [customKeys[0]];
-        }
-        if (customKeys.length === 1) {
-            if (props.title && props.type !== 'rightColumn') {
-                keys.push({ id: customKeys[0], type: 'custom' }, { id: 0, type: 'number' }, { id: 'delete', type: 'delete' });
-            }
-            else {
-                keys.push({ id: 0, type: 'number' }, { id: customKeys[0], type: 'custom' });
-            }
-        }
-        else if (customKeys.length === 2) {
-            keys.push({ id: customKeys[0], type: 'custom' }, { id: 0, type: 'number' }, { id: customKeys[1], type: 'custom' });
-        }
-        return keys;
-    };
-    useEffect(() => {
-        if (props.type === 'rightColumn' || props.title !== '') {
-            setKeysList(genCustomKeys());
-        }
-        else {
-            setKeysList(defaultKey());
-        }
-    }, []);
-    const onTouchstart = (item, event) => {
-        event.stopPropagation();
-        setClickKeyIndex(item.id);
-        if (item.type === 'number' || item.type === 'custom') {
-            onChange && onChange(item.id);
-        }
-        if (item.type === 'lock') {
-            onClose && onClose();
-        }
-        if (item.type === 'delete') {
-            onDelete && onDelete();
-        }
-    };
-    const onTouchMove = (event) => {
-        event.stopPropagation();
-    };
-    const onTouchEnd = (event) => {
-        event.preventDefault();
-        setClickKeyIndex(undefined);
-    };
-    return (React__default.createElement("div", null,
-        React__default.createElement(Popup, { visible: show, overlay: overlay, position: "bottom", className: popClass, onClickOverlay: onClose, onClickCloseIcon: onClose, overlayStyle: { backgroundColor: 'rgba(0, 0, 0, 0)' } },
-            React__default.createElement("div", { className: `${b()} ${className}`, style: { ...style } },
-                title ? (React__default.createElement("div", { className: b('header') },
-                    React__default.createElement("h3", { className: b('header__tit') }, title),
-                    type === 'default' ? (React__default.createElement("span", { className: b('header__close'), onClick: onClose }, locale.done)) : null)) : null,
-                React__default.createElement("div", { className: b('body') },
-                    React__default.createElement("div", { className: b('body__keys') }, keysList?.map((item, index) => {
-                        return (React__default.createElement("div", { key: index, className: classNames({
-                                'key-board-wrapper': true,
-                                'key-board-wrapper-large': item.id === 0 &&
-                                    type === 'rightColumn' &&
-                                    Array.isArray(customKey) &&
-                                    customKey.length === 1,
-                            }) },
-                            React__default.createElement("div", { className: classNames({
-                                    key: true,
-                                    active: item.id === clickKeyIndex,
-                                    lock: item.type === 'lock',
-                                    delete: item.type === 'delete',
-                                }), onTouchStart: (event) => onTouchstart(item, event), onTouchMove: onTouchMove, onTouchEnd: onTouchEnd },
-                                item.type === 'number' || item.type === 'custom' ? (React__default.createElement("div", null, item.id)) : null,
-                                item.type === 'lock' ? (React__default.createElement("img", { src: "https://img11.360buyimg.com/imagetools/jfs/t1/146371/38/8485/738/5f606425Eca239740/14f4b4f5f20d8a68.png", alt: "" })) : null,
-                                item.type === 'delete' ? (React__default.createElement("img", { src: "https://img11.360buyimg.com/imagetools/jfs/t1/129395/8/12735/2030/5f61ac37E70cab338/fb477dc11f46056c.png", alt: "" })) : null)));
-                    })),
-                    type === 'rightColumn' ? (React__default.createElement("div", { className: b('sidebar') },
-                        React__default.createElement("div", { className: "key-board-wrapper" },
-                            React__default.createElement("div", { className: classNames({
-                                    key: true,
-                                    active: clickKeyIndex === 'delete',
-                                }), onTouchStart: (event) => onTouchstart({ id: 'delete', type: 'delete' }, event), onTouchMove: onTouchMove, onTouchEnd: onTouchEnd },
-                                React__default.createElement("img", { src: "https://img11.360buyimg.com/imagetools/jfs/t1/129395/8/12735/2030/5f61ac37E70cab338/fb477dc11f46056c.png", alt: "" }))),
-                        React__default.createElement("div", { className: "key-board-wrapper key-board-finish", onClick: onClose },
-                            React__default.createElement("div", { className: classNames({
-                                    key: true,
-                                    finish: true,
-                                    activeFinsh: clickKeyIndex === 'finish',
-                                }) }, confirmText || locale.done)))) : null)))));
-};
-NumberKeyboard.defaultProps = defaultProps;
-NumberKeyboard.displayName = 'NutNumberKeyboard';
-
-export { NumberKeyboard as N };

package/dist/esm/offsetContext-c2a746fa.js

@@ -1,5 +0,0 @@
-import { createContext } from 'react';
-
-const OffsetContext = createContext(20);
-
-export { OffsetContext as O };