@nutui/nutui-react 2.1.0-beta.0 → 2.1.0

package/dist/esm/Avatar.js

@@ -2,31 +2,31 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["children", "size", "shape", "background", "color", "src", "alt", "icon", "fit", "className", "style", "onClick", "onError"];
-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, useContext, useEffect } from "react";
 import classNames from "classnames";
-import { User } from "@nutui/icons-react";
-import { A as AvatarContext } from "./context3.js";
+import { My } from "@nutui/icons-react";
+import { A as AvatarContext } from "./context2.js";
 import Image from "./Image.js";
 import { C as ComponentDefaults } from "./typings.js";
 import AvatarGroup from "./AvatarGroup.js";
@@ -34,8 +34,8 @@ var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
   size: "",
   shape: "round",
   icon: "",
-  background: "var(--nutui-gray-3)",
-  color: "var(--nutui-gray-6)",
+  background: "#eee",
+  color: "#666",
   fit: "cover",
   src: "",
   alt: ""
@@ -50,36 +50,36 @@ var Avatar = function Avatar2(props) {
   var avatarRef = useRef(null);
   var parent = useContext(AvatarContext);
   var sizeValue = ["large", "normal", "small"];
-  var classes = classNames((_classNames = {}, _defineProperty(_classNames, "nut-avatar-".concat((parent === null || parent === void 0 ? void 0 : (_parent$propAvatarGro = parent.propAvatarGroup) === null || _parent$propAvatarGro === void 0 ? void 0 : _parent$propAvatarGro.size) || size || "normal"), true), _defineProperty(_classNames, "nut-avatar-".concat((parent === null || parent === void 0 ? void 0 : (_parent$propAvatarGro2 = parent.propAvatarGroup) === null || _parent$propAvatarGro2 === void 0 ? void 0 : _parent$propAvatarGro2.shape) || shape), true), _classNames));
+  var classes = classNames((_classNames = {}, _defineProperty(_classNames, "nut-avatar-".concat((parent === null || parent === void 0 || (_parent$propAvatarGro = parent.propAvatarGroup) === null || _parent$propAvatarGro === void 0 ? void 0 : _parent$propAvatarGro.size) || size || "normal"), true), _defineProperty(_classNames, "nut-avatar-".concat((parent === null || parent === void 0 || (_parent$propAvatarGro2 = parent.propAvatarGroup) === null || _parent$propAvatarGro2 === void 0 ? void 0 : _parent$propAvatarGro2.shape) || shape), true), _classNames));
   var cls = classNames(classPrefix, classes, className);
   var styles = _objectSpread({
     width: sizeValue.indexOf(size) > -1 ? "" : "".concat(size, "px"),
     height: sizeValue.indexOf(size) > -1 ? "" : "".concat(size, "px"),
     backgroundColor: "".concat(background),
     color,
-    marginLeft: avatarIndex !== 1 && parent !== null && parent !== void 0 && (_parent$propAvatarGro3 = parent.propAvatarGroup) !== null && _parent$propAvatarGro3 !== void 0 && _parent$propAvatarGro3.gap ? "".concat(parent === null || parent === void 0 ? void 0 : (_parent$propAvatarGro4 = parent.propAvatarGroup) === null || _parent$propAvatarGro4 === void 0 ? void 0 : _parent$propAvatarGro4.gap, "px") : "",
-    zIndex: (parent === null || parent === void 0 ? void 0 : (_parent$propAvatarGro5 = parent.propAvatarGroup) === null || _parent$propAvatarGro5 === void 0 ? void 0 : _parent$propAvatarGro5.level) === "right" ? "".concat(Math.abs(maxSum - avatarIndex)) : ""
+    marginLeft: avatarIndex !== 1 && parent !== null && parent !== void 0 && (_parent$propAvatarGro3 = parent.propAvatarGroup) !== null && _parent$propAvatarGro3 !== void 0 && _parent$propAvatarGro3.gap ? "".concat(parent === null || parent === void 0 || (_parent$propAvatarGro4 = parent.propAvatarGroup) === null || _parent$propAvatarGro4 === void 0 ? void 0 : _parent$propAvatarGro4.gap, "px") : "",
+    zIndex: (parent === null || parent === void 0 || (_parent$propAvatarGro5 = parent.propAvatarGroup) === null || _parent$propAvatarGro5 === void 0 ? void 0 : _parent$propAvatarGro5.level) === "right" ? "".concat(Math.abs(maxSum - avatarIndex)) : ""
   }, style);
   var maxStyles = {
-    backgroundColor: "".concat(parent === null || parent === void 0 ? void 0 : (_parent$propAvatarGro6 = parent.propAvatarGroup) === null || _parent$propAvatarGro6 === void 0 ? void 0 : _parent$propAvatarGro6.maxBackground),
-    color: "".concat(parent === null || parent === void 0 ? void 0 : (_parent$propAvatarGro7 = parent.propAvatarGroup) === null || _parent$propAvatarGro7 === void 0 ? void 0 : _parent$propAvatarGro7.maxColor)
+    backgroundColor: "".concat(parent === null || parent === void 0 || (_parent$propAvatarGro6 = parent.propAvatarGroup) === null || _parent$propAvatarGro6 === void 0 ? void 0 : _parent$propAvatarGro6.maxBackground),
+    color: "".concat(parent === null || parent === void 0 || (_parent$propAvatarGro7 = parent.propAvatarGroup) === null || _parent$propAvatarGro7 === void 0 ? void 0 : _parent$propAvatarGro7.maxColor)
   };
   useEffect(function() {
     var _parent$avatarGroupRe;
-    var avatarChildren = parent === null || parent === void 0 ? void 0 : (_parent$avatarGroupRe = parent.avatarGroupRef) === null || _parent$avatarGroupRe === void 0 ? void 0 : _parent$avatarGroupRe.current.children;
+    var avatarChildren = parent === null || parent === void 0 || (_parent$avatarGroupRe = parent.avatarGroupRef) === null || _parent$avatarGroupRe === void 0 ? void 0 : _parent$avatarGroupRe.current.children;
     if (avatarChildren) {
       avatarLength(avatarChildren);
     }
   }, []);
   var avatarLength = function avatarLength2(children2) {
-    var _avatarRef$current, _avatarRef$current$da, _parent$propAvatarGro8;
+    var _avatarRef$current, _parent$propAvatarGro8;
     for (var i = 0; i < children2.length; i++) {
       if (children2[i] && children2[i].classList && children2[i].classList[0] === "nut-avatar") {
         children2[i].setAttribute("data-index", i + 1);
       }
     }
-    var index = Number(avatarRef === null || avatarRef === void 0 ? void 0 : (_avatarRef$current = avatarRef.current) === null || _avatarRef$current === void 0 ? void 0 : (_avatarRef$current$da = _avatarRef$current.dataset) === null || _avatarRef$current$da === void 0 ? void 0 : _avatarRef$current$da.index);
-    var maxCount = parent === null || parent === void 0 ? void 0 : (_parent$propAvatarGro8 = parent.propAvatarGroup) === null || _parent$propAvatarGro8 === void 0 ? void 0 : _parent$propAvatarGro8.max;
+    var index = Number(avatarRef === null || avatarRef === void 0 || (_avatarRef$current = avatarRef.current) === null || _avatarRef$current === void 0 || (_avatarRef$current = _avatarRef$current.dataset) === null || _avatarRef$current === void 0 ? void 0 : _avatarRef$current.index);
+    var maxCount = parent === null || parent === void 0 || (_parent$propAvatarGro8 = parent.propAvatarGroup) === null || _parent$propAvatarGro8 === void 0 ? void 0 : _parent$propAvatarGro8.max;
     setMaxSum(children2.length);
     setAvatarIndex(index);
     if (index === children2.length && index !== maxCount && children2.length > maxCount) {
@@ -94,13 +94,13 @@ var Avatar = function Avatar2(props) {
   var clickAvatar = function clickAvatar2(e) {
     onClick && onClick(e);
   };
-  return React__default.createElement(React__default.Fragment, null, (showMax || !(parent !== null && parent !== void 0 && (_parent$propAvatarGro9 = parent.propAvatarGroup) !== null && _parent$propAvatarGro9 !== void 0 && _parent$propAvatarGro9.max) || avatarIndex <= (parent === null || parent === void 0 ? void 0 : (_parent$propAvatarGro10 = parent.propAvatarGroup) === null || _parent$propAvatarGro10 === void 0 ? void 0 : _parent$propAvatarGro10.max)) && React__default.createElement("div", _objectSpread(_objectSpread({
+  return React__default.createElement(React__default.Fragment, null, (showMax || !(parent !== null && parent !== void 0 && (_parent$propAvatarGro9 = parent.propAvatarGroup) !== null && _parent$propAvatarGro9 !== void 0 && _parent$propAvatarGro9.max) || avatarIndex <= (parent === null || parent === void 0 || (_parent$propAvatarGro10 = parent.propAvatarGroup) === null || _parent$propAvatarGro10 === void 0 ? void 0 : _parent$propAvatarGro10.max)) && React__default.createElement("div", _objectSpread(_objectSpread({
     className: cls
   }, rest), {}, {
     style: !showMax ? styles : maxStyles,
     onClick: clickAvatar,
     ref: avatarRef
-  }), (!(parent !== null && parent !== void 0 && (_parent$propAvatarGro11 = parent.propAvatarGroup) !== null && _parent$propAvatarGro11 !== void 0 && _parent$propAvatarGro11.max) || avatarIndex <= (parent === null || parent === void 0 ? void 0 : (_parent$propAvatarGro12 = parent.propAvatarGroup) === null || _parent$propAvatarGro12 === void 0 ? void 0 : _parent$propAvatarGro12.max)) && React__default.createElement(React__default.Fragment, null, src && React__default.createElement(Image, {
+  }), (!(parent !== null && parent !== void 0 && (_parent$propAvatarGro11 = parent.propAvatarGroup) !== null && _parent$propAvatarGro11 !== void 0 && _parent$propAvatarGro11.max) || avatarIndex <= (parent === null || parent === void 0 || (_parent$propAvatarGro12 = parent.propAvatarGroup) === null || _parent$propAvatarGro12 === void 0 ? void 0 : _parent$propAvatarGro12.max)) && React__default.createElement(React__default.Fragment, null, src && React__default.createElement(Image, {
     className: "avatar-img",
     src,
     alt,
@@ -112,11 +112,11 @@ var Avatar = function Avatar2(props) {
     className: "".concat(icon.props.className || "", " icon")
   })) : null, children && React__default.createElement("span", {
     className: "text"
-  }, children), !src && !icon && !children && React__default.createElement(User, {
+  }, children), !src && !icon && !children && React__default.createElement(My, {
     className: "icon"
   })), showMax && React__default.createElement("div", {
     className: "text"
-  }, parent !== null && parent !== void 0 && (_parent$propAvatarGro13 = parent.propAvatarGroup) !== null && _parent$propAvatarGro13 !== void 0 && _parent$propAvatarGro13.maxContent ? parent === null || parent === void 0 ? void 0 : (_parent$propAvatarGro14 = parent.propAvatarGroup) === null || _parent$propAvatarGro14 === void 0 ? void 0 : _parent$propAvatarGro14.maxContent : "+ ".concat(avatarIndex - Number((parent === null || parent === void 0 ? void 0 : (_parent$propAvatarGro15 = parent.propAvatarGroup) === null || _parent$propAvatarGro15 === void 0 ? void 0 : _parent$propAvatarGro15.max) || 0)))));
+  }, parent !== null && parent !== void 0 && (_parent$propAvatarGro13 = parent.propAvatarGroup) !== null && _parent$propAvatarGro13 !== void 0 && _parent$propAvatarGro13.maxContent ? parent === null || parent === void 0 || (_parent$propAvatarGro14 = parent.propAvatarGroup) === null || _parent$propAvatarGro14 === void 0 ? void 0 : _parent$propAvatarGro14.maxContent : "+ ".concat(avatarIndex - Number((parent === null || parent === void 0 || (_parent$propAvatarGro15 = parent.propAvatarGroup) === null || _parent$propAvatarGro15 === void 0 ? void 0 : _parent$propAvatarGro15.max) || 0)))));
 };
 Avatar.defaultProps = defaultProps;
 Avatar.displayName = "NutAvatar";

package/dist/esm/AvatarCropper/style/css.js

@@ -0,0 +1 @@
+import './style.css'

package/dist/esm/AvatarCropper/style/index.js

@@ -0,0 +1,2 @@
+
+import '../../../packages/avatarcropper/avatarcropper.scss'

package/dist/esm/AvatarCropper/style/style.css

@@ -0,0 +1 @@
+.nut-avatar-cropper{position:relative;display:flex}.nut-avatar-cropper-edit-text{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#0000004d;z-index:1;color:#fff;display:flex;justify-content:center;align-items:center}.nut-avatar-cropper-input{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:2}.nut-avatar-cropper-popup{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--nut-overlay-bg-color, rgba(0, 0, 0, .7));z-index:1000}.nut-avatar-cropper-popup-canvas,.nut-avatar-cropper-popup-cut-canvas{position:absolute;bottom:0;left:0;width:100%;height:100%;z-index:1}.nut-avatar-cropper-popup-cut-canvas{z-index:0}.nut-avatar-cropper-popup-toolbar{position:absolute;bottom:0;left:0;width:100%;z-index:2}.nut-avatar-cropper-popup-toolbar.top{top:0;bottom:inherit}.nut-avatar-cropper-popup-toolbar-flex{width:100%;display:flex;justify-content:space-between}.nut-avatar-cropper-popup-toolbar-item{color:#fff;padding:15px;cursor:pointer;display:flex;align-items:center}.nut-avatar-cropper-popup-highlight{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;background-color:transparent}.nut-avatar-cropper-popup-highlight .highlight{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background-color:transparent;box-shadow:0 0 1000px 1000px #0009}

package/dist/esm/AvatarCropper.js

@@ -0,0 +1,414 @@
+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, {
+    key: "reset"
+  }, "重置"), React__default.createElement(Button, {
+    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/style/style.css

@@ -1 +1 @@
-.nut-backtop{display:none;position:fixed}.nut-backtop.show{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--nutui-gray-1, #ffffff);color:var(--nutui-gray-7, #1a1a1a);border:1px solid var(--nutui-backtop-border-color, var(--nutui-black-3, rgba(0, 0, 0, .06)));border-radius:50%}.nut-backtop.show:active{background:var(--nutui-gray-3, #f6f6f6)}.nut-backtop-main{transition:all .2s ease-in-out;color:var(--nutui-gray-7, #1a1a1a)}
+.nut-backtop{display:none;position:fixed}.nut-backtop.show{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--nutui-gray-6, #ffffff);color:var(--nutui-gray-1, #1a1a1a);border:1px solid var(--nutui-backtop-border-color, #e0e0e0);border-radius:50%}.nut-backtop.show:active{background:rgba(0,0,0,.1)}.nut-backtop-main{transition:all .2s ease-in-out}