antd-mobile 5.0.0-rc.0 → 5.0.0-rc.4

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

@@ -19,28 +19,30 @@
 }
 
 .adm-dropdown-item .adm-dropdown-item-title {
+  display: flex;
+  align-items: center;
   position: relative;
   max-width: 100%;
   font-size: 26px;
   padding: 24px;
 }
 
-.adm-dropdown-item .adm-dropdown-item-title span {
-  display: block;
+.adm-dropdown-item .adm-dropdown-item-title-text {
+  margin-right: 10px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 
-.adm-dropdown-item .adm-dropdown-item-title:after {
-  position: absolute;
-  top: 50%;
-  right: 0;
-  margin-top: -10px;
-  border: 6px solid;
-  border-color: transparent transparent var(--adm-color-text) var(--adm-color-text);
-  transform: rotate(-45deg);
-  content: ' ';
+.adm-dropdown-item .adm-dropdown-item-title-arrow {
+  font-size: 16px;
+  width: 16px;
+  transform: rotate(0deg) translate(0, -2px);
+  transition: all ease 0.2s;
+}
+
+.adm-dropdown-item .adm-dropdown-item-title-arrow-active {
+  transform: rotate(180deg) translate(0, -2px);
 }
 
 .adm-dropdown-item .adm-dropdown-item-title:active {

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

@@ -1,13 +1,22 @@
-import React, { FC } from 'react';
-import { DropdownItemProps } from './item';
+import React from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type DropdownProps = {
     activeKey?: string | null;
     defaultActiveKey?: string | null;
     closeOnMaskClick?: boolean;
     onChange?: (key: string | null) => void;
+    arrow?: React.ReactNode;
 } & NativeProps;
-declare const Dropdown: FC<DropdownProps> & {
-    Item: React.FC<DropdownItemProps>;
+export declare type DropdownRef = {
+    close: () => void;
 };
+declare const Dropdown: React.ForwardRefExoticComponent<{
+    activeKey?: string | null | undefined;
+    defaultActiveKey?: string | null | undefined;
+    closeOnMaskClick?: boolean | undefined;
+    onChange?: ((key: string | null) => void) | undefined;
+    arrow?: React.ReactNode;
+} & NativeProps<never> & {
+    children?: React.ReactNode;
+} & React.RefAttributes<DropdownRef>>;
 export default Dropdown;

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

@@ -1,8 +1,8 @@
 import { useClickAway } from 'ahooks';
 import classNames from 'classnames';
-import React, { cloneElement, useEffect, useRef, useState } from 'react';
+import React, { cloneElement, useEffect, useRef, useState, forwardRef, useImperativeHandle } from 'react';
 import Popup from '../popup';
-import Item, { ItemChildrenWrap } from './item';
+import { ItemChildrenWrap } from './item';
 import { withNativeProps } from '../../utils/native-props';
 import { mergeProps } from '../../utils/with-default-props';
 import { usePropsValue } from '../../utils/use-props-value';
@@ -11,8 +11,7 @@ var defaultProps = {
   defaultActiveKey: null,
   closeOnMaskClick: true
 };
-
-var Dropdown = function Dropdown(p) {
+var Dropdown = /*#__PURE__*/forwardRef(function (p, ref) {
   var _classNames;
 
   var props = mergeProps(defaultProps, p);
@@ -63,7 +62,8 @@ var Dropdown = function Dropdown(p) {
         onClick: function onClick() {
           changeActive(child.key);
         },
-        active: child.key === value
+        active: child.key === value,
+        arrow: child.props.arrow === undefined ? props.arrow : child.props.arrow
       });
       items.push(child);
       if (child.props.forceRender) popupForceRender = true;
@@ -72,6 +72,13 @@ var Dropdown = function Dropdown(p) {
       return child;
     }
   });
+  useImperativeHandle(ref, function () {
+    return {
+      close: function close() {
+        setValue(null);
+      }
+    };
+  }, [setValue]);
   return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
     className: classNames(classPrefix, (_classNames = {}, _classNames[classPrefix + "-open"] = !!value, _classNames)),
     ref: containerRef
@@ -99,13 +106,8 @@ var Dropdown = function Dropdown(p) {
       key: item.key,
       active: isActive,
       forceRender: item.props.forceRender,
-      destroyOnClose: item.props.destroyOnClose,
-      onClick: item.props.closeOnContentClick ? function () {
-        changeActive(null);
-      } : undefined
+      destroyOnClose: item.props.destroyOnClose
     }, item.props.children);
   })))));
-};
-
-Dropdown.Item = Item;
+});
 export default Dropdown;

package/2x/es/components/dropdown/index.d.ts

@@ -1,5 +1,16 @@
+/// <reference types="react" />
 import './dropdown.less';
-import Dropdown from './dropdown';
-export type { DropdownProps } from './dropdown';
+export type { DropdownProps, DropdownRef } from './dropdown';
 export type { DropdownItemProps } from './item';
-export default Dropdown;
+declare const _default: import("react").ForwardRefExoticComponent<{
+    activeKey?: string | null | undefined;
+    defaultActiveKey?: string | null | undefined;
+    closeOnMaskClick?: boolean | undefined;
+    onChange?: ((key: string | null) => void) | undefined;
+    arrow?: import("react").ReactNode;
+} & import("../../utils/native-props").NativeProps<never> & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<import("./dropdown").DropdownRef>> & {
+    Item: import("react").FC<import("./item").DropdownItemProps>;
+};
+export default _default;

package/2x/es/components/dropdown/index.js

@@ -1,3 +1,7 @@
 import "./dropdown.css";
 import Dropdown from './dropdown';
-export default Dropdown;
+import { attachPropertiesToComponent } from '../../utils/attach-properties-to-component';
+import Item from './item';
+export default attachPropertiesToComponent(Dropdown, {
+  Item: Item
+});

package/2x/es/components/dropdown/item.d.ts

@@ -7,8 +7,8 @@ export declare type DropdownItemProps = {
     highlight?: boolean;
     forceRender?: boolean;
     destroyOnClose?: boolean;
-    closeOnContentClick?: boolean;
     onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    arrow?: React.ReactNode;
 } & NativeProps;
 declare const Item: FC<DropdownItemProps>;
 export default Item;

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

@@ -2,10 +2,11 @@ import classNames from 'classnames';
 import React from 'react';
 import { withNativeProps } from '../../utils/native-props';
 import { useShouldRender } from '../../utils/use-should-render';
+import { DownFill } from 'antd-mobile-icons';
 var classPrefix = "adm-dropdown-item";
 
 var Item = function Item(props) {
-  var _classNames;
+  var _classNames, _classNames2;
 
   var cls = classNames(classPrefix, (_classNames = {}, _classNames[classPrefix + "-active"] = props.active, _classNames[classPrefix + "-highlight"] = props.highlight, _classNames));
   return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
@@ -13,17 +14,21 @@ var Item = function Item(props) {
     onClick: props.onClick
   }, /*#__PURE__*/React.createElement("div", {
     className: classPrefix + "-title"
-  }, /*#__PURE__*/React.createElement("span", null, props.title))));
+  }, /*#__PURE__*/React.createElement("span", {
+    className: classPrefix + "-title-text"
+  }, props.title), /*#__PURE__*/React.createElement("span", {
+    className: classNames(classPrefix + "-title-arrow", (_classNames2 = {}, _classNames2[classPrefix + "-title-arrow-active"] = props.active, _classNames2))
+  }, props.arrow === undefined ? /*#__PURE__*/React.createElement(DownFill, null) : props.arrow))));
 };
 
 export default Item;
 export var ItemChildrenWrap = function ItemChildrenWrap(props) {
-  var _classNames2;
+  var _classNames3;
 
   var _props$active = props.active,
       active = _props$active === void 0 ? false : _props$active;
   var shouldRender = useShouldRender(active, props.forceRender, props.destroyOnClose);
-  var cls = classNames(classPrefix + "-content", (_classNames2 = {}, _classNames2[classPrefix + "-content-hidden"] = !active, _classNames2));
+  var cls = classNames(classPrefix + "-content", (_classNames3 = {}, _classNames3[classPrefix + "-content-hidden"] = !active, _classNames3));
   return shouldRender ? /*#__PURE__*/React.createElement("div", {
     className: cls,
     onClick: props.onClick

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

@@ -47,7 +47,7 @@ export var Ellipsis = function Ellipsis(p) {
     container.style.webkitBoxOrient = 'unset';
     container.style.display = 'block';
     var lineHeight = pxToNumber(originStyle.lineHeight);
-    var maxHeight = Math.floor(lineHeight * props.rows + pxToNumber(originStyle.paddingTop) + pxToNumber(originStyle.paddingBottom));
+    var maxHeight = Math.floor(lineHeight * (props.rows + 0.5) + pxToNumber(originStyle.paddingTop) + pxToNumber(originStyle.paddingBottom));
     container.innerText = props.content;
     document.body.appendChild(container);
 

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

@@ -6,6 +6,7 @@
   --z-index: 1;
   --edge-distance: 0;
   --size: 96px;
+  --border-radius: 50%;
 }
 
 .adm-floating-bubble-boundary-outer {
@@ -43,6 +44,6 @@
   touch-action: none;
   background: var(--adm-color-primary);
   color: var(--adm-color-white);
-  border-radius: var(--size);
+  border-radius: var(--border-radius);
   z-index: var(--z-index);
 }

package/2x/es/components/floating-bubble/floating-bubble.d.ts

@@ -2,5 +2,5 @@ import React, { FC } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type FloatingBubbleProps = {
     onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-} & NativeProps<'--initial-position-left' | '--initial-position-right' | '--initial-position-top' | '--initial-position-bottom' | '--z-index' | '--edge-distance' | '--size'>;
+} & NativeProps<'--initial-position-left' | '--initial-position-right' | '--initial-position-top' | '--initial-position-bottom' | '--z-index' | '--edge-distance' | '--size' | '--border-radius'>;
 export declare const FloatingBubble: FC<FloatingBubbleProps>;

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

@@ -7,10 +7,13 @@
   height: 100%;
   box-sizing: border-box;
   color: #666;
+  position: relative;
 }
 
 .adm-form-item-label-required {
-  margin-left: 8px;
+  position: absolute;
+  left: -0.6em;
+  top: 0.2em;
   color: var(--adm-color-danger);
   user-select: none;
 }

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

@@ -8,8 +8,8 @@ declare type RenderChildren<Values = any> = (form: FormInstance<Values>) => Reac
 declare type ChildrenType<Values = any> = RenderChildren<Values> | React.ReactNode;
 declare type RcFieldProps = Omit<FieldProps, 'children'>;
 export declare type FormItemProps = RcFieldProps & NativeProps & Pick<ListItemProps, 'style' | 'onClick' | 'extra'> & {
-    label?: string;
-    help?: string;
+    label?: React.ReactNode;
+    help?: React.ReactNode;
     hasFeedback?: boolean;
     required?: boolean;
     noStyle?: boolean;

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

@@ -1,3 +1,7 @@
+.adm-form .adm-list {
+  --padding-left: 40px;
+}
+
 .adm-form .adm-form-footer {
   padding: 24px;
 }

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

@@ -1,13 +1,16 @@
 import React, { ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
+import { ListProps } from '../list';
 import type { FormProps as RcFormProps, FormInstance } from 'rc-field-form';
 import { FormContextType } from './context';
 import type { FormLayout } from '.';
 export declare type FormProps = RcFormProps & NativeProps & Partial<FormContextType> & {
     footer?: ReactNode;
     layout?: FormLayout;
+    mode?: ListProps['mode'];
 };
 export declare const Form: React.ForwardRefExoticComponent<RcFormProps<any> & NativeProps<never> & Partial<FormContextType> & {
     footer?: ReactNode;
     layout?: "horizontal" | "vertical" | undefined;
+    mode?: ListProps['mode'];
 } & React.RefAttributes<FormInstance<any>>>;

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

@@ -31,13 +31,15 @@ export var Form = /*#__PURE__*/forwardRef(function (p, ref) {
       children = props.children,
       layout = props.layout,
       footer = props.footer,
-      formProps = __rest(props, ["className", "style", "hasFeedback", "children", "layout", "footer"]);
+      mode = props.mode,
+      formProps = __rest(props, ["className", "style", "hasFeedback", "children", "layout", "footer", "mode"]);
 
   return /*#__PURE__*/React.createElement(RcForm, Object.assign({
     className: classNames(classPrefix, classPrefix + "-" + layout, className),
     style: style,
     ref: ref
   }, formProps), /*#__PURE__*/React.createElement(List, {
+    mode: mode,
     style: {
       '--prefix-width': '6em',
       '--align-items': 'stretch'

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

@@ -1,3 +1,7 @@
+.adm-form .adm-list {
+  --padding-left: 40px;
+}
+
 .adm-form .adm-form-footer {
   padding: 24px;
 }
@@ -11,10 +15,13 @@
   height: 100%;
   box-sizing: border-box;
   color: #666;
+  position: relative;
 }
 
 .adm-form-item-label-required {
-  margin-left: 8px;
+  position: absolute;
+  left: -0.6em;
+  top: 0.2em;
   color: var(--adm-color-danger);
   user-select: none;
 }

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

@@ -7,6 +7,7 @@ export type { FormInstance } from 'rc-field-form';
 declare const _default: import("react").ForwardRefExoticComponent<import("rc-field-form").FormProps<any> & import("../../utils/native-props").NativeProps<never> & Partial<import("./context").FormContextType> & {
     footer?: import("react").ReactNode;
     layout?: "horizontal" | "vertical" | undefined;
+    mode?: "default" | "card" | undefined;
 } & import("react").RefAttributes<import("rc-field-form").FormInstance<any>>> & {
     Item: import("react").FC<import("./form-item").FormItemProps>;
     useForm: typeof useForm;

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

@@ -1,13 +1,16 @@
 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;
+    extra?: any;
 }
 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;
@@ -18,7 +21,7 @@ export declare type ImageUploaderProps = {
     capture?: InputHTMLAttributes<unknown>['capture'];
     onPreview?: (index: number) => void;
     beforeUpload?: (file: File[]) => Promise<File[]> | File[];
-    upload: (file: File) => Promise<FileItem>;
-    onDelete?: (file: FileItem) => boolean | Promise<boolean> | void;
+    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

@@ -230,23 +230,25 @@ export var ImageUploader = function ImageUploader(p) {
     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() {
         return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
-          var _a, canDelete;
+          var _c, canDelete;
 
           return regeneratorRuntime.wrap(function _callee3$(_context3) {
             while (1) {
               switch (_context3.prev = _context3.next) {
                 case 0:
                   _context3.next = 2;
-                  return (_a = props.onDelete) === null || _a === void 0 ? void 0 : _a.call(props, fileItem);
+                  return (_c = props.onDelete) === null || _c === void 0 ? void 0 : _c.call(props, fileItem);
 
                 case 2:
                   canDelete = _context3.sent;
@@ -259,8 +261,8 @@ export var ImageUploader = function ImageUploader(p) {
                   return _context3.abrupt("return");
 
                 case 5:
-                  setValue(value.filter(function (x) {
-                    return x.url !== fileItem.url;
+                  setValue(value.filter(function (x, i) {
+                    return i !== index;
                   }));
 
                 case 6:

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-viewer/image-viewer.d.ts

@@ -1,5 +1,5 @@
-import { GetContainer } from '../../utils/render-to-container';
 import { FC } from 'react';
+import { GetContainer } from '../../utils/render-to-container';
 export declare type ImageViewerProps = {
     image?: string;
     maxZoom?: number;
@@ -15,9 +15,3 @@ export declare type MultiImageViewerProps = Omit<ImageViewerProps, 'image'> & {
     onIndexChange?: (index: number) => void;
 };
 export declare const MultiImageViewer: FC<MultiImageViewerProps>;
-export declare function showImageViewer(props: Omit<ImageViewerProps, 'visible'>): {
-    close: () => void;
-};
-export declare function showMultiImageViewer(props: Omit<MultiImageViewerProps, 'visible'>): {
-    close: () => void;
-};

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

@@ -1,10 +1,9 @@
+import React from 'react';
 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, { createRef, forwardRef, useEffect, useImperativeHandle, useState } from 'react';
-import { renderToBody } from '../../utils/render-to-body';
 var classPrefix = "adm-image-viewer";
 var defaultProps = {
   maxZoom: 3,
@@ -55,92 +54,4 @@ export var MultiImageViewer = function MultiImageViewer(p) {
     maxZoom: props.maxZoom
   })));
   return renderToContainer(props.getContainer, node);
-};
-export function showImageViewer(props) {
-  var Wrapper = /*#__PURE__*/forwardRef(function (_, ref) {
-    var _useState = useState(false),
-        visible = _useState[0],
-        setVisible = _useState[1];
-
-    useEffect(function () {
-      setVisible(true);
-    }, []);
-    useImperativeHandle(ref, function () {
-      return {
-        close: function close() {
-          setVisible(false);
-        }
-      };
-    });
-    return /*#__PURE__*/React.createElement(ImageViewer, Object.assign({}, props, {
-      visible: visible,
-      onClose: function onClose() {
-        var _a;
-
-        (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
-        setVisible(false);
-      },
-      afterClose: function afterClose() {
-        var _a;
-
-        (_a = props.afterClose) === null || _a === void 0 ? void 0 : _a.call(props);
-        unmount();
-      }
-    }));
-  });
-  var ref = /*#__PURE__*/createRef();
-  var unmount = renderToBody( /*#__PURE__*/React.createElement(Wrapper, {
-    ref: ref
-  }));
-  return {
-    close: function close() {
-      var _a;
-
-      (_a = ref.current) === null || _a === void 0 ? void 0 : _a.close();
-    }
-  };
-}
-export function showMultiImageViewer(props) {
-  var Wrapper = /*#__PURE__*/forwardRef(function (_, ref) {
-    var _useState2 = useState(false),
-        visible = _useState2[0],
-        setVisible = _useState2[1];
-
-    useEffect(function () {
-      setVisible(true);
-    }, []);
-    useImperativeHandle(ref, function () {
-      return {
-        close: function close() {
-          setVisible(false);
-        }
-      };
-    });
-    return /*#__PURE__*/React.createElement(MultiImageViewer, Object.assign({}, props, {
-      visible: visible,
-      onClose: function onClose() {
-        var _a;
-
-        (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
-        setVisible(false);
-      },
-      afterClose: function afterClose() {
-        var _a;
-
-        (_a = props.afterClose) === null || _a === void 0 ? void 0 : _a.call(props);
-        unmount();
-      }
-    }));
-  });
-  var ref = /*#__PURE__*/createRef();
-  var unmount = renderToBody( /*#__PURE__*/React.createElement(Wrapper, {
-    ref: ref
-  }));
-  return {
-    close: function close() {
-      var _a;
-
-      (_a = ref.current) === null || _a === void 0 ? void 0 : _a.close();
-    }
-  };
-}
+};

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

@@ -1,11 +1,12 @@
 /// <reference types="react" />
 import './image-viewer.less';
-import { showImageViewer, showMultiImageViewer } from './image-viewer';
+import { showMultiImageViewer, showImageViewer, clearImageViewer } from './methods';
 export type { ImageViewerProps, MultiImageViewerProps } from './image-viewer';
 declare const _default: import("react").FC<import("./image-viewer").ImageViewerProps> & {
     Multi: import("react").FC<import("./image-viewer").MultiImageViewerProps> & {
         show: typeof showMultiImageViewer;
     };
     show: typeof showImageViewer;
+    clear: typeof clearImageViewer;
 };
 export default _default;

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

@@ -1,10 +1,12 @@
 import "./image-viewer.css";
 import { attachPropertiesToComponent } from '../../utils/attach-properties-to-component';
-import { ImageViewer, MultiImageViewer, showImageViewer, showMultiImageViewer } from './image-viewer';
+import { ImageViewer, MultiImageViewer } from './image-viewer';
+import { showMultiImageViewer, showImageViewer, clearImageViewer } from './methods';
 var Multi = attachPropertiesToComponent(MultiImageViewer, {
   show: showMultiImageViewer
 });
 export default attachPropertiesToComponent(ImageViewer, {
   Multi: Multi,
-  show: showImageViewer
+  show: showImageViewer,
+  clear: clearImageViewer
 });

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

@@ -1 +1,8 @@
-
+import { ImageViewerProps, MultiImageViewerProps } from './image-viewer';
+export declare function showImageViewer(props: Omit<ImageViewerProps, 'visible'>): {
+    close: () => void;
+};
+export declare function showMultiImageViewer(props: Omit<MultiImageViewerProps, 'visible'>): {
+    close: () => void;
+};
+export declare function clearImageViewer(): void;