antd-mobile 5.0.0-beta.9 → 5.0.0-rc.3

package/cjs/components/image/lazy-detector.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LazyDetector = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _ahooks = require("ahooks");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var LazyDetector = function LazyDetector(props) {
+  var ref = (0, _react.useRef)(null);
+  var inViewport = (0, _ahooks.useInViewport)(ref);
+  (0, _react.useEffect)(function () {
+    if (inViewport) {
+      props.onActive();
+    }
+  }, [inViewport]);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    ref: ref
+  });
+};
+
+exports.LazyDetector = LazyDetector;

package/cjs/components/image-uploader/image-uploader.css

@@ -1,6 +1,9 @@
 .adm-image-uploader {
   --cell-size: 80px;
 }
+.adm-image-uploader-space {
+  --gap: 12px;
+}
 .adm-image-uploader-cell {
   position: relative;
   width: var(--cell-size);
@@ -24,7 +27,7 @@
   color: #fff;
   cursor: pointer;
 }
-.adm-image-uploader-cell-delete .anticon {
+.adm-image-uploader-cell-delete-icon {
   position: absolute;
   left: 4px;
   top: 3px;
@@ -55,24 +58,26 @@
   width: var(--cell-size);
   height: var(--cell-size);
 }
-.adm-image-uploader-upload-button {
+.adm-image-uploader-upload-button-wrap {
   position: relative;
+}
+.adm-image-uploader-upload-button-wrap .adm-image-uploader-upload-button {
   background-color: #f5f5f5;
   text-align: center;
   line-height: var(--cell-size);
   display: block;
 }
-.adm-image-uploader-upload-button-icon {
+.adm-image-uploader-upload-button-wrap .adm-image-uploader-upload-button-icon {
   color: #999999;
   font-size: 32px;
 }
-.adm-image-uploader-upload-button .adm-image-uploader-input {
+.adm-image-uploader-upload-button-wrap .adm-image-uploader-input {
   cursor: pointer;
   position: absolute;
   opacity: 0;
   left: 0;
   top: 0;
-  width: var(--cell-size);
-  height: var(--cell-size);
+  width: 100%;
+  height: 100%;
   border-radius: 4px;
 }

package/cjs/components/image-uploader/image-uploader.d.ts

@@ -1,12 +1,15 @@
-import { FC } from 'react';
+import { FC, InputHTMLAttributes } from 'react';
+import { NativeProps } from '../../utils/native-props';
 export declare type TaskStatus = 'pending' | 'fail';
-export interface FileItem {
+export interface ImageUploadItem {
+    key?: string | number;
     url: string;
+    thumbnailUrl?: string;
 }
 export declare type ImageUploaderProps = {
-    defaultValue?: FileItem[];
-    value?: FileItem[];
-    onChange?: (fileList: FileItem[]) => void;
+    defaultValue?: ImageUploadItem[];
+    value?: ImageUploadItem[];
+    onChange?: (items: ImageUploadItem[]) => void;
     accept?: string;
     multiple?: boolean;
     maxCount?: number;
@@ -14,9 +17,10 @@ export declare type ImageUploaderProps = {
     disableUpload?: boolean;
     showUpload?: boolean;
     deletable?: boolean;
-    capture?: boolean | string;
+    capture?: InputHTMLAttributes<unknown>['capture'];
     onPreview?: (index: number) => void;
     beforeUpload?: (file: File[]) => Promise<File[]> | File[];
-    upload: (file: File) => Promise<FileItem>;
-};
+    upload: (file: File) => Promise<ImageUploadItem>;
+    onDelete?: (item: ImageUploadItem) => boolean | Promise<boolean> | void;
+} & NativeProps<'--cell-size'>;
 export declare const ImageUploader: FC<ImageUploaderProps>;

package/cjs/components/image-uploader/image-uploader.js

@@ -7,7 +7,7 @@ exports.ImageUploader = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _icons = require("@ant-design/icons");
+var _antdMobileIcons = require("antd-mobile-icons");
 
 var _withDefaultProps = require("../../utils/with-default-props");
 
@@ -15,13 +15,13 @@ var _imageViewer = _interopRequireDefault(require("../image-viewer"));
 
 var _previewItem = _interopRequireDefault(require("./preview-item"));
 
-var _useControllableValue = require("../../utils/use-controllable-value");
+var _usePropsValue2 = require("../../utils/use-props-value");
 
 var _ahooks = require("ahooks");
 
 var _space = _interopRequireDefault(require("../space"));
 
-var _convertPx = require("../../utils/convert-px");
+var _nativeProps = require("../../utils/native-props");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -75,9 +75,9 @@ var defaultProps = {
 var ImageUploader = function ImageUploader(p) {
   var props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
 
-  var _useNewControllableVa = (0, _useControllableValue.useNewControllableValue)(props),
-      value = _useNewControllableVa[0],
-      setValue = _useNewControllableVa[1];
+  var _usePropsValue = (0, _usePropsValue2.usePropsValue)(props),
+      value = _usePropsValue[0],
+      setValue = _usePropsValue[1];
 
   var updateValue = (0, _ahooks.usePersistFn)(function (updater) {
     setValue(updater(value));
@@ -112,43 +112,44 @@ var ImageUploader = function ImageUploader(p) {
         while (1) {
           switch (_context2.prev = _context2.next) {
             case 0:
+              e.persist();
               rawFiles = e.target.files;
 
               if (rawFiles) {
-                _context2.next = 3;
+                _context2.next = 4;
                 break;
               }
 
               return _context2.abrupt("return");
 
-            case 3:
+            case 4:
               files = [].slice.call(rawFiles);
 
               if (!props.beforeUpload) {
-                _context2.next = 8;
+                _context2.next = 9;
                 break;
               }
 
-              _context2.next = 7;
+              _context2.next = 8;
               return props.beforeUpload(files);
 
-            case 7:
+            case 8:
               files = _context2.sent;
 
-            case 8:
+            case 9:
               if (!(files.length === 0)) {
-                _context2.next = 10;
+                _context2.next = 11;
                 break;
               }
 
               return _context2.abrupt("return");
 
-            case 10:
+            case 11:
               if (maxCount > 0) {
                 exceed = value.length + files.length - maxCount;
 
                 if (exceed > 0) {
-                  files = files.slice(0, maxCount - exceed);
+                  files = files.slice(0, files.length - exceed);
                   (_a = props.onCountExceed) === null || _a === void 0 ? void 0 : _a.call(props, exceed);
                 }
               }
@@ -163,7 +164,7 @@ var ImageUploader = function ImageUploader(p) {
               setTasks(function (prev) {
                 return [].concat(prev, newTasks);
               });
-              _context2.next = 15;
+              _context2.next = 16;
               return Promise.all(newTasks.map(function (currentTask) {
                 return __awaiter(_this, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
                   var result;
@@ -219,9 +220,15 @@ var ImageUploader = function ImageUploader(p) {
                     }
                   }, _callee, null, [[0, 8]]);
                 }));
-              }));
+              }))["catch"](function (error) {
+                return console.error(error);
+              });
 
-            case 15:
+            case 16:
+              e.target.value = '';
+            // HACK: fix the same file doesn't trigger onChange
+
+            case 17:
             case "end":
               return _context2.stop();
           }
@@ -242,22 +249,53 @@ var ImageUploader = function ImageUploader(p) {
   }
 
   var showUpload = props.showUpload && (maxCount === 0 || value.length + tasks.length < maxCount);
-  return /*#__PURE__*/_react["default"].createElement("div", {
+  return (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement("div", {
     className: classPrefix
   }, /*#__PURE__*/_react["default"].createElement(_space["default"], {
-    size: (0, _convertPx.convertPx)(12),
+    className: classPrefix + "-space",
     wrap: true
   }, value.map(function (fileItem, index) {
+    var _a, _b;
+
     return /*#__PURE__*/_react["default"].createElement(_previewItem["default"], {
-      key: fileItem.url,
-      url: fileItem.url,
+      key: (_a = fileItem.key) !== null && _a !== void 0 ? _a : index,
+      url: (_b = fileItem.thumbnailUrl) !== null && _b !== void 0 ? _b : fileItem.url,
       deletable: props.deletable,
       onClick: function onClick() {
         return previewImage(index);
       },
       onDelete: function onDelete() {
-        setValue(value.filter(function (x) {
-          return x.url !== fileItem.url;
+        return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
+          var _c, canDelete;
+
+          return regeneratorRuntime.wrap(function _callee3$(_context3) {
+            while (1) {
+              switch (_context3.prev = _context3.next) {
+                case 0:
+                  _context3.next = 2;
+                  return (_c = props.onDelete) === null || _c === void 0 ? void 0 : _c.call(props, fileItem);
+
+                case 2:
+                  canDelete = _context3.sent;
+
+                  if (!(canDelete === false)) {
+                    _context3.next = 5;
+                    break;
+                  }
+
+                  return _context3.abrupt("return");
+
+                case 5:
+                  setValue(value.filter(function (x, i) {
+                    return i !== index;
+                  }));
+
+                case 6:
+                case "end":
+                  return _context3.stop();
+              }
+            }
+          }, _callee3);
         }));
       }
     });
@@ -268,24 +306,26 @@ var ImageUploader = function ImageUploader(p) {
       deletable: task.status !== 'pending',
       status: task.status,
       onDelete: function onDelete() {
-        setValue(value.filter(function (x) {
-          return x.url !== task.url;
+        setTasks(tasks.filter(function (x) {
+          return x.id !== task.id;
         }));
       }
     });
-  }), showUpload && /*#__PURE__*/_react["default"].createElement("span", {
+  }), showUpload && /*#__PURE__*/_react["default"].createElement("div", {
+    className: classPrefix + "-upload-button-wrap"
+  }, props.children ? props.children : /*#__PURE__*/_react["default"].createElement("span", {
     className: classPrefix + "-cell " + classPrefix + "-upload-button",
     role: 'button'
   }, /*#__PURE__*/_react["default"].createElement("span", {
     className: classPrefix + "-upload-button-icon"
-  }, /*#__PURE__*/_react["default"].createElement(_icons.PlusOutlined, null)), !props.disableUpload && /*#__PURE__*/_react["default"].createElement("input", {
+  }, /*#__PURE__*/_react["default"].createElement(_antdMobileIcons.AddOutline, null))), !props.disableUpload && /*#__PURE__*/_react["default"].createElement("input", {
     capture: props.capture,
     accept: props.accept,
     multiple: props.multiple,
     type: 'file',
     className: classPrefix + "-input",
     onChange: onChange
-  }))));
+  })))));
 };
 
 exports.ImageUploader = ImageUploader;

package/cjs/components/image-uploader/index.d.ts

@@ -1,4 +1,4 @@
 import { ImageUploader } from './image-uploader';
 import './image-uploader.less';
-export type { FileItem, ImageUploaderProps } from './image-uploader';
+export type { ImageUploadItem, ImageUploaderProps } from './image-uploader';
 export default ImageUploader;

package/cjs/components/image-uploader/preview-item.js

@@ -7,12 +7,16 @@ exports["default"] = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _icons = require("@ant-design/icons");
+var _antdMobileIcons = require("antd-mobile-icons");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _image = _interopRequireDefault(require("../image"));
 
+var _loading = _interopRequireDefault(require("../loading"));
+
+var _configProvider = require("../config-provider");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -22,6 +26,9 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var classPrefix = "adm-image-uploader";
 
 var PreviewItem = function PreviewItem(props) {
+  var _useConfig = (0, _configProvider.useConfig)(),
+      locale = _useConfig.locale;
+
   var url = props.url,
       file = props.file,
       deletable = props.deletable,
@@ -43,16 +50,20 @@ var PreviewItem = function PreviewItem(props) {
       className: classPrefix + "-cell-mask"
     }, /*#__PURE__*/_react["default"].createElement("span", {
       className: classPrefix + "-cell-loading"
-    }, /*#__PURE__*/_react["default"].createElement(_icons.LoadingOutlined, null), /*#__PURE__*/_react["default"].createElement("span", {
+    }, /*#__PURE__*/_react["default"].createElement(_loading["default"], {
+      color: '#fff'
+    }), /*#__PURE__*/_react["default"].createElement("span", {
       className: classPrefix + "-cell-mask-message"
-    }, "\u4E0A\u4F20\u4E2D...")));
+    }, locale.ImageUploader.uploading)));
   }
 
   function renderDelete() {
     return deletable && /*#__PURE__*/_react["default"].createElement("span", {
       className: classPrefix + "-cell-delete",
       onClick: onDelete
-    }, /*#__PURE__*/_react["default"].createElement(_icons.CloseOutlined, null));
+    }, /*#__PURE__*/_react["default"].createElement(_antdMobileIcons.CloseOutline, {
+      className: classPrefix + "-cell-delete-icon"
+    }));
   }
 
   return /*#__PURE__*/_react["default"].createElement("div", {

package/cjs/components/image-viewer/image-viewer.d.ts

@@ -1,5 +1,5 @@
 import { GetContainer } from '../../utils/render-to-container';
-import React from 'react';
+import { FC } from 'react';
 export declare type ImageViewerProps = {
     image?: string;
     maxZoom?: number;
@@ -8,13 +8,13 @@ export declare type ImageViewerProps = {
     onClose?: () => void;
     afterClose?: () => void;
 };
-export declare const ImageViewer: React.FC<ImageViewerProps>;
+export declare const ImageViewer: FC<ImageViewerProps>;
 export declare type MultiImageViewerProps = Omit<ImageViewerProps, 'image'> & {
     images?: string[];
     defaultIndex?: number;
     onIndexChange?: (index: number) => void;
 };
-export declare const MultiImageViewer: React.FC<MultiImageViewerProps>;
+export declare const MultiImageViewer: FC<MultiImageViewerProps>;
 export declare function showImageViewer(props: Omit<ImageViewerProps, 'visible'>): {
     close: () => void;
 };

package/cjs/components/image-viewer/image-viewer.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.MultiImageViewer = exports.ImageViewer = void 0;
 exports.showImageViewer = showImageViewer;
 exports.showMultiImageViewer = showMultiImageViewer;
-exports.MultiImageViewer = exports.ImageViewer = void 0;
 
 var _withDefaultProps = require("../../utils/with-default-props");
 
@@ -33,11 +33,14 @@ var defaultProps = {
   getContainer: null,
   visible: false
 };
-var ImageViewer = (0, _withDefaultProps.withDefaultProps)(defaultProps)(function (props) {
+
+var ImageViewer = function ImageViewer(p) {
+  var props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
+
   var node = /*#__PURE__*/_react["default"].createElement(_mask["default"], {
     visible: props.visible,
     disableBodyScroll: false,
-    opacity: 'dark',
+    opacity: 'thick',
     afterClose: props.afterClose
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: classPrefix + "-content"
@@ -52,16 +55,20 @@ var ImageViewer = (0, _withDefaultProps.withDefaultProps)(defaultProps)(function
   })));
 
   return (0, _renderToContainer.renderToContainer)(props.getContainer, node);
-});
+};
+
 exports.ImageViewer = ImageViewer;
 var multiDefaultProps = Object.assign(Object.assign({}, defaultProps), {
   defaultIndex: 0
 });
-var MultiImageViewer = (0, _withDefaultProps.withDefaultProps)(multiDefaultProps)(function (props) {
+
+var MultiImageViewer = function MultiImageViewer(p) {
+  var props = (0, _withDefaultProps.mergeProps)(multiDefaultProps, p);
+
   var node = /*#__PURE__*/_react["default"].createElement(_mask["default"], {
     visible: props.visible,
     disableBodyScroll: false,
-    opacity: 'dark',
+    opacity: 'thick',
     afterClose: props.afterClose
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: classPrefix + "-content"
@@ -78,7 +85,8 @@ var MultiImageViewer = (0, _withDefaultProps.withDefaultProps)(multiDefaultProps
   })));
 
   return (0, _renderToContainer.renderToContainer)(props.getContainer, node);
-});
+};
+
 exports.MultiImageViewer = MultiImageViewer;
 
 function showImageViewer(props) {

package/cjs/components/image-viewer/slide.d.ts

@@ -1,9 +1,10 @@
-import { FC } from 'react';
+import { FC, MutableRefObject } from 'react';
 declare type Props = {
     image: string;
     maxZoom: number;
     onTap: () => void;
     onZoomChange?: (zoom: number) => void;
+    dragLockRef?: MutableRefObject<boolean>;
 };
 export declare const Slide: FC<Props>;
 export {};

package/cjs/components/image-viewer/slide.js

@@ -5,17 +5,22 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Slide = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
-var _reactUseGesture = require("react-use-gesture");
+var _react2 = require("@use-gesture/react");
 
 var _web = require("@react-spring/web");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 var classPrefix = "adm-image-viewer";
 
 var Slide = function Slide(props) {
+  var dragLockRef = props.dragLockRef;
+  var controlRef = (0, _react.useRef)(null);
+
   var _useSpring = (0, _web.useSpring)(function () {
     return {
       zoom: 1,
@@ -32,7 +37,8 @@ var Slide = function Slide(props) {
       y = _useSpring$.y,
       api = _useSpring[1];
 
-  var bind = (0, _reactUseGesture.useGesture)({
+  var pinchLockRef = (0, _react.useRef)(false);
+  (0, _react2.useGesture)({
     onDrag: function onDrag(state) {
       if (state.tap && state.elapsedTime > 0) {
         // 判断点击时间>0是为了过滤掉非正常操作，例如用户长按选择图片之后的取消操作（也是一次点击）
@@ -42,31 +48,38 @@ var Slide = function Slide(props) {
 
       var currentZoom = zoom.get();
 
-      if (currentZoom <= 1) {
+      if (dragLockRef) {
+        dragLockRef.current = currentZoom !== 1;
+      }
+
+      if (!pinchLockRef.current && currentZoom <= 1) {
         api.start({
           x: 0,
           y: 0
         });
       } else {
-        var _state$movement = state.movement,
-            _x = _state$movement[0],
-            _y = _state$movement[1];
+        var _state$offset = state.offset,
+            _x = _state$offset[0],
+            _y = _state$offset[1];
         api.start({
           x: _x,
-          y: _y
+          y: _y,
+          immediate: true
         });
       }
     },
     onPinch: function onPinch(state) {
       var _a;
 
-      var _state$movement2 = state.movement,
-          d = _state$movement2[0],
-          a = _state$movement2[1]; // pinch的rubberband不会自动弹回bound，这里手动实现了
+      pinchLockRef.current = !state.last;
+      var _state$offset2 = state.offset,
+          d = _state$offset2[0];
+      if (d < 0) return; // pinch的rubberband不会自动弹回bound，这里手动实现了
 
       var zoom = state.last ? Math.max(Math.min(d, props.maxZoom), 1) : d;
       api.start({
-        zoom: zoom
+        zoom: zoom,
+        immediate: !state.last
       });
       (_a = props.onZoomChange) === null || _a === void 0 ? void 0 : _a.call(props, zoom);
 
@@ -75,29 +88,36 @@ var Slide = function Slide(props) {
           x: 0,
           y: 0
         });
+
+        if (dragLockRef) {
+          dragLockRef.current = false;
+        }
+      } else {
+        if (dragLockRef) {
+          dragLockRef.current = true;
+        }
       }
     }
   }, {
+    target: controlRef,
     drag: {
       // filterTaps: true,
-      initial: function initial() {
+      from: function from() {
         return [x.get(), y.get()];
       }
     },
     pinch: {
-      distanceBounds: {
-        min: 1,
-        max: props.maxZoom
-      },
-      rubberband: true,
       transform: function transform(_ref) {
-        var x = _ref[0],
-            y = _ref[1];
-        return [x / 200, y / 200];
+        var d = _ref[0],
+            a = _ref[1];
+        return [d < 0 ? d * 0.5 : d * 2, 0];
       },
-      initial: function initial() {
+      from: function from() {
         return [zoom.get(), 0];
       }
+    },
+    pointer: {
+      touch: true
     }
   });
   return /*#__PURE__*/_react["default"].createElement("div", {
@@ -107,9 +127,10 @@ var Slide = function Slide(props) {
         e.stopPropagation();
       }
     }
-  }, /*#__PURE__*/_react["default"].createElement("div", Object.assign({
-    className: classPrefix + "-control"
-  }, bind()), /*#__PURE__*/_react["default"].createElement(_web.animated.div, {
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: classPrefix + "-control",
+    ref: controlRef
+  }, /*#__PURE__*/_react["default"].createElement(_web.animated.div, {
     className: classPrefix + "-image-wrapper",
     style: {
       scale: zoom,