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

package/es/components/dialog/alert.js

@@ -1,9 +1,9 @@
 import { show } from './show';
 import { mergeProps } from '../../utils/with-default-props';
-import { globalConfigRef } from '../config-provider';
+import { getDefaultConfig } from '../config-provider';
 export function alert(p) {
   var defaultProps = {
-    confirmText: globalConfigRef.current.locale.Dialog.ok
+    confirmText: getDefaultConfig().locale.Dialog.ok
   };
   var props = mergeProps(defaultProps, p);
   return new Promise(function (resolve) {

package/es/components/dialog/dialog-action-button.d.ts

@@ -1,4 +1,5 @@
 import { FC } from 'react';
+import { NativeProps } from '../../utils/native-props';
 export declare type Action = {
     key: string | number;
     text: string;
@@ -6,7 +7,7 @@ export declare type Action = {
     danger?: boolean;
     bold?: boolean;
     onClick?: () => void | Promise<void>;
-};
+} & NativeProps;
 export declare const DialogActionButton: FC<{
     action: Action;
     onAction: () => void | Promise<void>;

package/es/components/dialog/dialog-action-button.js

@@ -33,6 +33,7 @@ var __awaiter = this && this.__awaiter || function (thisArg, _arguments, P, gene
 import React, { useState } from 'react';
 import classNames from 'classnames';
 import Button from '../button';
+import { withNativeProps } from '../../utils/native-props';
 export var DialogActionButton = function DialogActionButton(props) {
   var action = props.action;
 
@@ -40,46 +41,42 @@ export var DialogActionButton = function DialogActionButton(props) {
       loading = _useState[0],
       setLoading = _useState[1];
 
-  return /*#__PURE__*/React.createElement(Button, {
-    key: action.key,
-    onClick: function onClick() {
-      return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-        var _a, _b;
-
-        return regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) {
-            switch (_context.prev = _context.next) {
-              case 0:
-                setLoading(true);
-                _context.prev = 1;
-                _context.next = 4;
-                return (_a = action.onClick) === null || _a === void 0 ? void 0 : _a.call(action);
-
-              case 4:
-                _context.next = 6;
-                return (_b = props.onAction) === null || _b === void 0 ? void 0 : _b.call(props);
-
-              case 6:
-                _context.next = 12;
-                break;
+  function handleClick() {
+    return __awaiter(this, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+      var promise;
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              setLoading(true);
+              _context.prev = 1;
+              promise = props.onAction();
+              _context.next = 5;
+              return promise;
 
-              case 8:
-                _context.prev = 8;
-                _context.t0 = _context["catch"](1);
-                setLoading(false);
-                throw _context.t0;
+            case 5:
+              setLoading(false);
+              _context.next = 12;
+              break;
 
-              case 12:
-                setLoading(false);
+            case 8:
+              _context.prev = 8;
+              _context.t0 = _context["catch"](1);
+              setLoading(false);
+              throw _context.t0;
 
-              case 13:
-              case "end":
-                return _context.stop();
-            }
+            case 12:
+            case "end":
+              return _context.stop();
           }
-        }, _callee, null, [[1, 8]]);
-      }));
-    },
+        }
+      }, _callee, null, [[1, 8]]);
+    }));
+  }
+
+  return withNativeProps(props.action, /*#__PURE__*/React.createElement(Button, {
+    key: action.key,
+    onClick: handleClick,
     className: classNames('adm-dialog-button', {
       'adm-dialog-button-bold': action.bold
     }),
@@ -88,5 +85,5 @@ export var DialogActionButton = function DialogActionButton(props) {
     color: action.danger ? 'danger' : 'primary',
     loading: loading,
     disabled: action.disabled
-  }, action.text);
+  }, action.text));
 };

package/es/components/dialog/dialog.css

@@ -1,61 +1,69 @@
-.adm-dialog-mask .adm-dialog-wrap {
-  position: relative;
+.adm-dialog {
+  --z-index: var(--adm-dialog-z-index, 1000);
+  position: fixed;
+  z-index: var(--z-index);
+}
+.adm-dialog .adm-dialog-mask {
+  z-index: 0;
+}
+.adm-dialog-wrap {
+  position: fixed;
+  z-index: 1;
   top: 50%;
   left: 50%;
-  transform: translate(-50%, -50%);
-  width: 75%;
+  width: 75vw;
   max-width: 500px;
+  transform: translate(-50%, -50%);
+}
+.adm-dialog-main {
+  width: 100%;
   font-size: 14px;
   background-color: white;
   border-radius: 8px;
   overflow: hidden;
 }
-.adm-dialog-mask .adm-dialog-wrap .adm-dialog-body {
+.adm-dialog-main .adm-dialog-body {
   padding: 20px 12px;
 }
-.adm-dialog-mask .adm-dialog-wrap .adm-dialog-body-header-wrapper {
+.adm-dialog-main .adm-dialog-body-header-wrapper {
   display: flex;
   justify-content: center;
 }
-.adm-dialog-mask .adm-dialog-wrap .adm-dialog-body-title {
+.adm-dialog-main .adm-dialog-body-title {
   font-weight: bold;
   font-size: 18px;
   line-height: 25px;
   text-align: center;
 }
-.adm-dialog-mask .adm-dialog-wrap .adm-dialog-body-message-wrapper {
-  display: flex;
-  justify-content: center;
-}
-.adm-dialog-mask .adm-dialog-wrap .adm-dialog-body-message {
-  max-height: 75vh;
+.adm-dialog-main .adm-dialog-body-content {
+  max-height: 70vh;
   overflow-x: hidden;
   overflow-y: auto;
-  font-size: var(--adm-font-size-main);
+  font-size: 15px;
   line-height: 1.4;
   color: #333;
 }
-.adm-dialog-mask .adm-dialog-wrap .adm-dialog-footer {
+.adm-dialog-main .adm-dialog-footer {
   user-select: none;
 }
-.adm-dialog-mask .adm-dialog-wrap .adm-dialog-footer .adm-dialog-action-row {
+.adm-dialog-main .adm-dialog-footer .adm-dialog-action-row {
   display: flex;
   align-items: stretch;
   border-top: 0.5px solid var(--adm-border-color);
 }
-.adm-dialog-mask .adm-dialog-wrap .adm-dialog-footer .adm-dialog-action-row > * {
+.adm-dialog-main .adm-dialog-footer .adm-dialog-action-row > * {
   flex: 1;
 }
-.adm-dialog-mask .adm-dialog-wrap .adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button {
+.adm-dialog-main .adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button {
   padding: 10px;
   font-size: 18px;
   line-height: 25px;
   border-radius: 0;
   border-right: solid 0.5px var(--adm-border-color);
 }
-.adm-dialog-mask .adm-dialog-wrap .adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button-bold {
+.adm-dialog-main .adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button-bold {
   font-weight: bold;
 }
-.adm-dialog-mask .adm-dialog-wrap .adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button :last-child {
+.adm-dialog-main .adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button:last-child {
   border-right: none;
 }

package/es/components/dialog/dialog.d.ts

@@ -1,6 +1,9 @@
 import React, { FC, ReactNode } from 'react';
 import { Action } from './dialog-action-button';
-export interface DialogProps {
+import { GetContainer } from '../../utils/render-to-container';
+import { PropagationEvent } from '../../utils/with-stop-propagation';
+import { NativeProps } from '../../utils/native-props';
+export declare type DialogProps = {
     afterClose?: () => void;
     image?: string;
     header?: ReactNode;
@@ -12,10 +15,11 @@ export interface DialogProps {
     onClose?: () => void;
     closeOnMaskClick?: boolean;
     visible?: boolean;
-    getContainer?: HTMLElement | (() => HTMLElement) | undefined;
+    getContainer?: GetContainer;
     bodyStyle?: React.CSSProperties;
     bodyClassName?: string;
     maskStyle?: React.CSSProperties;
     maskClassName?: string;
-}
+    stopPropagation?: PropagationEvent[];
+} & NativeProps;
 export declare const Dialog: FC<DialogProps>;

package/es/components/dialog/dialog.js

@@ -30,34 +30,79 @@ var __awaiter = this && this.__awaiter || function (thisArg, _arguments, P, gene
   });
 };
 
-import React from 'react';
+import React, { useState } from 'react';
 import { mergeProps } from '../../utils/with-default-props';
 import classNames from 'classnames';
+import { useUnmountedRef } from 'ahooks';
 import Mask from '../mask';
 import { DialogActionButton } from './dialog-action-button';
 import Image from '../image';
 import Space from '../space';
+import { withStopPropagation } from '../../utils/with-stop-propagation';
+import AutoCenter from '../auto-center';
+import { useSpring, animated } from '@react-spring/web';
+import { withNativeProps } from '../../utils/native-props';
 var classPrefix = "adm-dialog";
 var defaultProps = {
+  visible: false,
   actions: [],
   closeOnAction: false,
-  closeOnMaskClick: false
+  closeOnMaskClick: false,
+  stopPropagation: ['click']
 };
 export var Dialog = function Dialog(p) {
   var props = mergeProps(defaultProps, p);
-  return /*#__PURE__*/React.createElement(Mask, {
+  var unmountedRef = useUnmountedRef();
+  var style = useSpring({
+    scale: props.visible ? 1 : 0.8,
+    opacity: props.visible ? 1 : 0,
+    config: {
+      mass: 1,
+      tension: 200,
+      friction: 30,
+      clamp: true
+    },
+    onStart: function onStart() {
+      setActive(true);
+    },
+    onRest: function onRest() {
+      var _a;
+
+      if (unmountedRef.current) return;
+      setActive(props.visible);
+
+      if (!props.visible) {
+        (_a = props.afterClose) === null || _a === void 0 ? void 0 : _a.call(props);
+      }
+    }
+  });
+
+  var _useState = useState(props.visible),
+      active = _useState[0],
+      setActive = _useState[1];
+
+  return withStopPropagation(props.stopPropagation, withNativeProps(props, /*#__PURE__*/React.createElement("div", {
+    className: classPrefix,
+    style: {
+      display: active ? 'unset' : 'none'
+    }
+  }, /*#__PURE__*/React.createElement(Mask, {
     visible: props.visible,
-    destroyOnClose: true,
     getContainer: props.getContainer,
-    afterClose: props.afterClose,
     onMaskClick: props.closeOnMaskClick ? props.onClose : undefined,
     style: props.maskStyle,
     className: classNames(classPrefix + "-mask", props.maskClassName)
-  }, /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
+    className: classPrefix + "-wrap",
+    style: {
+      pointerEvents: props.visible ? 'unset' : 'none'
+    }
+  }, /*#__PURE__*/React.createElement(animated.div, {
+    style: Object.assign({}, style),
     onClick: function onClick(e) {
       return e.stopPropagation();
     },
-    className: classPrefix + "-wrap"
+    className: classPrefix + "-main"
   }, !!props.image && /*#__PURE__*/React.createElement(Image, {
     src: props.image,
     alt: 'dialog header image',
@@ -75,10 +120,8 @@ export var Dialog = function Dialog(p) {
   }, props.header)), !!props.title && /*#__PURE__*/React.createElement("div", {
     className: classPrefix + "-body-title"
   }, props.title), !!props.content && /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-body-message-wrapper"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-body-message"
-  }, props.content)))), /*#__PURE__*/React.createElement("div", {
+    className: classPrefix + "-body-content"
+  }, typeof props.content === 'string' ? /*#__PURE__*/React.createElement(AutoCenter, null, props.content) : props.content))), /*#__PURE__*/React.createElement("div", {
     className: classPrefix + "-footer"
   }, props.actions.map(function (row, index) {
     var actions = Array.isArray(row) ? row : [row];
@@ -91,18 +134,18 @@ export var Dialog = function Dialog(p) {
         action: action,
         onAction: function onAction() {
           return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-            var _a, _b;
+            var _a, _b, _c;
 
             return regeneratorRuntime.wrap(function _callee$(_context) {
               while (1) {
                 switch (_context.prev = _context.next) {
                   case 0:
                     _context.next = 2;
-                    return (_a = props.onAction) === null || _a === void 0 ? void 0 : _a.call(props, action, index);
+                    return Promise.all([(_a = action.onClick) === null || _a === void 0 ? void 0 : _a.call(action), (_b = props.onAction) === null || _b === void 0 ? void 0 : _b.call(props, action, index)]);
 
                   case 2:
                     if (props.closeOnAction) {
-                      (_b = props.onClose) === null || _b === void 0 ? void 0 : _b.call(props);
+                      (_c = props.onClose) === null || _c === void 0 ? void 0 : _c.call(props);
                     }
 
                   case 3:
@@ -115,5 +158,5 @@ export var Dialog = function Dialog(p) {
         }
       });
     }));
-  }))));
+  })))))));
 };

package/es/components/dialog/index.d.ts

@@ -5,7 +5,7 @@ import { alert } from './alert';
 import { confirm } from './confirm';
 export type { DialogProps } from './dialog';
 export type { Action } from './dialog-action-button';
-export type { DialogShowProps } from './show';
+export type { DialogShowProps, DialogShowRef } from './show';
 export type { DialogAlertProps } from './alert';
 export type { DialogConfirmProps } from './confirm';
 declare const _default: import("react").FC<import("./dialog").DialogProps> & {

package/es/components/dialog/show.d.ts

@@ -1,5 +1,8 @@
 import { DialogProps } from './dialog';
 export declare type DialogShowProps = Omit<DialogProps, 'visible'>;
+export declare type DialogShowRef = {
+    close: () => void;
+};
 export declare function show(props: DialogShowProps): {
     close: () => void;
 };

package/es/components/dialog/show.js

@@ -10,21 +10,22 @@ export function show(props) {
     useEffect(function () {
       setVisible(true);
     }, []);
+
+    function handleClose() {
+      var _a;
+
+      (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
+      setVisible(false);
+    }
+
     useImperativeHandle(ref, function () {
       return {
-        close: function close() {
-          setVisible(false);
-        }
+        close: handleClose
       };
     });
     return /*#__PURE__*/React.createElement(Dialog, Object.assign({}, props, {
       visible: visible,
-      onClose: function onClose() {
-        var _a;
-
-        (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
-        setVisible(false);
-      },
+      onClose: handleClose,
       afterClose: function afterClose() {
         var _a;
 

package/es/components/dropdown/dropdown.css

@@ -49,6 +49,13 @@
   margin-top: -1px;
   transform: rotate(135deg);
 }
+.adm-dropdown-item-content {
+  width: 100%;
+  background: white;
+}
+.adm-dropdown-item-content-hidden {
+  display: none;
+}
 .adm-dropdown-popup {
   position: fixed;
   overflow: hidden;
@@ -63,10 +70,3 @@
 .adm-dropdown-popup .adm-dropdown-popup-body {
   position: absolute;
 }
-.adm-dropdown-content {
-  width: 100%;
-  background: white;
-}
-.adm-dropdown-content-hidden {
-  display: none;
-}

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

@@ -1,13 +1,20 @@
-import React, { FC } from 'react';
-import { DropdownItemProps } from './item';
-export interface DropdownProps {
-    forceRender?: boolean;
-    activeKey?: string;
-    onChange?: (key?: string) => void;
-    className?: string;
-    style?: React.CSSProperties;
-}
-declare const Dropdown: FC<DropdownProps> & {
-    Item: React.FC<DropdownItemProps>;
+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;
+} & NativeProps;
+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;
+} & NativeProps<never> & {
+    children?: React.ReactNode;
+} & React.RefAttributes<DropdownRef>>;
 export default Dropdown;

package/es/components/dropdown/dropdown.js

@@ -1,24 +1,34 @@
-import { useClickAway, useControllableValue } from 'ahooks';
+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 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';
 var classPrefix = "adm-dropdown";
-
-var Dropdown = function Dropdown(props) {
+var defaultProps = {
+  defaultActiveKey: null,
+  closeOnMaskClick: true
+};
+var Dropdown = /*#__PURE__*/forwardRef(function (p, ref) {
   var _classNames;
 
-  var _useControllableValue = useControllableValue(props, {
-    valuePropName: 'activeKey'
+  var props = mergeProps(defaultProps, p);
+
+  var _usePropsValue = usePropsValue({
+    value: props.activeKey,
+    defaultValue: props.defaultActiveKey,
+    onChange: props.onChange
   }),
-      value = _useControllableValue[0],
-      onChange = _useControllableValue[1];
+      value = _usePropsValue[0],
+      setValue = _usePropsValue[1];
 
   var navRef = useRef(null);
   var contentRef = useRef(null); // 点击外部区域，关闭
 
   useClickAway(function () {
-    onChange(undefined);
+    setValue(null);
   }, [navRef, contentRef]); // 计算 navs 的 top 值
 
   var _useState = useState(),
@@ -27,21 +37,25 @@ var Dropdown = function Dropdown(props) {
 
   var containerRef = useRef(null);
   useEffect(function () {
+    var container = containerRef.current;
+    if (!container) return;
+
     if (value) {
-      var rect = containerRef.current.getBoundingClientRect();
+      var rect = container.getBoundingClientRect();
       setTop(rect.bottom);
     }
   }, [value]);
 
   var changeActive = function changeActive(key) {
     if (value === key) {
-      onChange(undefined);
+      setValue(null);
     } else {
-      onChange(key);
+      setValue(key);
     }
   };
 
-  var contents = {};
+  var popupForceRender = false;
+  var items = [];
   var navs = React.Children.map(props.children, function (child) {
     if ( /*#__PURE__*/React.isValidElement(child)) {
       var childProps = Object.assign(Object.assign({}, child.props), {
@@ -50,15 +64,22 @@ var Dropdown = function Dropdown(props) {
         },
         active: child.key === value
       });
-      contents[child.key] = child.props.children;
+      items.push(child);
+      if (child.props.forceRender) popupForceRender = true;
       return /*#__PURE__*/cloneElement(child, childProps);
     } else {
       return child;
     }
   });
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames(classPrefix, props.className, (_classNames = {}, _classNames[classPrefix + "-open"] = !!value, _classNames)),
-    style: props.style,
+  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
   }, /*#__PURE__*/React.createElement("div", {
     className: classPrefix + "-nav",
@@ -72,25 +93,20 @@ var Dropdown = function Dropdown(props) {
     style: {
       top: top
     },
-    forceRender: props.forceRender
+    forceRender: popupForceRender,
+    onMaskClick: props.closeOnMaskClick ? function () {
+      changeActive(null);
+    } : undefined
   }, /*#__PURE__*/React.createElement("div", {
     ref: contentRef
-  }, Object.keys(contents).map(function (key) {
-    var _classNames2;
-
-    var isActive = key === value;
-    var cls = classNames(classPrefix + "-content", (_classNames2 = {}, _classNames2[classPrefix + "-content-hidden"] = !isActive, _classNames2));
-
-    if (!props.forceRender && !isActive) {
-      return null;
-    }
-
-    return /*#__PURE__*/React.createElement("div", {
-      className: cls,
-      key: key
-    }, contents[key]);
-  }))));
-};
-
-Dropdown.Item = Item;
+  }, items.map(function (item) {
+    var isActive = item.key === value;
+    return /*#__PURE__*/React.createElement(ItemChildrenWrap, {
+      key: item.key,
+      active: isActive,
+      forceRender: item.props.forceRender,
+      destroyOnClose: item.props.destroyOnClose
+    }, item.props.children);
+  })))));
+});
 export default Dropdown;

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

@@ -1,5 +1,15 @@
+/// <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;
+} & 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/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/es/components/dropdown/item.d.ts

@@ -1,12 +1,17 @@
 import React, { FC } from 'react';
-export interface DropdownItemProps {
+import { NativeProps } from '../../utils/native-props';
+export declare type DropdownItemProps = {
     key: string;
     title: React.ReactNode;
     active?: boolean;
     highlight?: boolean;
+    forceRender?: boolean;
+    destroyOnClose?: boolean;
     onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-    className?: string;
-    style?: React.CSSProperties;
-}
+} & NativeProps;
 declare const Item: FC<DropdownItemProps>;
 export default Item;
+declare type DropdownItemChildrenWrapProps = {
+    onClick?: () => void;
+} & Pick<DropdownItemProps, 'active' | 'forceRender' | 'destroyOnClose'>;
+export declare const ItemChildrenWrap: FC<DropdownItemChildrenWrapProps>;