@nutui/nutui-react 2.4.0 → 2.4.2

package/dist/esm/Uploader.js

@@ -372,7 +372,7 @@ const InternalUploader = (props, ref) => {
       children || React__default.createElement(Button, { size: "small", type: "primary" }, "上传文件"),
       Number(maxCount) > fileList.length && React__default.createElement("input", { className: "nut-uploader-input", type: "file", capture, name, accept, disabled, multiple, onChange: fileChange })
     ),
-    React__default.createElement(Preview, Object.assign({}, {
+    React__default.createElement(Preview, {
       fileList,
       previewType,
       deletable,
@@ -380,7 +380,7 @@ const InternalUploader = (props, ref) => {
       handleItemClick,
       previewUrl,
       children
-    })),
+    }),
     Number(maxCount) > fileList.length && previewType === "picture" && !children && React__default.createElement(
       "div",
       { className: classNames("nut-uploader-upload", previewType, {

package/dist/esm/Video.js

@@ -8,6 +8,7 @@ const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { sourc
 }, options: {
   controls: true,
   muted: false,
+  // 默认不是静音
   autoplay: false,
   poster: "",
   playsinline: false,

package/dist/esm/VirtualList.js

@@ -131,7 +131,9 @@ const VirtualList = (props) => {
   const [offSetSize, setOffSetSize] = useState(containerHeight || 0);
   const [options, setOptions] = useState({
     startOffset: 0,
+    // 可视区域距离顶部的偏移量
     startIndex: 0,
+    // 可视区域开始索引
     overStart: 0,
     endIndex: 10
     // 可视区域结束索引

package/dist/esm/badge2.js

@@ -2,15 +2,17 @@ import React__default from "react";
 import classNames from "classnames";
 import { C as ComponentDefaults } from "./typings.js";
 import { useRtl } from "./ConfigProvider.js";
-const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { value: "", dot: false, max: 99, top: "4", right: "8", color: "" });
+const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { value: "", dot: false, max: 99, top: "4", right: "8", color: "", fill: "solid" });
 const Badge = (props) => {
   var _a;
   const rtl = useRtl();
-  const { className, style, value, max, children, dot, top, right, color } = Object.assign(Object.assign({}, defaultProps), props);
+  const { className, style, value, max, children, dot, top, right, color, fill } = Object.assign(Object.assign({}, defaultProps), props);
   const classPrefix = "nut-badge";
-  const classes = classNames(classPrefix, className);
+  const classes = classNames(classPrefix, className, {
+    [`${classPrefix}-${fill}`]: fill === "outline"
+  });
   function content() {
-    if (dot || typeof value === "object")
+    if (dot || typeof value === "object" || value === 0)
       return null;
     if (typeof value === "number" && typeof max === "number") {
       return max < value ? `${max}+` : `${value}`;
@@ -37,7 +39,18 @@ const Badge = (props) => {
     style2.top = `${Number(top) || parseFloat(String(top)) || 0}px`;
     const dir = rtl ? "left" : "right";
     style2[dir] = `${Number(right) || parseFloat(String(right)) || 0}px`;
-    style2.background = color;
+    if (color) {
+      if (fill === "outline") {
+        style2.color = color;
+        style2.background = "#fff";
+        if (!(color === null || color === void 0 ? void 0 : color.includes("gradient"))) {
+          style2.border = `1px solid ${color}`;
+        }
+      } else {
+        style2.color = "#fff";
+        style2.background = color;
+      }
+    }
     return style2;
   };
   return React__default.createElement(

package/dist/esm/button2.js

@@ -11,15 +11,15 @@ const Button = React__default.forwardRef((props, ref) => {
   const getStyle = useCallback(() => {
     const style2 = {};
     if (props.color) {
-      if (props.fill && (props.fill === "outline" || props.fill === "dashed")) {
+      if (props.fill === "outline" || props.fill === "dashed") {
         style2.color = color;
-        style2.background = "#fff";
         if (!(color === null || color === void 0 ? void 0 : color.includes("gradient"))) {
           style2.borderColor = color;
         }
       } else {
         style2.color = "#fff";
         style2.background = color;
+        style2.borderColor = "transparent";
       }
     }
     return style2;
@@ -35,7 +35,7 @@ const Button = React__default.forwardRef((props, ref) => {
       [`${prefixCls}-${size}`]: size,
       [`${prefixCls}-${shape}`]: shape,
       [`${prefixCls}-block`]: block,
-      [`${prefixCls}-disabled`]: disabled,
+      [`${prefixCls}-disabled`]: disabled || loading,
       [`${prefixCls}-loading`]: loading
     }, className), style: Object.assign(Object.assign({}, getStyle()), style), onClick: (e) => handleClick(e) }),
     React__default.createElement(

package/dist/esm/cascader2.js

@@ -158,6 +158,7 @@ const InternalCascader = (props, ref) => {
     ],
     tree: new Tree([], {}),
     tabsCursor: 0,
+    // 选中的tab项
     initLoading: false,
     currentProcessNode: [],
     configs: {

package/dist/esm/menuitem2.js

@@ -63,11 +63,13 @@ const MenuItem = forwardRef((props, ref) => {
   const getParentOffset = () => {
     setTimeout(() => {
       const p = parent.menuRef.current;
-      const rect = p.getBoundingClientRect();
-      setPosition({
-        height: rect.height,
-        top: rect.top
-      });
+      if (p) {
+        const rect = p.getBoundingClientRect();
+        setPosition({
+          height: rect.height,
+          top: rect.top
+        });
+      }
     });
   };
   useEffect(() => {

package/dist/esm/tabs2.js

@@ -6,9 +6,11 @@ import { C as ComponentDefaults } from "./typings.js";
 import TabPane from "./TabPane.js";
 import { r as requestAniFrame } from "./raf.js";
 import { u as usePropsValue, a as useForceUpdate } from "./use-props-value.js";
+import { a as useRtl } from "./configprovider2.js";
 const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { tabStyle: {}, activeColor: "", direction: "horizontal", activeType: "line", duration: 300, autoHeight: false });
 const classPrefix = "nut-tabs";
 const Tabs = (props) => {
+  const rtl = useRtl();
   const _a = Object.assign(Object.assign({}, defaultProps), props), { activeColor, tabStyle, direction, activeType, duration, align, title, children, onClick, onChange, className, autoHeight } = _a, rest = __rest(_a, ["activeColor", "tabStyle", "direction", "activeType", "duration", "align", "title", "children", "onClick", "onChange", "className", "autoHeight"]);
   const [value, setValue] = usePropsValue({
     value: props.value,
@@ -94,9 +96,10 @@ const Tabs = (props) => {
     background: activeType === "line" ? activeColor : ""
   };
   useEffect(() => {
-    const index = titles.current.findIndex((t) => t.value == value);
+    let index = titles.current.findIndex((t) => t.value == value);
+    index = index < 0 ? 0 : index;
     setContentStyle({
-      transform: direction === "horizontal" ? `translate3d(-${index * 100}%, 0, 0)` : `translate3d( 0,-${index * 100}%, 0)`,
+      transform: direction === "horizontal" ? `translate3d(${rtl ? "" : "-"}${index * 100}%, 0, 0)` : `translate3d( 0,-${index * 100}%, 0)`,
       transitionDuration: `${duration}ms`
     });
     setTimeout(() => {

package/dist/locales/base.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v2.4.0 Fri Mar 08 2024 14:23:07 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.4.2 Wed Mar 20 2024 20:00:21 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/en-US.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v2.4.0 Fri Mar 08 2024 14:23:07 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.4.2 Wed Mar 20 2024 20:00:21 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/id-ID.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v2.4.0 Fri Mar 08 2024 14:23:07 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.4.2 Wed Mar 20 2024 20:00:21 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/tr-TR.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v2.4.0 Fri Mar 08 2024 14:23:07 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.4.2 Wed Mar 20 2024 20:00:21 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/zh-CN.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v2.4.0 Fri Mar 08 2024 14:23:07 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.4.2 Wed Mar 20 2024 20:00:21 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/zh-TW.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v2.4.0 Fri Mar 08 2024 14:23:07 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.4.2 Wed Mar 20 2024 20:00:21 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/zh-UG.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v2.4.0 Fri Mar 08 2024 14:23:07 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.4.2 Wed Mar 20 2024 20:00:21 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/nutui.react.es.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v2.4.0 Fri Mar 08 2024 14:22:38 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.4.2 Wed Mar 20 2024 19:59:52 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -1164,15 +1164,15 @@ const Button = React__default.forwardRef(
     const getStyle = useCallback(() => {
       const style2 = {};
       if (props.color) {
-        if (props.fill && (props.fill === "outline" || props.fill === "dashed")) {
+        if (props.fill === "outline" || props.fill === "dashed") {
           style2.color = color;
-          style2.background = "#fff";
           if (!(color == null ? void 0 : color.includes("gradient"))) {
             style2.borderColor = color;
           }
         } else {
           style2.color = "#fff";
           style2.background = color;
+          style2.borderColor = "transparent";
         }
       }
       return style2;
@@ -1197,7 +1197,7 @@ const Button = React__default.forwardRef(
             [`${prefixCls$2}-${size}`]: size,
             [`${prefixCls$2}-${shape}`]: shape,
             [`${prefixCls$2}-block`]: block,
-            [`${prefixCls$2}-disabled`]: disabled,
+            [`${prefixCls$2}-disabled`]: disabled || loading,
             [`${prefixCls$2}-loading`]: loading
           },
           className
@@ -4874,13 +4874,13 @@ const Row = (props) => {
     return className2;
   };
   const getClasses = () => {
-    return `
-    ${getClass("", type4)}
-    ${getClass("justify", justify)}
-    ${getClass("align", align)}
-    ${getClass("flex", wrap)}
-    ${classPrefix$m}
-   `;
+    return classNames(
+      classPrefix$m,
+      getClass("", type4),
+      getClass("justify", justify),
+      getClass("align", align),
+      getClass("flex", wrap)
+    );
   };
   const parentRow = {
     gutter
@@ -5130,6 +5130,7 @@ const defaultProps$1i = {
   duration: 1e3
 };
 const BackTop = (props) => {
+  const rtl = useRtl();
   const {
     children,
     target,
@@ -5215,7 +5216,7 @@ const BackTop = (props) => {
     zIndex,
     ...style
   } : {
-    right: "10px",
+    [rtl ? "left" : "right"]: "10px",
     bottom: "20px",
     zIndex
   };
@@ -11113,19 +11114,33 @@ const defaultProps$1b = {
   max: 99,
   top: "4",
   right: "8",
-  color: ""
+  color: "",
+  fill: "solid"
 };
 const Badge = (props) => {
   var _a;
   const rtl = useRtl();
-  const { className, style, value, max, children, dot, top, right, color } = {
+  const {
+    className,
+    style,
+    value,
+    max,
+    children,
+    dot,
+    top,
+    right,
+    color,
+    fill
+  } = {
     ...defaultProps$1b,
     ...props
   };
   const classPrefix2 = "nut-badge";
-  const classes = classNames(classPrefix2, className);
+  const classes = classNames(classPrefix2, className, {
+    [`${classPrefix2}-${fill}`]: fill === "outline"
+  });
   function content() {
-    if (dot || typeof value === "object")
+    if (dot || typeof value === "object" || value === 0)
       return null;
     if (typeof value === "number" && typeof max === "number") {
       return max < value ? `${max}+` : `${value}`;
@@ -11157,7 +11172,18 @@ const Badge = (props) => {
     style2.top = `${Number(top) || parseFloat(String(top)) || 0}px`;
     const dir = rtl ? "left" : "right";
     style2[dir] = `${Number(right) || parseFloat(String(right)) || 0}px`;
-    style2.background = color;
+    if (color) {
+      if (fill === "outline") {
+        style2.color = color;
+        style2.background = "#fff";
+        if (!(color == null ? void 0 : color.includes("gradient"))) {
+          style2.border = `1px solid ${color}`;
+        }
+      } else {
+        style2.color = "#fff";
+        style2.background = color;
+      }
+    }
     return style2;
   };
   return /* @__PURE__ */ React__default.createElement("div", { className: classes, style }, isIcon() && /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}-icon` }, value), children, !isIcon() && /* @__PURE__ */ React__default.createElement("div", { className: contentClasses, style: getStyle() }, content()));
@@ -11328,6 +11354,7 @@ const defaultProps$17 = {
 };
 const classPrefix$j = "nut-tabs";
 const Tabs = (props) => {
+  const rtl = useRtl();
   const {
     activeColor,
     tabStyle,
@@ -11434,9 +11461,10 @@ const Tabs = (props) => {
     background: activeType === "line" ? activeColor : ""
   };
   useEffect(() => {
-    const index = titles.current.findIndex((t2) => t2.value == value);
+    let index = titles.current.findIndex((t2) => t2.value == value);
+    index = index < 0 ? 0 : index;
     setContentStyle({
-      transform: direction === "horizontal" ? `translate3d(-${index * 100}%, 0, 0)` : `translate3d( 0,-${index * 100}%, 0)`,
+      transform: direction === "horizontal" ? `translate3d(${rtl ? "" : "-"}${index * 100}%, 0, 0)` : `translate3d( 0,-${index * 100}%, 0)`,
       transitionDuration: `${duration}ms`
     });
     setTimeout(() => {
@@ -13386,14 +13414,11 @@ const CalendarCard = React__default.forwardRef((props, ref) => {
     }
     return range3 ? [convertDayToDate(range3)] : [];
   };
-  const [innerValue, setInnerValue] = useState(() => {
-    const val = value || defaultValue ? valueToRange(value || defaultValue) : [];
-    return val;
+  const [innerValue, setInnerValue] = usePropsValue({
+    value: value ? valueToRange(value) : void 0,
+    defaultValue: defaultValue ? valueToRange(defaultValue) : void 0,
+    finalValue: []
   });
-  useEffect(() => {
-    const val = value || defaultValue ? valueToRange(value || defaultValue) : [];
-    setInnerValue(val);
-  }, [value]);
   const change = (v) => {
     setInnerValue(v);
     if (type4 === "single") {
@@ -13586,7 +13611,7 @@ const CalendarCard = React__default.forwardRef((props, ref) => {
           change([day]);
         } else if (len === 1) {
           const t2 = compareDay(innerValue[0], day);
-          if (t2 === 0 || t2 === null || t2 === void 0) {
+          if (t2 === null || t2 === void 0) {
             change([]);
           } else if (t2 < 0) {
             change([innerValue[0], day]);
@@ -16772,11 +16797,13 @@ const MenuItem = forwardRef((props, ref) => {
   const getParentOffset = () => {
     setTimeout(() => {
       const p = parent.menuRef.current;
-      const rect = p.getBoundingClientRect();
-      setPosition({
-        height: rect.height,
-        top: rect.top
-      });
+      if (p) {
+        const rect = p.getBoundingClientRect();
+        setPosition({
+          height: rect.height,
+          top: rect.top
+        });
+      }
     });
   };
   useEffect(() => {
@@ -19643,9 +19670,9 @@ const Drag = (props) => {
 Drag.defaultProps = defaultProps$D;
 Drag.displayName = "NutDrag";
 const defaultStatus = {
-  empty: "https://static-ftcms.jd.com/p/files/61a9e3183985005b3958672b.png",
-  error: "https://ftcms.jd.com/p/files/61a9e33ee7dcdbcc0ce62736.png",
-  network: "https://static-ftcms.jd.com/p/files/61a9e31de7dcdbcc0ce62734.png"
+  empty: "https://storage.360buyimg.com/imgtools/30186cfda0-0d3eee40-c0ac-11ee-9382-9125782aa3b8.png",
+  error: "https://storage.360buyimg.com/imgtools/f3278d0ebb-0ce360c0-c0ac-11ee-8375-193101bb1a46.png",
+  network: "https://storage.360buyimg.com/imgtools/43c30f7e29-0d483d10-c0ac-11ee-bec4-eb4d2a09a51d.png"
 };
 const defaultProps$C = {
   ...ComponentDefaults,
@@ -19719,6 +19746,7 @@ Empty.defaultProps = defaultProps$C;
 Empty.displayName = "NutEmpty";
 const defaultProps$B = {
   ...ComponentDefaults,
+  type: "default",
   hasMore: true,
   threshold: 200,
   target: "",
@@ -19730,6 +19758,7 @@ const InfiniteLoading = (props) => {
   const { locale } = useConfig();
   const {
     children,
+    type: type4,
     hasMore,
     threshold,
     target,
@@ -19756,7 +19785,7 @@ const InfiniteLoading = (props) => {
   const refreshMaxH = useRef(0);
   const y = useRef(0);
   const distance = useRef(0);
-  const classes = classNames(classPrefix$d, className);
+  const classes = classNames(classPrefix$d, className, `${classPrefix$d}-${type4}`);
   useEffect(() => {
     var _a;
     if (target && document.getElementById(target)) {
@@ -19929,6 +19958,7 @@ const defaultProps$z = {
   wrap: false,
   leftIcon: /* @__PURE__ */ React__default.createElement(r, { width: 16, height: 16 }),
   rightIcon: null,
+  right: null,
   delay: 1,
   scrollable: null,
   speed: 50
@@ -19949,6 +19979,7 @@ const NoticeBar = (props) => {
     wrap,
     leftIcon,
     rightIcon,
+    right,
     delay,
     scrollable,
     speed,
@@ -20264,7 +20295,7 @@ const NoticeBar = (props) => {
     },
     children,
     content
-  )), closeable || rightIcon ? /* @__PURE__ */ React__default.createElement("div", { className: "nut-noticebar-box-right-icon", onClick: onClickIcon }, rightIcon || /* @__PURE__ */ React__default.createElement(r$2, { width: 12, height: 12 })) : null) : null, showNoticeBar && scrollList.current.length > 0 && isVertical ? /* @__PURE__ */ React__default.createElement(
+  )), right ? /* @__PURE__ */ React__default.createElement("div", { className: "nut-noticebar-box-right" }, right) : null, closeable || rightIcon ? /* @__PURE__ */ React__default.createElement("div", { className: "nut-noticebar-box-right-icon", onClick: onClickIcon }, rightIcon || /* @__PURE__ */ React__default.createElement(r$2, { width: 12, height: 12 })) : null) : null, showNoticeBar && scrollList.current.length > 0 && isVertical ? /* @__PURE__ */ React__default.createElement(
     "div",
     {
       className: "nut-noticebar-vertical",
@@ -20788,6 +20819,7 @@ function rubberbandIfOutOfBounds(position, min, max, dimension, constant = 0.15)
 const sleep = (time) => new Promise((resolve) => setTimeout(resolve, time));
 const defaultProps$x = {
   ...ComponentDefaults,
+  type: "default",
   pullingText: "",
   canReleaseText: "",
   refreshingText: "",
@@ -20812,6 +20844,11 @@ const PullToRefresh = (p) => {
       completeText: p.completeText || locale.pullToRefresh.completeText
     }
   };
+  const classes = classNames(
+    classPrefix2,
+    props.className,
+    `${classPrefix2}-${props.type}`
+  );
   const headHeight = props.headHeight;
   const threshold = props.threshold;
   const [status, setStatus] = useState("pulling");
@@ -20938,24 +20975,15 @@ const PullToRefresh = (p) => {
       return props.completeText;
     return "";
   };
-  return /* @__PURE__ */ React__default.createElement(
-    animated.div,
+  return /* @__PURE__ */ React__default.createElement(animated.div, { ref: elementRef, className: classes, style: props.style }, /* @__PURE__ */ React__default.createElement(animated.div, { style: springStyles, className: `${classPrefix2}-head` }, /* @__PURE__ */ React__default.createElement(
+    "div",
     {
-      ref: elementRef,
-      className: `${classPrefix2} ${props.className}`,
-      style: props.style
+      className: `${classPrefix2}-head-content`,
+      style: { height: headHeight }
     },
-    /* @__PURE__ */ React__default.createElement(animated.div, { style: springStyles, className: `${classPrefix2}-head` }, /* @__PURE__ */ React__default.createElement(
-      "div",
-      {
-        className: `${classPrefix2}-head-content`,
-        style: { height: headHeight }
-      },
-      /* @__PURE__ */ React__default.createElement("div", null, renderStatusIcon()),
-      /* @__PURE__ */ React__default.createElement("div", null, renderStatusText())
-    )),
-    /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}-content` }, props.children)
-  );
+    /* @__PURE__ */ React__default.createElement("div", null, renderStatusIcon()),
+    /* @__PURE__ */ React__default.createElement("div", null, renderStatusText())
+  )), /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}-content` }, props.children));
 };
 PullToRefresh.defaultProps = defaultProps$x;
 PullToRefresh.displayName = "NutPullToRefresh";
@@ -22768,6 +22796,7 @@ const defaultProps$h = {
   className: ""
 };
 const Swiper = React__default.forwardRef((props, ref) => {
+  const rtl = useRtl();
   const mergedProps = { ...defaultProps$h, ...props };
   const {
     children,
@@ -22978,7 +23007,7 @@ const Swiper = React__default.forwardRef((props, ref) => {
     target.style.transitionDuration = `${swiperRef.current.moving ? 0 : props.duration}ms`;
     target.style[isVertical ? "height" : "width"] = `${Number(size) * swiperItemCount}px`;
     target.style[isVertical ? "width" : "height"] = `${isVertical ? width : height}px`;
-    target.style.transform = `translate3D${!isVertical ? `(${_offset}px,0,0)` : `(0,${_offset}px,0)`}`;
+    target.style.transform = `translate3D${!isVertical ? `(${rtl ? -_offset : _offset}px,0,0)` : `(0,${_offset}px,0)`}`;
   };
   const onTouchStart = (e2) => {
     if (!props.touchable)
@@ -23037,7 +23066,7 @@ const Swiper = React__default.forwardRef((props, ref) => {
     }
     const offset2 = childOffset[index];
     if (offset2) {
-      style.transform = `translate3D${direction === "horizontal" ? `(${offset2}px,0,0)` : `(0,${offset2}px,0)`}`;
+      style.transform = `translate3D${direction === "horizontal" ? `(${rtl ? -offset2 : offset2}px,0,0)` : `(0,${offset2}px,0)`}`;
     }
     return style;
   };