@nutui/nutui-react 2.0.23 → 2.0.24

package/dist/esm/AvatarCropper.js

@@ -0,0 +1,416 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["children", "toolbar", "maxZoom", "space", "toolbarPosition", "editText", "className", "style", "onConfirm", "onCancel"];
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+function ownKeys(e, r) {
+  var t = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function(r2) {
+      return Object.getOwnPropertyDescriptor(e, r2).enumerable;
+    })), t.push.apply(t, o);
+  }
+  return t;
+}
+function _objectSpread(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), true).forEach(function(r2) {
+      _defineProperty(e, r2, t[r2]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r2) {
+      Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
+    });
+  }
+  return e;
+}
+import React__default, { useRef, useState, useMemo, useCallback, useEffect } from "react";
+import classNames from "classnames";
+import Button from "./Button.js";
+import { C as ComponentDefaults } from "./typings.js";
+import { u as useTouch } from "./use-touch.js";
+import { p as preventDefault, c as clamp } from "./index.js";
+import { g as getRect } from "./use-client-rect.js";
+var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
+  maxZoom: 3,
+  space: 10,
+  toolbar: [React__default.createElement(Button, {
+    type: "danger",
+    key: "cancel"
+  }, "取消"), React__default.createElement(Button, {
+    type: "info",
+    key: "reset"
+  }, "重置"), React__default.createElement(Button, {
+    type: "warning",
+    key: "rotate"
+  }, "旋转"), React__default.createElement(Button, {
+    type: "success",
+    key: "confirm"
+  }, "确认")],
+  toolbarPosition: "bottom",
+  editText: "编辑"
+});
+var classPrefix = "nut-avatar-cropper";
+var AvatarCropper = function AvatarCropper2(props) {
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), children = _defaultProps$props.children, toolbar = _defaultProps$props.toolbar, maxZoom = _defaultProps$props.maxZoom, space = _defaultProps$props.space, toolbarPosition = _defaultProps$props.toolbarPosition, editText = _defaultProps$props.editText, className = _defaultProps$props.className, style = _defaultProps$props.style, onConfirm = _defaultProps$props.onConfirm, onCancel = _defaultProps$props.onCancel, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
+  var cls = classNames(classPrefix, className);
+  var toolbarPositionCls = classNames("".concat(classPrefix, "-popup-toolbar"), toolbarPosition);
+  var inputImageRef = useRef(null);
+  var cropperPopupRef = useRef(null);
+  var canvasRef = useRef(null);
+  var _useState = useState(false), _useState2 = _slicedToArray(_useState, 2), visible = _useState2[0], setVisible = _useState2[1];
+  var _useState3 = useState(false), _useState4 = _slicedToArray(_useState3, 2), moving = _useState4[0], setMoving = _useState4[1];
+  var _useState5 = useState(false), _useState6 = _slicedToArray(_useState5, 2), zooming = _useState6[0], setZooming = _useState6[1];
+  var _useState7 = useState({
+    defScale: 1,
+    scale: 1,
+    angle: 0,
+    moveX: 0,
+    moveY: 0,
+    displayWidth: 0,
+    displayHeight: 0
+  }), _useState8 = _slicedToArray(_useState7, 2), state = _useState8[0], setState = _useState8[1];
+  var defDrawImage = {
+    img: new Image(),
+    sx: 0,
+    sy: 0,
+    swidth: 0,
+    sheight: 0,
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0
+    // 要使用的图像的高度
+  };
+  var _useState9 = useState(_objectSpread({}, defDrawImage)), _useState10 = _slicedToArray(_useState9, 2), drawImage = _useState10[0], setDrawImg = _useState10[1];
+  var devicePixelRatio = window.devicePixelRatio || 1;
+  var touch = useTouch();
+  var highlightStyle = useMemo(function() {
+    var width = "".concat(drawImage.swidth / devicePixelRatio, "px");
+    var height = width;
+    return {
+      width,
+      height
+    };
+  }, [devicePixelRatio, drawImage.swidth]);
+  var isAngle = useMemo(function() {
+    return state.angle === 90 || state.angle === 270;
+  }, [state.angle]);
+  var maxMoveX = useMemo(function() {
+    var swidth = drawImage.swidth, height = drawImage.height;
+    if (isAngle) {
+      return Math.max(0, (height * state.scale - swidth) / 2);
+    }
+    return Math.max(0, (state.displayWidth * state.scale - swidth) / 2);
+  }, [state.scale, state.displayWidth, drawImage, isAngle]);
+  var maxMoveY = useMemo(function() {
+    var swidth = drawImage.swidth, height = drawImage.height;
+    if (isAngle) {
+      return Math.max(0, (state.displayWidth * state.scale - swidth) / 2);
+    }
+    return Math.max(0, (height * state.scale - swidth) / 2);
+  }, [state.scale, state.displayWidth, drawImage, isAngle]);
+  var fileToDataURL = function fileToDataURL2(file) {
+    return new Promise(function(resolve) {
+      var reader = new FileReader();
+      reader.onloadend = function(e) {
+        return resolve(e.target.result);
+      };
+      reader.readAsDataURL(file);
+    });
+  };
+  var dataURLToImage = function dataURLToImage2(dataURL) {
+    return new Promise(function(resolve) {
+      var img = new Image();
+      img.onload = function() {
+        return resolve(img);
+      };
+      img.src = dataURL;
+    });
+  };
+  var draw = useCallback(function() {
+    var img = drawImage.img, width = drawImage.width, height = drawImage.height, x = drawImage.x, y = drawImage.y, swidth = drawImage.swidth;
+    var moveX = state.moveX, moveY = state.moveY, scale = state.scale, angle = state.angle, displayWidth = state.displayWidth, displayHeight = state.displayHeight;
+    var canvas = canvasRef.current;
+    if (!canvas)
+      return;
+    var ctx = canvas.getContext("2d");
+    canvas.width = displayWidth;
+    canvas.height = displayHeight;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.fillStyle = "#666";
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    ctx.fillStyle = "#000";
+    ctx.fillRect(space * devicePixelRatio, (canvas.height - swidth) / 2, swidth, swidth);
+    ctx.translate(canvas.width / 2 + moveX, canvas.height / 2 + moveY);
+    ctx.rotate(Math.PI / 180 * angle);
+    ctx.scale(scale, scale);
+    ctx.drawImage(img, x, y, width, height);
+  }, [drawImage, state, devicePixelRatio, space]);
+  useEffect(function() {
+    if (Math.abs(state.moveX) > maxMoveX) {
+      setState(_objectSpread(_objectSpread({}, state), {}, {
+        moveX: maxMoveX
+      }));
+    }
+    if (Math.abs(state.moveY) > maxMoveY) {
+      setState(_objectSpread(_objectSpread({}, state), {}, {
+        moveY: maxMoveY
+      }));
+    }
+    draw();
+  }, [state, maxMoveX, maxMoveY, draw]);
+  var setDrawImgs = function setDrawImgs2(image) {
+    var rect = getRect(cropperPopupRef.current);
+    if (!rect)
+      return;
+    var clientWidth = rect.width, clientHeight = rect.height;
+    var canvasWidth = state.displayWidth = clientWidth * devicePixelRatio;
+    var canvasHeight = state.displayHeight = clientHeight * devicePixelRatio;
+    var copyDrawImg = _objectSpread({}, defDrawImage);
+    var imgWidth = image.width, imgHeight = image.height;
+    copyDrawImg.img = image;
+    var isPortrait = imgHeight > imgWidth;
+    var rate = isPortrait ? imgWidth / imgHeight : imgHeight / imgWidth;
+    copyDrawImg.width = canvasWidth;
+    copyDrawImg.height = isPortrait ? canvasWidth / rate : canvasWidth * rate;
+    copyDrawImg.x = -copyDrawImg.width / 2;
+    copyDrawImg.y = -copyDrawImg.height / 2;
+    copyDrawImg.swidth = canvasWidth - space * 2 * devicePixelRatio;
+    copyDrawImg.sheight = isPortrait ? copyDrawImg.swidth / rate : copyDrawImg.swidth * rate;
+    copyDrawImg.sx = space * devicePixelRatio;
+    copyDrawImg.sy = (canvasHeight - copyDrawImg.swidth) / 2;
+    setDrawImg(copyDrawImg);
+    var scale = copyDrawImg.swidth / (isPortrait ? copyDrawImg.width : copyDrawImg.height);
+    setState(_objectSpread(_objectSpread({}, state), {}, {
+      defScale: scale
+    }));
+    resetScale(scale);
+  };
+  var inputImageChange = /* @__PURE__ */ function() {
+    var _ref = _asyncToGenerator(/* @__PURE__ */ _regeneratorRuntime.mark(function _callee(event) {
+      var $el, files, base64, image;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1)
+          switch (_context.prev = _context.next) {
+            case 0:
+              setVisible(true);
+              $el = event.target;
+              files = $el.files;
+              if (files !== null && files !== void 0 && files.length) {
+                _context.next = 5;
+                break;
+              }
+              return _context.abrupt("return");
+            case 5:
+              _context.next = 7;
+              return fileToDataURL(files[0]);
+            case 7:
+              base64 = _context.sent;
+              _context.next = 10;
+              return dataURLToImage(base64);
+            case 10:
+              image = _context.sent;
+              setDrawImgs(image);
+            case 12:
+            case "end":
+              return _context.stop();
+          }
+      }, _callee);
+    }));
+    return function inputImageChange2(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+  var resetScale = function resetScale2(scale) {
+    setState(_objectSpread(_objectSpread({}, state), {}, {
+      moveX: 0,
+      moveY: 0,
+      angle: 0,
+      scale: scale || state.defScale,
+      defScale: scale || state.defScale
+    }));
+  };
+  var setScale = function setScale2(scale) {
+    scale = clamp(scale, 0.3, +maxZoom + 1);
+    if (scale !== state.scale) {
+      setState(_objectSpread(_objectSpread({}, state), {}, {
+        scale
+      }));
+    }
+  };
+  var getDistance = function getDistance2(touches) {
+    return Math.sqrt(Math.pow(touches[0].clientX - touches[1].clientX, 2) + Math.pow(touches[0].clientY - touches[1].clientY, 2));
+  };
+  var _useState11 = useState({
+    startMoveX: 0,
+    startMoveY: 0,
+    startScale: 0,
+    startDistance: 0
+  }), _useState12 = _slicedToArray(_useState11, 2), startMove = _useState12[0], setStartMove = _useState12[1];
+  var startMoveX = startMove.startMoveX, startMoveY = startMove.startMoveY, startScale = startMove.startScale, startDistance = startMove.startDistance;
+  var onTouchStart = function onTouchStart2(event) {
+    var touches = event.touches;
+    var offsetX = touch.offsetX;
+    touch.start(event);
+    var fingerNum = touches === null || touches === void 0 ? void 0 : touches.length;
+    setStartMove(_objectSpread(_objectSpread({}, startMove), {}, {
+      startMoveX: state.moveX,
+      startMoveY: state.moveY
+    }));
+    setMoving(fingerNum === 1);
+    setZooming(fingerNum === 2 && !offsetX.current);
+    if (fingerNum === 2 && !offsetX.current) {
+      setStartMove(_objectSpread(_objectSpread({}, startMove), {}, {
+        startScale: state.scale,
+        startDistance: getDistance(event.touches)
+      }));
+    }
+  };
+  var onTouchMove = function onTouchMove2(event) {
+    var touches = event.touches;
+    touch.move(event);
+    if (moving || zooming) {
+      preventDefault(event, true);
+    }
+    if (moving) {
+      var deltaX = touch.deltaX, deltaY = touch.deltaY;
+      var moveX = deltaX.current * state.scale + startMoveX;
+      var moveY = deltaY.current * state.scale + startMoveY;
+      setState(_objectSpread(_objectSpread({}, state), {}, {
+        moveX: clamp(moveX, -maxMoveX, maxMoveX),
+        moveY: clamp(moveY, -maxMoveY, maxMoveY)
+      }));
+    }
+    if (zooming && touches.length === 2) {
+      var distance = getDistance(touches);
+      var scale = startScale * distance / startDistance;
+      setScale(scale);
+    }
+  };
+  var onTouchEnd = function onTouchEnd2(event) {
+    var stopPropagation = false;
+    if (moving || zooming) {
+      stopPropagation = !(moving && startMoveX === state.moveX && startMoveY === state.moveY);
+      if (!event.touches.length) {
+        if (zooming) {
+          setState(_objectSpread(_objectSpread({}, state), {}, {
+            moveX: clamp(state.moveX, -maxMoveX, maxMoveX),
+            moveY: clamp(state.moveY, -maxMoveY, maxMoveY)
+          }));
+          setZooming(false);
+        }
+        setMoving(false);
+        setStartMove(_objectSpread(_objectSpread({}, startMove), {}, {
+          startMoveX: 0,
+          startMoveY: 0,
+          startScale: state.defScale
+        }));
+        if (state.scale < state.defScale) {
+          resetScale();
+        }
+        if (state.scale > maxZoom) {
+          setState(_objectSpread(_objectSpread({}, state), {}, {
+            scale: +maxZoom
+          }));
+        }
+      }
+    }
+    preventDefault(event, stopPropagation);
+    touch.reset();
+  };
+  var reset = function reset2() {
+    setState(_objectSpread(_objectSpread({}, state), {}, {
+      angle: 0
+    }));
+  };
+  var rotate = function rotate2() {
+    if (state.angle === 270) {
+      setState(_objectSpread(_objectSpread({}, state), {}, {
+        angle: 0
+      }));
+      return;
+    }
+    setState(_objectSpread(_objectSpread({}, state), {}, {
+      angle: state.angle + 90
+    }));
+  };
+  var cancel = function cancel2() {
+    var isEmit = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : true;
+    setVisible(false);
+    resetScale();
+    inputImageRef.current && (inputImageRef.current.value = "");
+    isEmit && onCancel && onCancel();
+  };
+  var confirm = function confirm2() {
+    var canvas = canvasRef.current;
+    var sx = drawImage.sx, sy = drawImage.sy, swidth = drawImage.swidth;
+    var width = swidth;
+    var height = swidth;
+    var croppedCanvas = document.createElement("canvas");
+    var croppedCtx = croppedCanvas.getContext("2d");
+    croppedCanvas.width = width;
+    croppedCanvas.height = height;
+    canvas && croppedCtx.drawImage(canvas, sx, sy, width, height, 0, 0, width, height);
+    var imageDataURL = croppedCanvas.toDataURL("image/png");
+    onConfirm && onConfirm(imageDataURL);
+    cancel(false);
+  };
+  var ToolBar = function ToolBar2() {
+    var actions = [cancel, reset, rotate, confirm];
+    return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+      className: "".concat(classPrefix, "-popup-toolbar-flex")
+    }, actions.map(function(action, index) {
+      return React__default.createElement("div", {
+        key: index,
+        className: "".concat(classPrefix, "-popup-toolbar-item"),
+        onClick: function onClick(_e) {
+          return action();
+        }
+      }, toolbar[index]);
+    })));
+  };
+  var CropperPopup = function CropperPopup2() {
+    return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+      ref: cropperPopupRef,
+      className: "".concat(classPrefix, "-popup"),
+      style: {
+        display: visible ? "block" : "none"
+      }
+    }, React__default.createElement("canvas", {
+      ref: canvasRef,
+      className: "".concat(classPrefix, "-popup-canvas")
+    }), React__default.createElement("div", {
+      className: "".concat(classPrefix, "-popup-highlight"),
+      onTouchStart,
+      onTouchMove,
+      onTouchEnd
+    }, React__default.createElement("div", {
+      className: "highlight",
+      style: highlightStyle
+    })), React__default.createElement("div", {
+      className: toolbarPositionCls
+    }, React__default.createElement(ToolBar, null))));
+  };
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", _objectSpread(_objectSpread({
+    className: cls
+  }, rest), {}, {
+    style
+  }), children, React__default.createElement("input", {
+    ref: inputImageRef,
+    type: "file",
+    accept: "image/*",
+    className: "".concat(classPrefix, "-input"),
+    onChange: function onChange(e) {
+      return inputImageChange(e);
+    }
+  }), React__default.createElement("div", {
+    className: "nut-avatar-cropper-edit-text"
+  }, editText)), CropperPopup());
+};
+AvatarCropper.defaultProps = defaultProps;
+AvatarCropper.displayName = "NutAvatarCropper";
+export {
+  AvatarCropper as default
+};

package/dist/esm/AvatarGroup.js

@@ -1,28 +1,28 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
+function ownKeys(e, r) {
+  var t = Object.keys(e);
   if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    enumerableOnly && (symbols = symbols.filter(function(sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    })), keys.push.apply(keys, symbols);
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function(r2) {
+      return Object.getOwnPropertyDescriptor(e, r2).enumerable;
+    })), t.push.apply(t, o);
   }
-  return keys;
+  return t;
 }
-function _objectSpread(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = null != arguments[i] ? arguments[i] : {};
-    i % 2 ? ownKeys(Object(source), true).forEach(function(key) {
-      _defineProperty(target, key, source[key]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function(key) {
-      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+function _objectSpread(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), true).forEach(function(r2) {
+      _defineProperty(e, r2, t[r2]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r2) {
+      Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
     });
   }
-  return target;
+  return e;
 }
 import React__default, { useRef } from "react";
 import classNames from "classnames";
-import { A as AvatarContext } from "./context3.js";
+import { A as AvatarContext } from "./context2.js";
 import { C as ComponentDefaults } from "./typings.js";
 var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
   maxContent: "",

package/dist/esm/BackTop.js

@@ -1,25 +1,25 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
+function ownKeys(e, r) {
+  var t = Object.keys(e);
   if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    enumerableOnly && (symbols = symbols.filter(function(sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    })), keys.push.apply(keys, symbols);
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function(r2) {
+      return Object.getOwnPropertyDescriptor(e, r2).enumerable;
+    })), t.push.apply(t, o);
   }
-  return keys;
+  return t;
 }
-function _objectSpread(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = null != arguments[i] ? arguments[i] : {};
-    i % 2 ? ownKeys(Object(source), true).forEach(function(key) {
-      _defineProperty(target, key, source[key]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function(key) {
-      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+function _objectSpread(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), true).forEach(function(r2) {
+      _defineProperty(e, r2, t[r2]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r2) {
+      Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
     });
   }
-  return target;
+  return e;
 }
 import React__default, { useState, useRef, useEffect } from "react";
 import { Top } from "@nutui/icons-react";
@@ -95,13 +95,13 @@ var BackTop = function BackTop2(props) {
   };
   function addEventListener() {
     var _scrollEl$current, _scrollEl$current2;
-    (_scrollEl$current = scrollEl.current) === null || _scrollEl$current === void 0 ? void 0 : _scrollEl$current.addEventListener("scroll", scrollListener, false);
-    (_scrollEl$current2 = scrollEl.current) === null || _scrollEl$current2 === void 0 ? void 0 : _scrollEl$current2.addEventListener("resize", scrollListener, false);
+    (_scrollEl$current = scrollEl.current) === null || _scrollEl$current === void 0 || _scrollEl$current.addEventListener("scroll", scrollListener, false);
+    (_scrollEl$current2 = scrollEl.current) === null || _scrollEl$current2 === void 0 || _scrollEl$current2.addEventListener("resize", scrollListener, false);
   }
   function removeEventListener() {
     var _scrollEl$current3, _scrollEl$current4;
-    (_scrollEl$current3 = scrollEl.current) === null || _scrollEl$current3 === void 0 ? void 0 : _scrollEl$current3.removeEventListener("scroll", scrollListener, false);
-    (_scrollEl$current4 = scrollEl.current) === null || _scrollEl$current4 === void 0 ? void 0 : _scrollEl$current4.removeEventListener("resize", scrollListener, false);
+    (_scrollEl$current3 = scrollEl.current) === null || _scrollEl$current3 === void 0 || _scrollEl$current3.removeEventListener("scroll", scrollListener, false);
+    (_scrollEl$current4 = scrollEl.current) === null || _scrollEl$current4 === void 0 || _scrollEl$current4.removeEventListener("resize", scrollListener, false);
   }
   var goTop = function goTop2(e) {
     onClick && onClick(e);

package/dist/esm/Barrage.js

@@ -1,26 +1,26 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["className", "interval", "loop", "list", "duration", "rows", "gapY"];
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
+function ownKeys(e, r) {
+  var t = Object.keys(e);
   if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    enumerableOnly && (symbols = symbols.filter(function(sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    })), keys.push.apply(keys, symbols);
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function(r2) {
+      return Object.getOwnPropertyDescriptor(e, r2).enumerable;
+    })), t.push.apply(t, o);
   }
-  return keys;
+  return t;
 }
-function _objectSpread(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = null != arguments[i] ? arguments[i] : {};
-    i % 2 ? ownKeys(Object(source), true).forEach(function(key) {
-      _defineProperty(target, key, source[key]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function(key) {
-      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+function _objectSpread(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), true).forEach(function(r2) {
+      _defineProperty(e, r2, t[r2]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r2) {
+      Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
     });
   }
-  return target;
+  return e;
 }
 import React__default, { useRef, useImperativeHandle, useEffect } from "react";
 import classNames from "classnames";
@@ -60,7 +60,7 @@ var InternalBarrage = function InternalBarrage2(props, ref) {
     }
     setTimeout(function() {
       var _barrageBody$current;
-      (_barrageBody$current = barrageBody.current) === null || _barrageBody$current === void 0 ? void 0 : _barrageBody$current.style.setProperty("--move-distance", "-".concat(barrageCWidth.current, "px"));
+      (_barrageBody$current = barrageBody.current) === null || _barrageBody$current === void 0 || _barrageBody$current.style.setProperty("--move-distance", "-".concat(barrageCWidth.current, "px"));
       index.current = 0;
       run();
     }, 300);

package/dist/esm/Button/style/style.css

@@ -1 +1 @@
-.nut-button{position:relative;display:inline-block;flex-shrink:0;height:var(--nutui-button-default-height, 38px);box-sizing:border-box;margin:0;padding:0;line-height:var(--nutui-button-default-line-height, 36px);font-size:var(--nutui-button-default-font-size, var(--nutui-font-size-2, 14px));text-align:center;cursor:pointer;transition:opacity .2s;-webkit-appearance:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:rgba(0,0,0,0);color:var(--nutui-button-default-color, var(--nutui-gray-1, #1a1a1a));background:var(--nutui-button-default-bg-color, var(--nutui-gray-6, #ffffff));border:var(--nutui-button-border-width, 1px) solid var(--nutui-button-default-border-color, rgb(204, 204, 204))}.nut-button .nut-button-text{margin-left:var(--nutui-button-text-icon-margin-left, 5px)}.nut-button:before{position:absolute;top:50%;left:50%;width:100%;height:100%;background-color:var(--nutui-gray-0, #000000);border:inherit;border-color:var(--nutui-gray-0, #000000);border-radius:inherit;transform:translate(-50%,-50%);opacity:0;content:" "}.nut-button:after{border:none}.nut-button:active:before{opacity:.1}.nut-button__warp{height:100%;width:100%;display:flex;align-items:center;justify-content:center;background:initial}.nut-button--loading:before,.nut-button--disabled:before{display:none}.nut-button--solid{color:var(--nutui-button-primary-color, var(--nutui-brand-text-color, #ffffff));background:linear-gradient(135deg,var(--nutui-brand-color, #fa2c19) 0%,var(--nutui-brand-color-end, #fa2c19) 100%);background-origin:border-box;border:var(--nutui-button-border-width, 1px) solid transparent}.nut-button.nut-button--outline{color:var(--nutui-button-primary-border-color, var(--nutui-brand-color, #fa2c19));border-color:var(--nutui-button-primary-border-color, var(--nutui-brand-color, #fa2c19));background:transparent}.nut-button.nut-button--none{background:transparent;border-color:transparent}.nut-button--primary{color:var(--nutui-button-primary-color, var(--nutui-brand-text-color, #ffffff));background:linear-gradient(135deg,var(--nutui-brand-color, #fa2c19) 0%,var(--nutui-brand-color-end, #fa2c19) 100%);background-origin:border-box;border:var(--nutui-button-border-width, 1px) solid transparent}.nut-button--primary.nut-button--outline{color:var(--nutui-button-primary-border-color, var(--nutui-brand-color, #fa2c19));border-color:var(--nutui-button-primary-border-color, var(--nutui-brand-color, #fa2c19));background:transparent}.nut-button--primary.nut-button--none{color:var(--nutui-button-primary-border-color, var(--nutui-brand-color, #fa2c19))}.nut-button--info{color:var(--nutui-button-info-color, var(--nutui-brand-text-color, #ffffff));background:linear-gradient(315deg,rgb(73,143,242) 0%,rgb(73,101,242) 100%);background-origin:border-box;border:var(--nutui-button-border-width, 1px) solid transparent}.nut-button--info.nut-button--outline{color:var(--nutui-button-info-border-color, #496af2);border-color:var(--nutui-button-info-border-color, #496af2);background:transparent}.nut-button--info.nut-button--none{color:var(--nutui-button-info-border-color, #496af2)}.nut-button--success{color:var(--nutui-button-success-color, var(--nutui-brand-text-color, #ffffff));background:linear-gradient(135deg,rgb(38,191,38) 0%,rgb(39,197,48) 45%,rgb(40,207,63) 83%,rgb(41,212,70) 100%);background-origin:border-box;border:var(--nutui-button-border-width, 1px) solid transparent}.nut-button--success.nut-button--outline{color:var(--nutui-button-success-border-color, rgb(38, 191, 38));border-color:var(--nutui-button-success-border-color, rgb(38, 191, 38));background:transparent}.nut-button--success.nut-button--none{color:var(--nutui-button-success-border-color, rgb(38, 191, 38))}.nut-button--danger{color:var(--nutui-button-danger-color, var(--nutui-brand-text-color, #ffffff));background:var(--nutui-button-danger-background-color, rgb(250, 44, 25));background-origin:border-box;border:var(--nutui-button-border-width, 1px) solid transparent}.nut-button--danger.nut-button--outline{color:var(--nutui-button-danger-border-color, rgb(250, 44, 25));border-color:var(--nutui-button-danger-border-color, rgb(250, 44, 25));background:transparent}.nut-button--danger.nut-button--none{color:var(--nutui-button-danger-border-color, rgb(250, 44, 25))}.nut-button--warning{color:var(--nutui-button-warning-color, var(--nutui-brand-text-color, #ffffff));background:linear-gradient(135deg,rgb(255,158,13) 0%,rgb(255,167,13) 45%,rgb(255,182,13) 83%,rgb(255,190,13) 100%);background-origin:border-box;border:var(--nutui-button-border-width, 1px) solid transparent}.nut-button--warning.nut-button--outline{color:var(--nutui-button-warning-border-color, rgb(255, 158, 13));border-color:var(--nutui-button-warning-border-color, rgb(255, 158, 13));background:transparent}.nut-button--warning.nut-button--none{color:var(--nutui-button-warning-border-color, rgb(255, 158, 13))}.nut-button--large{width:100%;height:var(--nutui-button-large-height, 48px);line-height:var(--nutui-button-large-line-height, 46px)}.nut-button--large .text{margin-left:var(--nutui-button-text-icon-large-margin-left, 10px)}.nut-button--normal{padding:var(--nutui-button-default-padding, 0 18px);font-size:var(--nutui-button-default-font-size, var(--nutui-font-size-2, 14px))}.nut-button--small{height:var(--nutui-button-small-height, 28px);line-height:var(--nutui-button-small-line-height, 26px);padding:var(--nutui-button-small-padding, 0 12px);font-size:var(--nutui-button-small-font-size, var(--nutui-font-size-1, 12px))}.nut-button--small .text{margin-left:var(--nutui-button-text-icon-small-margin-left, 2px)}.nut-button--mini{height:var(--nutui-button-mini-height, 24px);line-height:var(--nutui-button-mini-line-height, 1.2);padding:var(--nutui-button-mini-padding, 0 12px);font-size:var(--nutui-button-mini-font-size, var(--nutui-font-size-1, 12px))}.nut-button--mini .text{margin-left:var(--nutui-button-text-icon-mini-margin-left, 1px)}.nut-button--block{display:block;width:100%}.nut-button--disabled{cursor:not-allowed;opacity:var(--nutui-button-disabled-opacity, .68)}.nut-button--loading{cursor:default;opacity:.9}.nut-button--round{border-radius:var(--nutui-button-border-radius, 25px)}.nut-button--square{border-radius:0}
+.nut-button{position:relative;display:inline-block;flex-shrink:0;height:var(--nutui-button-default-height, 38px);box-sizing:border-box;margin:0;padding:0;line-height:var(--nutui-button-default-line-height, 36px);font-size:var(--nutui-button-default-font-size, var(--nutui-font-size-2, 14px));text-align:center;cursor:pointer;transition:opacity .2s;-webkit-appearance:none;-webkit-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:rgba(0,0,0,0);color:var(--nutui-button-default-color, var(--nutui-gray-1, #1a1a1a));background:var(--nutui-button-default-bg-color, var(--nutui-gray-6, #ffffff));border:var(--nutui-button-border-width, 1px) solid var(--nutui-button-default-border-color, rgb(204, 204, 204))}.nut-button .nut-button-text{margin-left:var(--nutui-button-text-icon-margin-left, 5px)}.nut-button:before{position:absolute;top:50%;left:50%;width:100%;height:100%;background-color:var(--nutui-gray-0, #000000);border:inherit;border-color:var(--nutui-gray-0, #000000);border-radius:inherit;transform:translate(-50%,-50%);opacity:0;content:" "}.nut-button:after{border:none}.nut-button:active:before{opacity:.1}.nut-button__warp{height:100%;width:100%;display:flex;align-items:center;justify-content:center;background:initial}.nut-button--loading:before,.nut-button--disabled:before{display:none}.nut-button--solid{color:var(--nutui-button-primary-color, var(--nutui-brand-text-color, #ffffff));background:linear-gradient(135deg,var(--nutui-brand-color, #fa2c19) 0%,var(--nutui-brand-color-end, #fa2c19) 100%);background-origin:border-box;border:var(--nutui-button-border-width, 1px) solid transparent}.nut-button.nut-button--outline{color:var(--nutui-button-primary-border-color, var(--nutui-brand-color, #fa2c19));border-color:var(--nutui-button-primary-border-color, var(--nutui-brand-color, #fa2c19));background:transparent}.nut-button.nut-button--none{background:transparent;border-color:transparent}.nut-button--primary{color:var(--nutui-button-primary-color, var(--nutui-brand-text-color, #ffffff));background:linear-gradient(135deg,var(--nutui-brand-color, #fa2c19) 0%,var(--nutui-brand-color-end, #fa2c19) 100%);background-origin:border-box;border:var(--nutui-button-border-width, 1px) solid transparent}.nut-button--primary.nut-button--outline{color:var(--nutui-button-primary-border-color, var(--nutui-brand-color, #fa2c19));border-color:var(--nutui-button-primary-border-color, var(--nutui-brand-color, #fa2c19));background:transparent}.nut-button--primary.nut-button--none{color:var(--nutui-button-primary-border-color, var(--nutui-brand-color, #fa2c19))}.nut-button--info{color:var(--nutui-button-info-color, var(--nutui-brand-text-color, #ffffff));background:linear-gradient(315deg,rgb(73,143,242) 0%,rgb(73,101,242) 100%);background-origin:border-box;border:var(--nutui-button-border-width, 1px) solid transparent}.nut-button--info.nut-button--outline{color:var(--nutui-button-info-border-color, #496af2);border-color:var(--nutui-button-info-border-color, #496af2);background:transparent}.nut-button--info.nut-button--none{color:var(--nutui-button-info-border-color, #496af2)}.nut-button--success{color:var(--nutui-button-success-color, var(--nutui-brand-text-color, #ffffff));background:linear-gradient(135deg,rgb(38,191,38) 0%,rgb(39,197,48) 45%,rgb(40,207,63) 83%,rgb(41,212,70) 100%);background-origin:border-box;border:var(--nutui-button-border-width, 1px) solid transparent}.nut-button--success.nut-button--outline{color:var(--nutui-button-success-border-color, rgb(38, 191, 38));border-color:var(--nutui-button-success-border-color, rgb(38, 191, 38));background:transparent}.nut-button--success.nut-button--none{color:var(--nutui-button-success-border-color, rgb(38, 191, 38))}.nut-button--danger{color:var(--nutui-button-danger-color, var(--nutui-brand-text-color, #ffffff));background:var(--nutui-button-danger-background-color, rgb(250, 44, 25));background-origin:border-box;border:var(--nutui-button-border-width, 1px) solid transparent}.nut-button--danger.nut-button--outline{color:var(--nutui-button-danger-border-color, rgb(250, 44, 25));border-color:var(--nutui-button-danger-border-color, rgb(250, 44, 25));background:transparent}.nut-button--danger.nut-button--none{color:var(--nutui-button-danger-border-color, rgb(250, 44, 25))}.nut-button--warning{color:var(--nutui-button-warning-color, var(--nutui-brand-text-color, #ffffff));background:linear-gradient(135deg,rgb(255,158,13) 0%,rgb(255,167,13) 45%,rgb(255,182,13) 83%,rgb(255,190,13) 100%);background-origin:border-box;border:var(--nutui-button-border-width, 1px) solid transparent}.nut-button--warning.nut-button--outline{color:var(--nutui-button-warning-border-color, rgb(255, 158, 13));border-color:var(--nutui-button-warning-border-color, rgb(255, 158, 13));background:transparent}.nut-button--warning.nut-button--none{color:var(--nutui-button-warning-border-color, rgb(255, 158, 13))}.nut-button--large{width:100%;height:var(--nutui-button-large-height, 48px);line-height:var(--nutui-button-large-line-height, 46px)}.nut-button--large .text{margin-left:var(--nutui-button-text-icon-large-margin-left, 10px)}.nut-button--normal{padding:var(--nutui-button-default-padding, 0 18px);font-size:var(--nutui-button-default-font-size, var(--nutui-font-size-2, 14px))}.nut-button--small{height:var(--nutui-button-small-height, 28px);line-height:var(--nutui-button-small-line-height, 26px);padding:var(--nutui-button-small-padding, 0 12px);font-size:var(--nutui-button-small-font-size, var(--nutui-font-size-1, 12px))}.nut-button--small .text{margin-left:var(--nutui-button-text-icon-small-margin-left, 2px)}.nut-button--mini{height:var(--nutui-button-mini-height, 24px);line-height:var(--nutui-button-mini-line-height, 1.2);padding:var(--nutui-button-mini-padding, 0 12px);font-size:var(--nutui-button-mini-font-size, var(--nutui-font-size-1, 12px))}.nut-button--mini .text{margin-left:var(--nutui-button-text-icon-mini-margin-left, 1px)}.nut-button--block{display:block;width:100%}.nut-button--disabled{cursor:not-allowed;opacity:var(--nutui-button-disabled-opacity, .68)}.nut-button--loading{cursor:default;opacity:.9}.nut-button--round{border-radius:var(--nutui-button-border-radius, 25px)}.nut-button--square{border-radius:0}

package/dist/esm/Button.js

@@ -1,26 +1,26 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["color", "shape", "fill", "loading", "disabled", "type", "size", "block", "icon", "children", "onClick", "className", "style", "nativeType"];
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
+function ownKeys(e, r) {
+  var t = Object.keys(e);
   if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    enumerableOnly && (symbols = symbols.filter(function(sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    })), keys.push.apply(keys, symbols);
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function(r2) {
+      return Object.getOwnPropertyDescriptor(e, r2).enumerable;
+    })), t.push.apply(t, o);
   }
-  return keys;
+  return t;
 }
-function _objectSpread(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = null != arguments[i] ? arguments[i] : {};
-    i % 2 ? ownKeys(Object(source), true).forEach(function(key) {
-      _defineProperty(target, key, source[key]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function(key) {
-      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+function _objectSpread(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), true).forEach(function(r2) {
+      _defineProperty(e, r2, t[r2]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r2) {
+      Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
     });
   }
-  return target;
+  return e;
 }
 import React__default, { useCallback } from "react";
 import classNames from "classnames";