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

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

@@ -0,0 +1,40 @@
+import { __awaiter } from "tslib";
+import React, { useState } from 'react';
+import classNames from 'classnames';
+import Button from '../button';
+import { withNativeProps } from '../../utils/native-props';
+export const ModalActionButton = props => {
+  const {
+    action
+  } = props;
+  const [loading, setLoading] = useState(false);
+
+  function handleClick() {
+    return __awaiter(this, void 0, void 0, function* () {
+      setLoading(true);
+
+      try {
+        const promise = props.onAction();
+        yield promise;
+        setLoading(false);
+      } catch (e) {
+        setLoading(false);
+        throw e;
+      }
+    });
+  }
+
+  return withNativeProps(props.action, React.createElement(Button, {
+    key: action.key,
+    onClick: handleClick,
+    className: classNames('adm-modal-button', {
+      'adm-modal-button-primary': props.action.primary
+    }),
+    fill: props.action.primary ? 'solid' : 'none',
+    size: props.action.primary ? 'large' : 'middle',
+    block: true,
+    color: action.danger ? 'danger' : 'primary',
+    loading: loading,
+    disabled: action.disabled
+  }, action.text));
+};

package/es/components/modal/modal.css

@@ -0,0 +1,91 @@
+.adm-modal {
+  --z-index: var(--adm-modal-z-index, 1000);
+  position: fixed;
+  z-index: var(--z-index);
+}
+.adm-modal .adm-modal-mask {
+  z-index: 0;
+}
+.adm-modal-wrap {
+  position: fixed;
+  z-index: 1;
+  top: 50%;
+  left: 50%;
+  width: auto;
+  min-width: 280px;
+  max-width: 75vw;
+  transform: translate(-50%, -50%);
+}
+.adm-modal-main {
+  width: 100%;
+  max-height: 70vh;
+  box-sizing: border-box;
+  font-size: 14px;
+  background-color: white;
+  border-radius: 8px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+.adm-modal-main > * {
+  flex: none;
+}
+.adm-modal-main > .adm-modal-image-container {
+  flex: auto;
+}
+.adm-modal-main .adm-modal-body {
+  padding: 20px 12px 12px;
+  display: flex;
+  flex-direction: column;
+}
+.adm-modal-main .adm-modal-body > * + * {
+  margin-top: 8px;
+}
+.adm-modal-main .adm-modal-body-header-wrapper {
+  display: flex;
+  justify-content: center;
+}
+.adm-modal-main .adm-modal-body-title {
+  font-weight: bold;
+  font-size: 18px;
+  line-height: 25px;
+  text-align: center;
+}
+.adm-modal-main .adm-modal-body-content {
+  font-size: 15px;
+  line-height: 1.4;
+  color: #333;
+}
+.adm-modal-main .adm-modal-close {
+  position: absolute;
+  right: 8px;
+  top: 8px;
+  color: var(--adm-color-weak);
+  padding: 4px;
+  font-size: 18px;
+}
+.adm-modal-footer {
+  user-select: none;
+  padding: 8px 12px 12px;
+}
+.adm-modal-footer.adm-space {
+  --gap-vertical: 20px;
+}
+.adm-modal-footer .adm-modal-button {
+  font-size: 18px;
+  line-height: 25px;
+}
+.adm-modal-footer .adm-modal-button:not(.adm-modal-button-primary) {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+.adm-modal-footer .adm-modal-button:not(.adm-modal-button-primary)::before {
+  display: none;
+}
+.adm-modal-footer .adm-modal-button:not(.adm-modal-button-primary):active {
+  opacity: 0.7;
+}
+.adm-modal-image-container {
+  overflow-y: auto;
+}

package/es/components/modal/modal.d.ts

@@ -0,0 +1,27 @@
+import React, { FC, ReactNode } from 'react';
+import { Action } from './modal-action-button';
+import { GetContainer } from '../../utils/render-to-container';
+import { PropagationEvent } from '../../utils/with-stop-propagation';
+import { NativeProps } from '../../utils/native-props';
+export declare type ModalProps = {
+    afterClose?: () => void;
+    afterShow?: () => void;
+    image?: string;
+    header?: ReactNode;
+    title?: ReactNode;
+    content?: ReactNode;
+    actions?: Action[];
+    onAction?: (action: Action, index: number) => void | Promise<void>;
+    closeOnAction?: boolean;
+    onClose?: () => void;
+    closeOnMaskClick?: boolean;
+    visible?: boolean;
+    getContainer?: GetContainer;
+    bodyStyle?: React.CSSProperties;
+    bodyClassName?: string;
+    maskStyle?: React.CSSProperties;
+    maskClassName?: string;
+    stopPropagation?: PropagationEvent[];
+    showCloseButton?: boolean;
+} & NativeProps;
+export declare const Modal: FC<ModalProps>;

package/es/components/modal/modal.js

@@ -0,0 +1,114 @@
+import { __awaiter } from "tslib";
+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 { ModalActionButton } from './modal-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';
+import { CloseOutline } from 'antd-mobile-icons';
+const classPrefix = `adm-modal`;
+const defaultProps = {
+  visible: false,
+  actions: [],
+  closeOnAction: false,
+  closeOnMaskClick: false,
+  stopPropagation: ['click'],
+  showCloseButton: false,
+  getContainer: null
+};
+export const Modal = p => {
+  const props = mergeProps(defaultProps, p);
+  const unmountedRef = useUnmountedRef();
+  const style = useSpring({
+    scale: props.visible ? 1 : 0.8,
+    opacity: props.visible ? 1 : 0,
+    config: {
+      mass: 1,
+      tension: 200,
+      friction: 30,
+      clamp: true
+    },
+    onStart: () => {
+      setActive(true);
+    },
+    onRest: () => {
+      var _a, _b;
+
+      if (unmountedRef.current) return;
+      setActive(props.visible);
+
+      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);
+      }
+    }
+  });
+  const [active, setActive] = useState(props.visible);
+  const node = withStopPropagation(props.stopPropagation, withNativeProps(props, React.createElement("div", {
+    className: classPrefix,
+    style: {
+      display: active ? 'unset' : 'none'
+    }
+  }, React.createElement(Mask, {
+    visible: props.visible,
+    onMaskClick: props.closeOnMaskClick ? props.onClose : undefined,
+    style: props.maskStyle,
+    className: classNames(`${classPrefix}-mask`, props.maskClassName)
+  }), React.createElement("div", {
+    className: `${classPrefix}-wrap`,
+    style: {
+      pointerEvents: props.visible ? 'unset' : 'none'
+    }
+  }, React.createElement(animated.div, {
+    style: Object.assign({}, style),
+    onClick: e => e.stopPropagation(),
+    className: `${classPrefix}-main`
+  }, props.showCloseButton && React.createElement("a", {
+    className: classNames(`${classPrefix}-close`, 'adm-plain-anchor'),
+    onClick: props.onClose
+  }, React.createElement(CloseOutline, null)), !!props.image && React.createElement("div", {
+    className: `${classPrefix}-image-container`
+  }, React.createElement(Image, {
+    src: props.image,
+    alt: 'modal header image',
+    width: '100%'
+  })), React.createElement("div", {
+    style: props.bodyStyle,
+    className: classNames(`${classPrefix}-body`, props.bodyClassName)
+  }, !!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(Space, {
+    direction: 'vertical',
+    block: true,
+    className: `${classPrefix}-footer`
+  }, props.actions.map((action, index) => {
+    return React.createElement(ModalActionButton, {
+      key: action.key,
+      action: action,
+      onAction: () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b, _c;
+
+        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)]);
+
+        if (props.closeOnAction) {
+          (_c = props.onClose) === null || _c === void 0 ? void 0 : _c.call(props);
+        }
+      })
+    });
+  })))))));
+  return renderToContainer(props.getContainer, node);
+};

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

@@ -0,0 +1,8 @@
+import { ModalProps } from './modal';
+export declare type ModalShowProps = Omit<ModalProps, 'visible'>;
+export declare type ModalShowRef = {
+    close: () => void;
+};
+export declare function show(props: ModalShowProps): {
+    close: () => void;
+};

package/es/components/modal/show.js

@@ -0,0 +1,43 @@
+import React, { createRef, forwardRef, useEffect, useImperativeHandle, useState } from 'react';
+import { renderToBody } from '../../utils/render-to-body';
+import { Modal } from './modal';
+export function show(props) {
+  const Wrapper = forwardRef((_, ref) => {
+    const [visible, setVisible] = useState(false);
+    useEffect(() => {
+      setVisible(true);
+    }, []);
+
+    function handleClose() {
+      var _a;
+
+      (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
+      setVisible(false);
+    }
+
+    useImperativeHandle(ref, () => ({
+      close: handleClose
+    }));
+    return React.createElement(Modal, Object.assign({}, props, {
+      visible: visible,
+      onClose: handleClose,
+      afterClose: () => {
+        var _a;
+
+        (_a = props.afterClose) === null || _a === void 0 ? void 0 : _a.call(props);
+        unmount();
+      }
+    }));
+  });
+  const ref = createRef();
+  const unmount = renderToBody(React.createElement(Wrapper, {
+    ref: ref
+  }));
+  return {
+    close: () => {
+      var _a;
+
+      (_a = ref.current) === null || _a === void 0 ? void 0 : _a.close();
+    }
+  };
+}

package/es/components/nav-bar/nav-bar.css

@@ -21,13 +21,13 @@
 .adm-nav-bar-back {
   display: flex;
   align-items: center;
-  margin-right: 12px;
+  margin-right: 16px;
   padding: 6px 0;
   cursor: pointer;
 }
 .adm-nav-bar-back-arrow {
-  font-size: 18px;
-  margin-right: 6px;
+  font-size: 24px;
+  margin-right: 4px;
 }
 .adm-nav-bar-left {
   font-size: 15px;

package/es/components/nav-bar/nav-bar.js

@@ -3,30 +3,32 @@ import classNames from 'classnames';
 import { LeftOutline } from 'antd-mobile-icons';
 import { withNativeProps } from '../../utils/native-props';
 import { mergeProps } from '../../utils/with-default-props';
-var classPrefix = "adm-nav-bar";
-var defaultProps = {
+const classPrefix = `adm-nav-bar`;
+const defaultProps = {
   back: '',
   backArrow: true
 };
-export var NavBar = function NavBar(p) {
-  var props = mergeProps(defaultProps, p);
-  var back = props.back,
-      backArrow = props.backArrow;
-  return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
+export const NavBar = p => {
+  const props = mergeProps(defaultProps, p);
+  const {
+    back,
+    backArrow
+  } = props;
+  return withNativeProps(props, React.createElement("div", {
     className: classNames(classPrefix)
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-left",
+  }, React.createElement("div", {
+    className: `${classPrefix}-left`,
     role: 'button'
-  }, back !== null && /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-back",
+  }, back !== null && React.createElement("div", {
+    className: `${classPrefix}-back`,
     onClick: props.onBack
-  }, backArrow && /*#__PURE__*/React.createElement("span", {
-    className: classPrefix + "-back-arrow"
-  }, backArrow === true ? /*#__PURE__*/React.createElement(LeftOutline, null) : backArrow), /*#__PURE__*/React.createElement("span", {
+  }, backArrow && React.createElement("span", {
+    className: `${classPrefix}-back-arrow`
+  }, backArrow === true ? React.createElement(LeftOutline, null) : backArrow), React.createElement("span", {
     "aria-hidden": 'true'
-  }, back)), props.left), /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-title"
-  }, props.children), /*#__PURE__*/React.createElement("div", {
-    className: classPrefix + "-right"
+  }, back)), props.left), React.createElement("div", {
+    className: `${classPrefix}-title`
+  }, props.children), React.createElement("div", {
+    className: `${classPrefix}-right`
   }, props.right)));
 };

package/es/components/notice-bar/notice-bar.css

@@ -1,14 +1,18 @@
 .adm-notice-bar {
-  height: 30px;
-  font-size: 14px;
-  line-height: 30px;
+  --background-color: #ababab;
+  --border-color: #999999;
+  --text-color: #ffffff;
+  --font-size: 15px;
+  --icon-font-size: 18px;
+  --height: 38px;
+  height: var(--height);
+  box-sizing: border-box;
+  font-size: var(--font-size);
+  line-height: var(--height);
   padding: 0 12px;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  --background-color: #b2b2b2;
-  --border-color: #a0a0a0;
-  --text-color: #ffffff;
   border: solid 1px var(--border-color);
   border-left: none;
   border-right: none;
@@ -33,9 +37,11 @@
   --border-color: #bcd8ff;
   --text-color: #1677ff;
 }
-.adm-notice-bar .adm-notice-bar-left:not(:empty) {
+.adm-notice-bar .adm-notice-bar-left {
   flex-shrink: 0;
   margin-right: 8px;
+  font-size: var(--icon-font-size);
+  line-height: var(--height);
 }
 .adm-notice-bar .adm-notice-bar-content {
   flex: 1;
@@ -46,13 +52,15 @@
   align-items: center;
 }
 .adm-notice-bar .adm-notice-bar-content .adm-notice-bar-content-inner {
-  width: fit-content;
+  width: auto;
   transition-timing-function: linear;
   position: absolute;
-  padding: 0 4px;
   white-space: nowrap;
 }
 .adm-notice-bar .adm-notice-bar-right {
   flex-shrink: 0;
   margin-left: 12px;
 }
+.adm-notice-bar-close-icon {
+  font-size: 18px;
+}

package/es/components/notice-bar/notice-bar.d.ts

@@ -17,5 +17,5 @@ export declare type NoticeBarProps = {
     extra?: React.ReactNode;
     /** 左侧广播图标 */
     icon?: React.ReactNode;
-} & NativeProps<'--background-color' | '--border-color' | '--text-color'>;
+} & NativeProps<'--background-color' | '--border-color' | '--text-color' | '--font-size' | '--icon-font-size' | '--height'>;
 export declare const NoticeBar: React.NamedExoticComponent<NoticeBarProps>;

package/es/components/notice-bar/notice-bar.js

@@ -6,29 +6,26 @@ import { mergeProps } from '../../utils/with-default-props';
 import { withNativeProps } from '../../utils/native-props';
 import { useResizeEffect } from '../../utils/use-resize-effect';
 import { useMutationEffect } from '../../utils/use-mutation-effect';
-var classPrefix = "adm-notice-bar";
-var defaultProps = {
+const classPrefix = `adm-notice-bar`;
+const defaultProps = {
   color: 'default',
   delay: 2000,
-  speed: 50
+  speed: 50,
+  icon: React.createElement(SoundOutline, null)
 };
-export var NoticeBar = /*#__PURE__*/memo(function (p) {
-  var props = mergeProps(defaultProps, p);
-  var containerRef = useRef(null);
-  var textRef = useRef(null);
-
-  var _useState = useState(true),
-      visible = _useState[0],
-      setVisible = _useState[1];
-
-  var speed = props.speed;
-  var delayLockRef = useRef(true);
-  var animatingRef = useRef(false);
+export const NoticeBar = memo(p => {
+  const props = mergeProps(defaultProps, p);
+  const containerRef = useRef(null);
+  const textRef = useRef(null);
+  const [visible, setVisible] = useState(true);
+  const speed = props.speed;
+  const delayLockRef = useRef(true);
+  const animatingRef = useRef(false);
 
   function start() {
     if (delayLockRef.current) return;
-    var container = containerRef.current;
-    var text = textRef.current;
+    const container = containerRef.current;
+    const text = textRef.current;
     if (!container || !text) return;
 
     if (container.offsetWidth >= text.offsetWidth) {
@@ -39,29 +36,29 @@ export var NoticeBar = /*#__PURE__*/memo(function (p) {
     }
 
     if (animatingRef.current) return;
-    var initial = !text.style.transform;
+    const initial = !text.style.transform;
     text.style.transitionDuration = '0s';
 
     if (initial) {
       text.style.transform = 'translateX(0)';
     } else {
-      text.style.transform = "translateX(" + container.offsetWidth + "px)";
+      text.style.transform = `translateX(${container.offsetWidth}px)`;
     }
 
-    var distance = initial ? text.offsetWidth : container.offsetWidth + text.offsetWidth;
+    const distance = initial ? text.offsetWidth : container.offsetWidth + text.offsetWidth;
     animatingRef.current = true;
-    text.style.transitionDuration = Math.round(distance / speed) + "s";
-    text.style.transform = "translateX(-" + text.offsetWidth + "px)";
+    text.style.transitionDuration = `${Math.round(distance / speed)}s`;
+    text.style.transform = `translateX(-${text.offsetWidth}px)`;
   }
 
-  useTimeout(function () {
+  useTimeout(() => {
     delayLockRef.current = false;
     start();
   }, props.delay);
-  useResizeEffect(function (text) {
+  useResizeEffect(text => {
     start();
   }, containerRef);
-  useMutationEffect(function () {
+  useMutationEffect(() => {
     start();
   }, textRef, {
     subtree: true,
@@ -69,24 +66,25 @@ export var NoticeBar = /*#__PURE__*/memo(function (p) {
     characterData: true
   });
   if (!visible) return null;
-  return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
-    className: classNames(classPrefix, classPrefix + "-" + props.color)
-  }, /*#__PURE__*/React.createElement("span", {
-    className: classPrefix + "-left"
-  }, 'icon' in props ? props.icon : /*#__PURE__*/React.createElement(SoundOutline, null)), /*#__PURE__*/React.createElement("span", {
+  return withNativeProps(props, React.createElement("div", {
+    className: classNames(classPrefix, `${classPrefix}-${props.color}`)
+  }, props.icon && React.createElement("span", {
+    className: `${classPrefix}-left`
+  }, props.icon), React.createElement("span", {
     ref: containerRef,
-    className: classPrefix + "-content"
-  }, /*#__PURE__*/React.createElement("span", {
-    onTransitionEnd: function onTransitionEnd() {
+    className: `${classPrefix}-content`
+  }, React.createElement("span", {
+    onTransitionEnd: () => {
       animatingRef.current = false;
       start();
     },
     ref: textRef,
-    className: classPrefix + "-content-inner"
-  }, props.content)), (props.closeable || props.extra) && /*#__PURE__*/React.createElement("span", {
-    className: classPrefix + "-right"
-  }, props.extra, props.closeable && /*#__PURE__*/React.createElement(CloseOutline, {
-    onClick: function onClick() {
+    className: `${classPrefix}-content-inner`
+  }, props.content)), (props.closeable || props.extra) && React.createElement("span", {
+    className: `${classPrefix}-right`
+  }, props.extra, props.closeable && React.createElement(CloseOutline, {
+    className: `${classPrefix}-close-icon`,
+    onClick: () => {
       var _a;
 
       setVisible(false);

package/es/components/number-keyboard/number-keyboard.css

@@ -3,8 +3,7 @@
   flex-wrap: wrap;
   flex: 1;
 }
-.adm-number-keyboard.confirmed-style {
-  width: 75%;
+.adm-number-keyboard-main.confirmed-style .sign-key {
   background-color: var(--adm-color-white);
 }
 .adm-number-keyboard-popup.adm-popup {
@@ -105,6 +104,7 @@
   color: var(--adm-color-white);
   height: 144px;
   font-size: 16px;
+  border: none;
 }
 .adm-number-keyboard-bs-key {
   height: 20px;