@nutui/nutui-react-taro 1.4.10 → 1.4.11-beta.0

package/dist/nutui.react.mjs

@@ -5,7 +5,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 /*!
-* @nutui/nutui-react-taro v1.4.10 Wed Mar 08 2023 15:32:54 GMT+0800 (China Standard Time)
+* @nutui/nutui-react-taro v1.4.11-beta.0 Wed Mar 15 2023 15:42:11 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -5158,6 +5158,8 @@ const defaultProps$14 = {
   onUpdate: () => {
   },
   onSelected: (data) => {
+  },
+  onYearMonthChange: (data) => {
   }
 };
 const CalendarItem = React__default.forwardRef((props, ref) => {
@@ -5181,7 +5183,8 @@ const CalendarItem = React__default.forwardRef((props, ref) => {
     onBottomInfo,
     onChoose,
     onUpdate,
-    onSelected
+    onSelected,
+    onYearMonthChange
   } = { ...defaultProps$14, ...props };
   const weeks = locale.calendaritem.weekdays;
   const [yearMonthTitle, setYearMonthTitle] = useState("");
@@ -5189,6 +5192,7 @@ const CalendarItem = React__default.forwardRef((props, ref) => {
   const [translateY, setTranslateY] = useState(0);
   const [monthDefaultRange, setMonthDefaultRange] = useState([]);
   const [scrollTop, setScrollTop] = useState(0);
+  const [scrollWithAnimation, setScrollWithAnimation] = useState(false);
   const [state] = useState({
     currDate: "",
     propStartDate: "",
@@ -5464,6 +5468,14 @@ const CalendarItem = React__default.forwardRef((props, ref) => {
     }
     setMonthsData(state.monthsData);
   };
+  const setReachedYearMonthInfo = () => {
+    const currentMonthsData = state.monthsData[state.currentIndex];
+    const [year, month] = currentMonthsData.curData;
+    if (currentMonthsData.title === yearMonthTitle)
+      return;
+    onYearMonthChange && onYearMonthChange([year, month, `${year}-${month}`]);
+    setYearMonthTitle(currentMonthsData.title);
+  };
   const setDefaultRange = (monthsNum, current) => {
     let start2 = 0;
     let end = 0;
@@ -5519,7 +5531,7 @@ const CalendarItem = React__default.forwardRef((props, ref) => {
       state.currentIndex = current;
       setDefaultRange(state.monthsNum, current);
     }
-    setYearMonthTitle(state.monthsData[current].title);
+    setReachedYearMonthInfo();
   };
   const initData = () => {
     const propStartDate = props.startDate ? props.startDate : Utils.getDay(0);
@@ -5610,7 +5622,7 @@ const CalendarItem = React__default.forwardRef((props, ref) => {
     }
     setDefaultRange(monthsNum, current);
     state.currentIndex = current;
-    setYearMonthTitle(state.monthsData[state.currentIndex].title);
+    setReachedYearMonthInfo();
     if (state.defaultData.length > 0) {
       if (type === "range") {
         chooseDay(
@@ -5652,7 +5664,8 @@ const CalendarItem = React__default.forwardRef((props, ref) => {
       if (months && monthsPanel && viewArea) {
         viewHeight = months.current.clientHeight;
         monthsPanel.current.style.height = `${containerHeight}px`;
-        months.current.scrollTop = state.monthsData[state.currentIndex].cssScrollHeight;
+        setScrollTop(state.monthsData[state.currentIndex].cssScrollHeight);
+        nextTick(() => setScrollWithAnimation(true));
       }
     });
     state.avgHeight = Math.floor(containerHeight / (monthsNum + 1));
@@ -5711,7 +5724,7 @@ const CalendarItem = React__default.forwardRef((props, ref) => {
     {
       scrollTop,
       scrollY: true,
-      scrollWithAnimation: true,
+      scrollWithAnimation,
       className: "nut-calendar-content",
       onScroll: monthsViewScroll,
       ref: months
@@ -5780,6 +5793,8 @@ const defaultProps$13 = {
   onChoose: (param) => {
   },
   onSelected: (data) => {
+  },
+  onYearMonthChange: (param) => {
   }
 };
 const Calendar = React__default.forwardRef((props, ref) => {
@@ -5807,7 +5822,8 @@ const Calendar = React__default.forwardRef((props, ref) => {
     onBottomInfo,
     onClose,
     onChoose,
-    onSelected
+    onSelected,
+    onYearMonthChange
   } = { ...defaultProps$13, ...props };
   const calendarRef = useRef(null);
   const close = () => {
@@ -5827,6 +5843,9 @@ const Calendar = React__default.forwardRef((props, ref) => {
     var _a;
     (_a = calendarRef.current) == null ? void 0 : _a.scrollToDate(date);
   };
+  const yearMonthChange = (param) => {
+    onYearMonthChange && onYearMonthChange(param);
+  };
   React__default.useImperativeHandle(ref, () => ({
     scrollToDate
   }));
@@ -5854,7 +5873,8 @@ const Calendar = React__default.forwardRef((props, ref) => {
         onTopInfo,
         onBottomInfo,
         onChoose: choose,
-        onSelected: select
+        onSelected: select,
+        onYearMonthChange: yearMonthChange
       }
     );
   };
@@ -7283,6 +7303,9 @@ const DatePicker = (props) => {
       case "year-month":
         result = result.slice(0, 2);
         break;
+      case "hour-minutes":
+        result = result.slice(3, 5);
+        break;
       case "month-day":
         result = result.slice(1, 3);
         break;
@@ -9480,10 +9503,15 @@ const SearchBar = (props) => {
     ...props
   };
   const alignClass = `${align}`;
+  const forceFocus = () => {
+    const searchSelf = searchRef.current;
+    searchSelf && searchSelf.focus();
+  };
   const change = (event) => {
     const { value: value2 } = event.target;
     onChange && (onChange == null ? void 0 : onChange(value2, event));
     setValue(value2);
+    value2 === "" && forceFocus();
   };
   const focus = (event) => {
     const { value: value2 } = event.target;
@@ -9499,10 +9527,7 @@ const SearchBar = (props) => {
     setValue(props.value);
   }, [props.value]);
   useEffect(() => {
-    if (autoFocus) {
-      const searchSelf = searchRef.current;
-      searchSelf && searchSelf.focus();
-    }
+    autoFocus && forceFocus();
   }, [autoFocus]);
   const renderField = () => {
     return /* @__PURE__ */ React__default.createElement(
@@ -9614,6 +9639,7 @@ const SearchBar = (props) => {
     }
     setValue("");
     onClear && onClear(event);
+    forceFocus();
   };
   const renderRightLabel = () => {
     if (actionText) {
@@ -9750,7 +9776,6 @@ const ShortPassword = (props) => {
     const isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1;
     const isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
     let style2 = {};
-    console.log(isIOS, isAndroid);
     if (isIOS) {
       style2 = {
         paddingRight: "1200px"
@@ -9845,6 +9870,9 @@ const TextArea = (props) => {
   } = { ...defaultProps$M, ...props };
   const textareaBem = cn("textarea");
   const [inputValue, SetInputValue] = useState("");
+  const compositingRef = useRef(false);
+  const [, updateState] = React__default.useState({});
+  const forceUpdate = React__default.useCallback(() => updateState({}), []);
   useEffect(() => {
     let initValue = defaultValue;
     if (initValue && maxlength && [...initValue].length > Number(maxlength)) {
@@ -9858,10 +9886,14 @@ const TextArea = (props) => {
     if (readonly)
       return;
     const text = event.detail ? event.detail : event.target;
-    if (maxlength && [...text.value].length > Number(maxlength)) {
+    if (maxlength && [...text.value].length > Number(maxlength) && !compositingRef.current) {
       text.value = text.value.substring(0, Number(maxlength));
     }
-    SetInputValue(text.value);
+    if (text.value === inputValue) {
+      forceUpdate();
+    } else {
+      SetInputValue(text.value);
+    }
     onChange && onChange(text.value, event);
   };
   const textFocus = (event) => {
@@ -9880,6 +9912,12 @@ const TextArea = (props) => {
     onChange && onChange(text.value, event);
     onBlur && onBlur(event);
   };
+  const startComposing = () => {
+    compositingRef.current = true;
+  };
+  const endComposing = () => {
+    compositingRef.current = false;
+  };
   return /* @__PURE__ */ React__default.createElement(
     "div",
     {
@@ -9908,8 +9946,9 @@ const TextArea = (props) => {
         onFocus: (e) => {
           textFocus(e);
         },
+        onCompositionEnd: (e) => endComposing(),
+        onCompositionStart: (e) => startComposing(),
         rows,
-        maxLength: maxlength < 0 ? 0 : maxlength,
         placeholder: placeholder || locale.placeholder
       }
     ),
@@ -11321,8 +11360,8 @@ const Notify = (props) => {
   };
   cn("notify");
   const classes = classNames({
-    "popup-top": position === "top",
-    "popup-bottom": position === "bottom",
+    "nut-notify--popup-top": position === "top",
+    "nut-notify--popup-bottom": position === "bottom",
     "nut-notify": true,
     [`nut-notify--${type}`]: true
   });
@@ -17512,12 +17551,12 @@ const Ellipsis = (props) => {
   const digitReg = /^[0-9]+$/;
   const letterUpperReg = /^[A-Z]+$/;
   const letterLowerReg = /^[a-z]+$/;
-  useLayoutEffect(() => {
-    setTimeout(() => {
+  useReady(() => {
+    nextTick(() => {
       getSymbolInfo();
       getReference();
-    }, 100);
-  }, []);
+    });
+  });
   const getSymbolInfo = async () => {
     const refe = await getRectByTaro(symbolContain == null ? void 0 : symbolContain.current);
     symbolTextWidth = refe.width ? Math.ceil(refe.width) : Math.ceil(widthBase[0] * 0.7921);
@@ -19415,7 +19454,8 @@ const defaultProps$e = {
   data: [],
   bordered: true,
   striped: false,
-  noData: "无数据"
+  noData: "无数据",
+  showHeader: true
 };
 const Table = (props) => {
   const { locale } = useConfig$1();
@@ -19433,6 +19473,7 @@ const Table = (props) => {
     onSorter,
     iconClassPrefix,
     iconFontClassName,
+    showHeader,
     ...rest
   } = {
     ...defaultProps$e,
@@ -19523,7 +19564,7 @@ const Table = (props) => {
         "nut-table__main--striped": striped
       })
     },
-    /* @__PURE__ */ React__default.createElement("div", { className: "nut-table__main__head" }, /* @__PURE__ */ React__default.createElement("div", { className: "nut-table__main__head__tr" }, renderHeadCells())),
+    showHeader && /* @__PURE__ */ React__default.createElement("div", { className: "nut-table__main__head" }, /* @__PURE__ */ React__default.createElement("div", { className: "nut-table__main__head__tr" }, renderHeadCells())),
     /* @__PURE__ */ React__default.createElement("div", { className: "nut-table__main__body" }, renderBoyTrs())
   ), summary && /* @__PURE__ */ React__default.createElement("div", { className: "nut-table__summary" }, /* @__PURE__ */ React__default.createElement("span", { className: "nut-table__summary__text" }, summary)), curData.length === 0 && /* @__PURE__ */ React__default.createElement("div", { className: "nut-table__nodata" }, /* @__PURE__ */ React__default.createElement("div", { className: "nut-table__nodata" }, /* @__PURE__ */ React__default.createElement("div", { className: "nut-table__nodata__text" }, noData))));
 };

package/dist/nutui.react.umd.js

@@ -8,7 +8,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 /*!
-* @nutui/nutui-react-taro v1.4.10 Wed Mar 08 2023 15:32:54 GMT+0800 (China Standard Time)
+* @nutui/nutui-react-taro v1.4.11-beta.0 Wed Mar 15 2023 15:42:11 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -5174,6 +5174,8 @@ var __publicField = (obj, key, value) => {
     onUpdate: () => {
     },
     onSelected: (data) => {
+    },
+    onYearMonthChange: (data) => {
     }
   };
   const CalendarItem = React.forwardRef((props, ref) => {
@@ -5197,7 +5199,8 @@ var __publicField = (obj, key, value) => {
       onBottomInfo,
       onChoose,
       onUpdate,
-      onSelected
+      onSelected,
+      onYearMonthChange
     } = { ...defaultProps$14, ...props };
     const weeks = locale.calendaritem.weekdays;
     const [yearMonthTitle, setYearMonthTitle] = React.useState("");
@@ -5205,6 +5208,7 @@ var __publicField = (obj, key, value) => {
     const [translateY, setTranslateY] = React.useState(0);
     const [monthDefaultRange, setMonthDefaultRange] = React.useState([]);
     const [scrollTop, setScrollTop] = React.useState(0);
+    const [scrollWithAnimation, setScrollWithAnimation] = React.useState(false);
     const [state] = React.useState({
       currDate: "",
       propStartDate: "",
@@ -5480,6 +5484,14 @@ var __publicField = (obj, key, value) => {
       }
       setMonthsData(state.monthsData);
     };
+    const setReachedYearMonthInfo = () => {
+      const currentMonthsData = state.monthsData[state.currentIndex];
+      const [year, month] = currentMonthsData.curData;
+      if (currentMonthsData.title === yearMonthTitle)
+        return;
+      onYearMonthChange && onYearMonthChange([year, month, `${year}-${month}`]);
+      setYearMonthTitle(currentMonthsData.title);
+    };
     const setDefaultRange = (monthsNum, current) => {
       let start2 = 0;
       let end = 0;
@@ -5535,7 +5547,7 @@ var __publicField = (obj, key, value) => {
         state.currentIndex = current;
         setDefaultRange(state.monthsNum, current);
       }
-      setYearMonthTitle(state.monthsData[current].title);
+      setReachedYearMonthInfo();
     };
     const initData = () => {
       const propStartDate = props.startDate ? props.startDate : Utils.getDay(0);
@@ -5626,7 +5638,7 @@ var __publicField = (obj, key, value) => {
       }
       setDefaultRange(monthsNum, current);
       state.currentIndex = current;
-      setYearMonthTitle(state.monthsData[state.currentIndex].title);
+      setReachedYearMonthInfo();
       if (state.defaultData.length > 0) {
         if (type === "range") {
           chooseDay(
@@ -5668,7 +5680,8 @@ var __publicField = (obj, key, value) => {
         if (months && monthsPanel && viewArea) {
           viewHeight = months.current.clientHeight;
           monthsPanel.current.style.height = `${containerHeight}px`;
-          months.current.scrollTop = state.monthsData[state.currentIndex].cssScrollHeight;
+          setScrollTop(state.monthsData[state.currentIndex].cssScrollHeight);
+          Taro.nextTick(() => setScrollWithAnimation(true));
         }
       });
       state.avgHeight = Math.floor(containerHeight / (monthsNum + 1));
@@ -5727,7 +5740,7 @@ var __publicField = (obj, key, value) => {
       {
         scrollTop,
         scrollY: true,
-        scrollWithAnimation: true,
+        scrollWithAnimation,
         className: "nut-calendar-content",
         onScroll: monthsViewScroll,
         ref: months
@@ -5796,6 +5809,8 @@ var __publicField = (obj, key, value) => {
     onChoose: (param) => {
     },
     onSelected: (data) => {
+    },
+    onYearMonthChange: (param) => {
     }
   };
   const Calendar = React.forwardRef((props, ref) => {
@@ -5823,7 +5838,8 @@ var __publicField = (obj, key, value) => {
       onBottomInfo,
       onClose,
       onChoose,
-      onSelected
+      onSelected,
+      onYearMonthChange
     } = { ...defaultProps$13, ...props };
     const calendarRef = React.useRef(null);
     const close = () => {
@@ -5843,6 +5859,9 @@ var __publicField = (obj, key, value) => {
       var _a;
       (_a = calendarRef.current) == null ? void 0 : _a.scrollToDate(date);
     };
+    const yearMonthChange = (param) => {
+      onYearMonthChange && onYearMonthChange(param);
+    };
     React.useImperativeHandle(ref, () => ({
       scrollToDate
     }));
@@ -5870,7 +5889,8 @@ var __publicField = (obj, key, value) => {
           onTopInfo,
           onBottomInfo,
           onChoose: choose,
-          onSelected: select
+          onSelected: select,
+          onYearMonthChange: yearMonthChange
         }
       );
     };
@@ -7299,6 +7319,9 @@ var __publicField = (obj, key, value) => {
         case "year-month":
           result = result.slice(0, 2);
           break;
+        case "hour-minutes":
+          result = result.slice(3, 5);
+          break;
         case "month-day":
           result = result.slice(1, 3);
           break;
@@ -9496,10 +9519,15 @@ var __publicField = (obj, key, value) => {
       ...props
     };
     const alignClass = `${align}`;
+    const forceFocus = () => {
+      const searchSelf = searchRef.current;
+      searchSelf && searchSelf.focus();
+    };
     const change = (event) => {
       const { value: value2 } = event.target;
       onChange && (onChange == null ? void 0 : onChange(value2, event));
       setValue(value2);
+      value2 === "" && forceFocus();
     };
     const focus = (event) => {
       const { value: value2 } = event.target;
@@ -9515,10 +9543,7 @@ var __publicField = (obj, key, value) => {
       setValue(props.value);
     }, [props.value]);
     React.useEffect(() => {
-      if (autoFocus) {
-        const searchSelf = searchRef.current;
-        searchSelf && searchSelf.focus();
-      }
+      autoFocus && forceFocus();
     }, [autoFocus]);
     const renderField = () => {
       return /* @__PURE__ */ React.createElement(
@@ -9630,6 +9655,7 @@ var __publicField = (obj, key, value) => {
       }
       setValue("");
       onClear && onClear(event);
+      forceFocus();
     };
     const renderRightLabel = () => {
       if (actionText) {
@@ -9766,7 +9792,6 @@ var __publicField = (obj, key, value) => {
       const isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1;
       const isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
       let style2 = {};
-      console.log(isIOS, isAndroid);
       if (isIOS) {
         style2 = {
           paddingRight: "1200px"
@@ -9861,6 +9886,9 @@ var __publicField = (obj, key, value) => {
     } = { ...defaultProps$M, ...props };
     const textareaBem = cn("textarea");
     const [inputValue, SetInputValue] = React.useState("");
+    const compositingRef = React.useRef(false);
+    const [, updateState] = React.useState({});
+    const forceUpdate = React.useCallback(() => updateState({}), []);
     React.useEffect(() => {
       let initValue = defaultValue;
       if (initValue && maxlength && [...initValue].length > Number(maxlength)) {
@@ -9874,10 +9902,14 @@ var __publicField = (obj, key, value) => {
       if (readonly)
         return;
       const text = event.detail ? event.detail : event.target;
-      if (maxlength && [...text.value].length > Number(maxlength)) {
+      if (maxlength && [...text.value].length > Number(maxlength) && !compositingRef.current) {
         text.value = text.value.substring(0, Number(maxlength));
       }
-      SetInputValue(text.value);
+      if (text.value === inputValue) {
+        forceUpdate();
+      } else {
+        SetInputValue(text.value);
+      }
       onChange && onChange(text.value, event);
     };
     const textFocus = (event) => {
@@ -9896,6 +9928,12 @@ var __publicField = (obj, key, value) => {
       onChange && onChange(text.value, event);
       onBlur && onBlur(event);
     };
+    const startComposing = () => {
+      compositingRef.current = true;
+    };
+    const endComposing = () => {
+      compositingRef.current = false;
+    };
     return /* @__PURE__ */ React.createElement(
       "div",
       {
@@ -9924,8 +9962,9 @@ var __publicField = (obj, key, value) => {
           onFocus: (e) => {
             textFocus(e);
           },
+          onCompositionEnd: (e) => endComposing(),
+          onCompositionStart: (e) => startComposing(),
           rows,
-          maxLength: maxlength < 0 ? 0 : maxlength,
           placeholder: placeholder || locale.placeholder
         }
       ),
@@ -11337,8 +11376,8 @@ var __publicField = (obj, key, value) => {
     };
     cn("notify");
     const classes = classNames({
-      "popup-top": position === "top",
-      "popup-bottom": position === "bottom",
+      "nut-notify--popup-top": position === "top",
+      "nut-notify--popup-bottom": position === "bottom",
       "nut-notify": true,
       [`nut-notify--${type}`]: true
     });
@@ -17528,12 +17567,12 @@ This message will only show in development mode. It won't appear in production.
     const digitReg = /^[0-9]+$/;
     const letterUpperReg = /^[A-Z]+$/;
     const letterLowerReg = /^[a-z]+$/;
-    React.useLayoutEffect(() => {
-      setTimeout(() => {
+    Taro.useReady(() => {
+      Taro.nextTick(() => {
         getSymbolInfo();
         getReference();
-      }, 100);
-    }, []);
+      });
+    });
     const getSymbolInfo = async () => {
       const refe = await getRectByTaro(symbolContain == null ? void 0 : symbolContain.current);
       symbolTextWidth = refe.width ? Math.ceil(refe.width) : Math.ceil(widthBase[0] * 0.7921);
@@ -19431,7 +19470,8 @@ This message will only show in development mode. It won't appear in production.
     data: [],
     bordered: true,
     striped: false,
-    noData: "无数据"
+    noData: "无数据",
+    showHeader: true
   };
   const Table = (props) => {
     const { locale } = useConfig$1();
@@ -19449,6 +19489,7 @@ This message will only show in development mode. It won't appear in production.
       onSorter,
       iconClassPrefix,
       iconFontClassName,
+      showHeader,
       ...rest
     } = {
       ...defaultProps$e,
@@ -19539,7 +19580,7 @@ This message will only show in development mode. It won't appear in production.
           "nut-table__main--striped": striped
         })
       },
-      /* @__PURE__ */ React.createElement("div", { className: "nut-table__main__head" }, /* @__PURE__ */ React.createElement("div", { className: "nut-table__main__head__tr" }, renderHeadCells())),
+      showHeader && /* @__PURE__ */ React.createElement("div", { className: "nut-table__main__head" }, /* @__PURE__ */ React.createElement("div", { className: "nut-table__main__head__tr" }, renderHeadCells())),
       /* @__PURE__ */ React.createElement("div", { className: "nut-table__main__body" }, renderBoyTrs())
     ), summary && /* @__PURE__ */ React.createElement("div", { className: "nut-table__summary" }, /* @__PURE__ */ React.createElement("span", { className: "nut-table__summary__text" }, summary)), curData.length === 0 && /* @__PURE__ */ React.createElement("div", { className: "nut-table__nodata" }, /* @__PURE__ */ React.createElement("div", { className: "nut-table__nodata" }, /* @__PURE__ */ React.createElement("div", { className: "nut-table__nodata__text" }, noData))));
   };

package/dist/packages/radiogroup/radiogroup.scss

@@ -66,6 +66,7 @@
 
       &__button--active {
         border-color: $radio-label-button-border-color;
+        background-color: $radio-label-button-background;
       }
     }
   }

package/dist/packages/step/step.scss

@@ -242,7 +242,8 @@
 .nut-steps-horizontal {
   &.nut-steps-dot {
     .nut-step-line {
-      top: calc(($steps-dot-icon-width + $steps-dot-icon-border * 2) / 2);
+      top: 50%;
+      bottom: -50%;
     }
   }
 }