@nutui/nutui-react 2.0.0-alpha.0 → 2.0.0-alpha.10

package/dist/esm/MenuItem.js

@@ -28,11 +28,10 @@ import { Check } from "@nutui/icons-react";
 import { O as Overlay } from "./overlay2.js";
 import { C as ComponentDefaults } from "./typings.js";
 var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
-  className: "",
-  style: {},
   columns: 1,
   direction: "down",
-  optionsIcon: null,
+  icon: null,
+  closeOnClickAway: false,
   activeTitleClass: "",
   inactiveTitleClass: "",
   onChange: function onChange(value) {
@@ -40,20 +39,18 @@ var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
   }
 });
 var MenuItem = forwardRef(function(props, ref) {
-  var mergedProps = _objectSpread(_objectSpread({}, defaultProps), props);
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), style = _defaultProps$props.style, options = _defaultProps$props.options, value = _defaultProps$props.value, columns = _defaultProps$props.columns, title = _defaultProps$props.title, optionsIcon = _defaultProps$props.optionsIcon, direction = _defaultProps$props.direction, onChange2 = _defaultProps$props.onChange, activeTitleClass = _defaultProps$props.activeTitleClass, inactiveTitleClass = _defaultProps$props.inactiveTitleClass, children = _defaultProps$props.children;
-  var activeColor = mergedProps.activeColor, showPopup = mergedProps.showPopup, parent = mergedProps.parent, orderKey = mergedProps.orderKey;
-  var _useState = useState(showPopup), _useState2 = _slicedToArray(_useState, 2), _showPopup = _useState2[0], setShowPopup = _useState2[1];
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), className = _defaultProps$props.className, style = _defaultProps$props.style, options = _defaultProps$props.options, value = _defaultProps$props.value, columns = _defaultProps$props.columns, title = _defaultProps$props.title, icon = _defaultProps$props.icon, direction = _defaultProps$props.direction, onChange2 = _defaultProps$props.onChange, activeTitleClass = _defaultProps$props.activeTitleClass, inactiveTitleClass = _defaultProps$props.inactiveTitleClass, closeOnClickAway = _defaultProps$props.closeOnClickAway, children = _defaultProps$props.children, activeColor = _defaultProps$props.activeColor, show = _defaultProps$props.show, parent = _defaultProps$props.parent, index = _defaultProps$props.index;
+  var _useState = useState(show), _useState2 = _slicedToArray(_useState, 2), _showPopup = _useState2[0], setShowPopup = _useState2[1];
   var _useState3 = useState(value), _useState4 = _slicedToArray(_useState3, 2), _value = _useState4[0], setValue = _useState4[1];
   useEffect(function() {
-    setShowPopup(showPopup);
-  }, [showPopup]);
+    setShowPopup(show);
+  }, [show]);
   useEffect(function() {
     getParentOffset();
   }, [_showPopup]);
   useImperativeHandle(ref, function() {
     return {
-      toggle: parent.toggleItemShow
+      toggle: parent.toggleMenuItem
     };
   });
   var getIconCName = function getIconCName2(optionVal, value2) {
@@ -62,11 +59,11 @@ var MenuItem = forwardRef(function(props, ref) {
   };
   var setTitle = function setTitle2(text) {
     if (!title) {
-      parent.updateTitle(text, orderKey);
+      parent.updateTitle(text, index);
     }
   };
   var handleClick = function handleClick2(item) {
-    parent.toggleItemShow(orderKey);
+    parent.toggleMenuItem(index);
     setTitle(item.text);
     setValue(item.value);
     onChange2 && onChange2(item);
@@ -77,7 +74,7 @@ var MenuItem = forwardRef(function(props, ref) {
   }), _useState6 = _slicedToArray(_useState5, 2), position = _useState6[0], setPosition = _useState6[1];
   var getParentOffset = function getParentOffset2() {
     setTimeout(function() {
-      var p = parent.parent().current;
+      var p = parent.menuRef.current;
       var rect = p.getBoundingClientRect();
       setPosition({
         height: rect.height,
@@ -102,42 +99,47 @@ var MenuItem = forwardRef(function(props, ref) {
   };
   var placeholderStyle = function placeholderStyle2() {
     if (direction === "down") {
-      return _objectSpread(_objectSpread({
-        height: "".concat(position.top + position.height, "px")
-      }, isShow()), style);
+      return _objectSpread({
+        height: "".concat(position.top + position.height, "px"),
+        top: 0
+      }, isShow());
     }
-    return _objectSpread(_objectSpread({
+    return _objectSpread({
       height: "".concat(window.innerHeight - position.top, "px"),
+      bottom: "0px",
       top: "auto"
-    }, isShow()), style);
+    }, isShow());
   };
-  return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+  return React__default.createElement(React__default.Fragment, null, closeOnClickAway ? React__default.createElement("div", {
     className: "placeholder-element ".concat(classNames({
       up: direction === "up"
     })),
     style: placeholderStyle(),
     onClick: function onClick() {
-      return parent.toggleItemShow(orderKey);
+      return parent.toggleMenuItem(index);
     }
-  }), React__default.createElement(Overlay, {
+  }) : null, React__default.createElement(Overlay, {
     className: "nut-menu__overlay",
     style: getPosition(),
     lockScroll: parent.lockScroll,
     visible: _showPopup,
-    closeOnOverlayClick: parent.closeOnClickOverlay,
+    closeOnOverlayClick: parent.closeOnOverlayClick,
     onClick: function onClick() {
-      parent.closeOnClickOverlay && parent.toggleItemShow(orderKey);
+      parent.closeOnOverlayClick && parent.toggleMenuItem(index);
     }
   }), React__default.createElement("div", {
-    className: direction === "down" ? "nut-menu-item__wrap" : "nut-menu-item__wrap-up",
-    style: _objectSpread({}, isShow())
+    className: classNames(className, {
+      "nut-menu-item__wrap": direction === "down",
+      "nut-menu-item__wrap-up": direction !== "down"
+    }),
+    style: _objectSpread(_objectSpread({}, style), isShow())
   }, React__default.createElement(CSSTransition, {
     "in": _showPopup,
     timeout: 100,
     classNames: direction === "down" ? "menu-item" : "menu-item-up"
   }, React__default.createElement("div", {
     className: "nut-menu-item__content"
-  }, options === null || options === void 0 ? void 0 : options.map(function(item, index) {
+  }, options === null || options === void 0 ? void 0 : options.map(function(item, index2) {
     return React__default.createElement("div", {
       className: "nut-menu-item__option ".concat(classNames({
         active: item.value === _value
@@ -149,7 +151,7 @@ var MenuItem = forwardRef(function(props, ref) {
       onClick: function onClick() {
         handleClick(item);
       }
-    }, item.value === _value ? React__default.createElement("i", null, optionsIcon || React__default.createElement(Check, {
+    }, item.value === _value ? React__default.createElement("i", null, icon || React__default.createElement(Check, {
       color: activeColor,
       className: getIconCName(item.value, value)
     })) : null, React__default.createElement("div", {

package/dist/esm/NavBar.js

@@ -22,35 +22,21 @@ function _objectSpread(target) {
 }
 import React__default from "react";
 import classNames from "classnames";
-import { Left } from "@nutui/icons-react";
-import { c as cn } from "./bem.js";
 import { C as ComponentDefaults } from "./typings.js";
-import "@bem-react/classname";
 var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
-  title: "",
-  description: "",
-  leftShow: true,
-  className: "",
-  leftText: "",
+  left: "",
+  right: "",
+  back: "",
   fixed: false,
   safeAreaInsetTop: false,
-  border: false,
   placeholder: false,
-  zIndex: 10,
-  style: {}
+  zIndex: 10
 });
 var NavBar = function NavBar2(props) {
   var _classNames;
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), description = _defaultProps$props.description, title = _defaultProps$props.title, leftShow = _defaultProps$props.leftShow, className = _defaultProps$props.className, style = _defaultProps$props.style, leftText = _defaultProps$props.leftText, fixed = _defaultProps$props.fixed, safeAreaInsetTop = _defaultProps$props.safeAreaInsetTop, border = _defaultProps$props.border, placeholder = _defaultProps$props.placeholder, zIndex = _defaultProps$props.zIndex, onClickTitle = _defaultProps$props.onClickTitle, onClickIcon = _defaultProps$props.onClickIcon, onClickBack = _defaultProps$props.onClickBack, onClickRight = _defaultProps$props.onClickRight;
-  var b = cn("navbar");
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), right = _defaultProps$props.right, left = _defaultProps$props.left, className = _defaultProps$props.className, style = _defaultProps$props.style, back = _defaultProps$props.back, fixed = _defaultProps$props.fixed, safeAreaInsetTop = _defaultProps$props.safeAreaInsetTop, placeholder = _defaultProps$props.placeholder, zIndex = _defaultProps$props.zIndex, onClickBack = _defaultProps$props.onClickBack;
+  var classPrefix = "nut-navbar";
   var children = Array.isArray(props.children) ? props.children : [props.children];
-  var slot = children.reduce(function(slot2, item) {
-    var data = slot2;
-    if (item && item.props) {
-      data[item.props.slot] = item.props.children;
-    }
-    return data;
-  }, {});
   var styles = function styles2() {
     return _objectSpread(_objectSpread({}, style), {}, {
       zIndex
@@ -58,40 +44,23 @@ var NavBar = function NavBar2(props) {
   };
   var renderLeft = function renderLeft2() {
     return React__default.createElement("div", {
-      className: "".concat(b("left")),
+      className: "".concat(classPrefix, "__left")
+    }, back && React__default.createElement("div", {
+      className: "".concat(classPrefix, "__left__back"),
       onClick: function onClick(e) {
         return onClickBack(e);
       }
-    }, leftShow && React__default.createElement(Left, {
-      name: "left",
-      color: "#979797"
-    }), leftText && React__default.createElement("div", {
-      className: "".concat(b("text"))
-    }, leftText), slot.left);
+    }, back), left);
   };
   var renderContent = function renderContent2() {
     return React__default.createElement("div", {
-      className: "".concat(b("title"))
-    }, title && React__default.createElement("div", {
-      className: "title",
-      onClick: function onClick(e) {
-        return onClickTitle(e);
-      }
-    }, title), slot.titleIcon && React__default.createElement("div", {
-      onClick: function onClick(e) {
-        return onClickIcon(e);
-      }
-    }, slot.titleIcon), slot.content);
+      className: "".concat(classPrefix, "__title")
+    }, children);
   };
   var renderRight = function renderRight2() {
     return React__default.createElement("div", {
-      className: "".concat(b("right")),
-      onClick: function onClick(e) {
-        return onClickRight(e);
-      }
-    }, description && React__default.createElement("div", {
-      className: "".concat(b("text"))
-    }, description), slot.right);
+      className: "".concat(classPrefix, "__right")
+    }, right);
   };
   var renderWrapper = function renderWrapper2() {
     return React__default.createElement("div", {
@@ -99,10 +68,10 @@ var NavBar = function NavBar2(props) {
       style: styles()
     }, renderLeft(), renderContent(), renderRight());
   };
-  var classes = classNames((_classNames = {}, _defineProperty(_classNames, "nut-navbar--border", border), _defineProperty(_classNames, "nut-navbar--fixed", fixed), _defineProperty(_classNames, "nut-navbar--safe-area-inset-top", safeAreaInsetTop), _classNames));
-  var cls = classNames(b(""), classes, className);
+  var classes = classNames((_classNames = {}, _defineProperty(_classNames, "".concat(classPrefix, "--fixed"), fixed), _defineProperty(_classNames, "".concat(classPrefix, "--safe-area-inset-top"), safeAreaInsetTop), _classNames));
+  var cls = classNames(classPrefix, classes, className);
   return React__default.createElement(React__default.Fragment, null, fixed && placeholder ? React__default.createElement("div", {
-    className: "".concat(b(""), "--placeholder")
+    className: "".concat(classPrefix, "--placeholder")
   }, renderWrapper()) : renderWrapper());
 };
 NavBar.defaultProps = defaultProps;

package/dist/esm/NoticeBar.js

@@ -24,50 +24,44 @@ function _objectSpread(target) {
 import React__default, { useRef, useState, useMemo, useEffect } from "react";
 import { Notice, Close } from "@nutui/icons-react";
 import classNames from "classnames";
-import { c as cn } from "./bem.js";
 import { g as getRect } from "./use-client-rect.js";
 import { C as ComponentDefaults } from "./typings.js";
-import "@bem-react/classname";
 var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
-  // 滚动方向  across 横向 vertical 纵向
-  direction: "across",
+  direction: "horizontal",
   list: [],
-  standTime: 1e3,
-  complexAm: false,
+  duration: 1e3,
   height: 40,
-  text: "",
-  closeMode: false,
-  wrapable: false,
+  content: "",
+  closeable: false,
+  wrap: false,
   leftIcon: null,
   rightIcon: null,
-  color: "",
-  background: "",
   delay: 1,
   scrollable: null,
   speed: 50
 });
 var NoticeBar = function NoticeBar2(props) {
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), children = _defaultProps$props.children, className = _defaultProps$props.className, style = _defaultProps$props.style, direction = _defaultProps$props.direction, list = _defaultProps$props.list, standTime = _defaultProps$props.standTime, complexAm = _defaultProps$props.complexAm, height = _defaultProps$props.height, text = _defaultProps$props.text, closeMode = _defaultProps$props.closeMode, wrapable = _defaultProps$props.wrapable, leftIcon = _defaultProps$props.leftIcon, rightIcon = _defaultProps$props.rightIcon, color = _defaultProps$props.color, background = _defaultProps$props.background, delay = _defaultProps$props.delay, scrollable = _defaultProps$props.scrollable, speed = _defaultProps$props.speed, close = _defaultProps$props.close, click = _defaultProps$props.click, onClose = _defaultProps$props.onClose, onClick = _defaultProps$props.onClick, onClickItem = _defaultProps$props.onClickItem;
-  var wrap = useRef(null);
-  var content = useRef(null);
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), children = _defaultProps$props.children, className = _defaultProps$props.className, style = _defaultProps$props.style, direction = _defaultProps$props.direction, list = _defaultProps$props.list, duration = _defaultProps$props.duration, height = _defaultProps$props.height, content = _defaultProps$props.content, closeable = _defaultProps$props.closeable, wrap = _defaultProps$props.wrap, leftIcon = _defaultProps$props.leftIcon, rightIcon = _defaultProps$props.rightIcon, delay = _defaultProps$props.delay, scrollable = _defaultProps$props.scrollable, speed = _defaultProps$props.speed, close = _defaultProps$props.close, click = _defaultProps$props.click, onClose = _defaultProps$props.onClose, onClick = _defaultProps$props.onClick, onClickItem = _defaultProps$props.onClickItem;
+  var classPrefix = "nut-noticebar";
+  var wrapRef = useRef(null);
+  var contentRef = useRef(null);
   var _useState = useState(true), _useState2 = _slicedToArray(_useState, 2), showNoticeBar = _useState2[0], SetShowNoticeBar = _useState2[1];
   var scrollList = useRef([]);
   var _useState3 = useState(0), _useState4 = _slicedToArray(_useState3, 2), wrapWidth = _useState4[0], SetWrapWidth = _useState4[1];
   var _useState5 = useState(true), _useState6 = _slicedToArray(_useState5, 2), firstRound = _useState6[0], SetFirstRound = _useState6[1];
-  var _useState7 = useState(0), _useState8 = _slicedToArray(_useState7, 2), duration = _useState8[0], SetDuration = _useState8[1];
+  var _useState7 = useState(0), _useState8 = _slicedToArray(_useState7, 2), animationDuration = _useState8[0], SetAnimationDuration = _useState8[1];
   var _useState9 = useState(0), _useState10 = _slicedToArray(_useState9, 2), offsetWidth = _useState10[0], SetOffsetW = _useState10[1];
   var _useState11 = useState(""), _useState12 = _slicedToArray(_useState11, 2), animationClass = _useState12[0], SetAnimationClass = _useState12[1];
   var _useState13 = useState(false), _useState14 = _slicedToArray(_useState13, 2), animate = _useState14[0], SetAnimate = _useState14[1];
-  var _useState15 = useState(0), _useState16 = _slicedToArray(_useState15, 2), distance = _useState16[0], SetDistance = _useState16[1];
-  var _useState17 = useState(0), _useState18 = _slicedToArray(_useState17, 2), timer = _useState18[0], SetTimer = _useState18[1];
-  var _useState19 = useState(null), _useState20 = _slicedToArray(_useState19, 2), isCanScroll = _useState20[0], SetIsCanScroll = _useState20[1];
+  var _useState15 = useState(0), _useState16 = _slicedToArray(_useState15, 2), timer = _useState16[0], SetTimer = _useState16[1];
+  var _useState17 = useState(null), _useState18 = _slicedToArray(_useState17, 2), isCanScroll = _useState18[0], SetIsCanScroll = _useState18[1];
   var isVertical = direction === "vertical";
-  var _useState21 = useState(null), _useState22 = _slicedToArray(_useState21, 2), rect = _useState22[0], setRect = _useState22[1];
+  var _useState19 = useState(null), _useState20 = _slicedToArray(_useState19, 2), rect = _useState20[0], setRect = _useState20[1];
   var active = 0;
-  var _useState23 = useState(false), _useState24 = _slicedToArray(_useState23, 2), ready = _useState24[0], setReady = _useState24[1];
+  var _useState21 = useState(false), _useState22 = _slicedToArray(_useState21, 2), ready = _useState22[0], setReady = _useState22[1];
   var container = useRef(null);
   var innerRef = useRef(null);
-  var _swiper = useRef({
+  var swiperRef = useRef({
     moving: false,
     autoplayTimer: null,
     width: 0,
@@ -75,8 +69,8 @@ var NoticeBar = function NoticeBar2(props) {
     offset: 0,
     size: 0
   });
-  var _useState25 = useState([]), _useState26 = _slicedToArray(_useState25, 2), childOffset = _useState26[0], setChildOffset = _useState26[1];
-  var _useState27 = useState(0), _useState28 = _slicedToArray(_useState27, 2), offset = _useState28[0], setOffset = _useState28[1];
+  var _useState23 = useState([]), _useState24 = _slicedToArray(_useState23, 2), childOffset = _useState24[0], setChildOffset = _useState24[1];
+  var _useState25 = useState(0), _useState26 = _slicedToArray(_useState25, 2), offset = _useState26[0], setOffset = _useState26[1];
   var _useMemo = useMemo(function() {
     var childCount2 = 0;
     var childs2 = React__default.Children.map(children, function(child) {
@@ -106,7 +100,6 @@ var NoticeBar = function NoticeBar2(props) {
         scrollList.current = [].concat(list);
         startRollEasy();
       }
-      complexAm && startRoll();
     } else {
       initScrollWrap();
     }
@@ -116,7 +109,7 @@ var NoticeBar = function NoticeBar2(props) {
   }, []);
   useEffect(function() {
     initScrollWrap();
-  }, [text]);
+  }, [content]);
   useEffect(function() {
     if (list && list.length) {
       scrollList.current = [].concat(list);
@@ -127,17 +120,17 @@ var NoticeBar = function NoticeBar2(props) {
       return;
     }
     setTimeout(function() {
-      if (!wrap.current || !content.current) {
+      if (!wrapRef.current || !contentRef.current) {
         return;
       }
-      var wrapW = getRect(wrap.current).width;
-      var offsetW = getRect(content.current).width;
+      var wrapW = getRect(wrapRef.current).width;
+      var offsetW = getRect(contentRef.current).width;
       var canScroll = scrollable == null ? offsetW > wrapW : scrollable;
       SetIsCanScroll(canScroll);
       if (canScroll) {
         SetWrapWidth(wrapW);
         SetOffsetW(offsetW);
-        SetDuration(offsetW / speed);
+        SetAnimationDuration(offsetW / speed);
         SetAnimationClass("play");
       } else {
         SetAnimationClass("");
@@ -150,21 +143,21 @@ var NoticeBar = function NoticeBar2(props) {
   };
   var onClickIcon = function onClickIcon2(event) {
     event.stopPropagation();
-    SetShowNoticeBar(!closeMode);
+    SetShowNoticeBar(!closeable);
     close && close(event);
     onClose && onClose(event);
   };
   var onAnimationEnd = function onAnimationEnd2() {
     SetFirstRound(false);
     setTimeout(function() {
-      SetDuration((offsetWidth + wrapWidth) / speed);
+      SetAnimationDuration((offsetWidth + wrapWidth) / speed);
       SetAnimationClass("play-infinite");
     }, 0);
   };
   var time = height / speed / 4 < 1 ? Number((height / speed / 4).toFixed(1)) * 1e3 : ~~(height / speed / 4) * 1e3;
   var startRollEasy = function startRollEasy2() {
     showhorseLamp();
-    var timerCurr = window.setInterval(showhorseLamp, time + Number(standTime));
+    var timerCurr = window.setInterval(showhorseLamp, time + Number(duration));
     SetTimer(timerCurr);
   };
   var showhorseLamp = function showhorseLamp2() {
@@ -175,55 +168,29 @@ var NoticeBar = function NoticeBar2(props) {
       SetAnimate(false);
     }, time);
   };
-  var startRoll = function startRoll2() {
-    var timerCurr = window.setInterval(function() {
-      var chunk = 100;
-      for (var i = 0; i < chunk; i++) {
-        scroll(i, !(i < chunk - 1));
-      }
-    }, Number(standTime) + 100 * speed);
-    SetTimer(timerCurr);
-  };
-  var scroll = function scroll2(n, last) {
-    SetAnimate(true);
-    setTimeout(function() {
-      var _long = distance;
-      _long -= height / 100;
-      SetDistance(_long);
-      if (last) {
-        scrollList.current.push(scrollList.current[0]);
-        scrollList.current.shift();
-        SetDistance(0);
-        SetAnimate(false);
-      }
-    }, n * speed);
-  };
   var handleClickIcon = function handleClickIcon2(event) {
     event.stopPropagation();
-    SetShowNoticeBar(!closeMode);
+    SetShowNoticeBar(!closeable);
     close && close(event);
     onClose && onClose(event);
   };
   var isEllipsis = function isEllipsis2() {
     if (isCanScroll == null) {
-      return wrapable;
+      return wrap;
     }
-    return !isCanScroll && !wrapable;
+    return !isCanScroll && !wrap;
   };
   var contentStyle = {
     animationDelay: "".concat(firstRound ? delay : 0, "s"),
-    animationDuration: "".concat(duration, "s"),
+    animationDuration: "".concat(animationDuration, "s"),
     transform: "translateX(".concat(firstRound ? 0 : "".concat(wrapWidth, "px"), ")")
   };
   var barStyle = {
-    color,
-    background,
     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 = {
-    transform: complexAm ? "translateY(".concat(distance, "px)") : "",
     transition: animate ? "all ".concat(duringTime === 0 ? noDuring : duringTime, "s") : "",
     marginTop: animate ? "-".concat(height, "px") : ""
   };
@@ -234,9 +201,9 @@ var NoticeBar = function NoticeBar2(props) {
     var _height = rects.height;
     trackSize = childCount * Number(_height);
     var targetOffset = getOffset(_active);
-    _swiper.current.moving = true;
+    swiperRef.current.moving = true;
     if (ready) {
-      _swiper.current.moving = false;
+      swiperRef.current.moving = false;
     }
     active2 = _active;
     setRect(rects);
@@ -260,17 +227,17 @@ var NoticeBar = function NoticeBar2(props) {
     }
   }, [children, container === null || container === void 0 ? void 0 : container.current]);
   var stopAutoPlay = function stopAutoPlay2() {
-    clearTimeout(_swiper.current.autoplayTimer);
-    _swiper.current.autoplayTimer = null;
+    clearTimeout(swiperRef.current.autoplayTimer);
+    swiperRef.current.autoplayTimer = null;
   };
   var autoplay = function autoplay2() {
     if (childCount <= 1)
       return;
     stopAutoPlay();
-    _swiper.current.autoplayTimer = setTimeout(function() {
+    swiperRef.current.autoplayTimer = setTimeout(function() {
       next();
       autoplay2();
-    }, Number(standTime) + 100 * speed);
+    }, Number(duration) + 100 * speed);
   };
   var move = function move2(_ref) {
     var _ref$pace = _ref.pace, pace = _ref$pace === void 0 ? 0 : _ref$pace, _ref$offset = _ref.offset, offset2 = _ref$offset === void 0 ? 0 : _ref$offset;
@@ -295,7 +262,7 @@ var NoticeBar = function NoticeBar2(props) {
     resettPosition();
     requestFrame(function() {
       requestFrame(function() {
-        _swiper.current.moving = false;
+        swiperRef.current.moving = false;
         move({
           pace: 1
         });
@@ -311,7 +278,7 @@ var NoticeBar = function NoticeBar2(props) {
     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.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)");
   };
@@ -347,7 +314,7 @@ var NoticeBar = function NoticeBar2(props) {
     return Math.min(Math.max(num, min), max);
   };
   var resettPosition = function resettPosition2() {
-    _swiper.current.moving = true;
+    swiperRef.current.moving = true;
     if (active <= -1) {
       move({
         pace: childCount
@@ -359,12 +326,11 @@ var NoticeBar = function NoticeBar2(props) {
       });
     }
   };
-  var b = cn("noticebar");
   var noticebarClass = classNames({
     "nut-noticebar-page": true,
-    withicon: closeMode,
-    close: closeMode,
-    wrapable
+    withicon: closeable,
+    close: closeable,
+    wrapable: wrap
   });
   useEffect(function() {
     return function() {
@@ -372,9 +338,9 @@ var NoticeBar = function NoticeBar2(props) {
     };
   }, []);
   return React__default.createElement("div", {
-    className: "".concat(b(), " ").concat(className || ""),
+    className: "".concat(classPrefix, " ").concat(className || ""),
     style
-  }, showNoticeBar && direction === "across" ? React__default.createElement("div", {
+  }, showNoticeBar && direction === "horizontal" ? React__default.createElement("div", {
     className: noticebarClass,
     style: barStyle,
     onClick: handleClick
@@ -382,23 +348,21 @@ var NoticeBar = function NoticeBar2(props) {
     className: "left-icon"
   }, leftIcon || React__default.createElement(Notice, {
     width: 16,
-    height: 16,
-    color
+    height: 16
   })), React__default.createElement("div", {
-    ref: wrap,
+    ref: wrapRef,
     className: "wrap"
   }, React__default.createElement("div", {
-    ref: content,
+    ref: contentRef,
     className: "content ".concat(animationClass, " ").concat(isEllipsis() ? "nut-ellipsis" : ""),
     style: contentStyle,
     onAnimationEnd
-  }, children, text)), closeMode || rightIcon ? React__default.createElement("div", {
+  }, children, content)), closeable || rightIcon ? React__default.createElement("div", {
     className: "right-icon",
     onClick: onClickIcon
   }, rightIcon || React__default.createElement(Close, {
     width: 12,
-    height: 12,
-    color
+    height: 12
   })) : null) : null, showNoticeBar && scrollList.current.length > 0 && isVertical ? React__default.createElement("div", {
     className: "nut-noticebar-vertical",
     style: barStyle,
@@ -440,10 +404,9 @@ var NoticeBar = function NoticeBar2(props) {
     onClick: function onClick2(e) {
       handleClickIcon(e);
     }
-  }, rightIcon || (closeMode ? React__default.createElement(Close, {
+  }, rightIcon || (closeable ? React__default.createElement(Close, {
     width: 12,
-    height: 12,
-    color
+    height: 12
   }) : null))) : null);
 };
 NoticeBar.defaultProps = defaultProps;