@nutui/nutui-react-taro 1.4.4 → 1.4.5-beta.0

package/dist/esm/noticebar.taro-69ea7673.js

@@ -0,0 +1,450 @@
+import React__default, { useRef, useState, useMemo, useEffect } from 'react';
+import classNames from 'classnames';
+import { I as Icon } from './icon.taro-1d0d4fb7.js';
+import { c as cn } from './bem-893ad28d.js';
+import { g as getRectByTaro } from './useClientRect-bf69d7b3.js';
+import { C as ComponentDefaults } from './typings-1c5f2628.js';
+
+const defaultProps = {
+    ...ComponentDefaults,
+    // 滚动方向  across 横向 vertical 纵向
+    direction: 'across',
+    list: [],
+    standTime: 1000,
+    complexAm: false,
+    height: 40,
+    text: '',
+    closeMode: false,
+    wrapable: false,
+    leftIcon: '',
+    color: '',
+    background: '',
+    delay: 1,
+    scrollable: null,
+    speed: 50,
+};
+const NoticeBar = (props) => {
+    const { children, className, style, direction, list, standTime, complexAm, height, text, closeMode, wrapable, leftIcon, color, background, delay, scrollable, speed, rightIcon, close, click, onClose, onClick, onClickItem, iconClassPrefix, iconFontClassName, } = {
+        ...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 [vLeftIcon, setLeftIcon] = useState('');
+    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) {
+            // 兼容老版本无左侧Icon问题
+            if (leftIcon !== '') {
+                setLeftIcon(leftIcon);
+            }
+            else {
+                setLeftIcon('close');
+            }
+            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);
+            startRoll();
+            startRollEasy();
+        };
+    }, []);
+    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 iconShow = () => {
+        if (leftIcon === 'close' || vLeftIcon === 'close') {
+            return false;
+        }
+        return true;
+    };
+    const iconBg = () => {
+        let iconBg = '';
+        if (leftIcon) {
+            iconBg = leftIcon;
+        }
+        return iconBg;
+    };
+    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 },
+            iconShow() ? (React__default.createElement("div", { className: "left-icon", style: { backgroundImage: `url(${iconBg() || ''})` } }, !iconBg() ? (React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, name: "notice", size: "16", color: color })) : null)) : null,
+            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 },
+                React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, name: rightIcon || 'close', color: color }))) : null)) : null,
+        showNoticeBar && scrollList.current.length > 0 && isVertical ? (React__default.createElement("div", { className: "nut-noticebar-vertical", style: barStyle, ref: container, onClick: handleClick },
+            iconShow() ? (React__default.createElement("div", { className: "left-icon", style: { backgroundImage: `url(${iconBg() || ''})` } }, !iconBg() ? (React__default.createElement(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, name: "notice", size: "16", color: color })) : null)) : 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(Icon, { classPrefix: iconClassPrefix, fontClassName: iconFontClassName, name: rightIcon || 'close', color: color, size: "11px" })) : null)))) : null));
+};
+NoticeBar.defaultProps = defaultProps;
+NoticeBar.displayName = 'NutNoticeBar';
+
+export { NoticeBar as N };

package/dist/esm/notify.taro-308e5892.js

@@ -1,106 +1,75 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["id", "children", "style", "msg", "color", "background", "type", "className", "position", "isWrapTeleport", "visible", "duration", "onClosed", "onClick"];
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React__default, { useState, useEffect } from 'react';
 import classNames from 'classnames';
 import { CSSTransition } from 'react-transition-group';
 import { c as cn } from './bem-893ad28d.js';
-var defaultProps = {
-  id: '',
-  msg: '',
-  color: '',
-  duration: 3000,
-  type: 'danger',
-  className: '',
-  background: '',
-  position: 'top',
-  isWrapTeleport: true,
-  visible: false,
-  onClosed: function onClosed() {},
-  onClick: function onClick() {}
+
+const defaultProps = {
+    id: '',
+    msg: '',
+    color: '',
+    duration: 3000,
+    type: 'danger',
+    className: '',
+    background: '',
+    position: 'top',
+    isWrapTeleport: true,
+    visible: false,
+    onClosed: () => { },
+    onClick: () => { },
 };
-var Notify = function Notify(props) {
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props),
-    id = _defaultProps$props.id,
-    children = _defaultProps$props.children,
-    style = _defaultProps$props.style,
-    msg = _defaultProps$props.msg,
-    color = _defaultProps$props.color,
-    background = _defaultProps$props.background,
-    type = _defaultProps$props.type,
-    className = _defaultProps$props.className,
-    position = _defaultProps$props.position,
-    isWrapTeleport = _defaultProps$props.isWrapTeleport,
-    visible = _defaultProps$props.visible,
-    duration = _defaultProps$props.duration,
-    onClosed = _defaultProps$props.onClosed,
-    onClick = _defaultProps$props.onClick,
-    rest = _objectWithoutProperties(_defaultProps$props, _excluded);
-  var timer;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    showNotify = _useState2[0],
-    SetShow = _useState2[1];
-  useEffect(function () {
-    if (visible) {
-      SetShow(true);
-      show();
-    } else {
-      hide();
-    }
-  }, [visible]);
-  var clickHandle = function clickHandle() {
-    onClick();
-  };
-  var show = function show() {
-    clearTimer();
-    if (duration) {
-      timer = window.setTimeout(function () {
-        hide();
-      }, duration);
-    }
-  };
-  var clearTimer = function clearTimer() {
-    if (timer) {
-      clearTimeout(timer);
-      timer = null;
-    }
-  };
-  var hide = function hide() {
-    SetShow(false);
-    if (id) {
-      var element = document.getElementById(id);
-      element && element.parentNode && element.parentNode.removeChild(element);
-    }
-    onClosed();
-  };
-  cn('notify');
-  var classes = classNames(_defineProperty({
-    'popup-top': position === 'top',
-    'popup-bottom': position === 'bottom',
-    'nut-notify': true
-  }, "nut-notify--".concat(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,
-    isWrapTeleport: isWrapTeleport,
-    id: id
-  }, React__default.createElement("div", {
-    className: "".concat(classes, " ").concat(className),
-    style: {
-      color: "".concat(color || ''),
-      background: "".concat(background || '')
-    },
-    onClick: clickHandle
-  }, children || msg)));
+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({
+        'popup-top': position === 'top',
+        '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, isWrapTeleport: isWrapTeleport, 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 };