@nutui/nutui-react-taro 2.0.21 → 2.0.22-beta.0

package/dist/nutui.react.umd.js

@@ -8,7 +8,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 /*!
-* @nutui/nutui-react-taro v2.0.21 Wed Oct 18 2023 17:56:58 GMT+0800 (China Standard Time)
+* @nutui/nutui-react-taro v2.0.22 Fri Oct 27 2023 18:00:59 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -3277,7 +3277,7 @@ var __publicField = (obj, key, value) => {
     };
     const containerStyle = {
       // eslint-disable-next-line no-nested-ternary
-      height: height ? pxCheck(height) : Taro.getEnv() === "WEB" ? "" : "100px",
+      height: height ? pxCheck(height) : Taro.getEnv() === "WEB" ? "" : "100%",
       // eslint-disable-next-line no-nested-ternary
       width: width ? pxCheck(width) : Taro.getEnv() === "WEB" ? "" : "100%",
       overflow: radius !== void 0 && radius !== null ? "hidden" : "",
@@ -6448,13 +6448,13 @@ var __publicField = (obj, key, value) => {
       stateRef.current = value;
     }
     const setState = React.useCallback(
-      (v) => {
+      (v, forceTrigger = false) => {
         const prevState = stateRef.current;
         stateRef.current = v;
-        if (prevState !== stateRef.current) {
+        if (prevState !== stateRef.current || forceTrigger) {
           forceUpdate();
+          onChange == null ? void 0 : onChange(v);
         }
-        onChange == null ? void 0 : onChange(v);
       },
       [value, onChange]
     );
@@ -6752,24 +6752,24 @@ var __publicField = (obj, key, value) => {
     };
     const getAllRect = (selector) => {
       return new Promise((resolve) => {
-        Taro.createSelectorQuery().selectAll(selector).boundingClientRect().exec((rect = []) => resolve(rect[0]));
+        Taro.createSelectorQuery().selectAll(selector).boundingClientRect().exec((rect = []) => {
+          resolve(rect[0]);
+        });
       });
     };
     const scrollWithAnimation = React.useRef(false);
     const navRectRef = React.useRef();
     const titleRectRef = React.useRef([]);
-    const canShowLabel = React.useRef(false);
-    const scrollLeft = React.useRef(0);
-    const scrollTop = React.useRef(0);
+    const [scrollLeft, setScrollLeft] = React.useState(0);
+    const [scrollTop, setScrollTop] = React.useState(0);
     const scrollDirection = (to, direction2) => {
       let count = 0;
-      const from = direction2 === "horizontal" ? scrollLeft.current : scrollTop.current;
       const frames = 1;
       function animate() {
         if (direction2 === "horizontal") {
-          scrollLeft.current += (to - from) / frames;
+          setScrollLeft(to);
         } else {
-          scrollTop.current += (to - from) / frames;
+          setScrollTop(to);
         }
         if (++count < frames) {
           requestAniFrame$1(animate);
@@ -6782,47 +6782,24 @@ var __publicField = (obj, key, value) => {
         return;
       requestAniFrame$1(() => {
         Promise.all([
-          getRect2(`#nut-tabs__titles_${name}`),
+          getRect2(`#nut-tabs__titles_${name} .nut-tabs__list`),
           getAllRect(`#nut-tabs__titles_${name} .nut-tabs__titles-item`)
         ]).then(([navRect, titleRects]) => {
           navRectRef.current = navRect;
           titleRectRef.current = titleRects;
-          if (navRectRef.current) {
-            if (props.direction === "vertical") {
-              const titlesTotalHeight = titleRects.reduce(
-                (prev, curr) => prev + curr.height,
-                0
-              );
-              if (titlesTotalHeight > navRectRef.current.height) {
-                canShowLabel.current = true;
-              } else {
-                canShowLabel.current = false;
-              }
-            } else {
-              const titlesTotalWidth = titleRects.reduce(
-                (prev, curr) => prev + curr.width,
-                0
-              );
-              if (titlesTotalWidth > navRectRef.current.width) {
-                canShowLabel.current = true;
-              } else {
-                canShowLabel.current = false;
-              }
-            }
-          }
           const titleRect = titleRectRef.current[value];
           let to = 0;
           if (props.direction === "vertical") {
             const DEFAULT_PADDING = 11;
             const top = titleRects.slice(0, value).reduce(
-              (prev, curr) => prev + curr.height + 0,
+              (prev, curr) => prev + curr.height,
               DEFAULT_PADDING
             );
             to = top - (navRectRef.current.height - titleRect.height) / 2;
           } else {
-            const DEFAULT_PADDING = 31;
+            const DEFAULT_PADDING = 20;
             const left = titleRects.slice(0, value).reduce(
-              (prev, curr) => prev + curr.width + 20,
+              (prev, curr) => prev + curr.width,
               DEFAULT_PADDING
             );
             to = left - (navRectRef.current.width - titleRect.width) / 2;
@@ -6834,15 +6811,12 @@ var __publicField = (obj, key, value) => {
         });
       });
     };
-    const scrollIntoRef = React.useRef(0);
     React.useEffect(() => {
       const index = titles.current.findIndex((t) => t.value === value);
       setContentStyle({
         transform: direction === "horizontal" ? `translate3d(-${index * 100}%, 0, 0)` : `translate3d( 0,-${index * 100}%, 0)`,
         transitionDuration: `${duration}ms`
       });
-      const scrollToIndex = index - 2;
-      scrollIntoRef.current = scrollToIndex < 0 ? 0 : scrollToIndex;
       scrollIntoView();
     }, [value]);
     const tabChange = (item, index) => {
@@ -6858,17 +6832,15 @@ var __publicField = (obj, key, value) => {
         enableFlex: true,
         scrollX: direction === "horizontal",
         scrollY: direction === "vertical",
-        scrollLeft: scrollLeft.current,
-        scrollTop: scrollTop.current,
+        scrollLeft,
+        scrollTop,
         showScrollbar: false,
-        scrollIntoViewAlignment: "center",
         scrollWithAnimation: scrollWithAnimation.current,
         id: `nut-tabs__titles_${name}`,
         className: classesTitle,
-        style: { ...tabStyle },
-        ref: navRef
+        style: { ...tabStyle }
       },
-      /* @__PURE__ */ React.createElement(components.View, { className: "nut-tabs__list" }, !!title && typeof title === "function" ? title() : titles.current.map((item, index) => {
+      /* @__PURE__ */ React.createElement(components.View, { className: "nut-tabs__list", ref: navRef }, !!title && typeof title === "function" ? title() : titles.current.map((item, index) => {
         return /* @__PURE__ */ React.createElement(
           components.View,
           {
@@ -11424,7 +11396,7 @@ var __publicField = (obj, key, value) => {
         }
         setValue(val);
         const eventHandler = props[trigger];
-        if (eventHandler && typeof eventHandler === "function") {
+        if (eventHandler && typeof eventHandler === "function" && trigger !== "onChange") {
           eventHandler(val);
         }
         forceUpdate();
@@ -14282,7 +14254,7 @@ var __publicField = (obj, key, value) => {
     lockScroll: true,
     beforeCancel: () => true,
     beforeClose: () => true,
-    onOverlayClick: () => void 0
+    onOverlayClick: () => true
   };
   const BaseDialog = (props) => {
     const classPrefix2 = "nut-dialog";
@@ -14768,7 +14740,7 @@ var __publicField = (obj, key, value) => {
     content: "",
     closeable: false,
     wrap: false,
-    leftIcon: null,
+    leftIcon: /* @__PURE__ */ React.createElement(a$b, { size: 16 }),
     rightIcon: null,
     delay: 1,
     scrollable: null,
@@ -15101,7 +15073,7 @@ var __publicField = (obj, key, value) => {
         stopAutoPlay();
       };
     }, []);
-    return /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2} ${className || ""}`, style }, showNoticeBar && direction === "horizontal" ? /* @__PURE__ */ React.createElement("div", { className: noticebarClass, style: barStyle, onClick: handleClick }, /* @__PURE__ */ React.createElement("div", { className: "left-icon" }, leftIcon || /* @__PURE__ */ React.createElement(a$b, { size: 16 })), /* @__PURE__ */ React.createElement("div", { ref: wrapRef, className: "wrap" }, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2} ${className || ""}`, style }, showNoticeBar && direction === "horizontal" ? /* @__PURE__ */ React.createElement("div", { className: noticebarClass, style: barStyle, onClick: handleClick }, leftIcon ? /* @__PURE__ */ React.createElement("div", { className: "left-icon" }, leftIcon) : null, /* @__PURE__ */ React.createElement("div", { ref: wrapRef, className: "wrap" }, /* @__PURE__ */ React.createElement(
       "div",
       {
         ref: contentRef,
@@ -15945,9 +15917,9 @@ var __publicField = (obj, key, value) => {
         return;
       }
       touch.move(event);
-      props.onTouchMove && props.onTouchMove(event);
       if (touch.isHorizontal()) {
         lockClick.current = true;
+        props.onTouchMove && props.onTouchMove(event);
         const newState = { ...state, dragging: true };
         const isEdge = !opened || touch.deltaX * startOffset.current < 0;
         if (isEdge) {
@@ -16056,8 +16028,7 @@ var __publicField = (obj, key, value) => {
         onTouchStart: (e) => onTouchStart(e),
         onTouchMove: (e) => onTouchMove(e),
         onTouchEnd: (e) => onTouchEnd(e),
-        style,
-        catchMove: true
+        style
       },
       /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}__wrapper`, style: wrapperStyle }, renderActionContent("left"), children, renderActionContent("right"))
     );
@@ -17876,9 +17847,7 @@ var __publicField = (obj, key, value) => {
                   {
                     src: item.src,
                     mode: "aspectFit",
-                    showMenuByLongpress: true,
-                    width: "100%",
-                    height: "100%"
+                    showMenuByLongpress: true
                   }
                 )
               );

package/dist/packages/tabpane/tabpane.scss

@@ -1,8 +1,3 @@
-.nut-theme-dark {
-  .nut-tabpane {
-    background: $dark4;
-  }
-}
 .nut-tabpane {
   width: 100%;
   flex-shrink: 0;
@@ -12,9 +7,6 @@
   padding: 24px 20px;
   box-sizing: border-box;
   overflow: auto;
-  &.active {
-    // overflow: visible;
-  }
 
   &.inactive {
     overflow: visible;

package/dist/packages/tabs/tabs.scss

@@ -5,14 +5,13 @@
 }
 
 .nut-tabs__titles {
+  display: flex;
   box-sizing: border-box;
   height: $tabs-horizontal-titles-height;
   padding: 0 10px;
-  display: flex;
   user-select: none;
   background: $tabs-titles-background-color;
   border-radius: $tabs-titles-border-radius;
-  flex-shrink: 0;
   overflow: hidden;
 
   &::-webkit-scrollbar {
@@ -20,6 +19,7 @@
     width: 0;
     background: transparent;
   }
+
   .nut-tabs__list {
     width: 100%;
     height: auto;
@@ -39,23 +39,19 @@
 .nut-tabs__titles--scrollable {
   overflow-x: auto;
   overflow-y: hidden;
-
-  .nut-tabs__titles-item {
-    width: auto;
-  }
 }
 
 .nut-tabs__titles-item {
   position: relative;
   min-width: $tabs-horizontal-titles-item-min-width;
   display: flex;
-  flex: 1;
+  flex: 1 0 auto;
+  padding: 0 10px;
   align-items: center;
   justify-content: center;
   margin: 0 $nut-tabs-title-gap;
   font-size: $tabs-titles-item-font-size;
   color: $tabs-titles-item-color;
-  overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 
@@ -139,6 +135,7 @@
     padding: 0;
     width: $tabs-vertical-titles-width;
     flex-shrink: 0;
+
     .nut-tabs__list {
       width: 100%;
       display: flex;
@@ -197,6 +194,7 @@
       overflow-x: auto;
       overflow-y: hidden;
       height: $tabs-horizontal-titles-height;
+
       .nut-tabs__list {
         width: 100%;
         display: flex;