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

package/dist/esm/NoticeBar.js

@@ -2,7 +2,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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, { useRef, useState, useEffect } from 'react';
+import React__default, { useRef, useState, useMemo, useEffect } from 'react';
 import classNames from 'classnames';
 import Icon from './Icon.js';
 import { c as cn } from './bem-893ad28d.js';
@@ -50,6 +50,7 @@ var NoticeBar = function NoticeBar(props) {
     click = _defaultProps$props.click,
     onClose = _defaultProps$props.onClose,
     onClick = _defaultProps$props.onClick,
+    onClickItem = _defaultProps$props.onClickItem,
     iconClassPrefix = _defaultProps$props.iconClassPrefix,
     iconFontClassName = _defaultProps$props.iconFontClassName;
   var wrap = useRef(null);
@@ -95,18 +96,78 @@ var NoticeBar = function NoticeBar(props) {
     _useState20 = _slicedToArray(_useState19, 2),
     isCanScroll = _useState20[0],
     SetIsCanScroll = _useState20[1];
+  var isVertical = direction === 'vertical';
+  var _useState21 = useState(null),
+    _useState22 = _slicedToArray(_useState21, 2),
+    rect = _useState22[0],
+    setRect = _useState22[1];
+  var active = 0;
+  var _useState23 = useState(''),
+    _useState24 = _slicedToArray(_useState23, 2),
+    vLeftIcon = _useState24[0],
+    setLeftIcon = _useState24[1];
+  var _useState25 = useState(false),
+    _useState26 = _slicedToArray(_useState25, 2),
+    ready = _useState26[0],
+    setReady = _useState26[1];
+  var container = useRef(null);
+  var innerRef = useRef(null);
+  var _swiper = useRef({
+    moving: false,
+    autoplayTimer: null,
+    width: 0,
+    height: 0,
+    offset: 0,
+    size: 0
+  });
+  var _useState27 = useState([]),
+    _useState28 = _slicedToArray(_useState27, 2),
+    childOffset = _useState28[0],
+    setChildOffset = _useState28[1];
+  var _useState29 = useState(0),
+    _useState30 = _slicedToArray(_useState29, 2),
+    offset = _useState30[0],
+    setOffset = _useState30[1];
+  // 获取自定义slot数据内容和总条数
+  var _useMemo = useMemo(function () {
+      var childCount = 0;
+      var childs = React__default.Children.map(children, function (child) {
+        if (!React__default.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 (direction === 'vertical') {
+    if (isVertical) {
+      // 兼容老版本无左侧Icon问题
+      if (leftIcon !== '') {
+        setLeftIcon(leftIcon);
+      } else {
+        setLeftIcon('close');
+      }
       if (children) {
-        var arr = [];
-        React__default.Children.map(children, function (child) {
-          arr.push(child.props.children);
-        });
-        scrollList.current = [].concat(arr);
+        scrollList.current = [].concat(childs);
       } else {
         scrollList.current = [].concat(list);
+        startRollEasy();
       }
-      complexAm ? startRoll() : startRollEasy();
+      complexAm && startRoll();
     } else {
       initScrollWrap();
     }
@@ -117,17 +178,6 @@ var NoticeBar = function NoticeBar(props) {
       startRollEasy();
     };
   }, []);
-  var cloneChild = function cloneChild(listItem, listIndex) {
-    return React__default.Children.map(children, function (child, index) {
-      if (child && index === listIndex) {
-        return React__default.cloneElement(child, {
-          key: listIndex,
-          children: listItem
-        });
-      }
-      return null;
-    });
-  };
   useEffect(function () {
     initScrollWrap();
   }, [text]);
@@ -175,24 +225,27 @@ var NoticeBar = function NoticeBar(props) {
       SetAnimationClass('play-infinite');
     }, 0);
   };
+  // 滚动时间间隔
+  var time = height / speed / 4 < 1 ? Number((height / speed / 4).toFixed(1)) * 1000 : ~~(height / speed / 4) * 1000;
   /**
-   * 滚动方式一
+   * 滚动方式一，普通垂直滚动
    */
   var startRollEasy = function startRollEasy() {
     showhorseLamp();
-    var time = height / speed / 4 < 1 ? Number((height / speed / 4).toFixed(1)) * 1000 : ~~(height / speed / 4) * 1000;
     var timerCurr = window.setInterval(showhorseLamp, time + Number(standTime));
     SetTimer(timerCurr);
   };
   var showhorseLamp = function showhorseLamp() {
     SetAnimate(true);
-    var time = height / speed / 4 < 1 ? Number((height / speed / 4).toFixed(1)) * 1000 : ~~(height / speed / 4) * 1000;
     setTimeout(function () {
       scrollList.current.push(scrollList.current[0]);
       scrollList.current.shift();
       SetAnimate(false);
     }, time);
   };
+  /**
+   * 复杂滚动方式
+   */
   var startRoll = function startRoll() {
     var timerCurr = window.setInterval(function () {
       var chunk = 100;
@@ -226,7 +279,7 @@ var NoticeBar = function NoticeBar(props) {
     onClose && onClose(event);
   };
   var iconShow = function iconShow() {
-    if (leftIcon === 'close') {
+    if (leftIcon === 'close' || vLeftIcon === 'close') {
       return false;
     }
     return true;
@@ -252,7 +305,7 @@ var NoticeBar = function NoticeBar(props) {
   var barStyle = {
     color: color,
     background: background,
-    height: direction === 'vertical' ? "".concat(height, "px") : ''
+    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);
@@ -261,6 +314,155 @@ var NoticeBar = function NoticeBar(props) {
     transition: animate ? "all ".concat(duringTime === 0 ? noDuring : duringTime, "s") : '',
     marginTop: animate ? "-".concat(height, "px") : ''
   };
+  /**
+   * 垂直自定义滚动方式
+   */
+  var init = function init() {
+    var active = arguments.length > 0 && arguments[0] !== undefined ? 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);
+    _swiper.current.moving = true;
+    if (ready) {
+      _swiper.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 stopAutoPlay() {
+    clearTimeout(_swiper.current.autoplayTimer);
+    _swiper.current.autoplayTimer = null;
+  };
+  // 定时轮播
+  var autoplay = function autoplay() {
+    if (childCount <= 1) return;
+    stopAutoPlay();
+    _swiper.current.autoplayTimer = setTimeout(function () {
+      next();
+      autoplay();
+    }, Number(standTime) + 100 * speed);
+  };
+  // 切换方法
+  var move = function move(_ref) {
+    var _ref$pace = _ref.pace,
+      pace = _ref$pace === void 0 ? 0 : _ref$pace,
+      _ref$offset = _ref.offset,
+      offset = _ref$offset === void 0 ? 0 : _ref$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 next() {
+    resettPosition();
+    requestFrame(function () {
+      requestFrame(function () {
+        _swiper.current.moving = false;
+        move({
+          pace: 1
+        });
+      });
+    });
+  };
+  var handleItemClick = function handleItemClick(event, value) {
+    onClickItem && onClickItem(event, value);
+  };
+  var getStyle = function getStyle() {
+    var moveOffset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : offset;
+    var target = innerRef.current;
+    var _offset = 0;
+    // 容器高度-元素高度
+    var val = rect.height - height;
+    _offset = moveOffset + Number(active === childCount - 1 && val / 2);
+    target.style.transitionDuration = "".concat(_swiper.current.moving ? 0 : standTime, "ms");
+    target.style.height = "".concat(Number(height) * childCount, "px");
+    target.style.transform = "translate3D(0,".concat(_offset, "px,0)");
+  };
+  // 无缝滚动第一个元素位移控制
+  var itemStyle = function itemStyle(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 getActive(pace) {
+    if (pace) {
+      var _active = active + pace;
+      return range(_active, -1, childCount);
+    }
+    return active;
+  };
+  // 计算位移
+  var getOffset = function getOffset(active) {
+    var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+    var currentPosition = active * Number(height);
+    var targetOffset = offset - currentPosition;
+    return targetOffset;
+  };
+  // 浏览器 帧 事件
+  var requestFrame = function requestFrame(fn) {
+    window.requestAnimationFrame.call(window, fn);
+  };
+  // 取值 方法
+  var range = function range(num, min, max) {
+    return Math.min(Math.max(num, min), max);
+  };
+  // 重置首尾位置信息
+  var resettPosition = function resettPosition() {
+    _swiper.current.moving = true;
+    if (active <= -1) {
+      move({
+        pace: childCount
+      });
+    }
+    if (active >= childCount) {
+      move({
+        pace: -childCount
+      });
+    }
+  };
   var b = cn('noticebar');
   var noticebarClass = classNames({
     'nut-noticebar-page': true,
@@ -268,6 +470,11 @@ var NoticeBar = function NoticeBar(props) {
     close: closeMode,
     wrapable: wrapable
   });
+  useEffect(function () {
+    return function () {
+      stopAutoPlay();
+    };
+  }, []);
   return React__default.createElement("div", {
     className: "".concat(b(), " ").concat(className || ''),
     style: style
@@ -302,27 +509,49 @@ var NoticeBar = function NoticeBar(props) {
     fontClassName: iconFontClassName,
     name: rightIcon || 'close',
     color: color
-  })) : null) : null, showNoticeBar && direction === 'vertical' ? React__default.createElement("div", {
+  })) : null) : null, showNoticeBar && scrollList.current.length > 0 && isVertical ? React__default.createElement("div", {
     className: "nut-noticebar-vertical",
     style: barStyle,
+    ref: container,
     onClick: handleClick
-  }, children ? React__default.createElement("div", {
-    className: "horseLamp_list",
-    style: horseLampStyle
+  }, iconShow() ? React__default.createElement("div", {
+    className: "left-icon",
+    style: {
+      backgroundImage: "url(".concat(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(function (item, index) {
-    return cloneChild(item, index);
-  })) : React__default.createElement("ul", {
+    return React__default.createElement("div", {
+      className: "scroll-inner ",
+      style: itemStyle(index),
+      key: index,
+      onClick: function onClick(e) {
+        handleItemClick(e, item);
+      }
+    }, item);
+  }))) : React__default.createElement("div", {
     className: "horseLamp_list",
     style: horseLampStyle
   }, scrollList.current.map(function (item, index) {
     return (
       // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-      React__default.createElement("li", {
+      React__default.createElement("div", {
         className: "horseLamp_list_item",
         style: {
           height: height
         },
-        key: index
+        key: index,
+        onClick: function onClick(e) {
+          handleItemClick(e, item);
+        }
       }, item)
     );
   })), React__default.createElement("div", {

package/dist/esm/PullToRefresh.js

@@ -102,88 +102,82 @@ var PullToRefresh = function PullToRefresh(p) {
   function _doRefresh() {
     _doRefresh = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
       return _regeneratorRuntime.wrap(function _callee3$(_context3) {
-        while (1) {
-          switch (_context3.prev = _context3.next) {
-            case 0:
-              api.start({
-                height: headHeight
-              });
-              setStatus('refreshing');
-              _context3.prev = 2;
-              _context3.next = 5;
-              return props.onRefresh();
-            case 5:
-              setStatus('complete');
-              _context3.next = 12;
-              break;
-            case 8:
-              _context3.prev = 8;
-              _context3.t0 = _context3["catch"](2);
-              api.start({
-                to: function () {
-                  var _to = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(next) {
-                    return _regeneratorRuntime.wrap(function _callee$(_context) {
-                      while (1) {
-                        switch (_context.prev = _context.next) {
-                          case 0:
-                            _context.next = 2;
-                            return next({
-                              height: 0
-                            });
-                          case 2:
-                            setStatus('pulling');
-                          case 3:
-                          case "end":
-                            return _context.stop();
-                        }
-                      }
-                    }, _callee);
-                  }));
-                  function to(_x) {
-                    return _to.apply(this, arguments);
-                  }
-                  return to;
-                }()
-              });
-              throw _context3.t0;
-            case 12:
-              if (!(props.completeDelay > 0)) {
-                _context3.next = 15;
-                break;
-              }
+        while (1) switch (_context3.prev = _context3.next) {
+          case 0:
+            api.start({
+              height: headHeight
+            });
+            setStatus('refreshing');
+            _context3.prev = 2;
+            _context3.next = 5;
+            return props.onRefresh();
+          case 5:
+            setStatus('complete');
+            _context3.next = 12;
+            break;
+          case 8:
+            _context3.prev = 8;
+            _context3.t0 = _context3["catch"](2);
+            api.start({
+              to: function () {
+                var _to = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(next) {
+                  return _regeneratorRuntime.wrap(function _callee$(_context) {
+                    while (1) switch (_context.prev = _context.next) {
+                      case 0:
+                        _context.next = 2;
+                        return next({
+                          height: 0
+                        });
+                      case 2:
+                        setStatus('pulling');
+                      case 3:
+                      case "end":
+                        return _context.stop();
+                    }
+                  }, _callee);
+                }));
+                function to(_x) {
+                  return _to.apply(this, arguments);
+                }
+                return to;
+              }()
+            });
+            throw _context3.t0;
+          case 12:
+            if (!(props.completeDelay > 0)) {
               _context3.next = 15;
-              return sleep(props.completeDelay);
-            case 15:
-              api.start({
-                to: function () {
-                  var _to2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(next) {
-                    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-                      while (1) {
-                        switch (_context2.prev = _context2.next) {
-                          case 0:
-                            _context2.next = 2;
-                            return next({
-                              height: 0
-                            });
-                          case 2:
-                            setStatus('pulling');
-                          case 3:
-                          case "end":
-                            return _context2.stop();
-                        }
-                      }
-                    }, _callee2);
-                  }));
-                  function to(_x2) {
-                    return _to2.apply(this, arguments);
-                  }
-                  return to;
-                }()
-              });
-            case 16:
-            case "end":
-              return _context3.stop();
-          }
+              break;
+            }
+            _context3.next = 15;
+            return sleep(props.completeDelay);
+          case 15:
+            api.start({
+              to: function () {
+                var _to2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(next) {
+                  return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+                    while (1) switch (_context2.prev = _context2.next) {
+                      case 0:
+                        _context2.next = 2;
+                        return next({
+                          height: 0
+                        });
+                      case 2:
+                        setStatus('pulling');
+                      case 3:
+                      case "end":
+                        return _context2.stop();
+                    }
+                  }, _callee2);
+                }));
+                function to(_x2) {
+                  return _to2.apply(this, arguments);
+                }
+                return to;
+              }()
+            });
+          case 16:
+          case "end":
+            return _context3.stop();
         }
       }, _callee3, null, [[2, 8]]);
     }));

package/dist/esm/Tag.js

@@ -5,6 +5,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React__default, { useState, useEffect } from 'react';
 import Icon from './Icon.js';
 import { C as ComponentDefaults } from './typings-1c5f2628.js';
+import classNames from 'classnames';
 var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
   type: 'default',
   color: '',
@@ -46,37 +47,41 @@ var Tag = function Tag(props) {
     setBtnName(classes());
   }, [type, color, textColor, plain, round, mark, closeable, prefixCls, onClick, onClose]);
   var classes = function classes() {
+    var _classNames;
     var prefixCls = 'nut-tag';
-    return "".concat(prefixCls, "\n    ").concat(type ? "".concat(prefixCls, "--").concat(type) : '', "\n    ").concat(plain ? "".concat(prefixCls, "--plain") : '', "\n    ").concat(round ? "".concat(prefixCls, "--round") : '', "\n    ").concat(mark ? "".concat(prefixCls, "--mark") : '', "\n    ").concat(closeable ? "".concat(prefixCls, "--close") : '');
+    return classNames((_classNames = {}, _defineProperty(_classNames, prefixCls, true), _defineProperty(_classNames, "".concat(prefixCls, "--").concat(type), type), _defineProperty(_classNames, "".concat(prefixCls, "--plain"), plain), _defineProperty(_classNames, "".concat(prefixCls, "--round"), round), _defineProperty(_classNames, "".concat(prefixCls, "--mark"), mark), _defineProperty(_classNames, "".concat(prefixCls, "--close"), closeable), _defineProperty(_classNames, "".concat(className), className), _classNames));
   };
   var handleClick = function handleClick(e) {
     if (props.onClick) {
       props.onClick(e);
     }
   };
+  // 综合考虑 textColor、color、plain 组合使用时的效果
   var getStyle = function getStyle() {
     var style = {};
+    // 标签内字体颜色
     if (textColor) {
       style.color = textColor;
-      if (plain) {
-        style.background = '#fff';
-      } else if (color) {
-        style.background = color;
-      }
+    } else if (color && plain) {
+      style.color = color;
+    }
+    // 标签背景与边框颜色
+    if (plain) {
+      style.background = '#fff';
+      style.borderColor = color;
     } else if (color) {
-      style.color = '#fff';
       style.background = color;
     }
     return style;
   };
   return React__default.createElement(React__default.Fragment, null, closeable ? isTagShow && React__default.createElement("div", {
-    className: "".concat(btnName, " ").concat(className),
+    className: btnName,
     style: _objectSpread(_objectSpread({}, style), getStyle()),
     onClick: function onClick(e) {
       return handleClick(e);
     }
   }, children && React__default.createElement("span", {
-    className: "text"
+    className: "nut-tag-text"
   }, children), React__default.createElement(Icon, {
     classPrefix: iconClassPrefix,
     fontClassName: iconFontClassName,
@@ -90,13 +95,13 @@ var Tag = function Tag(props) {
       }
     }
   })) : React__default.createElement("div", {
-    className: "".concat(btnName, " ").concat(className),
+    className: btnName,
     style: _objectSpread(_objectSpread({}, style), getStyle()),
     onClick: function onClick(e) {
       return handleClick(e);
     }
   }, children && React__default.createElement("span", {
-    className: "text"
+    className: "nut-tag-text"
   }, children)));
 };
 Tag.defaultProps = defaultProps;

package/dist/esm/render-f8746530.js

@@ -55,18 +55,16 @@ function concurrentUnmount(_x) {
 function _concurrentUnmount() {
   _concurrentUnmount = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(container) {
     return _regeneratorRuntime.wrap(function _callee$(_context) {
-      while (1) {
-        switch (_context.prev = _context.next) {
-          case 0:
-            return _context.abrupt("return", Promise.resolve().then(function () {
-              var _container$MARK;
-              (_container$MARK = container[MARK]) === null || _container$MARK === void 0 ? void 0 : _container$MARK.unmount();
-              delete container[MARK];
-            }));
-          case 1:
-          case "end":
-            return _context.stop();
-        }
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          return _context.abrupt("return", Promise.resolve().then(function () {
+            var _container$MARK;
+            (_container$MARK = container[MARK]) === null || _container$MARK === void 0 ? void 0 : _container$MARK.unmount();
+            delete container[MARK];
+          }));
+        case 1:
+        case "end":
+          return _context.stop();
       }
     }, _callee);
   }));