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

package/cjs/components/virtual-input/virtual-input.js

@@ -40,10 +40,10 @@ var VirtualInput = /*#__PURE__*/(0, _react.forwardRef)(function (p, ref) {
   var contentRef = (0, _react.useRef)(null);
 
   var _useState = (0, _react.useState)(false),
-      keyboardVisible = _useState[0],
-      setKeyboardVisible = _useState[1];
+      hasFocus = _useState[0],
+      setHasFocus = _useState[1];
 
-  (0, _react.useLayoutEffect)(function () {
+  function scrollToEnd() {
     var root = rootRef.current;
     if (!root) return;
 
@@ -56,7 +56,16 @@ var VirtualInput = /*#__PURE__*/(0, _react.forwardRef)(function (p, ref) {
     content.scrollTo({
       left: content.clientWidth
     });
+  }
+
+  (0, _react.useLayoutEffect)(function () {
+    scrollToEnd();
   }, [value]);
+  (0, _react.useEffect)(function () {
+    if (hasFocus) {
+      scrollToEnd();
+    }
+  }, [hasFocus]);
   (0, _react.useImperativeHandle)(ref, function () {
     return {
       focus: function focus() {
@@ -72,10 +81,17 @@ var VirtualInput = /*#__PURE__*/(0, _react.forwardRef)(function (p, ref) {
     };
   });
 
+  function onFocus() {
+    var _a;
+
+    setHasFocus(true);
+    (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props);
+  }
+
   function onBlur() {
     var _a;
 
-    setKeyboardVisible(false);
+    setHasFocus(false);
     (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props);
   }
 
@@ -83,12 +99,7 @@ var VirtualInput = /*#__PURE__*/(0, _react.forwardRef)(function (p, ref) {
     ref: rootRef,
     className: (0, _classnames["default"])(classPrefix, (_classNames = {}, _classNames[classPrefix + "-disabled"] = props.disabled, _classNames)),
     tabIndex: props.disabled ? undefined : 0,
-    onFocus: function onFocus() {
-      var _a;
-
-      setKeyboardVisible(true);
-      (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props);
-    },
+    onFocus: onFocus,
     onBlur: onBlur,
     onClick: props.onClick
   }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -96,9 +107,9 @@ var VirtualInput = /*#__PURE__*/(0, _react.forwardRef)(function (p, ref) {
     ref: contentRef
   }, value, /*#__PURE__*/_react["default"].createElement("div", {
     className: classPrefix + "-caret-container"
-  }, /*#__PURE__*/_react["default"].createElement("div", {
+  }, hasFocus && /*#__PURE__*/_react["default"].createElement("div", {
     className: classPrefix + "-caret"
-  }))), props.clearable && !!value && /*#__PURE__*/_react["default"].createElement("div", {
+  }))), props.clearable && !!value && hasFocus && /*#__PURE__*/_react["default"].createElement("div", {
     className: classPrefix + "-clear",
     onClick: function onClick() {
       var _a;
@@ -115,8 +126,12 @@ var VirtualInput = /*#__PURE__*/(0, _react.forwardRef)(function (p, ref) {
     onDelete: function onDelete() {
       setValue(value.slice(0, -1));
     },
-    visible: keyboardVisible,
-    onClose: onBlur
+    visible: hasFocus,
+    onClose: function onClose() {
+      var _a;
+
+      (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+    }
   })));
 });
 exports.VirtualInput = VirtualInput;

package/es/components/cascader-view/cascader-view.css

@@ -1,7 +1,7 @@
 .adm-cascader-view {
   --height: fit-content;
 }
-.adm-cascader-view-tabs {
+.adm-cascader-view-tabs.adm-tabs {
   --title-font-size: 14px;
   --content-padding: none;
 }
@@ -12,14 +12,16 @@
   text-overflow: ellipsis;
 }
 .adm-cascader-view-content {
-  --border-inner: none;
-  --border-bottom: none;
-  --border-top: none;
   height: var(--height);
   overflow-y: auto;
   padding-top: 4px;
   box-sizing: border-box;
 }
+.adm-cascader-view-content.adm-list {
+  --border-inner: none;
+  --border-bottom: none;
+  --border-top: none;
+}
 .adm-cascader-view-item {
   font-size: 14px;
 }

package/es/components/cascader-view/index.d.ts

@@ -1,4 +1,4 @@
-import { CascaderView } from './cascader-view';
 import './cascader-view.less';
+import { CascaderView } from './cascader-view';
 export type { CascaderViewProps, CascaderValue, CascaderValueExtend, CascaderOption, } from './cascader-view';
 export default CascaderView;

package/es/components/cascader-view/index.js

@@ -1,3 +1,3 @@
-import { CascaderView } from './cascader-view';
 import "./cascader-view.css";
+import { CascaderView } from './cascader-view';
 export default CascaderView;

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

@@ -1,5 +1,4 @@
-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;
@@ -7,7 +6,15 @@ export declare type DropdownProps = {
     closeOnMaskClick?: boolean;
     onChange?: (key: string | null) => void;
 } & 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;
+    onChange?: ((key: string | null) => void) | undefined;
+} & NativeProps<never> & {
+    children?: React.ReactNode;
+} & React.RefAttributes<DropdownRef>>;
 export default Dropdown;

package/es/components/dropdown/dropdown.js

@@ -1,8 +1,8 @@
 import { useClickAway } from 'ahooks';
 import classNames from 'classnames';
-import React, { cloneElement, useEffect, useRef, useState } from 'react';
+import React, { cloneElement, useEffect, useRef, useState, forwardRef, useImperativeHandle } from 'react';
 import Popup from '../popup';
-import Item, { ItemChildrenWrap } from './item';
+import { ItemChildrenWrap } from './item';
 import { withNativeProps } from '../../utils/native-props';
 import { mergeProps } from '../../utils/with-default-props';
 import { usePropsValue } from '../../utils/use-props-value';
@@ -11,8 +11,7 @@ var defaultProps = {
   defaultActiveKey: null,
   closeOnMaskClick: true
 };
-
-var Dropdown = function Dropdown(p) {
+var Dropdown = /*#__PURE__*/forwardRef(function (p, ref) {
   var _classNames;
 
   var props = mergeProps(defaultProps, p);
@@ -72,6 +71,13 @@ var Dropdown = function Dropdown(p) {
       return child;
     }
   });
+  useImperativeHandle(ref, function () {
+    return {
+      close: function close() {
+        setValue(null);
+      }
+    };
+  }, [setValue]);
   return withNativeProps(props, /*#__PURE__*/React.createElement("div", {
     className: classNames(classPrefix, (_classNames = {}, _classNames[classPrefix + "-open"] = !!value, _classNames)),
     ref: containerRef
@@ -99,13 +105,8 @@ var Dropdown = function Dropdown(p) {
       key: item.key,
       active: isActive,
       forceRender: item.props.forceRender,
-      destroyOnClose: item.props.destroyOnClose,
-      onClick: item.props.closeOnContentClick ? function () {
-        changeActive(null);
-      } : undefined
+      destroyOnClose: item.props.destroyOnClose
     }, item.props.children);
   })))));
-};
-
-Dropdown.Item = Item;
+});
 export default Dropdown;

package/es/components/dropdown/index.d.ts

@@ -1,5 +1,15 @@
+/// <reference types="react" />
 import './dropdown.less';
-import Dropdown from './dropdown';
-export type { DropdownProps } from './dropdown';
+export type { DropdownProps, DropdownRef } from './dropdown';
 export type { DropdownItemProps } from './item';
-export default Dropdown;
+declare const _default: import("react").ForwardRefExoticComponent<{
+    activeKey?: string | null | undefined;
+    defaultActiveKey?: string | null | undefined;
+    closeOnMaskClick?: boolean | undefined;
+    onChange?: ((key: string | null) => void) | undefined;
+} & import("../../utils/native-props").NativeProps<never> & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<import("./dropdown").DropdownRef>> & {
+    Item: import("react").FC<import("./item").DropdownItemProps>;
+};
+export default _default;

package/es/components/dropdown/index.js

@@ -1,3 +1,7 @@
 import "./dropdown.css";
 import Dropdown from './dropdown';
-export default Dropdown;
+import { attachPropertiesToComponent } from '../../utils/attach-properties-to-component';
+import Item from './item';
+export default attachPropertiesToComponent(Dropdown, {
+  Item: Item
+});

package/es/components/dropdown/item.d.ts

@@ -7,7 +7,6 @@ export declare type DropdownItemProps = {
     highlight?: boolean;
     forceRender?: boolean;
     destroyOnClose?: boolean;
-    closeOnContentClick?: boolean;
     onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
 } & NativeProps;
 declare const Item: FC<DropdownItemProps>;

package/es/components/form/form.d.ts

@@ -1,13 +1,16 @@
 import React, { ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
+import { ListProps } from '../list';
 import type { FormProps as RcFormProps, FormInstance } from 'rc-field-form';
 import { FormContextType } from './context';
 import type { FormLayout } from '.';
 export declare type FormProps = RcFormProps & NativeProps & Partial<FormContextType> & {
     footer?: ReactNode;
     layout?: FormLayout;
+    mode?: ListProps['mode'];
 };
 export declare const Form: React.ForwardRefExoticComponent<RcFormProps<any> & NativeProps<never> & Partial<FormContextType> & {
     footer?: ReactNode;
     layout?: "horizontal" | "vertical" | undefined;
+    mode?: ListProps['mode'];
 } & React.RefAttributes<FormInstance<any>>>;

package/es/components/form/form.js

@@ -31,13 +31,15 @@ export var Form = /*#__PURE__*/forwardRef(function (p, ref) {
       children = props.children,
       layout = props.layout,
       footer = props.footer,
-      formProps = __rest(props, ["className", "style", "hasFeedback", "children", "layout", "footer"]);
+      mode = props.mode,
+      formProps = __rest(props, ["className", "style", "hasFeedback", "children", "layout", "footer", "mode"]);
 
   return /*#__PURE__*/React.createElement(RcForm, Object.assign({
     className: classNames(classPrefix, classPrefix + "-" + layout, className),
     style: style,
     ref: ref
   }, formProps), /*#__PURE__*/React.createElement(List, {
+    mode: mode,
     style: {
       '--prefix-width': '6em',
       '--align-items': 'stretch'

package/es/components/form/index.d.ts

@@ -7,6 +7,7 @@ export type { FormInstance } from 'rc-field-form';
 declare const _default: import("react").ForwardRefExoticComponent<import("rc-field-form").FormProps<any> & import("../../utils/native-props").NativeProps<never> & Partial<import("./context").FormContextType> & {
     footer?: import("react").ReactNode;
     layout?: "horizontal" | "vertical" | undefined;
+    mode?: "default" | "card" | undefined;
 } & import("react").RefAttributes<import("rc-field-form").FormInstance<any>>> & {
     Item: import("react").FC<import("./form-item").FormItemProps>;
     useForm: typeof useForm;

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

@@ -6,6 +6,7 @@ import { shuffle } from '../../utils/shuffle';
 import Popup from '../popup';
 import { withNativeProps } from '../../utils/native-props';
 import SafeArea from '../safe-area';
+import { usePersistFn } from 'ahooks';
 var classPrefix = 'adm-number-keyboard';
 var defaultProps = {
   defaultVisible: false,
@@ -24,8 +25,7 @@ export var NumberKeyboard = function NumberKeyboard(p) {
       customKey = props.customKey,
       randomOrder = props.randomOrder,
       showCloseButton = props.showCloseButton,
-      onInput = props.onInput,
-      onDelete = props.onDelete;
+      onInput = props.onInput;
   var keyboardRef = useRef(null);
   var keys = useMemo(function () {
     var defaultKeys = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];
@@ -43,31 +43,30 @@ export var NumberKeyboard = function NumberKeyboard(p) {
   }, [customKey, confirmText, randomOrder, randomOrder && visible]);
   var timeoutRef = useRef(-1);
   var intervalRef = useRef(-1);
+  var onDelete = usePersistFn(function () {
+    var _a;
 
-  var onStart = function onStart() {
-    if (!onDelete) return;
+    (_a = props.onDelete) === null || _a === void 0 ? void 0 : _a.call(props);
+  });
+
+  var onBackspacePressStart = function onBackspacePressStart() {
     timeoutRef.current = window.setTimeout(function () {
       onDelete();
       intervalRef.current = window.setInterval(onDelete, 150);
-    }, 300);
+    }, 700);
   };
 
-  var onEnd = function onEnd() {
+  var onBackspacePressEnd = function onBackspacePressEnd() {
     clearTimeout(timeoutRef.current);
     clearInterval(intervalRef.current);
-  };
-
-  var backSpaceEvents = {
-    onMouseDown: onStart,
-    onTouchStart: onStart,
-    onMouseUp: onEnd,
-    onMouseLeave: onEnd,
-    onTouchEnd: onEnd
   }; // 点击键盘按键
 
-  var onKeyPress = function onKeyPress(key) {
+
+  var onKeyPress = function onKeyPress(e, key) {
     var _a, _b;
 
+    e.preventDefault();
+
     switch (key) {
       case 'BACKSPACE':
         onDelete === null || onDelete === void 0 ? void 0 : onDelete();
@@ -117,16 +116,27 @@ export var NumberKeyboard = function NumberKeyboard(p) {
       'sign-key': !isNumberKey && key,
       'mid-key': index === 9 && !!confirmText
     });
-    return /*#__PURE__*/React.createElement("div", Object.assign({
+    return /*#__PURE__*/React.createElement("div", {
       key: key,
       className: className,
-      onClick: function onClick() {
-        return key && onKeyPress(key);
-      }
-    }, key === 'BACKSPACE' ? backSpaceEvents : {}, {
+      onTouchStart: function onTouchStart() {
+        if (key === 'BACKSPACE') {
+          onBackspacePressStart();
+        }
+      },
+      onTouchEnd: function onTouchEnd(e) {
+        onKeyPress(e, key);
+
+        if (key === 'BACKSPACE') {
+          onBackspacePressEnd();
+        }
+      },
+      onMouseUp: function onMouseUp(e) {
+        onKeyPress(e, key);
+      },
       title: key,
       role: 'button'
-    }), key === 'BACKSPACE' ? /*#__PURE__*/React.createElement(TextDeletionOutline, null) : key);
+    }, key === 'BACKSPACE' ? /*#__PURE__*/React.createElement(TextDeletionOutline, null) : key);
   };
 
   return /*#__PURE__*/React.createElement(Popup, {
@@ -151,18 +161,27 @@ export var NumberKeyboard = function NumberKeyboard(p) {
     })
   }, keys.map(renderKey)), !!confirmText && /*#__PURE__*/React.createElement("div", {
     className: classPrefix + "-confirm"
-  }, /*#__PURE__*/React.createElement("div", Object.assign({
+  }, /*#__PURE__*/React.createElement("div", {
     className: classPrefix + "-key extra-key bs-key",
-    onClick: function onClick() {
-      return onKeyPress('BACKSPACE');
-    }
-  }, backSpaceEvents, {
+    onTouchStart: function onTouchStart() {
+      onBackspacePressStart();
+    },
+    onTouchEnd: function onTouchEnd(e) {
+      onKeyPress(e, 'BACKSPACE');
+      onBackspacePressEnd();
+    },
+    onMouseUp: function onMouseUp(e) {
+      return onKeyPress(e, 'BACKSPACE');
+    },
     title: 'BACKSPACE',
     role: 'button'
-  }), /*#__PURE__*/React.createElement(TextDeletionOutline, null)), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(TextDeletionOutline, null)), /*#__PURE__*/React.createElement("div", {
     className: classPrefix + "-key extra-key ok-key",
-    onClick: function onClick() {
-      return onKeyPress('OK');
+    onTouchEnd: function onTouchEnd(e) {
+      return onKeyPress(e, 'OK');
+    },
+    onMouseUp: function onMouseUp(e) {
+      return onKeyPress(e, 'OK');
     },
     role: 'button'
   }, confirmText))), props.safeArea && /*#__PURE__*/React.createElement("div", {

package/es/components/toast/toast.css

@@ -14,6 +14,7 @@
   transform: translate(-50%, -50%);
   pointer-events: all;
   font-size: 15px;
+  line-height: 1.5;
 }
 .adm-toast-mask .adm-toast-wrap-text {
   padding: 12px;

package/es/components/virtual-input/virtual-input.css

@@ -49,9 +49,9 @@
   width: var(--caret-width);
   height: 1.3em;
   vertical-align: top;
+  margin-right: 1px;
 }
 .adm-virtual-input-caret {
-  display: none;
   width: 100%;
   height: 100%;
   background-color: var(--caret-color);

package/es/components/virtual-input/virtual-input.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useImperativeHandle, useLayoutEffect, useRef, useState } from 'react';
+import React, { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from 'react';
 import { withNativeProps } from '../../utils/native-props';
 import { mergeProps } from '../../utils/with-default-props';
 import { usePropsValue } from '../../utils/use-props-value';
@@ -21,10 +21,10 @@ export var VirtualInput = /*#__PURE__*/forwardRef(function (p, ref) {
   var contentRef = useRef(null);
 
   var _useState = useState(false),
-      keyboardVisible = _useState[0],
-      setKeyboardVisible = _useState[1];
+      hasFocus = _useState[0],
+      setHasFocus = _useState[1];
 
-  useLayoutEffect(function () {
+  function scrollToEnd() {
     var root = rootRef.current;
     if (!root) return;
 
@@ -37,7 +37,16 @@ export var VirtualInput = /*#__PURE__*/forwardRef(function (p, ref) {
     content.scrollTo({
       left: content.clientWidth
     });
+  }
+
+  useLayoutEffect(function () {
+    scrollToEnd();
   }, [value]);
+  useEffect(function () {
+    if (hasFocus) {
+      scrollToEnd();
+    }
+  }, [hasFocus]);
   useImperativeHandle(ref, function () {
     return {
       focus: function focus() {
@@ -53,10 +62,17 @@ export var VirtualInput = /*#__PURE__*/forwardRef(function (p, ref) {
     };
   });
 
+  function onFocus() {
+    var _a;
+
+    setHasFocus(true);
+    (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props);
+  }
+
   function onBlur() {
     var _a;
 
-    setKeyboardVisible(false);
+    setHasFocus(false);
     (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props);
   }
 
@@ -64,12 +80,7 @@ export var VirtualInput = /*#__PURE__*/forwardRef(function (p, ref) {
     ref: rootRef,
     className: classNames(classPrefix, (_classNames = {}, _classNames[classPrefix + "-disabled"] = props.disabled, _classNames)),
     tabIndex: props.disabled ? undefined : 0,
-    onFocus: function onFocus() {
-      var _a;
-
-      setKeyboardVisible(true);
-      (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props);
-    },
+    onFocus: onFocus,
     onBlur: onBlur,
     onClick: props.onClick
   }, /*#__PURE__*/React.createElement("div", {
@@ -77,9 +88,9 @@ export var VirtualInput = /*#__PURE__*/forwardRef(function (p, ref) {
     ref: contentRef
   }, value, /*#__PURE__*/React.createElement("div", {
     className: classPrefix + "-caret-container"
-  }, /*#__PURE__*/React.createElement("div", {
+  }, hasFocus && /*#__PURE__*/React.createElement("div", {
     className: classPrefix + "-caret"
-  }))), props.clearable && !!value && /*#__PURE__*/React.createElement("div", {
+  }))), props.clearable && !!value && hasFocus && /*#__PURE__*/React.createElement("div", {
     className: classPrefix + "-clear",
     onClick: function onClick() {
       var _a;
@@ -96,7 +107,11 @@ export var VirtualInput = /*#__PURE__*/forwardRef(function (p, ref) {
     onDelete: function onDelete() {
       setValue(value.slice(0, -1));
     },
-    visible: keyboardVisible,
-    onClose: onBlur
+    visible: hasFocus,
+    onClose: function onClose() {
+      var _a;
+
+      (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+    }
   })));
 });

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "antd-mobile",
-  "version": "5.0.0-rc.2",
+  "version": "5.0.0-rc.3",
   "dependencies": {
     "@react-spring/web": "^9.3.1",
     "@types/resize-observer-browser": "^0.1.6",
-    "@use-gesture/react": "^10.1.6",
-    "ahooks": "^2.10.12",
+    "@use-gesture/react": "^10.2.2",
+    "ahooks": "^2.10.14",
     "antd-mobile-icons": "^0.2.2",
     "antd-mobile-v5-count": "^1.0.1",
     "classnames": "^2.3.1",