antd-mobile 5.0.0 → 5.1.0

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

@@ -1,12 +1,15 @@
 import React, { useRef } from 'react';
-import { useGesture } from '@use-gesture/react';
 import { useSpring, animated } from '@react-spring/web';
+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,
@@ -16,11 +19,38 @@ export const Slide = props => {
     x: 0,
     y: 0,
     config: {
-      tension: 300
+      tension: 200
     }
   }));
   const pinchLockRef = useRef(false);
-  useGesture({
+
+  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
+    };
+
+    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是为了过滤掉非正常操作，例如用户长按选择图片之后的取消操作（也是一次点击）
@@ -40,12 +70,20 @@ export const Slide = props => {
           y: 0
         });
       } else {
-        const [x, y] = state.offset;
-        api.start({
-          x,
-          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: state => {
@@ -53,16 +91,15 @@ export const Slide = props => {
 
       pinchLockRef.current = !state.last;
       const [d] = state.offset;
-      if (d < 0) return; // pinch的rubberband不会自动弹回bound，这里手动实现了
-
-      const zoom = state.last ? Math.max(Math.min(d, props.maxZoom), 1) : d;
+      if (d < 0) return;
+      const nextZoom = state.last ? bound(d, 1, props.maxZoom) : d;
       api.start({
-        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
@@ -106,11 +143,12 @@ export const Slide = props => {
   }, React.createElement(animated.div, {
     className: `${classPrefix}-image-wrapper`,
     style: {
-      scale: zoom,
-      x,
-      y
+      translateX: x,
+      translateY: y,
+      scale: zoom
     }
   }, React.createElement("img", {
+    ref: imgRef,
     src: props.image,
     draggable: false,
     alt: props.image

package/es/components/index-bar/index-bar.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type IndexBarProps = {
     sticky?: boolean;

package/es/components/index-bar/index-bar.js

@@ -15,9 +15,11 @@ export const IndexBar = forwardRef((p, ref) => {
   const props = mergeProps(defaultProps, p);
   const titleHeight = convertPx(35);
   const bodyRef = useRef(null);
-  const indexes = [];
+  const indexItems = [];
   const panels = [];
   React.Children.forEach(props.children, child => {
+    var _a;
+
     if (!React.isValidElement(child)) return;
 
     if (child.type !== Panel) {
@@ -25,7 +27,10 @@ export const IndexBar = forwardRef((p, ref) => {
       return;
     }
 
-    indexes.push(child.props.index);
+    indexItems.push({
+      index: child.props.index,
+      brief: (_a = child.props.brief) !== null && _a !== void 0 ? _a : child.props.index.charAt(0)
+    });
     panels.push(withNativeProps(child.props, React.createElement("div", {
       key: child.props.index,
       "data-index": child.props.index,
@@ -34,7 +39,10 @@ export const IndexBar = forwardRef((p, ref) => {
       className: `${classPrefix}-anchor-title`
     }, child.props.title || child.props.index), child.props.children)));
   });
-  const [activeIndex, setActiveIndex] = useState(indexes[0]);
+  const [activeIndex, setActiveIndex] = useState(() => {
+    const firstItem = indexItems[0];
+    return firstItem ? firstItem.index : null;
+  });
   useImperativeHandle(ref, () => ({
     scrollTo
   }));
@@ -86,7 +94,7 @@ export const IndexBar = forwardRef((p, ref) => {
       [`${classPrefix}-sticky`]: props.sticky
     })
   }, React.createElement(Sidebar, {
-    indexes: indexes,
+    indexItems: indexItems,
     activeIndex: activeIndex,
     onActive: index => {
       scrollTo(index);

package/es/components/index-bar/index.d.ts

@@ -1,10 +1,11 @@
 /// <reference types="react" />
 import './index-bar.less';
 export type { IndexBarProps, IndexBarRef } from './index-bar';
+export type { IndexBarPanelProps } from './panel';
 declare const _default: import("react").ForwardRefExoticComponent<{
     sticky?: boolean | undefined;
     children?: import("react").ReactNode;
 } & import("../../utils/native-props").NativeProps<"--sticky-offset-top"> & import("react").RefAttributes<import("./index-bar").IndexBarRef>> & {
-    Panel: import("react").FC<import("./panel").IndexBarAnchorProps>;
+    Panel: import("react").FC<import("./panel").IndexBarPanelProps>;
 };
 export default _default;

package/es/components/index-bar/panel.d.ts

@@ -1,7 +1,8 @@
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
-export declare type IndexBarAnchorProps = {
+export declare type IndexBarPanelProps = {
     index: string;
-    title?: string;
+    title?: ReactNode;
+    brief?: ReactNode;
 } & NativeProps;
-export declare const Panel: FC<IndexBarAnchorProps>;
+export declare const Panel: FC<IndexBarPanelProps>;

package/es/components/index-bar/sidebar.d.ts

@@ -1,7 +1,10 @@
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 declare type SidebarProps = {
-    indexes: string[];
-    activeIndex: string;
+    indexItems: {
+        index: string;
+        brief: ReactNode;
+    }[];
+    activeIndex: string | null;
     onActive: (index: string) => void;
 };
 export declare const Sidebar: FC<SidebarProps>;

package/es/components/index-bar/sidebar.js

@@ -33,7 +33,10 @@ export const Sidebar = props => {
         props.onActive(index);
       }
     }
-  }, props.indexes.map(index => {
+  }, props.indexItems.map(({
+    index,
+    brief
+  }) => {
     const active = index === props.activeIndex;
     return React.createElement("div", {
       className: `${classPrefix}-sidebar-row`,
@@ -52,11 +55,11 @@ export const Sidebar = props => {
       key: index
     }, interacting && active && React.createElement("div", {
       className: `${classPrefix}-sidebar-bubble`
-    }, index), React.createElement("div", {
+    }, brief), React.createElement("div", {
       className: classNames(`${classPrefix}-sidebar-item`, {
         [`${classPrefix}-sidebar-item-active`]: active
       }),
       "data-index": index
-    }, React.createElement("div", null, index)));
+    }, React.createElement("div", null, brief)));
   }));
 };

package/es/components/picker/picker.css

@@ -2,6 +2,7 @@
   --header-button-font-size: 15px;
   --title-font-size: 15px;
   --item-font-size: 16px;
+  --item-height: 34px;
   width: 100%;
   height: 300px;
   overflow: hidden;
@@ -9,9 +10,11 @@
   display: flex;
   flex-direction: column;
   ---item-font-size: var(--item-font-size);
+  ---item-height: var(--item-height);
 }
 .adm-picker .adm-picker-view.adm-picker-view {
   --item-font-size: var(---item-font-size);
+  --item-height: var(---item-height);
 }
 .adm-picker-header {
   flex: none;

package/es/components/picker/picker.d.ts

@@ -16,5 +16,5 @@ export declare type PickerProps = {
     confirmText?: ReactNode;
     cancelText?: ReactNode;
     children?: (items: (PickerColumnItem | null)[]) => ReactNode;
-} & Pick<PopupProps, 'getContainer' | 'afterShow' | 'afterClose' | 'onClick' | 'stopPropagation'> & NativeProps<'--header-button-font-size' | '--title-font-size' | '--item-font-size'>;
+} & Pick<PopupProps, 'getContainer' | 'afterShow' | 'afterClose' | 'onClick' | 'stopPropagation'> & NativeProps<'--header-button-font-size' | '--title-font-size' | '--item-font-size' | '--item-height'>;
 export declare const Picker: React.NamedExoticComponent<PickerProps>;

package/es/components/picker-view/picker-view.css

@@ -1,5 +1,6 @@
 .adm-picker-view {
   --height: 240px;
+  --item-height: 34px;
   --item-font-size: 16px;
   height: var(--height);
   width: 100%;
@@ -20,7 +21,7 @@
   width: 100%;
   cursor: grab;
   position: absolute;
-  top: calc(50% - 17px);
+  top: calc(50% - var(--item-height) / 2);
   left: 0;
 }
 .adm-picker-view-column-wheel::before {
@@ -42,7 +43,7 @@
 .adm-picker-view-column-item {
   font-size: var(--item-font-size);
   padding: 0 6px;
-  height: 34px;
+  height: var(--item-height);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -52,6 +53,15 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.adm-picker-view-column-item.adm-picker-view-column-item-dummy {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  padding: 0;
+  opacity: 0;
+  user-select: none;
+  pointer-events: none;
+}
 .adm-picker-view-column-accessible {
   width: 100%;
   height: 100%;
@@ -91,7 +101,7 @@
   flex: auto;
 }
 .adm-picker-view-mask-middle {
-  height: 34px;
+  height: var(--item-height);
   box-sizing: border-box;
   flex: none;
   border-top: solid 1px var(--adm-border-color);

package/es/components/picker-view/picker-view.d.ts

@@ -14,5 +14,5 @@ export declare type PickerViewProps = {
     value?: PickerValue[];
     defaultValue?: PickerValue[];
     onChange?: (value: PickerValue[], extend: PickerValueExtend) => void;
-} & NativeProps<'--height' | '--item-font-size'>;
+} & NativeProps<'--height' | '--item-height' | '--item-font-size'>;
 export declare const PickerView: React.NamedExoticComponent<PickerViewProps>;

package/es/components/picker-view/wheel.js

@@ -1,14 +1,13 @@
 import React, { memo, useRef } from 'react';
 import { useSpring, animated } from '@react-spring/web';
 import { useDrag } from '@use-gesture/react';
-import { convertPx } from '../../utils/convert-px';
 import { rubberbandIfOutOfBounds } from '../../utils/rubberband';
 import { bound } from '../../utils/bound';
 import isEqual from 'lodash/isEqual';
 import { useIsomorphicLayoutEffect } from 'ahooks';
+import classNames from 'classnames';
 const classPrefix = `adm-picker-view`;
 export const Wheel = memo(props => {
-  const itemHeight = convertPx(34);
   const {
     value,
     column
@@ -30,12 +29,23 @@ export const Wheel = memo(props => {
     }
   }));
   const draggingRef = useRef(false);
+  const dummyItemRef = useRef(null);
+  const itemHeight = useRef(34);
+  useIsomorphicLayoutEffect(() => {
+    const dummyItem = dummyItemRef.current;
+    if (!dummyItem) return;
+    const rect = dummyItem.getBoundingClientRect();
+
+    if (rect.height > 0) {
+      itemHeight.current = rect.height;
+    }
+  });
   useIsomorphicLayoutEffect(() => {
     if (draggingRef.current) return;
     if (!value) return;
     const targetIndex = column.findIndex(item => item.value === value);
     if (targetIndex < 0) return;
-    const finalPosition = targetIndex * -itemHeight;
+    const finalPosition = targetIndex * -itemHeight.current;
     api.start({
       y: finalPosition,
       immediate: y.goal !== finalPosition
@@ -55,7 +65,7 @@ export const Wheel = memo(props => {
   }, [column, value]);
 
   function scrollSelect(index) {
-    const finalPosition = index * -itemHeight;
+    const finalPosition = index * -itemHeight.current;
     api.start({
       y: finalPosition
     });
@@ -66,18 +76,18 @@ export const Wheel = memo(props => {
 
   const bind = useDrag(state => {
     draggingRef.current = true;
-    const min = -((column.length - 1) * itemHeight);
+    const min = -((column.length - 1) * itemHeight.current);
     const max = 0;
 
     if (state.last) {
       draggingRef.current = false;
       const position = state.offset[1] + state.velocity[1] * state.direction[1] * 50;
-      const targetIndex = min < max ? -Math.round(bound(position, min, max) / itemHeight) : 0;
+      const targetIndex = min < max ? -Math.round(bound(position, min, max) / itemHeight.current) : 0;
       scrollSelect(targetIndex);
     } else {
       const position = state.offset[1];
       api.start({
-        y: rubberbandIfOutOfBounds(position, min, max, itemHeight * 50, 0.2)
+        y: rubberbandIfOutOfBounds(position, min, max, itemHeight.current * 50, 0.2)
       });
     }
   }, {
@@ -125,7 +135,11 @@ export const Wheel = memo(props => {
 
   return React.createElement("div", Object.assign({
     className: `${classPrefix}-column`
-  }, bind()), React.createElement(animated.div, {
+  }, bind()), React.createElement("div", {
+    ref: dummyItemRef,
+    className: classNames(`${classPrefix}-column-item`, `${classPrefix}-column-item-dummy`),
+    "aria-hidden": true
+  }), React.createElement(animated.div, {
     style: {
       translateY: y
     },

package/es/components/slider/slider.css

@@ -27,12 +27,13 @@
 }
 .adm-slider-tick {
   position: absolute;
-  top: -3.5px;
+  top: 50%;
   width: 11px;
   height: 11px;
   margin-left: -5px;
   background-color: #f5f5f5;
   border-radius: 50%;
+  transform: translate(0, -50%);
 }
 .adm-slider-tick-active {
   background-color: var(--fill-color);

package/es/components/toast/index.d.ts

@@ -1,6 +1,6 @@
 import './toast.less';
 import { clear, show, config } from './methods';
-export type { ToastShowProps } from './methods';
+export type { ToastShowProps, ToastHandler } from './methods';
 declare const Toast: {
     show: typeof show;
     clear: typeof clear;

package/es/components/toast/methods.d.ts

@@ -1,5 +1,8 @@
 import { ToastProps } from './toast';
 export declare type ToastShowProps = Omit<ToastProps, 'visible'>;
-export declare function show(p: ToastShowProps | string): void;
+export declare type ToastHandler = {
+    close: () => void;
+};
+export declare function show(p: ToastShowProps | string): ToastHandler;
 export declare function clear(): void;
 export declare function config(val: Pick<ToastProps, 'duration' | 'position' | 'maskClickable'>): void;

package/es/components/toast/methods.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { createRef, forwardRef, useEffect, useImperativeHandle, useState } from 'react';
 import { resolveContainer } from '../../utils/get-container';
 import ReactDOM from 'react-dom';
 import { InternalToast } from './toast';
@@ -31,8 +31,7 @@ export function show(p) {
   bodyContainer.appendChild(container);
   clear();
   containers.push(container);
-
-  const TempToast = () => {
+  const TempToast = forwardRef((_, ref) => {
     const [visible, setVisible] = useState(true);
     useEffect(() => {
       return () => {
@@ -53,6 +52,9 @@ export function show(p) {
         window.clearTimeout(timer);
       };
     }, []);
+    useImperativeHandle(ref, () => ({
+      close: () => setVisible(false)
+    }));
     return React.createElement(InternalToast, Object.assign({}, props, {
       getContainer: () => container,
       visible: visible,
@@ -60,9 +62,18 @@ export function show(p) {
         unmount(container);
       }
     }));
-  };
+  });
+  const ref = createRef();
+  ReactDOM.render(React.createElement(TempToast, {
+    ref: ref
+  }), container);
+  return {
+    close: () => {
+      var _a;
 
-  ReactDOM.render(React.createElement(TempToast, null), container);
+      (_a = ref.current) === null || _a === void 0 ? void 0 : _a.close();
+    }
+  };
 }
 export function clear() {
   while (true) {

package/es/utils/use-drag-and-pinch.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+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[]) => Pick<import("react").DOMAttributes<EventTarget>, "onClick" | "onChange" | "onPause" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDragCapture" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScrollCapture" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture">;

package/es/utils/use-drag-and-pinch.js

@@ -0,0 +1,2 @@
+import { createUseGesture, dragAction, pinchAction } from '@use-gesture/react';
+export const useDragAndPinch = createUseGesture([dragAction, pinchAction]);

package/es/utils/use-isomorphic-update-layout-effect.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const useIsomorphicUpdateLayoutEffect: typeof import("react").useEffect | typeof import("react").useLayoutEffect;

package/es/utils/use-isomorphic-update-layout-effect.js

@@ -0,0 +1,3 @@
+import { createUpdateEffect } from 'ahooks/lib/createUpdateEffect';
+import { useIsomorphicLayoutEffect } from 'ahooks';
+export const useIsomorphicUpdateLayoutEffect = createUpdateEffect(useIsomorphicLayoutEffect);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "antd-mobile",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "dependencies": {
     "@react-spring/web": "^9.4.3",
     "@types/resize-observer-browser": "^0.1.7",