antd-mobile 5.0.0-rc.2 → 5.0.0-rc.23

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

@@ -20,10 +20,21 @@
 
 .adm-dialog-main {
   width: 100%;
+  max-height: 70vh;
   font-size: 28px;
   background-color: white;
   border-radius: 16px;
   overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.adm-dialog-main > * {
+  flex: none;
+}
+
+.adm-dialog-main > .adm-dialog-image-container {
+  flex: auto;
 }
 
 .adm-dialog-main .adm-dialog-body {
@@ -79,4 +90,8 @@
 
 .adm-dialog-main .adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button:last-child {
   border-right: none;
+}
+
+.adm-dialog-image-container {
+  overflow-y: auto;
 }

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

@@ -5,6 +5,7 @@ import { PropagationEvent } from '../../utils/with-stop-propagation';
 import { NativeProps } from '../../utils/native-props';
 export declare type DialogProps = {
     afterClose?: () => void;
+    afterShow?: () => void;
     image?: string;
     header?: ReactNode;
     title?: ReactNode;

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

@@ -1,35 +1,4 @@
-var __awaiter = this && this.__awaiter || function (thisArg, _arguments, P, generator) {
-  function adopt(value) {
-    return value instanceof P ? value : new P(function (resolve) {
-      resolve(value);
-    });
-  }
-
-  return new (P || (P = Promise))(function (resolve, reject) {
-    function fulfilled(value) {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    }
-
-    function rejected(value) {
-      try {
-        step(generator["throw"](value));
-      } catch (e) {
-        reject(e);
-      }
-    }
-
-    function step(result) {
-      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
-    }
-
-    step((generator = generator.apply(thisArg, _arguments || [])).next());
-  });
-};
-
+import { __awaiter } from "tslib";
 import React, { useState } from 'react';
 import { mergeProps } from '../../utils/with-default-props';
 import classNames from 'classnames';
@@ -38,22 +7,24 @@ import Mask from '../mask';
 import { DialogActionButton } from './dialog-action-button';
 import Image from '../image';
 import Space from '../space';
+import { renderToContainer } from '../../utils/render-to-container';
 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 = {
+const classPrefix = `adm-dialog`;
+const defaultProps = {
   visible: false,
   actions: [],
   closeOnAction: false,
   closeOnMaskClick: false,
-  stopPropagation: ['click']
+  stopPropagation: ['click'],
+  getContainer: null
 };
-export var Dialog = function Dialog(p) {
-  var props = mergeProps(defaultProps, p);
-  var unmountedRef = useUnmountedRef();
-  var style = useSpring({
+export const Dialog = p => {
+  const props = mergeProps(defaultProps, p);
+  const unmountedRef = useUnmountedRef();
+  const style = useSpring({
     scale: props.visible ? 1 : 0.8,
     opacity: props.visible ? 1 : 0,
     config: {
@@ -62,101 +33,82 @@ export var Dialog = function Dialog(p) {
       friction: 30,
       clamp: true
     },
-    onStart: function onStart() {
+    onStart: () => {
       setActive(true);
     },
-    onRest: function onRest() {
-      var _a;
+    onRest: () => {
+      var _a, _b;
 
       if (unmountedRef.current) return;
       setActive(props.visible);
 
-      if (!props.visible) {
-        (_a = props.afterClose) === null || _a === void 0 ? void 0 : _a.call(props);
+      if (props.visible) {
+        (_a = props.afterShow) === null || _a === void 0 ? void 0 : _a.call(props);
+      } else {
+        (_b = props.afterClose) === null || _b === void 0 ? void 0 : _b.call(props);
       }
     }
   });
-
-  var _useState = useState(props.visible),
-      active = _useState[0],
-      setActive = _useState[1];
-
-  return withStopPropagation(props.stopPropagation, withNativeProps(props, /*#__PURE__*/React.createElement("div", {
+  const [active, setActive] = useState(props.visible);
+  const node = withNativeProps(props, React.createElement("div", {
     className: classPrefix,
     style: {
       display: active ? 'unset' : 'none'
     }
-  }, /*#__PURE__*/React.createElement(Mask, {
+  }, React.createElement(Mask, {
     visible: props.visible,
-    getContainer: props.getContainer,
     onMaskClick: props.closeOnMaskClick ? props.onClose : undefined,
     style: props.maskStyle,
-    className: classNames(classPrefix + "-mask", props.maskClassName)
-  }), /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-wrap",
+    className: classNames(`${classPrefix}-mask`, props.maskClassName)
+  }), React.createElement("div", {
+    className: `${classPrefix}-wrap`,
     style: {
       pointerEvents: props.visible ? 'unset' : 'none'
     }
-  }, /*#__PURE__*/React.createElement(animated.div, {
+  }, React.createElement(animated.div, {
     style: Object.assign({}, style),
-    onClick: function onClick(e) {
-      return e.stopPropagation();
-    },
-    className: classPrefix + "-main"
-  }, !!props.image && /*#__PURE__*/React.createElement(Image, {
+    onClick: e => e.stopPropagation(),
+    className: `${classPrefix}-main`
+  }, !!props.image && React.createElement("div", {
+    className: `${classPrefix}-image-container`
+  }, React.createElement(Image, {
     src: props.image,
     alt: 'dialog header image',
     width: '100%'
-  }), /*#__PURE__*/React.createElement("div", {
+  })), React.createElement("div", {
     style: props.bodyStyle,
-    className: classNames(classPrefix + "-body", props.bodyClassName)
-  }, /*#__PURE__*/React.createElement(Space, {
+    className: classNames(`${classPrefix}-body`, props.bodyClassName)
+  }, React.createElement(Space, {
     direction: 'vertical',
     block: true
-  }, !!props.header && /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-body-header-wrapper"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-body-header"
-  }, props.header)), !!props.title && /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-body-title"
-  }, props.title), !!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];
-    return /*#__PURE__*/React.createElement("div", {
-      className: classPrefix + "-action-row",
+  }, !!props.header && React.createElement("div", {
+    className: `${classPrefix}-body-header-wrapper`
+  }, React.createElement("div", {
+    className: `${classPrefix}-body-header`
+  }, props.header)), !!props.title && React.createElement("div", {
+    className: `${classPrefix}-body-title`
+  }, props.title), !!props.content && React.createElement("div", {
+    className: `${classPrefix}-body-content`
+  }, typeof props.content === 'string' ? React.createElement(AutoCenter, null, props.content) : props.content))), React.createElement("div", {
+    className: `${classPrefix}-footer`
+  }, props.actions.map((row, index) => {
+    const actions = Array.isArray(row) ? row : [row];
+    return React.createElement("div", {
+      className: `${classPrefix}-action-row`,
       key: index
-    }, actions.map(function (action, index) {
-      return /*#__PURE__*/React.createElement(DialogActionButton, {
-        key: action.key,
-        action: action,
-        onAction: function onAction() {
-          return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-            var _a, _b, _c;
-
-            return regeneratorRuntime.wrap(function _callee$(_context) {
-              while (1) {
-                switch (_context.prev = _context.next) {
-                  case 0:
-                    _context.next = 2;
-                    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)]);
+    }, actions.map((action, index) => React.createElement(DialogActionButton, {
+      key: action.key,
+      action: action,
+      onAction: () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b, _c;
 
-                  case 2:
-                    if (props.closeOnAction) {
-                      (_c = props.onClose) === null || _c === void 0 ? void 0 : _c.call(props);
-                    }
+        yield 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 3:
-                  case "end":
-                    return _context.stop();
-                }
-              }
-            }, _callee);
-          }));
+        if (props.closeOnAction) {
+          (_c = props.onClose) === null || _c === void 0 ? void 0 : _c.call(props);
         }
-      });
-    }));
-  })))))));
+      })
+    })));
+  }))))));
+  return renderToContainer(props.getContainer, withStopPropagation(props.stopPropagation, node));
 };

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

@@ -5,7 +5,7 @@ import { confirm } from './confirm';
 import { attachPropertiesToComponent } from '../../utils/attach-properties-to-component';
 import { Dialog } from './dialog';
 export default attachPropertiesToComponent(Dialog, {
-  show: show,
-  alert: alert,
-  confirm: confirm
+  show,
+  alert,
+  confirm
 });

package/2x/es/components/dialog/show.js

@@ -2,12 +2,9 @@ import React, { createRef, forwardRef, useEffect, useImperativeHandle, useState
 import { renderToBody } from '../../utils/render-to-body';
 import { Dialog } from './dialog';
 export function show(props) {
-  var Wrapper = /*#__PURE__*/forwardRef(function (_, ref) {
-    var _useState = useState(false),
-        visible = _useState[0],
-        setVisible = _useState[1];
-
-    useEffect(function () {
+  const Wrapper = forwardRef((_, ref) => {
+    const [visible, setVisible] = useState(false);
+    useEffect(() => {
       setVisible(true);
     }, []);
 
@@ -18,15 +15,13 @@ export function show(props) {
       setVisible(false);
     }
 
-    useImperativeHandle(ref, function () {
-      return {
-        close: handleClose
-      };
-    });
-    return /*#__PURE__*/React.createElement(Dialog, Object.assign({}, props, {
+    useImperativeHandle(ref, () => ({
+      close: handleClose
+    }));
+    return React.createElement(Dialog, Object.assign({}, props, {
       visible: visible,
       onClose: handleClose,
-      afterClose: function afterClose() {
+      afterClose: () => {
         var _a;
 
         (_a = props.afterClose) === null || _a === void 0 ? void 0 : _a.call(props);
@@ -34,12 +29,12 @@ export function show(props) {
       }
     }));
   });
-  var ref = /*#__PURE__*/createRef();
-  var unmount = renderToBody( /*#__PURE__*/React.createElement(Wrapper, {
+  const ref = createRef();
+  const unmount = renderToBody(React.createElement(Wrapper, {
     ref: ref
   }));
   return {
-    close: function close() {
+    close: () => {
       var _a;
 
       (_a = ref.current) === null || _a === void 0 ? void 0 : _a.close();

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

@@ -2,15 +2,15 @@ import React from 'react';
 import classNames from 'classnames';
 import { withNativeProps } from '../../utils/native-props';
 import { mergeProps } from '../../utils/with-default-props';
-var classPrefix = "adm-divider";
-var defaultProps = {
+const classPrefix = `adm-divider`;
+const defaultProps = {
   contentPosition: 'center'
 };
-export var Divider = function Divider(p) {
-  var props = mergeProps(defaultProps, p);
-  return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
-    className: classNames(classPrefix, classPrefix + "-" + props.contentPosition)
-  }, props.children && /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-content"
+export const Divider = p => {
+  const props = mergeProps(defaultProps, p);
+  return withNativeProps(props, React.createElement("div", {
+    className: classNames(classPrefix, `${classPrefix}-${props.contentPosition}`)
+  }, props.children && React.createElement("div", {
+    className: `${classPrefix}-content`
   }, props.children)));
 };

package/2x/es/components/{loading/loading.css → dot-loading/dot-loading.css}

@@ -1,3 +1,3 @@
-.adm-loading {
+.adm-dot-loading {
   display: inline-block;
 }

package/{cjs/components/loading/loading.d.ts → 2x/es/components/dot-loading/dot-loading.d.ts}

@@ -1,6 +1,6 @@
 import React from 'react';
 import { NativeProps } from '../../utils/native-props';
-export declare type LoadingProps = {
+export declare type DotLoadingProps = {
     color?: 'default' | 'primary' | 'white' | (string & {});
 } & NativeProps;
-export declare const Loading: React.NamedExoticComponent<LoadingProps>;
+export declare const DotLoading: React.NamedExoticComponent<DotLoadingProps>;

package/2x/es/components/dot-loading/dot-loading.js

@@ -0,0 +1,59 @@
+import React, { memo } from 'react';
+import { mergeProps } from '../../utils/with-default-props';
+import { withNativeProps } from '../../utils/native-props';
+import classNames from 'classnames';
+const classPrefix = `adm-dot-loading`;
+const colorRecord = {
+  default: 'var(--adm-color-weak)',
+  primary: 'var(--adm-color-primary)',
+  white: 'var(--adm-color-white)'
+};
+const defaultProps = {
+  color: 'default'
+};
+export const DotLoading = memo(p => {
+  var _a;
+
+  const props = mergeProps(defaultProps, p);
+  return withNativeProps(props, React.createElement("div", {
+    style: {
+      color: (_a = colorRecord[props.color]) !== null && _a !== void 0 ? _a : props.color
+    },
+    className: classNames('adm-loading', classPrefix)
+  }, React.createElement("svg", {
+    height: '1em',
+    viewBox: '0 0 100 40',
+    style: {
+      verticalAlign: '-0.125em'
+    }
+  }, React.createElement("g", {
+    stroke: 'none',
+    strokeWidth: '1',
+    fill: 'none',
+    fillRule: 'evenodd'
+  }, React.createElement("g", {
+    transform: 'translate(-100.000000, -71.000000)'
+  }, React.createElement("g", {
+    transform: 'translate(95.000000, 71.000000)'
+  }, React.createElement("g", {
+    transform: 'translate(5.000000, 0.000000)'
+  }, [0, 1, 2].map(i => React.createElement("rect", {
+    key: i,
+    fill: 'currentColor',
+    x: 20 + i * 26,
+    y: '16',
+    width: '8',
+    height: '8',
+    rx: '2'
+  }, React.createElement("animate", {
+    attributeName: 'y',
+    from: '16',
+    to: '16',
+    dur: '2s',
+    begin: `${i * 0.2}s`,
+    repeatCount: 'indefinite',
+    values: '16; 6; 26; 16; 16',
+    keyTimes: '0; 0.1; 0.3; 0.4; 1',
+    id: 'circ-anim'
+  }))))))))));
+});

package/2x/es/components/dot-loading/index.d.ts

@@ -0,0 +1,4 @@
+import './dot-loading.less';
+import { DotLoading } from './dot-loading';
+export type { DotLoadingProps } from './dot-loading';
+export default DotLoading;

package/2x/es/components/dot-loading/index.js

@@ -0,0 +1,3 @@
+import "./dot-loading.css";
+import { DotLoading } from './dot-loading';
+export default DotLoading;

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 {
+  color: var(--adm-color-light);
+  font-size: 18px;
+  transform: rotate(0deg) translateY(-2px);
+  transition: all ease 0.2s;
+}
+
+.adm-dropdown-item .adm-dropdown-item-title-arrow-active {
+  transform: rotate(-180deg) translateY(-2px);
 }
 
 .adm-dropdown-item .adm-dropdown-item-title:active {

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

@@ -1,13 +1,24 @@
-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;
+    closeOnClickAway?: 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;
+    closeOnClickAway?: boolean | undefined;
+    onChange?: ((key: string | null) => void) | undefined;
+    arrow?: React.ReactNode;
+} & NativeProps<never> & {
+    children?: React.ReactNode;
+} & React.RefAttributes<DropdownRef>>;
 export default Dropdown;