antd-mobile 5.19.0 → 5.22.0

package/es/components/selector/selector.d.ts

@@ -1,5 +1,6 @@
 import React, { ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
+import { GridProps } from '../grid';
 declare type SelectorValue = string | number;
 export interface SelectorOption<V> {
     label: ReactNode;
@@ -9,7 +10,7 @@ export interface SelectorOption<V> {
 }
 export declare type SelectorProps<V> = {
     options: SelectorOption<V>[];
-    columns?: number;
+    columns?: GridProps['columns'];
     multiple?: boolean;
     disabled?: boolean;
     defaultValue?: V[];
@@ -18,6 +19,6 @@ export declare type SelectorProps<V> = {
         items: SelectorOption<V>[];
     }) => void;
     showCheckMark?: boolean;
-} & NativeProps<'--color' | '--checked-color' | '--text-color' | '--checked-text-color' | '--border' | '--checked-border' | '--border-radius' | '--padding'>;
+} & NativeProps<'--color' | '--checked-color' | '--text-color' | '--checked-text-color' | '--border' | '--checked-border' | '--border-radius' | '--padding' | '--gap' | '--gap-vertical' | '--gap-horizontal'>;
 export declare const Selector: <V extends SelectorValue>(p: SelectorProps<V>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 export {};

package/es/components/selector/selector.js

@@ -4,7 +4,6 @@ import { withNativeProps } from '../../utils/native-props';
 import { mergeProps } from '../../utils/with-default-props';
 import Space from '../space';
 import Grid from '../grid';
-import { convertPx } from '../../utils/convert-px';
 import { usePropsValue } from '../../utils/use-props-value';
 import { CheckMark } from './check-mark';
 const classPrefix = `adm-selector`;
@@ -65,7 +64,6 @@ export const Selector = p => {
   }, !props.columns && React.createElement(Space, {
     wrap: true
   }, items), props.columns && React.createElement(Grid, {
-    columns: props.columns,
-    gap: convertPx(8)
+    columns: props.columns
   }, items)));
 };

package/es/components/swipe-action/swipe-action.d.ts

@@ -20,6 +20,7 @@ export declare type SwipeActionProps = {
     closeOnAction?: boolean;
     children: ReactNode;
     stopPropagation?: PropagationEvent[];
+    onActionsReveal?: (side: 'left' | 'right') => void;
 } & NativeProps<'--background'>;
 export declare const SwipeAction: React.ForwardRefExoticComponent<{
     rightActions?: Action[] | undefined;
@@ -29,6 +30,7 @@ export declare const SwipeAction: React.ForwardRefExoticComponent<{
     closeOnAction?: boolean | undefined;
     children: ReactNode;
     stopPropagation?: "click"[] | undefined;
+    onActionsReveal?: ((side: 'left' | 'right') => void) | undefined;
 } & {
     className?: string | undefined;
     style?: (React.CSSProperties & Partial<Record<"--background", string>>) | undefined;

package/es/components/swipe-action/swipe-action.js

@@ -44,8 +44,26 @@ export const SwipeAction = forwardRef((p, ref) => {
     }
   }), []);
   const draggingRef = useRef(false);
+  const dragCancelRef = useRef(null);
+
+  function forceCancelDrag() {
+    var _a;
+
+    (_a = dragCancelRef.current) === null || _a === void 0 ? void 0 : _a.call(dragCancelRef);
+    draggingRef.current = false;
+  }
+
   const bind = useDrag(state => {
-    draggingRef.current = true;
+    var _a;
+
+    dragCancelRef.current = state.cancel;
+    if (!state.intentional) return;
+
+    if (state.down) {
+      draggingRef.current = true;
+    }
+
+    if (!draggingRef.current) return;
     const [offsetX] = state.offset;
 
     if (state.last) {
@@ -61,9 +79,15 @@ export const SwipeAction = forwardRef((p, ref) => {
         position = 0;
       }
 
+      const targetX = nearest([-rightWidth, 0, leftWidth], position);
       api.start({
-        x: nearest([-rightWidth, 0, leftWidth], position)
+        x: targetX
       });
+
+      if (targetX !== 0) {
+        (_a = p.onActionsReveal) === null || _a === void 0 ? void 0 : _a.call(p, targetX > 0 ? 'left' : 'right');
+      }
+
       window.setTimeout(() => {
         draggingRef.current = false;
       });
@@ -88,17 +112,21 @@ export const SwipeAction = forwardRef((p, ref) => {
     preventScroll: true,
     pointer: {
       touch: true
-    }
+    },
+    triggerAllEvents: true
   });
 
   function close() {
     api.start({
       x: 0
     });
+    forceCancelDrag();
   }
 
   useImperativeHandle(ref, () => ({
     show: (side = 'right') => {
+      var _a;
+
       if (side === 'right') {
         api.start({
           x: -getRightWidth()
@@ -108,6 +136,8 @@ export const SwipeAction = forwardRef((p, ref) => {
           x: getLeftWidth()
         });
       }
+
+      (_a = p.onActionsReveal) === null || _a === void 0 ? void 0 : _a.call(p, side);
     },
     close
   }));
@@ -179,9 +209,7 @@ export const SwipeAction = forwardRef((p, ref) => {
       if (x.goal !== 0) {
         e.preventDefault();
         e.stopPropagation();
-        api.start({
-          x: 0
-        });
+        close();
       }
     }
   }, React.createElement(animated.div, {

package/es/components/swiper/swiper.js

@@ -113,7 +113,18 @@ export const Swiper = forwardRef(staged((p, ref) => {
         });
       }
     }), [count]);
+    const dragCancelRef = useRef(null);
+
+    function forceCancelDrag() {
+      var _a;
+
+      (_a = dragCancelRef.current) === null || _a === void 0 ? void 0 : _a.call(dragCancelRef);
+      draggingRef.current = false;
+    }
+
     const bind = useDrag(state => {
+      dragCancelRef.current = state.cancel;
+      if (!state.intentional) return;
       const slidePixels = getSlidePixels();
       if (!slidePixels) return;
       const paramIndex = isVertical ? 1 : 0;
@@ -142,6 +153,7 @@ export const Swiper = forwardRef(staged((p, ref) => {
         const slidePixels = getSlidePixels();
         return [position.get() / 100 * slidePixels, position.get() / 100 * slidePixels];
       },
+      triggerAllEvents: true,
       bounds: () => {
         if (loop) return {};
         const slidePixels = getSlidePixels();
@@ -205,7 +217,7 @@ export const Swiper = forwardRef(staged((p, ref) => {
       return () => {
         window.clearInterval(interval);
       };
-    }, [autoplay, autoplayInterval, dragging]);
+    }, [autoplay, autoplayInterval, dragging, count]);
 
     function renderTrackInner() {
       if (loop) {
@@ -256,6 +268,8 @@ export const Swiper = forwardRef(staged((p, ref) => {
         if (draggingRef.current) {
           e.stopPropagation();
         }
+
+        forceCancelDrag();
       }
     }, props.allowTouchMove ? bind() : {}), renderTrackInner()), props.indicator === undefined ? React.createElement("div", {
       className: `${classPrefix}-indicator`

package/es/components/tab-bar/tab-bar.css

@@ -8,7 +8,7 @@
 }
 .adm-tab-bar-item {
   flex: 1;
-  color: var(--adm-color-weak);
+  color: var(--adm-color-text-secondary);
   white-space: nowrap;
   padding: 4px 8px;
   width: -webkit-min-content;
@@ -26,7 +26,7 @@
   line-height: 1;
 }
 .adm-tab-bar-item-title {
-  font-size: var(--adm-font-size-3);
+  font-size: var(--adm-font-size-2);
   line-height: 15px;
 }
 .adm-tab-bar-item-title-with-icon {

package/es/index.d.ts

@@ -56,6 +56,7 @@ export { default as PullToRefresh } from './components/pull-to-refresh';
 export { default as Radio } from './components/radio';
 export { default as Rate } from './components/rate';
 export { default as Result } from './components/result';
+export { default as ResultPage } from './components/result-page';
 export { default as SafeArea } from './components/safe-area';
 export { default as ScrollMask } from './components/scroll-mask';
 export { default as SearchBar } from './components/search-bar';

package/es/index.js

@@ -56,6 +56,7 @@ export { default as PullToRefresh } from './components/pull-to-refresh';
 export { default as Radio } from './components/radio';
 export { default as Rate } from './components/rate';
 export { default as Result } from './components/result';
+export { default as ResultPage } from './components/result-page';
 export { default as SafeArea } from './components/safe-area';
 export { default as ScrollMask } from './components/scroll-mask';
 export { default as SearchBar } from './components/search-bar';

package/es/locales/id-ID.js

@@ -106,6 +106,19 @@ const idID = mergeLocale(base, {
     pulling: 'Tarik ke bawah untuk menyegarkan',
     canRelease: 'Lepaskan untuk menyegarkan segera',
     complete: 'Segarkan berhasil'
+  },
+  SearchBar: {
+    name: 'Bilah Pencarian'
+  },
+  Slider: {
+    name: 'Penggeser'
+  },
+  Stepper: {
+    decrease: 'mengurangi',
+    increase: 'meningkat'
+  },
+  Switch: {
+    name: 'Mengalihkan'
   }
 });
 export default idID;

package/es/utils/use-resize-effect.js

@@ -6,11 +6,13 @@ export function useResizeEffect(effect, targetRef) {
     if (!target) return;
 
     if (window.ResizeObserver) {
+      let animationFrame;
       const observer = new ResizeObserver(() => {
-        fn(target);
+        animationFrame = window.requestAnimationFrame(() => fn(target));
       });
       observer.observe(target);
       return () => {
+        window.cancelAnimationFrame(animationFrame);
         observer.disconnect();
       };
     } else {

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "antd-mobile",
-  "version": "5.19.0",
+  "version": "5.22.0",
   "dependencies": {
-    "@floating-ui/dom": "^0.5.2",
+    "@floating-ui/dom": "^1.0.0",
     "@react-spring/web": "^9.4.5",
-    "@use-gesture/react": "10.2.16",
-    "ahooks": "^3.5.2",
+    "@use-gesture/react": "10.2.17",
+    "ahooks": "^3.7.0",
     "antd-mobile-icons": "^0.3.0",
     "antd-mobile-v5-count": "^1.0.1",
-    "big.js": "^6.1.1",
+    "big.js": "^6.2.1",
     "classnames": "^2.3.1",
-    "dayjs": "^1.11.3",
+    "dayjs": "^1.11.4",
     "lodash": "^4.17.21",
     "rc-field-form": "~1.27.0",
     "react-is": "^17.0.2",