@nutui/nutui-react 1.4.7 → 1.4.8

package/dist/nutui.react.es.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.
 */
@@ -1775,7 +1775,7 @@ const Col = (props) => {
     setColStyle(getStyle);
   }, [span, offset, gutter]);
   return /* @__PURE__ */ React__default.createElement("div", {
-    className: `${colName} ${className}`,
+    className: classNames(colName, className),
     style: { ...style, ...colStyle },
     onClick: (e2) => {
       onClick && onClick(e2, "col");
@@ -2070,7 +2070,7 @@ const Row = (props) => {
   }, React__default.createElement(
     "div",
     {
-      className: `${getClasses()} ${className}`,
+      className: classNames(getClasses(), className),
       style,
       onClick: (e2) => {
         onClick && onClick(e2, "row");
@@ -8368,15 +8368,14 @@ const defaultProps$15 = {
   safeAreaInsetBottom: false,
   className: "",
   style: {},
-  tabSwitch: () => {
-  },
-  onSwitch: () => {
+  onSwitch: (child, activeVisible) => {
   }
 };
 const Tabbar = (props) => {
   const {
     children,
     visible,
+    activeVisible,
     bottom,
     size,
     activeColor,
@@ -8384,17 +8383,23 @@ const Tabbar = (props) => {
     safeAreaInsetBottom,
     className,
     style,
-    tabSwitch,
     onSwitch
   } = {
     ...defaultProps$15,
     ...props
   };
   const b = cn("tabbar");
-  const [selectIndex, setSelectIndex] = useState(visible);
+  const [selectIndex, setSelectIndex] = useState(activeVisible || visible);
   const handleClick2 = (idx) => {
-    setSelectIndex(idx);
+    if (!("activeVisible" in props)) {
+      setSelectIndex(idx);
+    }
   };
+  useEffect(() => {
+    if (activeVisible !== void 0) {
+      setSelectIndex(activeVisible);
+    }
+  }, [activeVisible]);
   return /* @__PURE__ */ React__default.createElement("div", {
     className: [
       `${b()}`,
@@ -8416,7 +8421,6 @@ const Tabbar = (props) => {
       size,
       handleClick: () => {
         handleClick2(idx);
-        tabSwitch(child, idx);
         onSwitch(child, idx);
       }
     };
@@ -8506,14 +8510,21 @@ const defaultProps$13 = {
   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,
@@ -8521,7 +8532,7 @@ const TabPane = (props) => {
   );
   return /* @__PURE__ */ React__default.createElement("div", {
     className: classes
-  }, children);
+  }, !disabled && children);
 };
 class Title {
   constructor() {
@@ -8544,6 +8555,7 @@ const defaultProps$12 = {
   animatedTime: 300,
   titleGutter: 0,
   size: "normal",
+  leftAlign: false,
   autoHeight: false
 };
 const pxCheck$1 = (value) => {
@@ -8562,6 +8574,7 @@ const Tabs = (props) => {
     animatedTime,
     titleGutter,
     size,
+    leftAlign,
     titleNode,
     children,
     onClick,
@@ -8581,15 +8594,15 @@ const Tabs = (props) => {
     let currentIndex = 0;
     titles.current = [];
     React__default.Children.forEach(children, (child, idx) => {
-      var _a, _b, _c, _d, _e;
       if (!React__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;
@@ -8642,8 +8655,9 @@ const Tabs = (props) => {
       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`
       ),
@@ -9546,11 +9560,12 @@ const defaultProps$$ = {
   },
   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
   };
@@ -9565,11 +9580,6 @@ const InternalCascaderItem = (props) => {
   const classesTitle = classNames({
     [`${b("")}__title`]: true
   });
-  useEffect(() => {
-    initData();
-  }, [data]);
-  const initData = () => {
-  };
   return /* @__PURE__ */ React__default.createElement("div", {
     style: { color: checked ? activeColor : "" },
     className: classes,
@@ -9584,7 +9594,7 @@ const InternalCascaderItem = (props) => {
     name: "loading"
   }) : /* @__PURE__ */ React__default.createElement(Icon, {
     className: `${checked ? b("icon-check") : ""}`,
-    name: "checklist"
+    name: checked ? checkedIcon : ""
   }));
 };
 const CascaderItem = React__default.forwardRef(InternalCascaderItem);
@@ -9726,6 +9736,7 @@ const defaultProps$_ = {
   className: "",
   style: {},
   activeColor: "#fa2c19",
+  checkedIcon: "checklist",
   tabsColor: "",
   poppable: true,
   visible: false,
@@ -9750,7 +9761,7 @@ const defaultProps$_ = {
   },
   ...Popup.defaultProps
 };
-const InternalCascader = (props) => {
+const InternalCascader = (props, ref) => {
   const {
     className,
     style,
@@ -9774,7 +9785,7 @@ const InternalCascader = (props) => {
     onPathChange
   } = { ...defaultProps$_, ...props };
   const [tabvalue, setTabvalue] = useState("c1");
-  const [optiosData, setOptiosData] = useState([]);
+  const [optionsData, setOptionsData] = useState([]);
   const isLazy = () => state.configs.lazy && Boolean(state.configs.lazyLoad);
   const [state] = useState({
     optionsData: [],
@@ -9847,7 +9858,7 @@ const InternalCascader = (props) => {
       }
     ];
     syncValue();
-    setOptiosData(state.panes);
+    setOptionsData(state.panes);
   };
   const syncValue = async () => {
     const currentValue2 = state.innerValue;
@@ -9941,7 +9952,7 @@ const InternalCascader = (props) => {
         onChange(optionParams, pathNodes);
         onPathChange(optionParams, pathNodes);
       }
-      setOptiosData(state.panes);
+      setOptionsData(state.panes);
       close();
       return;
     }
@@ -9956,7 +9967,7 @@ const InternalCascader = (props) => {
         paneKey: `c${state.tabsCursor + 1}`
       });
       setTabvalue(`c${state.tabsCursor + 1}`);
-      setOptiosData(state.panes);
+      setOptionsData(state.panes);
       if (!type4) {
         const pathNodes = state.panes.map((item) => item.selectedNode);
         const optionParams = pathNodes.map((item) => item == null ? void 0 : item.value);
@@ -9973,7 +9984,7 @@ const InternalCascader = (props) => {
       state.panes[state.tabsCursor].selectedNode = node;
       chooseItem(node, type4);
     }
-    setOptiosData(state.panes);
+    setOptionsData(state.panes);
   };
   const renderItem = () => {
     return /* @__PURE__ */ React__default.createElement("div", {
@@ -9984,7 +9995,7 @@ const InternalCascader = (props) => {
     }, title), /* @__PURE__ */ React__default.createElement(Tabs, {
       value: tabvalue,
       titleNode: () => {
-        return optiosData.map((pane, index) => {
+        return optionsData.map((pane, index) => {
           var _a, _b;
           return /* @__PURE__ */ React__default.createElement("div", {
             onClick: () => {
@@ -10001,7 +10012,7 @@ const InternalCascader = (props) => {
           }));
         });
       }
-    }, !state.initLoading && state.panes.length ? optiosData.map((pane) => /* @__PURE__ */ React__default.createElement(TabPane, {
+    }, !state.initLoading && state.panes.length ? optionsData.map((pane) => /* @__PURE__ */ React__default.createElement(TabPane, {
       key: pane.paneKey,
       paneKey: pane.paneKey
     }, /* @__PURE__ */ React__default.createElement("div", {
@@ -10038,6 +10049,8 @@ const defaultProps$Z = {
   disabled: false,
   checkedValue: [],
   max: void 0,
+  textPosition: "right",
+  direction: "vertical",
   onChange: (value) => {
   },
   options: []
@@ -10052,6 +10065,8 @@ const CheckboxGroup = React__default.forwardRef(
       onChange,
       checkedValue,
       max,
+      textPosition,
+      direction,
       options: options2,
       ...rest
     } = props;
@@ -10107,9 +10122,9 @@ const CheckboxGroup = React__default.forwardRef(
       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;
@@ -10125,7 +10140,8 @@ const CheckboxGroup = React__default.forwardRef(
           checked: childChecked,
           onChange: handleChildChange,
           getParentVals,
-          max
+          max,
+          textPosition
         });
       });
     }
@@ -10140,13 +10156,14 @@ const CheckboxGroup = React__default.forwardRef(
           onChange: handleChildChange,
           ...rest2,
           max,
+          textPosition,
           getParentVals,
           checked: childChecked
         });
       });
-    }, [innerValue, options2, innerDisabled]);
+    }, [innerValue, options2, innerDisabled, max]);
     return /* @__PURE__ */ React__default.createElement("div", {
-      className: `${b()} ${className || ""}`,
+      className: `${b()} nut-checkboxgroup--${props.direction} ${className || ""}`,
       ...rest
     }, (options2 == null ? void 0 : options2.length) ? renderOptionsChildren() : cloneChildren());
   }
@@ -12109,6 +12126,14 @@ class FormStore {
         ...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 = [];
@@ -12132,6 +12157,7 @@ class FormStore {
             err.push(...errors);
             this.errList.push(...errors);
           }
+          entity.onStoreChange();
         });
       });
       return err;
@@ -12152,6 +12178,10 @@ class FormStore {
       }
     };
     this.resetFields = () => {
+      this.errList.length = 0;
+      this.fieldEntities.forEach((enetity) => {
+        enetity.onStoreChange();
+      });
     };
     this.getForm = () => {
       return {
@@ -12159,6 +12189,7 @@ class FormStore {
         registerField: this.registerField,
         getFieldValue: this.getFieldValue,
         setFieldsValue: this.setFieldsValue,
+        resetFields: this.resetFields,
         submit: this.submit,
         store: this.store,
         errList: this.errList,
@@ -12201,17 +12232,19 @@ const defaultProps$W = {
 class FormItem extends React__default.Component {
   constructor() {
     super(...arguments);
+    this.isInitialValue = false;
     this.getControlled = (children) => {
       var _a;
       const { getFieldValue, setFieldsValue } = this.context;
       const { name } = this.props;
       const type4 = 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) {
@@ -12228,6 +12261,7 @@ class FormItem extends React__default.Component {
       };
     };
     this.onStoreChange = () => {
+      this.forceUpdate();
     };
     this.renderLayout = (childNode) => {
       var _a, _b;
@@ -12291,7 +12325,7 @@ class FormItem extends React__default.Component {
     }
     const returnChildNode = React__default.cloneElement(
       restCNode,
-      this.getControlled(c)
+      this.getControlled(restCNode)
     );
     return this.renderLayout(returnChildNode);
   }
@@ -12323,14 +12357,20 @@ const Form = (props) => {
     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
@@ -12341,6 +12381,10 @@ const Form = (props) => {
     onSubmit: (e2) => {
       e2.preventDefault();
       submit();
+    },
+    onReset: (e2) => {
+      e2.preventDefault();
+      resetFields();
     }
   }, /* @__PURE__ */ React__default.createElement(CellGroup, null, /* @__PURE__ */ React__default.createElement(FormItemContext.Provider, {
     value: formInstance
@@ -12349,6 +12393,7 @@ const Form = (props) => {
 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) {
@@ -12759,16 +12804,14 @@ const InputNumber = (props) => {
   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()
@@ -12855,6 +12898,8 @@ const InputNumber = (props) => {
     className: classes,
     style: styles,
     ...restProps
+  }, /* @__PURE__ */ React__default.createElement("div", {
+    className: "nut-input-minus"
   }, /* @__PURE__ */ React__default.createElement(Icon, {
     classPrefix: iconClassPrefix,
     fontClassName: iconFontClassName,
@@ -12862,7 +12907,7 @@ const InputNumber = (props) => {
     size: buttonSize,
     name: "minus",
     onClick: reduceNumber
-  }), /* @__PURE__ */ React__default.createElement("input", {
+  })), /* @__PURE__ */ React__default.createElement("input", {
     type: "number",
     min,
     max,
@@ -12873,14 +12918,16 @@ const InputNumber = (props) => {
     onInput: changeValue,
     onBlur: burValue,
     onFocus: focusValue
-  }), /* @__PURE__ */ React__default.createElement(Icon, {
+  }), /* @__PURE__ */ React__default.createElement("div", {
+    className: "nut-input-add"
+  }, /* @__PURE__ */ React__default.createElement(Icon, {
     classPrefix: iconClassPrefix,
     fontClassName: iconFontClassName,
     className: iconAddClasses,
     size: buttonSize,
     name: "plus",
     onClick: addNumber
-  }));
+  })));
 };
 InputNumber.defaultProps = defaultProps$T;
 InputNumber.displayName = "NutInputNumber";
@@ -14226,6 +14273,7 @@ const defaultProps$M = {
   closeOnClickOverlay: true,
   length: 6,
   className: "",
+  autoFocus: false,
   onChange: (value) => {
   },
   onOk: (value) => {
@@ -14261,6 +14309,7 @@ const ShortPassword = (props) => {
     onComplete,
     iconClassPrefix,
     iconFontClassName,
+    autoFocus,
     ...reset
   } = props;
   const b = cn("shortpassword");
@@ -14345,6 +14394,7 @@ const ShortPassword = (props) => {
     style: systemStyle(),
     maxLength: 6,
     value: inputValue,
+    autoFocus,
     onChange: (e2) => changeValue(e2)
   }), /* @__PURE__ */ React__default.createElement("div", {
     className: b("input-site")
@@ -15423,9 +15473,20 @@ const DialogWrap = (props) => {
 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");
-  }
+  useEffect(() => {
+    if (lockScroll && visible) {
+      document.body.classList.add("nut-overflow-hidden");
+    } else {
+      document.body.classList.remove("nut-overflow-hidden");
+    }
+  }, [visible]);
+  useEffect(() => {
+    return () => {
+      if (document.body.classList.value.includes("nut-overflow-hidden")) {
+        document.body.classList.remove("nut-overflow-hidden");
+      }
+    };
+  }, []);
   return /* @__PURE__ */ React__default.createElement("div", {
     style: { display: visible ? "block" : "none" }
   }, /* @__PURE__ */ React__default.createElement(DialogWrap, {
@@ -15455,13 +15516,13 @@ const normalizeConfig = (_config) => {
 function confirm(config2, renderFunc) {
   const div = document.createElement("div");
   document.body.appendChild(div);
-  function render2(props) {
-    ReactDOM__default.render(/* @__PURE__ */ React__default.createElement(ConfirmDialog, {
+  function render$1(props) {
+    render(/* @__PURE__ */ React__default.createElement(ConfirmDialog, {
       ...props,
       onCancel
     }), div);
   }
-  const renderFunction = renderFunc || render2;
+  const renderFunction = renderFunc || render$1;
   let dialogConfig = {
     ...config2,
     visible: false
@@ -16456,6 +16517,7 @@ const Swipe = forwardRef((props, instanceRef) => {
 Swipe.defaultProps = defaultProps$C;
 Swipe.displayName = "NutSwipe";
 const defaultProps$B = {
+  ...ComponentDefaults,
   isAsync: false,
   checked: false,
   disable: false,
@@ -17060,6 +17122,7 @@ AvatarGroup.defaultProps = defaultProps$v;
 AvatarGroup.displayName = "NutAvatarGroup";
 const defaultProps$u = {
   ...ComponentDefaults,
+  className: "",
   value: "",
   dot: false,
   max: 1e4,
@@ -17829,12 +17892,14 @@ const Ellipsis = (props) => {
     ref: root2
   }, /* @__PURE__ */ React__default.createElement("div", null, !exceeded ? content : null, exceeded && !expanded ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, (_a = ellipsis.current) == null ? void 0 : _a.leading, expandText ? /* @__PURE__ */ React__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.createElement(React__default.Fragment, null, content, expandText ? /* @__PURE__ */ React__default.createElement("span", {
     className: "nut-ellipsis-text",
-    onClick: () => {
+    onClick: (e2) => {
+      e2.stopPropagation();
       clickHandle(2);
     }
   }, collapseText) : null) : null));
@@ -19258,7 +19323,7 @@ const Popover = (props) => {
     style: getStyle()
   }, /* @__PURE__ */ React__default.createElement("div", {
     className: `${popoverArrow}`
-  }), Array.isArray(children) ? children[1] : "", list.map((item, i) => {
+  }), Array.isArray(children) ? children[1] : "", /* @__PURE__ */ React__default.createElement("div", null, list.map((item, i) => {
     return /* @__PURE__ */ React__default.createElement("div", {
       key: item.name,
       className: `popover-menu-item ${item.disabled ? "disabled" : ""}`,
@@ -19273,7 +19338,7 @@ const Popover = (props) => {
     }) : "", /* @__PURE__ */ React__default.createElement("div", {
       className: "popover-menu-item-name"
     }, item.name));
-  })) : null))), visible ? /* @__PURE__ */ React__default.createElement(Overlay, {
+  }))) : null))), visible ? /* @__PURE__ */ React__default.createElement(Overlay, {
     visible,
     onClick: (e2) => handleClick2(e2),
     style: { background: "transparent" }
@@ -20871,7 +20936,7 @@ const defaultProps$5 = {
   barrageList: [],
   frequency: 500,
   loop: true,
-  speeds: 2e3,
+  speeds: 3e3,
   rows: 3,
   top: 10
 };
@@ -20899,26 +20964,40 @@ const InternalBarrage = (props, ref) => {
   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);
+      }
     }
   }));
   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];
@@ -20930,12 +21009,11 @@ const InternalBarrage = (props, ref) => {
     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.createElement("div", {
     className: classes,