antd-mobile 5.0.0-rc.24 → 5.0.0-rc.28

package/2x/README.md

@@ -1,4 +1,4 @@
-<img src="https://gw.alipayobjects.com/mdn/rms_ee68a8/afts/img/A*8HtNS4uMKkAAAAAAAAAAAAAAARQnAQ" alt="logo" width="100%" />
+<img src="https://gw.alipayobjects.com/mdn/rms_ee68a8/afts/img/A*C3OZT6SF5BUAAAAAAAAAAAAAARQnAQ" alt="logo" width="100%" />
 
 ![npm (tag)](https://img.shields.io/npm/v/antd-mobile/next)
 ![GitHub (Pre-)Release Date](https://img.shields.io/github/release-date-pre/ant-design/ant-design-mobile)

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

@@ -12,9 +12,9 @@
   display: inline-block;
   box-sizing: border-box;
   height: auto;
-  padding: 16px 24px;
+  padding: 14px 24px;
   margin: 0;
-  font-size: 30px;
+  font-size: 34px;
   line-height: 1.4;
   text-align: center;
   border: var(--border-width) var(--border-style) var(--border-color);

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

@@ -3,6 +3,7 @@ import { NativeProps } from '../../utils/native-props';
 export declare type CalendarProps = {
     weekStartsOn?: 'Monday' | 'Sunday';
     renderLabel?: (date: Date) => string | null | undefined;
+    onPageChange?: (year: number, month: number) => void;
 } & ({
     selectionMode?: undefined;
     value?: undefined;

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

@@ -23,6 +23,8 @@ var _configProvider = require("../config-provider");
 
 var _isoWeek = _interopRequireDefault(require("dayjs/plugin/isoWeek"));
 
+var _ahooks = require("ahooks");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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); }
@@ -50,6 +52,11 @@ const Calendar = p => {
   }
 
   const [current, setCurrent] = (0, _react.useState)(() => (0, _dayjs.default)().date(1));
+  (0, _ahooks.useUpdateEffect)(() => {
+    var _a;
+
+    (_a = props.onPageChange) === null || _a === void 0 ? void 0 : _a.call(props, current.year(), current.month() + 1);
+  }, [current]);
 
   const header = _react.default.createElement("div", {
     className: `${classPrefix}-header`
@@ -91,7 +98,7 @@ const Calendar = p => {
   }, [props.selectionMode, props.value, props.defaultValue]);
   const [begin, setBegin] = (0, _react.useState)(null);
   const [end, setEnd] = (0, _react.useState)(null);
-  (0, _react.useLayoutEffect)(() => {
+  (0, _ahooks.useIsomorphicLayoutEffect)(() => {
     setBegin(dateRange[0] ? (0, _dayjs.default)(dateRange[0]) : null);
     setEnd(dateRange[1] ? (0, _dayjs.default)(dateRange[1]) : null);
   }, [dateRange[0], dateRange[1]]);

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

@@ -23,6 +23,8 @@ var _checkIcon = require("./check-icon");
 
 var _indeterminateIcon = require("./indeterminate-icon");
 
+var _isDev = require("../../utils/is-dev");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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); }
@@ -44,23 +46,21 @@ const Checkbox = p => {
     onChange: props.onChange
   });
   let disabled = props.disabled;
-
-  const usageWarning = () => {
-    if (p.checked !== undefined) {
-      (0, _devLog.devWarning)('Checkbox', 'When used with `Checkbox.Group`, the `checked` prop of `Checkbox` will not work if `value` prop of `Checkbox` is not undefined.');
-    }
-
-    if (p.defaultChecked !== undefined) {
-      (0, _devLog.devWarning)('Checkbox', 'When used with `Checkbox.Group`, the `defaultChecked` prop of `Checkbox` will not work if `value` prop of `Checkbox` is not undefined.');
-    }
-  };
-
   const {
     value
   } = props;
 
   if (groupContext && value !== undefined) {
-    usageWarning();
+    if (_isDev.isDev) {
+      if (p.checked !== undefined) {
+        (0, _devLog.devWarning)('Checkbox', 'When used within `Checkbox.Group`, the `checked` prop of `Checkbox` will not work.');
+      }
+
+      if (p.defaultChecked !== undefined) {
+        (0, _devLog.devWarning)('Checkbox', 'When used within `Checkbox.Group`, the `defaultChecked` prop of `Checkbox` will not work.');
+      }
+    }
+
     checked = groupContext.value.includes(value);
 
     setChecked = checked => {

package/2x/cjs/components/date-picker/date-picker.d.ts

@@ -2,7 +2,7 @@ import { FC, ReactNode } from 'react';
 import type { PickerProps } from '../picker';
 import { NativeProps } from '../../utils/native-props';
 import type { Precision, DatePickerFilter } from './date-picker-utils';
-export declare type DatePickerProps = Pick<PickerProps, 'onCancel' | 'onClose' | 'visible' | 'confirmText' | 'cancelText' | 'getContainer' | 'afterShow' | 'afterClose' | 'onClick' | 'title' | 'stopPropagation' | 'style'> & {
+export declare type DatePickerProps = Pick<PickerProps, 'onCancel' | 'onClose' | 'closeOnMaskClick' | 'visible' | 'confirmText' | 'cancelText' | 'getContainer' | 'afterShow' | 'afterClose' | 'onClick' | 'title' | 'stopPropagation' | 'style'> & {
     value?: Date | null;
     defaultValue?: Date | null;
     onSelect?: (value: Date) => void;

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

@@ -37,6 +37,10 @@
   flex: auto;
 }
 
+.adm-dialog-main > .adm-dialog-image-container + .adm-dialog-body {
+  padding-top: 24px;
+}
+
 .adm-dialog-main .adm-dialog-body {
   padding: 40px 24px;
 }

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

@@ -53,10 +53,6 @@
   color: var(--adm-color-primary);
 }
 
-.adm-dropdown-item-active {
-  color: var(--adm-color-primary);
-}
-
 .adm-dropdown-item-active .adm-dropdown-item-title:after {
   margin-top: -2px;
   transform: rotate(135deg);

package/2x/cjs/components/dropdown/item.js

@@ -20,9 +20,11 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const classPrefix = `adm-dropdown-item`;
 
 const Item = props => {
+  var _a;
+
   const cls = (0, _classnames.default)(classPrefix, {
     [`${classPrefix}-active`]: props.active,
-    [`${classPrefix}-highlight`]: props.highlight
+    [`${classPrefix}-highlight`]: (_a = props.highlight) !== null && _a !== void 0 ? _a : props.active
   });
   return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
     className: cls,

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

@@ -13,6 +13,8 @@ var _nativeProps = require("../../utils/native-props");
 
 var _useResizeEffect = require("../../utils/use-resize-effect");
 
+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; }
@@ -129,7 +131,7 @@ const Ellipsis = p => {
   }
 
   (0, _useResizeEffect.useResizeEffect)(calcEllipsised, rootRef);
-  (0, _react.useLayoutEffect)(() => {
+  (0, _ahooks.useIsomorphicLayoutEffect)(() => {
     calcEllipsised();
   }, [props.content, props.direction, props.rows, props.expandText, props.collapseText]);
   const expandActionElement = exceeded && props.expandText ? _react.default.createElement("a", {

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

@@ -11,7 +11,7 @@
   justify-content: center;
 }
 
-.adm-empty-image-container-image {
+.adm-empty-image-container .adm-empty-image {
   width: 128px;
 }
 

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

@@ -16,6 +16,7 @@
   width: 100vw;
   height: 100vh;
   padding: var(--edge-distance);
+  box-sizing: border-box;
   pointer-events: none;
 }
 

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

@@ -1,17 +1,19 @@
 import React, { ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
-export declare type FloatingPanelProps = {
-    anchors: number[];
-    children: ReactNode;
-    onHeightChange?: (height: number, animating: boolean) => void;
-} & NativeProps<'--border-radius' | '--z-index'>;
 export declare type FloatingPanelRef = {
     setHeight: (height: number, options?: {
         immediate?: boolean;
     }) => void;
 };
+export declare type FloatingPanelProps = {
+    anchors: number[];
+    children: ReactNode;
+    onHeightChange?: (height: number, animating: boolean) => void;
+    handleDraggingOfContent?: boolean;
+} & NativeProps<'--border-radius' | '--z-index'>;
 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>>;

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

@@ -17,13 +17,21 @@ var _supportsPassive = require("../../utils/supports-passive");
 
 var _nearest = require("../../utils/nearest");
 
+var _withDefaultProps = require("../../utils/with-default-props");
+
+var _useLockScroll = require("../../utils/use-lock-scroll");
+
 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; }
 
-const FloatingPanel = (0, _react.forwardRef)((props, ref) => {
+const defaultProps = {
+  handleDraggingOfContent: true
+};
+const FloatingPanel = (0, _react.forwardRef)((p, ref) => {
   var _a;
 
+  const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
   const {
     anchors
   } = props;
@@ -61,6 +69,7 @@ const FloatingPanel = (0, _react.forwardRef)((props, ref) => {
       if (header === target || (header === null || header === void 0 ? void 0 : header.contains(target))) {
         pullingRef.current = true;
       } else {
+        if (!props.handleDraggingOfContent) return;
         const reachedTop = y.goal <= bounds.top;
         const content = contentRef.current;
         if (!content) return;
@@ -118,6 +127,7 @@ const FloatingPanel = (0, _react.forwardRef)((props, ref) => {
       });
     }
   }), [api]);
+  (0, _useLockScroll.useLockScroll)(elementRef, true);
   return (0, _nativeProps.withNativeProps)(props, _react.default.createElement(_web.animated.div, {
     ref: elementRef,
     className: 'adm-floating-panel',

package/2x/cjs/components/form/form-item.css

@@ -8,6 +8,7 @@
   line-height: 1.5;
   box-sizing: border-box;
   position: relative;
+  color: #666666;
 }
 
 .adm-form-item-label-required {
@@ -19,28 +20,34 @@
   user-select: none;
 }
 
+.adm-form-item-label-help {
+  margin-left: 8px;
+}
+
 .adm-form-item-footer {
   color: var(--adm-color-danger);
+  margin-top: 8px;
 }
 
 .adm-form-item.adm-form-item-hidden {
   display: none;
 }
 
-.adm-form-vertical .adm-form-item-label {
-  font-size: 30px;
-  margin-bottom: 8px;
+.adm-form-item.adm-form-item-horizontal.adm-list-item {
+  --align-items: stretch;
+  --prefix-width: 6em;
 }
 
-.adm-form-vertical .adm-form-item-footer {
-  margin-top: 8px;
-}
-
-.adm-form-horizontal .adm-list-item-content-prefix {
+.adm-form-item.adm-form-item-horizontal .adm-list-item-content-prefix {
   padding-top: 24px;
   padding-bottom: 24px;
 }
 
-.adm-form-item-label {
-  color: #666666;
+.adm-form-item.adm-form-item-horizontal .adm-list-item-content-extra {
+  align-self: center;
+}
+
+.adm-form-item.adm-form-item-vertical .adm-form-item-label {
+  font-size: 30px;
+  margin-bottom: 8px;
 }

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

@@ -7,7 +7,7 @@ import type { FormLayout } from './index';
 declare type RenderChildren<Values = any> = (form: FormInstance<Values>) => React.ReactNode;
 declare type ChildrenType<Values = any> = RenderChildren<Values> | React.ReactNode;
 declare type RcFieldProps = Omit<FieldProps, 'children'>;
-export declare type FormItemProps = Pick<RcFieldProps, 'dependencies' | 'valuePropName' | 'name' | 'rules' | 'messageVariables' | 'trigger' | 'validateTrigger' | 'shouldUpdate'> & Pick<ListItemProps, 'style' | 'onClick' | 'extra' | 'arrow'> & {
+export declare type FormItemProps = Pick<RcFieldProps, 'dependencies' | 'valuePropName' | 'name' | 'rules' | 'messageVariables' | 'trigger' | 'validateTrigger' | 'shouldUpdate' | 'initialValue'> & Pick<ListItemProps, 'style' | 'onClick' | 'extra' | 'arrow' | 'description'> & {
     label?: React.ReactNode;
     help?: React.ReactNode;
     hasFeedback?: boolean;

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

@@ -23,6 +23,10 @@ var _utils = require("./utils");
 
 var _list = _interopRequireDefault(require("../list"));
 
+var _popover = _interopRequireDefault(require("../popover"));
+
+var _antdMobileIcons = require("antd-mobile-icons");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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); }
@@ -49,7 +53,8 @@ const FormItemLayout = props => {
     htmlFor,
     hidden,
     errors,
-    arrow
+    arrow,
+    description
   } = props;
   const context = (0, _react.useContext)(_context.FormContext);
   const hasFeedback = props.hasFeedback !== undefined ? props.hasFeedback : context.hasFeedback;
@@ -62,19 +67,21 @@ const FormItemLayout = props => {
     className: `${classPrefix}-label-required`
   }, "*"), help && _react.default.createElement("span", {
     className: `${classPrefix}-label-help`
-  }, help)) : null;
-
-  const descriptionElement = feedback && _react.default.createElement("div", {
+  }, _react.default.createElement(_popover.default, {
+    content: help,
+    mode: 'dark',
+    trigger: 'click'
+  }, _react.default.createElement(_antdMobileIcons.QuestionCircleOutline, null)))) : null;
+  const descriptionElement = feedback || description ? _react.default.createElement(_react.default.Fragment, null, description, _react.default.createElement("div", {
     className: `${classPrefix}-footer`
-  }, feedback);
-
+  }, feedback)) : null;
   return _react.default.createElement(_list.default.Item, {
     style: style,
     title: layout === 'vertical' && labelElement,
     prefix: layout === 'horizontal' && labelElement,
     extra: extra,
     description: descriptionElement,
-    className: (0, _classnames.default)(classPrefix, className, {
+    className: (0, _classnames.default)(classPrefix, className, `${classPrefix}-${layout}`, {
       [`${classPrefix}-hidden`]: hidden
     }),
     disabled: disabled,
@@ -98,6 +105,7 @@ const FormItem = props => {
     noStyle,
     hidden,
     layout,
+    description,
     // Field 相关
     disabled,
     rules,
@@ -110,7 +118,7 @@ const FormItem = props => {
     dependencies,
     arrow
   } = props,
-        fieldProps = (0, _tslib.__rest)(props, ["className", "style", "label", "help", "extra", "hasFeedback", "name", "required", "noStyle", "hidden", "layout", "disabled", "rules", "children", "messageVariables", "trigger", "validateTrigger", "onClick", "shouldUpdate", "dependencies", "arrow"]);
+        fieldProps = (0, _tslib.__rest)(props, ["className", "style", "label", "help", "extra", "hasFeedback", "name", "required", "noStyle", "hidden", "layout", "description", "disabled", "rules", "children", "messageVariables", "trigger", "validateTrigger", "onClick", "shouldUpdate", "dependencies", "arrow"]);
 
   const {
     validateTrigger: contextValidateTrigger
@@ -162,6 +170,7 @@ const FormItem = props => {
       label: label,
       extra: extra,
       help: help,
+      description: description,
       required: isRequired,
       disabled: disabled,
       hasFeedback: hasFeedback,

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

@@ -3,15 +3,6 @@
   --padding-right: 24px;
 }
 
-.adm-form-horizontal .adm-list.adm-list {
-  --prefix-width: 6em;
-  --align-items: stretch;
-}
-
-.adm-form-horizontal .adm-list.adm-list .adm-list-item-content-extra {
-  align-self: center;
-}
-
 .adm-form .adm-form-footer {
   padding: 40px 24px;
 }

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

@@ -71,7 +71,7 @@ const Form = (0, _react.forwardRef)((p, ref) => {
 
   collect();
   return _react.default.createElement(_rcFieldForm.default, Object.assign({
-    className: (0, _classnames.default)(classPrefix, `${classPrefix}-${layout}`, className),
+    className: (0, _classnames.default)(classPrefix, className),
     style: style,
     ref: ref
   }, formProps), _react.default.createElement(_context.FormContext.Provider, {

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

@@ -3,15 +3,6 @@
   --padding-right: 24px;
 }
 
-.adm-form-horizontal .adm-list.adm-list {
-  --prefix-width: 6em;
-  --align-items: stretch;
-}
-
-.adm-form-horizontal .adm-list.adm-list .adm-list-item-content-extra {
-  align-self: center;
-}
-
 .adm-form .adm-form-footer {
   padding: 40px 24px;
 }
@@ -26,6 +17,7 @@
   line-height: 1.5;
   box-sizing: border-box;
   position: relative;
+  color: #666666;
 }
 
 .adm-form-item-label-required {
@@ -37,28 +29,34 @@
   user-select: none;
 }
 
+.adm-form-item-label-help {
+  margin-left: 8px;
+}
+
 .adm-form-item-footer {
   color: var(--adm-color-danger);
+  margin-top: 8px;
 }
 
 .adm-form-item.adm-form-item-hidden {
   display: none;
 }
 
-.adm-form-vertical .adm-form-item-label {
-  font-size: 30px;
-  margin-bottom: 8px;
-}
-
-.adm-form-vertical .adm-form-item-footer {
-  margin-top: 8px;
+.adm-form-item.adm-form-item-horizontal.adm-list-item {
+  --align-items: stretch;
+  --prefix-width: 6em;
 }
 
-.adm-form-horizontal .adm-list-item-content-prefix {
+.adm-form-item.adm-form-item-horizontal .adm-list-item-content-prefix {
   padding-top: 24px;
   padding-bottom: 24px;
 }
 
-.adm-form-item-label {
-  color: #666666;
+.adm-form-item.adm-form-item-horizontal .adm-list-item-content-extra {
+  align-self: center;
+}
+
+.adm-form-item.adm-form-item-vertical .adm-form-item-label {
+  font-size: 30px;
+  margin-bottom: 8px;
 }

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

@@ -19,7 +19,7 @@ export declare type ImageUploaderProps = {
     showUpload?: boolean;
     deletable?: boolean;
     capture?: InputHTMLAttributes<unknown>['capture'];
-    onPreview?: (index: number) => void;
+    onPreview?: (index: number, item: ImageUploadItem) => void;
     beforeUpload?: (file: File[]) => Promise<File[]> | File[];
     upload: (file: File) => Promise<ImageUploadItem>;
     onDelete?: (item: ImageUploadItem) => boolean | Promise<boolean> | void;

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

@@ -50,7 +50,7 @@ const ImageUploader = p => {
     setValue(updater(value));
   });
   const [tasks, setTasks] = (0, _react.useState)([]);
-  (0, _react.useLayoutEffect)(() => {
+  (0, _ahooks.useIsomorphicLayoutEffect)(() => {
     setTasks(prev => prev.filter(task => {
       if (task.url === undefined) return true;
       return !value.some(fileItem => fileItem.url === task.url);
@@ -168,7 +168,7 @@ const ImageUploader = p => {
           previewImage(index);
         }
 
-        onPreview && onPreview(index);
+        onPreview && onPreview(index, fileItem);
       },
       onDelete: () => (0, _tslib.__awaiter)(void 0, void 0, void 0, function* () {
         var _c;

package/2x/cjs/components/image-viewer/image-viewer.css

@@ -11,6 +11,7 @@
   position: relative;
   z-index: 1;
   cursor: grab;
+  touch-action: none;
 }
 
 .adm-image-viewer-slides-inner {
@@ -37,6 +38,7 @@
   width: 100%;
   height: 100%;
   cursor: grab;
+  touch-action: none;
 }
 
 .adm-image-viewer-image-wrapper {

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

@@ -59,6 +59,16 @@ const multiDefaultProps = Object.assign(Object.assign({}, defaultProps), {
 });
 const MultiImageViewer = (0, _react.forwardRef)((p, ref) => {
   const props = (0, _withDefaultProps.mergeProps)(multiDefaultProps, p);
+  const [defaultIndex, setDefaultIndex] = (0, _react.useState)(props.defaultIndex);
+  const slidesRef = (0, _react.useRef)(null);
+  (0, _react.useImperativeHandle)(ref, () => ({
+    swipeTo: (index, immediate) => {
+      var _a;
+
+      setDefaultIndex(index);
+      (_a = slidesRef.current) === null || _a === void 0 ? void 0 : _a.swipeTo(index, immediate);
+    }
+  }));
 
   const node = _react.default.createElement(_mask.default, {
     visible: props.visible,
@@ -68,8 +78,8 @@ const MultiImageViewer = (0, _react.forwardRef)((p, ref) => {
   }, _react.default.createElement("div", {
     className: `${classPrefix}-content`
   }, props.images && _react.default.createElement(_slides.Slides, {
-    ref: ref,
-    defaultIndex: props.defaultIndex,
+    ref: slidesRef,
+    defaultIndex: defaultIndex,
     onIndexChange: props.onIndexChange,
     images: props.images,
     onTap: () => {

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

@@ -37,7 +37,7 @@ const Slide = props => {
   const pinchLockRef = (0, _react.useRef)(false);
   (0, _react2.useGesture)({
     onDrag: state => {
-      if (state.tap && state.elapsedTime > 0) {
+      if (state.tap && state.elapsedTime > 0 && state.elapsedTime < 1000) {
         // 判断点击时间>0是为了过滤掉非正常操作，例如用户长按选择图片之后的取消操作（也是一次点击）
         props.onTap();
         return;
@@ -96,13 +96,16 @@ const Slide = props => {
     target: controlRef,
     drag: {
       // filterTaps: true,
-      from: () => [x.get(), y.get()]
+      from: () => [x.get(), y.get()],
+      pointer: {
+        touch: true
+      }
     },
     pinch: {
-      from: () => [zoom.get(), 0]
-    },
-    pointer: {
-      touch: true
+      from: () => [zoom.get(), 0],
+      pointer: {
+        touch: true
+      }
     }
   });
   return _react.default.createElement("div", {
@@ -124,7 +127,8 @@ const Slide = props => {
     }
   }, _react.default.createElement("img", {
     src: props.image,
-    draggable: false
+    draggable: false,
+    alt: props.image
   }))));
 };
 

package/2x/cjs/components/image-viewer/slides.d.ts

@@ -7,6 +7,6 @@ export declare type SlidesType = {
     onIndexChange?: (index: number) => void;
 };
 export declare type SlidesRef = {
-    swipeTo: (index: number, immediate: boolean) => void;
+    swipeTo: (index: number, immediate?: boolean) => void;
 };
 export declare const Slides: React.ForwardRefExoticComponent<SlidesType & React.RefAttributes<SlidesRef>>;

package/2x/cjs/components/index-bar/index-bar.css

@@ -33,7 +33,7 @@
   top: 50%;
   right: 0;
   transform: translateY(-50%);
-  z-index: 3;
+  z-index: 910;
   overflow: visible;
   color: var(--adm-color-weak);
   font-size: 24px;
@@ -89,6 +89,7 @@
 
 .adm-index-bar-sticky .adm-index-bar-anchor-title {
   position: sticky;
+  z-index: 900;
   top: var(--sticky-offset-top);
   left: 0;
 }

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

@@ -10,6 +10,7 @@
   width: 100%;
   max-width: 100%;
   max-height: 100%;
+  min-height: 48px;
   background-color: var(--background-color);
 }