antd-mobile 5.9.4 → 5.10.1

package/es/components/divider/divider.d.ts

@@ -2,5 +2,6 @@ import { FC } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type DividerProps = {
     contentPosition?: 'left' | 'right' | 'center';
+    direction?: 'horizontal' | 'vertical';
 } & NativeProps;
 export declare const Divider: FC<DividerProps>;

package/es/components/divider/divider.js

@@ -4,12 +4,13 @@ import { withNativeProps } from '../../utils/native-props';
 import { mergeProps } from '../../utils/with-default-props';
 const classPrefix = `adm-divider`;
 const defaultProps = {
-  contentPosition: 'center'
+  contentPosition: 'center',
+  direction: 'horizontal'
 };
 export const Divider = p => {
   const props = mergeProps(defaultProps, p);
   return withNativeProps(props, React.createElement("div", {
-    className: classNames(classPrefix, `${classPrefix}-${props.contentPosition}`)
+    className: classNames(classPrefix, `${classPrefix}-${props.direction}`, `${classPrefix}-${props.contentPosition}`)
   }, props.children && React.createElement("div", {
     className: `${classPrefix}-content`
   }, props.children)));

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

@@ -10,6 +10,7 @@ import List from '../list';
 import Popover from '../popover';
 import { QuestionCircleOutline } from 'antd-mobile-icons';
 import { useConfig } from '../config-provider';
+import { undefinedFallback } from '../../utils/undefined-fallback';
 const NAME_SPLIT = '__SPLIT__';
 const classPrefix = `adm-form-item`;
 const MemoInput = React.memo(({
@@ -142,7 +143,7 @@ export const FormItem = props => {
   const {
     validateTrigger: contextValidateTrigger
   } = useContext(FieldContext);
-  const mergedValidateTrigger = validateTrigger !== undefined ? validateTrigger : contextValidateTrigger;
+  const mergedValidateTrigger = undefinedFallback(validateTrigger, contextValidateTrigger, trigger);
   const updateRef = React.useRef(0);
   updateRef.current += 1;
   const [subMetas, setSubMetas] = useState({});

package/es/components/form/form.js

@@ -9,6 +9,7 @@ import { Header } from './header';
 import { useConfig } from '../config-provider';
 import merge from 'lodash/merge';
 import { FormArray } from './form-array';
+import { traverseReactNode } from '../../utils/traverse-react-node';
 const classPrefix = 'adm-form';
 const defaultProps = defaultFormContext;
 export const Form = forwardRef((p, ref) => {
@@ -46,7 +47,7 @@ export const Form = forwardRef((p, ref) => {
     items = [];
   }
 
-  React.Children.forEach(props.children, child => {
+  traverseReactNode(props.children, child => {
     if (React.isValidElement(child)) {
       if (child.type === Header) {
         collect();

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

@@ -1,5 +1,6 @@
 import { FC, InputHTMLAttributes } from 'react';
 import { NativeProps } from '../../utils/native-props';
+import type { ImageProps } from '../image';
 export declare type TaskStatus = 'pending' | 'fail';
 export interface ImageUploadItem {
     key?: string | number;
@@ -25,5 +26,6 @@ export declare type ImageUploaderProps = {
     onDelete?: (item: ImageUploadItem) => boolean | Promise<boolean> | void;
     preview?: boolean;
     showFailed?: boolean;
+    imageFit?: ImageProps['fit'];
 } & NativeProps<'--cell-size'>;
 export declare const ImageUploader: FC<ImageUploaderProps>;

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

@@ -18,7 +18,8 @@ const defaultProps = {
   defaultValue: [],
   accept: 'image/*',
   preview: true,
-  showFailed: true
+  showFailed: true,
+  imageFit: 'cover'
 };
 export const ImageUploader = p => {
   const props = mergeProps(defaultProps, p);
@@ -157,6 +158,7 @@ export const ImageUploader = p => {
       key: (_a = fileItem.key) !== null && _a !== void 0 ? _a : index,
       url: (_b = fileItem.thumbnailUrl) !== null && _b !== void 0 ? _b : fileItem.url,
       deletable: props.deletable,
+      imageFit: props.imageFit,
       onClick: () => {
         if (props.preview) {
           previewImage(index);
@@ -182,6 +184,7 @@ export const ImageUploader = p => {
       file: task.file,
       deletable: task.status !== 'pending',
       status: task.status,
+      imageFit: props.imageFit,
       onDelete: () => {
         setTasks(tasks.filter(x => x.id !== task.id));
       }

package/es/components/image-uploader/preview-item.d.ts

@@ -1,5 +1,6 @@
 import { FC } from 'react';
 import { TaskStatus } from './image-uploader';
+import type { ImageProps } from '../image';
 declare type Props = {
     onClick?: () => void;
     onDelete?: () => void;
@@ -7,6 +8,7 @@ declare type Props = {
     url?: string;
     file?: File;
     status?: TaskStatus;
+    imageFit: ImageProps['fit'];
 };
 declare const PreviewItem: FC<Props>;
 export default PreviewItem;

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

@@ -14,7 +14,8 @@ const PreviewItem = props => {
     url,
     file,
     deletable,
-    onDelete
+    onDelete,
+    imageFit
   } = props;
   const src = useMemo(() => {
     if (url) {
@@ -54,7 +55,7 @@ const PreviewItem = props => {
   }, React.createElement(Image, {
     className: `${classPrefix}-cell-image`,
     src: src,
-    fit: 'cover',
+    fit: imageFit,
     onClick: props.onClick
   }), renderLoading(), renderDelete());
 };

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

@@ -7,6 +7,7 @@ import { Sidebar } from './sidebar';
 import { convertPx } from '../../utils/convert-px';
 import { Panel } from './panel';
 import { devWarning } from '../../utils/dev-log';
+import { traverseReactNode } from '../../utils/traverse-react-node';
 const classPrefix = `adm-index-bar`;
 const defaultProps = {
   sticky: true
@@ -17,7 +18,7 @@ export const IndexBar = forwardRef((p, ref) => {
   const bodyRef = useRef(null);
   const indexItems = [];
   const panels = [];
-  React.Children.forEach(props.children, child => {
+  traverseReactNode(props.children, child => {
     var _a;
 
     if (!React.isValidElement(child)) return;

package/es/components/jumbo-tabs/jumbo-tabs.js

@@ -7,6 +7,7 @@ import { useResizeEffect } from '../../utils/use-resize-effect';
 import { useTabListScroll } from '../../utils/use-tab-list-scroll';
 import ScrollMask from '../scroll-mask';
 import { ShouldRender } from '../../utils/should-render';
+import { traverseReactNode } from '../../utils/traverse-react-node';
 const classPrefix = `adm-jumbo-tabs`;
 export const JumboTab = () => {
   return null;
@@ -19,7 +20,7 @@ export const JumboTabs = props => {
   const keyToIndexRecord = {};
   let firstActiveKey = null;
   const panes = [];
-  React.Children.forEach(props.children, (child, index) => {
+  traverseReactNode(props.children, (child, index) => {
     if (!React.isValidElement(child)) return;
     const key = child.key;
     if (typeof key !== 'string') return;

package/es/components/number-keyboard/number-keyboard.js

@@ -134,9 +134,6 @@ export const NumberKeyboard = p => {
           onBackspacePressEnd();
         }
       },
-      onMouseUp: e => {
-        onKeyPress(e, key);
-      },
       title: key,
       role: 'button'
     }, key === 'BACKSPACE' ? React.createElement(TextDeletionOutline, null) : key);
@@ -173,13 +170,11 @@ export const NumberKeyboard = p => {
       onKeyPress(e, 'BACKSPACE');
       onBackspacePressEnd();
     },
-    onMouseUp: e => onKeyPress(e, 'BACKSPACE'),
     title: 'BACKSPACE',
     role: 'button'
   }, React.createElement(TextDeletionOutline, null)), React.createElement("div", {
     className: `${classPrefix}-key extra-key ok-key`,
     onTouchEnd: e => onKeyPress(e, 'OK'),
-    onMouseUp: e => onKeyPress(e, 'OK'),
     role: 'button'
   }, confirmText))), props.safeArea && React.createElement("div", {
     className: `${classPrefix}-footer`

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

@@ -9,6 +9,7 @@ export declare type PickerValueExtend = {
 export declare type PickerColumnItem = {
     label: ReactNode;
     value: string;
+    key?: string | number;
 };
 export declare type PickerColumn = (string | PickerColumnItem)[];
 export declare type PickerViewProps = {

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

@@ -140,6 +140,8 @@ export const Wheel = memo(props => {
     className: `${classPrefix}-column-wheel`,
     "aria-hidden": true
   }, column.map((item, index) => {
+    var _a;
+
     const selected = props.value === item.value;
     if (selected) selectedIndex = index;
 
@@ -149,7 +151,7 @@ export const Wheel = memo(props => {
     }
 
     return React.createElement("div", {
-      key: item.value,
+      key: (_a = item.key) !== null && _a !== void 0 ? _a : item.value,
       "data-selected": item.value === value,
       className: `${classPrefix}-column-item`,
       onClick: handleClick,

package/es/components/popover/popover-menu.js

@@ -3,7 +3,8 @@ import classNames from 'classnames';
 import { Popover } from './popover';
 const classPrefix = `adm-popover-menu`;
 export const PopoverMenu = forwardRef((props, ref) => {
-  const innerRef = useRef(null);
+  const innerRef = useRef(null); // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+
   useImperativeHandle(ref, () => innerRef.current, []);
   const onClick = useCallback(e => {
     var _a;

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

@@ -4,6 +4,7 @@ import Badge from '../badge';
 import { withNativeProps } from '../../utils/native-props';
 import { usePropsValue } from '../../utils/use-props-value';
 import { Corner } from './corner';
+import { traverseReactNode } from '../../utils/traverse-react-node';
 const classPrefix = `adm-side-bar`;
 export const SideBarItem = () => {
   return null;
@@ -13,7 +14,7 @@ export const SideBar = props => {
 
   let firstActiveKey = null;
   const items = [];
-  React.Children.forEach(props.children, (child, index) => {
+  traverseReactNode(props.children, (child, index) => {
     if (!React.isValidElement(child)) return;
     const key = child.key;
     if (typeof key !== 'string') return;

package/es/components/stepper/stepper.js

@@ -7,6 +7,7 @@ import { mergeProps } from '../../utils/with-default-props';
 import { bound } from '../../utils/bound';
 import Input from '../input';
 import Button from '../button';
+import Big from 'big.js';
 const classPrefix = `adm-stepper`;
 const defaultProps = {
   defaultValue: 0,
@@ -24,13 +25,13 @@ export const Stepper = p => {
     inputReadOnly
   } = props;
   const [value, setValue] = usePropsValue(props);
-  const [inputValue, setInputValue] = useState(() => convertValueToText(value));
+  const [inputValue, setInputValue] = useState(() => convertValueToText(value, props.digits));
 
   function setValueWithCheck(v) {
     if (isNaN(v)) return;
     let target = bound(v, props.min, props.max);
 
-    if (props.digits || props.digits === 0) {
+    if (props.digits !== undefined) {
       target = parseFloat(target.toFixed(props.digits));
     }
 
@@ -40,14 +41,14 @@ export const Stepper = p => {
   const [hasFocus, setHasFocus] = useState(false);
   useEffect(() => {
     if (!hasFocus) {
-      setInputValue(convertValueToText(value));
+      setInputValue(convertValueToText(value, props.digits));
     }
   }, [hasFocus]);
   useEffect(() => {
     if (!hasFocus) {
-      setInputValue(convertValueToText(value));
+      setInputValue(convertValueToText(value, props.digits));
     }
-  }, [value]);
+  }, [value, props.digits]);
 
   const handleInputChange = v => {
     setInputValue(v);
@@ -65,11 +66,11 @@ export const Stepper = p => {
   };
 
   const handleMinus = () => {
-    setValueWithCheck((value !== null && value !== void 0 ? value : 0) - step);
+    setValueWithCheck(Big(value !== null && value !== void 0 ? value : 0).minus(step).toNumber());
   };
 
   const handlePlus = () => {
-    setValueWithCheck((value !== null && value !== void 0 ? value : 0) + step);
+    setValueWithCheck(Big(value !== null && value !== void 0 ? value : 0).add(step).toNumber());
   };
 
   const minusDisabled = () => {
@@ -137,9 +138,14 @@ export const Stepper = p => {
   }, React.createElement(AddOutline, null))));
 };
 
-function convertValueToText(value) {
+function convertValueToText(value, digits) {
   if (value === null) return '';
-  return value.toString();
+
+  if (digits !== undefined) {
+    return value.toFixed(digits);
+  } else {
+    return value.toString();
+  }
 }
 
 function convertTextToValue(text) {

package/es/components/swiper/swiper.js

@@ -101,6 +101,7 @@ export const Swiper = forwardRef(staged((p, ref) => {
       },
       onRest: () => {
         if (draggingRef.current) return;
+        if (!loop) return;
         const rawX = position.get();
         const totalWidth = 100 * count;
         const standardPosition = modulus(rawX, totalWidth);

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

@@ -5,6 +5,7 @@ import { mergeProps } from '../../utils/with-default-props';
 import Badge from '../badge';
 import SafeArea from '../safe-area';
 import { usePropsValue } from '../../utils/use-props-value';
+import { traverseReactNode } from '../../utils/traverse-react-node';
 export const TabBarItem = () => {
   return null;
 };
@@ -18,7 +19,7 @@ export const TabBar = p => {
   const props = mergeProps(defaultProps, p);
   let firstActiveKey = null;
   const items = [];
-  React.Children.forEach(props.children, (child, index) => {
+  traverseReactNode(props.children, (child, index) => {
     if (!React.isValidElement(child)) return;
     const key = child.key;
     if (typeof key !== 'string') return;

package/es/components/tabs/tabs.js

@@ -10,6 +10,7 @@ import { useResizeEffect } from '../../utils/use-resize-effect';
 import { mergeProps } from '../../utils/with-default-props';
 import { useIsomorphicUpdateLayoutEffect } from '../../utils/use-isomorphic-update-layout-effect';
 import { ShouldRender } from '../../utils/should-render';
+import { traverseReactNode } from '../../utils/traverse-react-node';
 const classPrefix = `adm-tabs`;
 export const Tab = () => {
   return null;
@@ -27,7 +28,7 @@ export const Tabs = p => {
   const keyToIndexRecord = {};
   let firstActiveKey = null;
   const panes = [];
-  React.Children.forEach(props.children, (child, index) => {
+  traverseReactNode(props.children, (child, index) => {
     if (!React.isValidElement(child)) return;
     const key = child.key;
     if (typeof key !== 'string') return;

package/es/components/tree-select/multiple.js

@@ -137,7 +137,8 @@ export const Multiple = p => {
       walker(groupKeys);
     }
 
-    groupKeys = groupKeys.filter(i => !unusedKeys.includes(i));
+    groupKeys = groupKeys.filter(i => !unusedKeys.includes(i)); // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+
     const groupOptions = groupKeys.map(i => optionsMap.get(i));
     setValue(groupKeys);
     (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, groupKeys, groupOptions);

package/es/utils/traverse-react-node.d.ts

@@ -0,0 +1,2 @@
+import { ReactNode } from 'react';
+export declare function traverseReactNode(children: ReactNode, fn: (child: ReactNode, index: number) => void): void;

package/es/utils/traverse-react-node.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { isFragment } from 'react-is';
+export function traverseReactNode(children, fn) {
+  let i = 0;
+
+  function handle(target) {
+    React.Children.forEach(target, child => {
+      if (!isFragment(child)) {
+        fn(child, i);
+        i += 1;
+      } else {
+        handle(child.props.children);
+      }
+    });
+  }
+
+  handle(children);
+}

package/es/utils/undefined-fallback.d.ts

@@ -0,0 +1,3 @@
+export declare function undefinedFallback<T>(a: T | undefined, b: T): T;
+export declare function undefinedFallback<T>(a: T | undefined, b: T | undefined, c: T): T;
+export declare function undefinedFallback<T>(a: T | undefined, b: T | undefined, c: T | undefined, d: T): T;

package/es/utils/undefined-fallback.js

@@ -0,0 +1,9 @@
+export function undefinedFallback(...items) {
+  let i;
+
+  for (i = 0; i < items.length; i++) {
+    if (items[i] !== undefined) break;
+  }
+
+  return items[i];
+}

package/package.json

@@ -1,18 +1,22 @@
 {
   "name": "antd-mobile",
-  "version": "5.9.4",
+  "version": "5.10.1",
   "dependencies": {
     "@floating-ui/dom": "^0.4.2",
     "@react-spring/web": "^9.4.4",
+    "@types/big.js": "^6.1.3",
+    "@types/react-is": "^17.0.3",
     "@types/resize-observer-browser": "^0.1.7",
     "@use-gesture/react": "^10.2.10",
     "ahooks": "^3.1.14",
     "antd-mobile-icons": "^0.2.2",
     "antd-mobile-v5-count": "^1.0.1",
+    "big.js": "^6.1.1",
     "classnames": "^2.3.1",
     "dayjs": "^1.11.0",
     "lodash": "^4.17.21",
     "rc-field-form": "^1.24.0",
+    "react-is": "^17.0.2",
     "staged-components": "^1.1.2",
     "tslib": "^2.3.1"
   },