@nutui/nutui-react 1.3.9 → 1.3.10-beta.0

package/dist/nutui.react.es.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v1.3.9-beta.0 Wed Nov 02 2022 15:15:31 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v1.3.10-beta.0 Wed Nov 09 2022 13:40:16 GMT+0800 (China Standard Time)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
@@ -223,7 +223,9 @@ const Button = (props) => {
     classPrefix: iconClassPrefix,
     fontClassName: iconFontClassName,
     name: icon
-  }) : "", children));
+  }) : "", /* @__PURE__ */ React__default.createElement("div", {
+    className: "text"
+  }, children)));
 };
 Button.defaultProps = defaultProps$1k;
 Button.displayName = "NutButton";
@@ -3231,7 +3233,7 @@ const defaultProps$16 = {
   ...ComponentDefaults,
   dot: false,
   size: "",
-  classPrefix: "nut-icon",
+  className: "",
   tabTitle: "",
   icon: "",
   href: "",
@@ -3248,7 +3250,8 @@ const TabbarItem = (props) => {
   const {
     dot,
     size,
-    classPrefix,
+    className,
+    style,
     tabTitle,
     icon,
     href,
@@ -3278,8 +3281,9 @@ const TabbarItem = (props) => {
     }
   }, [active, history, href, to2]);
   return /* @__PURE__ */ React__default.createElement("div", {
-    className: `${b2({ active })}`,
+    className: `${b2({ active })} ${className}`,
     style: {
+      ...style,
       color: active ? activeColor : unactiveColor
     },
     onClick: () => {
@@ -4270,6 +4274,17 @@ const dragConfigResolver = _objectSpread2(_objectSpread2({}, coordinatesConfigRe
     return _objectSpread2(_objectSpread2({}, DEFAULT_DRAG_AXIS_THRESHOLD), value);
   }
 });
+function clampStateInternalMovementToBounds(state) {
+  const [ox, oy] = state.overflow;
+  const [dx, dy] = state._delta;
+  const [dirx, diry] = state._direction;
+  if (ox < 0 && dx > 0 && dirx < 0 || ox > 0 && dx < 0 && dirx > 0) {
+    state._movement[0] = state._movementBound[0];
+  }
+  if (oy < 0 && dy > 0 && diry < 0 || oy > 0 && dy < 0 && diry > 0) {
+    state._movement[1] = state._movementBound[1];
+  }
+}
 const SCALE_ANGLE_RATIO_INTENT_DEG = 30;
 const PINCH_WHEEL_RATIO = 100;
 class PinchEngine extends Engine {
@@ -4499,6 +4514,7 @@ class PinchEngine extends Engine {
     const state = this.state;
     state._delta = [-wheelValues(event)[1] / PINCH_WHEEL_RATIO * state.offset[0], 0];
     V.addTo(state._movement, state._delta);
+    clampStateInternalMovementToBounds(state);
     this.state.origin = [event.clientX, event.clientY];
     this.compute(event);
     this.emit();
@@ -4518,9 +4534,11 @@ class PinchEngine extends Engine {
       bindFunction(device, "end", this[device + "End"].bind(this));
       bindFunction(device, "cancel", this[device + "End"].bind(this));
     }
-    bindFunction("wheel", "", this.wheel.bind(this), {
-      passive: false
-    });
+    if (this.config.pinchOnWheel) {
+      bindFunction("wheel", "", this.wheel.bind(this), {
+        passive: false
+      });
+    }
   }
 }
 const pinchConfigResolver = _objectSpread2(_objectSpread2({}, commonConfigResolver), {}, {
@@ -4573,6 +4591,9 @@ const pinchConfigResolver = _objectSpread2(_objectSpread2({}, commonConfigResolv
     if (value === void 0)
       return "ctrlKey";
     return value;
+  },
+  pinchOnWheel(value = true) {
+    return value;
   }
 });
 class MoveEngine extends CoordinatesEngine {
@@ -4671,15 +4692,7 @@ class WheelEngine extends CoordinatesEngine {
     const state = this.state;
     state._delta = wheelValues(event);
     V.addTo(state._movement, state._delta);
-    const [ox, oy] = state.overflow;
-    const [dx, dy] = state._delta;
-    const [dirx, diry] = state._direction;
-    if (ox < 0 && dx > 0 && dirx < 0 || ox > 0 && dx < 0 && dirx > 0) {
-      state._movement[0] = state._movementBound[0];
-    }
-    if (oy < 0 && dy > 0 && diry < 0 || oy > 0 && dy < 0 && diry > 0) {
-      state._movement[1] = state._movementBound[1];
-    }
+    clampStateInternalMovementToBounds(state);
     this.compute(event);
     this.emit();
   }
@@ -4990,10 +5003,16 @@ class Controller$1 {
       }
       const nativeBindFunction = bindToProps(props, sharedConfig.eventOptions, !!target);
       for (const eventKey in this.nativeHandlers) {
-        nativeBindFunction(eventKey, "", (event) => this.nativeHandlers[eventKey](_objectSpread2(_objectSpread2({}, this.state.shared), {}, {
-          event,
-          args
-        })), void 0, true);
+        nativeBindFunction(
+          eventKey,
+          "",
+          (event) => this.nativeHandlers[eventKey](_objectSpread2(_objectSpread2({}, this.state.shared), {}, {
+            event,
+            args
+          })),
+          void 0,
+          true
+        );
       }
     }
     for (const handlerProp in props) {
@@ -9126,7 +9145,7 @@ const Menu = (props) => {
   }, React__default.Children.toArray(children).map((child, index) => {
     if (!child)
       return null;
-    const { disabled, title, value, direction, options: options2 } = child.props;
+    const { disabled, title, value, direction, options: options2, className: className2 } = child.props;
     const currentTitle = options2 == null ? void 0 : options2.filter(
       (option) => option.value === value
     );
@@ -9143,7 +9162,7 @@ const Menu = (props) => {
       className: `nut-menu__item ${classNames({
         active: itemShow[index],
         disabled
-      })}`,
+      })} ${className2}`,
       style: { color: itemShow[index] ? activeColor : "" },
       key: index,
       onClick: () => {
@@ -9184,7 +9203,6 @@ const MenuItem = (props) => {
   useConfig();
   const mergedProps = { ...defaultProps$Z, ...props };
   const {
-    className,
     style,
     options: options2,
     value,
@@ -9268,7 +9286,7 @@ const MenuItem = (props) => {
   return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", {
     className: `placeholder-element ${classNames({
       up: direction === "up"
-    })} ${className}`,
+    })}`,
     style: placeholderStyle(),
     onClick: () => parent.toggleItemShow(orderKey)
   }), /* @__PURE__ */ React__default.createElement(Overlay, {
@@ -10838,13 +10856,22 @@ const defaultProps$V = {
   checkedValue: [],
   max: void 0,
   onChange: (value) => {
-  }
+  },
+  options: []
 };
 const CheckboxGroup = React__default.forwardRef(
   (props, ref) => {
     const { children } = { ...defaultProps$V, ...props };
     const b2 = cn("checkboxgroup");
-    const { className, disabled, onChange, checkedValue, max, ...rest } = props;
+    const {
+      className,
+      disabled,
+      onChange,
+      checkedValue,
+      max,
+      options: options2,
+      ...rest
+    } = props;
     const [innerDisabled, setInnerDisabled] = useState(disabled);
     const [innerValue, setInnerValue] = useState(checkedValue);
     useImperativeHandle(ref, () => ({
@@ -10896,6 +10923,11 @@ const CheckboxGroup = React__default.forwardRef(
         return false;
       return (innerValue == null ? void 0 : innerValue.indexOf(child.props.label || child.children)) > -1;
     }
+    function validateChecked(value) {
+      if (innerValue === null)
+        return false;
+      return innerValue === value;
+    }
     function getParentVals() {
       return innerValue;
     }
@@ -10914,10 +10946,26 @@ const CheckboxGroup = React__default.forwardRef(
         });
       });
     }
+    const renderOptionsChildren = useCallback(() => {
+      return options2 == null ? void 0 : options2.map(({ label, value, disabled: disabled2, onChange: onChange2, ...rest2 }) => {
+        const childChecked = validateChecked(value);
+        return /* @__PURE__ */ React__default.createElement(Checkbox, {
+          key: value == null ? void 0 : value.toString(),
+          children: label,
+          label: value,
+          disabled: innerDisabled ? true : disabled2,
+          onChange: handleChildChange,
+          ...rest2,
+          max,
+          getParentVals,
+          checked: childChecked
+        });
+      });
+    }, [innerValue]);
     return /* @__PURE__ */ React__default.createElement("div", {
       className: `${b2()} ${className || ""}`,
       ...rest
-    }, cloneChildren());
+    }, (options2 == null ? void 0 : options2.length) ? renderOptionsChildren() : cloneChildren());
   }
 );
 CheckboxGroup.defaultProps = defaultProps$V;
@@ -11957,6 +12005,7 @@ function formatNumber(value, allowDot = true, allowMinus = true) {
 const defaultProps$R = {
   ...ComponentDefaults,
   type: "text",
+  name: "",
   defaultValue: "",
   placeholder: "",
   label: "",
@@ -11989,11 +12038,12 @@ const defaultProps$R = {
   slotButton: null,
   slotInput: null
 };
-const Input = (props) => {
+const Input = forwardRef((props, ref) => {
   const { locale } = useConfig();
   const {
     children,
     type,
+    name,
     defaultValue,
     placeholder,
     label,
@@ -12073,6 +12123,9 @@ const Input = (props) => {
       resetValidation();
     }
   }, [inputValue]);
+  useImperativeHandle(ref, () => {
+    return inputRef.current;
+  });
   const inputClass = useCallback(() => {
     const prefixCls = "nut-input";
     return [
@@ -12204,6 +12257,7 @@ const Input = (props) => {
       handleClickInput(e2);
     }
   }, type === "textarea" ? /* @__PURE__ */ React__default.createElement("textarea", {
+    name,
     className: "input-text",
     ref: inputRef,
     style: {
@@ -12226,6 +12280,7 @@ const Input = (props) => {
       handleInput(e2);
     }
   }) : /* @__PURE__ */ React__default.createElement("input", {
+    name,
     className: "input-text",
     ref: inputRef,
     style: { textAlign: inputAlign },
@@ -12276,7 +12331,7 @@ const Input = (props) => {
       textAlign: errorMessageAlign
     }
   }, errorMessage) : null)));
-};
+});
 Input.defaultProps = defaultProps$R;
 Input.displayName = "NutInput";
 const radioContext = {
@@ -12289,13 +12344,22 @@ const defaultProps$Q = {
   textPosition: "right",
   onChange: (value) => {
   },
-  direction: "vertical"
+  direction: "vertical",
+  options: []
 };
 const RadioGroup = React__default.forwardRef(
   (props, ref) => {
     const { children } = { ...defaultProps$Q, ...props };
     cn("RadioGroup");
-    const { className, value, onChange, textPosition, direction, ...rest } = props;
+    const {
+      className,
+      value,
+      onChange,
+      textPosition,
+      direction,
+      options: options2,
+      ...rest
+    } = props;
     const [val2State, setVal2State] = useState(value);
     useEffect(() => {
       setVal2State(value);
@@ -12305,6 +12369,11 @@ const RadioGroup = React__default.forwardRef(
         return false;
       return val2State === child.props.value;
     }
+    function validateChecked(value2) {
+      if (val2State === null)
+        return false;
+      return val2State === value2;
+    }
     function cloneChildren() {
       return React__default.Children.map(children, (child, index) => {
         const childChecked = validateChildChecked(child);
@@ -12317,6 +12386,21 @@ const RadioGroup = React__default.forwardRef(
         });
       });
     }
+    const renderOptionsChildren = useCallback(() => {
+      return options2 == null ? void 0 : options2.map(({ label, value: value2, disabled, onChange: onChange2, ...rest2 }) => {
+        const childChecked = validateChecked(value2);
+        return /* @__PURE__ */ React__default.createElement(Radio, {
+          key: value2 == null ? void 0 : value2.toString(),
+          children: label,
+          value: value2,
+          disabled,
+          onChange: onChange2,
+          ...rest2,
+          textPosition,
+          checked: childChecked
+        });
+      });
+    }, [val2State]);
     return /* @__PURE__ */ React__default.createElement(RadioContext.Provider, {
       value: {
         onChange: (val) => {
@@ -12325,9 +12409,9 @@ const RadioGroup = React__default.forwardRef(
         }
       }
     }, /* @__PURE__ */ React__default.createElement("div", {
-      className: `nut-radiogroup nut-radiogroup--${props.direction}`,
+      className: `nut-radiogroup nut-radiogroup--${props.direction} ${className || ""}`,
       ...rest
-    }, cloneChildren()));
+    }, (options2 == null ? void 0 : options2.length) ? renderOptionsChildren() : cloneChildren()));
   }
 );
 RadioGroup.defaultProps = defaultProps$Q;
@@ -16097,13 +16181,11 @@ const NoticeBar = (props) => {
       }
     }, n2 * speed);
   };
-  const go = (item) => {
-    click && click(item);
-    onClick && onClick(item);
-  };
-  const handleClickIcon = () => {
-    close && close(scrollList[0]);
-    onClose && onClose(scrollList[0]);
+  const handleClickIcon = (event) => {
+    event.stopPropagation();
+    SetShowNoticeBar(!closeMode);
+    close && close(event);
+    onClose && onClose(event);
   };
   const iconShow = () => {
     if (leftIcon === "close") {
@@ -16179,9 +16261,10 @@ const NoticeBar = (props) => {
     fontClassName: iconFontClassName,
     name: rightIcon || "close",
     color
-  })) : null) : null, scrollList.current.length > 0 && direction === "vertical" ? /* @__PURE__ */ React__default.createElement("div", {
+  })) : null) : null, showNoticeBar && scrollList.current.length > 0 && direction === "vertical" ? /* @__PURE__ */ React__default.createElement("div", {
     className: "nut-noticebar-vertical",
-    style: barStyle
+    style: barStyle,
+    onClick: handleClick2
   }, children ? /* @__PURE__ */ React__default.createElement("div", {
     className: "horseLamp_list",
     style: horseLampStyle
@@ -16194,20 +16277,17 @@ const NoticeBar = (props) => {
     return /* @__PURE__ */ React__default.createElement("li", {
       className: "horseLamp_list_item",
       style: { height },
-      key: index,
-      onClick: () => {
-        go(item);
-      }
+      key: index
     }, item);
   })), /* @__PURE__ */ React__default.createElement("div", {
     className: "go",
-    onClick: () => {
-      handleClickIcon();
+    onClick: (e2) => {
+      handleClickIcon(e2);
     }
   }, rightIcon || (closeMode ? /* @__PURE__ */ React__default.createElement(Icon$1, {
     classPrefix: iconClassPrefix,
     fontClassName: iconFontClassName,
-    name: "cross",
+    name: rightIcon || "close",
     color,
     size: "11px"
   }) : null))) : null);
@@ -16953,6 +17033,8 @@ const defaultProps$o = {
   symbol: "&yen;",
   decimalDigits: 2,
   thousands: false,
+  position: "before",
+  size: "large",
   className: ""
 };
 const Price = (props) => {
@@ -16962,6 +17044,8 @@ const Price = (props) => {
     symbol,
     decimalDigits,
     thousands,
+    position,
+    size,
     className,
     ...rest
   } = {
@@ -16969,18 +17053,8 @@ const Price = (props) => {
     ...props
   };
   const b2 = cn("price");
-  const replaceSpecialChar = (symbol2) => {
-    let desSymbol = symbol2;
-    desSymbol = symbol2.replace(/&quot;/g, '"');
-    desSymbol = symbol2.replace(/&amp;/g, "&");
-    desSymbol = symbol2.replace(/&lt;/g, "<");
-    desSymbol = symbol2.replace(/&gt;/g, ">");
-    desSymbol = symbol2.replace(/&nbsp;/g, " ");
-    desSymbol = symbol2.replace(/&yen;/g, "\uFFE5");
-    return desSymbol;
-  };
   const showSymbol = () => {
-    return { __html: (needSymbol ? replaceSpecialChar(symbol) : "") || "" };
+    return { __html: needSymbol ? symbol : "" };
   };
   const checkPoint = (price2) => {
     return String(price2).indexOf(".") > 0;
@@ -17006,7 +17080,7 @@ const Price = (props) => {
     }
     if (checkPoint(decimalNum)) {
       decimalNum = Number(decimalNum).toFixed(decimalDigits);
-      decimalNum = typeof decimalNum.split(".") === "string" ? 0 : decimalNum.split(".")[1];
+      decimalNum = typeof decimalNum.split(".") === "string" ? 0 : decimalNum.split(".")[1] || 0;
     } else {
       decimalNum = 0;
     }
@@ -17014,19 +17088,22 @@ const Price = (props) => {
     const resultFixed = Number(result).toFixed(decimalDigits);
     return String(resultFixed).substring(2, resultFixed.length);
   };
+  const renderSymbol = () => {
+    return /* @__PURE__ */ React__default.createElement("div", {
+      className: `${b2("symbol")} ${b2(`symbol-${size}`)}`,
+      dangerouslySetInnerHTML: showSymbol()
+    });
+  };
   return /* @__PURE__ */ React__default.createElement("div", {
     className: `${b2()} ${className}`,
     ...rest
-  }, needSymbol ? /* @__PURE__ */ React__default.createElement("div", {
-    className: `${b2("symbol")}`,
-    dangerouslySetInnerHTML: showSymbol()
-  }) : null, /* @__PURE__ */ React__default.createElement("div", {
-    className: `${b2("big")}`
-  }, formatThousands(price)), /* @__PURE__ */ React__default.createElement("div", {
-    className: `${b2("point")}`
-  }, "."), /* @__PURE__ */ React__default.createElement("div", {
-    className: `${b2("small")}`
-  }, formatDecimal(price)));
+  }, needSymbol && position === "before" ? renderSymbol() : null, /* @__PURE__ */ React__default.createElement("div", {
+    className: `${b2("integer")} ${b2(`integer-${size}`)}`
+  }, formatThousands(price)), decimalDigits !== 0 ? /* @__PURE__ */ React__default.createElement("div", {
+    className: `${b2("decimal")} ${b2(`decimal-${size}`)}`
+  }, ".") : null, /* @__PURE__ */ React__default.createElement("div", {
+    className: `${b2("decimal")} ${b2(`decimal-${size}`)}`
+  }, formatDecimal(price)), needSymbol && position === "after" ? renderSymbol() : null);
 };
 Price.defaultProps = defaultProps$o;
 Price.displayName = "NutPrice";
@@ -17109,6 +17186,8 @@ const defaultProps$m = {
 };
 const Tag = (props) => {
   const {
+    className,
+    style,
     color,
     plain,
     type,
@@ -17157,23 +17236,23 @@ const Tag = (props) => {
     }
   };
   const getStyle = () => {
-    const style = {};
+    const style2 = {};
     if (textColor) {
-      style.color = textColor;
+      style2.color = textColor;
       if (plain) {
-        style.background = "#fff";
+        style2.background = "#fff";
       } else if (color) {
-        style.background = color;
+        style2.background = color;
       }
     } else if (color) {
-      style.color = "#fff";
-      style.background = color;
+      style2.color = "#fff";
+      style2.background = color;
     }
-    return style;
+    return style2;
   };
   return /* @__PURE__ */ React__default.createElement("div", null, closeable ? isTagShow && /* @__PURE__ */ React__default.createElement("div", {
-    className: `${btnName}`,
-    style: getStyle(),
+    className: `${btnName} ${className}`,
+    style: { ...style, ...getStyle() },
     onClick: (e2) => handleClick2(e2)
   }, children && /* @__PURE__ */ React__default.createElement("span", {
     className: "text"
@@ -17190,8 +17269,8 @@ const Tag = (props) => {
       }
     }
   })) : /* @__PURE__ */ React__default.createElement("div", {
-    className: `${btnName}`,
-    style: getStyle(),
+    className: `${btnName} ${className}`,
+    style: { ...style, ...getStyle() },
     onClick: (e2) => handleClick2(e2)
   }, children && /* @__PURE__ */ React__default.createElement("span", {
     className: "text"