@nutui/nutui-react-taro 2.0.0-alpha.5 → 2.0.0-alpha.7

package/dist/esm/menuitem.taro-37c18382.js

@@ -1,129 +0,0 @@
-import React, { forwardRef, useState, useEffect, useImperativeHandle } from 'react';
-import classNames from 'classnames';
-import { getSystemInfoSync } from '@tarojs/taro';
-import { CSSTransition } from 'react-transition-group';
-import { Check } from '@nutui/icons-react-taro';
-import { O as Overlay } from './overlay.taro-067b7202.js';
-import { g as getRectByTaro } from './use-client-rect-1f8ed1fe.js';
-import { C as ComponentDefaults } from './typings-d8491423.js';
-
-const defaultProps = {
-    ...ComponentDefaults,
-    columns: 1,
-    direction: 'down',
-    icon: null,
-    closeOnClickAway: false,
-    activeTitleClass: '',
-    inactiveTitleClass: '',
-    onChange: (value) => undefined,
-};
-const MenuItem = forwardRef((props, ref) => {
-    const { className, style, options, value, columns, title, icon, direction, onChange, activeTitleClass, inactiveTitleClass, closeOnClickAway, children, activeColor, show, parent, index, } = {
-        ...defaultProps,
-        ...props,
-    };
-    const [_showPopup, setShowPopup] = useState(show);
-    const [_value, setValue] = useState(value);
-    useEffect(() => {
-        setShowPopup(show);
-    }, [show]);
-    useEffect(() => {
-        getParentOffset();
-    }, [_showPopup]);
-    useImperativeHandle(ref, () => ({
-        toggle: parent.toggleMenuItem,
-    }));
-    const getIconCName = (optionVal, value) => {
-        return classNames({
-            [activeTitleClass]: optionVal === value,
-            [inactiveTitleClass]: optionVal !== value,
-        });
-    };
-    const setTitle = (text) => {
-        if (!title) {
-            parent.updateTitle(text, index);
-        }
-    };
-    const handleClick = (item) => {
-        parent.toggleMenuItem(index);
-        setTitle(item.text);
-        setValue(item.value);
-        onChange && onChange(item);
-    };
-    const [position, setPosition] = useState({
-        top: 0,
-        height: 0,
-    });
-    const getParentOffset = () => {
-        setTimeout(async () => {
-            const p = parent.menuRef.current;
-            const rect = await getRectByTaro(p);
-            setPosition({
-                height: rect.height,
-                top: rect.top,
-            });
-        }, 100);
-    };
-    const isShow = () => {
-        if (_showPopup)
-            return {};
-        return { display: 'none' };
-    };
-    const getPosition = () => {
-        return direction === 'down'
-            ? { top: `${position.top + position.height}px` }
-            : {
-                bottom: `${getSystemInfoSync().windowHeight - position.top}px`,
-                top: 'auto',
-            };
-    };
-    const placeholderStyle = () => {
-        if (direction === 'down') {
-            return {
-                height: `${position.top + position.height}px`,
-                top: 0,
-                ...isShow(),
-            };
-        }
-        return {
-            height: `${getSystemInfoSync().windowHeight - position.top}px`,
-            bottom: `0px`,
-            top: 'auto',
-            ...isShow(),
-        };
-    };
-    return (React.createElement(React.Fragment, null,
-        closeOnClickAway ? (React.createElement("div", { className: `placeholder-element ${classNames({
-                up: direction === 'up',
-            })}`, style: placeholderStyle(), onClick: () => parent.toggleMenuItem(index) })) : null,
-        React.createElement(Overlay, { className: "nut-menu__overlay", style: getPosition(), lockScroll: parent.lockScroll, visible: _showPopup, closeOnOverlayClick: parent.closeOnOverlayClick, onClick: () => {
-                parent.closeOnOverlayClick && parent.toggleMenuItem(index);
-            } }),
-        React.createElement("div", { className: classNames(className, {
-                'nut-menu-item__wrap': direction === 'down',
-                'nut-menu-item__wrap-up': direction !== 'down',
-            }), style: {
-                ...style,
-                ...isShow(),
-            } },
-            React.createElement(CSSTransition, { in: _showPopup, timeout: 100, classNames: direction === 'down' ? 'menu-item' : 'menu-item-up' },
-                React.createElement("div", { className: "nut-menu-item__content" },
-                    options?.map((item, index) => {
-                        return (React.createElement("div", { className: `nut-menu-item__option ${classNames({
-                                active: item.value === _value,
-                            })}`, key: item.text, style: {
-                                flexBasis: `${100 / columns}%`,
-                            }, onClick: () => {
-                                handleClick(item);
-                            } },
-                            item.value === _value ? (React.createElement(React.Fragment, null, icon || (React.createElement(Check, { color: activeColor, size: 10, className: getIconCName(item.value, value) })))) : null,
-                            React.createElement("div", { className: getIconCName(item.value, value), style: {
-                                    color: `${item.value === _value ? activeColor : ''}`,
-                                } }, item.text)));
-                    }),
-                    children)))));
-});
-MenuItem.defaultProps = defaultProps;
-MenuItem.displayName = 'NutMenuItem';
-
-export { MenuItem as M };

package/dist/esm/navbar.taro-92bab9c4.js

@@ -1,57 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-import { C as ComponentDefaults } from './typings-d8491423.js';
-
-const defaultProps = {
-    ...ComponentDefaults,
-    left: '',
-    right: '',
-    back: '',
-    fixed: false,
-    safeAreaInsetTop: false,
-    placeholder: false,
-    zIndex: 10,
-};
-const NavBar = (props) => {
-    const { right, left, className, style, back, fixed, safeAreaInsetTop, placeholder, zIndex, onClickBack, } = {
-        ...defaultProps,
-        ...props,
-    };
-    const classPrefix = 'nut-navbar';
-    const children = Array.isArray(props.children)
-        ? props.children
-        : [props.children];
-    const styles = () => {
-        return {
-            ...style,
-            zIndex,
-        };
-    };
-    const renderLeft = () => {
-        return (React.createElement("div", { className: `${classPrefix}__left` },
-            back && (React.createElement("div", { className: `${classPrefix}__left__back`, onClick: (e) => onClickBack(e) }, back)),
-            left));
-    };
-    const renderContent = () => {
-        return React.createElement("div", { className: `${classPrefix}__title` }, children);
-    };
-    const renderRight = () => {
-        return React.createElement("div", { className: `${classPrefix}__right` }, right);
-    };
-    const renderWrapper = () => {
-        return (React.createElement("div", { className: cls, style: styles() },
-            renderLeft(),
-            renderContent(),
-            renderRight()));
-    };
-    const classes = classNames({
-        [`${classPrefix}--fixed`]: fixed,
-        [`${classPrefix}--safe-area-inset-top`]: safeAreaInsetTop,
-    });
-    const cls = classNames(classPrefix, classes, className);
-    return (React.createElement(React.Fragment, null, fixed && placeholder ? (React.createElement("div", { className: `${classPrefix}--placeholder` }, renderWrapper())) : (renderWrapper())));
-};
-NavBar.defaultProps = defaultProps;
-NavBar.displayName = 'NutNavBar';
-
-export { NavBar as N };

package/dist/esm/noticebar.taro-cbe93c9e.js

@@ -1,427 +0,0 @@
-import React, { 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.Children.map(children, (child) => {
-            if (!React.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.createElement("div", { className: `${b()} ${className || ''}`, style: style },
-        showNoticeBar && direction === 'across' ? (React.createElement("div", { className: noticebarClass, style: barStyle, onClick: handleClick },
-            React.createElement("div", { className: "left-icon" }, leftIcon || React.createElement(Notice, { size: 16, color: color })),
-            React.createElement("div", { ref: wrap, className: "wrap" },
-                React.createElement("div", { ref: content, className: `content ${animationClass} ${isEllipsis() ? 'nut-ellipsis' : ''}`, style: contentStyle, onAnimationEnd: onAnimationEnd },
-                    children,
-                    text)),
-            closeMode || rightIcon ? (React.createElement("div", { className: "right-icon", onClick: onClickIcon }, rightIcon || React.createElement(Close, { size: 12, color: color }))) : null)) : null,
-        showNoticeBar && scrollList.current.length > 0 && isVertical ? (React.createElement("div", { className: "nut-noticebar-vertical", style: barStyle, ref: container, onClick: handleClick },
-            leftIcon ? React.createElement("div", { className: "left-icon" }, leftIcon) : null,
-            children ? (React.createElement(React.Fragment, null,
-                React.createElement("div", { className: "nut-noticebar__inner", ref: innerRef }, scrollList.current.map((item, index) => {
-                    return (React.createElement("div", { className: "scroll-inner ", style: itemStyle(index), key: index, onClick: (e) => {
-                            handleItemClick(e, item);
-                        } }, item));
-                })))) : (React.createElement("div", { className: "horseLamp_list", style: horseLampStyle }, scrollList.current.map((item, index) => {
-                return (
-                // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-                React.createElement("div", { className: "horseLamp_list_item", style: { height }, key: index, onClick: (e) => {
-                        handleItemClick(e, item);
-                    } }, item));
-            }))),
-            React.createElement("div", { className: "go", onClick: (e) => {
-                    handleClickIcon(e);
-                } }, rightIcon ||
-                (closeMode ? React.createElement(Close, { size: 12, color: color }) : null)))) : null));
-};
-NoticeBar.defaultProps = defaultProps;
-NoticeBar.displayName = 'NutNoticeBar';
-
-export { NoticeBar as N };

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

@@ -1,75 +0,0 @@
-import React, { 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.createElement(React.Fragment, null,
-        React.createElement(CSSTransition, { in: showNotify, timeout: 300, classNames: "fade", unmountOnExit: true, appear: true, position: position, id: id },
-            React.createElement("div", { className: `${classes} ${className}`, style: {
-                    color: `${color || ''}`,
-                    background: `${background || ''}`,
-                }, onClick: clickHandle }, children || msg))));
-};
-Notify.defaultProps = defaultProps;
-Notify.displayName = 'NutNotify';
-
-export { Notify as N };