@alifd/chat 0.3.33-beta.11 → 0.3.33-beta.12

package/es/image-preview/index.js

@@ -6,7 +6,7 @@
  * @when 需要展示图片并提供预览功能时使用。 - Use when you need to display images and provide preview functionality.
 
  */
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useRef } from 'react';
 import classnames from 'classnames';
 import { PhotoProvider, PhotoView } from 'react-photo-view';
 import { findAncestor } from '../utils';
@@ -34,26 +34,66 @@ function isInsideLink(e) {
     return !!findAncestor(e.target, (t) => t.tagName === 'A' && !!t.href);
 }
 const ImagePreview = forwardRef(({ className, src, children, width, height }, ref) => {
+    const touchStartRef = useRef({ x: 0, y: 0, time: 0 });
+    const hasMoved = useRef(false);
     let child;
     try {
         child = React.Children.only(children);
     }
     catch (e) { }
+    const handleTouchStart = (e) => {
+        const touch = e.touches[0];
+        touchStartRef.current = {
+            x: touch.clientX,
+            y: touch.clientY,
+            time: Date.now()
+        };
+        hasMoved.current = false;
+    };
+    const handleTouchMove = (e) => {
+        if (!touchStartRef.current)
+            return;
+        const touch = e.touches[0];
+        const deltaX = Math.abs(touch.clientX - touchStartRef.current.x);
+        const deltaY = Math.abs(touch.clientY - touchStartRef.current.y);
+        // 如果移动距离超过阈值，认为是滚动操作
+        if (deltaX > 10 || deltaY > 10) {
+            hasMoved.current = true;
+        }
+    };
+    const handleTouchEnd = (e, originalHandler) => {
+        // 如果检测到滚动，就不触发图片预览
+        if (!hasMoved.current) {
+            if (isInsideLink(e)) {
+                e.stopPropagation();
+            }
+            else {
+                handleClick(e, src);
+            }
+        }
+        originalHandler === null || originalHandler === void 0 ? void 0 : originalHandler(e);
+    };
     if (child && child.props) {
-        const { onClick, onTouchEnd } = child.props;
+        const { onClick, onTouchEnd, onTouchStart, onTouchMove } = child.props;
         child = React.cloneElement(child, {
+            onTouchStart: (e) => {
+                handleTouchStart(e);
+                onTouchStart === null || onTouchStart === void 0 ? void 0 : onTouchStart(e);
+            },
+            onTouchMove: (e) => {
+                handleTouchMove(e);
+                onTouchMove === null || onTouchMove === void 0 ? void 0 : onTouchMove(e);
+            },
             onTouchEnd: (e) => {
-                if (isInsideLink(e)) {
-                    e.stopPropagation();
-                }
-                handleClick(e, src);
-                onTouchEnd === null || onTouchEnd === void 0 ? void 0 : onTouchEnd(e);
+                handleTouchEnd(e, onTouchEnd);
             },
             onClick: (e) => {
                 if (isInsideLink(e)) {
                     e.stopPropagation();
                 }
-                handleClick(e, src);
+                else {
+                    handleClick(e, src);
+                }
                 onClick === null || onClick === void 0 ? void 0 : onClick(e);
             }
         });

package/es/index.js

@@ -32,4 +32,4 @@ export { default as CheckboxGroup } from './checkbox-group';
 export { default as Select } from './select';
 export { default as Flip } from './flip';
 export { default as ToolStatus } from './tool-status';
-export const version = '0.3.33-beta.11';
+export const version = '0.3.33-beta.12';

package/lib/image-preview/index.js

@@ -37,26 +37,66 @@ function isInsideLink(e) {
     return !!(0, utils_1.findAncestor)(e.target, (t) => t.tagName === 'A' && !!t.href);
 }
 const ImagePreview = (0, react_1.forwardRef)(({ className, src, children, width, height }, ref) => {
+    const touchStartRef = (0, react_1.useRef)({ x: 0, y: 0, time: 0 });
+    const hasMoved = (0, react_1.useRef)(false);
     let child;
     try {
         child = react_1.default.Children.only(children);
     }
     catch (e) { }
+    const handleTouchStart = (e) => {
+        const touch = e.touches[0];
+        touchStartRef.current = {
+            x: touch.clientX,
+            y: touch.clientY,
+            time: Date.now()
+        };
+        hasMoved.current = false;
+    };
+    const handleTouchMove = (e) => {
+        if (!touchStartRef.current)
+            return;
+        const touch = e.touches[0];
+        const deltaX = Math.abs(touch.clientX - touchStartRef.current.x);
+        const deltaY = Math.abs(touch.clientY - touchStartRef.current.y);
+        // 如果移动距离超过阈值，认为是滚动操作
+        if (deltaX > 10 || deltaY > 10) {
+            hasMoved.current = true;
+        }
+    };
+    const handleTouchEnd = (e, originalHandler) => {
+        // 如果检测到滚动，就不触发图片预览
+        if (!hasMoved.current) {
+            if (isInsideLink(e)) {
+                e.stopPropagation();
+            }
+            else {
+                handleClick(e, src);
+            }
+        }
+        originalHandler === null || originalHandler === void 0 ? void 0 : originalHandler(e);
+    };
     if (child && child.props) {
-        const { onClick, onTouchEnd } = child.props;
+        const { onClick, onTouchEnd, onTouchStart, onTouchMove } = child.props;
         child = react_1.default.cloneElement(child, {
+            onTouchStart: (e) => {
+                handleTouchStart(e);
+                onTouchStart === null || onTouchStart === void 0 ? void 0 : onTouchStart(e);
+            },
+            onTouchMove: (e) => {
+                handleTouchMove(e);
+                onTouchMove === null || onTouchMove === void 0 ? void 0 : onTouchMove(e);
+            },
             onTouchEnd: (e) => {
-                if (isInsideLink(e)) {
-                    e.stopPropagation();
-                }
-                handleClick(e, src);
-                onTouchEnd === null || onTouchEnd === void 0 ? void 0 : onTouchEnd(e);
+                handleTouchEnd(e, onTouchEnd);
             },
             onClick: (e) => {
                 if (isInsideLink(e)) {
                     e.stopPropagation();
                 }
-                handleClick(e, src);
+                else {
+                    handleClick(e, src);
+                }
                 onClick === null || onClick === void 0 ? void 0 : onClick(e);
             }
         });

package/lib/index.js

@@ -70,4 +70,4 @@ var flip_1 = require("./flip");
 Object.defineProperty(exports, "Flip", { enumerable: true, get: function () { return tslib_1.__importDefault(flip_1).default; } });
 var tool_status_1 = require("./tool-status");
 Object.defineProperty(exports, "ToolStatus", { enumerable: true, get: function () { return tslib_1.__importDefault(tool_status_1).default; } });
-exports.version = '0.3.33-beta.11';
+exports.version = '0.3.33-beta.12';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alifd/chat",
-  "version": "0.3.33-beta.11",
+  "version": "0.3.33-beta.12",
   "description": "A configurable component library for chat built on React.",
   "main": "lib/index.js",
   "module": "es/index.js",

package/es/form/index.d.ts

@@ -1,23 +0,0 @@
-/**
- * @component 输入框
- * @en Input
- * @type 通用 - General
- * @remarks 同 Next Input，按钮用于开始一个即时操作。- Same as Next.Input, Input used to trigger an action.
- * @when 标记一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。- Inputs are used for emphasizing important functions on your page.
- * @others
- * ## 无障碍键盘操作指南
- * | 按键    | 说明          |
- * | :---- | :---------- |
- * | Enter | 触发 onClick 事件 |
- * | SPACE | 触发 onClick 事件 |
- * @othersEn
- * ## ARIA and KeyBoard
- * | KeyBoard          | Description                              |
- * | :---------- | :------------------------------ |
- * | Enter       | Trigger the onClick event    |
- * | SPACE       | Trigger the onClick event    |
- */
-import React from 'react';
-export * from './types';
-declare const _default: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<Pick<Pick<any, string | number | symbol> & React.RefAttributes<import("@alifd/next/types/config-provider/types").ConfiguredComponent<import("@alifd/next/types/input").InputProps & import("@alifd/next/types/config-provider/types").ComponentCommonProps, import("@alifd/next/types/input/input").default<import("@alifd/next/types/input").InputProps>> & Pick<import("@alifd/next/types/input/input").default<import("@alifd/next/types/input").InputProps>, "focus" | "getInputNode">>, string | number | symbol> & import("@alifd/next/types/config-provider/types").ComponentCommonProps, import("@alifd/next/types/config-provider/types").ConfiguredComponent<import("@alifd/next/types/input").InputProps & import("@alifd/next/types/config-provider/types").ComponentCommonProps, import("@alifd/next/types/input/input").default<import("@alifd/next/types/input").InputProps>> & Pick<import("@alifd/next/types/input/input").default<import("@alifd/next/types/input").InputProps>, "focus" | "getInputNode">, {}>;
-export default _default;

package/es/form/index.js

@@ -1,33 +0,0 @@
-/**
- * @component 输入框
- * @en Input
- * @type 通用 - General
- * @remarks 同 Next Input，按钮用于开始一个即时操作。- Same as Next.Input, Input used to trigger an action.
- * @when 标记一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。- Inputs are used for emphasizing important functions on your page.
- * @others
- * ## 无障碍键盘操作指南
- * | 按键    | 说明          |
- * | :---- | :---------- |
- * | Enter | 触发 onClick 事件 |
- * | SPACE | 触发 onClick 事件 |
- * @othersEn
- * ## ARIA and KeyBoard
- * | KeyBoard          | Description                              |
- * | :---------- | :------------------------------ |
- * | Enter       | Trigger the onClick event    |
- * | SPACE       | Trigger the onClick event    |
- */
-import { __rest } from "tslib";
-import React, { forwardRef } from 'react';
-import { Input as NextInput, ConfigProvider } from '@alifd/next';
-import cs from 'classnames';
-import { PREFIX_DEFAULT, assignSubComponent } from '../utils';
-const Input = forwardRef((_a, ref) => {
-    var { className, size = 'medium' } = _a, props = __rest(_a, ["className", "size"]);
-    return (React.createElement(NextInput, Object.assign({}, props, { className: cs(`${PREFIX_DEFAULT}input`, className), size: size, ref: ref })));
-});
-const InputWithSub = assignSubComponent(Input, {
-    displayName: 'Input',
-});
-export * from './types';
-export default ConfigProvider.config(InputWithSub);

package/es/form/main.scss

@@ -1,5 +0,0 @@
-@import "../core/variables.scss";
-
-.#{$prefix}input {
-
-}

package/es/form/style.d.ts

@@ -1 +0,0 @@
-import '@alifd/next/lib/input/style2';

package/es/form/style.js

@@ -1 +0,0 @@
-import '@alifd/next/lib/input/style2';