@nutui/nutui-react 1.4.7 → 1.4.8-beta.0

package/dist/nutui.react.umd.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v1.4.7 Wed Feb 15 2023 16:22:00 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v1.4.8 Wed Feb 22 2023 16:47:33 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -1802,7 +1802,7 @@
       setColStyle(getStyle);
     }, [span, offset, gutter]);
     return /* @__PURE__ */ React__default["default"].createElement("div", {
-      className: `${colName} ${className}`,
+      className: classNames(colName, className),
       style: { ...style, ...colStyle },
       onClick: (e2) => {
         onClick && onClick(e2, "col");
@@ -2097,7 +2097,7 @@
     }, React__default["default"].createElement(
       "div",
       {
-        className: `${getClasses()} ${className}`,
+        className: classNames(getClasses(), className),
         style,
         onClick: (e2) => {
           onClick && onClick(e2, "row");
@@ -8395,15 +8395,14 @@
     safeAreaInsetBottom: false,
     className: "",
     style: {},
-    tabSwitch: () => {
-    },
-    onSwitch: () => {
+    onSwitch: (child, activeVisible) => {
     }
   };
   const Tabbar = (props) => {
     const {
       children,
       visible,
+      activeVisible,
       bottom,
       size,
       activeColor,
@@ -8411,17 +8410,23 @@
       safeAreaInsetBottom,
       className,
       style,
-      tabSwitch,
       onSwitch
     } = {
       ...defaultProps$15,
       ...props
     };
     const b = cn("tabbar");
-    const [selectIndex, setSelectIndex] = React.useState(visible);
+    const [selectIndex, setSelectIndex] = React.useState(activeVisible || visible);
     const handleClick2 = (idx) => {
-      setSelectIndex(idx);
+      if (!("activeVisible" in props)) {
+        setSelectIndex(idx);
+      }
     };
+    React.useEffect(() => {
+      if (activeVisible !== void 0) {
+        setSelectIndex(activeVisible);
+      }
+    }, [activeVisible]);
     return /* @__PURE__ */ React__default["default"].createElement("div", {
       className: [
         `${b()}`,
@@ -8443,7 +8448,6 @@
         size,
         handleClick: () => {
           handleClick2(idx);
-          tabSwitch(child, idx);
           onSwitch(child, idx);
         }
       };
@@ -8533,14 +8537,21 @@
     disabled: false
   };
   const TabPane = (props) => {
-    const { children, paneKey, activeKey, autoHeightClassName, className } = {
+    const {
+      children,
+      paneKey,
+      activeKey,
+      autoHeightClassName,
+      className,
+      disabled
+    } = {
       ...defaultProps$13,
       ...props
     };
     const b = cn("tabpane");
     const classes = classNames(
       {
-        active: paneKey === activeKey
+        active: !disabled && paneKey === activeKey
       },
       b(""),
       autoHeightClassName,
@@ -8548,7 +8559,7 @@
     );
     return /* @__PURE__ */ React__default["default"].createElement("div", {
       className: classes
-    }, children);
+    }, !disabled && children);
   };
   class Title {
     constructor() {
@@ -8571,6 +8582,7 @@
     animatedTime: 300,
     titleGutter: 0,
     size: "normal",
+    leftAlign: false,
     autoHeight: false
   };
   const pxCheck$1 = (value) => {
@@ -8589,6 +8601,7 @@
       animatedTime,
       titleGutter,
       size,
+      leftAlign,
       titleNode,
       children,
       onClick,
@@ -8608,15 +8621,15 @@
       let currentIndex = 0;
       titles.current = [];
       React__default["default"].Children.forEach(children, (child, idx) => {
-        var _a, _b, _c, _d, _e;
         if (!React__default["default"].isValidElement(child)) {
           return null;
         }
         const title = new Title();
-        if (((_a = child.props) == null ? void 0 : _a.title) || ((_b = child.props) == null ? void 0 : _b.paneKey)) {
-          title.title = (_c = child.props) == null ? void 0 : _c.title;
-          title.paneKey = ((_d = child.props) == null ? void 0 : _d.paneKey) || idx;
-          title.disabled = (_e = child.props) == null ? void 0 : _e.disabled;
+        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.disabled = childProps == null ? void 0 : childProps.disabled;
           title.index = idx;
           if (title.paneKey === value) {
             currentIndex = idx;
@@ -8669,8 +8682,9 @@
         onClick: (e2) => tabChange(item),
         className: classNames(
           {
-            active: String(item.paneKey) === String(value),
-            disabled: item.disabled
+            active: !item.disabled && String(item.paneKey) === String(value),
+            disabled: item.disabled,
+            "nut-tabs__titles-item-left-align": leftAlign
           },
           `${b("")}__titles-item`
         ),
@@ -9573,11 +9587,12 @@
     },
     activeColor: "#fa2c19",
     checked: false,
+    checkedIcon: "checklist",
     chooseItem: () => {
     }
   };
-  const InternalCascaderItem = (props) => {
-    const { data, checked, chooseItem, activeColor } = {
+  const InternalCascaderItem = (props, ref) => {
+    const { data, checked, checkedIcon, chooseItem, activeColor } = {
       ...defaultProps$$,
       ...props
     };
@@ -9592,11 +9607,6 @@
     const classesTitle = classNames({
       [`${b("")}__title`]: true
     });
-    React.useEffect(() => {
-      initData();
-    }, [data]);
-    const initData = () => {
-    };
     return /* @__PURE__ */ React__default["default"].createElement("div", {
       style: { color: checked ? activeColor : "" },
       className: classes,
@@ -9611,7 +9621,7 @@
       name: "loading"
     }) : /* @__PURE__ */ React__default["default"].createElement(Icon, {
       className: `${checked ? b("icon-check") : ""}`,
-      name: "checklist"
+      name: checked ? checkedIcon : ""
     }));
   };
   const CascaderItem = React__default["default"].forwardRef(InternalCascaderItem);
@@ -9753,6 +9763,7 @@
     className: "",
     style: {},
     activeColor: "#fa2c19",
+    checkedIcon: "checklist",
     tabsColor: "",
     poppable: true,
     visible: false,
@@ -9777,7 +9788,7 @@
     },
     ...Popup.defaultProps
   };
-  const InternalCascader = (props) => {
+  const InternalCascader = (props, ref) => {
     const {
       className,
       style,
@@ -9801,7 +9812,7 @@
       onPathChange
     } = { ...defaultProps$_, ...props };
     const [tabvalue, setTabvalue] = React.useState("c1");
-    const [optiosData, setOptiosData] = React.useState([]);
+    const [optionsData, setOptionsData] = React.useState([]);
     const isLazy = () => state.configs.lazy && Boolean(state.configs.lazyLoad);
     const [state] = React.useState({
       optionsData: [],
@@ -9874,7 +9885,7 @@
         }
       ];
       syncValue();
-      setOptiosData(state.panes);
+      setOptionsData(state.panes);
     };
     const syncValue = async () => {
       const currentValue2 = state.innerValue;
@@ -9968,7 +9979,7 @@
           onChange(optionParams, pathNodes);
           onPathChange(optionParams, pathNodes);
         }
-        setOptiosData(state.panes);
+        setOptionsData(state.panes);
         close();
         return;
       }
@@ -9983,7 +9994,7 @@
           paneKey: `c${state.tabsCursor + 1}`
         });
         setTabvalue(`c${state.tabsCursor + 1}`);
-        setOptiosData(state.panes);
+        setOptionsData(state.panes);
         if (!type2) {
           const pathNodes = state.panes.map((item) => item.selectedNode);
           const optionParams = pathNodes.map((item) => item == null ? void 0 : item.value);
@@ -10000,7 +10011,7 @@
         state.panes[state.tabsCursor].selectedNode = node;
         chooseItem(node, type2);
       }
-      setOptiosData(state.panes);
+      setOptionsData(state.panes);
     };
     const renderItem = () => {
       return /* @__PURE__ */ React__default["default"].createElement("div", {
@@ -10011,7 +10022,7 @@
       }, title), /* @__PURE__ */ React__default["default"].createElement(Tabs, {
         value: tabvalue,
         titleNode: () => {
-          return optiosData.map((pane, index) => {
+          return optionsData.map((pane, index) => {
             var _a, _b;
             return /* @__PURE__ */ React__default["default"].createElement("div", {
               onClick: () => {
@@ -10028,7 +10039,7 @@
             }));
           });
         }
-      }, !state.initLoading && state.panes.length ? optiosData.map((pane) => /* @__PURE__ */ React__default["default"].createElement(TabPane, {
+      }, !state.initLoading && state.panes.length ? optionsData.map((pane) => /* @__PURE__ */ React__default["default"].createElement(TabPane, {
         key: pane.paneKey,
         paneKey: pane.paneKey
       }, /* @__PURE__ */ React__default["default"].createElement("div", {
@@ -10065,6 +10076,8 @@
     disabled: false,
     checkedValue: [],
     max: void 0,
+    textPosition: "right",
+    direction: "vertical",
     onChange: (value) => {
     },
     options: []
@@ -10079,6 +10092,8 @@
         onChange,
         checkedValue,
         max,
+        textPosition,
+        direction,
         options: options2,
         ...rest
       } = props;
@@ -10134,9 +10149,9 @@
         return (innerValue == null ? void 0 : innerValue.indexOf(child.props.label || child.children)) > -1;
       }
       function validateChecked(value) {
-        if (innerValue === null)
+        if (!innerValue)
           return false;
-        return innerValue === value;
+        return (innerValue == null ? void 0 : innerValue.indexOf(value)) > -1;
       }
       function getParentVals() {
         return innerValue;
@@ -10152,7 +10167,8 @@
             checked: childChecked,
             onChange: handleChildChange,
             getParentVals,
-            max
+            max,
+            textPosition
           });
         });
       }
@@ -10167,13 +10183,14 @@
             onChange: handleChildChange,
             ...rest2,
             max,
+            textPosition,
             getParentVals,
             checked: childChecked
           });
         });
-      }, [innerValue, options2, innerDisabled]);
+      }, [innerValue, options2, innerDisabled, max]);
       return /* @__PURE__ */ React__default["default"].createElement("div", {
-        className: `${b()} ${className || ""}`,
+        className: `${b()} nut-checkboxgroup--${props.direction} ${className || ""}`,
         ...rest
       }, (options2 == null ? void 0 : options2.length) ? renderOptionsChildren() : cloneChildren());
     }
@@ -12136,6 +12153,14 @@
           ...this.store,
           ...newStore
         };
+        this.fieldEntities.forEach((enetity) => {
+          const { name } = enetity.props;
+          Object.keys(newStore).forEach((key) => {
+            if (key === name) {
+              enetity.onStoreChange();
+            }
+          });
+        });
       };
       this.validate = () => {
         const err = [];
@@ -12159,6 +12184,7 @@
               err.push(...errors);
               this.errList.push(...errors);
             }
+            entity.onStoreChange();
           });
         });
         return err;
@@ -12179,6 +12205,10 @@
         }
       };
       this.resetFields = () => {
+        this.errList.length = 0;
+        this.fieldEntities.forEach((enetity) => {
+          enetity.onStoreChange();
+        });
       };
       this.getForm = () => {
         return {
@@ -12186,6 +12216,7 @@
           registerField: this.registerField,
           getFieldValue: this.getFieldValue,
           setFieldsValue: this.setFieldsValue,
+          resetFields: this.resetFields,
           submit: this.submit,
           store: this.store,
           errList: this.errList,
@@ -12228,17 +12259,19 @@
   class FormItem extends React__default["default"].Component {
     constructor() {
       super(...arguments);
+      this.isInitialValue = false;
       this.getControlled = (children) => {
         var _a;
         const { getFieldValue, setFieldsValue } = this.context;
         const { name } = this.props;
         const type2 = children.type.NAME;
         const defaultvalue = this.props.initialValue || ((_a = children.props) == null ? void 0 : _a.defaultValue);
-        if (defaultvalue) {
+        if (defaultvalue && !this.isInitialValue) {
           setFieldsValue({ [name]: defaultvalue });
+          this.isInitialValue = true;
         }
         return {
-          value: getFieldValue(name),
+          defaultValue: getFieldValue(name),
           onChange: (event) => {
             const originOnChange = children.props.onChange;
             if (originOnChange) {
@@ -12255,6 +12288,7 @@
         };
       };
       this.onStoreChange = () => {
+        this.forceUpdate();
       };
       this.renderLayout = (childNode) => {
         var _a, _b;
@@ -12318,7 +12352,7 @@
       }
       const returnChildNode = React__default["default"].cloneElement(
         restCNode,
-        this.getControlled(c)
+        this.getControlled(restCNode)
       );
       return this.renderLayout(returnChildNode);
     }
@@ -12350,14 +12384,20 @@
       onFinishFailed,
       labelPosition,
       starPositon,
+      form,
       ...rest
     } = {
       ...defaultProps$V,
       ...props
     };
-    const [formInstance] = useForm();
+    let formInstance = {};
+    if (Object.keys(form).length !== 0) {
+      formInstance = form;
+    } else {
+      [formInstance] = useForm();
+    }
     formInstance.starPositon = starPositon;
-    const { setCallback, submit } = formInstance;
+    const { setCallback, submit, resetFields } = formInstance;
     setCallback({
       onFinish,
       onFinishFailed
@@ -12368,6 +12408,10 @@
       onSubmit: (e2) => {
         e2.preventDefault();
         submit();
+      },
+      onReset: (e2) => {
+        e2.preventDefault();
+        resetFields();
       }
     }, /* @__PURE__ */ React__default["default"].createElement(CellGroup, null, /* @__PURE__ */ React__default["default"].createElement(FormItemContext.Provider, {
       value: formInstance
@@ -12376,6 +12420,7 @@
   Form.defaultProps = defaultProps$V;
   Form.displayName = "NutForm";
   Form.Item = FormItem;
+  Form.useForm = useForm;
   function trimExtraChar(value, char, regExp) {
     const index = value.indexOf(char);
     if (index === -1) {
@@ -12786,16 +12831,14 @@
     const addAllow = (value = inputValue) => {
       if (value || typeof value === "number") {
         return value < Number(max) && !disabled;
-      } else {
-        return false;
       }
+      return false;
     };
     const reduceAllow = (value = inputValue) => {
       if (value || typeof value === "number") {
         return value > Number(min) && !disabled;
-      } else {
-        return false;
       }
+      return false;
     };
     const iconMinusClasses = classNames("nut-inputnumber__icon", {
       "nut-inputnumber__icon--disabled": !reduceAllow()
@@ -12882,6 +12925,8 @@
       className: classes,
       style: styles,
       ...restProps
+    }, /* @__PURE__ */ React__default["default"].createElement("div", {
+      className: "nut-input-minus"
     }, /* @__PURE__ */ React__default["default"].createElement(Icon, {
       classPrefix: iconClassPrefix,
       fontClassName: iconFontClassName,
@@ -12889,7 +12934,7 @@
       size: buttonSize,
       name: "minus",
       onClick: reduceNumber
-    }), /* @__PURE__ */ React__default["default"].createElement("input", {
+    })), /* @__PURE__ */ React__default["default"].createElement("input", {
       type: "number",
       min,
       max,
@@ -12900,14 +12945,16 @@
       onInput: changeValue,
       onBlur: burValue,
       onFocus: focusValue
-    }), /* @__PURE__ */ React__default["default"].createElement(Icon, {
+    }), /* @__PURE__ */ React__default["default"].createElement("div", {
+      className: "nut-input-add"
+    }, /* @__PURE__ */ React__default["default"].createElement(Icon, {
       classPrefix: iconClassPrefix,
       fontClassName: iconFontClassName,
       className: iconAddClasses,
       size: buttonSize,
       name: "plus",
       onClick: addNumber
-    }));
+    })));
   };
   InputNumber.defaultProps = defaultProps$T;
   InputNumber.displayName = "NutInputNumber";
@@ -14253,6 +14300,7 @@
     closeOnClickOverlay: true,
     length: 6,
     className: "",
+    autoFocus: false,
     onChange: (value) => {
     },
     onOk: (value) => {
@@ -14288,6 +14336,7 @@
       onComplete,
       iconClassPrefix,
       iconFontClassName,
+      autoFocus,
       ...reset
     } = props;
     const b = cn("shortpassword");
@@ -14372,6 +14421,7 @@
       style: systemStyle(),
       maxLength: 6,
       value: inputValue,
+      autoFocus,
       onChange: (e2) => changeValue(e2)
     }), /* @__PURE__ */ React__default["default"].createElement("div", {
       className: b("input-site")
@@ -15450,9 +15500,20 @@
   DialogWrap.displayName = "NutDialogWrap";
   const DialogWrapper = (props) => {
     const { visible, lockScroll } = props;
-    if (lockScroll && !visible && document.body.classList.value.includes("nut-overflow-hidden")) {
-      document.body.classList.remove("nut-overflow-hidden");
-    }
+    React.useEffect(() => {
+      if (lockScroll && visible) {
+        document.body.classList.add("nut-overflow-hidden");
+      } else {
+        document.body.classList.remove("nut-overflow-hidden");
+      }
+    }, [visible]);
+    React.useEffect(() => {
+      return () => {
+        if (document.body.classList.value.includes("nut-overflow-hidden")) {
+          document.body.classList.remove("nut-overflow-hidden");
+        }
+      };
+    }, []);
     return /* @__PURE__ */ React__default["default"].createElement("div", {
       style: { display: visible ? "block" : "none" }
     }, /* @__PURE__ */ React__default["default"].createElement(DialogWrap, {
@@ -15482,13 +15543,13 @@
   function confirm(config2, renderFunc) {
     const div = document.createElement("div");
     document.body.appendChild(div);
-    function render2(props) {
-      ReactDOM__default["default"].render(/* @__PURE__ */ React__default["default"].createElement(ConfirmDialog, {
+    function render$1(props) {
+      render(/* @__PURE__ */ React__default["default"].createElement(ConfirmDialog, {
         ...props,
         onCancel
       }), div);
     }
-    const renderFunction = renderFunc || render2;
+    const renderFunction = renderFunc || render$1;
     let dialogConfig = {
       ...config2,
       visible: false
@@ -16483,6 +16544,7 @@
   Swipe.defaultProps = defaultProps$C;
   Swipe.displayName = "NutSwipe";
   const defaultProps$B = {
+    ...ComponentDefaults,
     isAsync: false,
     checked: false,
     disable: false,
@@ -17087,6 +17149,7 @@
   AvatarGroup.displayName = "NutAvatarGroup";
   const defaultProps$u = {
     ...ComponentDefaults,
+    className: "",
     value: "",
     dot: false,
     max: 1e4,
@@ -17856,12 +17919,14 @@
       ref: root2
     }, /* @__PURE__ */ React__default["default"].createElement("div", null, !exceeded ? content : null, exceeded && !expanded ? /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, (_a = ellipsis.current) == null ? void 0 : _a.leading, expandText ? /* @__PURE__ */ React__default["default"].createElement("span", {
       className: "nut-ellipsis-text",
-      onClick: () => {
+      onClick: (e2) => {
+        e2.stopPropagation();
         clickHandle(1);
       }
     }, expandText) : null, (_b = ellipsis.current) == null ? void 0 : _b.tailing) : null, exceeded && expanded ? /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, content, expandText ? /* @__PURE__ */ React__default["default"].createElement("span", {
       className: "nut-ellipsis-text",
-      onClick: () => {
+      onClick: (e2) => {
+        e2.stopPropagation();
         clickHandle(2);
       }
     }, collapseText) : null) : null));
@@ -19285,7 +19350,7 @@
       style: getStyle()
     }, /* @__PURE__ */ React__default["default"].createElement("div", {
       className: `${popoverArrow}`
-    }), Array.isArray(children) ? children[1] : "", list.map((item, i) => {
+    }), Array.isArray(children) ? children[1] : "", /* @__PURE__ */ React__default["default"].createElement("div", null, list.map((item, i) => {
       return /* @__PURE__ */ React__default["default"].createElement("div", {
         key: item.name,
         className: `popover-menu-item ${item.disabled ? "disabled" : ""}`,
@@ -19300,7 +19365,7 @@
       }) : "", /* @__PURE__ */ React__default["default"].createElement("div", {
         className: "popover-menu-item-name"
       }, item.name));
-    })) : null))), visible ? /* @__PURE__ */ React__default["default"].createElement(Overlay, {
+    }))) : null))), visible ? /* @__PURE__ */ React__default["default"].createElement(Overlay, {
       visible,
       onClick: (e2) => handleClick2(e2),
       style: { background: "transparent" }
@@ -20898,7 +20963,7 @@
     barrageList: [],
     frequency: 500,
     loop: true,
-    speeds: 2e3,
+    speeds: 3e3,
     rows: 3,
     top: 10
   };
@@ -20926,26 +20991,40 @@
     React.useImperativeHandle(ref, () => ({
       add: (word) => {
         const _index = index.current % barrageList.length;
-        barrageList.splice(_index, 0, word);
+        if (!loop2 && index.current === barrageList.length) {
+          barrageList.splice(barrageList.length, 0, word);
+        } else {
+          barrageList.splice(_index, 0, word);
+        }
       }
     }));
     React.useEffect(() => {
       if (barrageBody.current) {
         barrageCWidth.current = barrageBody.current.offsetWidth;
-        run();
       }
+      setTimeout(() => {
+        var _a;
+        (_a = barrageBody.current) == null ? void 0 : _a.style.setProperty(
+          "--move-distance",
+          `-${barrageCWidth.current}px`
+        );
+        index.current = 0;
+        run();
+      }, 300);
       return () => {
         clearInterval(timer.current);
       };
     }, [barrageList]);
     const run = () => {
       clearInterval(timer.current);
-      timer.current = window.setInterval(() => {
+      timer.current = window.setTimeout(() => {
         play();
-        run();
       }, frequency);
     };
     const play = () => {
+      if (!loop2 && index.current >= barrageList.length) {
+        return;
+      }
       const _index = loop2 ? index.current % barrageList.length : index.current;
       const el = document.createElement(`div`);
       el.innerHTML = barrageList[_index];
@@ -20957,12 +21036,11 @@
       el.style.animationDuration = `${speeds}ms`;
       el.style.top = `${_index % rows * (height + top) + 20}px`;
       el.style.width = `${width}px`;
-      el.style.setProperty("--move-distance", `-${barrageCWidth.current}px`);
-      el.dataset.index = `${_index}`;
       el.addEventListener("animationend", () => {
         barrageContainer.current.removeChild(el);
       });
       index.current++;
+      run();
     };
     return /* @__PURE__ */ React__default["default"].createElement("div", {
       className: classes,