antd-mobile 5.0.0 → 5.1.0

package/2x/README.md

@@ -1,4 +1,6 @@
-<img src="https://gw.alipayobjects.com/mdn/rms_ee68a8/afts/img/A*JzBoT6sg9t4AAAAAAAAAAAAAARQnAQ" alt="logo" width="100%" />
+<img src="https://gw.alipayobjects.com/mdn/rms_ee68a8/afts/img/A*hjjDS5Yy-ooAAAAAAAAAAAAAARQnAQ" alt="logo" width="100%" />
+
+[English Doc](https://mobile.ant.design) | [中文文档](https://mobile.ant.design/zh) | [Discord](https://discord.gg/jmNvw4WFYn) | [钉钉](https://gw.alipayobjects.com/mdn/rms_25513e/afts/img/A*hBjlR4nUWjkAAAAAAAAAAAAAARQnAQ)
 
 ![npm (tag)](https://img.shields.io/npm/v/antd-mobile)
 ![GitHub Release Date](https://img.shields.io/github/release-date/ant-design/ant-design-mobile)
@@ -28,11 +30,6 @@ If you found bugs or would like to request some new features, please consider op
 
 If you have some question about how to use ant-mobile, you can start a [discussion thread](https://github.com/ant-design/ant-design-mobile/discussions).
 
-And we also have some community groups here. Feel free to join us:
-
-- [DingDing](https://gw.alipayobjects.com/mdn/rms_25513e/afts/img/A*hBjlR4nUWjkAAAAAAAAAAAAAARQnAQ)
-- [Discord](https://discord.gg/jmNvw4WFYn)
-
 ---
 
 Thanks to all the contributors of antd-mobile:

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

@@ -7,11 +7,12 @@
   background: var(--adm-color-white);
   position: fixed;
   z-index: var(--z-index);
-  top: 100vh;
+  bottom: 0;
   left: 0;
   width: 100vw;
   display: flex;
   flex-direction: column;
+  touch-action: none;
 }
 
 .adm-floating-panel-mask {

package/2x/cjs/components/floating-panel/floating-panel.d.ts

@@ -10,10 +10,10 @@ export declare type FloatingPanelProps = {
     children: ReactNode;
     onHeightChange?: (height: number, animating: boolean) => void;
     handleDraggingOfContent?: boolean;
-} & NativeProps<'--border-radius' | '--z-index'>;
+} & NativeProps<'--border-radius' | '--z-index' | '--header-height'>;
 export declare const FloatingPanel: React.ForwardRefExoticComponent<{
     anchors: number[];
     children: ReactNode;
     onHeightChange?: ((height: number, animating: boolean) => void) | undefined;
     handleDraggingOfContent?: boolean | undefined;
-} & NativeProps<"--z-index" | "--border-radius"> & React.RefAttributes<FloatingPanelRef>>;
+} & NativeProps<"--z-index" | "--border-radius" | "--header-height"> & React.RefAttributes<FloatingPanelRef>>;

package/2x/cjs/components/floating-panel/floating-panel.js

@@ -21,6 +21,8 @@ var _withDefaultProps = require("../../utils/with-default-props");
 
 var _useLockScroll = require("../../utils/use-lock-scroll");
 
+var _ahooks = require("ahooks");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -29,7 +31,7 @@ const defaultProps = {
   handleDraggingOfContent: true
 };
 const FloatingPanel = (0, _react.forwardRef)((p, ref) => {
-  var _a;
+  var _a, _b;
 
   const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
   const {
@@ -46,6 +48,7 @@ const FloatingPanel = (0, _react.forwardRef)((p, ref) => {
     top: possibles[possibles.length - 1],
     bottom: possibles[0]
   };
+  const onHeightChange = (0, _ahooks.useMemoizedFn)((_b = props.onHeightChange) !== null && _b !== void 0 ? _b : () => {});
   const [{
     y
   }, api] = (0, _web.useSpring)(() => ({
@@ -54,9 +57,7 @@ const FloatingPanel = (0, _react.forwardRef)((p, ref) => {
       tension: 300
     },
     onChange: result => {
-      var _a;
-
-      (_a = props.onHeightChange) === null || _a === void 0 ? void 0 : _a.call(props, result.value.y, y.isAnimating);
+      onHeightChange(result.value.y, y.isAnimating);
     }
   }));
   (0, _react2.useDrag)(state => {
@@ -133,7 +134,7 @@ const FloatingPanel = (0, _react.forwardRef)((p, ref) => {
     className: 'adm-floating-panel',
     style: {
       height: maxHeight,
-      y
+      translateY: y.to(y => `calc(100% + (${y}px))`)
     }
   }, _react.default.createElement("div", {
     className: 'adm-floating-panel-mask',

package/2x/cjs/components/form/form-subscribe.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { FormInstance } from 'rc-field-form';
+import type { NamePath } from 'rc-field-form/es/interface';
+declare type RenderChildren<Values = any> = (changedValues: Record<string, any>, form: FormInstance<Values>) => React.ReactNode;
+declare type ChildrenType<Values = any> = RenderChildren<Values>;
+export interface FormSubscribeProps {
+    to: NamePath[];
+    children: ChildrenType;
+}
+export declare const FormSubscribe: React.VFC<FormSubscribeProps>;
+export {};

package/2x/cjs/components/form/form-subscribe.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FormSubscribe = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = _interopRequireDefault(require("."));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const FormSubscribe = ({
+  children,
+  to
+}) => {
+  return _react.default.createElement(_.default.Item, {
+    noStyle: true,
+    dependencies: to
+  }, form => {
+    const changedValues = form.getFieldsValue(to);
+    return children(changedValues, form);
+  });
+};
+
+exports.FormSubscribe = FormSubscribe;

package/2x/cjs/components/form/index.d.ts

@@ -4,6 +4,7 @@ import { useForm } from 'rc-field-form';
 export declare type FormLayout = 'vertical' | 'horizontal';
 export type { FormProps, FormInstance } from './form';
 export type { FormItemProps } from './form-item';
+export type { FormSubscribeProps } from './form-subscribe';
 export type { ValidateMessages, FieldData, NamePath, } from 'rc-field-form/es/interface';
 declare const _default: import("react").ForwardRefExoticComponent<Pick<import("rc-field-form").FormProps<any>, "children" | "form" | "name" | "initialValues" | "preserve" | "validateMessages" | "validateTrigger" | "onFieldsChange" | "onFinish" | "onFinishFailed" | "onValuesChange"> & import("../../utils/native-props").NativeProps<never> & Partial<import("./context").FormContextType> & {
     footer?: import("react").ReactNode;
@@ -11,6 +12,7 @@ declare const _default: import("react").ForwardRefExoticComponent<Pick<import("r
     mode?: "default" | "card" | undefined;
 } & import("react").RefAttributes<Pick<import("rc-field-form").FormInstance<any>, "submit" | "getFieldValue" | "getFieldsValue" | "getFieldError" | "getFieldsError" | "isFieldTouched" | "isFieldsTouched" | "resetFields" | "setFields" | "setFieldsValue" | "validateFields">>> & {
     Item: import("react").FC<import("./form-item").FormItemProps>;
+    Subscribe: import("react").VFC<import("./form-subscribe").FormSubscribeProps>;
     Header: import("react").FC<{}>;
     useForm: typeof useForm;
 };

package/2x/cjs/components/form/index.js

@@ -17,8 +17,11 @@ var _header = require("./header");
 
 var _rcFieldForm = require("rc-field-form");
 
+var _formSubscribe = require("./form-subscribe");
+
 var _default = (0, _attachPropertiesToComponent.attachPropertiesToComponent)(_form.Form, {
   Item: _formItem.FormItem,
+  Subscribe: _formSubscribe.FormSubscribe,
   Header: _header.Header,
   useForm: _rcFieldForm.useForm
 });

package/2x/cjs/components/image/image.js

@@ -19,7 +19,7 @@ var _toCssLength = require("../../utils/to-css-length");
 
 var _lazyDetector = require("./lazy-detector");
 
-var _ahooks = require("ahooks");
+var _useIsomorphicUpdateLayoutEffect = require("../../utils/use-isomorphic-update-layout-effect");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -46,7 +46,7 @@ const Image = (0, _stagedComponents.staged)(p => {
   const [initialized, setInitialized] = (0, _react.useState)(!props.lazy);
   src = initialized ? props.src : undefined;
   srcSet = initialized ? props.srcSet : undefined;
-  (0, _ahooks.useUpdateLayoutEffect)(() => {
+  (0, _useIsomorphicUpdateLayoutEffect.useIsomorphicUpdateLayoutEffect)(() => {
     setLoaded(false);
     setFailed(false);
   }, [src]);

package/2x/cjs/components/image-uploader/image-uploader.d.ts

@@ -24,5 +24,6 @@ export declare type ImageUploaderProps = {
     upload: (file: File) => Promise<ImageUploadItem>;
     onDelete?: (item: ImageUploadItem) => boolean | Promise<boolean> | void;
     preview?: boolean;
+    showFailed?: boolean;
 } & NativeProps<'--cell-size'>;
 export declare const ImageUploader: FC<ImageUploaderProps>;

package/2x/cjs/components/image-uploader/image-uploader.js

@@ -40,7 +40,8 @@ const defaultProps = {
   maxCount: 0,
   defaultValue: [],
   accept: 'image/*',
-  preview: true
+  preview: true,
+  showFailed: true
 };
 
 const ImageUploader = p => {
@@ -178,15 +179,21 @@ const ImageUploader = p => {
         setValue(value.filter((x, i) => i !== index));
       })
     });
-  }), tasks.map(task => _react.default.createElement(_previewItem.default, {
-    key: task.id,
-    file: task.file,
-    deletable: task.status !== 'pending',
-    status: task.status,
-    onDelete: () => {
-      setTasks(tasks.filter(x => x.id !== task.id));
+  }), tasks.map(task => {
+    if (!props.showFailed && task.status === 'fail') {
+      return null;
     }
-  })), showUpload && _react.default.createElement("div", {
+
+    return _react.default.createElement(_previewItem.default, {
+      key: task.id,
+      file: task.file,
+      deletable: task.status !== 'pending',
+      status: task.status,
+      onDelete: () => {
+        setTasks(tasks.filter(x => x.id !== task.id));
+      }
+    });
+  }), showUpload && _react.default.createElement("div", {
     className: `${classPrefix}-upload-button-wrap`
   }, props.children ? props.children : _react.default.createElement("span", {
     className: `${classPrefix}-cell ${classPrefix}-upload-button`,

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

@@ -7,10 +7,14 @@ exports.Slide = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _react2 = require("@use-gesture/react");
-
 var _web = require("@react-spring/web");
 
+var _rubberband = require("../../utils/rubberband");
+
+var _useDragAndPinch = require("../../utils/use-drag-and-pinch");
+
+var _bound = require("../../utils/bound");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -22,6 +26,7 @@ const Slide = props => {
     dragLockRef
   } = props;
   const controlRef = (0, _react.useRef)(null);
+  const imgRef = (0, _react.useRef)(null);
   const [{
     zoom,
     x,
@@ -31,11 +36,38 @@ const Slide = props => {
     x: 0,
     y: 0,
     config: {
-      tension: 300
+      tension: 200
     }
   }));
   const pinchLockRef = (0, _react.useRef)(false);
-  (0, _react2.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 [(0, _rubberband.rubberbandIfOutOfBounds)(x, bounds.left, bounds.right, currentZoom * 50), (0, _rubberband.rubberbandIfOutOfBounds)(y, bounds.top, bounds.bottom, currentZoom * 50)];
+    } else {
+      return [(0, _bound.bound)(x, bounds.left, bounds.right), (0, _bound.bound)(y, bounds.top, bounds.bottom)];
+    }
+  }
+
+  (0, _useDragAndPinch.useDragAndPinch)({
     onDrag: state => {
       if (state.tap && state.elapsedTime > 0 && state.elapsedTime < 1000) {
         // 判断点击时间>0是为了过滤掉非正常操作，例如用户长按选择图片之后的取消操作（也是一次点击）
@@ -55,12 +87,20 @@ 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 => {
@@ -68,16 +108,15 @@ 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 ? (0, _bound.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
@@ -121,11 +160,12 @@ const Slide = props => {
   }, _react.default.createElement(_web.animated.div, {
     className: `${classPrefix}-image-wrapper`,
     style: {
-      scale: zoom,
-      x,
-      y
+      translateX: x,
+      translateY: y,
+      scale: zoom
     }
   }, _react.default.createElement("img", {
+    ref: imgRef,
     src: props.image,
     draggable: false,
     alt: props.image

package/2x/cjs/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/2x/cjs/components/index-bar/index-bar.js

@@ -37,10 +37,12 @@ const IndexBar = (0, _react.forwardRef)((p, ref) => {
   const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
   const titleHeight = (0, _convertPx.convertPx)(35);
   const bodyRef = (0, _react.useRef)(null);
-  const indexes = [];
+  const indexItems = [];
   const panels = [];
 
   _react.default.Children.forEach(props.children, child => {
+    var _a;
+
     if (!_react.default.isValidElement(child)) return;
 
     if (child.type !== _panel.Panel) {
@@ -48,7 +50,10 @@ const IndexBar = (0, _react.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((0, _nativeProps.withNativeProps)(child.props, _react.default.createElement("div", {
       key: child.props.index,
       "data-index": child.props.index,
@@ -58,7 +63,10 @@ const IndexBar = (0, _react.forwardRef)((p, ref) => {
     }, child.props.title || child.props.index), child.props.children)));
   });
 
-  const [activeIndex, setActiveIndex] = (0, _react.useState)(indexes[0]);
+  const [activeIndex, setActiveIndex] = (0, _react.useState)(() => {
+    const firstItem = indexItems[0];
+    return firstItem ? firstItem.index : null;
+  });
   (0, _react.useImperativeHandle)(ref, () => ({
     scrollTo
   }));
@@ -110,7 +118,7 @@ const IndexBar = (0, _react.forwardRef)((p, ref) => {
       [`${classPrefix}-sticky`]: props.sticky
     })
   }, _react.default.createElement(_sidebar.Sidebar, {
-    indexes: indexes,
+    indexItems: indexItems,
     activeIndex: activeIndex,
     onActive: index => {
       scrollTo(index);

package/2x/cjs/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/2x/cjs/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/2x/cjs/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/2x/cjs/components/index-bar/sidebar.js

@@ -49,7 +49,10 @@ const Sidebar = props => {
         props.onActive(index);
       }
     }
-  }, props.indexes.map(index => {
+  }, props.indexItems.map(({
+    index,
+    brief
+  }) => {
     const active = index === props.activeIndex;
     return _react.default.createElement("div", {
       className: `${classPrefix}-sidebar-row`,
@@ -68,12 +71,12 @@ const Sidebar = props => {
       key: index
     }, interacting && active && _react.default.createElement("div", {
       className: `${classPrefix}-sidebar-bubble`
-    }, index), _react.default.createElement("div", {
+    }, brief), _react.default.createElement("div", {
       className: (0, _classnames.default)(`${classPrefix}-sidebar-item`, {
         [`${classPrefix}-sidebar-item-active`]: active
       }),
       "data-index": index
-    }, _react.default.createElement("div", null, index)));
+    }, _react.default.createElement("div", null, brief)));
   }));
 };
 

package/2x/cjs/components/picker/picker.css

@@ -2,6 +2,7 @@
   --header-button-font-size: 30px;
   --title-font-size: 30px;
   --item-font-size: 32px;
+  --item-height: 68px;
   width: 100%;
   height: 600px;
   overflow: hidden;
@@ -9,10 +10,12 @@
   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 {

package/2x/cjs/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/2x/cjs/components/picker-view/picker-view.css

@@ -1,5 +1,6 @@
 .adm-picker-view {
   --height: 480px;
+  --item-height: 68px;
   --item-font-size: 32px;
   height: var(--height);
   width: 100%;
@@ -22,7 +23,7 @@
   width: 100%;
   cursor: grab;
   position: absolute;
-  top: calc(50% - 34px);
+  top: calc(50% - var(--item-height) / 2);
   left: 0;
 }
 
@@ -47,7 +48,7 @@
 .adm-picker-view-column-item {
   font-size: var(--item-font-size);
   padding: 0 12px;
-  height: 68px;
+  height: var(--item-height);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -59,6 +60,16 @@
   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%;
@@ -104,7 +115,7 @@
 }
 
 .adm-picker-view-mask-middle {
-  height: 68px;
+  height: var(--item-height);
   box-sizing: border-box;
   flex: none;
   border-top: solid 2px var(--adm-border-color);

package/2x/cjs/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>;