@nutui/nutui-react 2.3.12-beta.0 → 2.4.0-beta.0

package/dist/esm/AvatarCropper.js

@@ -1,30 +1,4 @@
-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", "shape", "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 { _ as __rest, a as __awaiter } from "./tslib.es6.js";
 import React__default, { useRef, useState, useMemo, useCallback, useEffect } from "react";
 import classNames from "classnames";
 import Button from "./Button.js";
@@ -32,36 +6,24 @@ 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, {
-    key: "reset"
-  }, "重置"), React__default.createElement(Button, {
-    key: "rotate"
-  }, "旋转"), React__default.createElement(Button, {
-    type: "success",
-    key: "confirm"
-  }, "确认")],
-  toolbarPosition: "bottom",
-  editText: "编辑",
-  shape: "square"
-});
-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, shape = _defaultProps$props.shape, 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, shape === "round" && "round");
-  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({
+const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { maxZoom: 3, space: 10, toolbar: [
+  React__default.createElement(Button, { type: "danger", key: "cancel" }, "取消"),
+  React__default.createElement(Button, { key: "reset" }, "重置"),
+  React__default.createElement(Button, { key: "rotate" }, "旋转"),
+  React__default.createElement(Button, { type: "success", key: "confirm" }, "确认")
+], toolbarPosition: "bottom", editText: "编辑", shape: "square" });
+const classPrefix = `nut-avatar-cropper`;
+const AvatarCropper = (props) => {
+  const _a = Object.assign(Object.assign({}, defaultProps), props), { children, toolbar, maxZoom, space, toolbarPosition, editText, shape, className, style, onConfirm, onCancel } = _a, rest = __rest(_a, ["children", "toolbar", "maxZoom", "space", "toolbarPosition", "editText", "shape", "className", "style", "onConfirm", "onCancel"]);
+  const cls = classNames(classPrefix, className, shape === "round" && "round");
+  const toolbarPositionCls = classNames(`${classPrefix}-popup-toolbar`, toolbarPosition);
+  const inputImageRef = useRef(null);
+  const cropperPopupRef = useRef(null);
+  const canvasRef = useRef(null);
+  const [visible, setVisible] = useState(false);
+  const [moving, setMoving] = useState(false);
+  const [zooming, setZooming] = useState(false);
+  const [state, setState] = useState({
     defScale: 1,
     scale: 1,
     angle: 0,
@@ -69,8 +31,8 @@ var AvatarCropper = function AvatarCropper2(props) {
     moveY: 0,
     displayWidth: 0,
     displayHeight: 0
-  }), _useState8 = _slicedToArray(_useState7, 2), state = _useState8[0], setState = _useState8[1];
-  var defDrawImage = {
+  });
+  const defDrawImage = {
     img: new Image(),
     sx: 0,
     sy: 0,
@@ -82,60 +44,56 @@ var AvatarCropper = function AvatarCropper2(props) {
     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;
+  const [drawImage, setDrawImg] = useState(Object.assign({}, defDrawImage));
+  const devicePixelRatio = window.devicePixelRatio || 1;
+  const touch = useTouch();
+  const highlightStyle = useMemo(() => {
+    const width = `${drawImage.swidth / devicePixelRatio}px`;
+    const height = width;
     return {
       width,
       height,
       borderRadius: shape === "round" ? "50%" : ""
     };
   }, [devicePixelRatio, drawImage.swidth]);
-  var isAngle = useMemo(function() {
+  const isAngle = useMemo(() => {
     return state.angle === 90 || state.angle === 270;
   }, [state.angle]);
-  var maxMoveX = useMemo(function() {
-    var swidth = drawImage.swidth, height = drawImage.height;
+  const maxMoveX = useMemo(() => {
+    const { swidth, height } = drawImage;
     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;
+  const maxMoveY = useMemo(() => {
+    const { swidth, height } = drawImage;
     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);
-      };
+  const fileToDataURL = (file) => {
+    return new Promise((resolve) => {
+      const reader = new FileReader();
+      reader.onloadend = (e) => 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);
-      };
+  const dataURLToImage = (dataURL) => {
+    return new Promise((resolve) => {
+      const img = new Image();
+      img.onload = () => 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;
+  const draw = useCallback(() => {
+    const { img, width, height, x, y, swidth } = drawImage;
+    const { moveX, moveY, scale, angle, displayWidth, displayHeight } = state;
+    const canvas = canvasRef.current;
     if (!canvas)
       return;
-    var ctx = canvas.getContext("2d");
+    const ctx = canvas.getContext("2d");
     canvas.width = displayWidth;
     canvas.height = displayHeight;
     ctx.clearRect(0, 0, canvas.width, canvas.height);
@@ -148,31 +106,27 @@ var AvatarCropper = function AvatarCropper2(props) {
     ctx.scale(scale, scale);
     ctx.drawImage(img, x, y, width, height);
   }, [drawImage, state, devicePixelRatio, space]);
-  useEffect(function() {
+  useEffect(() => {
     if (Math.abs(state.moveX) > maxMoveX) {
-      setState(_objectSpread(_objectSpread({}, state), {}, {
-        moveX: maxMoveX
-      }));
+      setState(Object.assign(Object.assign({}, state), { moveX: maxMoveX }));
     }
     if (Math.abs(state.moveY) > maxMoveY) {
-      setState(_objectSpread(_objectSpread({}, state), {}, {
-        moveY: maxMoveY
-      }));
+      setState(Object.assign(Object.assign({}, state), { moveY: maxMoveY }));
     }
     draw();
   }, [state, maxMoveX, maxMoveY, draw]);
-  var setDrawImgs = function setDrawImgs2(image) {
-    var rect = getRect(cropperPopupRef.current);
+  const setDrawImgs = (image) => {
+    const 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;
+    const { width: clientWidth, height: clientHeight } = rect;
+    const canvasWidth = state.displayWidth = clientWidth * devicePixelRatio;
+    const canvasHeight = state.displayHeight = clientHeight * devicePixelRatio;
+    const copyDrawImg = Object.assign({}, defDrawImage);
+    const { width: imgWidth, height: imgHeight } = image;
     copyDrawImg.img = image;
-    var isPortrait = imgHeight > imgWidth;
-    var rate = isPortrait ? imgWidth / imgHeight : imgHeight / imgWidth;
+    const isPortrait = imgHeight > imgWidth;
+    const rate = isPortrait ? imgWidth / imgHeight : imgHeight / imgWidth;
     copyDrawImg.width = canvasWidth;
     copyDrawImg.height = isPortrait ? canvasWidth / rate : canvasWidth * rate;
     copyDrawImg.x = -copyDrawImg.width / 2;
@@ -182,233 +136,160 @@ var AvatarCropper = function AvatarCropper2(props) {
     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
-    }));
+    const scale = copyDrawImg.swidth / (isPortrait ? copyDrawImg.width : copyDrawImg.height);
+    setState(Object.assign(Object.assign({}, 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
-    }));
+  const inputImageChange = (event) => __awaiter(void 0, void 0, void 0, function* () {
+    setVisible(true);
+    const $el = event.target;
+    const { files } = $el;
+    if (!(files === null || files === void 0 ? void 0 : files.length))
+      return;
+    const base64 = yield fileToDataURL(files[0]);
+    const image = yield dataURLToImage(base64);
+    setDrawImgs(image);
+  });
+  const resetScale = (scale) => {
+    setState(Object.assign(Object.assign({}, state), { moveX: 0, moveY: 0, angle: 0, scale: scale || state.defScale, defScale: scale || state.defScale }));
   };
-  var setScale = function setScale2(scale) {
+  const setScale = (scale) => {
     scale = clamp(scale, 0.3, +maxZoom + 1);
     if (scale !== state.scale) {
-      setState(_objectSpread(_objectSpread({}, state), {}, {
-        scale
-      }));
+      setState(Object.assign(Object.assign({}, 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({
+  const getDistance = (touches) => Math.sqrt(Math.pow(touches[0].clientX - touches[1].clientX, 2) + Math.pow(touches[0].clientY - touches[1].clientY, 2));
+  const [startMove, setStartMove] = 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;
+  });
+  const { startMoveX, startMoveY, startScale, startDistance } = startMove;
+  const onTouchStart = (event) => {
+    const { touches } = event;
+    const { offsetX } = touch;
     touch.start(event);
-    var fingerNum = touches === null || touches === void 0 ? void 0 : touches.length;
-    setStartMove(_objectSpread(_objectSpread({}, startMove), {}, {
-      startMoveX: state.moveX,
-      startMoveY: state.moveY
-    }));
+    const fingerNum = touches === null || touches === void 0 ? void 0 : touches.length;
+    setStartMove(Object.assign(Object.assign({}, 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)
-      }));
+      setStartMove(Object.assign(Object.assign({}, startMove), { startScale: state.scale, startDistance: getDistance(event.touches) }));
     }
   };
-  var onTouchMove = function onTouchMove2(event) {
-    var touches = event.touches;
+  const onTouchMove = (event) => {
+    const { touches } = event;
     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)
-      }));
+      const { deltaX, deltaY } = touch;
+      const moveX = deltaX.current * state.scale + startMoveX;
+      const moveY = deltaY.current * state.scale + startMoveY;
+      setState(Object.assign(Object.assign({}, 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;
+      const distance = getDistance(touches);
+      const scale = startScale * distance / startDistance;
       setScale(scale);
     }
   };
-  var onTouchEnd = function onTouchEnd2(event) {
-    var stopPropagation = false;
+  const onTouchEnd = (event) => {
+    let 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)
-          }));
+          setState(Object.assign(Object.assign({}, 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
-        }));
+        setStartMove(Object.assign(Object.assign({}, startMove), { startMoveX: 0, startMoveY: 0, startScale: state.defScale }));
         if (state.scale < state.defScale) {
           resetScale();
         }
         if (state.scale > maxZoom) {
-          setState(_objectSpread(_objectSpread({}, state), {}, {
-            scale: +maxZoom
-          }));
+          setState(Object.assign(Object.assign({}, state), { scale: +maxZoom }));
         }
       }
     }
     preventDefault(event, stopPropagation);
     touch.reset();
   };
-  var reset = function reset2() {
-    setState(_objectSpread(_objectSpread({}, state), {}, {
-      angle: 0
-    }));
+  const reset = () => {
+    setState(Object.assign(Object.assign({}, state), { angle: 0 }));
   };
-  var rotate = function rotate2() {
+  const rotate = () => {
     if (state.angle === 270) {
-      setState(_objectSpread(_objectSpread({}, state), {}, {
-        angle: 0
-      }));
+      setState(Object.assign(Object.assign({}, state), { angle: 0 }));
       return;
     }
-    setState(_objectSpread(_objectSpread({}, state), {}, {
-      angle: state.angle + 90
-    }));
+    setState(Object.assign(Object.assign({}, state), { angle: state.angle + 90 }));
   };
-  var cancel = function cancel2() {
-    var isEmit = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : true;
+  const cancel = (isEmit = 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");
+  const confirm = () => {
+    const canvas = canvasRef.current;
+    const { sx, sy, swidth } = drawImage;
+    const width = swidth;
+    const height = swidth;
+    const croppedCanvas = document.createElement("canvas");
+    const 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");
+    const 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]);
-    })));
+  const ToolBar = () => {
+    const actions = [cancel, reset, rotate, confirm];
+    return React__default.createElement(
+      React__default.Fragment,
+      null,
+      React__default.createElement("div", { className: `${classPrefix}-popup-toolbar-flex` }, actions.map((action, index) => React__default.createElement("div", { key: index, className: `${classPrefix}-popup-toolbar-item`, onClick: (_e) => 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))));
+  const CropperPopup = () => {
+    return React__default.createElement(
+      React__default.Fragment,
+      null,
+      React__default.createElement(
+        "div",
+        { ref: cropperPopupRef, className: `${classPrefix}-popup`, style: { display: visible ? "block" : "none" } },
+        React__default.createElement("canvas", { ref: canvasRef, className: `${classPrefix}-popup-canvas` }),
+        React__default.createElement(
+          "div",
+          { className: `${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);
-    },
-    "aria-label": "选择图片"
-  }), React__default.createElement("div", {
-    className: "nut-avatar-cropper-edit-text"
-  }, editText)), CropperPopup());
+  return React__default.createElement(
+    React__default.Fragment,
+    null,
+    React__default.createElement(
+      "div",
+      Object.assign({ className: cls }, rest, { style }),
+      children,
+      React__default.createElement("input", { ref: inputImageRef, type: "file", accept: "image/*", className: `${classPrefix}-input`, onChange: (e) => inputImageChange(e), "aria-label": "选择图片" }),
+      React__default.createElement("div", { className: "nut-avatar-cropper-edit-text" }, editText)
+    ),
+    CropperPopup()
+  );
 };
 AvatarCropper.defaultProps = defaultProps;
 AvatarCropper.displayName = "NutAvatarCropper";

package/dist/esm/AvatarGroup.js

@@ -1,54 +1,23 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-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 } from "react";
 import classNames from "classnames";
 import { A as AvatarContext } from "./context2.js";
 import { C as ComponentDefaults } from "./typings.js";
-var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
-  maxContent: "",
-  max: "",
-  maxBackground: "#eee",
-  maxColor: "#666",
-  gap: "-8",
-  level: "left"
-});
-var classPrefix = "nut-avatar-group";
-var AvatarGroup = function AvatarGroup2(props) {
-  var propAvatarGroup = _objectSpread(_objectSpread({}, defaultProps), props);
-  var className = propAvatarGroup.className, style = propAvatarGroup.style, children = propAvatarGroup.children;
-  var avatarGroupRef = useRef(null);
-  var cls = classNames(classPrefix, className);
-  var parentAvatar = {
+const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { maxContent: "", max: "", maxBackground: "#eee", maxColor: "#666", gap: "-8", level: "left" });
+const classPrefix = `nut-avatar-group`;
+const AvatarGroup = (props) => {
+  const propAvatarGroup = Object.assign(Object.assign({}, defaultProps), props);
+  const { className, style, children } = propAvatarGroup;
+  const avatarGroupRef = useRef(null);
+  const cls = classNames(classPrefix, className);
+  const parentAvatar = {
     propAvatarGroup,
     avatarGroupRef
   };
-  return React__default.createElement(AvatarContext.Provider, {
-    value: parentAvatar
-  }, React__default.createElement("div", {
-    className: cls,
-    style,
-    ref: avatarGroupRef
-  }, children));
+  return React__default.createElement(
+    AvatarContext.Provider,
+    { value: parentAvatar },
+    React__default.createElement("div", { className: cls, style, ref: avatarGroupRef }, children)
+  );
 };
 AvatarGroup.defaultProps = defaultProps;
 AvatarGroup.displayName = "NutAvatarGroup";