antd-mobile 5.17.1 → 5.19.0

package/2x/cjs/locales/zh-CN.d.ts

@@ -93,17 +93,26 @@ declare const zhCN: {
         failedToLoad: string;
         retry: string;
     };
+    Input: {
+        clear: string;
+    };
     Mask: {
         name: string;
     };
     Modal: {
         ok: string;
     };
+    PasscodeInput: {
+        name: string;
+    };
     PullToRefresh: {
         pulling: string;
         canRelease: string;
         complete: string;
     };
+    SearchBar: {
+        name: string;
+    };
     Slider: {
         name: string;
     };

package/2x/cjs/locales/zh-CN.js

@@ -105,17 +105,26 @@ const zhCN = (0, _mergeLocale.mergeLocale)(_base.base, {
     failedToLoad: '加载失败',
     retry: '重新加载'
   },
+  Input: {
+    clear: '清除'
+  },
   Mask: {
     name: '遮罩层'
   },
   Modal: {
     ok: '我知道了'
   },
+  PasscodeInput: {
+    name: '密码输入框'
+  },
   PullToRefresh: {
     pulling: '下拉刷新',
     canRelease: '释放立即刷新',
     complete: '刷新成功'
   },
+  SearchBar: {
+    name: '搜索框'
+  },
   Slider: {
     name: '滑动输入条'
   },

package/2x/cjs/locales/zh-HK.d.ts

@@ -93,17 +93,26 @@ declare const zhHK: {
         failedToLoad: string;
         retry: string;
     };
+    Input: {
+        clear: string;
+    };
     Mask: {
         name: string;
     };
     Modal: {
         ok: string;
     };
+    PasscodeInput: {
+        name: string;
+    };
     PullToRefresh: {
         pulling: string;
         canRelease: string;
         complete: string;
     };
+    SearchBar: {
+        name: string;
+    };
     Slider: {
         name: string;
     };

package/2x/cjs/locales/zh-TW.d.ts

@@ -93,17 +93,26 @@ declare const zhTW: {
         failedToLoad: string;
         retry: string;
     };
+    Input: {
+        clear: string;
+    };
     Mask: {
         name: string;
     };
     Modal: {
         ok: string;
     };
+    PasscodeInput: {
+        name: string;
+    };
     PullToRefresh: {
         pulling: string;
         canRelease: string;
         complete: string;
     };
+    SearchBar: {
+        name: string;
+    };
     Slider: {
         name: string;
     };

package/2x/cjs/utils/matrix.d.ts

@@ -0,0 +1,10 @@
+export declare type Matrix = readonly [number, number, number, number, number, number];
+export declare const create: () => Matrix;
+export declare const getTranslateX: (m: Matrix) => number;
+export declare const getTranslateY: (m: Matrix) => number;
+export declare const getScaleX: (m: Matrix) => number;
+export declare const getScaleY: (m: Matrix) => number;
+export declare const translate: (m: Matrix, x: number, y: number) => Matrix;
+export declare const scale: (m: Matrix, scaleX: number, scaleY?: number) => Matrix;
+export declare const apply: (m: Matrix, [ox, oy]: [number, number]) => [number, number];
+export declare const multiply: (m1: Matrix, m2: Matrix) => Matrix;

package/2x/cjs/utils/matrix.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.translate = exports.scale = exports.multiply = exports.getTranslateY = exports.getTranslateX = exports.getScaleY = exports.getScaleX = exports.create = exports.apply = void 0;
+
+const create = () => {
+  return [1, 0, 0, 1, 0, 0];
+};
+
+exports.create = create;
+
+const getTranslateX = m => {
+  return m[4];
+};
+
+exports.getTranslateX = getTranslateX;
+
+const getTranslateY = m => {
+  return m[5];
+};
+
+exports.getTranslateY = getTranslateY;
+
+const getScaleX = m => {
+  return m[0];
+};
+
+exports.getScaleX = getScaleX;
+
+const getScaleY = m => {
+  return m[3];
+};
+
+exports.getScaleY = getScaleY;
+
+const translate = (m, x, y) => {
+  return multiply([1, 0, 0, 1, x, y], m);
+};
+
+exports.translate = translate;
+
+const scale = (m, scaleX, scaleY = scaleX) => {
+  return multiply([scaleX, 0, 0, scaleY, 0, 0], m);
+};
+
+exports.scale = scale;
+
+const apply = (m, [ox, oy]) => {
+  return [m[0] * ox + m[2] * oy + m[4], m[1] * ox + m[3] * oy + m[5]];
+};
+
+exports.apply = apply;
+
+const multiply = (m1, m2) => {
+  return [m1[0] * m2[0] + m1[2] * m2[1], m1[1] * m2[0] + m1[3] * m2[1], m1[0] * m2[2] + m1[2] * m2[3], m1[1] * m2[2] + m1[3] * m2[3], m1[0] * m2[4] + m1[2] * m2[5] + m1[4], m1[1] * m2[4] + m1[3] * m2[5] + m1[5]];
+};
+
+exports.multiply = multiply;

package/2x/cjs/utils/merge-locale.d.ts

@@ -1 +1 @@
-export declare function mergeLocale<T, P>(base: T, patch: P): T;
+export declare function mergeLocale<T extends object, P extends object>(base: T, patch: P): T;

package/2x/cjs/utils/merge-locale.js

@@ -5,12 +5,22 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.mergeLocale = mergeLocale;
 
-var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
+function mergeLocale(base, patch) {
+  function merge(a, b) {
+    if (typeof a !== 'object' || typeof b !== 'object' || Array.isArray(a) || Array.isArray(b)) {
+      return b !== undefined ? b : a;
+    }
 
-var _merge = _interopRequireDefault(require("lodash/merge"));
+    const result = {};
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+    for (const key in a) {
+      if (a.hasOwnProperty(key)) {
+        result[key] = merge(a[key], b[key]);
+      }
+    }
 
-function mergeLocale(base, patch) {
-  return (0, _merge.default)((0, _cloneDeep.default)(base), patch);
+    return result;
+  }
+
+  return merge(base, patch);
 }

package/2x/cjs/utils/use-drag-and-pinch.d.ts

@@ -1 +1 @@
-export declare const useDragAndPinch: <Config extends import("@use-gesture/react").UserGestureConfig = import("@use-gesture/react").UserGestureConfig>(_handlers: Partial<import("@use-gesture/react").NativeHandlers<import("@use-gesture/react").EventTypes> & import("@use-gesture/react").UserHandlers<import("@use-gesture/react").EventTypes>>, _config?: Config | undefined) => Config["target"] extends object ? void : (...args: any[]) => import("@use-gesture/react").ReactDOMAttributes;
+export declare const useDragAndPinch: <Config extends import("@use-gesture/react").UserGestureConfig = import("@use-gesture/react").UserGestureConfig>(_handlers: Partial<import("@use-gesture/react").NativeHandlers<import("@use-gesture/react").EventTypes> & import("@use-gesture/react").UserHandlers<import("@use-gesture/react").EventTypes>>, _config?: Config | undefined) => Config["target"] extends object ? void : (...args: any[]) => import("@use-gesture/react/dist/declarations/src/types").ReactDOMAttributes;

package/2x/cjs/utils/use-props-value.js

@@ -28,7 +28,7 @@ function usePropsValue(options) {
     if (!forceTrigger && nextValue === stateRef.current) return;
     stateRef.current = nextValue;
     update();
-    onChange === null || onChange === void 0 ? void 0 : onChange(nextValue);
+    return onChange === null || onChange === void 0 ? void 0 : onChange(nextValue);
   });
   return [stateRef.current, setState];
 }

package/2x/cjs/utils/with-default-props.js

@@ -5,20 +5,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.mergeProps = mergeProps;
 
-var _assign = _interopRequireDefault(require("lodash/assign"));
-
 var _assignWith = _interopRequireDefault(require("lodash/assignWith"));
 
-var _isUndefined = _interopRequireDefault(require("lodash/isUndefined"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function mergeProps(...items) {
   function customizer(objValue, srcValue) {
-    return (0, _isUndefined.default)(srcValue) ? objValue : srcValue;
+    return srcValue === undefined ? objValue : srcValue;
   }
 
-  let ret = (0, _assign.default)({}, items[0]);
+  let ret = Object.assign({}, items[0]);
 
   for (let i = 1; i < items.length; i++) {
     ret = (0, _assignWith.default)(ret, items[i], customizer);

package/2x/es/components/action-sheet/action-sheet.d.ts

@@ -27,4 +27,4 @@ export declare const ActionSheet: FC<ActionSheetProps>;
 export declare type ActionSheetShowHandler = {
     close: () => void;
 };
-export declare function showActionSheet(props: Omit<ActionSheetProps, 'visible'>): ActionSheetShowHandler;
+export declare function showActionSheet(props: Omit<ActionSheetProps, 'visible' | 'destroyOnClose' | 'forceRender'>): ActionSheetShowHandler;

package/2x/es/components/button/button.js

@@ -68,5 +68,5 @@ export const Button = forwardRef((p, ref) => {
     onTouchEnd: props.onTouchEnd
   }, loading ? React.createElement("div", {
     className: `${classPrefix}-loading-wrapper`
-  }, props.loadingIcon, props.loadingText) : props.children));
+  }, props.loadingIcon, props.loadingText) : React.createElement("span", null, props.children)));
 });

package/2x/es/components/calendar/calendar.d.ts

@@ -4,7 +4,7 @@ declare type Page = {
     month: number;
     year: number;
 };
-export declare type CalenderRef = {
+export declare type CalendarRef = {
     jumpTo: (page: Page | ((page: Page) => Page)) => void;
     jumpToToday: () => void;
 };
@@ -15,7 +15,7 @@ export declare type CalendarProps = {
     nextYearButton?: React.ReactNode;
     onPageChange?: (year: number, month: number) => void;
     weekStartsOn?: 'Monday' | 'Sunday';
-    renderLabel?: (date: Date) => string | null | undefined;
+    renderLabel?: (date: Date) => React.ReactNode;
     allowClear?: boolean;
     max?: Date;
     min?: Date;
@@ -36,5 +36,5 @@ export declare type CalendarProps = {
     defaultValue?: [Date, Date] | null;
     onChange?: (val: [Date, Date] | null) => void;
 }) & NativeProps;
-export declare const Calendar: React.ForwardRefExoticComponent<CalendarProps & React.RefAttributes<CalenderRef>>;
+export declare const Calendar: React.ForwardRefExoticComponent<CalendarProps & React.RefAttributes<CalendarRef>>;
 export {};

package/2x/es/components/calendar/index.d.ts

@@ -1,4 +1,4 @@
 import './calendar.less';
 import { Calendar } from './calendar';
-export type { CalendarProps, CalenderRef } from './calendar';
+export type { CalendarProps, CalendarRef } from './calendar';
 export default Calendar;

package/2x/es/components/cascader/cascader.d.ts

@@ -23,6 +23,7 @@ export declare type CascaderProps = {
     cancelText?: ReactNode;
     children?: (items: (CascaderOption | null)[], actions: CascaderActions) => ReactNode;
     onTabsChange?: (index: number) => void;
+    activeIcon?: ReactNode;
 } & Pick<PopupProps, 'getContainer' | 'afterShow' | 'afterClose' | 'onClick' | 'stopPropagation' | 'destroyOnClose' | 'forceRender'> & NativeProps;
 export declare const Cascader: React.ForwardRefExoticComponent<{
     options: CascaderOption[];
@@ -39,6 +40,7 @@ export declare const Cascader: React.ForwardRefExoticComponent<{
     cancelText?: ReactNode;
     children?: ((items: (CascaderOption | null)[], actions: CascaderActions) => ReactNode) | undefined;
     onTabsChange?: ((index: number) => void) | undefined;
+    activeIcon?: ReactNode;
 } & Pick<PopupProps, "onClick" | "destroyOnClose" | "forceRender" | "getContainer" | "afterShow" | "afterClose" | "stopPropagation"> & {
     className?: string | undefined;
     style?: (React.CSSProperties & Partial<Record<never, string>>) | undefined;

package/2x/es/components/cascader/index.d.ts

@@ -18,6 +18,7 @@ declare const _default: import("react").ForwardRefExoticComponent<{
     cancelText?: import("react").ReactNode;
     children?: ((items: (import("../cascader-view").CascaderOption | null)[], actions: import("./cascader").CascaderActions) => import("react").ReactNode) | undefined;
     onTabsChange?: ((index: number) => void) | undefined;
+    activeIcon?: import("react").ReactNode;
 } & Pick<import("../popup").PopupProps, "onClick" | "destroyOnClose" | "forceRender" | "getContainer" | "afterShow" | "afterClose" | "stopPropagation"> & {
     className?: string | undefined;
     style?: (import("react").CSSProperties & Partial<Record<never, string>>) | undefined;

package/2x/es/components/cascader-view/cascader-view.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type CascaderValue = string;
 export declare type CascaderOption = {
@@ -18,5 +18,6 @@ export declare type CascaderViewProps = {
     onChange?: (value: CascaderValue[], extend: CascaderValueExtend) => void;
     placeholder?: string;
     onTabsChange?: (index: number) => void;
+    activeIcon?: ReactNode;
 } & NativeProps<'--height'>;
 export declare const CascaderView: FC<CascaderViewProps>;

package/2x/es/components/cascader-view/cascader-view.js

@@ -121,7 +121,8 @@ export const CascaderView = p => {
       animated: true
     })) : React.createElement(CheckList, {
       value: [value[index]],
-      onChange: selectValue => onItemSelect(selectValue[0], index)
+      onChange: selectValue => onItemSelect(selectValue[0], index),
+      activeIcon: props.activeIcon
     }, level.options.map(option => {
       const active = value[index] === option.value;
       return React.createElement(CheckList.Item, {

package/2x/es/components/dialog/show.d.ts

@@ -1,5 +1,5 @@
 import { DialogProps } from './dialog';
-export declare type DialogShowProps = Omit<DialogProps, 'visible'>;
+export declare type DialogShowProps = Omit<DialogProps, 'visible' | 'destroyOnClose' | 'forceRender'>;
 export declare type DialogShowHandler = {
     close: () => void;
 };

package/2x/es/components/floating-panel/floating-panel.css

@@ -2,9 +2,6 @@
   --border-radius: 16px;
   --header-height: 56px;
   --z-index: var(--adm-floating-panel-z-index, 900);
-  border-top-left-radius: var(--border-radius);
-  border-top-right-radius: var(--border-radius);
-  background: var(--adm-color-white);
   position: fixed;
   z-index: var(--z-index);
   bottom: 0;
@@ -32,7 +29,7 @@
   bottom: -100vh;
   height: 100vh;
   width: 100vw;
-  background: var(--adm-color-white);
+  background: var(--adm-color-background);
 }
 
 .adm-floating-panel .adm-floating-panel-header {
@@ -46,6 +43,8 @@
   -webkit-user-select: none;
   user-select: none;
   background-color: var(--adm-color-background);
+  border-top-left-radius: var(--border-radius);
+  border-top-right-radius: var(--border-radius);
 }
 
 .adm-floating-panel .adm-floating-panel-header .adm-floating-panel-bar {
@@ -58,4 +57,5 @@
 .adm-floating-panel .adm-floating-panel-content {
   flex: 1;
   overflow-y: scroll;
+  background: var(--adm-color-background);
 }

package/2x/es/components/form/form-item.js

@@ -1,6 +1,7 @@
 import { __rest } from "tslib";
 import React, { useContext, useCallback, useState, useRef } from 'react';
 import classNames from 'classnames';
+import { withNativeProps } from '../../utils/native-props';
 import { Field } from 'rc-field-form';
 import FieldContext from 'rc-field-form/lib/FieldContext';
 import { devWarning } from '../../utils/dev-log';
@@ -87,7 +88,7 @@ const FormItemLayout = props => {
     key: `warning-${index}`,
     className: `${classPrefix}-feedback-warning`
   }, warning)))) : null;
-  return React.createElement(List.Item, {
+  return withNativeProps(props, React.createElement(List.Item, {
     style: style,
     title: layout === 'vertical' && labelElement,
     prefix: layout === 'horizontal' && labelElement,
@@ -105,7 +106,7 @@ const FormItemLayout = props => {
     className: classNames(`${classPrefix}-child`, `${classPrefix}-child-position-${childElementPosition}`)
   }, React.createElement("div", {
     className: classNames(`${classPrefix}-child-inner`)
-  }, children)));
+  }, children))));
 };
 
 export const FormItem = props => {
@@ -197,7 +198,7 @@ export const FormItem = props => {
 
       return subWarnings;
     }, curWarnings);
-    return React.createElement(FormItemLayout, {
+    return withNativeProps(props, React.createElement(FormItemLayout, {
       className: className,
       style: style,
       label: label,
@@ -218,7 +219,7 @@ export const FormItem = props => {
       arrow: arrow
     }, React.createElement(NoStyleItemContext.Provider, {
       value: onSubMetaChange
-    }, baseChildren));
+    }, baseChildren)));
   }
 
   const isRenderProps = typeof children === 'function';

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

@@ -1,8 +1,10 @@
 import React, { useRef } from 'react';
 import { useSpring, animated } from '@react-spring/web';
+import { useSize } from 'ahooks';
 import { rubberbandIfOutOfBounds } from '../../utils/rubberband';
 import { useDragAndPinch } from '../../utils/use-drag-and-pinch';
 import { bound } from '../../utils/bound';
+import * as mat from '../../utils/matrix';
 const classPrefix = `adm-image-viewer`;
 export const Slide = props => {
   const {
@@ -11,54 +13,71 @@ export const Slide = props => {
   const controlRef = useRef(null);
   const imgRef = useRef(null);
   const [{
-    zoom,
-    x,
-    y
+    matrix
   }, api] = useSpring(() => ({
-    zoom: 1,
-    x: 0,
-    y: 0,
+    matrix: mat.create(),
     config: {
       tension: 200
     }
   }));
+  const controlSize = useSize(controlRef);
+  const imgSize = useSize(imgRef);
   const pinchLockRef = useRef(false);
 
-  function boundXY([x, y], rubberband) {
-    const currentZoom = zoom.get();
-    let xOffset = 0,
-        yOffset = 0;
+  const boundMatrix = (nextMatrix, type, last = false) => {
+    if (!controlSize || !imgSize) return nextMatrix;
+    const controlLeft = -controlSize.width / 2;
+    const controlTop = -controlSize.height / 2;
+    const imgLeft = -imgSize.width / 2;
+    const imgTop = -imgSize.height / 2;
+    const zoom = mat.getScaleX(nextMatrix);
+    const scaledImgWidth = zoom * imgSize.width;
+    const scaledImgHeight = zoom * imgSize.height;
+    const [x, y] = mat.apply(nextMatrix, [imgLeft, imgTop]);
 
-    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;
+    if (type === 'translate') {
+      let boundedX = x;
+      let boundedY = y;
+
+      if (scaledImgWidth > controlSize.width) {
+        const minX = controlLeft - (scaledImgWidth - controlSize.width);
+        const maxX = controlLeft;
+        boundedX = last ? bound(x, minX, maxX) : rubberbandIfOutOfBounds(x, minX, maxX, zoom * 50);
+      } else {
+        boundedX = -scaledImgWidth / 2;
+      }
+
+      if (scaledImgHeight > controlSize.height) {
+        const minY = controlTop - (scaledImgHeight - controlSize.height);
+        const maxY = controlTop;
+        boundedY = last ? bound(y, minY, maxY) : rubberbandIfOutOfBounds(y, minY, maxY, zoom * 50);
+      } else {
+        boundedY = -scaledImgHeight / 2;
+      }
+
+      return mat.translate(nextMatrix, boundedX - x, boundedY - y);
     }
 
-    xOffset = xOffset > 0 ? xOffset : 0;
-    yOffset = yOffset > 0 ? yOffset : 0;
-    const bounds = {
-      left: -xOffset,
-      right: xOffset,
-      top: -yOffset,
-      bottom: yOffset
-    };
-
-    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)];
+    if (type === 'scale' && last) {
+      const [boundedX, boundedY] = [scaledImgWidth > controlSize.width ? bound(x, controlLeft - (scaledImgWidth - controlSize.width), controlLeft) : -scaledImgWidth / 2, scaledImgHeight > controlSize.height ? bound(y, controlTop - (scaledImgHeight - controlSize.height), controlTop) : -scaledImgHeight / 2];
+      return mat.translate(nextMatrix, boundedX - x, boundedY - y);
     }
-  }
+
+    return nextMatrix;
+  };
 
   useDragAndPinch({
     onDrag: state => {
+      if (state.first) return;
+      if (state.pinching) return state.cancel();
+
       if (state.tap && state.elapsedTime > 0 && state.elapsedTime < 1000) {
         // 判断点击时间>0是为了过滤掉非正常操作，例如用户长按选择图片之后的取消操作（也是一次点击）
         props.onTap();
         return;
       }
 
-      const currentZoom = zoom.get();
+      const currentZoom = mat.getScaleX(matrix.get());
 
       if (dragLockRef) {
         dragLockRef.current = currentZoom !== 1;
@@ -66,24 +85,16 @@ export const Slide = props => {
 
       if (!pinchLockRef.current && currentZoom <= 1) {
         api.start({
-          x: 0,
-          y: 0
+          matrix: mat.create()
         });
       } else {
-        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
-          });
-        }
+        const currentMatrix = matrix.get();
+        const offset = [state.offset[0] - mat.getTranslateX(currentMatrix), state.offset[1] - mat.getTranslateY(currentMatrix)];
+        const nextMatrix = mat.translate(currentMatrix, ...(state.last ? [offset[0] + state.velocity[0] * state.direction[0] * 200, offset[1] + state.velocity[1] * state.direction[1] * 200] : offset));
+        api.start({
+          matrix: boundMatrix(nextMatrix, 'translate', state.last),
+          immediate: !state.last
+        });
       }
     },
     onPinch: state => {
@@ -93,22 +104,30 @@ export const Slide = props => {
       const [d] = state.offset;
       if (d < 0) return;
       const nextZoom = state.last ? bound(d, 1, props.maxZoom) : d;
-      api.start({
-        zoom: nextZoom,
-        immediate: !state.last
-      });
       (_a = props.onZoomChange) === null || _a === void 0 ? void 0 : _a.call(props, nextZoom);
 
       if (state.last && nextZoom <= 1) {
         api.start({
-          x: 0,
-          y: 0
+          matrix: mat.create()
         });
 
         if (dragLockRef) {
           dragLockRef.current = false;
         }
       } else {
+        if (!controlSize) return;
+        const currentMatrix = matrix.get();
+        const currentZoom = mat.getScaleX(currentMatrix);
+        const originOffsetX = state.origin[0] - controlSize.width / 2;
+        const originOffsetY = state.origin[1] - controlSize.height / 2;
+        let nextMatrix = mat.translate(currentMatrix, -originOffsetX, -originOffsetY);
+        nextMatrix = mat.scale(nextMatrix, nextZoom / currentZoom);
+        nextMatrix = mat.translate(nextMatrix, originOffsetX, originOffsetY);
+        api.start({
+          matrix: boundMatrix(nextMatrix, 'scale', state.last),
+          immediate: !state.last
+        });
+
         if (dragLockRef) {
           dragLockRef.current = true;
         }
@@ -118,13 +137,13 @@ export const Slide = props => {
     target: controlRef,
     drag: {
       // filterTaps: true,
-      from: () => [x.get(), y.get()],
+      from: () => [mat.getTranslateX(matrix.get()), mat.getTranslateY(matrix.get())],
       pointer: {
         touch: true
       }
     },
     pinch: {
-      from: () => [zoom.get(), 0],
+      from: () => [mat.getScaleX(matrix.get()), 0],
       pointer: {
         touch: true
       }
@@ -133,7 +152,7 @@ export const Slide = props => {
   return React.createElement("div", {
     className: `${classPrefix}-slide`,
     onPointerMove: e => {
-      if (zoom.get() !== 1) {
+      if (mat.getScaleX(matrix.get()) !== 1) {
         e.stopPropagation();
       }
     }
@@ -143,9 +162,7 @@ export const Slide = props => {
   }, React.createElement(animated.div, {
     className: `${classPrefix}-image-wrapper`,
     style: {
-      translateX: x,
-      translateY: y,
-      scale: zoom
+      matrix
     }
   }, React.createElement("img", {
     ref: imgRef,