antd-mobile 5.40.0 → 5.41.0-alpha.0

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

@@ -8,7 +8,10 @@ import { mergeProp, mergeProps } from '../../utils/with-default-props';
 import { useConfig } from '../config-provider';
 const classPrefix = 'adm-virtual-input';
 const defaultProps = {
-  defaultValue: ''
+  defaultValue: '',
+  cursor: {
+    movable: false
+  }
 };
 export const VirtualInput = forwardRef((props, ref) => {
   const {
@@ -21,6 +24,13 @@ export const VirtualInput = forwardRef((props, ref) => {
   const contentRef = useRef(null);
   const [hasFocus, setHasFocus] = useState(false);
   const [caretPosition, setCaretPosition] = useState(value.length); // 光标位置，从 0 开始，如值是 2 则表示光标在顺序下标为 2 的数字之前
+  const keyboardDataRef = useRef({}); // 临时记录虚拟键盘输入，在下次更新时用于判断光标位置如何调整
+  const touchDataRef = useRef(); // 记录上一次 touch 时的坐标位置
+  const charRef = useRef(null); // 第一个字符的 DOM
+  const charWidthRef = useRef(0); // 单个字符宽度
+  const caretRef = useRef(null); // 光标的 DOM
+  const [isCaretDragging, setIsCaretDragging] = useState(false);
+  const touchMoveTimeoutRef = useRef();
   const clearIcon = mergeProp(React.createElement(CloseCircleFill, null), componentConfig.clearIcon, props.clearIcon);
   function scrollToEnd() {
     const root = rootRef.current;
@@ -32,6 +42,24 @@ export const VirtualInput = forwardRef((props, ref) => {
     if (!content) return;
     content.scrollLeft = content.clientWidth;
   }
+  useEffect(() => {
+    // 记录单个字符的宽度，用于光标移动时的计算
+    if (charRef.current) {
+      charWidthRef.current = charRef.current.getBoundingClientRect().width;
+    }
+  }, [value]);
+  useEffect(() => {
+    // 经过外部受控逻辑后，再调整光标位置，如果受控逻辑改动了值则光标放到最后
+    if (value === keyboardDataRef.current.newValue) {
+      if (keyboardDataRef.current.mode === 'input') {
+        setCaretPosition(c => c + 1);
+      } else if (keyboardDataRef.current.mode === 'delete') {
+        setCaretPosition(c => c - 1);
+      }
+    } else {
+      setCaretPosition(value.length);
+    }
+  }, [value]);
   useIsomorphicLayoutEffect(() => {
     scrollToEnd();
   }, [value]);
@@ -65,16 +93,24 @@ export const VirtualInput = forwardRef((props, ref) => {
     onInput: v => {
       var _a, _b;
       const newValue = value.substring(0, caretPosition) + v + value.substring(caretPosition);
+      // 临时记录，用于后续光标位置
+      keyboardDataRef.current = {
+        newValue,
+        mode: 'input'
+      };
       setValue(newValue);
-      setCaretPosition(c => c + 1);
       (_b = (_a = keyboard.props).onInput) === null || _b === void 0 ? void 0 : _b.call(_a, v);
     },
     onDelete: () => {
       var _a, _b;
       if (caretPosition === 0) return;
       const newValue = value.substring(0, caretPosition - 1) + value.substring(caretPosition);
+      // 临时记录，用于后续光标位置
+      keyboardDataRef.current = {
+        newValue,
+        mode: 'delete'
+      };
       setValue(newValue);
-      setCaretPosition(caretPosition - 1);
       (_b = (_a = keyboard.props).onDelete) === null || _b === void 0 ? void 0 : _b.call(_a);
     },
     visible: hasFocus,
@@ -94,23 +130,80 @@ export const VirtualInput = forwardRef((props, ref) => {
   });
   // 点击输入框时，将光标置于最后
   const setCaretPositionToEnd = () => {
-    setCaretPosition(value.length);
+    var _a, _b;
+    if (caretPosition !== value.length) {
+      setCaretPosition(value.length);
+      (_b = (_a = mergedProps.cursor) === null || _a === void 0 ? void 0 : _a.onMove) === null || _b === void 0 ? void 0 : _b.call(_a, value.length);
+    }
   };
   // 点击单个字符时，根据点击位置置于字符前或后
   const changeCaretPosition = index => e => {
+    var _a, _b, _c;
+    if (mergedProps.disabled || !((_a = mergedProps.cursor) === null || _a === void 0 ? void 0 : _a.movable)) return;
     e.stopPropagation();
     const rect = e.target.getBoundingClientRect();
     const midX = rect.left + rect.width / 2;
     const clickX = e.clientX;
     // 点击区域是否偏右
     const isRight = clickX > midX;
-    setCaretPosition(isRight ? index + 1 : index);
+    const newCaretPosition = isRight ? index + 1 : index;
+    setCaretPosition(newCaretPosition);
+    (_c = (_b = mergedProps.cursor) === null || _b === void 0 ? void 0 : _b.onMove) === null || _c === void 0 ? void 0 : _c.call(_b, newCaretPosition);
+  };
+  // 在光标附近 touchmove 时也可以调整光标位置
+  const handleTouchStart = e => {
+    var _a;
+    if (mergedProps.disabled || !((_a = mergedProps.cursor) === null || _a === void 0 ? void 0 : _a.movable)) return;
+    if (!caretRef.current) return;
+    const touch = e.touches[0];
+    const caretRect = caretRef.current.getBoundingClientRect();
+    const distance = Math.abs(touch.clientX - (caretRect.left + caretRect.width / 2));
+    if (distance < 20) {
+      // 20px 阈值可调整
+      touchDataRef.current = {
+        startX: touch.clientX,
+        startCaretPosition: caretPosition
+      };
+    } else {
+      touchDataRef.current = null;
+    }
+  };
+  const handleTouchMove = e => {
+    var _a, _b, _c;
+    if (!touchDataRef.current || !((_a = mergedProps.cursor) === null || _a === void 0 ? void 0 : _a.movable)) return;
+    setIsCaretDragging(true);
+    const touch = e.touches[0];
+    const deltaX = touch.clientX - touchDataRef.current.startX;
+    const charWidth = charWidthRef.current;
+    const moveChars = Math.round(deltaX / charWidth);
+    let newCaretPosition = touchDataRef.current.startCaretPosition + moveChars;
+    // 边界处理
+    newCaretPosition = Math.max(0, Math.min(newCaretPosition, value.length));
+    setCaretPosition(newCaretPosition);
+    (_c = (_b = mergedProps.cursor) === null || _b === void 0 ? void 0 : _b.onMove) === null || _c === void 0 ? void 0 : _c.call(_b, newCaretPosition);
+    // 防止 touchend 不触发
+    if (touchMoveTimeoutRef.current) {
+      clearTimeout(touchMoveTimeoutRef.current);
+    }
+    touchMoveTimeoutRef.current = setTimeout(() => {
+      setIsCaretDragging(false);
+      touchMoveTimeoutRef.current = null;
+    }, 500);
+  };
+  const handleTouchEnd = () => {
+    touchDataRef.current = null;
+    setIsCaretDragging(false);
+    if (touchMoveTimeoutRef.current) {
+      clearTimeout(touchMoveTimeoutRef.current);
+      touchMoveTimeoutRef.current = null;
+    }
   };
   const chars = (value + '').split('');
   return withNativeProps(mergedProps, React.createElement("div", {
     ref: rootRef,
     className: classNames(classPrefix, {
-      [`${classPrefix}-disabled`]: mergedProps.disabled
+      [`${classPrefix}-disabled`]: mergedProps.disabled,
+      [`${classPrefix}-caret-dragging`]: isCaretDragging
     }),
     tabIndex: mergedProps.disabled ? undefined : 0,
     role: 'textbox',
@@ -122,13 +215,18 @@ export const VirtualInput = forwardRef((props, ref) => {
     ref: contentRef,
     "aria-disabled": mergedProps.disabled,
     "aria-label": mergedProps.placeholder,
-    onClick: setCaretPositionToEnd
+    onClick: setCaretPositionToEnd,
+    onTouchStart: handleTouchStart,
+    onTouchMove: handleTouchMove,
+    onTouchEnd: handleTouchEnd
   }, chars.slice(0, caretPosition).map((i, index) => React.createElement("span", {
+    ref: index === 0 ? charRef : undefined,
     key: index,
     onClick: changeCaretPosition(index)
   }, i)), React.createElement("div", {
     className: `${classPrefix}-caret-container`
   }, hasFocus && React.createElement("div", {
+    ref: caretRef,
     className: `${classPrefix}-caret`
   })), chars.slice(caretPosition).map((i, index) => React.createElement("span", {
     key: index,
@@ -139,7 +237,6 @@ export const VirtualInput = forwardRef((props, ref) => {
       var _a;
       e.stopPropagation();
       setValue('');
-      setCaretPosition(0);
       (_a = mergedProps.onClear) === null || _a === void 0 ? void 0 : _a.call(mergedProps);
     },
     role: 'button',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "antd-mobile",
-  "version": "5.40.0",
+  "version": "5.41.0-alpha.0",
   "homepage": "https://github.com/ant-design/ant-design-mobile#readme",
   "bugs": {
     "url": "https://github.com/ant-design/ant-design-mobile/issues"
@@ -53,8 +53,8 @@
     "use-sync-external-store": "^1.2.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "GravityCDN": "./umd/antd-mobile.js",
   "size-limit": [