antd-mobile 5.42.0-alpha.1 → 5.42.0

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

@@ -94,6 +94,7 @@ const ImageUploader = (0, _react.forwardRef)((p, ref) => {
   function getFinalTasks(tasks) {
     return props.showFailed ? tasks : tasks.filter(task => task.status !== 'fail');
   }
+  const finalTasks = getFinalTasks(tasks);
   function onChange(e) {
     var _a;
     return (0, _tslib.__awaiter)(this, void 0, void 0, function* () {
@@ -114,7 +115,7 @@ const ImageUploader = (0, _react.forwardRef)((p, ref) => {
         return;
       }
       if (maxCount > 0) {
-        const exceed = value.length + files.length - maxCount;
+        const exceed = value.length + files.length + finalTasks.length - maxCount;
         if (exceed > 0) {
           files = files.slice(0, files.length - exceed);
           (_a = props.onCountExceed) === null || _a === void 0 ? void 0 : _a.call(props, exceed);
@@ -173,7 +174,6 @@ const ImageUploader = (0, _react.forwardRef)((p, ref) => {
     var _a;
     (_a = imageViewerHandlerRef.current) === null || _a === void 0 ? void 0 : _a.close();
   });
-  const finalTasks = getFinalTasks(tasks);
   const showUpload = props.showUpload && (maxCount === 0 || value.length + finalTasks.length < maxCount);
   const renderImages = () => {
     return value.map((fileItem, index) => {

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

@@ -3,7 +3,7 @@
   height: 100vh;
   touch-action: none;
   -webkit-user-select: none;
-          user-select: none;
+  user-select: none;
 }
 .adm-image-viewer-footer {
   position: absolute;

package/cjs/components/image-viewer/image-viewer.d.ts

@@ -18,6 +18,9 @@ export declare type ImageViewerProps = {
         mask?: string;
         body?: string;
     };
+    mask?: {
+        onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    };
 };
 export declare const ImageViewer: FC<ImageViewerProps>;
 export declare type MultiImageViewerRef = SlidesRef;

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

@@ -22,17 +22,18 @@ const defaultProps = {
   visible: false
 };
 const ImageViewer = p => {
-  var _a, _b, _c;
+  var _a, _b, _c, _d;
   const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
   const node = _react.default.createElement(_mask.default, {
     visible: props.visible,
+    afterClose: props === null || props === void 0 ? void 0 : props.afterClose,
+    className: (_a = props === null || props === void 0 ? void 0 : props.classNames) === null || _a === void 0 ? void 0 : _a.mask,
+    onMaskClick: (_b = props.mask) === null || _b === void 0 ? void 0 : _b.onClick,
     disableBodyScroll: false,
     opacity: 'thick',
-    afterClose: props.afterClose,
-    destroyOnClose: true,
-    className: (_a = props === null || props === void 0 ? void 0 : props.classNames) === null || _a === void 0 ? void 0 : _a.mask
+    destroyOnClose: true
   }, _react.default.createElement("div", {
-    className: (0, _classnames.default)(`${classPrefix}-content`, (_b = props === null || props === void 0 ? void 0 : props.classNames) === null || _b === void 0 ? void 0 : _b.body)
+    className: (0, _classnames.default)(`${classPrefix}-content`, (_c = props === null || props === void 0 ? void 0 : props.classNames) === null || _c === void 0 ? void 0 : _c.body)
   }, (props.image || typeof props.imageRender === 'function') && _react.default.createElement(_slide.Slide, {
     image: props.image,
     onTap: props.onClose,
@@ -40,7 +41,7 @@ const ImageViewer = p => {
     imageRender: props.imageRender
   })), props.image && _react.default.createElement("div", {
     className: `${classPrefix}-footer`
-  }, (_c = props.renderFooter) === null || _c === void 0 ? void 0 : _c.call(props, props.image), _react.default.createElement(_safeArea.default, {
+  }, (_d = props.renderFooter) === null || _d === void 0 ? void 0 : _d.call(props, props.image), _react.default.createElement(_safeArea.default, {
     position: 'bottom'
   })));
   return (0, _renderToContainer.renderToContainer)(props.getContainer, node);
@@ -50,7 +51,7 @@ const multiDefaultProps = Object.assign(Object.assign({}, defaultProps), {
   defaultIndex: 0
 });
 const MultiImageViewer = (0, _react.forwardRef)((p, ref) => {
-  var _a, _b, _c;
+  var _a, _b, _c, _d;
   const props = (0, _withDefaultProps.mergeProps)(multiDefaultProps, p);
   const [index, setIndex] = (0, _react.useState)(props.defaultIndex);
   const slidesRef = (0, _react.useRef)(null);
@@ -69,13 +70,14 @@ const MultiImageViewer = (0, _react.forwardRef)((p, ref) => {
   }, [props.onIndexChange, index]);
   const node = _react.default.createElement(_mask.default, {
     visible: props.visible,
+    afterClose: props === null || props === void 0 ? void 0 : props.afterClose,
+    className: (_a = props === null || props === void 0 ? void 0 : props.classNames) === null || _a === void 0 ? void 0 : _a.mask,
+    onMaskClick: (_b = props.mask) === null || _b === void 0 ? void 0 : _b.onClick,
     disableBodyScroll: false,
     opacity: 'thick',
-    afterClose: props.afterClose,
-    destroyOnClose: true,
-    className: (_a = props === null || props === void 0 ? void 0 : props.classNames) === null || _a === void 0 ? void 0 : _a.mask
+    destroyOnClose: true
   }, _react.default.createElement("div", {
-    className: (0, _classnames.default)(`${classPrefix}-content`, (_b = props === null || props === void 0 ? void 0 : props.classNames) === null || _b === void 0 ? void 0 : _b.body)
+    className: (0, _classnames.default)(`${classPrefix}-content`, (_c = props === null || props === void 0 ? void 0 : props.classNames) === null || _c === void 0 ? void 0 : _c.body)
   }, props.images && _react.default.createElement(_slides.Slides, {
     ref: slidesRef,
     defaultIndex: index,
@@ -86,7 +88,7 @@ const MultiImageViewer = (0, _react.forwardRef)((p, ref) => {
     imageRender: props.imageRender
   })), props.images && _react.default.createElement("div", {
     className: `${classPrefix}-footer`
-  }, (_c = props.renderFooter) === null || _c === void 0 ? void 0 : _c.call(props, props.images[index], index), _react.default.createElement(_safeArea.default, {
+  }, (_d = props.renderFooter) === null || _d === void 0 ? void 0 : _d.call(props, props.images[index], index), _react.default.createElement(_safeArea.default, {
     position: 'bottom'
   })));
   return (0, _renderToContainer.renderToContainer)(props.getContainer, node);

package/cjs/components/virtual-input/virtual-input.css

@@ -26,7 +26,6 @@
   z-index: 1;
   width: 100%;
   max-width: 100%;
-  min-height: 1.5em;
   overflow-y: hidden;
   overflow-x: scroll;
   letter-spacing: 1px;
@@ -41,6 +40,7 @@
   height: 10px;
   position: absolute;
   opacity: 0;
+  left: 0;
 }
 .adm-virtual-input-placeholder {
   display: block;

package/cjs/components/virtual-input/virtual-input.js

@@ -142,6 +142,7 @@ const VirtualInput = (0, _react.forwardRef)((props, ref) => {
       (_b = (_a = mergedProps.cursor) === null || _a === void 0 ? void 0 : _a.onMove) === null || _b === void 0 ? void 0 : _b.call(_a, value.length);
     }
     (_c = mergedProps.onClick) === null || _c === void 0 ? void 0 : _c.call(mergedProps, e);
+    setFocus();
   };
   // 点击单个字符时，根据点击位置置于字符前或后
   const changeCaretPosition = index => e => {
@@ -217,7 +218,7 @@ const VirtualInput = (0, _react.forwardRef)((props, ref) => {
     className: `${classPrefix}-content`,
     ref: contentRef,
     "aria-disabled": mergedProps.disabled,
-    "aria-label": value || mergedProps.placeholder,
+    "aria-label": value ? undefined : mergedProps.placeholder,
     role: 'textbox',
     tabIndex: mergedProps.disabled ? undefined : 0,
     // note: 这里增加 onFocus 有两个目的：

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

@@ -85,6 +85,7 @@ export const ImageUploader = forwardRef((p, ref) => {
   function getFinalTasks(tasks) {
     return props.showFailed ? tasks : tasks.filter(task => task.status !== 'fail');
   }
+  const finalTasks = getFinalTasks(tasks);
   function onChange(e) {
     var _a;
     return __awaiter(this, void 0, void 0, function* () {
@@ -105,7 +106,7 @@ export const ImageUploader = forwardRef((p, ref) => {
         return;
       }
       if (maxCount > 0) {
-        const exceed = value.length + files.length - maxCount;
+        const exceed = value.length + files.length + finalTasks.length - maxCount;
         if (exceed > 0) {
           files = files.slice(0, files.length - exceed);
           (_a = props.onCountExceed) === null || _a === void 0 ? void 0 : _a.call(props, exceed);
@@ -164,7 +165,6 @@ export const ImageUploader = forwardRef((p, ref) => {
     var _a;
     (_a = imageViewerHandlerRef.current) === null || _a === void 0 ? void 0 : _a.close();
   });
-  const finalTasks = getFinalTasks(tasks);
   const showUpload = props.showUpload && (maxCount === 0 || value.length + finalTasks.length < maxCount);
   const renderImages = () => {
     return value.map((fileItem, index) => {

package/es/components/image-viewer/image-viewer.css

@@ -3,7 +3,7 @@
   height: 100vh;
   touch-action: none;
   -webkit-user-select: none;
-          user-select: none;
+  user-select: none;
 }
 .adm-image-viewer-footer {
   position: absolute;

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

@@ -18,6 +18,9 @@ export declare type ImageViewerProps = {
         mask?: string;
         body?: string;
     };
+    mask?: {
+        onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    };
 };
 export declare const ImageViewer: FC<ImageViewerProps>;
 export declare type MultiImageViewerRef = SlidesRef;

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

@@ -13,17 +13,18 @@ const defaultProps = {
   visible: false
 };
 export const ImageViewer = p => {
-  var _a, _b, _c;
+  var _a, _b, _c, _d;
   const props = mergeProps(defaultProps, p);
   const node = React.createElement(Mask, {
     visible: props.visible,
+    afterClose: props === null || props === void 0 ? void 0 : props.afterClose,
+    className: (_a = props === null || props === void 0 ? void 0 : props.classNames) === null || _a === void 0 ? void 0 : _a.mask,
+    onMaskClick: (_b = props.mask) === null || _b === void 0 ? void 0 : _b.onClick,
     disableBodyScroll: false,
     opacity: 'thick',
-    afterClose: props.afterClose,
-    destroyOnClose: true,
-    className: (_a = props === null || props === void 0 ? void 0 : props.classNames) === null || _a === void 0 ? void 0 : _a.mask
+    destroyOnClose: true
   }, React.createElement("div", {
-    className: classNames(`${classPrefix}-content`, (_b = props === null || props === void 0 ? void 0 : props.classNames) === null || _b === void 0 ? void 0 : _b.body)
+    className: classNames(`${classPrefix}-content`, (_c = props === null || props === void 0 ? void 0 : props.classNames) === null || _c === void 0 ? void 0 : _c.body)
   }, (props.image || typeof props.imageRender === 'function') && React.createElement(Slide, {
     image: props.image,
     onTap: props.onClose,
@@ -31,7 +32,7 @@ export const ImageViewer = p => {
     imageRender: props.imageRender
   })), props.image && React.createElement("div", {
     className: `${classPrefix}-footer`
-  }, (_c = props.renderFooter) === null || _c === void 0 ? void 0 : _c.call(props, props.image), React.createElement(SafeArea, {
+  }, (_d = props.renderFooter) === null || _d === void 0 ? void 0 : _d.call(props, props.image), React.createElement(SafeArea, {
     position: 'bottom'
   })));
   return renderToContainer(props.getContainer, node);
@@ -40,7 +41,7 @@ const multiDefaultProps = Object.assign(Object.assign({}, defaultProps), {
   defaultIndex: 0
 });
 export const MultiImageViewer = forwardRef((p, ref) => {
-  var _a, _b, _c;
+  var _a, _b, _c, _d;
   const props = mergeProps(multiDefaultProps, p);
   const [index, setIndex] = useState(props.defaultIndex);
   const slidesRef = useRef(null);
@@ -59,13 +60,14 @@ export const MultiImageViewer = forwardRef((p, ref) => {
   }, [props.onIndexChange, index]);
   const node = React.createElement(Mask, {
     visible: props.visible,
+    afterClose: props === null || props === void 0 ? void 0 : props.afterClose,
+    className: (_a = props === null || props === void 0 ? void 0 : props.classNames) === null || _a === void 0 ? void 0 : _a.mask,
+    onMaskClick: (_b = props.mask) === null || _b === void 0 ? void 0 : _b.onClick,
     disableBodyScroll: false,
     opacity: 'thick',
-    afterClose: props.afterClose,
-    destroyOnClose: true,
-    className: (_a = props === null || props === void 0 ? void 0 : props.classNames) === null || _a === void 0 ? void 0 : _a.mask
+    destroyOnClose: true
   }, React.createElement("div", {
-    className: classNames(`${classPrefix}-content`, (_b = props === null || props === void 0 ? void 0 : props.classNames) === null || _b === void 0 ? void 0 : _b.body)
+    className: classNames(`${classPrefix}-content`, (_c = props === null || props === void 0 ? void 0 : props.classNames) === null || _c === void 0 ? void 0 : _c.body)
   }, props.images && React.createElement(Slides, {
     ref: slidesRef,
     defaultIndex: index,
@@ -76,7 +78,7 @@ export const MultiImageViewer = forwardRef((p, ref) => {
     imageRender: props.imageRender
   })), props.images && React.createElement("div", {
     className: `${classPrefix}-footer`
-  }, (_c = props.renderFooter) === null || _c === void 0 ? void 0 : _c.call(props, props.images[index], index), React.createElement(SafeArea, {
+  }, (_d = props.renderFooter) === null || _d === void 0 ? void 0 : _d.call(props, props.images[index], index), React.createElement(SafeArea, {
     position: 'bottom'
   })));
   return renderToContainer(props.getContainer, node);

package/es/components/virtual-input/virtual-input.css

@@ -26,7 +26,6 @@
   z-index: 1;
   width: 100%;
   max-width: 100%;
-  min-height: 1.5em;
   overflow-y: hidden;
   overflow-x: scroll;
   letter-spacing: 1px;
@@ -41,6 +40,7 @@
   height: 10px;
   position: absolute;
   opacity: 0;
+  left: 0;
 }
 .adm-virtual-input-placeholder {
   display: block;

package/es/components/virtual-input/virtual-input.js

@@ -133,6 +133,7 @@ export const VirtualInput = forwardRef((props, ref) => {
       (_b = (_a = mergedProps.cursor) === null || _a === void 0 ? void 0 : _a.onMove) === null || _b === void 0 ? void 0 : _b.call(_a, value.length);
     }
     (_c = mergedProps.onClick) === null || _c === void 0 ? void 0 : _c.call(mergedProps, e);
+    setFocus();
   };
   // 点击单个字符时，根据点击位置置于字符前或后
   const changeCaretPosition = index => e => {
@@ -208,7 +209,7 @@ export const VirtualInput = forwardRef((props, ref) => {
     className: `${classPrefix}-content`,
     ref: contentRef,
     "aria-disabled": mergedProps.disabled,
-    "aria-label": value || mergedProps.placeholder,
+    "aria-label": value ? undefined : mergedProps.placeholder,
     role: 'textbox',
     tabIndex: mergedProps.disabled ? undefined : 0,
     // note: 这里增加 onFocus 有两个目的：

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "antd-mobile",
-  "version": "5.42.0-alpha.1",
+  "version": "5.42.0",
   "homepage": "https://github.com/ant-design/ant-design-mobile#readme",
   "bugs": {
     "url": "https://github.com/ant-design/ant-design-mobile/issues"