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

package/2x/cjs/components/loading/loading.js

@@ -7,11 +7,9 @@ exports.Loading = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
-
 var _withDefaultProps = require("../../utils/with-default-props");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _nativeProps = require("../../utils/native-props");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -24,25 +22,54 @@ var colorRecord = {
   white: 'var(--adm-color-white)'
 };
 var defaultProps = {
-  size: 'middle',
   color: 'default'
 };
 var Loading = /*#__PURE__*/(0, _react.memo)(function (p) {
   var _a;
 
   var props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
-  var style = {
-    '--color': (_a = colorRecord[props.color]) !== null && _a !== void 0 ? _a : props.color
-  };
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    style: style,
-    className: (0, _classnames["default"])(classPrefix, classPrefix + "-" + props.size)
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: classPrefix + "-dot"
-  }), /*#__PURE__*/_react["default"].createElement("div", {
-    className: classPrefix + "-dot"
-  }), /*#__PURE__*/_react["default"].createElement("div", {
-    className: classPrefix + "-dot"
-  }));
+  return (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      color: (_a = colorRecord[props.color]) !== null && _a !== void 0 ? _a : props.color
+    },
+    className: classPrefix
+  }, /*#__PURE__*/_react["default"].createElement("svg", {
+    height: '1em',
+    viewBox: '0 0 100 40',
+    style: {
+      verticalAlign: '-0.125em'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("g", {
+    stroke: 'none',
+    strokeWidth: '1',
+    fill: 'none',
+    fillRule: 'evenodd'
+  }, /*#__PURE__*/_react["default"].createElement("g", {
+    transform: 'translate(-100.000000, -71.000000)'
+  }, /*#__PURE__*/_react["default"].createElement("g", {
+    transform: 'translate(95.000000, 71.000000)'
+  }, /*#__PURE__*/_react["default"].createElement("g", {
+    transform: 'translate(5.000000, 0.000000)'
+  }, [0, 1, 2].map(function (i) {
+    return /*#__PURE__*/_react["default"].createElement("rect", {
+      key: i,
+      fill: 'currentColor',
+      x: 20 + i * 26,
+      y: '16',
+      width: '8',
+      height: '8',
+      rx: '2'
+    }, /*#__PURE__*/_react["default"].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'
+    }));
+  }))))))));
 });
 exports.Loading = Loading;

package/2x/cjs/components/mask/mask.css

@@ -1,32 +1,23 @@
 .adm-mask {
+  --z-index: var(--adm-mask-z-index, 1000);
   position: fixed;
   top: 0;
   left: 0;
-  z-index: var(--adm-z-index-mask);
+  z-index: var(--z-index);
   display: block;
   width: 100%;
   height: 100%;
 }
 
-.adm-mask-hidden {
-  display: none;
-}
-
-.adm-mask-enter {
-  opacity: 0;
-}
-
-.adm-mask-enter-active {
-  opacity: 1;
-  transition: opacity 200ms ease-out;
-}
-
-.adm-mask-exit {
-  display: block;
-  opacity: 1;
+.adm-mask-aria-button {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 0;
+  width: 100%;
+  height: 100%;
 }
 
-.adm-mask-exit-active {
-  opacity: 0;
-  transition: opacity 200ms ease-in;
+.adm-mask-content {
+  z-index: 1;
 }

package/2x/cjs/components/mask/mask.d.ts

@@ -1,13 +1,18 @@
 import { NativeProps } from '../../utils/native-props';
 import React from 'react';
+import { GetContainer } from '../../utils/render-to-container';
+import { PropagationEvent } from '../../utils/with-stop-propagation';
 export declare type MaskProps = {
     visible?: boolean;
     onMaskClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
     destroyOnClose?: boolean;
     forceRender?: boolean;
     disableBodyScroll?: boolean;
-    opacity?: 'default' | 'dark' | number;
-    getContainer?: HTMLElement | (() => HTMLElement) | undefined;
+    color?: 'black' | 'white';
+    opacity?: 'default' | 'thin' | 'thick' | number;
+    getContainer?: GetContainer;
+    afterShow?: () => void;
     afterClose?: () => void;
-} & NativeProps;
+    stopPropagation?: PropagationEvent[];
+} & NativeProps<'--z-index'>;
 export declare const Mask: React.FC<MaskProps>;

package/2x/cjs/components/mask/mask.js

@@ -5,72 +5,114 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Mask = void 0;
 
-var _useInitialized = require("../../utils/use-initialized");
-
-var _classnames = _interopRequireDefault(require("classnames"));
+var _nativeProps = require("../../utils/native-props");
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _reactDom = require("react-dom");
-
-var _reactTransitionGroup = require("react-transition-group");
+var _ahooks = require("ahooks");
 
 var _useLockScroll = require("../../utils/use-lock-scroll");
 
+var _web = require("@react-spring/web");
+
+var _renderToContainer = require("../../utils/render-to-container");
+
+var _withDefaultProps = require("../../utils/with-default-props");
+
+var _configProvider = require("../config-provider");
+
+var _useShouldRender = require("../../utils/use-should-render");
+
+var _withStopPropagation = require("../../utils/with-stop-propagation");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 var classPrefix = "adm-mask";
+var opacityRecord = {
+  "default": 0.55,
+  thin: 0.35,
+  thick: 0.75
+};
+var defaultProps = {
+  visible: true,
+  destroyOnClose: false,
+  forceRender: false,
+  color: 'black',
+  opacity: 'default',
+  disableBodyScroll: true,
+  getContainer: null,
+  stopPropagation: ['click']
+};
 
-var Mask = function Mask(props) {
-  var _classNames;
+var Mask = function Mask(p) {
+  var props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
 
-  var cls = (0, _classnames["default"])(classPrefix, props.className, (_classNames = {}, _classNames[classPrefix + "-hidden"] = !props.visible, _classNames));
-  var initialized = (0, _useInitialized.useInitialized)(props.visible || props.forceRender);
-  var ref = (0, _react.useRef)(null);
-  (0, _useLockScroll.useLockScroll)(ref, !!(props.visible && props.disableBodyScroll));
+  var _useConfig = (0, _configProvider.useConfig)(),
+      locale = _useConfig.locale;
 
-  function handleClick(e) {
+  var ref = (0, _react.useRef)(null);
+  (0, _useLockScroll.useLockScroll)(ref, props.visible && props.disableBodyScroll);
+  var background = (0, _react.useMemo)(function () {
     var _a;
 
-    if (e.currentTarget === e.target) {
-      (_a = props.onMaskClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+    var opacity = (_a = opacityRecord[props.opacity]) !== null && _a !== void 0 ? _a : props.opacity;
+    var rgb = props.color === 'white' ? '255, 255, 255' : '0, 0, 0';
+    return "rgba(" + rgb + ", " + opacity + ")";
+  }, [props.color, props.opacity]);
+
+  var _useState = (0, _react.useState)(props.visible),
+      active = _useState[0],
+      setActive = _useState[1];
+
+  var unmountedRef = (0, _ahooks.useUnmountedRef)();
+
+  var _useSpring = (0, _web.useSpring)({
+    opacity: props.visible ? 1 : 0,
+    config: {
+      precision: 0.01,
+      mass: 1,
+      tension: 200,
+      friction: 30,
+      clamp: true
+    },
+    onStart: function onStart() {
+      setActive(true);
+    },
+    onRest: function 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);
+      }
     }
-  }
-
-  var opacity = props.opacity === 'default' ? 0.55 : props.opacity === 'dark' ? 0.75 : props.opacity;
-
-  var node = /*#__PURE__*/_react["default"].createElement(_reactTransitionGroup.CSSTransition, {
-    "in": props.visible,
-    timeout: 200,
-    classNames: classPrefix,
-    onExited: props.afterClose,
-    unmountOnExit: props.destroyOnClose
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: cls,
-    onClick: handleClick,
+  }),
+      opacity = _useSpring.opacity;
+
+  var shouldRender = (0, _useShouldRender.useShouldRender)(active, props.forceRender, props.destroyOnClose);
+  var node = (0, _withStopPropagation.withStopPropagation)(props.stopPropagation, (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement(_web.animated.div, {
+    className: classPrefix,
     ref: ref,
     style: Object.assign(Object.assign({}, props.style), {
-      backgroundColor: "rgba(0, 0, 0, " + opacity + ")"
+      background: background,
+      opacity: opacity,
+      display: active ? 'unset' : 'none'
     })
-  }, initialized && props.children));
-
-  if (props.getContainer) {
-    var container = typeof props.getContainer === 'function' ? props.getContainer() : props.getContainer;
-    return /*#__PURE__*/(0, _reactDom.createPortal)(node, container);
-  }
-
-  return node;
+  }, props.onMaskClick && /*#__PURE__*/_react["default"].createElement("div", {
+    className: classPrefix + "-aria-button",
+    role: 'button',
+    "aria-label": locale.Mask.name,
+    onClick: props.onMaskClick
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: classPrefix + "-content"
+  }, shouldRender && props.children))));
+  return (0, _renderToContainer.renderToContainer)(props.getContainer, node);
 };
 
-exports.Mask = Mask;
-Mask.defaultProps = {
-  visible: true,
-  destroyOnClose: false,
-  forceRender: false,
-  opacity: 'default',
-  disableBodyScroll: true
-};
+exports.Mask = Mask;

package/2x/cjs/components/nav-bar/index.d.ts

@@ -0,0 +1,4 @@
+import './nav-bar.less';
+import { NavBar } from './nav-bar';
+export type { NavBarProps } from './nav-bar';
+export default NavBar;

package/2x/cjs/components/nav-bar/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+require("./nav-bar.css");
+
+var _navBar2 = require("./nav-bar");
+
+var _default = _navBar2.NavBar;
+exports["default"] = _default;

package/2x/cjs/components/nav-bar/nav-bar.css

@@ -0,0 +1,53 @@
+.adm-nav-bar {
+  --height: 90px;
+  --border-bottom: none;
+  display: flex;
+  align-items: center;
+  height: var(--height);
+  border-bottom: var(--border-bottom);
+  padding: 0 24px;
+  white-space: nowrap;
+}
+
+.adm-nav-bar-left,
+.adm-nav-bar-right {
+  flex: 1;
+}
+
+.adm-nav-bar-title {
+  flex: auto;
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.adm-nav-bar-back {
+  display: flex;
+  align-items: center;
+  margin-right: 24px;
+  padding: 12px 0;
+  cursor: pointer;
+}
+
+.adm-nav-bar-back-arrow {
+  font-size: 36px;
+  margin-right: 12px;
+}
+
+.adm-nav-bar-left {
+  font-size: 30px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.adm-nav-bar-title {
+  justify-content: center;
+  white-space: nowrap;
+  font-size: 36px;
+  padding: 0 24px;
+}
+
+.adm-nav-bar-right {
+  text-align: right;
+}

package/2x/cjs/components/nav-bar/nav-bar.d.ts

@@ -0,0 +1,10 @@
+import { FC, ReactNode } from 'react';
+import { NativeProps } from '../../utils/native-props';
+export declare type NavBarProps = {
+    back?: string | null;
+    backArrow?: boolean | ReactNode;
+    left?: ReactNode;
+    right?: ReactNode;
+    onBack?: () => void;
+} & NativeProps<'--height' | '--border-bottom'>;
+export declare const NavBar: FC<NavBarProps>;

package/2x/cjs/components/nav-bar/nav-bar.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NavBar = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _antdMobileIcons = require("antd-mobile-icons");
+
+var _nativeProps = require("../../utils/native-props");
+
+var _withDefaultProps = require("../../utils/with-default-props");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var classPrefix = "adm-nav-bar";
+var defaultProps = {
+  back: '',
+  backArrow: true
+};
+
+var NavBar = function NavBar(p) {
+  var props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
+  var back = props.back,
+      backArrow = props.backArrow;
+  return (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])(classPrefix)
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: classPrefix + "-left",
+    role: 'button'
+  }, back !== null && /*#__PURE__*/_react["default"].createElement("div", {
+    className: classPrefix + "-back",
+    onClick: props.onBack
+  }, backArrow && /*#__PURE__*/_react["default"].createElement("span", {
+    className: classPrefix + "-back-arrow"
+  }, backArrow === true ? /*#__PURE__*/_react["default"].createElement(_antdMobileIcons.LeftOutline, null) : backArrow), /*#__PURE__*/_react["default"].createElement("span", {
+    "aria-hidden": 'true'
+  }, back)), props.left), /*#__PURE__*/_react["default"].createElement("div", {
+    className: classPrefix + "-title"
+  }, props.children), /*#__PURE__*/_react["default"].createElement("div", {
+    className: classPrefix + "-right"
+  }, props.right)));
+};
+
+exports.NavBar = NavBar;

package/2x/cjs/components/notice-bar/notice-bar.js

@@ -9,7 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _icons = require("@ant-design/icons");
+var _antdMobileIcons = require("antd-mobile-icons");
 
 var _ahooks = require("ahooks");
 
@@ -17,6 +17,10 @@ var _withDefaultProps = require("../../utils/with-default-props");
 
 var _nativeProps = require("../../utils/native-props");
 
+var _useResizeEffect = require("../../utils/use-resize-effect");
+
+var _useMutationEffect = require("../../utils/use-mutation-effect");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -34,62 +38,75 @@ var NoticeBar = /*#__PURE__*/(0, _react.memo)(function (p) {
   var containerRef = (0, _react.useRef)(null);
   var textRef = (0, _react.useRef)(null);
 
-  var _useState = (0, _react.useState)(0),
-      key = _useState[0],
-      setKey = _useState[1];
-
-  var _useState2 = (0, _react.useState)(true),
-      visible = _useState2[0],
-      setVisible = _useState2[1];
+  var _useState = (0, _react.useState)(true),
+      visible = _useState[0],
+      setVisible = _useState[1];
 
   var speed = props.speed;
-  (0, _react.useLayoutEffect)(function () {
-    var container = containerRef.current;
-    var text = textRef.current;
-    if (!container || !text) return;
-    if (container.offsetWidth >= text.offsetWidth) return; // 需要滚动
-
-    var timeout = window.setTimeout(function () {
-      var text = textRef.current; // 开始滚动
-
-      if (text) {
-        text.style.transitionDuration = Math.round(text.offsetWidth / speed) + "s";
-        text.style.transform = "translateX(-" + text.offsetWidth + "px)";
-      }
-    }, props.delay);
-    return function () {
-      window.clearTimeout(timeout);
-    };
-  }, []);
-  (0, _ahooks.useUpdateLayoutEffect)(function () {
+  var delayLockRef = (0, _react.useRef)(true);
+  var animatingRef = (0, _react.useRef)(false);
+
+  function start() {
+    if (delayLockRef.current) return;
     var container = containerRef.current;
     var text = textRef.current;
     if (!container || !text) return;
-    if (container.offsetWidth >= text.offsetWidth) return;
-    text.style.transform = "translateX(" + container.offsetWidth + "px)";
-    text.style.transitionDuration = Math.round((container.offsetWidth + text.offsetWidth) / speed) + "s";
+
+    if (container.offsetWidth >= text.offsetWidth) {
+      animatingRef.current = false;
+      text.style.removeProperty('transition-duration');
+      text.style.removeProperty('transform');
+      return;
+    }
+
+    if (animatingRef.current) return;
+    var initial = !text.style.transform;
+    text.style.transitionDuration = '0s';
+
+    if (initial) {
+      text.style.transform = 'translateX(0)';
+    } else {
+      text.style.transform = "translateX(" + container.offsetWidth + "px)";
+    }
+
+    var 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)";
-  }, [key]);
+  }
+
+  (0, _ahooks.useTimeout)(function () {
+    delayLockRef.current = false;
+    start();
+  }, props.delay);
+  (0, _useResizeEffect.useResizeEffect)(function (text) {
+    start();
+  }, containerRef);
+  (0, _useMutationEffect.useMutationEffect)(function () {
+    start();
+  }, textRef, {
+    subtree: true,
+    childList: true,
+    characterData: true
+  });
   if (!visible) return null;
   return (0, _nativeProps.withNativeProps)(props, /*#__PURE__*/_react["default"].createElement("div", {
     className: (0, _classnames["default"])(classPrefix, classPrefix + "-" + props.color)
   }, /*#__PURE__*/_react["default"].createElement("span", {
     className: classPrefix + "-left"
-  }, 'icon' in props ? props.icon : /*#__PURE__*/_react["default"].createElement(_icons.SoundOutlined, null)), /*#__PURE__*/_react["default"].createElement("span", {
+  }, 'icon' in props ? props.icon : /*#__PURE__*/_react["default"].createElement(_antdMobileIcons.SoundOutline, null)), /*#__PURE__*/_react["default"].createElement("span", {
     ref: containerRef,
     className: classPrefix + "-content"
   }, /*#__PURE__*/_react["default"].createElement("span", {
     onTransitionEnd: function onTransitionEnd() {
-      return setKey(function (k) {
-        return k + 1;
-      });
+      animatingRef.current = false;
+      start();
     },
-    key: key,
     ref: textRef,
     className: classPrefix + "-content-inner"
   }, props.content)), (props.closeable || props.extra) && /*#__PURE__*/_react["default"].createElement("span", {
     className: classPrefix + "-right"
-  }, props.extra, props.closeable && /*#__PURE__*/_react["default"].createElement(_icons.CloseOutlined, {
+  }, props.extra, props.closeable && /*#__PURE__*/_react["default"].createElement(_antdMobileIcons.CloseOutline, {
     onClick: function onClick() {
       var _a;
 

package/2x/cjs/components/number-keyboard/index.d.ts

@@ -0,0 +1,4 @@
+import './number-keyboard.less';
+import { NumberKeyboard } from './number-keyboard';
+export type { NumberKeyboardProps } from './number-keyboard';
+export default NumberKeyboard;

package/2x/cjs/components/number-keyboard/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+require("./number-keyboard.css");
+
+var _numberKeyboard2 = require("./number-keyboard");
+
+var _default = _numberKeyboard2.NumberKeyboard;
+exports["default"] = _default;