@nutui/nutui-react-taro 3.0.0-beta.0 → 3.0.0-beta.10

package/dist/cjs/packages/barrage/barrage.js

@@ -43,6 +43,7 @@ var InternalBarrage = function InternalBarrage(props, ref) {
     var barrageContainer = (0, _react.useRef)(null);
     var barrageCWidth = (0, _react.useRef)(0);
     var timer = (0, _react.useRef)(0);
+    var domTimer = (0, _react.useRef)(0);
     var index = (0, _react.useRef)(0);
     var times = (0, _react.useRef)([]);
     var historyIndex = (0, _react.useRef)(-1);
@@ -59,7 +60,7 @@ var InternalBarrage = function InternalBarrage(props, ref) {
             }
         };
     });
-    var getNodeWidth = function() {
+    var getNodeWidth = /*#__PURE__*/ function() {
         var _ref = (0, _async_to_generator._)(function(node) {
             var type, refe;
             var _arguments = arguments;
@@ -93,9 +94,16 @@ var InternalBarrage = function InternalBarrage(props, ref) {
             return _ref.apply(this, arguments);
         };
     }();
+    var clearDomTimeout = function clearDomTimeout() {
+        if (domTimer.current) {
+            clearTimeout(domTimer.current);
+            domTimer.current = 0;
+        }
+    };
     (0, _react.useEffect)(function() {
-        var init = function() {
+        var init = /*#__PURE__*/ function() {
             var _ref = (0, _async_to_generator._)(function() {
+                var _barrageBody_current;
                 return (0, _ts_generator._)(this, function(_state) {
                     switch(_state.label){
                         case 0:
@@ -109,6 +117,9 @@ var InternalBarrage = function InternalBarrage(props, ref) {
                             ];
                         case 1:
                             barrageCWidth.current = _state.sent();
+                            (_barrageBody_current = barrageBody.current) === null || _barrageBody_current === void 0 ? void 0 : _barrageBody_current.style.setProperty('--move-distance', "-".concat(barrageCWidth.current, "px"));
+                            index.current = 0;
+                            run();
                             _state.label = 2;
                         case 2:
                             return [
@@ -121,21 +132,17 @@ var InternalBarrage = function InternalBarrage(props, ref) {
                 return _ref.apply(this, arguments);
             };
         }();
-        init();
-        setTimeout(function() {
-            var _barrageBody_current;
-            (_barrageBody_current = barrageBody.current) === null || _barrageBody_current === void 0 ? void 0 : _barrageBody_current.style.setProperty('--move-distance', "-".concat(barrageCWidth.current, "px"));
-            index.current = 0;
-            run();
+        domTimer.current = window.setTimeout(function() {
+            init();
         }, 300);
         return function() {
-            clearInterval(timer.current);
+            clearDomTimeout();
         };
     }, [
         list
     ]);
     var run = function run() {
-        clearInterval(timer.current);
+        clearTimeout(timer.current);
         var intervalCache = interval;
         var _index = (loop ? index.current % list.length : index.current) % rows;
         var result = times.current[_index] - rows * interval;
@@ -146,80 +153,85 @@ var InternalBarrage = function InternalBarrage(props, ref) {
             play();
         }, intervalCache);
     };
-    var play = function() {
-        var _ref = (0, _async_to_generator._)(function() {
-            var _index, el, currentIndex, width, height, elScrollDuration, error;
+    var setStyle = /*#__PURE__*/ function() {
+        var _ref = (0, _async_to_generator._)(function(el, currentIndex) {
+            var refe, width, height, elScrollDuration, error;
             return (0, _ts_generator._)(this, function(_state) {
                 switch(_state.label){
                     case 0:
-                        if (!loop && index.current >= list.length) {
-                            return [
-                                2
-                            ];
-                        }
-                        _index = loop ? index.current % list.length : index.current;
-                        el = document.createElement("View");
-                        currentIndex = _index % rows;
-                        if (currentIndex <= historyIndex.current || historyIndex.current === 3 && currentIndex !== 0 || Math.abs(currentIndex - historyIndex.current) !== 1) {
-                            currentIndex = historyIndex.current + 1 >= rows ? 0 : historyIndex.current + 1;
-                        }
-                        historyIndex.current = currentIndex;
-                        el.innerHTML = list[_index];
-                        el.classList.add('barrage-item');
-                        barrageContainer.current.appendChild(el);
-                        _state.label = 1;
-                    case 1:
                         _state.trys.push([
-                            1,
-                            4,
+                            0,
+                            3,
                             ,
-                            5
+                            4
                         ]);
-                        return [
-                            4,
-                            getNodeWidth(el)
+                        if (!el) return [
+                            3,
+                            2
                         ];
-                    case 2:
-                        width = _state.sent();
                         return [
                             4,
-                            getNodeWidth(el, 'height')
+                            (0, _getrectbytaro.getRectByTaro)(el)
                         ];
-                    case 3:
-                        height = _state.sent();
+                    case 1:
+                        refe = _state.sent();
+                        width = refe.width;
+                        height = refe.height;
                         el.classList.add('move');
-                        elScrollDuration = width / barrageCWidth.current * duration;
-                        times.current[currentIndex] = Math.ceil(elScrollDuration);
-                        el.style.animationDuration = "".concat((duration + elScrollDuration).toFixed(2), "ms");
+                        elScrollDuration = Math.round(width / barrageCWidth.current * duration);
+                        times.current[currentIndex] = elScrollDuration;
+                        el.style.animationDuration = "".concat(duration + elScrollDuration, "ms");
                         el.style.top = "".concat(currentIndex * (height + gapY) + 20, "px");
                         el.style.width = "".concat(width, "px");
+                        _state.label = 2;
+                    case 2:
                         return [
                             3,
-                            5
+                            4
                         ];
-                    case 4:
+                    case 3:
                         error = _state.sent();
-                        console.log('异常自动流转到下一个');
+                        console.log('异常自动流转到下一个', error);
+                        barrageContainer.current.removeChild(el);
                         return [
                             3,
-                            5
+                            4
                         ];
-                    case 5:
+                    case 4:
                         el.addEventListener('animationend', function() {
+                            ;
                             barrageContainer.current.removeChild(el);
                         });
-                        index.current++;
-                        run();
                         return [
                             2
                         ];
                 }
             });
         });
-        return function play() {
+        return function setStyle(el, currentIndex) {
             return _ref.apply(this, arguments);
         };
     }();
+    var play = function play() {
+        if (!loop && index.current >= list.length) {
+            return;
+        }
+        var _index = loop ? index.current % list.length : index.current;
+        var el = document.createElement("View");
+        var currentIndex = _index % rows;
+        if (currentIndex <= historyIndex.current || historyIndex.current === 3 && currentIndex !== 0 || Math.abs(currentIndex - historyIndex.current) !== 1) {
+            currentIndex = historyIndex.current + 1 >= rows ? 0 : historyIndex.current + 1;
+        }
+        historyIndex.current = currentIndex;
+        el.innerHTML = list[_index];
+        barrageContainer.current.appendChild(el);
+        el.classList.add('barrage-item');
+        requestAnimationFrame(function() {
+            return setStyle(el, currentIndex);
+        });
+        index.current++;
+        run();
+    };
     return /*#__PURE__*/ _react.default.createElement(_components.View, (0, _object_spread._)({
         className: classes,
         ref: barrageBody

package/dist/cjs/packages/barrage/style/barrage.scss

@@ -15,7 +15,7 @@
     right: 0;
     padding: 4px 16px;
     border-radius: 16px;
-    font-size: $font-size-small;
+    font-size: $font-size-s;
     text-align: center;
     white-space: pre;
     transform: translateX(100%);

package/dist/cjs/packages/barrage/style/style.css

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-barrage {
   position: absolute;
   left: 0;
@@ -6,8 +10,8 @@
   height: 100%;
   overflow: hidden;
   box-sizing: border-box;
-  background-color: var(--nutui-gray-3, #f5f6fa);
-  color: var(--nutui-gray-7, #1a1a1a);
+  background-color: var(--nutui-gray-3);
+  color: var(--nutui-gray-7);
 }
 .nut-barrage .barrage-item {
   display: block;
@@ -15,7 +19,7 @@
   right: 0;
   padding: 4px 16px;
   border-radius: 16px;
-  font-size: var(--nutui-font-size-2, 12px);
+  font-size: var(--nutui-font-size-s, 12px);
   text-align: center;
   white-space: pre;
   transform: translateX(100%);

package/dist/cjs/packages/button/button.js

@@ -55,7 +55,7 @@ var Button = /*#__PURE__*/ _react.default.forwardRef(function(props, ref) {
     ]);
     var getStyle = (0, _react.useCallback)(function() {
         var style = {};
-        if (props.color) {
+        if (color) {
             if (props.fill === 'outline' || props.fill === 'dashed') {
                 style.color = color;
                 if (!(color === null || color === void 0 ? void 0 : color.includes('gradient'))) {
@@ -72,7 +72,8 @@ var Button = /*#__PURE__*/ _react.default.forwardRef(function(props, ref) {
         }
         return style;
     }, [
-        color
+        color,
+        props.fill
     ]);
     var getContStyle = (0, _react.useCallback)(function() {
         var style = {};
@@ -95,6 +96,7 @@ var Button = /*#__PURE__*/ _react.default.forwardRef(function(props, ref) {
         }
     };
     if ((0, _taro.getEnv)() === 'WEB') {
+        ;
         rest.type = rest.formType;
     }
     var _obj;
@@ -111,10 +113,10 @@ var Button = /*#__PURE__*/ _react.default.forwardRef(function(props, ref) {
         }
     }), /*#__PURE__*/ _react.default.createElement(_components.View, {
         className: "nut-button-wrap"
-    }, loading && !(0, _platformtaro.harmonyAndRn)() && /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.Loading, {
+    }, loading && /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.Loading, {
         className: "nut-icon-loading"
     }), !loading && icon ? icon : null, children && /*#__PURE__*/ _react.default.createElement(_components.View, {
-        className: "nut-button-children nut-button-".concat(size, "-children nut-button-").concat(type, "-children ").concat(!(props.fill || disabled || loading) ? '' : "nut-button-".concat(type).concat(props.fill ? "-".concat(fill) : '').concat(disabled || loading ? '-disabled' : ''), " ").concat(icon || loading ? "nut-button-text" : '').concat(rightIcon ? " nut-button-text-right" : ''),
+        className: "nut-button-children nut-button-".concat(size, "-children nut-button-").concat(type, "-children ").concat(!(props.fill || disabled || loading) ? '' : "nut-button-".concat(type).concat(props.fill ? "-".concat(fill) : '').concat(disabled || loading ? '-disabled' : '')).concat(icon || loading ? " nut-button-text" : '').concat(rightIcon ? " nut-button-text-right" : ''),
         style: (0, _platformtaro.harmonyAndRn)() ? getContStyle() : {}
     }, children), rightIcon || null)));
 });

package/dist/cjs/packages/button/style/button.scss

@@ -17,13 +17,13 @@
   padding: 0;
   height: $button-default-height;
   font-size: $button-default-font-size;
-  font-weight: $button-default-font-weight;
+  font-weight: $font-weight;
   text-align: center;
   cursor: pointer;
   transition: $button-transition;
-  -webkit-appearance: none;
   user-select: none;
   touch-action: manipulation;
+  -webkit-appearance: none;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   color: $button-default-color;
   background: $button-default-background-color;
@@ -99,6 +99,26 @@
     padding: 0;
   }
 
+  &-round {
+    border-radius: $button-border-radius;
+
+    &-xlarge {
+      border-radius: $button-xlarge-border-radius;
+    }
+
+    &-large {
+      border-radius: $button-large-border-radius;
+    }
+
+    &-small {
+      border-radius: $button-small-border-radius;
+    }
+
+    &-mini {
+      border-radius: $button-mini-border-radius;
+    }
+  }
+
   &-default {
     padding: $button-default-padding;
     border-style: solid;
@@ -135,7 +155,14 @@
     height: $button-xlarge-height;
     padding: $button-xlarge-padding;
     font-size: $button-xlarge-font-size;
-    font-weight: $button-large-font-weight;
+    border-radius: $radius-base;
+
+    .nut-button-text {
+      margin-left: $button-xlarge-text-icon-margin;
+      &-right {
+        margin-right: $button-xlarge-text-icon-margin;
+      }
+    }
 
     .nut-icon {
       font-size: $button-xlarge-font-size;
@@ -144,7 +171,6 @@
     }
     &-children {
       font-size: $button-xlarge-font-size;
-      font-weight: $button-large-font-weight;
     }
   }
 
@@ -152,7 +178,14 @@
     height: $button-large-height;
     padding: $button-large-padding;
     font-size: $button-large-font-size;
-    font-weight: $button-large-font-weight;
+    border-radius: $radius-s;
+
+    .nut-button-text {
+      margin-left: $button-xlarge-text-icon-margin;
+      &-right {
+        margin-right: $button-xlarge-text-icon-margin;
+      }
+    }
 
     .nut-icon {
       font-size: $button-large-font-size;
@@ -162,7 +195,6 @@
 
     &-children {
       font-size: $button-large-font-size;
-      font-weight: $button-large-font-weight;
     }
   }
 
@@ -170,6 +202,7 @@
     height: $button-small-height;
     padding: $button-small-padding;
     font-size: $button-small-font-size;
+    border-radius: $radius-xs;
 
     .nut-icon {
       font-size: $button-small-font-size;
@@ -186,6 +219,7 @@
     height: $button-mini-height;
     padding: $button-mini-padding;
     font-size: $button-mini-font-size;
+    border-radius: $radius-xs;
 
     .nut-icon {
       font-size: $button-mini-font-size;
@@ -211,6 +245,11 @@
       background: $button-primary-background-color;
       color: $button-primary-color;
       border-color: transparent;
+      font-weight: $font-weight-bold;
+      &.nut-button-small,
+      &.nut-button-mini {
+        font-weight: $font-weight;
+      }
     }
 
     &-disabled,
@@ -248,6 +287,9 @@
       }
     }
   }
+  &-primary.nut-button-solid.nut-button-normal {
+    font-weight: $font-weight-bold;
+  }
 
   &-success {
     color: $button-success-color;
@@ -412,23 +454,6 @@
     opacity: 0.9;
   }
 
-  &-round {
-    border-radius: $button-border-radius;
-
-    &-xlarge,
-    &-large {
-      border-radius: $button-large-border-radius;
-    }
-
-    &-small {
-      border-radius: $button-small-border-radius;
-    }
-
-    &-mini {
-      border-radius: $button-mini-border-radius;
-    }
-  }
-
   &-square {
     border-radius: $button-square-border-radius;
   }