antd-mobile 5.0.0-rc.9 → 5.2.0

package/2x/es/components/image-uploader/preview-item.js

@@ -2,19 +2,21 @@ import React, { useMemo } from 'react';
 import { CloseOutline } from 'antd-mobile-icons';
 import classNames from 'classnames';
 import Image from '../image';
-import Loading from '../loading';
+import SpinLoading from '../spin-loading';
 import { useConfig } from '../config-provider';
-var classPrefix = "adm-image-uploader";
-
-var PreviewItem = function PreviewItem(props) {
-  var _useConfig = useConfig(),
-      locale = _useConfig.locale;
-
-  var url = props.url,
-      file = props.file,
-      deletable = props.deletable,
-      onDelete = props.onDelete;
-  var src = useMemo(function () {
+const classPrefix = `adm-image-uploader`;
+
+const PreviewItem = props => {
+  const {
+    locale
+  } = useConfig();
+  const {
+    url,
+    file,
+    deletable,
+    onDelete
+  } = props;
+  const src = useMemo(() => {
     if (url) {
       return url;
     }
@@ -27,30 +29,30 @@ var PreviewItem = function PreviewItem(props) {
   }, [url, file]);
 
   function renderLoading() {
-    return props.status === 'pending' && /*#__PURE__*/React.createElement("div", {
-      className: classPrefix + "-cell-mask"
-    }, /*#__PURE__*/React.createElement("span", {
-      className: classPrefix + "-cell-loading"
-    }, /*#__PURE__*/React.createElement(Loading, {
-      color: '#fff'
-    }), /*#__PURE__*/React.createElement("span", {
-      className: classPrefix + "-cell-mask-message"
+    return props.status === 'pending' && React.createElement("div", {
+      className: `${classPrefix}-cell-mask`
+    }, React.createElement("span", {
+      className: `${classPrefix}-cell-loading`
+    }, React.createElement(SpinLoading, {
+      color: 'white'
+    }), React.createElement("span", {
+      className: `${classPrefix}-cell-mask-message`
     }, locale.ImageUploader.uploading)));
   }
 
   function renderDelete() {
-    return deletable && /*#__PURE__*/React.createElement("span", {
-      className: classPrefix + "-cell-delete",
+    return deletable && React.createElement("span", {
+      className: `${classPrefix}-cell-delete`,
       onClick: onDelete
-    }, /*#__PURE__*/React.createElement(CloseOutline, {
-      className: classPrefix + "-cell-delete-icon"
+    }, React.createElement(CloseOutline, {
+      className: `${classPrefix}-cell-delete-icon`
     }));
   }
 
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames(classPrefix + "-cell", props.status === 'fail' && classPrefix + "-cell-fail")
-  }, /*#__PURE__*/React.createElement(Image, {
-    className: classPrefix + "-cell-image",
+  return React.createElement("div", {
+    className: classNames(`${classPrefix}-cell`, props.status === 'fail' && `${classPrefix}-cell-fail`)
+  }, React.createElement(Image, {
+    className: `${classPrefix}-cell-image`,
     src: src,
     fit: 'cover',
     onClick: props.onClick

package/2x/es/components/image-viewer/image-viewer.css

@@ -11,6 +11,7 @@
   position: relative;
   z-index: 1;
   cursor: grab;
+  touch-action: none;
 }
 
 .adm-image-viewer-slides-inner {
@@ -37,6 +38,7 @@
   width: 100%;
   height: 100%;
   cursor: grab;
+  touch-action: none;
 }
 
 .adm-image-viewer-image-wrapper {

package/2x/es/components/image-viewer/image-viewer.d.ts

@@ -1,5 +1,6 @@
-import { FC } from 'react';
+import React, { FC } from 'react';
 import { GetContainer } from '../../utils/render-to-container';
+import { SlidesRef } from './slides';
 export declare type ImageViewerProps = {
     image?: string;
     maxZoom?: number;
@@ -9,9 +10,14 @@ export declare type ImageViewerProps = {
     afterClose?: () => void;
 };
 export declare const ImageViewer: FC<ImageViewerProps>;
+export declare type MultiImageViewerRef = SlidesRef;
 export declare type MultiImageViewerProps = Omit<ImageViewerProps, 'image'> & {
     images?: string[];
     defaultIndex?: number;
     onIndexChange?: (index: number) => void;
 };
-export declare const MultiImageViewer: FC<MultiImageViewerProps>;
+export declare const MultiImageViewer: React.ForwardRefExoticComponent<Pick<ImageViewerProps, "visible" | "onClose" | "afterClose" | "getContainer" | "maxZoom"> & {
+    images?: string[] | undefined;
+    defaultIndex?: number | undefined;
+    onIndexChange?: ((index: number) => void) | undefined;
+} & React.RefAttributes<SlidesRef>>;

package/2x/es/components/image-viewer/image-viewer.js

@@ -1,27 +1,27 @@
-import React from 'react';
+import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';
 import { mergeProps } from '../../utils/with-default-props';
 import { renderToContainer } from '../../utils/render-to-container';
 import Mask from '../mask';
 import { Slide } from './slide';
 import { Slides } from './slides';
-var classPrefix = "adm-image-viewer";
-var defaultProps = {
+const classPrefix = `adm-image-viewer`;
+const defaultProps = {
   maxZoom: 3,
   getContainer: null,
   visible: false
 };
-export var ImageViewer = function ImageViewer(p) {
-  var props = mergeProps(defaultProps, p);
-  var node = /*#__PURE__*/React.createElement(Mask, {
+export const ImageViewer = p => {
+  const props = mergeProps(defaultProps, p);
+  const node = React.createElement(Mask, {
     visible: props.visible,
     disableBodyScroll: false,
     opacity: 'thick',
     afterClose: props.afterClose
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-content"
-  }, props.image && /*#__PURE__*/React.createElement(Slide, {
+  }, React.createElement("div", {
+    className: `${classPrefix}-content`
+  }, props.image && React.createElement(Slide, {
     image: props.image,
-    onTap: function onTap() {
+    onTap: () => {
       var _a;
 
       (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
@@ -30,23 +30,34 @@ export var ImageViewer = function ImageViewer(p) {
   })));
   return renderToContainer(props.getContainer, node);
 };
-var multiDefaultProps = Object.assign(Object.assign({}, defaultProps), {
+const multiDefaultProps = Object.assign(Object.assign({}, defaultProps), {
   defaultIndex: 0
 });
-export var MultiImageViewer = function MultiImageViewer(p) {
-  var props = mergeProps(multiDefaultProps, p);
-  var node = /*#__PURE__*/React.createElement(Mask, {
+export const MultiImageViewer = forwardRef((p, ref) => {
+  const props = mergeProps(multiDefaultProps, p);
+  const [defaultIndex, setDefaultIndex] = useState(props.defaultIndex);
+  const slidesRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    swipeTo: (index, immediate) => {
+      var _a;
+
+      setDefaultIndex(index);
+      (_a = slidesRef.current) === null || _a === void 0 ? void 0 : _a.swipeTo(index, immediate);
+    }
+  }));
+  const node = React.createElement(Mask, {
     visible: props.visible,
     disableBodyScroll: false,
     opacity: 'thick',
     afterClose: props.afterClose
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-content"
-  }, props.images && /*#__PURE__*/React.createElement(Slides, {
-    defaultIndex: props.defaultIndex,
+  }, React.createElement("div", {
+    className: `${classPrefix}-content`
+  }, props.images && React.createElement(Slides, {
+    ref: slidesRef,
+    defaultIndex: defaultIndex,
     onIndexChange: props.onIndexChange,
     images: props.images,
-    onTap: function onTap() {
+    onTap: () => {
       var _a;
 
       (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
@@ -54,4 +65,4 @@ export var MultiImageViewer = function MultiImageViewer(p) {
     maxZoom: props.maxZoom
   })));
   return renderToContainer(props.getContainer, node);
-};
+});

package/2x/es/components/image-viewer/index.d.ts

@@ -1,9 +1,14 @@
 /// <reference types="react" />
 import './image-viewer.less';
 import { showMultiImageViewer, showImageViewer, clearImageViewer } from './methods';
-export type { ImageViewerProps, MultiImageViewerProps } from './image-viewer';
+export type { ImageViewerProps, MultiImageViewerProps, MultiImageViewerRef, } from './image-viewer';
+export type { ImageViewerHandler } from './methods';
 declare const _default: import("react").FC<import("./image-viewer").ImageViewerProps> & {
-    Multi: import("react").FC<import("./image-viewer").MultiImageViewerProps> & {
+    Multi: import("react").ForwardRefExoticComponent<Pick<import("./image-viewer").ImageViewerProps, "visible" | "onClose" | "afterClose" | "getContainer" | "maxZoom"> & {
+        images?: string[] | undefined;
+        defaultIndex?: number | undefined;
+        onIndexChange?: ((index: number) => void) | undefined;
+    } & import("react").RefAttributes<import("./slides").SlidesRef>> & {
         show: typeof showMultiImageViewer;
     };
     show: typeof showImageViewer;

package/2x/es/components/image-viewer/index.js

@@ -2,11 +2,11 @@ import "./image-viewer.css";
 import { attachPropertiesToComponent } from '../../utils/attach-properties-to-component';
 import { ImageViewer, MultiImageViewer } from './image-viewer';
 import { showMultiImageViewer, showImageViewer, clearImageViewer } from './methods';
-var Multi = attachPropertiesToComponent(MultiImageViewer, {
+const Multi = attachPropertiesToComponent(MultiImageViewer, {
   show: showMultiImageViewer
 });
 export default attachPropertiesToComponent(ImageViewer, {
-  Multi: Multi,
+  Multi,
   show: showImageViewer,
   clear: clearImageViewer
 });

package/2x/es/components/image-viewer/methods.d.ts

@@ -1,4 +1,7 @@
 import { ImageViewerProps, MultiImageViewerProps } from './image-viewer';
+export declare type ImageViewerHandler = {
+    close: () => void;
+};
 export declare function showImageViewer(props: Omit<ImageViewerProps, 'visible'>): {
     close: () => void;
 };

package/2x/es/components/image-viewer/methods.js

@@ -2,35 +2,30 @@ import React, { createRef, forwardRef, useEffect, useImperativeHandle, useState
 import { renderToBody } from '../../utils/render-to-body';
 import { ImageViewer, MultiImageViewer } from './image-viewer';
 import { useUnmountedRef } from 'ahooks';
-var handlerSet = new Set();
+const handlerSet = new Set();
 export function showImageViewer(props) {
   clearImageViewer();
-  var Wrapper = /*#__PURE__*/forwardRef(function (_, ref) {
-    var _useState = useState(false),
-        visible = _useState[0],
-        setVisible = _useState[1];
-
-    useEffect(function () {
+  const Wrapper = forwardRef((_, ref) => {
+    const [visible, setVisible] = useState(false);
+    useEffect(() => {
       setVisible(true);
     }, []);
-    var isUnmountedRef = useUnmountedRef();
-    useImperativeHandle(ref, function () {
-      return {
-        close: function close() {
-          if (isUnmountedRef.current) return;
-          setVisible(false);
-        }
-      };
-    });
-    return /*#__PURE__*/React.createElement(ImageViewer, Object.assign({}, props, {
+    const isUnmountedRef = useUnmountedRef();
+    useImperativeHandle(ref, () => ({
+      close: () => {
+        if (isUnmountedRef.current) return;
+        setVisible(false);
+      }
+    }));
+    return React.createElement(ImageViewer, Object.assign({}, props, {
       visible: visible,
-      onClose: function onClose() {
+      onClose: () => {
         var _a;
 
         (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
         setVisible(false);
       },
-      afterClose: function afterClose() {
+      afterClose: () => {
         var _a;
 
         (_a = props.afterClose) === null || _a === void 0 ? void 0 : _a.call(props);
@@ -38,12 +33,12 @@ export function showImageViewer(props) {
       }
     }));
   });
-  var ref = /*#__PURE__*/createRef();
-  var unmount = renderToBody( /*#__PURE__*/React.createElement(Wrapper, {
+  const ref = createRef();
+  const unmount = renderToBody(React.createElement(Wrapper, {
     ref: ref
   }));
-  var handler = {
-    close: function close() {
+  const handler = {
+    close: () => {
       var _a;
 
       (_a = ref.current) === null || _a === void 0 ? void 0 : _a.close();
@@ -54,32 +49,27 @@ export function showImageViewer(props) {
 }
 export function showMultiImageViewer(props) {
   clearImageViewer();
-  var Wrapper = /*#__PURE__*/forwardRef(function (_, ref) {
-    var _useState2 = useState(false),
-        visible = _useState2[0],
-        setVisible = _useState2[1];
-
-    useEffect(function () {
+  const Wrapper = forwardRef((_, ref) => {
+    const [visible, setVisible] = useState(false);
+    useEffect(() => {
       setVisible(true);
     }, []);
-    var isUnmountedRef = useUnmountedRef();
-    useImperativeHandle(ref, function () {
-      return {
-        close: function close() {
-          if (isUnmountedRef.current) return;
-          setVisible(false);
-        }
-      };
-    });
-    return /*#__PURE__*/React.createElement(MultiImageViewer, Object.assign({}, props, {
+    const isUnmountedRef = useUnmountedRef();
+    useImperativeHandle(ref, () => ({
+      close: () => {
+        if (isUnmountedRef.current) return;
+        setVisible(false);
+      }
+    }));
+    return React.createElement(MultiImageViewer, Object.assign({}, props, {
       visible: visible,
-      onClose: function onClose() {
+      onClose: () => {
         var _a;
 
         (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
         setVisible(false);
       },
-      afterClose: function afterClose() {
+      afterClose: () => {
         var _a;
 
         (_a = props.afterClose) === null || _a === void 0 ? void 0 : _a.call(props);
@@ -87,12 +77,12 @@ export function showMultiImageViewer(props) {
       }
     }));
   });
-  var ref = /*#__PURE__*/createRef();
-  var unmount = renderToBody( /*#__PURE__*/React.createElement(Wrapper, {
+  const ref = createRef();
+  const unmount = renderToBody(React.createElement(Wrapper, {
     ref: ref
   }));
-  var handler = {
-    close: function close() {
+  const handler = {
+    close: () => {
       var _a;
 
       (_a = ref.current) === null || _a === void 0 ? void 0 : _a.close();
@@ -102,7 +92,7 @@ export function showMultiImageViewer(props) {
   return handler;
 }
 export function clearImageViewer() {
-  handlerSet.forEach(function (handler) {
+  handlerSet.forEach(handler => {
     handler.close();
   });
   handlerSet.clear();

package/2x/es/components/image-viewer/slide.js

@@ -1,37 +1,64 @@
 import React, { useRef } from 'react';
-import { useGesture } from '@use-gesture/react';
 import { useSpring, animated } from '@react-spring/web';
-var classPrefix = "adm-image-viewer";
-export var Slide = function Slide(props) {
-  var dragLockRef = props.dragLockRef;
-  var controlRef = useRef(null);
+import { rubberbandIfOutOfBounds } from '../../utils/rubberband';
+import { useDragAndPinch } from '../../utils/use-drag-and-pinch';
+import { bound } from '../../utils/bound';
+const classPrefix = `adm-image-viewer`;
+export const Slide = props => {
+  const {
+    dragLockRef
+  } = props;
+  const controlRef = useRef(null);
+  const imgRef = useRef(null);
+  const [{
+    zoom,
+    x,
+    y
+  }, api] = useSpring(() => ({
+    zoom: 1,
+    x: 0,
+    y: 0,
+    config: {
+      tension: 200
+    }
+  }));
+  const pinchLockRef = useRef(false);
 
-  var _useSpring = useSpring(function () {
-    return {
-      zoom: 1,
-      x: 0,
-      y: 0,
-      config: {
-        tension: 300
-      }
+  function boundXY([x, y], rubberband) {
+    const currentZoom = zoom.get();
+    let xOffset = 0,
+        yOffset = 0;
+
+    if (imgRef.current && controlRef.current) {
+      xOffset = ((currentZoom * imgRef.current.width || 0) - controlRef.current.clientWidth) / 2;
+      yOffset = ((currentZoom * imgRef.current.height || 0) - controlRef.current.clientHeight) / 2;
+    }
+
+    xOffset = xOffset > 0 ? xOffset : 0;
+    yOffset = yOffset > 0 ? yOffset : 0;
+    const bounds = {
+      left: -xOffset,
+      right: xOffset,
+      top: -yOffset,
+      bottom: yOffset
     };
-  }),
-      _useSpring$ = _useSpring[0],
-      zoom = _useSpring$.zoom,
-      x = _useSpring$.x,
-      y = _useSpring$.y,
-      api = _useSpring[1];
 
-  var pinchLockRef = useRef(false);
-  useGesture({
-    onDrag: function onDrag(state) {
-      if (state.tap && state.elapsedTime > 0) {
+    if (rubberband) {
+      return [rubberbandIfOutOfBounds(x, bounds.left, bounds.right, currentZoom * 50), rubberbandIfOutOfBounds(y, bounds.top, bounds.bottom, currentZoom * 50)];
+    } else {
+      return [bound(x, bounds.left, bounds.right), bound(y, bounds.top, bounds.bottom)];
+    }
+  }
+
+  useDragAndPinch({
+    onDrag: state => {
+      if (state.tap && state.elapsedTime > 0 && state.elapsedTime < 1000) {
         // 判断点击时间>0是为了过滤掉非正常操作，例如用户长按选择图片之后的取消操作（也是一次点击）
         props.onTap();
         return;
       }
 
-      var currentZoom = zoom.get();
+      const currentZoom = zoom.get();
 
       if (dragLockRef) {
         dragLockRef.current = currentZoom !== 1;
@@ -43,32 +70,36 @@ export var Slide = function Slide(props) {
           y: 0
         });
       } else {
-        var _state$offset = state.offset,
-            _x = _state$offset[0],
-            _y = _state$offset[1];
-        api.start({
-          x: _x,
-          y: _y,
-          immediate: true
-        });
+        if (state.last) {
+          const [x, y] = boundXY([state.offset[0] + state.velocity[0] * state.direction[0] * 200, state.offset[1] + state.velocity[1] * state.direction[1] * 200], false);
+          api.start({
+            x,
+            y
+          });
+        } else {
+          const [x, y] = boundXY(state.offset, true);
+          api.start({
+            x,
+            y,
+            immediate: true
+          });
+        }
       }
     },
-    onPinch: function onPinch(state) {
+    onPinch: state => {
       var _a;
 
       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;
+      const [d] = state.offset;
+      if (d < 0) return;
+      const nextZoom = state.last ? bound(d, 1, props.maxZoom) : d;
       api.start({
-        zoom: zoom,
+        zoom: nextZoom,
         immediate: !state.last
       });
-      (_a = props.onZoomChange) === null || _a === void 0 ? void 0 : _a.call(props, zoom);
+      (_a = props.onZoomChange) === null || _a === void 0 ? void 0 : _a.call(props, nextZoom);
 
-      if (state.last && zoom <= 1) {
+      if (state.last && nextZoom <= 1) {
         api.start({
           x: 0,
           y: 0
@@ -87,38 +118,39 @@ export var Slide = function Slide(props) {
     target: controlRef,
     drag: {
       // filterTaps: true,
-      from: function from() {
-        return [x.get(), y.get()];
+      from: () => [x.get(), y.get()],
+      pointer: {
+        touch: true
       }
     },
     pinch: {
-      from: function from() {
-        return [zoom.get(), 0];
+      from: () => [zoom.get(), 0],
+      pointer: {
+        touch: true
       }
-    },
-    pointer: {
-      touch: true
     }
   });
-  return /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-slide",
-    onPointerMove: function onPointerMove(e) {
+  return React.createElement("div", {
+    className: `${classPrefix}-slide`,
+    onPointerMove: e => {
       if (zoom.get() !== 1) {
         e.stopPropagation();
       }
     }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-control",
+  }, React.createElement("div", {
+    className: `${classPrefix}-control`,
     ref: controlRef
-  }, /*#__PURE__*/React.createElement(animated.div, {
-    className: classPrefix + "-image-wrapper",
+  }, React.createElement(animated.div, {
+    className: `${classPrefix}-image-wrapper`,
     style: {
-      scale: zoom,
-      x: x,
-      y: y
+      translateX: x,
+      translateY: y,
+      scale: zoom
     }
-  }, /*#__PURE__*/React.createElement("img", {
+  }, React.createElement("img", {
+    ref: imgRef,
     src: props.image,
-    draggable: false
+    draggable: false,
+    alt: props.image
   }))));
 };

package/2x/es/components/image-viewer/slides.d.ts

@@ -1,8 +1,12 @@
-import { FC } from 'react';
-export declare const Slides: FC<{
+import React from 'react';
+export declare type SlidesType = {
     images: string[];
     onTap: () => void;
     maxZoom: number;
     defaultIndex: number;
     onIndexChange?: (index: number) => void;
-}>;
+};
+export declare type SlidesRef = {
+    swipeTo: (index: number, immediate?: boolean) => void;
+};
+export declare const Slides: React.ForwardRefExoticComponent<SlidesType & React.RefAttributes<SlidesRef>>;