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

package/2x/es/components/date-picker-view/date-picker-view.js

@@ -0,0 +1,46 @@
+import React, { useCallback, useMemo } from 'react';
+import PickerView from '../picker-view';
+import { withNativeProps } from '../../utils/native-props';
+import { mergeProps } from '../../utils/with-default-props';
+import { usePropsValue } from '../../utils/use-props-value';
+import { generateDatePickerColumns, convertDateToStringArray, convertStringArrayToDate, defaultRenderLabel } from '../date-picker/date-picker-utils';
+var thisYear = new Date().getFullYear();
+var defaultProps = {
+  min: new Date(new Date().setFullYear(thisYear - 10)),
+  max: new Date(new Date().setFullYear(thisYear + 10)),
+  precision: 'day',
+  renderLabel: defaultRenderLabel
+};
+export var DatePickerView = function DatePickerView(p) {
+  var _a;
+
+  var props = mergeProps(defaultProps, p);
+
+  var _usePropsValue = usePropsValue({
+    value: props.value,
+    defaultValue: (_a = props.defaultValue) !== null && _a !== void 0 ? _a : null
+  }),
+      value = _usePropsValue[0],
+      setValue = _usePropsValue[1];
+
+  var pickerValue = useMemo(function () {
+    return convertDateToStringArray(value, props.precision);
+  }, [value, props.precision]);
+  var onChange = useCallback(function (val) {
+    var _a;
+
+    var date = convertStringArrayToDate(val, props.precision);
+
+    if (date) {
+      setValue(date);
+      (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, date);
+    }
+  }, [props.onChange, props.precision]);
+  return withNativeProps(props, /*#__PURE__*/React.createElement(PickerView, {
+    columns: function columns(selected) {
+      return generateDatePickerColumns(selected, props.min, props.max, props.precision, props.renderLabel);
+    },
+    value: pickerValue,
+    onChange: onChange
+  }));
+};

package/2x/es/components/date-picker-view/index.d.ts

@@ -0,0 +1,3 @@
+import { DatePickerView } from './date-picker-view';
+export type { DatePickerViewProps } from './date-picker-view';
+export default DatePickerView;

package/2x/es/components/date-picker-view/index.js

@@ -0,0 +1,2 @@
+import { DatePickerView } from './date-picker-view';
+export default DatePickerView;

package/2x/es/components/desense-text/desense-text.js

@@ -2,10 +2,8 @@ import React from 'react';
 import classnames from 'classnames';
 import { withNativeProps } from '../../utils/native-props';
 import { mergeProps } from '../../utils/with-default-props';
-import Icon from '@ant-design/icons';
-import { IconEye } from '../icons/icon-eye';
-import { IconEyeClose } from '../icons/icon-eye-close';
-import { useNewControllableValue } from '../../utils/use-controllable-value';
+import { EyeInvisibleOutline, EyeOutline } from 'antd-mobile-icons';
+import { usePropsValue } from '../../utils/use-props-value';
 var classPrefix = 'adm-desense-text';
 var defaultProps = {
   defaultDesense: true
@@ -15,13 +13,13 @@ export var DesenseText = function DesenseText(p) {
   var text = props.text,
       desenseText = props.desenseText;
 
-  var _useNewControllableVa = useNewControllableValue({
+  var _usePropsValue = usePropsValue({
     value: props.desense,
     defaultValue: props.defaultDesense,
     onChange: props.onChange
   }),
-      isDesense = _useNewControllableVa[0],
-      setIsDesense = _useNewControllableVa[1];
+      isDesense = _usePropsValue[0],
+      setIsDesense = _usePropsValue[1];
 
   return withNativeProps(props, /*#__PURE__*/React.createElement("span", {
     className: classPrefix
@@ -30,7 +28,5 @@ export var DesenseText = function DesenseText(p) {
     onClick: function onClick() {
       setIsDesense(!isDesense);
     }
-  }, /*#__PURE__*/React.createElement(Icon, {
-    component: isDesense ? IconEyeClose : IconEye
-  }))));
+  }, isDesense ? /*#__PURE__*/React.createElement(EyeInvisibleOutline, null) : /*#__PURE__*/React.createElement(EyeOutline, null))));
 };

package/2x/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/2x/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/2x/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/2x/es/components/dialog/dialog.css

@@ -1,61 +1,71 @@
-.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: 1000px;
+  transform: translate(-50%, -50%);
+}
+
+.adm-dialog-main {
+  width: 100%;
   font-size: 28px;
   background-color: white;
   border-radius: 16px;
   overflow: hidden;
 }
 
-.adm-dialog-mask .adm-dialog-wrap .adm-dialog-body {
+.adm-dialog-main .adm-dialog-body {
   padding: 40px 24px;
 }
 
-.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: 36px;
   line-height: 50px;
   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: 30px;
   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: 1px 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: 20px;
   font-size: 36px;
   line-height: 50px;
@@ -63,10 +73,10 @@
   border-right: solid 1px 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/2x/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/2x/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/2x/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/2x/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/2x/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/2x/es/components/dropdown/dropdown.css

@@ -60,6 +60,15 @@
   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;
@@ -75,13 +84,4 @@
 
 .adm-dropdown-popup .adm-dropdown-popup-body {
   position: absolute;
-}
-
-.adm-dropdown-content {
-  width: 100%;
-  background: white;
-}
-
-.adm-dropdown-content-hidden {
-  display: none;
 }

package/2x/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;