@pointcloud/pcloud-components 0.1.21 → 0.1.23

package/dist/esm/Loading/loading.d.ts

@@ -1,9 +1,7 @@
-import { LoadingInstanceProps } from './interface';
+import { ILoadingInstance, LoadingInstanceProps } from './interface';
 import './styles/index.less';
 declare function Loading(props: LoadingInstanceProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Loading {
-    var newInstance: (args: LoadingInstanceProps) => {
-        destroy(): void;
-    };
+    var newInstance: (args?: LoadingInstanceProps | undefined) => ILoadingInstance;
 }
 export default Loading;

package/dist/esm/Loading/loading.js

@@ -6,7 +6,7 @@ var _excluded = ["delay"],
   _excluded2 = ["container"];
 import { Spin } from 'antd';
 import classNames from 'classnames';
-import { useContext, useEffect, useState } from 'react';
+import { useContext, useEffect, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
 import { ConfigContext } from "../ConfigProvider";
 import "./styles/index.less";
@@ -25,6 +25,7 @@ function Loading(props) {
     _useState2 = _slicedToArray(_useState, 2),
     visible = _useState2[0],
     setVisible = _useState2[1];
+  var timer = useRef();
   useEffect(function () {
     document.body.style.overflow = 'hidden';
     return function () {
@@ -32,11 +33,11 @@ function Loading(props) {
     };
   }, []);
   useEffect(function () {
-    var timer = setTimeout(function () {
+    timer.current = setTimeout(function () {
       return setVisible(true);
     }, delay || 0);
     return function () {
-      clearTimeout(timer);
+      clearTimeout(timer.current);
     };
   }, [delay]);
   if (!visible) return /*#__PURE__*/_jsx(_Fragment, {});
@@ -62,6 +63,7 @@ Loading.newInstance = function newNotificationInstance(args) {
     container = _ref.container,
     otherProps = _objectWithoutProperties(_ref, _excluded2);
   var div = document.createElement('div');
+
   // eslint-disable-next-line react/no-find-dom-node
   var element = ReactDOM.findDOMNode(container);
   if (element) {

package/dist/esm/Loading/styles/index.less

@@ -1,25 +1,25 @@
-@import '../../commonStyle/index.less';
-
-.@{prefix}-loading {
-  .mask {
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 100000;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-  }
-
-  .loading {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    z-index: 100001;
-    padding: 20px;
-    background: #fff;
-    border-radius: 10px;
-    box-shadow: 3px 3px 3px rgba(0, 0, 0, 20%);
-    transform: translate(-50%, -50%);
-  }
-}
+@import '../../commonStyle/index.less';
+
+.@{prefix}-loading {
+  .mask {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 100000;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  .loading {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    z-index: 100001;
+    padding: 20px;
+    background: #fff;
+    border-radius: 10px;
+    box-shadow: 3px 3px 3px rgba(0, 0, 0, 20%);
+    transform: translate(-50%, -50%);
+  }
+}

package/dist/esm/NoData/styles/index.less

@@ -1,24 +1,24 @@
-@import '../../commonStyle/index.less';
-
-.@{prefix}-nodata {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-
-  .not-data-image {
-    display: block;
-    height: 100px;
-  }
-
-  .no-data-text {
-    display: inline-block;
-    width: 100%;
-    margin-top: 5px;
-    color: #000;
-    font-weight: 400;
-    font-size: 14px;
-    text-align: center;
-    opacity: 0.65;
-  }
-}
+@import '../../commonStyle/index.less';
+
+.@{prefix}-nodata {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  .not-data-image {
+    display: block;
+    height: 100px;
+  }
+
+  .no-data-text {
+    display: inline-block;
+    width: 100%;
+    margin-top: 5px;
+    color: #000;
+    font-weight: 400;
+    font-size: 14px;
+    text-align: center;
+    opacity: 0.65;
+  }
+}

package/dist/esm/PictureCard/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ImageProps } from 'antd';
 import './index.less';
-interface IPictureCardProps extends Omit<ImageProps, 'src' | 'width'> {
+interface IPictureCardProps extends Omit<ImageProps, 'src' | 'width' | 'content'> {
     className?: string;
     layout?: 'vertical' | 'horizontal';
     src: ImageProps['src'] | ImageProps['src'][];

package/dist/esm/PictureCard/index.less

@@ -1,28 +1,28 @@
-@import '../commonStyle/index.less';
-
-.@{prefix}-picture-card {
-  display: inline-block;
-  padding: 10px;
-  transition: box-shadow 0.3s linear;
-
-  .info {
-    margin-top: 10px;
-  }
-
-  &-bordered {
-    border: 1px solid rgba(0, 0, 0, 6%);
-  }
-
-  &-hoverable {
-    &:hover {
-      cursor: pointer;
-      border-color: transparent;
-      box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 16%), 0 3px 6px rgba(0, 0, 0, 12%), 0 5px 12px 4px rgba(0, 0, 0, 9%);
-    }
-  }
-
-  &.horizontal {
-    display: flex;
-    justify-content: space-around;
-  }
-}
+@import '../commonStyle/index.less';
+
+.@{prefix}-picture-card {
+  display: inline-block;
+  padding: 10px;
+  transition: box-shadow 0.3s linear;
+
+  .info {
+    margin-top: 10px;
+  }
+
+  &-bordered {
+    border: 1px solid rgba(0, 0, 0, 6%);
+  }
+
+  &-hoverable {
+    &:hover {
+      cursor: pointer;
+      border-color: transparent;
+      box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 16%), 0 3px 6px rgba(0, 0, 0, 12%), 0 5px 12px 4px rgba(0, 0, 0, 9%);
+    }
+  }
+
+  &.horizontal {
+    display: flex;
+    justify-content: space-around;
+  }
+}

package/dist/esm/RCropper/handler.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import type { RCropperActionHandlers } from './interface';
+import type Cropper from 'cropperjs';
+export declare function createCropperHandlers(cropperInstanceRef: React.RefObject<Cropper | null>, imgTransformRef: React.RefObject<number[] | undefined>, props: {
+    onCrop?: (base64: string, file?: File) => void;
+    onZoom?: (transform: number[] | undefined) => void;
+    onRotate?: (transform: number[] | undefined) => void;
+    onFlip?: (transform: number[] | undefined) => void;
+    onReset?: (transform: number[] | undefined) => void;
+    onCancelCrop?: (info: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    }) => void;
+}): RCropperActionHandlers;

package/dist/esm/RCropper/handler.js

@@ -0,0 +1,146 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+var base64ToFile = function base64ToFile(base64) {
+  var _arr$;
+  var fileName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'file.png';
+  // 分割Base64字符串获取MIME类型和纯数据部分
+  var arr = base64.split(',');
+  var mime = arr === null || arr === void 0 || (_arr$ = arr[0]) === null || _arr$ === void 0 || (_arr$ = _arr$.match(/:(.*?);/)) === null || _arr$ === void 0 ? void 0 : _arr$[1];
+  var bstr = atob(arr[1]);
+  var n = bstr.length;
+  // 创建Uint8Array并填充数据
+  var u8arr = new Uint8Array(n);
+  while (n--) {
+    u8arr[n] = bstr.charCodeAt(n);
+  }
+  // 创建并返回File对象
+  return new File([u8arr], fileName, {
+    type: mime
+  });
+};
+export function createCropperHandlers(cropperInstanceRef, imgTransformRef, props) {
+  return {
+    handleCrop: function handleCrop() {
+      return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+        var _props$onCrop, cropper, selection, canvasEl, img, _file;
+        return _regeneratorRuntime().wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+              cropper = cropperInstanceRef.current;
+              if (cropper) {
+                _context.next = 4;
+                break;
+              }
+              return _context.abrupt("return");
+            case 4:
+              selection = cropper.getCropperSelection();
+              _context.next = 7;
+              return selection === null || selection === void 0 ? void 0 : selection.$toCanvas();
+            case 7:
+              canvasEl = _context.sent;
+              img = canvasEl === null || canvasEl === void 0 ? void 0 : canvasEl.toDataURL();
+              _file = base64ToFile(img);
+              (_props$onCrop = props.onCrop) === null || _props$onCrop === void 0 || _props$onCrop.call(props, img, _file);
+              _context.next = 15;
+              break;
+            case 13:
+              _context.prev = 13;
+              _context.t0 = _context["catch"](0);
+            case 15:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, null, [[0, 13]]);
+      }))();
+    },
+    handleZoomIn: function handleZoomIn() {
+      try {
+        var _cropperInstanceRef$c, _props$onZoom;
+        var img = (_cropperInstanceRef$c = cropperInstanceRef.current) === null || _cropperInstanceRef$c === void 0 ? void 0 : _cropperInstanceRef$c.getCropperImage();
+        img === null || img === void 0 || img.$zoom(0.1);
+        (_props$onZoom = props.onZoom) === null || _props$onZoom === void 0 || _props$onZoom.call(props, img === null || img === void 0 ? void 0 : img.$getTransform());
+      } catch (_unused2) {}
+    },
+    handleZoomOut: function handleZoomOut() {
+      try {
+        var _cropperInstanceRef$c2, _props$onZoom2;
+        var img = (_cropperInstanceRef$c2 = cropperInstanceRef.current) === null || _cropperInstanceRef$c2 === void 0 ? void 0 : _cropperInstanceRef$c2.getCropperImage();
+        img === null || img === void 0 || img.$zoom(-0.1);
+        (_props$onZoom2 = props.onZoom) === null || _props$onZoom2 === void 0 || _props$onZoom2.call(props, img === null || img === void 0 ? void 0 : img.$getTransform());
+      } catch (_unused3) {}
+    },
+    handleRotateLeft: function handleRotateLeft() {
+      try {
+        var _cropperInstanceRef$c3, _props$onRotate;
+        var img = (_cropperInstanceRef$c3 = cropperInstanceRef.current) === null || _cropperInstanceRef$c3 === void 0 ? void 0 : _cropperInstanceRef$c3.getCropperImage();
+        img === null || img === void 0 || img.$rotate('-45deg');
+        (_props$onRotate = props.onRotate) === null || _props$onRotate === void 0 || _props$onRotate.call(props, img === null || img === void 0 ? void 0 : img.$getTransform());
+      } catch (_unused4) {}
+    },
+    handleRotateRight: function handleRotateRight() {
+      try {
+        var _cropperInstanceRef$c4, _props$onRotate2;
+        var img = (_cropperInstanceRef$c4 = cropperInstanceRef.current) === null || _cropperInstanceRef$c4 === void 0 ? void 0 : _cropperInstanceRef$c4.getCropperImage();
+        img === null || img === void 0 || img.$rotate('45deg');
+        (_props$onRotate2 = props.onRotate) === null || _props$onRotate2 === void 0 || _props$onRotate2.call(props, img === null || img === void 0 ? void 0 : img.$getTransform());
+      } catch (_unused5) {}
+    },
+    handleFlipX: function handleFlipX() {
+      try {
+        var _cropperInstanceRef$c5, _props$onFlip;
+        var img = (_cropperInstanceRef$c5 = cropperInstanceRef.current) === null || _cropperInstanceRef$c5 === void 0 ? void 0 : _cropperInstanceRef$c5.getCropperImage();
+        img === null || img === void 0 || img.$scale(-1, 1);
+        (_props$onFlip = props.onFlip) === null || _props$onFlip === void 0 || _props$onFlip.call(props, img === null || img === void 0 ? void 0 : img.$getTransform());
+      } catch (_unused6) {}
+    },
+    handleFlipY: function handleFlipY() {
+      try {
+        var _cropperInstanceRef$c6, _props$onFlip2;
+        var img = (_cropperInstanceRef$c6 = cropperInstanceRef.current) === null || _cropperInstanceRef$c6 === void 0 ? void 0 : _cropperInstanceRef$c6.getCropperImage();
+        img === null || img === void 0 || img.$scale(1, -1);
+        (_props$onFlip2 = props.onFlip) === null || _props$onFlip2 === void 0 || _props$onFlip2.call(props, img === null || img === void 0 ? void 0 : img.$getTransform());
+      } catch (_unused7) {}
+    },
+    handleReset: function handleReset() {
+      try {
+        var _cropperInstanceRef$c7;
+        var img = (_cropperInstanceRef$c7 = cropperInstanceRef.current) === null || _cropperInstanceRef$c7 === void 0 ? void 0 : _cropperInstanceRef$c7.getCropperImage();
+        if (img && imgTransformRef.current) {
+          var _props$onReset;
+          var _imgTransformRef$curr = _slicedToArray(imgTransformRef.current, 6),
+            scaleX = _imgTransformRef$curr[0],
+            skewY = _imgTransformRef$curr[1],
+            skewX = _imgTransformRef$curr[2],
+            scaleY = _imgTransformRef$curr[3],
+            translateX = _imgTransformRef$curr[4],
+            translateY = _imgTransformRef$curr[5];
+          img === null || img === void 0 || img.$setTransform(scaleX, skewY, skewX, scaleY, translateX, translateY);
+          (_props$onReset = props.onReset) === null || _props$onReset === void 0 || _props$onReset.call(props, img === null || img === void 0 ? void 0 : img.$getTransform());
+        }
+      } catch (_unused8) {}
+    },
+    handleCancelCrop: function handleCancelCrop() {
+      try {
+        var _cropperInstanceRef$c8, _props$onCancelCrop;
+        var selection = (_cropperInstanceRef$c8 = cropperInstanceRef.current) === null || _cropperInstanceRef$c8 === void 0 ? void 0 : _cropperInstanceRef$c8.getCropperSelection();
+        var width = selection === null || selection === void 0 ? void 0 : selection.width;
+        var height = selection === null || selection === void 0 ? void 0 : selection.height;
+        var x = selection === null || selection === void 0 ? void 0 : selection.x;
+        var y = selection === null || selection === void 0 ? void 0 : selection.y;
+        if (width && height) {
+          selection === null || selection === void 0 || selection.$clear();
+        } else {
+          selection === null || selection === void 0 || selection.$reset();
+        }
+        (_props$onCancelCrop = props.onCancelCrop) === null || _props$onCancelCrop === void 0 || _props$onCancelCrop.call(props, {
+          x: x,
+          y: y,
+          width: width,
+          height: height
+        });
+      } catch (_unused9) {}
+    }
+  };
+}

package/dist/esm/RCropper/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { RCropperProps } from './interface';
+declare const RCropper: React.ForwardRefExoticComponent<RCropperProps & React.RefAttributes<unknown>>;
+export default RCropper;

package/dist/esm/RCropper/index.js

@@ -0,0 +1,183 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+import React, { forwardRef, useContext, useEffect, useImperativeHandle, useRef, useCallback, useMemo } from 'react';
+import Cropper, { toKebabCase } from 'cropperjs';
+import classNames from 'classnames';
+import { ConfigContext } from "../ConfigProvider";
+import { createCropperHandlers } from "./handler";
+import Toolbar from "./toolbar";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var isNonEmptyObject = function isNonEmptyObject(obj) {
+  return _typeof(obj) === 'object' && obj !== null && !Array.isArray(obj) && Object.keys(obj).length > 0;
+};
+
+/**
+ * 属性设置方法
+ * @param element DOM元素
+ * @param attrName 属性名(kebab-case)
+ * @param value 属性值
+ */
+var setElementAttribute = function setElementAttribute(element, attrName, value) {
+  if (!element) return;
+  // 处理布尔值
+  if (typeof value === 'boolean') {
+    // eslint-disable-next-line no-unused-expressions, @typescript-eslint/no-unused-expressions
+    value ? element.setAttribute(attrName, '') : element.removeAttribute(attrName);
+  } else if (value === null || value === undefined) {
+    element.removeAttribute(attrName);
+  } else {
+    element.setAttribute(attrName, String(value));
+  }
+};
+var RCropper = /*#__PURE__*/forwardRef(function (props, ref) {
+  var src = props.src,
+    _props$alt = props.alt,
+    alt = _props$alt === void 0 ? 'image' : _props$alt,
+    className = props.className,
+    style = props.style,
+    grid = props.grid,
+    canvas = props.canvas,
+    selection = props.selection,
+    dragMode = props.dragMode,
+    onCrop = props.onCrop,
+    onZoom = props.onZoom,
+    onRotate = props.onRotate,
+    onFlip = props.onFlip,
+    onReset = props.onReset,
+    onCancelCrop = props.onCancelCrop;
+  var _useContext = useContext(ConfigContext),
+    prefixCls = _useContext.prefixCls,
+    getPrefixCls = _useContext.getPrefixCls;
+  var classname = getPrefixCls('rcropper');
+  var wrapperClass = classNames(_defineProperty({}, "".concat(prefixCls, "-rcropper"), !!prefixCls), classname, className);
+  var cropperRef = useRef(null);
+  var cropperInstanceRef = useRef(null);
+  var imgTransformRef = useRef();
+  var setCropperElementAttributes = useCallback(function (elementGetter, props) {
+    var nextTick = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    if (cropperInstanceRef.current && isNonEmptyObject(props)) {
+      var element = elementGetter(cropperInstanceRef.current);
+      Object.keys(props).forEach(function (key) {
+        var kebabKey = toKebabCase(key);
+        if (props[key] !== undefined) {
+          var setAttr = function setAttr() {
+            return setElementAttribute(element, kebabKey, props[key]);
+          };
+          if (nextTick) {
+            var _element$$nextTick;
+            element === null || element === void 0 || (_element$$nextTick = element.$nextTick) === null || _element$$nextTick === void 0 || _element$$nextTick.call(element, setAttr);
+          } else {
+            setAttr();
+          }
+        }
+      });
+    }
+  }, []);
+  var setGrid = useCallback(function (_grid) {
+    setCropperElementAttributes(function (cropper) {
+      var _cropper$getCropperSe;
+      return (_cropper$getCropperSe = cropper.getCropperSelection()) === null || _cropper$getCropperSe === void 0 ? void 0 : _cropper$getCropperSe.querySelector('cropper-grid');
+    }, _grid);
+  }, []);
+  var setSelection = useCallback(function (_selection) {
+    setCropperElementAttributes(function (cropper) {
+      return cropper.getCropperSelection();
+    }, _selection, true);
+  }, []);
+  var setCanvas = useCallback(function (_canvas) {
+    setCropperElementAttributes(function (cropper) {
+      return cropper.getCropperCanvas();
+    }, _canvas, true);
+  }, []);
+  var setDragMode = function setDragMode(_dragMode) {
+    if (cropperInstanceRef.current) {
+      var selectionDom = cropperInstanceRef.current.getCropperSelection();
+      var handleDom = selectionDom === null || selectionDom === void 0 ? void 0 : selectionDom.querySelector('cropper-handle');
+      handleDom === null || handleDom === void 0 || handleDom.setAttribute('action', _dragMode || 'crop');
+    }
+  };
+  // initialize cropper options
+  var initializeOptions = useCallback(function () {
+    if (isNonEmptyObject(grid)) setGrid(grid);
+    if (isNonEmptyObject(canvas)) setCanvas(canvas);
+    if (isNonEmptyObject(selection)) setSelection(selection);
+    if (dragMode) setDragMode(dragMode);
+  }, [dragMode, grid, canvas, selection]);
+  var handleAction = useMemo(function () {
+    return createCropperHandlers(cropperInstanceRef, imgTransformRef, {
+      onCrop: onCrop,
+      onZoom: onZoom,
+      onRotate: onRotate,
+      onFlip: onFlip,
+      onReset: onReset,
+      onCancelCrop: onCancelCrop
+    });
+  }, [onCrop, onZoom, onRotate, onFlip, onReset, onCancelCrop]);
+  useImperativeHandle(ref, function () {
+    var _cropperInstanceRef$c, _cropperInstanceRef$c2, _cropperInstanceRef$c3, _cropperInstanceRef$c4, _cropperInstanceRef$c5, _cropperInstanceRef$c6;
+    return {
+      cropper: cropperInstanceRef.current,
+      image: (_cropperInstanceRef$c = (_cropperInstanceRef$c2 = cropperInstanceRef.current) === null || _cropperInstanceRef$c2 === void 0 ? void 0 : _cropperInstanceRef$c2.getCropperImage()) !== null && _cropperInstanceRef$c !== void 0 ? _cropperInstanceRef$c : null,
+      canvas: (_cropperInstanceRef$c3 = (_cropperInstanceRef$c4 = cropperInstanceRef.current) === null || _cropperInstanceRef$c4 === void 0 ? void 0 : _cropperInstanceRef$c4.getCropperCanvas()) !== null && _cropperInstanceRef$c3 !== void 0 ? _cropperInstanceRef$c3 : null,
+      selection: (_cropperInstanceRef$c5 = (_cropperInstanceRef$c6 = cropperInstanceRef.current) === null || _cropperInstanceRef$c6 === void 0 ? void 0 : _cropperInstanceRef$c6.getCropperSelection()) !== null && _cropperInstanceRef$c5 !== void 0 ? _cropperInstanceRef$c5 : null
+    };
+  });
+  // handle dragMode
+  useEffect(function () {
+    if (dragMode) {
+      setDragMode(dragMode);
+    }
+  }, [dragMode]);
+  useEffect(function () {
+    if (canvas) {
+      setCanvas(canvas);
+    }
+  }, [canvas]);
+  useEffect(function () {
+    if (selection) {
+      setSelection(selection);
+    }
+  }, [selection]);
+  useEffect(function () {
+    if (cropperInstanceRef.current) {
+      var imgDom = cropperInstanceRef.current.getCropperImage();
+      var selectionDom = cropperInstanceRef.current.getCropperSelection();
+      if (!src) {
+        imgDom === null || imgDom === void 0 || imgDom.setAttribute('src', src);
+      } else {
+        selectionDom === null || selectionDom === void 0 || selectionDom.$reset();
+        selectionDom === null || selectionDom === void 0 || selectionDom.setAttribute('hidden', 'true');
+      }
+    }
+  }, [src]);
+  useEffect(function () {
+    if (cropperRef.current && !cropperInstanceRef.current) {
+      cropperInstanceRef.current = new Cropper(cropperRef.current);
+      var img = cropperInstanceRef.current.getCropperImage();
+      var cropperCanvas = cropperInstanceRef.current.getCropperCanvas();
+      cropperCanvas === null || cropperCanvas === void 0 || cropperCanvas.$addStyles(":host { height: 100%; }");
+      img === null || img === void 0 || img.$ready(function () {
+        img.setAttribute('crossOrigin', 'Anonymous');
+        // 缓存图片初始transform
+        imgTransformRef.current = img.$getTransform();
+        initializeOptions();
+      });
+    }
+  }, []);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx("div", {
+      className: wrapperClass,
+      style: style,
+      children: /*#__PURE__*/_jsx("img", {
+        ref: cropperRef,
+        src: src,
+        alt: alt
+      })
+    }), /*#__PURE__*/_jsx(Toolbar, {
+      onAction: handleAction
+    })]
+  });
+});
+export default RCropper;

package/dist/esm/RCropper/interface.d.ts

@@ -0,0 +1,70 @@
+/// <reference types="react" />
+import type Cropper from 'cropperjs';
+import type { CropperGrid, CropperSelection, CropperImage, CropperCanvas, CropperHandle } from 'cropperjs';
+export declare type RCropperGrid = Partial<Pick<CropperGrid, 'rows' | 'columns'>>;
+export declare type RCropperSelection = Partial<Pick<CropperSelection, 'x' | 'y' | 'width' | 'height' | 'aspectRatio' | 'initialAspectRatio' | 'zoomable' | 'resizable'>>;
+export declare type RCropperImage = Partial<Pick<CropperImage, 'rotatable' | 'scalable' | 'skewable' | 'translatable'>>;
+export declare type RCropperCanvas = Partial<Pick<CropperCanvas, 'scaleStep' | 'disabled'>>;
+export interface RCropperEvents {
+    onCrop?(_src: string | undefined, _file?: File): void;
+    onZoom?(imgData: number[] | undefined): void;
+    onRotate?(imgData: number[] | undefined): void;
+    onFlip?(imgData: number[] | undefined): void;
+    onReset?(imgData: number[] | undefined): void;
+    onCancelCrop?(selectionData: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    }): void;
+}
+export interface RCropperActionHandlers {
+    handleCrop: () => Promise<void>;
+    handleZoomIn: () => void;
+    handleZoomOut: () => void;
+    handleRotateLeft: () => void;
+    handleRotateRight: () => void;
+    handleFlipX: () => void;
+    handleFlipY: () => void;
+    handleReset: () => void;
+    handleCancelCrop: () => void;
+}
+export interface RCropperRef {
+    cropper: Cropper | null;
+    image: CropperImage | null;
+    canvas: CropperCanvas | null;
+    selection: CropperSelection | null;
+}
+export interface RCropperProps extends RCropperEvents {
+    /**
+     * 图片的源地址
+     * @description 可以是本地图片路径或网络图片URL
+     */
+    src: string;
+    alt?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    /**
+     * 拖拽模式
+     * @default 'crop'
+     * @description 'crop' - 裁剪模式, 'move' - 移动模式, 'none' - 禁用拖拽
+     */
+    dragMode?: 'crop' | 'move' | 'none';
+    grid?: RCropperGrid;
+    /**
+     * 裁剪区域的配置
+     * @description 可以设置裁剪区域的宽度、高度、纵横比等属性
+     */
+    selection?: RCropperSelection;
+    /**
+     * 图片的配置
+     * @description 可以设置图片的旋转、缩放、倾斜、平移等属性
+     */
+    image?: RCropperImage;
+    /**
+     * 画布的配置
+     * @description 可以设置画布的缩放步长、禁用状态等属性
+     */
+    canvas?: RCropperCanvas;
+}
+export declare type RCropperElement = CropperCanvas | CropperGrid | CropperSelection | CropperImage | CropperHandle | null;

package/dist/esm/RCropper/interface.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/RCropper/styles/toolbar.less

@@ -0,0 +1,25 @@
+.toolbar {
+  display: flex;
+  background-color: rgba(0, 0, 0, 50%);
+  justify-content: center;
+  align-items: center;
+  color: #fff;
+
+  button {
+    background-color: transparent;
+    border-width: 0;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    // width: 32px;
+    // height: 32px;
+
+    &:hover {
+      background-color: #0074d9;
+    }
+  }
+
+  .icon > path {
+    fill: #fff;
+  }
+}