antd-mobile 5.0.0-beta.9 → 5.0.0-rc.3

package/2x/es/components/grid/grid.d.ts

@@ -1,11 +1,12 @@
-import React from 'react';
+import React, { FC } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type GridProps = {
     columns: number;
-    gap?: number | number[] | string | string[];
-} & NativeProps;
-export declare const Grid: React.FC<GridProps>;
+    gap?: number | string | [number | string, number | string];
+} & NativeProps<'--gap' | '--gap-vertical' | '--gap-horizontal'>;
+export declare const Grid: FC<GridProps>;
 export declare type GridItemProps = {
     span?: number;
+    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
 } & NativeProps;
-export declare const GridItem: React.FC<GridItemProps>;
+export declare const GridItem: FC<GridItemProps>;

package/2x/es/components/grid/grid.js

@@ -1,40 +1,38 @@
-import { withDefaultProps } from '../../utils/with-default-props';
+import { mergeProps } from '../../utils/with-default-props';
 import React from 'react';
 import { withNativeProps } from '../../utils/native-props';
+import { toCSSLength } from '../../utils/to-css-length';
 var classPrefix = "adm-grid";
-var defaultProps = {
-  gap: 0
-};
-export var Grid = withDefaultProps(defaultProps)(function (props) {
-  var gapStyle = {};
+export var Grid = function Grid(props) {
+  var style = {
+    '--columns': props.columns.toString()
+  };
   var gap = props.gap;
 
-  if (gap) {
-    var _ref = Array.isArray(gap) ? gap : [gap, gap],
-        horizontalGap = _ref[0],
-        verticalGap = _ref[1];
-
-    gapStyle = Object.assign(Object.assign({}, gapStyle), {
-      '--vertical-gap': typeof verticalGap === 'number' ? verticalGap + "px" : verticalGap,
-      '--horizontal-gap': typeof horizontalGap === 'number' ? horizontalGap + "px" : horizontalGap
-    });
+  if (gap !== undefined) {
+    if (Array.isArray(gap)) {
+      style['--gap-horizontal'] = toCSSLength(gap[0]);
+      style['--gap-vertical'] = toCSSLength(gap[1]);
+    } else {
+      style['--gap'] = toCSSLength(gap);
+    }
   }
 
   return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
     className: classPrefix,
-    style: Object.assign(Object.assign({}, gapStyle), {
-      '--columns': props.columns
-    })
+    style: style
   }, props.children));
-});
-export var GridItem = withDefaultProps({
-  span: 1
-})(function (props) {
+};
+export var GridItem = function GridItem(p) {
+  var props = mergeProps({
+    span: 1
+  }, p);
   var itemStyle = {
     '--item-span': props.span
   };
   return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
     className: classPrefix + "-item",
-    style: itemStyle
+    style: itemStyle,
+    onClick: props.onClick
   }, props.children));
-});
+};

package/2x/es/components/image/image.css

@@ -1,4 +1,8 @@
 .adm-image {
+  --width: var(--adm-image-width, auto);
+  --height: var(--adm-image-height, auto);
+  width: var(--width);
+  height: var(--height);
   display: inline-block;
   overflow: hidden;
 }
@@ -16,7 +20,7 @@
   min-width: 48px;
 }
 
-.adm-image-tip > .anticon {
+.adm-image-tip > .antd-mobile-icon {
   position: absolute;
   left: 50%;
   top: 50%;

package/2x/es/components/image/image.d.ts

@@ -1,4 +1,4 @@
-import React, { FC, ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type ImageProps = {
     src: string;
@@ -8,7 +8,8 @@ export declare type ImageProps = {
     fit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
     placeholder?: ReactNode;
     fallback?: ReactNode;
-    onClick?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
+    lazy?: boolean;
+    onClick?: (event: React.MouseEvent<HTMLImageElement, Event>) => void;
     onError?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
-} & NativeProps & Pick<React.ImgHTMLAttributes<HTMLImageElement>, 'crossOrigin' | 'decoding' | 'loading' | 'referrerPolicy' | 'sizes' | 'srcSet' | 'useMap'>;
-export declare const Image: FC<ImageProps>;
+} & NativeProps<'--width' | '--height'> & Pick<React.ImgHTMLAttributes<HTMLImageElement>, 'crossOrigin' | 'decoding' | 'loading' | 'referrerPolicy' | 'sizes' | 'srcSet' | 'useMap'>;
+export declare const Image: React.FC<ImageProps>;

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

@@ -1,18 +1,23 @@
 import { mergeProps } from '../../utils/with-default-props';
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import { withNativeProps } from '../../utils/native-props';
-import { PictureOutlined, DisconnectOutlined } from '@ant-design/icons';
+import { PictureOutline, PictureWrongOutline } from 'antd-mobile-icons';
+import { staged } from 'staged-components';
+import { toCSSLength } from '../../utils/to-css-length';
+import { LazyDetector } from './lazy-detector';
+import { useUpdateLayoutEffect } from 'ahooks';
 var classPrefix = "adm-image";
 var defaultProps = {
   fit: 'fill',
   placeholder: /*#__PURE__*/React.createElement("div", {
     className: classPrefix + "-tip"
-  }, /*#__PURE__*/React.createElement(PictureOutlined, null)),
+  }, /*#__PURE__*/React.createElement(PictureOutline, null)),
   fallback: /*#__PURE__*/React.createElement("div", {
     className: classPrefix + "-tip"
-  }, /*#__PURE__*/React.createElement(DisconnectOutlined, null))
+  }, /*#__PURE__*/React.createElement(PictureWrongOutline, null)),
+  lazy: false
 };
-export var Image = function Image(p) {
+export var Image = staged(function (p) {
   var props = mergeProps(defaultProps, p);
 
   var _useState = useState(false),
@@ -23,14 +28,29 @@ export var Image = function Image(p) {
       failed = _useState2[0],
       setFailed = _useState2[1];
 
+  var ref = useRef(null);
+  var src = props.src;
+  var srcSet = props.srcSet;
+
+  var _useState3 = useState(!props.lazy),
+      initialized = _useState3[0],
+      setInitialized = _useState3[1];
+
+  src = initialized ? props.src : undefined;
+  srcSet = initialized ? props.srcSet : undefined;
+  useUpdateLayoutEffect(function () {
+    setLoaded(false);
+    setFailed(false);
+  }, [src]);
+
   function renderInner() {
     if (failed) {
-      return props.fallback;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, props.fallback);
     }
 
-    return /*#__PURE__*/React.createElement(React.Fragment, null, !loaded && props.placeholder, /*#__PURE__*/React.createElement("img", {
+    var img = /*#__PURE__*/React.createElement("img", {
       className: classPrefix + "-img",
-      src: props.src,
+      src: src,
       alt: props.alt,
       onClick: props.onClick,
       onLoad: function onLoad() {
@@ -51,16 +71,29 @@ export var Image = function Image(p) {
       loading: props.loading,
       referrerPolicy: props.referrerPolicy,
       sizes: props.sizes,
-      srcSet: props.srcSet,
+      srcSet: srcSet,
       useMap: props.useMap
-    }));
+    });
+    return /*#__PURE__*/React.createElement(React.Fragment, null, !loaded && props.placeholder, img);
+  }
+
+  var style = {};
+
+  if (props.width) {
+    style['--width'] = toCSSLength(props.width);
+  }
+
+  if (props.height) {
+    style['--height'] = toCSSLength(props.height);
   }
 
   return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
+    ref: ref,
     className: classPrefix,
-    style: {
-      width: props.width,
-      height: props.height
+    style: style
+  }, props.lazy && !initialized && /*#__PURE__*/React.createElement(LazyDetector, {
+    onActive: function onActive() {
+      setInitialized(true);
     }
-  }, renderInner()));
-};
+  }), renderInner()));
+});

package/2x/es/components/image/lazy-detector.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+declare type Props = {
+    onActive: () => void;
+};
+export declare const LazyDetector: FC<Props>;
+export {};

package/2x/es/components/image/lazy-detector.js

@@ -0,0 +1,14 @@
+import React, { useEffect, useRef } from 'react';
+import { useInViewport } from 'ahooks';
+export var LazyDetector = function LazyDetector(props) {
+  var ref = useRef(null);
+  var inViewport = useInViewport(ref);
+  useEffect(function () {
+    if (inViewport) {
+      props.onActive();
+    }
+  }, [inViewport]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref
+  });
+};

package/2x/es/components/image-uploader/image-uploader.css

@@ -2,6 +2,10 @@
   --cell-size: 160px;
 }
 
+.adm-image-uploader-space {
+  --gap: 24px;
+}
+
 .adm-image-uploader-cell {
   position: relative;
   width: var(--cell-size);
@@ -28,7 +32,7 @@
   cursor: pointer;
 }
 
-.adm-image-uploader-cell-delete .anticon {
+.adm-image-uploader-cell-delete-icon {
   position: absolute;
   left: 8px;
   top: 6px;
@@ -64,26 +68,29 @@
   height: var(--cell-size);
 }
 
-.adm-image-uploader-upload-button {
+.adm-image-uploader-upload-button-wrap {
   position: relative;
+}
+
+.adm-image-uploader-upload-button-wrap .adm-image-uploader-upload-button {
   background-color: #f5f5f5;
   text-align: center;
   line-height: var(--cell-size);
   display: block;
 }
 
-.adm-image-uploader-upload-button-icon {
+.adm-image-uploader-upload-button-wrap .adm-image-uploader-upload-button-icon {
   color: #999999;
   font-size: 64px;
 }
 
-.adm-image-uploader-upload-button .adm-image-uploader-input {
+.adm-image-uploader-upload-button-wrap .adm-image-uploader-input {
   cursor: pointer;
   position: absolute;
   opacity: 0;
   left: 0;
   top: 0;
-  width: var(--cell-size);
-  height: var(--cell-size);
+  width: 100%;
+  height: 100%;
   border-radius: 8px;
 }

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

@@ -1,12 +1,15 @@
-import { FC } from 'react';
+import { FC, InputHTMLAttributes } from 'react';
+import { NativeProps } from '../../utils/native-props';
 export declare type TaskStatus = 'pending' | 'fail';
-export interface FileItem {
+export interface ImageUploadItem {
+    key?: string | number;
     url: string;
+    thumbnailUrl?: string;
 }
 export declare type ImageUploaderProps = {
-    defaultValue?: FileItem[];
-    value?: FileItem[];
-    onChange?: (fileList: FileItem[]) => void;
+    defaultValue?: ImageUploadItem[];
+    value?: ImageUploadItem[];
+    onChange?: (items: ImageUploadItem[]) => void;
     accept?: string;
     multiple?: boolean;
     maxCount?: number;
@@ -14,9 +17,10 @@ export declare type ImageUploaderProps = {
     disableUpload?: boolean;
     showUpload?: boolean;
     deletable?: boolean;
-    capture?: boolean | string;
+    capture?: InputHTMLAttributes<unknown>['capture'];
     onPreview?: (index: number) => void;
     beforeUpload?: (file: File[]) => Promise<File[]> | File[];
-    upload: (file: File) => Promise<FileItem>;
-};
+    upload: (file: File) => Promise<ImageUploadItem>;
+    onDelete?: (item: ImageUploadItem) => boolean | Promise<boolean> | void;
+} & NativeProps<'--cell-size'>;
 export declare const ImageUploader: FC<ImageUploaderProps>;

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

@@ -31,14 +31,14 @@ var __awaiter = this && this.__awaiter || function (thisArg, _arguments, P, gene
 };
 
 import React, { useLayoutEffect, useRef, useState } from 'react';
-import { PlusOutlined } from '@ant-design/icons';
+import { AddOutline } from 'antd-mobile-icons';
 import { mergeProps } from '../../utils/with-default-props';
 import ImageViewer from '../image-viewer';
 import PreviewItem from './preview-item';
-import { useNewControllableValue } from '../../utils/use-controllable-value';
+import { usePropsValue } from '../../utils/use-props-value';
 import { usePersistFn } from 'ahooks';
 import Space from '../space';
-import { convertPx } from '../../utils/convert-px';
+import { withNativeProps } from '../../utils/native-props';
 var classPrefix = "adm-image-uploader";
 var defaultProps = {
   disableUpload: false,
@@ -52,9 +52,9 @@ var defaultProps = {
 export var ImageUploader = function ImageUploader(p) {
   var props = mergeProps(defaultProps, p);
 
-  var _useNewControllableVa = useNewControllableValue(props),
-      value = _useNewControllableVa[0],
-      setValue = _useNewControllableVa[1];
+  var _usePropsValue = usePropsValue(props),
+      value = _usePropsValue[0],
+      setValue = _usePropsValue[1];
 
   var updateValue = usePersistFn(function (updater) {
     setValue(updater(value));
@@ -89,43 +89,44 @@ export var ImageUploader = function ImageUploader(p) {
         while (1) {
           switch (_context2.prev = _context2.next) {
             case 0:
+              e.persist();
               rawFiles = e.target.files;
 
               if (rawFiles) {
-                _context2.next = 3;
+                _context2.next = 4;
                 break;
               }
 
               return _context2.abrupt("return");
 
-            case 3:
+            case 4:
               files = [].slice.call(rawFiles);
 
               if (!props.beforeUpload) {
-                _context2.next = 8;
+                _context2.next = 9;
                 break;
               }
 
-              _context2.next = 7;
+              _context2.next = 8;
               return props.beforeUpload(files);
 
-            case 7:
+            case 8:
               files = _context2.sent;
 
-            case 8:
+            case 9:
               if (!(files.length === 0)) {
-                _context2.next = 10;
+                _context2.next = 11;
                 break;
               }
 
               return _context2.abrupt("return");
 
-            case 10:
+            case 11:
               if (maxCount > 0) {
                 exceed = value.length + files.length - maxCount;
 
                 if (exceed > 0) {
-                  files = files.slice(0, maxCount - exceed);
+                  files = files.slice(0, files.length - exceed);
                   (_a = props.onCountExceed) === null || _a === void 0 ? void 0 : _a.call(props, exceed);
                 }
               }
@@ -140,7 +141,7 @@ export var ImageUploader = function ImageUploader(p) {
               setTasks(function (prev) {
                 return [].concat(prev, newTasks);
               });
-              _context2.next = 15;
+              _context2.next = 16;
               return Promise.all(newTasks.map(function (currentTask) {
                 return __awaiter(_this, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
                   var result;
@@ -196,9 +197,14 @@ export var ImageUploader = function ImageUploader(p) {
                     }
                   }, _callee, null, [[0, 8]]);
                 }));
-              }));
+              }))["catch"](function (error) {
+                return console.error(error);
+              });
 
-            case 15:
+            case 16:
+              e.target.value = ''; // HACK: fix the same file doesn't trigger onChange
+
+            case 17:
             case "end":
               return _context2.stop();
           }
@@ -218,22 +224,53 @@ export var ImageUploader = function ImageUploader(p) {
   }
 
   var showUpload = props.showUpload && (maxCount === 0 || value.length + tasks.length < maxCount);
-  return /*#__PURE__*/React.createElement("div", {
+  return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
     className: classPrefix
   }, /*#__PURE__*/React.createElement(Space, {
-    size: convertPx(12),
+    className: classPrefix + "-space",
     wrap: true
   }, value.map(function (fileItem, index) {
+    var _a, _b;
+
     return /*#__PURE__*/React.createElement(PreviewItem, {
-      key: fileItem.url,
-      url: fileItem.url,
+      key: (_a = fileItem.key) !== null && _a !== void 0 ? _a : index,
+      url: (_b = fileItem.thumbnailUrl) !== null && _b !== void 0 ? _b : fileItem.url,
       deletable: props.deletable,
       onClick: function onClick() {
         return previewImage(index);
       },
       onDelete: function onDelete() {
-        setValue(value.filter(function (x) {
-          return x.url !== fileItem.url;
+        return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
+          var _c, canDelete;
+
+          return regeneratorRuntime.wrap(function _callee3$(_context3) {
+            while (1) {
+              switch (_context3.prev = _context3.next) {
+                case 0:
+                  _context3.next = 2;
+                  return (_c = props.onDelete) === null || _c === void 0 ? void 0 : _c.call(props, fileItem);
+
+                case 2:
+                  canDelete = _context3.sent;
+
+                  if (!(canDelete === false)) {
+                    _context3.next = 5;
+                    break;
+                  }
+
+                  return _context3.abrupt("return");
+
+                case 5:
+                  setValue(value.filter(function (x, i) {
+                    return i !== index;
+                  }));
+
+                case 6:
+                case "end":
+                  return _context3.stop();
+              }
+            }
+          }, _callee3);
         }));
       }
     });
@@ -244,22 +281,24 @@ export var ImageUploader = function ImageUploader(p) {
       deletable: task.status !== 'pending',
       status: task.status,
       onDelete: function onDelete() {
-        setValue(value.filter(function (x) {
-          return x.url !== task.url;
+        setTasks(tasks.filter(function (x) {
+          return x.id !== task.id;
         }));
       }
     });
-  }), showUpload && /*#__PURE__*/React.createElement("span", {
+  }), showUpload && /*#__PURE__*/React.createElement("div", {
+    className: classPrefix + "-upload-button-wrap"
+  }, props.children ? props.children : /*#__PURE__*/React.createElement("span", {
     className: classPrefix + "-cell " + classPrefix + "-upload-button",
     role: 'button'
   }, /*#__PURE__*/React.createElement("span", {
     className: classPrefix + "-upload-button-icon"
-  }, /*#__PURE__*/React.createElement(PlusOutlined, null)), !props.disableUpload && /*#__PURE__*/React.createElement("input", {
+  }, /*#__PURE__*/React.createElement(AddOutline, null))), !props.disableUpload && /*#__PURE__*/React.createElement("input", {
     capture: props.capture,
     accept: props.accept,
     multiple: props.multiple,
     type: 'file',
     className: classPrefix + "-input",
     onChange: onChange
-  }))));
+  })))));
 };

package/2x/es/components/image-uploader/index.d.ts

@@ -1,4 +1,4 @@
 import { ImageUploader } from './image-uploader';
 import './image-uploader.less';
-export type { FileItem, ImageUploaderProps } from './image-uploader';
+export type { ImageUploadItem, ImageUploaderProps } from './image-uploader';
 export default ImageUploader;

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

@@ -1,10 +1,15 @@
 import React, { useMemo } from 'react';
-import { CloseOutlined, LoadingOutlined } from '@ant-design/icons';
+import { CloseOutline } from 'antd-mobile-icons';
 import classNames from 'classnames';
 import Image from '../image';
+import Loading from '../loading';
+import { useConfig } from '../config-provider';
 var classPrefix = "adm-image-uploader";
 
 var PreviewItem = function PreviewItem(props) {
+  var _useConfig = useConfig(),
+      locale = _useConfig.locale;
+
   var url = props.url,
       file = props.file,
       deletable = props.deletable,
@@ -26,16 +31,20 @@ var PreviewItem = function PreviewItem(props) {
       className: classPrefix + "-cell-mask"
     }, /*#__PURE__*/React.createElement("span", {
       className: classPrefix + "-cell-loading"
-    }, /*#__PURE__*/React.createElement(LoadingOutlined, null), /*#__PURE__*/React.createElement("span", {
+    }, /*#__PURE__*/React.createElement(Loading, {
+      color: '#fff'
+    }), /*#__PURE__*/React.createElement("span", {
       className: classPrefix + "-cell-mask-message"
-    }, "\u4E0A\u4F20\u4E2D...")));
+    }, locale.ImageUploader.uploading)));
   }
 
   function renderDelete() {
     return deletable && /*#__PURE__*/React.createElement("span", {
       className: classPrefix + "-cell-delete",
       onClick: onDelete
-    }, /*#__PURE__*/React.createElement(CloseOutlined, null));
+    }, /*#__PURE__*/React.createElement(CloseOutline, {
+      className: classPrefix + "-cell-delete-icon"
+    }));
   }
 
   return /*#__PURE__*/React.createElement("div", {

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

@@ -1,5 +1,5 @@
 import { GetContainer } from '../../utils/render-to-container';
-import React from 'react';
+import { FC } from 'react';
 export declare type ImageViewerProps = {
     image?: string;
     maxZoom?: number;
@@ -8,13 +8,13 @@ export declare type ImageViewerProps = {
     onClose?: () => void;
     afterClose?: () => void;
 };
-export declare const ImageViewer: React.FC<ImageViewerProps>;
+export declare const ImageViewer: FC<ImageViewerProps>;
 export declare type MultiImageViewerProps = Omit<ImageViewerProps, 'image'> & {
     images?: string[];
     defaultIndex?: number;
     onIndexChange?: (index: number) => void;
 };
-export declare const MultiImageViewer: React.FC<MultiImageViewerProps>;
+export declare const MultiImageViewer: FC<MultiImageViewerProps>;
 export declare function showImageViewer(props: Omit<ImageViewerProps, 'visible'>): {
     close: () => void;
 };

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

@@ -1,9 +1,9 @@
-import { withDefaultProps } from '../../utils/with-default-props';
+import { mergeProps } from '../../utils/with-default-props';
 import { renderToContainer } from '../../utils/render-to-container';
 import Mask from '../mask';
 import { Slide } from './slide';
 import { Slides } from './slides';
-import React, { useState, forwardRef, useImperativeHandle, createRef, useEffect } from 'react';
+import React, { createRef, forwardRef, useEffect, useImperativeHandle, useState } from 'react';
 import { renderToBody } from '../../utils/render-to-body';
 var classPrefix = "adm-image-viewer";
 var defaultProps = {
@@ -11,11 +11,12 @@ var defaultProps = {
   getContainer: null,
   visible: false
 };
-export var ImageViewer = withDefaultProps(defaultProps)(function (props) {
+export var ImageViewer = function ImageViewer(p) {
+  var props = mergeProps(defaultProps, p);
   var node = /*#__PURE__*/React.createElement(Mask, {
     visible: props.visible,
     disableBodyScroll: false,
-    opacity: 'dark',
+    opacity: 'thick',
     afterClose: props.afterClose
   }, /*#__PURE__*/React.createElement("div", {
     className: classPrefix + "-content"
@@ -29,15 +30,16 @@ export var ImageViewer = withDefaultProps(defaultProps)(function (props) {
     maxZoom: props.maxZoom
   })));
   return renderToContainer(props.getContainer, node);
-});
+};
 var multiDefaultProps = Object.assign(Object.assign({}, defaultProps), {
   defaultIndex: 0
 });
-export var MultiImageViewer = withDefaultProps(multiDefaultProps)(function (props) {
+export var MultiImageViewer = function MultiImageViewer(p) {
+  var props = mergeProps(multiDefaultProps, p);
   var node = /*#__PURE__*/React.createElement(Mask, {
     visible: props.visible,
     disableBodyScroll: false,
-    opacity: 'dark',
+    opacity: 'thick',
     afterClose: props.afterClose
   }, /*#__PURE__*/React.createElement("div", {
     className: classPrefix + "-content"
@@ -53,7 +55,7 @@ export var MultiImageViewer = withDefaultProps(multiDefaultProps)(function (prop
     maxZoom: props.maxZoom
   })));
   return renderToContainer(props.getContainer, node);
-});
+};
 export function showImageViewer(props) {
   var Wrapper = /*#__PURE__*/forwardRef(function (_, ref) {
     var _useState = useState(false),