linkmore-design 1.1.3 → 1.1.4

package/dist/index.umd.js

@@ -90193,7 +90193,10 @@
         return !options.some(function (v) {
           return v.value === value;
         });
-      }) : uniqueFunc([].concat(_toConsumableArray$1(checkedValues), _toConsumableArray$1(options)), 'value');
+      }) : uniqueFunc([].concat(_toConsumableArray$1(checkedValues), _toConsumableArray$1(options.map(function (_ref3) {
+        var value = _ref3.value;
+        return value;
+      }))), 'value');
       setCheckedValues(nValue);
     }; // 取消 不执行查询操作 关闭下拉框
 
@@ -90246,9 +90249,9 @@
     }, /*#__PURE__*/React__default['default'].createElement(VirList, {
       options: options,
       className: "filter_list"
-    }, function (_ref3) {
-      var item = _ref3.item,
-          resetProps = _objectWithoutProperties$1(_ref3, _excluded$14);
+    }, function (_ref4) {
+      var item = _ref4.item,
+          resetProps = _objectWithoutProperties$1(_ref4, _excluded$14);
 
       return /*#__PURE__*/React__default['default'].createElement("div", _extends$2({}, resetProps, {
         className: classnames('filter_item', {
@@ -93018,14 +93021,26 @@
         filterQuery: filterQuery,
         type: 'basic'
       };
-    }, [state, dataSource]); // 设置筛选的值 itemValue => String || Array => ['', '', ...]
+    }, [state, dataSource]);
+    /*
+     * 设置筛选的值 itemValue => String || Array => ['', '', ...]
+     * 后端仅接受数组包字符串形式, 不接受数值及布尔值
+     */
 
     var setFilterValue = React.useCallback(function (itemValue, item) {
       var field = item.field;
 
       if (field) {
         // 将结果转换为字符串
-        var stringValue = enableAutoString ? String(itemValue) : itemValue; // 基础查询数据(受控数据)
+        var isArray = Array.isArray(itemValue);
+
+        var transformString = function transformString(val) {
+          return isArray ? val.map(function (v) {
+            return String(v);
+          }) : String(val);
+        };
+
+        var stringValue = enableAutoString ? transformString(itemValue) : itemValue; // 基础查询数据(受控数据)
 
         var basicFilter = _objectSpread(_objectSpread({}, state.basicFilter), {}, _defineProperty$1({}, field, stringValue)); // 外部查询数据结构
 
@@ -93034,7 +93049,7 @@
           fieldName: field,
           fieldType: item.valueType || 'string',
           type: item.type,
-          value: Array.isArray(stringValue) ? stringValue : [stringValue],
+          value: isArray ? stringValue : [stringValue],
           operator: item.operator || 'equal'
         })); // 数据清除时不返回结构体
 
@@ -93430,7 +93445,8 @@
   // 状态管理操作
   var reducer$1 = function reducer(state, action) {
     var fileList = action.fileList,
-        percent = action.percent;
+        percent = action.percent,
+        cropFile = action.cropFile;
 
     switch (action.type) {
       case 'changeFileList':
@@ -93443,6 +93459,11 @@
           percent: percent
         });
 
+      case 'changeCropFile':
+        return _objectSpread(_objectSpread({}, state), {}, {
+          cropFile: cropFile
+        });
+
       default:
         throw new Error();
     }
@@ -93455,7 +93476,8 @@
       upload: upload,
       process: 0,
       status: 'done',
-      fileList: defaultFileList // 用于非受控模式时的数据收集
+      fileList: defaultFileList,
+      cropFile: null // 需要裁剪的图片
 
     };
   };
@@ -181292,6 +181314,7 @@
         type = props.type,
         fileSize = props.fileSize,
         enabledOss = props.enabledOss,
+        enableCrop = props.enableCrop,
         ossConfig = props.ossConfig; // 获取当前的文件列表
 
     var getFileList = React.useCallback(function () {
@@ -181476,7 +181499,78 @@
         value: getFileList(),
         onChange: uploadSuccess
       });
-    }, [props.fileUpload, getFileList, uploadSuccess]); // 上传前的检测
+    }, [props.fileUpload, getFileList, uploadSuccess]); // 上传文件
+
+    var uploadFile = React.useCallback(function (file) {
+      enabledOss && uploadOss(file);
+      customUpload(file);
+    }, [enabledOss, uploadOss, customUpload]); // 检测完成 file
+
+    var checkOver = React.useCallback( /*#__PURE__*/function () {
+      var _ref5 = _asyncToGenerator$1( /*#__PURE__*/_regeneratorRuntime$1().mark(function _callee2(file) {
+        var res, newFile;
+        return _regeneratorRuntime$1().wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                if (props === null || props === void 0 ? void 0 : props.beforeUpload) {
+                  _context2.next = 3;
+                  break;
+                }
+
+                uploadFile(file);
+                return _context2.abrupt("return");
+
+              case 3:
+                res = props.beforeUpload(file, getFileList()); // Promise
+
+                if (!(res === null || res === void 0 ? void 0 : res.then)) {
+                  _context2.next = 16;
+                  break;
+                }
+
+                _context2.prev = 5;
+                _context2.next = 8;
+                return res;
+
+              case 8:
+                newFile = _context2.sent;
+                uploadFile(newFile);
+                _context2.next = 15;
+                break;
+
+              case 12:
+                _context2.prev = 12;
+                _context2.t0 = _context2["catch"](5);
+                console.log('上传失败!');
+
+              case 15:
+                return _context2.abrupt("return");
+
+              case 16:
+                if (res) {
+                  _context2.next = 18;
+                  break;
+                }
+
+                return _context2.abrupt("return");
+
+              case 18:
+                // () => true
+                uploadFile(file);
+
+              case 19:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2, null, [[5, 12]]);
+      }));
+
+      return function (_x2) {
+        return _ref5.apply(this, arguments);
+      };
+    }(), [props.beforeUpload, getFileList, uploadFile]); // 上传前的检测
 
     var beforeUpload = React.useCallback(function (e) {
       var files = e.target.files; // 循环文件检查是否存在不符合要求的文件
@@ -181491,31 +181585,38 @@
 
         if (item.size / 1024 / 1024 > fileSize) {
           return api$2.warning("\u6587\u4EF6\u4E0A\u4F20\u5931\u8D25\uFF01\u9644\u4EF6\u5927\u5C0F\u4E0D\u80FD\u8D85\u8FC7".concat(fileSize, "M\uFF01"), 1.5);
-        }
+        } // 可剪裁时单独处理文件
 
-        enabledOss && uploadOss(item); // 单个文件上传
 
-        customUpload(item);
+        if (enableCrop) {
+          dispatch({
+            type: 'changeCropFile',
+            cropFile: item
+          });
+        } else {
+          // 单个文件上传
+          checkOver(item);
+        }
       }
 
       return false;
-    }, [type, fileSize, uploadOss, customUpload]); // 删除事件
+    }, [type, fileSize, enableCrop, checkOver]); // 删除事件
 
     var remove = React.useCallback( /*#__PURE__*/function () {
-      var _ref5 = _asyncToGenerator$1( /*#__PURE__*/_regeneratorRuntime$1().mark(function _callee2(file) {
+      var _ref6 = _asyncToGenerator$1( /*#__PURE__*/_regeneratorRuntime$1().mark(function _callee3(file) {
         var _props$onRemove;
 
         var res, _getFileList, fileList;
 
-        return _regeneratorRuntime$1().wrap(function _callee2$(_context2) {
+        return _regeneratorRuntime$1().wrap(function _callee3$(_context3) {
           while (1) {
-            switch (_context2.prev = _context2.next) {
+            switch (_context3.prev = _context3.next) {
               case 0:
-                _context2.next = 2;
+                _context3.next = 2;
                 return (_props$onRemove = props.onRemove) === null || _props$onRemove === void 0 ? void 0 : _props$onRemove.call(props, file);
 
               case 2:
-                res = _context2.sent;
+                res = _context3.sent;
 
                 if (res) {
                   fileList = (_getFileList = getFileList()) === null || _getFileList === void 0 ? void 0 : _getFileList.filter(function (v) {
@@ -181533,14 +181634,14 @@
 
               case 4:
               case "end":
-                return _context2.stop();
+                return _context3.stop();
             }
           }
-        }, _callee2);
+        }, _callee3);
       }));
 
-      return function (_x2) {
-        return _ref5.apply(this, arguments);
+      return function (_x3) {
+        return _ref6.apply(this, arguments);
       };
     }(), [props.onRemove, getFileList, onChange, dispatch, uid]); // 点击文件链接或预览图标时的回调
 
@@ -181559,6 +181660,7 @@
       getIsMaxCount: getIsMaxCount,
       getFileFields: getFileFields,
       beforeUpload: beforeUpload,
+      checkOver: checkOver,
       getUploadStatus: getUploadStatus,
       remove: remove,
       preview: preview,
@@ -181568,8 +181670,8 @@
       getState: function getState() {
         return state;
       },
-      getFileList: getFileList // 获取文件列表
-
+      getFileList: getFileList,
+      uploadFile: uploadFile
     };
     return {
       CoreMethods: CoreMethods,
@@ -181986,6 +182088,29 @@
     });
   };
 
+  var Crop = function Crop(_ref) {
+    var instance = _ref.instance;
+    var enableCrop = instance.enableCrop,
+        state = instance.state,
+        cropConfig = instance.cropConfig,
+        checkOver = instance.checkOver;
+    if (!enableCrop) return null;
+
+    var config = _objectSpread(_objectSpread({}, cropConfig), {}, {
+      file: state.cropFile,
+      onClose: function onClose(blob, oldFile) {
+        var newFile = new File([blob], oldFile.name, {
+          type: oldFile.type
+        });
+        checkOver(newFile);
+      }
+    });
+
+    return /*#__PURE__*/React__default['default'].createElement(CropImg, _objectSpread({}, config));
+  };
+
+  var Crop$1 = /*#__PURE__*/React__default['default'].memo(Crop);
+
   // 包裹上传组件区域： 拓展其他结构
 
   var LmUploadWrapper = function LmUploadWrapper(_ref) {
@@ -181996,6 +182121,8 @@
       instance: instance
     }), /*#__PURE__*/React__default['default'].createElement(LmUploadView, {
       instance: instance
+    }), /*#__PURE__*/React__default['default'].createElement(Crop$1, {
+      instance: instance
     }));
   };
 
@@ -182112,6 +182239,7 @@
       maxCount: null,
       children: null,
       itemRender: null,
+      enabledCrop: false,
       enabledOss: false,
       // oss配置
       ossConfig: function ossConfig() {
@@ -184524,6 +184652,7 @@
       if (!left) {
         return /*#__PURE__*/React__default['default'].createElement("div", null);
       }
+
       return typeof left === 'function' ? left(table) : left;
     }; // 底部工具栏右侧插槽
 
@@ -286554,8 +286683,9 @@
     }
 
     var resetHeight = React.useMemo(function () {
-      var height = tableSize.height;
-      var h = height - 32;
+      var height = tableSize.height; // 头部高度
+
+      var h = height - (props.size === 'middle' ? 47 : 40);
 
       if (!props.hiddenPage || props.customCheck) {
         h -= 48;
@@ -320687,6 +320817,2376 @@
     }, children), document.body) : children;
   };
 
+  // 初始化状态值
+  var defaultState = {
+    // 容器盒子大小
+    resize: {
+      width: 0,
+      height: 0
+    },
+    currentIndex: 0,
+    currentUrl: '',
+    // 当前选中的图片变换
+    transform: {
+      scale: 1,
+      rotateZ: 0 // Z轴旋转方向
+
+    }
+  }; // 状态管理操作
+
+  var reducer$5 = function reducer(state, action) {
+    var resize = action.resize,
+        transform = action.transform,
+        current = action.current;
+
+    switch (action.type) {
+      case 'changeResize':
+        return _objectSpread(_objectSpread({}, state), {}, {
+          resize: resize
+        });
+
+      case 'changeTransform':
+        // 改变转换
+        return _objectSpread(_objectSpread({}, state), {}, {
+          transform: _objectSpread(_objectSpread({}, state.transform), transform)
+        });
+
+      case 'changeCurrent':
+        // 改变当前选中的图片
+        return _objectSpread(_objectSpread(_objectSpread({}, state), current), {}, {
+          transform: defaultState.transform
+        });
+
+      default:
+        throw new Error();
+    }
+  }; // 仅在初始化时触发一次
+
+  var initialState$3 = function initialState(props) {
+    var initialIndex = props.initialIndex;
+    return _objectSpread(_objectSpread({}, defaultState), {}, {
+      currentIndex: initialIndex
+    });
+  };
+
+  var useCoreOptions$2 = function useCoreOptions(_ref) {
+    var state = _ref.state,
+        dispatch = _ref.dispatch,
+        props = _ref.props,
+        bodyRef = _ref.bodyRef;
+    // 获取是否为视频格式
+    var getIsVideo = React.useCallback(function (url) {
+      var fileExtension = url.replace(/.*\./, '').toLowerCase();
+      return ['mp4', 'm2v', 'mkv', 'ogm', 'webm'].includes(fileExtension);
+    }, []);
+    var setTransform = React.useCallback(function (type) {
+      var scale = state.transform.scale * 100;
+      var rotateZ = state.transform.rotateZ;
+
+      switch (type) {
+        case 'zoomIn':
+          scale += 25;
+          break;
+
+        case 'zoomOut':
+          scale < 30 ? scale : scale -= 25;
+          break;
+
+        case 'rotateLeft':
+          rotateZ -= 90;
+          break;
+
+        case 'rotateRight':
+          rotateZ += 90;
+          break;
+      }
+
+      dispatch({
+        type: 'changeTransform',
+        transform: {
+          rotateZ: rotateZ,
+          scale: scale / 100
+        }
+      });
+    }, [state.transform]); // 切换轮播前的回调
+
+    var beforeChange = React.useCallback(function (from, currentIndex) {
+      dispatch({
+        type: 'changeCurrent',
+        current: {
+          currentIndex: currentIndex
+        }
+      });
+    }, []); // 切换轮播后的回调
+
+    var afterChange = React.useCallback(function (currentIndex) {
+      dispatch({
+        type: 'changeCurrent',
+        current: {
+          currentIndex: currentIndex
+        }
+      });
+    }, []); // 转到指定的轮播图, 直接跳转, 不展示动画
+
+    var slickGoTo = React.useCallback(function (currentIndex) {
+      bodyRef.current.goTo(currentIndex, true);
+    }, []); // 转到下一张轮播图
+
+    var slickNext = React.useCallback(function () {
+      bodyRef.current.next();
+    }, []); // 转到上一张轮播图
+
+    var slickPrev = React.useCallback(function () {
+      bodyRef.current.prev();
+    }, []); // 初始化图片索引
+
+    React.useEffect(function () {
+      slickGoTo(props.initialIndex);
+      dispatch({
+        type: 'changeCurrent',
+        current: {
+          currentIndex: props.initialIndex
+        }
+      });
+    }, [slickGoTo]);
+    var CoreMethods = {
+      getIsVideo: getIsVideo,
+      setTransform: setTransform,
+      beforeChange: beforeChange,
+      afterChange: afterChange
+    };
+    var RefMethods = {
+      getState: function getState() {
+        return state;
+      },
+      slickGoTo: slickGoTo,
+      slickNext: slickNext,
+      slickPrev: slickPrev
+    };
+    return {
+      CoreMethods: CoreMethods,
+      RefMethods: RefMethods
+    };
+  };
+
+  var BannerItem = /*#__PURE__*/React__default['default'].memo(function (_ref) {
+    var key = _ref.key,
+        index = _ref.index,
+        item = _ref.item,
+        instance = _ref.instance;
+    var state = instance.state,
+        getIsVideo = instance.getIsVideo;
+    var transformProps = React.useMemo(function () {
+      if (index !== state.currentIndex) return {};
+      var _state$transform = state.transform,
+          scale = _state$transform.scale,
+          rotateZ = _state$transform.rotateZ;
+      return {
+        transform: "scale(".concat(scale, ") rotateZ(").concat(rotateZ, "deg)")
+      };
+    }, [state.currentIndex, state.transform]); // useEffect(() => {
+    //   // 1. 创建 IntersectionObserver对象
+    //   const ob = new IntersectionObserver(
+    //     (entry) => {
+    //       console.log('可见', entry[0].isIntersecting)
+    //       if (entry[0].isIntersecting) {
+    //         // 图片可见
+    //         if (imgRef.current) {
+    //           console.log('赋值src')
+    //           imgRef.current.src = item
+    //           setLoading(true)
+    //         }
+    //         ob.unobserve(imgRef.current!)
+    //       }
+    //     },
+    //     {
+    //       root: document.querySelector('.lm_imglist_banner'),
+    //     },
+    //   )
+    //   if (imgRef.current) {
+    //     // 2. 观察img
+    //     ob.observe(imgRef.current!)
+    //     return () => {
+    //       ob.disconnect()
+    //     }
+    //   }
+    // }, [])
+
+    var renderView = React.useMemo(function () {
+      if (getIsVideo(item)) {
+        return (
+          /*#__PURE__*/
+          // @ts-ignore
+          React__default['default'].createElement("video", {
+            width: "100%",
+            height: "100%",
+            controls: "controls"
+          }, /*#__PURE__*/React__default['default'].createElement("source", {
+            src: item,
+            type: "video/mp4"
+          }), /*#__PURE__*/React__default['default'].createElement("source", {
+            src: item,
+            type: "video/webm"
+          }), /*#__PURE__*/React__default['default'].createElement("source", {
+            src: item,
+            type: "video/ogg"
+          }), "\u89C6\u9891\u64AD\u653E\u5931\u8D25\uFF01")
+        );
+      }
+
+      return /*#__PURE__*/React__default['default'].createElement("img", {
+        loading: "lazy",
+        alt: "",
+        src: item,
+        style: transformProps
+      });
+    }, [getIsVideo, item, transformProps]);
+    return /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "banner_item"
+    }, renderView);
+  });
+
+  var BigImg = function BigImg(_ref2) {
+    var instance = _ref2.instance;
+    var dataSource = instance.dataSource,
+        bodyRef = instance.bodyRef,
+        enableWheel = instance.enableWheel,
+        infinite = instance.infinite,
+        setTransform = instance.setTransform,
+        beforeChange = instance.beforeChange;
+    var onWheel = React.useCallback(function (e) {
+      if (!enableWheel) return;
+
+      if ((e === null || e === void 0 ? void 0 : e.deltaY) <= 0) {
+        setTransform('zoomIn');
+      } else {
+        setTransform('zoomOut');
+      }
+    }, [enableWheel, setTransform]);
+    var config = {
+      dots: false,
+      infinite: infinite,
+      adaptiveHeight: false,
+      beforeChange: beforeChange
+    };
+    return /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "lm_imglist_banner",
+      onClick: function onClick(e) {
+        return e.stopPropagation();
+      },
+      onWheel: onWheel
+    }, /*#__PURE__*/React__default['default'].createElement(Carousel, _objectSpread({
+      ref: bodyRef
+    }, config), dataSource.map(function (v, idx) {
+      return /*#__PURE__*/React__default['default'].createElement(BannerItem, {
+        key: v || idx,
+        index: idx,
+        item: v,
+        instance: instance
+      });
+    })));
+  };
+
+  var Banner = /*#__PURE__*/React__default['default'].memo(BigImg);
+
+  var ThumbItem = /*#__PURE__*/React__default['default'].memo(function (_ref) {
+    var index = _ref.index,
+        item = _ref.item,
+        instance = _ref.instance;
+    var state = instance.state,
+        slickGoTo = instance.slickGoTo,
+        getIsVideo = instance.getIsVideo;
+
+    var handleGoTo = function handleGoTo(e, number) {
+      e.preventDefault();
+      slickGoTo(number);
+    };
+
+    var renderView = React.useMemo(function () {
+      if (getIsVideo(item)) {
+        return /*#__PURE__*/React__default['default'].createElement(IconFont, {
+          type: "lmweb-video",
+          className: "thumb_item_icon"
+        });
+      }
+
+      return /*#__PURE__*/React__default['default'].createElement("img", {
+        loading: "lazy",
+        src: item,
+        alt: ""
+      });
+    }, [getIsVideo, item]);
+    return /*#__PURE__*/React__default['default'].createElement("div", {
+      className: classnames('thumb_item', state.currentIndex === index && 'active'),
+      onClick: function onClick(e) {
+        return handleGoTo(e, index);
+      }
+    }, renderView);
+  });
+
+  var Thumb = function Thumb(_ref2) {
+    var instance = _ref2.instance;
+    var dataSource = instance.dataSource;
+    var thumbProps = React.useMemo(function () {
+      return {
+        gridTemplateColumns: "repeat(".concat(dataSource.length, ", 90px)")
+      };
+    }, [dataSource.length]);
+    return /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "lm_imglist_thumb",
+      style: thumbProps,
+      onClick: function onClick(e) {
+        return e.stopPropagation();
+      }
+    }, dataSource.map(function (v, idx) {
+      return /*#__PURE__*/React__default['default'].createElement(ThumbItem, {
+        key: v || idx,
+        index: idx,
+        item: v,
+        instance: instance
+      });
+    }));
+  };
+
+  var Thumb$1 = /*#__PURE__*/React__default['default'].memo(Thumb);
+
+  var useIsomorphicLayoutEffect$h = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+  var Container$1 = /*#__PURE__*/React__default['default'].memo(function (_ref) {
+    var instance = _ref.instance;
+    var dispatch = instance.dispatch,
+        height = instance.height;
+    var boxContainerRef = React.useRef(null); // 获取盒子容器的大小
+
+    /** TODO: 没设默认值会导致打包失败 */
+
+    var getResize = React.useCallback(function () {
+      var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+          _ref2$blockSize = _ref2.blockSize,
+          blockSize = _ref2$blockSize === void 0 ? 0 : _ref2$blockSize,
+          _ref2$inlineSize = _ref2.inlineSize,
+          inlineSize = _ref2$inlineSize === void 0 ? 0 : _ref2$inlineSize;
+
+      dispatch({
+        type: 'changeResize',
+        resize: {
+          width: inlineSize,
+          height: blockSize
+        }
+      });
+    }, []); // 获取表格高度
+
+    useIsomorphicLayoutEffect$h(function () {
+      // 频繁变动可考虑增加防抖
+      var resizeObserver = new ResizeObserver(function (entries) {
+        var borderbox = entries[0].borderBoxSize[0];
+        getResize(borderbox);
+      });
+
+      if (boxContainerRef.current) {
+        resizeObserver.observe(boxContainerRef.current);
+      }
+
+      return function () {
+        return resizeObserver.disconnect();
+      };
+    }, [getResize]);
+    return /*#__PURE__*/React__default['default'].createElement("div", {
+      ref: boxContainerRef,
+      className: "lm_imglist_container",
+      style: {
+        height: height
+      }
+    }, /*#__PURE__*/React__default['default'].createElement(Banner, {
+      instance: instance
+    }), /*#__PURE__*/React__default['default'].createElement(Thumb$1, {
+      instance: instance
+    }));
+  });
+
+  var LmBoxWrapper = /*#__PURE__*/React__default['default'].memo(function (_ref) {
+    var instance = _ref.instance;
+    return /*#__PURE__*/React__default['default'].createElement(Container$1, {
+      instance: instance
+    });
+  });
+
+  var Root = /*#__PURE__*/React.forwardRef(function (props, ref) {
+    var bodyRef = React.useRef(null);
+    var initialState = React.useMemo(function () {
+      return initialState$3(props);
+    }, []);
+
+    var _useReducer = React.useReducer(reducer$5, initialState),
+        _useReducer2 = _slicedToArray$1(_useReducer, 2),
+        state = _useReducer2[0],
+        dispatch = _useReducer2[1]; // 获取核心Methods
+
+
+    var _useCoreOptions = useCoreOptions$2({
+      state: state,
+      dispatch: dispatch,
+      props: props,
+      bodyRef: bodyRef
+    }),
+        CoreMethods = _useCoreOptions.CoreMethods,
+        RefMethods = _useCoreOptions.RefMethods;
+
+    var instance = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, props), CoreMethods), RefMethods), {}, {
+      bodyRef: bodyRef,
+      state: state,
+      dispatch: dispatch
+    }); // 向外暴露出的方法
+
+
+    React.useImperativeHandle(ref, function () {
+      return _objectSpread(_objectSpread({}, RefMethods), {}, {
+        getState: function getState() {
+          return state;
+        }
+      });
+    });
+    return /*#__PURE__*/React__default['default'].createElement(LmBoxWrapper, {
+      instance: instance
+    });
+  });
+
+  var LmImgList = /*#__PURE__*/React.forwardRef(function (props, ref) {
+    var defaultRef = React.useRef(null);
+
+    var defaultProps = _objectSpread({
+      type: 'default',
+      height: null,
+      dataSource: [],
+      initialIndex: 1,
+      infinite: false,
+      enableWheel: false,
+      enableScale: false,
+      enableRotate: false
+    }, props);
+
+    return /*#__PURE__*/React__default['default'].createElement(Root, _objectSpread({
+      ref: ref || defaultRef
+    }, defaultProps));
+  });
+
+  var defaultState$1 = {
+    visible: false,
+    zoom: 1,
+    rotation: 0,
+    crop: {
+      x: 0,
+      y: 0
+    },
+    croppedAreaPixels: null,
+    croppedImage: null // 裁剪后的图片File
+
+  }; // 状态管理操作
+
+  var reducer$6 = function reducer(state, action) {
+    var result = action.result,
+        init = action.init;
+
+    switch (action.type) {
+      case 'changeInit':
+        return _objectSpread(_objectSpread(_objectSpread({}, state), defaultState$1), init);
+
+      case 'changeResult':
+        return _objectSpread(_objectSpread({}, state), result);
+
+      default:
+        throw new Error();
+    }
+  }; // 仅在初始化时触发一次
+
+  var initialState$4 = function initialState() {
+    return _objectSpread({}, defaultState$1);
+  };
+
+  var createImage = function createImage(url) {
+    return new Promise(function (resolve, reject) {
+      var image = new Image();
+      image.addEventListener('load', function () {
+        return resolve(image);
+      });
+      image.addEventListener('error', function (error) {
+        return reject(error);
+      });
+      image.setAttribute('crossOrigin', 'anonymous'); // needed to avoid cross-origin issues on CodeSandbox
+
+      image.src = url;
+    });
+  };
+  function getRadianAngle(degreeValue) {
+    return degreeValue * Math.PI / 180;
+  }
+  /**
+   * Returns the new bounding area of a rotated rectangle.
+   */
+
+  function rotateSize(width, height, rotation) {
+    var rotRad = getRadianAngle(rotation);
+    return {
+      width: Math.abs(Math.cos(rotRad) * width) + Math.abs(Math.sin(rotRad) * height),
+      height: Math.abs(Math.sin(rotRad) * width) + Math.abs(Math.cos(rotRad) * height)
+    };
+  }
+  /**
+   * This function was adapted from the one in the ReadMe of https://github.com/DominicTobias/react-image-crop
+   */
+
+  function getCroppedImg(_x, _x2) {
+    return _getCroppedImg.apply(this, arguments);
+  }
+
+  function _getCroppedImg() {
+    _getCroppedImg = _asyncToGenerator$1( /*#__PURE__*/_regeneratorRuntime$1().mark(function _callee(imageSrc, pixelCrop) {
+      var rotation,
+          flip,
+          image,
+          canvas,
+          ctx,
+          rotRad,
+          _rotateSize,
+          bBoxWidth,
+          bBoxHeight,
+          data,
+          _args = arguments;
+
+      return _regeneratorRuntime$1().wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              rotation = _args.length > 2 && _args[2] !== undefined ? _args[2] : 0;
+              flip = _args.length > 3 && _args[3] !== undefined ? _args[3] : {
+                horizontal: false,
+                vertical: false
+              };
+              _context.next = 4;
+              return createImage(imageSrc);
+
+            case 4:
+              image = _context.sent;
+              canvas = document.createElement('canvas');
+              ctx = canvas.getContext('2d');
+
+              if (ctx) {
+                _context.next = 9;
+                break;
+              }
+
+              return _context.abrupt("return", null);
+
+            case 9:
+              rotRad = getRadianAngle(rotation); // calculate bounding box of the rotated image
+
+              _rotateSize = rotateSize(image.width, image.height, rotation), bBoxWidth = _rotateSize.width, bBoxHeight = _rotateSize.height; // set canvas size to match the bounding box
+
+              canvas.width = bBoxWidth;
+              canvas.height = bBoxHeight; // translate canvas context to a central location to allow rotating and flipping around the center
+
+              ctx.translate(bBoxWidth / 2, bBoxHeight / 2);
+              ctx.rotate(rotRad);
+              ctx.scale(flip.horizontal ? -1 : 1, flip.vertical ? -1 : 1);
+              ctx.translate(-image.width / 2, -image.height / 2); // draw rotated image
+
+              ctx.drawImage(image, 0, 0); // croppedAreaPixels values are bounding box relative
+              // extract the cropped image using these values
+
+              data = ctx.getImageData(pixelCrop.x, pixelCrop.y, pixelCrop.width, pixelCrop.height); // set canvas width to final desired crop size - this will clear existing context
+
+              canvas.width = pixelCrop.width;
+              canvas.height = pixelCrop.height; // paste generated rotate image at the top left corner
+
+              ctx.putImageData(data, 0, 0); // As Base64 string
+              // return canvas.toDataURL('image/jpeg');
+              // As a blob
+
+              return _context.abrupt("return", new Promise(function (resolve, reject) {
+                canvas.toBlob(function (file) {
+                  // resolve(URL.createObjectURL(file))
+                  resolve(file);
+                }, 'image/jpeg');
+              }));
+
+            case 23:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+    return _getCroppedImg.apply(this, arguments);
+  }
+
+  var useCoreOptions$3 = function useCoreOptions(_ref) {
+    var state = _ref.state,
+        dispatch = _ref.dispatch,
+        props = _ref.props;
+    var file = props.file; // 本地文件URL
+
+    var imgURL = React.useMemo(function () {
+      return file && window.URL.createObjectURL(file);
+    }, [file]); // 设置transform参数
+
+    var setTransform = React.useCallback(function (obj) {
+      dispatch({
+        type: 'changeResult',
+        result: obj
+      });
+    }, [dispatch]); // 获取裁剪后的图片
+
+    var getCropImageAsync = React.useCallback(function () {
+      try {
+        return getCroppedImg(imgURL, state.croppedAreaPixels, state.rotation);
+      } catch (e) {
+        console.error('getCropImageAsync图片获取失败！', e);
+        return null;
+      }
+    }, [imgURL, state.croppedAreaPixels, state.rotation]);
+    React.useEffect(function () {
+      dispatch({
+        type: 'changeInit',
+        init: {
+          visible: !!file
+        }
+      });
+    }, [file]);
+    var CoreMethds = {
+      setTransform: setTransform,
+      getCropImageAsync: getCropImageAsync
+    };
+    var RefMethods = {
+      imgURL: imgURL
+    };
+    return {
+      CoreMethds: CoreMethds,
+      RefMethods: RefMethods
+    };
+  };
+
+  /*! *****************************************************************************
+  Copyright (c) Microsoft Corporation.
+
+  Permission to use, copy, modify, and/or distribute this software for any
+  purpose with or without fee is hereby granted.
+
+  THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+  REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+  AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+  INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+  LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+  PERFORMANCE OF THIS SOFTWARE.
+  ***************************************************************************** */
+  /* global Reflect, Promise */
+
+  var extendStatics$3 = function(d, b) {
+      extendStatics$3 = Object.setPrototypeOf ||
+          ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+          function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+      return extendStatics$3(d, b);
+  };
+
+  function __extends$3(d, b) {
+      extendStatics$3(d, b);
+      function __() { this.constructor = d; }
+      d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+  }
+
+  var __assign$2 = function() {
+      __assign$2 = Object.assign || function __assign(t) {
+          for (var s, i = 1, n = arguments.length; i < n; i++) {
+              s = arguments[i];
+              for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+          }
+          return t;
+      };
+      return __assign$2.apply(this, arguments);
+  };
+
+  /**
+   * Copyright 2004-present Facebook. All Rights Reserved.
+   *
+   * @providesModule UserAgent_DEPRECATED
+   */
+
+  /**
+   *  Provides entirely client-side User Agent and OS detection. You should prefer
+   *  the non-deprecated UserAgent module when possible, which exposes our
+   *  authoritative server-side PHP-based detection to the client.
+   *
+   *  Usage is straightforward:
+   *
+   *    if (UserAgent_DEPRECATED.ie()) {
+   *      //  IE
+   *    }
+   *
+   *  You can also do version checks:
+   *
+   *    if (UserAgent_DEPRECATED.ie() >= 7) {
+   *      //  IE7 or better
+   *    }
+   *
+   *  The browser functions will return NaN if the browser does not match, so
+   *  you can also do version compares the other way:
+   *
+   *    if (UserAgent_DEPRECATED.ie() < 7) {
+   *      //  IE6 or worse
+   *    }
+   *
+   *  Note that the version is a float and may include a minor version number,
+   *  so you should always use range operators to perform comparisons, not
+   *  strict equality.
+   *
+   *  **Note:** You should **strongly** prefer capability detection to browser
+   *  version detection where it's reasonable:
+   *
+   *    http://www.quirksmode.org/js/support.html
+   *
+   *  Further, we have a large number of mature wrapper functions and classes
+   *  which abstract away many browser irregularities. Check the documentation,
+   *  grep for things, or ask on javascript@lists.facebook.com before writing yet
+   *  another copy of "event || window.event".
+   *
+   */
+
+  var _populated = false;
+
+  // Browsers
+  var _ie, _firefox, _opera, _webkit, _chrome;
+
+  // Actual IE browser for compatibility mode
+  var _ie_real_version;
+
+  // Platforms
+  var _osx, _windows, _linux, _android;
+
+  // Architectures
+  var _win64;
+
+  // Devices
+  var _iphone, _ipad, _native;
+
+  var _mobile;
+
+  function _populate() {
+    if (_populated) {
+      return;
+    }
+
+    _populated = true;
+
+    // To work around buggy JS libraries that can't handle multi-digit
+    // version numbers, Opera 10's user agent string claims it's Opera
+    // 9, then later includes a Version/X.Y field:
+    //
+    // Opera/9.80 (foo) Presto/2.2.15 Version/10.10
+    var uas = navigator.userAgent;
+    var agent = /(?:MSIE.(\d+\.\d+))|(?:(?:Firefox|GranParadiso|Iceweasel).(\d+\.\d+))|(?:Opera(?:.+Version.|.)(\d+\.\d+))|(?:AppleWebKit.(\d+(?:\.\d+)?))|(?:Trident\/\d+\.\d+.*rv:(\d+\.\d+))/.exec(uas);
+    var os    = /(Mac OS X)|(Windows)|(Linux)/.exec(uas);
+
+    _iphone = /\b(iPhone|iP[ao]d)/.exec(uas);
+    _ipad = /\b(iP[ao]d)/.exec(uas);
+    _android = /Android/i.exec(uas);
+    _native = /FBAN\/\w+;/i.exec(uas);
+    _mobile = /Mobile/i.exec(uas);
+
+    // Note that the IE team blog would have you believe you should be checking
+    // for 'Win64; x64'.  But MSDN then reveals that you can actually be coming
+    // from either x64 or ia64;  so ultimately, you should just check for Win64
+    // as in indicator of whether you're in 64-bit IE.  32-bit IE on 64-bit
+    // Windows will send 'WOW64' instead.
+    _win64 = !!(/Win64/.exec(uas));
+
+    if (agent) {
+      _ie = agent[1] ? parseFloat(agent[1]) : (
+            agent[5] ? parseFloat(agent[5]) : NaN);
+      // IE compatibility mode
+      if (_ie && document && document.documentMode) {
+        _ie = document.documentMode;
+      }
+      // grab the "true" ie version from the trident token if available
+      var trident = /(?:Trident\/(\d+.\d+))/.exec(uas);
+      _ie_real_version = trident ? parseFloat(trident[1]) + 4 : _ie;
+
+      _firefox = agent[2] ? parseFloat(agent[2]) : NaN;
+      _opera   = agent[3] ? parseFloat(agent[3]) : NaN;
+      _webkit  = agent[4] ? parseFloat(agent[4]) : NaN;
+      if (_webkit) {
+        // We do not add the regexp to the above test, because it will always
+        // match 'safari' only since 'AppleWebKit' appears before 'Chrome' in
+        // the userAgent string.
+        agent = /(?:Chrome\/(\d+\.\d+))/.exec(uas);
+        _chrome = agent && agent[1] ? parseFloat(agent[1]) : NaN;
+      } else {
+        _chrome = NaN;
+      }
+    } else {
+      _ie = _firefox = _opera = _chrome = _webkit = NaN;
+    }
+
+    if (os) {
+      if (os[1]) {
+        // Detect OS X version.  If no version number matches, set _osx to true.
+        // Version examples:  10, 10_6_1, 10.7
+        // Parses version number as a float, taking only first two sets of
+        // digits.  If only one set of digits is found, returns just the major
+        // version number.
+        var ver = /(?:Mac OS X (\d+(?:[._]\d+)?))/.exec(uas);
+
+        _osx = ver ? parseFloat(ver[1].replace('_', '.')) : true;
+      } else {
+        _osx = false;
+      }
+      _windows = !!os[2];
+      _linux   = !!os[3];
+    } else {
+      _osx = _windows = _linux = false;
+    }
+  }
+
+  var UserAgent_DEPRECATED = {
+
+    /**
+     *  Check if the UA is Internet Explorer.
+     *
+     *
+     *  @return float|NaN Version number (if match) or NaN.
+     */
+    ie: function() {
+      return _populate() || _ie;
+    },
+
+    /**
+     * Check if we're in Internet Explorer compatibility mode.
+     *
+     * @return bool true if in compatibility mode, false if
+     * not compatibility mode or not ie
+     */
+    ieCompatibilityMode: function() {
+      return _populate() || (_ie_real_version > _ie);
+    },
+
+
+    /**
+     * Whether the browser is 64-bit IE.  Really, this is kind of weak sauce;  we
+     * only need this because Skype can't handle 64-bit IE yet.  We need to remove
+     * this when we don't need it -- tracked by #601957.
+     */
+    ie64: function() {
+      return UserAgent_DEPRECATED.ie() && _win64;
+    },
+
+    /**
+     *  Check if the UA is Firefox.
+     *
+     *
+     *  @return float|NaN Version number (if match) or NaN.
+     */
+    firefox: function() {
+      return _populate() || _firefox;
+    },
+
+
+    /**
+     *  Check if the UA is Opera.
+     *
+     *
+     *  @return float|NaN Version number (if match) or NaN.
+     */
+    opera: function() {
+      return _populate() || _opera;
+    },
+
+
+    /**
+     *  Check if the UA is WebKit.
+     *
+     *
+     *  @return float|NaN Version number (if match) or NaN.
+     */
+    webkit: function() {
+      return _populate() || _webkit;
+    },
+
+    /**
+     *  For Push
+     *  WILL BE REMOVED VERY SOON. Use UserAgent_DEPRECATED.webkit
+     */
+    safari: function() {
+      return UserAgent_DEPRECATED.webkit();
+    },
+
+    /**
+     *  Check if the UA is a Chrome browser.
+     *
+     *
+     *  @return float|NaN Version number (if match) or NaN.
+     */
+    chrome : function() {
+      return _populate() || _chrome;
+    },
+
+
+    /**
+     *  Check if the user is running Windows.
+     *
+     *  @return bool `true' if the user's OS is Windows.
+     */
+    windows: function() {
+      return _populate() || _windows;
+    },
+
+
+    /**
+     *  Check if the user is running Mac OS X.
+     *
+     *  @return float|bool   Returns a float if a version number is detected,
+     *                       otherwise true/false.
+     */
+    osx: function() {
+      return _populate() || _osx;
+    },
+
+    /**
+     * Check if the user is running Linux.
+     *
+     * @return bool `true' if the user's OS is some flavor of Linux.
+     */
+    linux: function() {
+      return _populate() || _linux;
+    },
+
+    /**
+     * Check if the user is running on an iPhone or iPod platform.
+     *
+     * @return bool `true' if the user is running some flavor of the
+     *    iPhone OS.
+     */
+    iphone: function() {
+      return _populate() || _iphone;
+    },
+
+    mobile: function() {
+      return _populate() || (_iphone || _ipad || _android || _mobile);
+    },
+
+    nativeApp: function() {
+      // webviews inside of the native apps
+      return _populate() || _native;
+    },
+
+    android: function() {
+      return _populate() || _android;
+    },
+
+    ipad: function() {
+      return _populate() || _ipad;
+    }
+  };
+
+  var UserAgent_DEPRECATED_1 = UserAgent_DEPRECATED;
+
+  /**
+   * Copyright (c) 2015, Facebook, Inc.
+   * All rights reserved.
+   *
+   * This source code is licensed under the BSD-style license found in the
+   * LICENSE file in the root directory of this source tree. An additional grant
+   * of patent rights can be found in the PATENTS file in the same directory.
+   *
+   * @providesModule ExecutionEnvironment
+   */
+
+  var canUseDOM$2 = !!(
+    typeof window !== 'undefined' &&
+    window.document &&
+    window.document.createElement
+  );
+
+  /**
+   * Simple, lightweight module assisting with the detection and context of
+   * Worker. Helps avoid circular dependencies and allows code to reason about
+   * whether or not they are in a Worker, even if they never include the main
+   * `ReactWorker` dependency.
+   */
+  var ExecutionEnvironment = {
+
+    canUseDOM: canUseDOM$2,
+
+    canUseWorkers: typeof Worker !== 'undefined',
+
+    canUseEventListeners:
+      canUseDOM$2 && !!(window.addEventListener || window.attachEvent),
+
+    canUseViewport: canUseDOM$2 && !!window.screen,
+
+    isInWorker: !canUseDOM$2 // For now, this is true - might change in the future.
+
+  };
+
+  var ExecutionEnvironment_1 = ExecutionEnvironment;
+
+  var useHasFeature;
+  if (ExecutionEnvironment_1.canUseDOM) {
+    useHasFeature =
+      document.implementation &&
+      document.implementation.hasFeature &&
+      // always returns true in newer browsers as per the standard.
+      // @see http://dom.spec.whatwg.org/#dom-domimplementation-hasfeature
+      document.implementation.hasFeature('', '') !== true;
+  }
+
+  /**
+   * Checks if an event is supported in the current execution environment.
+   *
+   * NOTE: This will not work correctly for non-generic events such as `change`,
+   * `reset`, `load`, `error`, and `select`.
+   *
+   * Borrows from Modernizr.
+   *
+   * @param {string} eventNameSuffix Event name, e.g. "click".
+   * @param {?boolean} capture Check if the capture phase is supported.
+   * @return {boolean} True if the event is supported.
+   * @internal
+   * @license Modernizr 3.0.0pre (Custom Build) | MIT
+   */
+  function isEventSupported(eventNameSuffix, capture) {
+    if (!ExecutionEnvironment_1.canUseDOM ||
+        capture && !('addEventListener' in document)) {
+      return false;
+    }
+
+    var eventName = 'on' + eventNameSuffix;
+    var isSupported = eventName in document;
+
+    if (!isSupported) {
+      var element = document.createElement('div');
+      element.setAttribute(eventName, 'return;');
+      isSupported = typeof element[eventName] === 'function';
+    }
+
+    if (!isSupported && useHasFeature && eventNameSuffix === 'wheel') {
+      // This is the only way to test support for the `wheel` event in IE9+.
+      isSupported = document.implementation.hasFeature('Events.wheel', '3.0');
+    }
+
+    return isSupported;
+  }
+
+  var isEventSupported_1 = isEventSupported;
+
+  // Reasonable defaults
+  var PIXEL_STEP  = 10;
+  var LINE_HEIGHT = 40;
+  var PAGE_HEIGHT = 800;
+
+  /**
+   * Mouse wheel (and 2-finger trackpad) support on the web sucks.  It is
+   * complicated, thus this doc is long and (hopefully) detailed enough to answer
+   * your questions.
+   *
+   * If you need to react to the mouse wheel in a predictable way, this code is
+   * like your bestest friend. * hugs *
+   *
+   * As of today, there are 4 DOM event types you can listen to:
+   *
+   *   'wheel'                -- Chrome(31+), FF(17+), IE(9+)
+   *   'mousewheel'           -- Chrome, IE(6+), Opera, Safari
+   *   'MozMousePixelScroll'  -- FF(3.5 only!) (2010-2013) -- don't bother!
+   *   'DOMMouseScroll'       -- FF(0.9.7+) since 2003
+   *
+   * So what to do?  The is the best:
+   *
+   *   normalizeWheel.getEventType();
+   *
+   * In your event callback, use this code to get sane interpretation of the
+   * deltas.  This code will return an object with properties:
+   *
+   *   spinX   -- normalized spin speed (use for zoom) - x plane
+   *   spinY   -- " - y plane
+   *   pixelX  -- normalized distance (to pixels) - x plane
+   *   pixelY  -- " - y plane
+   *
+   * Wheel values are provided by the browser assuming you are using the wheel to
+   * scroll a web page by a number of lines or pixels (or pages).  Values can vary
+   * significantly on different platforms and browsers, forgetting that you can
+   * scroll at different speeds.  Some devices (like trackpads) emit more events
+   * at smaller increments with fine granularity, and some emit massive jumps with
+   * linear speed or acceleration.
+   *
+   * This code does its best to normalize the deltas for you:
+   *
+   *   - spin is trying to normalize how far the wheel was spun (or trackpad
+   *     dragged).  This is super useful for zoom support where you want to
+   *     throw away the chunky scroll steps on the PC and make those equal to
+   *     the slow and smooth tiny steps on the Mac. Key data: This code tries to
+   *     resolve a single slow step on a wheel to 1.
+   *
+   *   - pixel is normalizing the desired scroll delta in pixel units.  You'll
+   *     get the crazy differences between browsers, but at least it'll be in
+   *     pixels!
+   *
+   *   - positive value indicates scrolling DOWN/RIGHT, negative UP/LEFT.  This
+   *     should translate to positive value zooming IN, negative zooming OUT.
+   *     This matches the newer 'wheel' event.
+   *
+   * Why are there spinX, spinY (or pixels)?
+   *
+   *   - spinX is a 2-finger side drag on the trackpad, and a shift + wheel turn
+   *     with a mouse.  It results in side-scrolling in the browser by default.
+   *
+   *   - spinY is what you expect -- it's the classic axis of a mouse wheel.
+   *
+   *   - I dropped spinZ/pixelZ.  It is supported by the DOM 3 'wheel' event and
+   *     probably is by browsers in conjunction with fancy 3D controllers .. but
+   *     you know.
+   *
+   * Implementation info:
+   *
+   * Examples of 'wheel' event if you scroll slowly (down) by one step with an
+   * average mouse:
+   *
+   *   OS X + Chrome  (mouse)     -    4   pixel delta  (wheelDelta -120)
+   *   OS X + Safari  (mouse)     -  N/A   pixel delta  (wheelDelta  -12)
+   *   OS X + Firefox (mouse)     -    0.1 line  delta  (wheelDelta  N/A)
+   *   Win8 + Chrome  (mouse)     -  100   pixel delta  (wheelDelta -120)
+   *   Win8 + Firefox (mouse)     -    3   line  delta  (wheelDelta -120)
+   *
+   * On the trackpad:
+   *
+   *   OS X + Chrome  (trackpad)  -    2   pixel delta  (wheelDelta   -6)
+   *   OS X + Firefox (trackpad)  -    1   pixel delta  (wheelDelta  N/A)
+   *
+   * On other/older browsers.. it's more complicated as there can be multiple and
+   * also missing delta values.
+   *
+   * The 'wheel' event is more standard:
+   *
+   * http://www.w3.org/TR/DOM-Level-3-Events/#events-wheelevents
+   *
+   * The basics is that it includes a unit, deltaMode (pixels, lines, pages), and
+   * deltaX, deltaY and deltaZ.  Some browsers provide other values to maintain
+   * backward compatibility with older events.  Those other values help us
+   * better normalize spin speed.  Example of what the browsers provide:
+   *
+   *                          | event.wheelDelta | event.detail
+   *        ------------------+------------------+--------------
+   *          Safari v5/OS X  |       -120       |       0
+   *          Safari v5/Win7  |       -120       |       0
+   *         Chrome v17/OS X  |       -120       |       0
+   *         Chrome v17/Win7  |       -120       |       0
+   *                IE9/Win7  |       -120       |   undefined
+   *         Firefox v4/OS X  |     undefined    |       1
+   *         Firefox v4/Win7  |     undefined    |       3
+   *
+   */
+  function normalizeWheel(/*object*/ event) /*object*/ {
+    var sX = 0, sY = 0,       // spinX, spinY
+        pX = 0, pY = 0;       // pixelX, pixelY
+
+    // Legacy
+    if ('detail'      in event) { sY = event.detail; }
+    if ('wheelDelta'  in event) { sY = -event.wheelDelta / 120; }
+    if ('wheelDeltaY' in event) { sY = -event.wheelDeltaY / 120; }
+    if ('wheelDeltaX' in event) { sX = -event.wheelDeltaX / 120; }
+
+    // side scrolling on FF with DOMMouseScroll
+    if ( 'axis' in event && event.axis === event.HORIZONTAL_AXIS ) {
+      sX = sY;
+      sY = 0;
+    }
+
+    pX = sX * PIXEL_STEP;
+    pY = sY * PIXEL_STEP;
+
+    if ('deltaY' in event) { pY = event.deltaY; }
+    if ('deltaX' in event) { pX = event.deltaX; }
+
+    if ((pX || pY) && event.deltaMode) {
+      if (event.deltaMode == 1) {          // delta in LINE units
+        pX *= LINE_HEIGHT;
+        pY *= LINE_HEIGHT;
+      } else {                             // delta in PAGE units
+        pX *= PAGE_HEIGHT;
+        pY *= PAGE_HEIGHT;
+      }
+    }
+
+    // Fall-back if spin cannot be determined
+    if (pX && !sX) { sX = (pX < 1) ? -1 : 1; }
+    if (pY && !sY) { sY = (pY < 1) ? -1 : 1; }
+
+    return { spinX  : sX,
+             spinY  : sY,
+             pixelX : pX,
+             pixelY : pY };
+  }
+
+
+  /**
+   * The best combination if you prefer spinX + spinY normalization.  It favors
+   * the older DOMMouseScroll for Firefox, as FF does not include wheelDelta with
+   * 'wheel' event, making spin speed determination impossible.
+   */
+  normalizeWheel.getEventType = function() /*string*/ {
+    return (UserAgent_DEPRECATED_1.firefox())
+             ? 'DOMMouseScroll'
+             : (isEventSupported_1('wheel'))
+                 ? 'wheel'
+                 : 'mousewheel';
+  };
+
+  var normalizeWheel_1 = normalizeWheel;
+
+  var normalizeWheel$1 = normalizeWheel_1;
+
+  /**
+   * Compute the dimension of the crop area based on media size,
+   * aspect ratio and optionally rotation
+   */
+
+  function getCropSize(mediaWidth, mediaHeight, containerWidth, containerHeight, aspect, rotation) {
+    if (rotation === void 0) {
+      rotation = 0;
+    }
+
+    var _a = rotateSize$1(mediaWidth, mediaHeight, rotation),
+        width = _a.width,
+        height = _a.height;
+
+    var fittingWidth = Math.min(width, containerWidth);
+    var fittingHeight = Math.min(height, containerHeight);
+
+    if (fittingWidth > fittingHeight * aspect) {
+      return {
+        width: fittingHeight * aspect,
+        height: fittingHeight
+      };
+    }
+
+    return {
+      width: fittingWidth,
+      height: fittingWidth / aspect
+    };
+  }
+  /**
+   * Compute media zoom.
+   * We fit the media into the container with "max-width: 100%; max-height: 100%;"
+   */
+
+  function getMediaZoom(mediaSize) {
+    // Take the axis with more pixels to improve accuracy
+    return mediaSize.width > mediaSize.height ? mediaSize.width / mediaSize.naturalWidth : mediaSize.height / mediaSize.naturalHeight;
+  }
+  /**
+   * Ensure a new media position stays in the crop area.
+   */
+
+  function restrictPosition(position, mediaSize, cropSize, zoom, rotation) {
+    if (rotation === void 0) {
+      rotation = 0;
+    }
+
+    var _a = rotateSize$1(mediaSize.width, mediaSize.height, rotation),
+        width = _a.width,
+        height = _a.height;
+
+    return {
+      x: restrictPositionCoord(position.x, width, cropSize.width, zoom),
+      y: restrictPositionCoord(position.y, height, cropSize.height, zoom)
+    };
+  }
+
+  function restrictPositionCoord(position, mediaSize, cropSize, zoom) {
+    var maxPosition = mediaSize * zoom / 2 - cropSize / 2;
+    return clamp$2(position, -maxPosition, maxPosition);
+  }
+
+  function getDistanceBetweenPoints(pointA, pointB) {
+    return Math.sqrt(Math.pow(pointA.y - pointB.y, 2) + Math.pow(pointA.x - pointB.x, 2));
+  }
+  function getRotationBetweenPoints(pointA, pointB) {
+    return Math.atan2(pointB.y - pointA.y, pointB.x - pointA.x) * 180 / Math.PI;
+  }
+  /**
+   * Compute the output cropped area of the media in percentages and pixels.
+   * x/y are the top-left coordinates on the src media
+   */
+
+  function computeCroppedArea(crop, mediaSize, cropSize, aspect, zoom, rotation, restrictPosition) {
+    if (rotation === void 0) {
+      rotation = 0;
+    }
+
+    if (restrictPosition === void 0) {
+      restrictPosition = true;
+    } // if the media is rotated by the user, we cannot limit the position anymore
+    // as it might need to be negative.
+
+
+    var limitAreaFn = restrictPosition ? limitArea : noOp;
+    var mediaBBoxSize = rotateSize$1(mediaSize.width, mediaSize.height, rotation);
+    var mediaNaturalBBoxSize = rotateSize$1(mediaSize.naturalWidth, mediaSize.naturalHeight, rotation); // calculate the crop area in percentages
+    // in the rotated space
+
+    var croppedAreaPercentages = {
+      x: limitAreaFn(100, ((mediaBBoxSize.width - cropSize.width / zoom) / 2 - crop.x / zoom) / mediaBBoxSize.width * 100),
+      y: limitAreaFn(100, ((mediaBBoxSize.height - cropSize.height / zoom) / 2 - crop.y / zoom) / mediaBBoxSize.height * 100),
+      width: limitAreaFn(100, cropSize.width / mediaBBoxSize.width * 100 / zoom),
+      height: limitAreaFn(100, cropSize.height / mediaBBoxSize.height * 100 / zoom)
+    }; // we compute the pixels size naively
+
+    var widthInPixels = Math.round(limitAreaFn(mediaNaturalBBoxSize.width, croppedAreaPercentages.width * mediaNaturalBBoxSize.width / 100));
+    var heightInPixels = Math.round(limitAreaFn(mediaNaturalBBoxSize.height, croppedAreaPercentages.height * mediaNaturalBBoxSize.height / 100));
+    var isImgWiderThanHigh = mediaNaturalBBoxSize.width >= mediaNaturalBBoxSize.height * aspect; // then we ensure the width and height exactly match the aspect (to avoid rounding approximations)
+    // if the media is wider than high, when zoom is 0, the crop height will be equals to image height
+    // thus we want to compute the width from the height and aspect for accuracy.
+    // Otherwise, we compute the height from width and aspect.
+
+    var sizePixels = isImgWiderThanHigh ? {
+      width: Math.round(heightInPixels * aspect),
+      height: heightInPixels
+    } : {
+      width: widthInPixels,
+      height: Math.round(widthInPixels / aspect)
+    };
+
+    var croppedAreaPixels = __assign$2(__assign$2({}, sizePixels), {
+      x: Math.round(limitAreaFn(mediaNaturalBBoxSize.width - sizePixels.width, croppedAreaPercentages.x * mediaNaturalBBoxSize.width / 100)),
+      y: Math.round(limitAreaFn(mediaNaturalBBoxSize.height - sizePixels.height, croppedAreaPercentages.y * mediaNaturalBBoxSize.height / 100))
+    });
+
+    return {
+      croppedAreaPercentages: croppedAreaPercentages,
+      croppedAreaPixels: croppedAreaPixels
+    };
+  }
+  /**
+   * Ensure the returned value is between 0 and max
+   */
+
+  function limitArea(max, value) {
+    return Math.min(max, Math.max(0, value));
+  }
+
+  function noOp(_max, value) {
+    return value;
+  }
+  /**
+   * Compute crop and zoom from the croppedAreaPercentages.
+   */
+
+
+  function getInitialCropFromCroppedAreaPercentages(croppedAreaPercentages, mediaSize, rotation, cropSize, minZoom, maxZoom) {
+    var mediaBBoxSize = rotateSize$1(mediaSize.width, mediaSize.height, rotation); // This is the inverse process of computeCroppedArea
+
+    var zoom = clamp$2(cropSize.width / mediaBBoxSize.width * (100 / croppedAreaPercentages.width), minZoom, maxZoom);
+    var crop = {
+      x: zoom * mediaBBoxSize.width / 2 - cropSize.width / 2 - mediaBBoxSize.width * zoom * (croppedAreaPercentages.x / 100),
+      y: zoom * mediaBBoxSize.height / 2 - cropSize.height / 2 - mediaBBoxSize.height * zoom * (croppedAreaPercentages.y / 100)
+    };
+    return {
+      crop: crop,
+      zoom: zoom
+    };
+  }
+  /**
+   * Compute zoom from the croppedAreaPixels
+   */
+
+  function getZoomFromCroppedAreaPixels(croppedAreaPixels, mediaSize, cropSize) {
+    var mediaZoom = getMediaZoom(mediaSize);
+    return cropSize.height > cropSize.width ? cropSize.height / (croppedAreaPixels.height * mediaZoom) : cropSize.width / (croppedAreaPixels.width * mediaZoom);
+  }
+  /**
+   * Compute crop and zoom from the croppedAreaPixels
+   */
+
+
+  function getInitialCropFromCroppedAreaPixels(croppedAreaPixels, mediaSize, rotation, cropSize, minZoom, maxZoom) {
+    if (rotation === void 0) {
+      rotation = 0;
+    }
+
+    var mediaNaturalBBoxSize = rotateSize$1(mediaSize.naturalWidth, mediaSize.naturalHeight, rotation);
+    var zoom = clamp$2(getZoomFromCroppedAreaPixels(croppedAreaPixels, mediaSize, cropSize), minZoom, maxZoom);
+    var cropZoom = cropSize.height > cropSize.width ? cropSize.height / croppedAreaPixels.height : cropSize.width / croppedAreaPixels.width;
+    var crop = {
+      x: ((mediaNaturalBBoxSize.width - croppedAreaPixels.width) / 2 - croppedAreaPixels.x) * cropZoom,
+      y: ((mediaNaturalBBoxSize.height - croppedAreaPixels.height) / 2 - croppedAreaPixels.y) * cropZoom
+    };
+    return {
+      crop: crop,
+      zoom: zoom
+    };
+  }
+  /**
+   * Return the point that is the center of point a and b
+   */
+
+  function getCenter(a, b) {
+    return {
+      x: (b.x + a.x) / 2,
+      y: (b.y + a.y) / 2
+    };
+  }
+  function getRadianAngle$1(degreeValue) {
+    return degreeValue * Math.PI / 180;
+  }
+  /**
+   * Returns the new bounding area of a rotated rectangle.
+   */
+
+  function rotateSize$1(width, height, rotation) {
+    var rotRad = getRadianAngle$1(rotation);
+    return {
+      width: Math.abs(Math.cos(rotRad) * width) + Math.abs(Math.sin(rotRad) * height),
+      height: Math.abs(Math.sin(rotRad) * width) + Math.abs(Math.cos(rotRad) * height)
+    };
+  }
+  /**
+   * Clamp value between min and max
+   */
+
+  function clamp$2(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+  }
+  /**
+   * Combine multiple class names into a single string.
+   */
+
+  function classNames() {
+    var args = [];
+
+    for (var _i = 0; _i < arguments.length; _i++) {
+      args[_i] = arguments[_i];
+    }
+
+    return args.filter(function (value) {
+      if (typeof value === 'string' && value.length > 0) {
+        return true;
+      }
+
+      return false;
+    }).join(' ').trim();
+  }
+
+  var css_248z = ".reactEasyCrop_Container {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  overflow: hidden;\n  user-select: none;\n  touch-action: none;\n  cursor: move;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.reactEasyCrop_Image,\n.reactEasyCrop_Video {\n  will-change: transform; /* this improves performances and prevent painting issues on iOS Chrome */\n}\n\n.reactEasyCrop_Contain {\n  max-width: 100%;\n  max-height: 100%;\n  margin: auto;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n}\n.reactEasyCrop_Cover_Horizontal {\n  width: 100%;\n  height: auto;\n}\n.reactEasyCrop_Cover_Vertical {\n  width: auto;\n  height: 100%;\n}\n\n.reactEasyCrop_CropArea {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);\n  border: 1px solid rgba(255, 255, 255, 0.5);\n  box-sizing: border-box;\n  box-shadow: 0 0 0 9999em;\n  color: rgba(0, 0, 0, 0.5);\n  overflow: hidden;\n}\n\n.reactEasyCrop_CropAreaRound {\n  border-radius: 50%;\n}\n\n.reactEasyCrop_CropAreaGrid::before {\n  content: ' ';\n  box-sizing: border-box;\n  position: absolute;\n  border: 1px solid rgba(255, 255, 255, 0.5);\n  top: 0;\n  bottom: 0;\n  left: 33.33%;\n  right: 33.33%;\n  border-top: 0;\n  border-bottom: 0;\n}\n\n.reactEasyCrop_CropAreaGrid::after {\n  content: ' ';\n  box-sizing: border-box;\n  position: absolute;\n  border: 1px solid rgba(255, 255, 255, 0.5);\n  top: 33.33%;\n  bottom: 33.33%;\n  left: 0;\n  right: 0;\n  border-left: 0;\n  border-right: 0;\n}\n";
+
+  var MIN_ZOOM = 1;
+  var MAX_ZOOM = 3;
+
+  var Cropper =
+  /** @class */
+  function (_super) {
+    __extends$3(Cropper, _super);
+
+    function Cropper() {
+      var _this = _super !== null && _super.apply(this, arguments) || this;
+
+      _this.imageRef = /*#__PURE__*/React__default['default'].createRef();
+      _this.videoRef = /*#__PURE__*/React__default['default'].createRef();
+      _this.containerRef = null;
+      _this.styleRef = null;
+      _this.containerRect = null;
+      _this.mediaSize = {
+        width: 0,
+        height: 0,
+        naturalWidth: 0,
+        naturalHeight: 0
+      };
+      _this.dragStartPosition = {
+        x: 0,
+        y: 0
+      };
+      _this.dragStartCrop = {
+        x: 0,
+        y: 0
+      };
+      _this.lastPinchDistance = 0;
+      _this.lastPinchRotation = 0;
+      _this.rafDragTimeout = null;
+      _this.rafPinchTimeout = null;
+      _this.wheelTimer = null;
+      _this.currentDoc = document;
+      _this.currentWindow = window;
+      _this.state = {
+        cropSize: null,
+        hasWheelJustStarted: false
+      }; // this is to prevent Safari on iOS >= 10 to zoom the page
+
+      _this.preventZoomSafari = function (e) {
+        return e.preventDefault();
+      };
+
+      _this.cleanEvents = function () {
+        _this.currentDoc.removeEventListener('mousemove', _this.onMouseMove);
+
+        _this.currentDoc.removeEventListener('mouseup', _this.onDragStopped);
+
+        _this.currentDoc.removeEventListener('touchmove', _this.onTouchMove);
+
+        _this.currentDoc.removeEventListener('touchend', _this.onDragStopped);
+      };
+
+      _this.clearScrollEvent = function () {
+        if (_this.containerRef) _this.containerRef.removeEventListener('wheel', _this.onWheel);
+
+        if (_this.wheelTimer) {
+          clearTimeout(_this.wheelTimer);
+        }
+      };
+
+      _this.onMediaLoad = function () {
+        var cropSize = _this.computeSizes();
+
+        if (cropSize) {
+          _this.emitCropData();
+
+          _this.setInitialCrop(cropSize);
+        }
+
+        if (_this.props.onMediaLoaded) {
+          _this.props.onMediaLoaded(_this.mediaSize);
+        }
+      };
+
+      _this.setInitialCrop = function (cropSize) {
+        if (_this.props.initialCroppedAreaPercentages) {
+          var _a = getInitialCropFromCroppedAreaPercentages(_this.props.initialCroppedAreaPercentages, _this.mediaSize, _this.props.rotation, cropSize, _this.props.minZoom, _this.props.maxZoom),
+              crop = _a.crop,
+              zoom = _a.zoom;
+
+          _this.props.onCropChange(crop);
+
+          _this.props.onZoomChange && _this.props.onZoomChange(zoom);
+        } else if (_this.props.initialCroppedAreaPixels) {
+          var _b = getInitialCropFromCroppedAreaPixels(_this.props.initialCroppedAreaPixels, _this.mediaSize, _this.props.rotation, cropSize, _this.props.minZoom, _this.props.maxZoom),
+              crop = _b.crop,
+              zoom = _b.zoom;
+
+          _this.props.onCropChange(crop);
+
+          _this.props.onZoomChange && _this.props.onZoomChange(zoom);
+        }
+      };
+
+      _this.computeSizes = function () {
+        var _a, _b, _c, _d, _e, _f;
+
+        var mediaRef = _this.imageRef.current || _this.videoRef.current;
+
+        if (mediaRef && _this.containerRef) {
+          _this.containerRect = _this.containerRef.getBoundingClientRect();
+          var containerAspect = _this.containerRect.width / _this.containerRect.height;
+          var naturalWidth = ((_a = _this.imageRef.current) === null || _a === void 0 ? void 0 : _a.naturalWidth) || ((_b = _this.videoRef.current) === null || _b === void 0 ? void 0 : _b.videoWidth) || 0;
+          var naturalHeight = ((_c = _this.imageRef.current) === null || _c === void 0 ? void 0 : _c.naturalHeight) || ((_d = _this.videoRef.current) === null || _d === void 0 ? void 0 : _d.videoHeight) || 0;
+          var isMediaScaledDown = mediaRef.offsetWidth < naturalWidth || mediaRef.offsetHeight < naturalHeight;
+          var mediaAspect = naturalWidth / naturalHeight; // We do not rely on the offsetWidth/offsetHeight if the media is scaled down
+          // as the values they report are rounded. That will result in precision losses
+          // when calculating zoom. We use the fact that the media is positionned relative
+          // to the container. That allows us to use the container's dimensions
+          // and natural aspect ratio of the media to calculate accurate media size.
+          // However, for this to work, the container should not be rotated
+
+          var renderedMediaSize = void 0;
+
+          if (isMediaScaledDown) {
+            switch (_this.props.objectFit) {
+              default:
+              case 'contain':
+                renderedMediaSize = containerAspect > mediaAspect ? {
+                  width: _this.containerRect.height * mediaAspect,
+                  height: _this.containerRect.height
+                } : {
+                  width: _this.containerRect.width,
+                  height: _this.containerRect.width / mediaAspect
+                };
+                break;
+
+              case 'horizontal-cover':
+                renderedMediaSize = {
+                  width: _this.containerRect.width,
+                  height: _this.containerRect.width / mediaAspect
+                };
+                break;
+
+              case 'vertical-cover':
+                renderedMediaSize = {
+                  width: _this.containerRect.height * mediaAspect,
+                  height: _this.containerRect.height
+                };
+                break;
+
+              case 'auto-cover':
+                renderedMediaSize = naturalWidth > naturalHeight ? {
+                  width: _this.containerRect.width,
+                  height: _this.containerRect.width / mediaAspect
+                } : {
+                  width: _this.containerRect.height * mediaAspect,
+                  height: _this.containerRect.height
+                };
+                break;
+            }
+          } else {
+            renderedMediaSize = {
+              width: mediaRef.offsetWidth,
+              height: mediaRef.offsetHeight
+            };
+          }
+
+          _this.mediaSize = __assign$2(__assign$2({}, renderedMediaSize), {
+            naturalWidth: naturalWidth,
+            naturalHeight: naturalHeight
+          }); // set media size in the parent
+
+          if (_this.props.setMediaSize) {
+            _this.props.setMediaSize(_this.mediaSize);
+          }
+
+          var cropSize = _this.props.cropSize ? _this.props.cropSize : getCropSize(_this.mediaSize.width, _this.mediaSize.height, _this.containerRect.width, _this.containerRect.height, _this.props.aspect, _this.props.rotation);
+
+          if (((_e = _this.state.cropSize) === null || _e === void 0 ? void 0 : _e.height) !== cropSize.height || ((_f = _this.state.cropSize) === null || _f === void 0 ? void 0 : _f.width) !== cropSize.width) {
+            _this.props.onCropSizeChange && _this.props.onCropSizeChange(cropSize);
+          }
+
+          _this.setState({
+            cropSize: cropSize
+          }, _this.recomputeCropPosition); // pass crop size to parent
+
+
+          if (_this.props.setCropSize) {
+            _this.props.setCropSize(cropSize);
+          }
+
+          return cropSize;
+        }
+      };
+
+      _this.onMouseDown = function (e) {
+        e.preventDefault();
+
+        _this.currentDoc.addEventListener('mousemove', _this.onMouseMove);
+
+        _this.currentDoc.addEventListener('mouseup', _this.onDragStopped);
+
+        _this.onDragStart(Cropper.getMousePoint(e));
+      };
+
+      _this.onMouseMove = function (e) {
+        return _this.onDrag(Cropper.getMousePoint(e));
+      };
+
+      _this.onTouchStart = function (e) {
+        if (_this.props.onTouchRequest && !_this.props.onTouchRequest(e)) {
+          return;
+        }
+
+        _this.currentDoc.addEventListener('touchmove', _this.onTouchMove, {
+          passive: false
+        }); // iOS 11 now defaults to passive: true
+
+
+        _this.currentDoc.addEventListener('touchend', _this.onDragStopped);
+
+        if (e.touches.length === 2) {
+          _this.onPinchStart(e);
+        } else if (e.touches.length === 1) {
+          _this.onDragStart(Cropper.getTouchPoint(e.touches[0]));
+        }
+      };
+
+      _this.onTouchMove = function (e) {
+        // Prevent whole page from scrolling on iOS.
+        e.preventDefault();
+
+        if (e.touches.length === 2) {
+          _this.onPinchMove(e);
+        } else if (e.touches.length === 1) {
+          _this.onDrag(Cropper.getTouchPoint(e.touches[0]));
+        }
+      };
+
+      _this.onDragStart = function (_a) {
+        var _b, _c;
+
+        var x = _a.x,
+            y = _a.y;
+        _this.dragStartPosition = {
+          x: x,
+          y: y
+        };
+        _this.dragStartCrop = __assign$2({}, _this.props.crop);
+        (_c = (_b = _this.props).onInteractionStart) === null || _c === void 0 ? void 0 : _c.call(_b);
+      };
+
+      _this.onDrag = function (_a) {
+        var x = _a.x,
+            y = _a.y;
+        if (_this.rafDragTimeout) _this.currentWindow.cancelAnimationFrame(_this.rafDragTimeout);
+        _this.rafDragTimeout = _this.currentWindow.requestAnimationFrame(function () {
+          if (!_this.state.cropSize) return;
+          if (x === undefined || y === undefined) return;
+          var offsetX = x - _this.dragStartPosition.x;
+          var offsetY = y - _this.dragStartPosition.y;
+          var requestedPosition = {
+            x: _this.dragStartCrop.x + offsetX,
+            y: _this.dragStartCrop.y + offsetY
+          };
+          var newPosition = _this.props.restrictPosition ? restrictPosition(requestedPosition, _this.mediaSize, _this.state.cropSize, _this.props.zoom, _this.props.rotation) : requestedPosition;
+
+          _this.props.onCropChange(newPosition);
+        });
+      };
+
+      _this.onDragStopped = function () {
+        var _a, _b;
+
+        _this.cleanEvents();
+
+        _this.emitCropData();
+
+        (_b = (_a = _this.props).onInteractionEnd) === null || _b === void 0 ? void 0 : _b.call(_a);
+      };
+
+      _this.onWheel = function (e) {
+        if (_this.props.onWheelRequest && !_this.props.onWheelRequest(e)) {
+          return;
+        }
+
+        e.preventDefault();
+        var point = Cropper.getMousePoint(e);
+        var pixelY = normalizeWheel$1(e).pixelY;
+        var newZoom = _this.props.zoom - pixelY * _this.props.zoomSpeed / 200;
+
+        _this.setNewZoom(newZoom, point, {
+          shouldUpdatePosition: true
+        });
+
+        if (!_this.state.hasWheelJustStarted) {
+          _this.setState({
+            hasWheelJustStarted: true
+          }, function () {
+            var _a, _b;
+
+            return (_b = (_a = _this.props).onInteractionStart) === null || _b === void 0 ? void 0 : _b.call(_a);
+          });
+        }
+
+        if (_this.wheelTimer) {
+          clearTimeout(_this.wheelTimer);
+        }
+
+        _this.wheelTimer = _this.currentWindow.setTimeout(function () {
+          return _this.setState({
+            hasWheelJustStarted: false
+          }, function () {
+            var _a, _b;
+
+            return (_b = (_a = _this.props).onInteractionEnd) === null || _b === void 0 ? void 0 : _b.call(_a);
+          });
+        }, 250);
+      };
+
+      _this.getPointOnContainer = function (_a) {
+        var x = _a.x,
+            y = _a.y;
+
+        if (!_this.containerRect) {
+          throw new Error('The Cropper is not mounted');
+        }
+
+        return {
+          x: _this.containerRect.width / 2 - (x - _this.containerRect.left),
+          y: _this.containerRect.height / 2 - (y - _this.containerRect.top)
+        };
+      };
+
+      _this.getPointOnMedia = function (_a) {
+        var x = _a.x,
+            y = _a.y;
+        var _b = _this.props,
+            crop = _b.crop,
+            zoom = _b.zoom;
+        return {
+          x: (x + crop.x) / zoom,
+          y: (y + crop.y) / zoom
+        };
+      };
+
+      _this.setNewZoom = function (zoom, point, _a) {
+        var _b = (_a === void 0 ? {} : _a).shouldUpdatePosition,
+            shouldUpdatePosition = _b === void 0 ? true : _b;
+        if (!_this.state.cropSize || !_this.props.onZoomChange) return;
+
+        var zoomPoint = _this.getPointOnContainer(point);
+
+        var zoomTarget = _this.getPointOnMedia(zoomPoint);
+
+        var newZoom = clamp$2(zoom, _this.props.minZoom, _this.props.maxZoom);
+        var requestedPosition = {
+          x: zoomTarget.x * newZoom - zoomPoint.x,
+          y: zoomTarget.y * newZoom - zoomPoint.y
+        };
+
+        if (shouldUpdatePosition) {
+          var newPosition = _this.props.restrictPosition ? restrictPosition(requestedPosition, _this.mediaSize, _this.state.cropSize, newZoom, _this.props.rotation) : requestedPosition;
+
+          _this.props.onCropChange(newPosition);
+        }
+
+        _this.props.onZoomChange(newZoom);
+      };
+
+      _this.getCropData = function () {
+        if (!_this.state.cropSize) {
+          return null;
+        } // this is to ensure the crop is correctly restricted after a zoom back (https://github.com/ValentinH/react-easy-crop/issues/6)
+
+
+        var restrictedPosition = _this.props.restrictPosition ? restrictPosition(_this.props.crop, _this.mediaSize, _this.state.cropSize, _this.props.zoom, _this.props.rotation) : _this.props.crop;
+        return computeCroppedArea(restrictedPosition, _this.mediaSize, _this.state.cropSize, _this.getAspect(), _this.props.zoom, _this.props.rotation, _this.props.restrictPosition);
+      };
+
+      _this.emitCropData = function () {
+        var cropData = _this.getCropData();
+
+        if (!cropData) return;
+        var croppedAreaPercentages = cropData.croppedAreaPercentages,
+            croppedAreaPixels = cropData.croppedAreaPixels;
+
+        if (_this.props.onCropComplete) {
+          _this.props.onCropComplete(croppedAreaPercentages, croppedAreaPixels);
+        }
+
+        if (_this.props.onCropAreaChange) {
+          _this.props.onCropAreaChange(croppedAreaPercentages, croppedAreaPixels);
+        }
+      };
+
+      _this.emitCropAreaChange = function () {
+        var cropData = _this.getCropData();
+
+        if (!cropData) return;
+        var croppedAreaPercentages = cropData.croppedAreaPercentages,
+            croppedAreaPixels = cropData.croppedAreaPixels;
+
+        if (_this.props.onCropAreaChange) {
+          _this.props.onCropAreaChange(croppedAreaPercentages, croppedAreaPixels);
+        }
+      };
+
+      _this.recomputeCropPosition = function () {
+        if (!_this.state.cropSize) return;
+        var newPosition = _this.props.restrictPosition ? restrictPosition(_this.props.crop, _this.mediaSize, _this.state.cropSize, _this.props.zoom, _this.props.rotation) : _this.props.crop;
+
+        _this.props.onCropChange(newPosition);
+
+        _this.emitCropData();
+      };
+
+      return _this;
+    }
+
+    Cropper.prototype.componentDidMount = function () {
+      if (this.containerRef) {
+        if (this.containerRef.ownerDocument) {
+          this.currentDoc = this.containerRef.ownerDocument;
+        }
+
+        if (this.currentDoc.defaultView) {
+          this.currentWindow = this.currentDoc.defaultView;
+        }
+
+        this.currentWindow.addEventListener('resize', this.computeSizes);
+        this.props.zoomWithScroll && this.containerRef.addEventListener('wheel', this.onWheel, {
+          passive: false
+        });
+        this.containerRef.addEventListener('gesturestart', this.preventZoomSafari);
+        this.containerRef.addEventListener('gesturechange', this.preventZoomSafari);
+      }
+
+      if (!this.props.disableAutomaticStylesInjection) {
+        this.styleRef = this.currentDoc.createElement('style');
+        this.styleRef.setAttribute('type', 'text/css');
+
+        if (this.props.nonce) {
+          this.styleRef.setAttribute('nonce', this.props.nonce);
+        }
+
+        this.styleRef.innerHTML = css_248z;
+        this.currentDoc.head.appendChild(this.styleRef);
+      } // when rendered via SSR, the image can already be loaded and its onLoad callback will never be called
+
+
+      if (this.imageRef.current && this.imageRef.current.complete) {
+        this.onMediaLoad();
+      } // set image and video refs in the parent if the callbacks exist
+
+
+      if (this.props.setImageRef) {
+        this.props.setImageRef(this.imageRef);
+      }
+
+      if (this.props.setVideoRef) {
+        this.props.setVideoRef(this.videoRef);
+      }
+    };
+
+    Cropper.prototype.componentWillUnmount = function () {
+      var _a;
+
+      this.currentWindow.removeEventListener('resize', this.computeSizes);
+
+      if (this.containerRef) {
+        this.containerRef.removeEventListener('gesturestart', this.preventZoomSafari);
+        this.containerRef.removeEventListener('gesturechange', this.preventZoomSafari);
+      }
+
+      if (this.styleRef) {
+        (_a = this.styleRef.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(this.styleRef);
+      }
+
+      this.cleanEvents();
+      this.props.zoomWithScroll && this.clearScrollEvent();
+    };
+
+    Cropper.prototype.componentDidUpdate = function (prevProps) {
+      var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+
+      if (prevProps.rotation !== this.props.rotation) {
+        this.computeSizes();
+        this.recomputeCropPosition();
+      } else if (prevProps.aspect !== this.props.aspect) {
+        this.computeSizes();
+      } else if (prevProps.zoom !== this.props.zoom) {
+        this.recomputeCropPosition();
+      } else if (((_a = prevProps.cropSize) === null || _a === void 0 ? void 0 : _a.height) !== ((_b = this.props.cropSize) === null || _b === void 0 ? void 0 : _b.height) || ((_c = prevProps.cropSize) === null || _c === void 0 ? void 0 : _c.width) !== ((_d = this.props.cropSize) === null || _d === void 0 ? void 0 : _d.width)) {
+        this.computeSizes();
+      } else if (((_e = prevProps.crop) === null || _e === void 0 ? void 0 : _e.x) !== ((_f = this.props.crop) === null || _f === void 0 ? void 0 : _f.x) || ((_g = prevProps.crop) === null || _g === void 0 ? void 0 : _g.y) !== ((_h = this.props.crop) === null || _h === void 0 ? void 0 : _h.y)) {
+        this.emitCropAreaChange();
+      }
+
+      if (prevProps.zoomWithScroll !== this.props.zoomWithScroll && this.containerRef) {
+        this.props.zoomWithScroll ? this.containerRef.addEventListener('wheel', this.onWheel, {
+          passive: false
+        }) : this.clearScrollEvent();
+      }
+
+      if (prevProps.video !== this.props.video) {
+        (_j = this.videoRef.current) === null || _j === void 0 ? void 0 : _j.load();
+      }
+    };
+
+    Cropper.prototype.getAspect = function () {
+      var _a = this.props,
+          cropSize = _a.cropSize,
+          aspect = _a.aspect;
+
+      if (cropSize) {
+        return cropSize.width / cropSize.height;
+      }
+
+      return aspect;
+    };
+
+    Cropper.prototype.onPinchStart = function (e) {
+      var pointA = Cropper.getTouchPoint(e.touches[0]);
+      var pointB = Cropper.getTouchPoint(e.touches[1]);
+      this.lastPinchDistance = getDistanceBetweenPoints(pointA, pointB);
+      this.lastPinchRotation = getRotationBetweenPoints(pointA, pointB);
+      this.onDragStart(getCenter(pointA, pointB));
+    };
+
+    Cropper.prototype.onPinchMove = function (e) {
+      var _this = this;
+
+      var pointA = Cropper.getTouchPoint(e.touches[0]);
+      var pointB = Cropper.getTouchPoint(e.touches[1]);
+      var center = getCenter(pointA, pointB);
+      this.onDrag(center);
+      if (this.rafPinchTimeout) this.currentWindow.cancelAnimationFrame(this.rafPinchTimeout);
+      this.rafPinchTimeout = this.currentWindow.requestAnimationFrame(function () {
+        var distance = getDistanceBetweenPoints(pointA, pointB);
+        var newZoom = _this.props.zoom * (distance / _this.lastPinchDistance);
+
+        _this.setNewZoom(newZoom, center, {
+          shouldUpdatePosition: false
+        });
+
+        _this.lastPinchDistance = distance;
+        var rotation = getRotationBetweenPoints(pointA, pointB);
+        var newRotation = _this.props.rotation + (rotation - _this.lastPinchRotation);
+        _this.props.onRotationChange && _this.props.onRotationChange(newRotation);
+        _this.lastPinchRotation = rotation;
+      });
+    };
+
+    Cropper.prototype.render = function () {
+      var _this = this;
+
+      var _a = this.props,
+          image = _a.image,
+          video = _a.video,
+          mediaProps = _a.mediaProps,
+          transform = _a.transform,
+          _b = _a.crop,
+          x = _b.x,
+          y = _b.y,
+          rotation = _a.rotation,
+          zoom = _a.zoom,
+          cropShape = _a.cropShape,
+          showGrid = _a.showGrid,
+          _c = _a.style,
+          containerStyle = _c.containerStyle,
+          cropAreaStyle = _c.cropAreaStyle,
+          mediaStyle = _c.mediaStyle,
+          _d = _a.classes,
+          containerClassName = _d.containerClassName,
+          cropAreaClassName = _d.cropAreaClassName,
+          mediaClassName = _d.mediaClassName,
+          objectFit = _a.objectFit;
+      return /*#__PURE__*/React__default['default'].createElement("div", {
+        onMouseDown: this.onMouseDown,
+        onTouchStart: this.onTouchStart,
+        ref: function ref(el) {
+          return _this.containerRef = el;
+        },
+        "data-testid": "container",
+        style: containerStyle,
+        className: classNames('reactEasyCrop_Container', containerClassName)
+      }, image ? /*#__PURE__*/React__default['default'].createElement("img", __assign$2({
+        alt: "",
+        className: classNames('reactEasyCrop_Image', objectFit === 'contain' && 'reactEasyCrop_Contain', objectFit === 'horizontal-cover' && 'reactEasyCrop_Cover_Horizontal', objectFit === 'vertical-cover' && 'reactEasyCrop_Cover_Vertical', objectFit === 'auto-cover' && (this.mediaSize.naturalWidth > this.mediaSize.naturalHeight ? 'reactEasyCrop_Cover_Horizontal' : 'reactEasyCrop_Cover_Vertical'), mediaClassName)
+      }, mediaProps, {
+        src: image,
+        ref: this.imageRef,
+        style: __assign$2(__assign$2({}, mediaStyle), {
+          transform: transform || "translate(" + x + "px, " + y + "px) rotate(" + rotation + "deg) scale(" + zoom + ")"
+        }),
+        onLoad: this.onMediaLoad
+      })) : video && /*#__PURE__*/React__default['default'].createElement("video", __assign$2({
+        autoPlay: true,
+        loop: true,
+        muted: true,
+        className: classNames('reactEasyCrop_Video', objectFit === 'contain' && 'reactEasyCrop_Contain', objectFit === 'horizontal-cover' && 'reactEasyCrop_Cover_Horizontal', objectFit === 'vertical-cover' && 'reactEasyCrop_Cover_Vertical', objectFit === 'auto-cover' && (this.mediaSize.naturalWidth > this.mediaSize.naturalHeight ? 'reactEasyCrop_Cover_Horizontal' : 'reactEasyCrop_Cover_Vertical'), mediaClassName)
+      }, mediaProps, {
+        ref: this.videoRef,
+        onLoadedMetadata: this.onMediaLoad,
+        style: __assign$2(__assign$2({}, mediaStyle), {
+          transform: transform || "translate(" + x + "px, " + y + "px) rotate(" + rotation + "deg) scale(" + zoom + ")"
+        }),
+        controls: false
+      }), (Array.isArray(video) ? video : [{
+        src: video
+      }]).map(function (item) {
+        return /*#__PURE__*/React__default['default'].createElement("source", __assign$2({
+          key: item.src
+        }, item));
+      })), this.state.cropSize && /*#__PURE__*/React__default['default'].createElement("div", {
+        style: __assign$2(__assign$2({}, cropAreaStyle), {
+          width: this.state.cropSize.width,
+          height: this.state.cropSize.height
+        }),
+        "data-testid": "cropper",
+        className: classNames('reactEasyCrop_CropArea', cropShape === 'round' && 'reactEasyCrop_CropAreaRound', showGrid && 'reactEasyCrop_CropAreaGrid', cropAreaClassName)
+      }));
+    };
+
+    Cropper.defaultProps = {
+      zoom: 1,
+      rotation: 0,
+      aspect: 4 / 3,
+      maxZoom: MAX_ZOOM,
+      minZoom: MIN_ZOOM,
+      cropShape: 'rect',
+      objectFit: 'contain',
+      showGrid: true,
+      style: {},
+      classes: {},
+      mediaProps: {},
+      zoomSpeed: 1,
+      restrictPosition: true,
+      zoomWithScroll: true
+    };
+
+    Cropper.getMousePoint = function (e) {
+      return {
+        x: Number(e.clientX),
+        y: Number(e.clientY)
+      };
+    };
+
+    Cropper.getTouchPoint = function (touch) {
+      return {
+        x: Number(touch.clientX),
+        y: Number(touch.clientY)
+      };
+    };
+
+    return Cropper;
+  }(React__default['default'].Component);
+
+  var Index$b = function Index(_ref) {
+    var instance = _ref.instance;
+    var state = instance.state,
+        imgURL = instance.imgURL,
+        setTransform = instance.setTransform,
+        minZoom = instance.minZoom,
+        zoomSpeed = instance.zoomSpeed,
+        aspect = instance.aspect,
+        cropSize = instance.cropSize;
+    var onCropComplete = React.useCallback(function (croppedArea, croppedAreaPixels) {
+      // console.log('croppedArea:', croppedArea, 'croppedAreaPixels:', croppedAreaPixels)
+      setTransform({
+        croppedAreaPixels: croppedAreaPixels
+      });
+    }, [setTransform]);
+    var cropConfig = {
+      minZoom: minZoom,
+      zoomSpeed: zoomSpeed,
+      aspect: aspect,
+      cropSize: cropSize
+    };
+    return /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "lm_cutimg_crop"
+    }, /*#__PURE__*/React__default['default'].createElement(Cropper, _objectSpread(_objectSpread({}, cropConfig), {}, {
+      image: imgURL,
+      crop: state.crop,
+      zoom: state.zoom,
+      rotation: state.rotation,
+      onCropChange: function onCropChange(crop) {
+        return setTransform({
+          crop: crop
+        });
+      },
+      onCropComplete: onCropComplete,
+      onZoomChange: function onZoomChange(zoom) {
+        return setTransform({
+          zoom: zoom
+        });
+      }
+    })));
+  };
+
+  var Body$1 = /*#__PURE__*/React__default['default'].memo(Index$b);
+
+  var _excluded$37 = ["value", "onChange", "leftIcon", "rightIcon"];
+
+  var ResetSlider = function ResetSlider(_ref) {
+    var value = _ref.value,
+        _onChange = _ref.onChange,
+        leftIcon = _ref.leftIcon,
+        rightIcon = _ref.rightIcon,
+        props = _objectWithoutProperties$1(_ref, _excluded$37);
+
+    // 减
+    var decrement = function decrement() {
+      if (!(value > props.min)) return;
+      var nValue = Math.round(value * 100 - props.step * 100) / 100;
+      _onChange === null || _onChange === void 0 ? void 0 : _onChange(nValue);
+    }; // 增
+
+
+    var increment = function increment() {
+      if (!(value < props.max)) return;
+      var nValue = Math.round(value * 100 + props.step * 100) / 100;
+      _onChange === null || _onChange === void 0 ? void 0 : _onChange(nValue);
+    };
+
+    return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(IconFont, {
+      type: leftIcon,
+      onClick: decrement
+    }), /*#__PURE__*/React__default['default'].createElement(Slider$1, _objectSpread(_objectSpread({}, props), {}, {
+      value: value,
+      onChange: function onChange(val) {
+        return _onChange(val);
+      }
+    })), /*#__PURE__*/React__default['default'].createElement(IconFont, {
+      type: rightIcon,
+      onClick: increment
+    }));
+  }; // 图片调整
+
+
+  var Operate = function Operate(_ref2) {
+    var instance = _ref2.instance;
+    var state = instance.state,
+        setTransform = instance.setTransform;
+    return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "img_crop_control"
+    }, /*#__PURE__*/React__default['default'].createElement(ResetSlider, {
+      value: state.zoom,
+      onChange: function onChange(zoom) {
+        return setTransform({
+          zoom: zoom
+        });
+      },
+      defaultValue: 1,
+      leftIcon: "lmweb-minus",
+      rightIcon: "lmweb-plus",
+      step: 0.1,
+      min: 0.1,
+      max: 3
+    })), /*#__PURE__*/React__default['default'].createElement("div", {
+      className: "img_crop_control"
+    }, /*#__PURE__*/React__default['default'].createElement(ResetSlider, {
+      value: state.rotation,
+      onChange: function onChange(rotation) {
+        return setTransform({
+          rotation: rotation
+        });
+      },
+      defaultValue: 0,
+      leftIcon: "lmweb-rotate-left",
+      rightIcon: "lmweb-rotate-right",
+      step: 1,
+      min: -180,
+      max: 180
+    })));
+  };
+
+  var Operate$1 = /*#__PURE__*/React__default['default'].memo(Operate);
+
+  var LmBoxContainer = function LmBoxContainer(_ref) {
+    var instance = _ref.instance;
+    var visible = instance.visible,
+        onClose = instance.onClose,
+        state = instance.state,
+        dispatch = instance.dispatch,
+        getCropImageAsync = instance.getCropImageAsync,
+        file = instance.file;
+    var boxContainerRef = React.useRef(null); // 关闭时初始化
+
+    var handleClose = function handleClose(blobFile) {
+      dispatch({
+        type: 'changeResult',
+        result: {
+          visible: false
+        }
+      });
+      onClose === null || onClose === void 0 ? void 0 : onClose(blobFile, file);
+    };
+
+    var handleOk = /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator$1( /*#__PURE__*/_regeneratorRuntime$1().mark(function _callee() {
+        var croppedImage;
+        return _regeneratorRuntime$1().wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                _context.next = 2;
+                return getCropImageAsync();
+
+              case 2:
+                croppedImage = _context.sent;
+                dispatch({
+                  type: 'changeResult',
+                  result: {
+                    croppedImage: croppedImage
+                  }
+                });
+                handleClose(croppedImage);
+
+              case 5:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
+
+      return function handleOk() {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+
+    var config = {
+      title: '编辑图片',
+      open: visible !== null && visible !== void 0 ? visible : state.visible,
+      onCancel: function onCancel() {
+        return handleClose(false);
+      },
+      onOk: handleOk
+    };
+    return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(LMModal, _objectSpread({}, config), /*#__PURE__*/React__default['default'].createElement("div", {
+      ref: boxContainerRef,
+      className: "lm_cutimg_container"
+    }, /*#__PURE__*/React__default['default'].createElement(Body$1, {
+      instance: instance
+    }), /*#__PURE__*/React__default['default'].createElement(Operate$1, {
+      instance: instance
+    }))));
+  };
+
+  var Container$2 = /*#__PURE__*/React__default['default'].memo(LmBoxContainer);
+
+  var Wrapper = function Wrapper(_ref) {
+    var instance = _ref.instance;
+    return /*#__PURE__*/React__default['default'].createElement(Container$2, {
+      instance: instance
+    });
+  };
+
+  var Wrapper$1 = /*#__PURE__*/React__default['default'].memo(Wrapper);
+
+  var LmBox = /*#__PURE__*/React.forwardRef(function (props, ref) {
+    var initialState = React.useMemo(function () {
+      return initialState$4();
+    }, []);
+
+    var _useReducer = React.useReducer(reducer$6, initialState),
+        _useReducer2 = _slicedToArray$1(_useReducer, 2),
+        state = _useReducer2[0],
+        dispatch = _useReducer2[1]; // 获取核心Methods
+
+
+    var _useCoreOptions = useCoreOptions$3({
+      state: state,
+      dispatch: dispatch,
+      props: props
+    }),
+        CoreMethds = _useCoreOptions.CoreMethds,
+        RefMethods = _useCoreOptions.RefMethods; // 组件实例
+
+
+    var instance = React.useMemo(function () {
+      return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, props), CoreMethds), RefMethods), {}, {
+        state: state,
+        dispatch: dispatch
+      });
+    }, [props, RefMethods, state, dispatch]); // 向外暴露出的方法
+
+    React.useImperativeHandle(ref, function () {
+      return _objectSpread({
+        getState: function getState() {
+          return state;
+        }
+      }, RefMethods);
+    });
+    return /*#__PURE__*/React__default['default'].createElement(Wrapper$1, {
+      instance: instance
+    });
+  });
+
+  var CropImg = /*#__PURE__*/React.forwardRef(function (props, ref) {
+    var defaultRef = React.useRef(null);
+
+    var defaultProps = _objectSpread({
+      visible: null,
+      file: null,
+      minZoom: 0.1,
+      zoomSpeed: 0.2,
+      aspect: 4 / 3,
+      cropSize: null
+    }, props);
+
+    return /*#__PURE__*/React__default['default'].createElement(LmBox, _objectSpread({
+      ref: ref || defaultRef
+    }, defaultProps));
+  });
+
   exports.Alert = Alert$1;
   exports.Approval = LMApproval;
   exports.AutoComplete = RefAutoComplete$1;
@@ -320704,6 +323204,7 @@
   exports.Collapse = Collapse$1;
   exports.Comment = Comment;
   exports.ConfigProvider = ConfigProvider$1;
+  exports.CropImg = CropImg;
   exports.CustomTableOption = LMCustomTableOption;
   exports.CustomerService = CustomerService;
   exports.DatePicker = DatePicker$1;
@@ -320729,6 +323230,7 @@
   exports.List = List$2;
   exports.LmEditTable = LmEditTable;
   exports.LmFilter = LmFilter$2;
+  exports.LmImgList = LmImgList;
   exports.LmSelect = LMSelect;
   exports.LmTable = Table$2;
   exports.LmUpload = LmUpload$2;