@nutui/nutui-react 2.7.0 → 3.0.0-beta.1

package/dist/es/packages/noticebar/noticebar.d.ts

@@ -0,0 +1,81 @@
+import React, { FunctionComponent, ReactNode } from 'react';
+import { BasicComponent } from "../../utils/typings";
+import { NoticeBarAlign } from './types';
+export interface NoticeBarProps extends BasicComponent {
+    /**
+    * 布局方式, 值为center时，不支持滚动
+    * @default left
+    */
+    align: NoticeBarAlign
+    /**
+    * 滚动的方向，可选 horizontal、vertical
+    * @default horizontal
+    */
+    direction: string
+    list: any;
+    duration: number;
+    height: number;
+    /**
+    * 提示的信息
+    * @default -
+    */
+    content: string
+    /**
+    * 是否启用关闭模式
+    * @default false
+    */
+    closeable: boolean
+    /**
+    * 是否开启文本换行
+    * @default false
+    */
+    wrap: boolean
+    /**
+    * 左边的 icon，closeable 模式下默认为空
+    * @default -
+    */
+    leftIcon: ReactNode
+    /**
+    * 右边的 icon，在 closeable 模式下默认为 <Close />
+    * @default -
+    */
+    rightIcon: ReactNode
+    /**
+    * 区别于rightIcon，为右边自定义区域，仅用于 direction='horizontal' 模式
+    * @default -
+    */
+    right: ReactNode
+    /**
+    * 延时多少秒
+    * @default 1
+    */
+    delay: string | number
+    /**
+    * 是否可以滚动
+    * @default true
+    */
+    scrollable: boolean | null
+    /**
+    * 滚动速率 (px/s)
+    * @default 50
+    */
+    speed: number
+    close?: (event: any) => void;
+    click?: (event: any) => void;
+    /**
+    * 关闭通知栏时触发
+    * @default -
+    */
+    onClose?: (event: any) => void
+    /**
+    * 外层点击事件回调
+    * @default -
+    */
+    onClick?: (event: any) => void
+    /**
+    * 垂直滚动多条数据时，点击当前展示的信息时触发
+    * @default -
+    */
+    onItemClick?: (event: any, value: any) => void
+}
+export declare const NoticeBar: FunctionComponent<Partial<NoticeBarProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick'>>;

package/dist/es/packages/noticebar/noticebar.js

@@ -0,0 +1,425 @@
+import { _ as _define_property } from "@swc/helpers/_/_define_property";
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
+import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
+import React, { useState, useEffect, useRef, useMemo } from "react";
+import { Close, Notice } from "@nutui/icons-react";
+import classNames from "classnames";
+import { getRect } from "../../utils/use-client-rect";
+import { ComponentDefaults } from "../../utils/typings";
+import { useRtl } from "../configprovider";
+var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
+    align: 'left',
+    direction: 'horizontal',
+    list: [],
+    duration: 1000,
+    height: 40,
+    content: '',
+    closeable: false,
+    wrap: false,
+    leftIcon: /*#__PURE__*/ React.createElement(Notice, {
+        width: 16,
+        height: 16
+    }),
+    rightIcon: null,
+    right: null,
+    delay: 1,
+    scrollable: null,
+    speed: 50
+});
+export var NoticeBar = function(props) {
+    var rtl = useRtl();
+    var _$_object_spread = _object_spread({}, defaultProps, props), children = _$_object_spread.children, className = _$_object_spread.className, style = _$_object_spread.style, align = _$_object_spread.align, direction = _$_object_spread.direction, list = _$_object_spread.list, duration = _$_object_spread.duration, height = _$_object_spread.height, content = _$_object_spread.content, closeable = _$_object_spread.closeable, wrap = _$_object_spread.wrap, leftIcon = _$_object_spread.leftIcon, rightIcon = _$_object_spread.rightIcon, right = _$_object_spread.right, delay = _$_object_spread.delay, scrollable = _$_object_spread.scrollable, speed = _$_object_spread.speed, close = _$_object_spread.close, click = _$_object_spread.click, onClose = _$_object_spread.onClose, onClick = _$_object_spread.onClick, onItemClick = _$_object_spread.onItemClick;
+    var classPrefix = 'nut-noticebar';
+    var wrapRef = useRef(null);
+    var contentRef = useRef(null);
+    var _useState = _sliced_to_array(useState(true), 2), showNoticeBar = _useState[0], SetShowNoticeBar = _useState[1];
+    var scrollList = useRef([]);
+    var _useState1 = _sliced_to_array(useState(0), 2), wrapWidth = _useState1[0], SetWrapWidth = _useState1[1];
+    var _useState2 = _sliced_to_array(useState(true), 2), firstRound = _useState2[0], SetFirstRound = _useState2[1];
+    var _useState3 = _sliced_to_array(useState(0), 2), animationDuration = _useState3[0], SetAnimationDuration = _useState3[1];
+    var _useState4 = _sliced_to_array(useState(0), 2), offsetWidth = _useState4[0], SetOffsetW = _useState4[1];
+    var _useState5 = _sliced_to_array(useState(''), 2), animationClass = _useState5[0], SetAnimationClass = _useState5[1];
+    var _useState6 = _sliced_to_array(useState(false), 2), animate = _useState6[0], SetAnimate = _useState6[1];
+    var _useState7 = _sliced_to_array(useState(0), 2), timer = _useState7[0], SetTimer = _useState7[1];
+    var _useState8 = _sliced_to_array(useState(null), 2), isCanScroll = _useState8[0], SetIsCanScroll = _useState8[1];
+    var isVertical = direction === 'vertical';
+    var _useState9 = _sliced_to_array(useState(null), 2), rect = _useState9[0], setRect = _useState9[1];
+    var active = 0;
+    var _useState10 = _sliced_to_array(useState(false), 2), ready = _useState10[0], setReady = _useState10[1];
+    var container = useRef(null);
+    var innerRef = useRef(null);
+    var swiperRef = useRef({
+        moving: false,
+        autoplayTimer: null,
+        width: 0,
+        height: 0,
+        offset: 0,
+        size: 0
+    });
+    var _useState11 = _sliced_to_array(useState([]), 2), childOffset = _useState11[0], setChildOffset = _useState11[1];
+    var _useState12 = _sliced_to_array(useState(0), 2), offset = _useState12[0], setOffset = _useState12[1];
+    var _useMemo = useMemo(function() {
+        var childCount = 0;
+        var childs = React.Children.map(children, function(child) {
+            if (!/*#__PURE__*/ React.isValidElement(child)) return null;
+            childCount++;
+            return child;
+        });
+        return {
+            childs: childs,
+            childCount: childCount
+        };
+    }, [
+        children
+    ]), childs = _useMemo.childs, childCount = _useMemo.childCount;
+    // 滚动消息的总高度
+    var trackSize = childCount * Number(height);
+    // 设置最小偏移量（最后一条的偏移位置）
+    var minOffset = function() {
+        if (rect) {
+            var base = isVertical ? rect.height : rect.width;
+            return base - Number(height) * childCount;
+        }
+        return 0;
+    }();
+    useEffect(function() {
+        if (isVertical) {
+            if (children) {
+                scrollList.current = [].concat(childs);
+            } else {
+                scrollList.current = [].concat(list);
+                startRollEasy();
+            }
+        } else {
+            initScrollWrap(content);
+        }
+        return function() {
+            // 销毁事件
+            clearInterval(timer);
+        };
+    }, []);
+    useEffect(function() {
+        initScrollWrap(content);
+    }, [
+        content
+    ]);
+    useEffect(function() {
+        if (list && list.length) {
+            scrollList.current = [].concat(list);
+        }
+    }, [
+        list
+    ]);
+    var initScrollWrap = function(value) {
+        if (showNoticeBar === false) {
+            return;
+        }
+        setTimeout(function() {
+            if (!wrapRef.current || !contentRef.current) {
+                return;
+            }
+            var wrapW = getRect(wrapRef.current).width;
+            var offsetW = getRect(contentRef.current).width;
+            var canScroll = align === 'left' && scrollable == null ? offsetW > wrapW : scrollable;
+            SetIsCanScroll(canScroll);
+            if (canScroll) {
+                SetWrapWidth(wrapW);
+                SetOffsetW(offsetW);
+                SetAnimationDuration(offsetW / speed);
+                SetAnimationClass('play');
+            } else {
+                SetAnimationClass('');
+            }
+        }, 0);
+    };
+    var handleClick = function(event) {
+        click && click(event);
+        onClick && onClick(event);
+    };
+    var onClickIcon = function(event) {
+        event.stopPropagation();
+        SetShowNoticeBar(!closeable);
+        close && close(event);
+        onClose && onClose(event);
+    };
+    var onAnimationEnd = function() {
+        SetFirstRound(false);
+        setTimeout(function() {
+            SetAnimationDuration((offsetWidth + wrapWidth) / speed);
+            SetAnimationClass('play-infinite');
+        }, 0);
+    };
+    // 滚动时间间隔
+    var time = height / speed / 4 < 1 ? Number((height / speed / 4).toFixed(1)) * 1000 : ~~(height / speed / 4) * 1000;
+    /**
+   * 滚动方式一，普通垂直滚动
+   */ var startRollEasy = function() {
+        showhorseLamp();
+        var timerCurr = window.setInterval(showhorseLamp, time + Number(duration));
+        SetTimer(timerCurr);
+    };
+    var showhorseLamp = function() {
+        SetAnimate(true);
+        setTimeout(function() {
+            scrollList.current.push(scrollList.current[0]);
+            scrollList.current.shift();
+            SetAnimate(false);
+        }, time);
+    };
+    // 点击滚动单元
+    var handleClickIcon = function(event) {
+        event.stopPropagation();
+        SetShowNoticeBar(!closeable);
+        close && close(event);
+        onClose && onClose(event);
+    };
+    var isEllipsis = function() {
+        if (isCanScroll == null && align === 'left') {
+            return wrap;
+        }
+        return !isCanScroll && !wrap;
+    };
+    var contentStyle = {
+        animationDelay: "".concat(firstRound ? delay : 0, "s"),
+        animationDuration: "".concat(animationDuration, "s"),
+        transform: "translateX(".concat(firstRound ? 0 : "".concat(rtl ? -wrapWidth : wrapWidth, "px"), ")")
+    };
+    var barStyle = {
+        height: isVertical ? "".concat(height, "px") : ''
+    };
+    var duringTime = height / speed / 4 < 1 ? Number((height / speed / 4).toFixed(1)) : ~~(height / speed / 4);
+    var noDuring = height / speed < 1 ? (height / speed).toFixed(1) : ~~(height / speed);
+    var horseLampStyle = {
+        transition: animate ? "all ".concat(duringTime === 0 ? noDuring : duringTime, "s") : '',
+        marginTop: animate ? "-".concat(height, "px") : ''
+    };
+    // 垂直自定义滚动方式
+    var init = function() {
+        var active = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : +0;
+        var rects = getRect(container === null || container === void 0 ? void 0 : container.current);
+        var _active = Math.max(Math.min(childCount - 1, active), 0);
+        var _height = rects.height;
+        trackSize = childCount * Number(_height);
+        var targetOffset = getOffset(_active);
+        swiperRef.current.moving = true;
+        if (ready) {
+            swiperRef.current.moving = false;
+        }
+        active = _active;
+        setRect(rects);
+        setOffset(targetOffset);
+        setReady(true);
+    };
+    useEffect(function() {
+        if (ready) {
+            stopAutoPlay();
+            autoplay();
+        }
+        return function() {
+            setReady(false);
+        };
+    }, [
+        ready
+    ]);
+    useEffect(function() {
+        if (isVertical && children) {
+            init();
+            stopAutoPlay();
+            autoplay();
+        }
+    }, [
+        children,
+        container === null || container === void 0 ? void 0 : container.current
+    ]);
+    // 清除定时器
+    var stopAutoPlay = function() {
+        clearTimeout(swiperRef.current.autoplayTimer);
+        swiperRef.current.autoplayTimer = null;
+    };
+    // 定时轮播
+    var autoplay = function() {
+        if (childCount <= 1) return;
+        stopAutoPlay();
+        swiperRef.current.autoplayTimer = setTimeout(function() {
+            next();
+            autoplay();
+        }, Number(duration) + 100 * speed);
+    };
+    // 切换方法
+    var move = function(param) {
+        var _param_pace = param.pace, pace = _param_pace === void 0 ? 0 : _param_pace, _param_offset = param.offset, offset = _param_offset === void 0 ? 0 : _param_offset;
+        if (childCount <= 1) return;
+        var targetActive = getActive(pace);
+        // 父级容器偏移量
+        var targetOffset = getOffset(targetActive, offset);
+        // 循环滚动，调整开头结尾图片位置
+        if (Array.isArray(children) && children[0] && targetOffset !== minOffset) {
+            var rightBound = targetOffset < minOffset;
+            childOffset[0] = rightBound ? trackSize : 0;
+        }
+        if (Array.isArray(children) && children[childCount - 1] && targetOffset !== 0) {
+            var leftBound = targetOffset > 0;
+            childOffset[childCount - 1] = leftBound ? -trackSize : 0;
+        }
+        setChildOffset(childOffset);
+        active = targetActive;
+        setOffset(targetOffset);
+        getStyle(targetOffset);
+    };
+    // 下一页
+    var next = function() {
+        resettPosition();
+        requestFrame(function() {
+            requestFrame(function() {
+                swiperRef.current.moving = false;
+                move({
+                    pace: 1
+                });
+            });
+        });
+    };
+    var handleItemClick = function(event, value) {
+        onItemClick && onItemClick(event, value);
+    };
+    var getStyle = function() {
+        var moveOffset = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : offset;
+        var target = innerRef.current;
+        if (!target) {
+            return;
+        }
+        var _offset = 0;
+        // 容器高度-元素高度
+        var val = rect.height - height;
+        _offset = moveOffset + Number(active === childCount - 1 && val / 2);
+        target.style.transitionDuration = "".concat(swiperRef.current.moving ? 0 : duration, "ms");
+        target.style.height = "".concat(Number(height) * childCount, "px");
+        target.style.transform = "translate3D(0,".concat(_offset, "px,0)");
+    };
+    // 无缝滚动第一个元素位移控制
+    var itemStyle = function(index) {
+        var style = {};
+        if (height) {
+            style.height = "".concat(height, "px");
+            style.lineHeight = "".concat(height, "px");
+        }
+        var offset = childOffset[index];
+        if (offset) {
+            style.transform = "translate3D(0,".concat(offset, "px,0)");
+        }
+        return style;
+    };
+    // 确定当前active 元素
+    var getActive = function(pace) {
+        if (pace) {
+            var _active = active + pace;
+            return range(_active, -1, childCount);
+        }
+        return active;
+    };
+    // 计算位移
+    var getOffset = function(active) {
+        var offset = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 0;
+        var currentPosition = active * Number(height);
+        var targetOffset = offset - currentPosition;
+        return targetOffset;
+    };
+    // 浏览器 帧 事件
+    var requestFrame = function(fn) {
+        window.requestAnimationFrame.call(window, fn);
+    };
+    // 取值 方法
+    var range = function(num, min, max) {
+        return Math.min(Math.max(num, min), max);
+    };
+    // 重置首尾位置信息
+    var resettPosition = function() {
+        swiperRef.current.moving = true;
+        if (active <= -1) {
+            move({
+                pace: childCount
+            });
+        }
+        if (active >= childCount) {
+            move({
+                pace: -childCount
+            });
+        }
+    };
+    var _obj;
+    var noticebarClass = classNames((_obj = {}, _define_property(_obj, "".concat(classPrefix, "-box"), true), _define_property(_obj, "".concat(classPrefix, "-box-wrapable"), wrap), _define_property(_obj, "".concat(classPrefix, "-box-").concat(align), true), _obj));
+    var cls = classNames(classPrefix, className);
+    useEffect(function() {
+        return function() {
+            stopAutoPlay();
+        };
+    }, []);
+    return /*#__PURE__*/ React.createElement("div", {
+        className: cls,
+        style: style
+    }, showNoticeBar && direction === 'horizontal' ? /*#__PURE__*/ React.createElement("div", {
+        className: noticebarClass,
+        style: barStyle,
+        onClick: handleClick
+    }, leftIcon ? /*#__PURE__*/ React.createElement("div", {
+        className: "nut-noticebar-box-left-icon"
+    }, leftIcon) : null, /*#__PURE__*/ React.createElement("div", {
+        ref: wrapRef,
+        className: "nut-noticebar-box-wrap"
+    }, /*#__PURE__*/ React.createElement("div", {
+        ref: contentRef,
+        className: "nut-noticebar-box-wrap-content ".concat(animationClass, " ").concat(isEllipsis() ? 'nut-ellipsis' : ''),
+        style: contentStyle,
+        onAnimationEnd: onAnimationEnd
+    }, children, content)), right ? /*#__PURE__*/ React.createElement("div", {
+        className: "nut-noticebar-box-right"
+    }, right) : null, closeable || rightIcon ? /*#__PURE__*/ React.createElement("div", {
+        className: "nut-noticebar-box-right-icon",
+        onClick: onClickIcon
+    }, rightIcon || /*#__PURE__*/ React.createElement(Close, {
+        width: 12,
+        height: 12
+    })) : null) : null, showNoticeBar && scrollList.current.length > 0 && isVertical ? /*#__PURE__*/ React.createElement("div", {
+        className: "nut-noticebar-vertical",
+        style: barStyle,
+        ref: container,
+        onClick: handleClick
+    }, leftIcon ? /*#__PURE__*/ React.createElement("div", {
+        className: "nut-noticebar-box-left-icon"
+    }, leftIcon) : null, children ? /*#__PURE__*/ React.createElement("div", {
+        className: "nut-noticebar-box-wrap",
+        ref: innerRef
+    }, scrollList.current.map(function(item, index) {
+        return /*#__PURE__*/ React.createElement("div", {
+            style: itemStyle(index),
+            key: index,
+            onClick: function(e) {
+                handleItemClick(e, item);
+            }
+        }, item);
+    })) : /*#__PURE__*/ React.createElement("div", {
+        className: "nut-noticebar-box-horseLamp-list",
+        style: horseLampStyle
+    }, scrollList.current.map(function(item, index) {
+        return(// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+        /*#__PURE__*/ React.createElement("div", {
+            className: "nut-noticebar-box-horseLamp-list-item",
+            style: {
+                height: height
+            },
+            key: index,
+            onClick: function(e) {
+                handleItemClick(e, item);
+            }
+        }, item));
+    })), /*#__PURE__*/ React.createElement("div", {
+        className: "nut-noticebar-box-right-icon",
+        onClick: function(e) {
+            handleClickIcon(e);
+        }
+    }, rightIcon || (closeable ? /*#__PURE__*/ React.createElement(Close, {
+        width: 12,
+        height: 12
+    }) : null))) : null);
+};
+NoticeBar.displayName = 'NutNoticeBar';

package/dist/es/packages/noticebar/style/css.js

@@ -0,0 +1 @@
+import './style.css'

package/dist/es/packages/noticebar/style/index.js

@@ -0,0 +1 @@
+import './noticebar.scss';