@nutui/nutui-react-taro 1.4.13 → 1.4.14

package/dist/nutui.react.mjs

@@ -5,14 +5,14 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 /*!
-* @nutui/nutui-react-taro v1.4.13 Wed Mar 29 2023 16:05:15 GMT+0800 (China Standard Time)
+* @nutui/nutui-react-taro v1.4.14 Thu Apr 06 2023 15:50:10 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
 import * as React from "react";
 import React__default, { useCallback, useState, useEffect, createContext, useMemo, useContext, useRef, forwardRef, useImperativeHandle, useLayoutEffect, Component, memo } from "react";
 import Taro, { redirectTo, navigateTo, getEnv, usePageScroll, getSystemInfoSync, nextTick, createSelectorQuery, uploadFile, chooseMedia, chooseImage, pageScrollTo, useReady, createInnerAudioContext, getSystemInfo, createOffscreenCanvas, canvasToTempFilePath } from "@tarojs/taro";
-import { View, ScrollView, Image as Image$2 } from "@tarojs/components";
+import { View, ScrollView, PickerView, PickerViewColumn, Image as Image$2 } from "@tarojs/components";
 import ReactDOM, { createPortal, unstable_batchedUpdates } from "react-dom";
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 var classnameExports = {};
@@ -3282,6 +3282,7 @@ const GridItem = (props) => {
     direction,
     iconClassPrefix,
     iconFontClassName,
+    className,
     onClick,
     ...rest
   } = {
@@ -3289,6 +3290,7 @@ const GridItem = (props) => {
     ...props
   };
   const b2 = cn("grid-item");
+  const classes = classNames(b2(), className);
   const context = useContext(GridContext);
   const pxCheck2 = (value) => {
     return Number.isNaN(Number(value)) ? String(value) : `${value}px`;
@@ -3344,16 +3346,25 @@ const GridItem = (props) => {
       index
     );
   };
-  return /* @__PURE__ */ React__default.createElement("div", { className: b2(), style: rootStyle(), ...rest, onClick: handleClick }, /* @__PURE__ */ React__default.createElement("div", { className: contentClass() }, icon && isIconName() ? /* @__PURE__ */ React__default.createElement(
-    Icon$1,
+  return /* @__PURE__ */ React__default.createElement(
+    "div",
     {
-      classPrefix: iconClassPrefix,
-      fontClassName: iconFontClassName,
-      name: icon,
-      size: iconSize || parentIconSize,
-      color: iconColor || parentIconColor
-    }
-  ) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, icon), text && /* @__PURE__ */ React__default.createElement("div", { className: "nut-grid-item__text", style: { fontSize, color } }, text), children && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, children)));
+      className: classes,
+      style: rootStyle(),
+      ...rest,
+      onClick: handleClick
+    },
+    /* @__PURE__ */ React__default.createElement("div", { className: contentClass() }, icon && isIconName() ? /* @__PURE__ */ React__default.createElement(
+      Icon$1,
+      {
+        classPrefix: iconClassPrefix,
+        fontClassName: iconFontClassName,
+        name: icon,
+        size: iconSize || parentIconSize,
+        color: iconColor || parentIconColor
+      }
+    ) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, icon), text && /* @__PURE__ */ React__default.createElement("div", { className: "nut-grid-item__text", style: { fontSize, color } }, text), children && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, children))
+  );
 };
 GridItem.defaultProps = defaultProps$1l;
 GridItem.displayName = "NutGridItem";
@@ -4871,7 +4882,7 @@ const Tabs = (props) => {
       const childProps = child == null ? void 0 : child.props;
       if ((childProps == null ? void 0 : childProps.title) || (childProps == null ? void 0 : childProps.paneKey)) {
         title.title = childProps == null ? void 0 : childProps.title;
-        title.paneKey = (childProps == null ? void 0 : childProps.paneKey) || idx;
+        title.paneKey = getPaneKey(childProps == null ? void 0 : childProps.paneKey, idx);
         title.disabled = childProps == null ? void 0 : childProps.disabled;
         title.index = idx;
         if (title.paneKey === value) {
@@ -4905,6 +4916,9 @@ const Tabs = (props) => {
     transform: direction === "horizontal" ? `translate3d(-${index * 100}%, 0, 0)` : `translate3d( 0,-${index * 100}%, 0)`,
     transitionDuration: `${animatedTime}ms`
   };
+  const getPaneKey = (paneKey, index2) => {
+    return typeof paneKey === "string" ? paneKey : String(paneKey || index2);
+  };
   const tabChange = (item, index2) => {
     onClick && onClick(item);
     if (item.disabled) {
@@ -4974,7 +4988,7 @@ const Tabs = (props) => {
       ...child.props,
       activeKey: value
     };
-    if (String(value) !== String(((_a = child.props) == null ? void 0 : _a.paneKey) || idx) && autoHeight) {
+    if (String(value) !== getPaneKey((_a = child.props) == null ? void 0 : _a.paneKey, idx) && autoHeight) {
       childProps = {
         ...childProps,
         autoHeightClassName: "inactive"
@@ -4999,7 +5013,7 @@ const Utils = {
    * @return {String}
    */
   getWhatDay(year, month, day) {
-    const date = /* @__PURE__ */ new Date(`${year}/${month}/${day}`);
+    const date = new Date(`${year}/${month}/${day}`);
     const index = date.getDay();
     const dayNames = [
       "星期日",
@@ -5017,7 +5031,7 @@ const Utils = {
    * @return {Number}
    */
   getMonthPreDay(year, month) {
-    const date = /* @__PURE__ */ new Date(`${year}/${month}/01`);
+    const date = new Date(`${year}/${month}/01`);
     let day = date.getDay();
     if (day == 0) {
       day = 7;
@@ -5074,7 +5088,7 @@ const Utils = {
    */
   getDay(i) {
     i = i || 0;
-    let date = /* @__PURE__ */ new Date();
+    let date = new Date();
     const diff = i * (1e3 * 60 * 60 * 24);
     date = new Date(date.getTime() + diff);
     return this.date2Str(date);
@@ -5266,7 +5280,7 @@ const CalendarItem = React__default.forwardRef((props, ref) => {
   };
   const isCurrDay = (month, day) => {
     const date = `${month.curData[0]}-${month.curData[1]}-${day}`;
-    return Utils.isEqual(date, Utils.date2Str(/* @__PURE__ */ new Date()));
+    return Utils.isEqual(date, Utils.date2Str(new Date()));
   };
   const confirm = () => {
     const { type: type2 } = props;
@@ -5602,8 +5616,8 @@ const CalendarItem = React__default.forwardRef((props, ref) => {
         }
       });
     } else {
-      const currentYear2 = (/* @__PURE__ */ new Date()).getFullYear();
-      const currentMonth = (/* @__PURE__ */ new Date()).getMonth() + 1;
+      const currentYear2 = new Date().getFullYear();
+      const currentMonth = new Date().getMonth() + 1;
       const currentYearMonthIndex = state.monthsData.findIndex((item) => {
         return +item.curData[0] === currentYear2 && +item.curData[1] === currentMonth;
       });
@@ -6724,7 +6738,7 @@ const InternalPickerSlot = (props, ref) => {
   const rotation = 20;
   const moving = useRef(false);
   let timer;
-  const listbox = useRef(null);
+  const listRef = useRef(null);
   const rollerRef = useRef(null);
   const pickerSlotRef = useRef(null);
   const [startTime, setStartTime] = useState(0);
@@ -6847,7 +6861,7 @@ const InternalPickerSlot = (props, ref) => {
     }
   };
   const getReference = async () => {
-    const refe = await getRectByTaro(listbox == null ? void 0 : listbox.current);
+    const refe = await getRectByTaro(listRef == null ? void 0 : listRef.current);
     lineSpacing.current = refe.height ? refe.height : 36;
     modifyStatus(true);
   };
@@ -6930,7 +6944,7 @@ const InternalPickerSlot = (props, ref) => {
       })
     ),
     /* @__PURE__ */ React__default.createElement("div", { className: "nut-picker-mask" }),
-    /* @__PURE__ */ React__default.createElement("div", { className: "nut-picker-indicator", ref: listbox })
+    /* @__PURE__ */ React__default.createElement("div", { className: "nut-picker-indicator", ref: listRef })
   );
 };
 const PickerSlot = React__default.forwardRef(InternalPickerSlot);
@@ -6973,44 +6987,65 @@ const InternalPicker = (props, ref) => {
   const [columnsList, setColumnsList] = useState([]);
   const b2 = cn("picker");
   const isConfirmEvent = useRef(false);
-  useEffect(() => {
-    if (defaultValueData && defaultValueData.length !== 0 && defaultValueData.toString() !== chooseValueData.toString()) {
-      const data = [...defaultValueData];
-      setchooseValueData(data);
-      setColumnsList(normalListData());
+  const formatCascade = (columns, values) => {
+    const formatted = [];
+    let cursor = {
+      text: "",
+      value: "",
+      children: columns
+    };
+    let columnIndex2 = 0;
+    while (cursor && cursor.children) {
+      const options = cursor.children;
+      const value = values[columnIndex2];
+      let index = options.findIndex(
+        (columnItem) => columnItem.value === value
+      );
+      if (index === -1)
+        index = 0;
+      cursor = cursor.children[index];
+      columnIndex2++;
+      formatted.push(options);
     }
-  }, [defaultValueData]);
-  useEffect(() => {
-    onChange && onChange(columnIndex, chooseValueData, selectedOptions());
-    if (isConfirmEvent.current) {
-      isConfirmEvent.current = false;
-      onConfirm && onConfirm(chooseValueData, selectedOptions());
+    return formatted;
+  };
+  const columnsType = () => {
+    const firstColumn = listData[0];
+    if (firstColumn) {
+      if (Array.isArray(firstColumn)) {
+        return "multiple";
+      }
+      if ("children" in firstColumn) {
+        return "cascade";
+      }
     }
-  }, [chooseValueData]);
+    return "single";
+  };
+  const normalListData = () => {
+    const type = columnsType();
+    switch (type) {
+      case "multiple":
+        return listData;
+      case "cascade":
+        return formatCascade(listData, chooseValueData);
+      default:
+        return [listData];
+    }
+  };
+  const init = () => {
+    const normalData = normalListData();
+    setColumnsList(normalData);
+  };
   useEffect(() => {
     init();
   }, [listData]);
-  const closeActionSheet = () => {
-    onClose && onClose(chooseValueData, selectedOptions());
-    onCloseUpdate && onCloseUpdate(chooseValueData, selectedOptions(), pickerRef);
-  };
-  const confirm = () => {
-    let movings = false;
-    refs.forEach((_ref) => {
-      if (_ref.moving)
-        movings = true;
-      _ref.stopMomentum();
-    });
-    if (movings) {
-      isConfirmEvent.current = true;
-    } else {
-      onConfirm && onConfirm(chooseValueData, selectedOptions());
+  useEffect(() => {
+    if (defaultValueData && defaultValueData.length !== 0 && defaultValueData.toString() !== chooseValueData.toString() && !currentValue2.length) {
+      const data = [...defaultValueData];
+      setchooseValueData(data);
+      setColumnsList(normalListData());
     }
-    onClose && onClose(chooseValueData, selectedOptions());
-    setTimeout(() => {
-      isConfirmEvent.current = false;
-    }, 0);
-  };
+  }, [defaultValueData]);
   const selectedOptions = () => {
     const optins = [];
     columnsList.map((column, index) => {
@@ -7027,6 +7062,18 @@ const InternalPicker = (props, ref) => {
     });
     return optins;
   };
+  useEffect(() => {
+    Taro.getEnv() !== "WEB" && setCurrentValue(defaultValuesConvert());
+    onChange && onChange(columnIndex, chooseValueData, selectedOptions());
+    if (isConfirmEvent.current) {
+      isConfirmEvent.current = false;
+      onConfirm && onConfirm(chooseValueData, selectedOptions());
+    }
+  }, [chooseValueData]);
+  const closeActionSheet = () => {
+    onClose && onClose(chooseValueData, selectedOptions());
+    onCloseUpdate && onCloseUpdate(chooseValueData, selectedOptions(), pickerRef);
+  };
   const chooseItem = (option, columnIndex2) => {
     if (option && Object.keys(option).length) {
       if (chooseValueData[columnIndex2] !== option.value) {
@@ -7039,8 +7086,7 @@ const InternalPicker = (props, ref) => {
             chooseValueData[index + 1] = cursor.children[0].value;
             setchooseValueData([...chooseValueData]);
             index++;
-            const cc = cursor.children[0];
-            cursor = cc;
+            cursor = cursor.children[0];
           }
           if (cursor && cursor.children) {
             chooseValueData[index + 1] = "";
@@ -7061,65 +7107,68 @@ const InternalPicker = (props, ref) => {
       }
     }
   };
-  const normalListData = () => {
-    const type = columnsType();
-    switch (type) {
-      case "multiple":
-        return listData;
-      case "cascade":
-        return formatCascade(listData, chooseValueData);
-      default:
-        return [listData];
+  const confirm = () => {
+    let movings = false;
+    refs.forEach((_ref) => {
+      if (_ref.moving)
+        movings = true;
+      _ref.stopMomentum();
+    });
+    if (movings) {
+      isConfirmEvent.current = true;
+    } else {
+      onConfirm && onConfirm(chooseValueData, selectedOptions());
     }
+    onClose && onClose(chooseValueData, selectedOptions());
+    setTimeout(() => {
+      isConfirmEvent.current = false;
+    }, 0);
   };
-  const columnsType = () => {
-    const firstColumn = listData[0];
-    if (firstColumn) {
-      if (Array.isArray(firstColumn)) {
-        return "multiple";
-      }
-      if ("children" in firstColumn) {
-        return "cascade";
-      }
-    }
-    return "single";
+  const renderToolbar = () => {
+    return /* @__PURE__ */ React__default.createElement("div", { className: b2("control") }, /* @__PURE__ */ React__default.createElement("span", { className: b2("cancel-btn"), onClick: () => closeActionSheet() }, locale.cancel), /* @__PURE__ */ React__default.createElement("div", { className: b2("title") }, title || ""), /* @__PURE__ */ React__default.createElement("span", { className: b2("confirm-btn"), onClick: confirm }, locale.confirm));
   };
-  const formatCascade = (columns, defaultValues) => {
-    const formatted = [];
-    let cursor = {
-      text: "",
-      value: "",
-      children: columns
-    };
-    let columnIndex2 = 0;
-    while (cursor && cursor.children) {
-      const options = cursor.children;
-      const value = defaultValues[columnIndex2];
-      let index = options.findIndex(
-        (columnItem) => columnItem.value === value
-      );
-      if (index === -1)
-        index = 0;
-      cursor = cursor.children[index];
-      columnIndex2++;
-      formatted.push(options);
+  const [currentValue2, setCurrentValue] = useState([]);
+  const [pickingStatus, setPickingStatus] = useState(false);
+  const defaultValuesConvert = () => {
+    const defaultIndexs = [];
+    if (chooseValueData.length > 0) {
+      chooseValueData.forEach((value, index) => {
+        for (let i = 0; i < columnsList[index].length; i++) {
+          if (columnsList[index][i].value === value) {
+            defaultIndexs.push(i);
+            break;
+          }
+        }
+      });
+    } else if (columnsList && columnsList.length > 0) {
+      columnsList.forEach((item) => {
+        defaultIndexs.push(0);
+        item.length > 0 && chooseValueData.push(item[0].value);
+      });
     }
-    return formatted;
+    return defaultIndexs;
   };
-  const init = () => {
-    const data = [];
-    const normalData = normalListData();
-    setColumnsList(normalData);
-    normalData.length > 0 && normalData.map((item) => {
-      item[0] && data.push(item[0].value);
-      return item;
-    });
-    if (!defaultValueData && chooseValueData.length === 0) {
-      setchooseValueData([...data]);
-    }
+  const pickerStart = () => {
+    setPickingStatus(true);
   };
-  const renderToolbar = () => {
-    return /* @__PURE__ */ React__default.createElement("div", { className: b2("control") }, /* @__PURE__ */ React__default.createElement("span", { className: b2("cancel-btn"), onClick: () => closeActionSheet() }, locale.cancel), /* @__PURE__ */ React__default.createElement("div", { className: b2("title") }, title || ""), /* @__PURE__ */ React__default.createElement("span", { className: b2("confirm-btn"), onClick: confirm }, locale.confirm));
+  const pickerEnd = () => {
+    setPickingStatus(false);
+  };
+  const pickerChange = (data) => {
+    const prevDefaultValue = currentValue2;
+    let changeIndex = 0;
+    console.log("chage", data);
+    const list = data.detail.value;
+    for (let i = 0, len = list.length; i < len; i++) {
+      if (prevDefaultValue[i] !== list[i]) {
+        changeIndex = i;
+        break;
+      }
+    }
+    chooseItem(
+      columnsList[changeIndex][data.detail.value[changeIndex]],
+      changeIndex
+    );
   };
   return /* @__PURE__ */ React__default.createElement(
     Popup,
@@ -7139,7 +7188,7 @@ const InternalPicker = (props, ref) => {
         catchMove: true
       },
       renderToolbar(),
-      /* @__PURE__ */ React__default.createElement("div", { className: b2("panel"), ref: pickerRef }, columnsList == null ? void 0 : columnsList.map((item, index) => {
+      /* @__PURE__ */ React__default.createElement("div", { className: b2("panel"), ref: pickerRef }, Taro.getEnv() === "WEB" ? columnsList == null ? void 0 : columnsList.map((item, index) => {
         return /* @__PURE__ */ React__default.createElement(
           PickerSlot$1,
           {
@@ -7154,7 +7203,30 @@ const InternalPicker = (props, ref) => {
             itemShow: isVisible
           }
         );
-      }))
+      }) : /* @__PURE__ */ React__default.createElement(
+        PickerView,
+        {
+          ref: pickerRef,
+          value: currentValue2,
+          immediateChange: true,
+          onPickStart: pickerStart,
+          onChange: pickerChange,
+          onPickEnd: pickerEnd,
+          className: "picker-view-panel"
+        },
+        columnsList == null ? void 0 : columnsList.map((column, index) => {
+          return /* @__PURE__ */ React__default.createElement(PickerViewColumn, { key: `col${index}` }, column.map((item, index2) => {
+            return /* @__PURE__ */ React__default.createElement(
+              View,
+              {
+                key: item.value || index2,
+                className: "nut-picker-roller-item-title"
+              },
+              /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, item.text || item)
+            );
+          }));
+        })
+      ))
     )
   );
 };
@@ -7172,7 +7244,7 @@ const ConfigContext = createContext(null);
 const useConfig = () => {
   return useContext(ConfigContext) ?? getDefaultConfig();
 };
-const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
+const currentYear = new Date().getFullYear();
 const defaultProps$_ = {
   modelValue: null,
   visible: false,
@@ -7459,11 +7531,12 @@ const DatePicker = (props) => {
     }
   }, [currentDate]);
   return /* @__PURE__ */ React__default.createElement(
-    "div",
+    View,
     {
       className: `nut-datepicker ${className || ""}`,
       style,
-      ...rest
+      ...rest,
+      catchMove: true
     },
     listData.length > 0 && /* @__PURE__ */ React__default.createElement(
       Picker$1,
@@ -7953,7 +8026,7 @@ const Input = forwardRef((props, ref) => {
     if (maxlength && val.length > Number(maxlength)) {
       val = val.slice(0, Number(maxlength));
     }
-    updateValue(getModelValue(), "onBlur");
+    updateValue(val, "onBlur");
     onBlur && onBlur(val, event);
   };
   const handleClickInput = (event) => {
@@ -9963,6 +10036,7 @@ const TextArea = (props) => {
         onCompositionEnd: (e) => endComposing(),
         onCompositionStart: (e) => startComposing(),
         rows,
+        maxLength: maxlength < 0 ? 0 : maxlength,
         placeholder: placeholder || locale.placeholder
       }
     ),
@@ -10261,7 +10335,7 @@ class FileItem {
   constructor() {
     __publicField(this, "status", "ready");
     __publicField(this, "message", "准备中..");
-    __publicField(this, "uid", (/* @__PURE__ */ new Date()).getTime().toString());
+    __publicField(this, "uid", new Date().getTime().toString());
     __publicField(this, "name");
     __publicField(this, "url");
     __publicField(this, "type");
@@ -18340,7 +18414,7 @@ const ImagePreview = (props) => {
     const touches = event.touches;
     const events = touches[0];
     const events2 = touches[1];
-    const curTouchTime = (/* @__PURE__ */ new Date()).getTime();
+    const curTouchTime = new Date().getTime();
     if (curTouchTime - lastTouchEndTime < 300) {
       const store12 = store;
       if (store12.scale > 1) {
@@ -18394,7 +18468,7 @@ const ImagePreview = (props) => {
     }
   };
   const onTouchEnd = () => {
-    setLastTouchEndTime((/* @__PURE__ */ new Date()).getTime());
+    setLastTouchEndTime(new Date().getTime());
     const store1 = store;
     store1.moveable = false;
     if (store1.scale < 1.1 && store1.scale > 1 || store1.scale < 1) {
@@ -20829,7 +20903,7 @@ const InternalBarrage = (props, ref) => {
   const barrageListSet = useRef(barrageList);
   const barrageBody = useRef(null);
   const barrageContainer = useRef(null);
-  const timeId = useRef((/* @__PURE__ */ new Date()).getTime());
+  const timeId = useRef(new Date().getTime());
   const timer = useRef(0);
   useRef(0);
   const b2 = cn("barrage");