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

package/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/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/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/cjs/components/nav-bar/nav-bar.css

@@ -0,0 +1,46 @@
+.adm-nav-bar {
+  --height: 45px;
+  --border-bottom: none;
+  display: flex;
+  align-items: center;
+  height: var(--height);
+  border-bottom: var(--border-bottom);
+  padding: 0 12px;
+  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: 12px;
+  padding: 6px 0;
+  cursor: pointer;
+}
+.adm-nav-bar-back-arrow {
+  font-size: 18px;
+  margin-right: 6px;
+}
+.adm-nav-bar-left {
+  font-size: 15px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+.adm-nav-bar-title {
+  justify-content: center;
+  white-space: nowrap;
+  font-size: 18px;
+  padding: 0 12px;
+}
+.adm-nav-bar-right {
+  text-align: right;
+}

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

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

@@ -0,0 +1,111 @@
+.adm-number-keyboard-main {
+  display: flex;
+  flex-wrap: wrap;
+  flex: 1;
+}
+.adm-number-keyboard.confirmed-style {
+  width: 75%;
+  background-color: var(--adm-color-white);
+}
+.adm-number-keyboard-popup.adm-popup {
+  width: 100%;
+  user-select: none;
+  z-index: 1050;
+}
+.adm-number-keyboard-popup.adm-popup .adm-popup-body {
+  background-color: #f5f5f5;
+}
+.adm-number-keyboard-wrapper {
+  display: flex;
+}
+.adm-number-keyboard-header {
+  height: 34px;
+  line-height: 34px;
+  border-top: solid 1px #f5f5f5;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0 12px;
+  color: var(--adm-color-weak);
+  background-color: var(--adm-color-white);
+}
+.adm-number-keyboard-header-close-button {
+  padding: 0 12px;
+  font-size: 16px;
+}
+.adm-number-keyboard-header.with-title {
+  justify-content: space-between;
+}
+.adm-number-keyboard-header.with-title .adm-number-keyboard-header-close-button {
+  padding-right: 0;
+}
+.adm-number-keyboard-footer {
+  background: var(--adm-color-white);
+}
+.adm-number-keyboard-title {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.adm-number-keyboard-confirm {
+  width: 25%;
+}
+.adm-number-keyboard-key {
+  flex: 1 33.33%;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 48px;
+  font-size: 22px;
+  box-sizing: border-box;
+  border: solid 1px #f5f5f5;
+  border-bottom: none;
+  border-left: none;
+}
+.adm-number-keyboard-key:nth-child(3n),
+.adm-number-keyboard-key:last-child {
+  border-right: none;
+}
+.adm-number-keyboard-key::before {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 100%;
+  height: 100%;
+  background-color: #000;
+  border: inherit;
+  border-color: #000;
+  border-radius: inherit;
+  transform: translate(-50%, -50%);
+  opacity: 0;
+  content: ' ';
+  box-sizing: content-box;
+}
+.adm-number-keyboard-key.mid-key {
+  flex-basis: 66.67%;
+}
+.adm-number-keyboard-key.sign-key:active::before {
+  opacity: 0.1;
+}
+.adm-number-keyboard-key.extra-key {
+  border-left: solid 1px #f5f5f5;
+  border-right: none;
+}
+.adm-number-keyboard-key.extra-key,
+.adm-number-keyboard-key.number-key {
+  background-color: var(--adm-color-white);
+}
+.adm-number-keyboard-key.extra-key:active::before,
+.adm-number-keyboard-key.number-key:active::before {
+  opacity: 0.1;
+}
+.adm-number-keyboard-key.ok-key {
+  background-color: var(--adm-color-primary);
+  color: var(--adm-color-white);
+  height: 144px;
+  font-size: 16px;
+}
+.adm-number-keyboard-bs-key {
+  height: 20px;
+}

package/cjs/components/number-keyboard/number-keyboard.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { PopupProps } from '../popup';
+import { GetContainer } from '../../utils/render-to-container';
+import { NativeProps } from '../../utils/native-props';
+export declare type NumberKeyboardProps = {
+    visible?: boolean;
+    title?: string;
+    getContainer?: GetContainer;
+    confirmText?: string | null;
+    customKey?: '-' | '.' | 'X';
+    randomOrder?: boolean;
+    showCloseButton?: boolean;
+    onInput?: (v: string) => void;
+    onDelete?: () => void;
+    onClose?: () => void;
+    onConfirm?: () => void;
+    afterShow?: () => void;
+    afterClose?: () => void;
+    closeOnConfirm?: boolean;
+    safeArea?: boolean;
+} & Pick<PopupProps, 'stopPropagation'> & NativeProps;
+export declare const NumberKeyboard: React.FC<NumberKeyboardProps>;