@alifd/chat 0.3.5 → 0.3.7

package/es/float-button/hooks/useAutoAlign.js

@@ -26,10 +26,11 @@ trigger, // 触发器dom
         const { left, top, width, height } = trigger.getBoundingClientRect();
         let newAlign = align;
         let newMaxHeight = maxHeight;
+        // 去除bl/br/tl/tr的支持，因为会导致弹层面板高度变矮，所以目前只用了'rt'|'lt'|'rb'|'lb'4种布局
         switch (edge) {
             case 'top': {
-                newAlign = subEdge === 'left' ? 'bl' : 'br';
-                newMaxHeight = screenHeight - top - height - DEFAULT_PANE_OFFSET - DEFAULT_EDGE_OFFSET;
+                newAlign = subEdge === 'left' ? 'rt' : 'lt';
+                newMaxHeight = screenHeight - top - DEFAULT_EDGE_OFFSET;
                 break;
             }
             case 'right': {
@@ -38,8 +39,8 @@ trigger, // 触发器dom
                 break;
             }
             case 'bottom': {
-                newAlign = subEdge === 'left' ? 'tl' : 'tr';
-                newMaxHeight = top - DEFAULT_PANE_OFFSET - DEFAULT_EDGE_OFFSET;
+                newAlign = subEdge === 'left' ? 'rb' : 'lb';
+                newMaxHeight = top + height - DEFAULT_EDGE_OFFSET;
                 break;
             }
             case 'left': {

package/es/float-button/hooks/useAutoHide.js

@@ -9,6 +9,7 @@ export function useAutoHide(dom, { enable, leftSize, interactiveEdges, }) {
     const positionRef = useRef();
     const setByMouseEnterRef = useRef(false);
     const setPosition = ({ left, top }, animation = true) => {
+        console.log('useAutoHide setPosition left top dom:', left, top, dom);
         if (!dom) {
             return;
         }
@@ -25,6 +26,7 @@ export function useAutoHide(dom, { enable, leftSize, interactiveEdges, }) {
         positionRef.current = { left, top };
     };
     const triggerHide = (hide, rect) => {
+        // console.log('useAutoHide triggerHide hide dom rect:', hide, rect, dom);
         if (!dom) {
             return;
         }
@@ -61,13 +63,18 @@ export function useAutoHide(dom, { enable, leftSize, interactiveEdges, }) {
         }
     };
     const setHide = (hide, rect) => {
+        // console.log('useAutoHide setHide isHideRef.current hide dom enable:', isHideRef.current, hide, dom, enable);
         if (isHideRef.current === hide || !dom || !enable) {
             return;
         }
         triggerHide(hide, rect);
     };
+    // 目前这样的逻辑必须要 主动的通过api的方式或者 拖拽小球的方式触发首次隐藏
+    // 后续鼠标的移入移出事件才会生效
     const setHideByMouse = (hide) => {
+        // console.log('useAutoHide setHideByMouse hide', hide, isHideRef);
         if (hide) {
+            // 这里加了这个判断会导致首次通过鼠标方式的隐藏不会被触发
             if (setByMouseEnterRef.current) {
                 setHide(true);
                 setByMouseEnterRef.current = false;
@@ -79,6 +86,7 @@ export function useAutoHide(dom, { enable, leftSize, interactiveEdges, }) {
         }
     };
     const setHideByApi = (hide) => {
+        // console.log('useAutoHide setHideByApi hide', hide);
         setByMouseEnterRef.current = false;
         setHide(hide);
     };
@@ -90,9 +98,12 @@ export function useAutoHide(dom, { enable, leftSize, interactiveEdges, }) {
             return;
         }
         const enter = () => {
+            // console.log('useAutoHide enter');
             throttleSetHideByMouse(false);
         };
+        // 感觉leave 不应该是离开球，可以是
         const leave = () => {
+            // console.log('useAutoHide leave');
             throttleSetHideByMouse(true);
         };
         dom.addEventListener('mouseenter', enter);
@@ -150,8 +161,8 @@ export function useAutoHide(dom, { enable, leftSize, interactiveEdges, }) {
     const throttleHandleMove = useThrottle(handleMove, 100);
     return {
         isHideRef,
-        handleMove: throttleHandleMove,
-        setHide: throttleSetHideByApi,
+        handleMove: throttleHandleMove, // 拖拽过程中执行
+        setHide: throttleSetHideByApi, // 提供外部的执行方法
         saveRestorePosition,
     };
 }

package/es/float-button/hooks/useNestleEdge.d.ts

@@ -1,6 +1,6 @@
 import type { Margin, Edge, Position } from '../types';
 /**
- * 吸边逻辑
+ * 吸边逻辑，找到靠的最近的边，然后再根据安全距离算出最终的位置
  */
 export declare function useNestleEdge(dom: HTMLElement | null, { enable, safeAreaMargin, interactiveEdges, onUpdate, onUpdateEnd, }: {
     enable?: boolean;

package/es/float-button/hooks/useNestleEdge.js

@@ -2,19 +2,24 @@ import { useEffect, useLayoutEffect } from 'react';
 import { throttle, useDebounce, useThrottle } from '../../utils';
 import { getScreenSize, getNearlyEdge, adjustBySafeAreaMargin } from '../util';
 /**
- * 吸边逻辑
+ * 吸边逻辑，找到靠的最近的边，然后再根据安全距离算出最终的位置
  */
 export function useNestleEdge(dom, { enable, safeAreaMargin, interactiveEdges, onUpdate, onUpdateEnd, }) {
+    // 首次的问题，首次拿不到dom节点，dom的值是null
     const update = (animation = true) => {
+        // console.log('  useNestleEdge update0', dom);
         if (!enable || !dom) {
             return;
         }
+        // console.log('  useNestleEdge update1', dom);
         // 悬浮球的dom的结构
         const rect = dom.getBoundingClientRect();
         const { left, top, width, height } = rect;
         const { width: screenWidth, height: screenHeight } = getScreenSize();
         const [edge] = getNearlyEdge(dom, interactiveEdges, rect);
         let position = { left, top };
+        // console.log('  useNestleEdge edge', edge);
+        // console.log('  useNestleEdge position', position);
         switch (edge) {
             case 'top': {
                 position.top = 0;
@@ -36,7 +41,9 @@ export function useNestleEdge(dom, { enable, safeAreaMargin, interactiveEdges, o
                 return;
             }
         }
+        // console.log('  useNestleEdge position0:', position);
         position = adjustBySafeAreaMargin(position, { width, height }, safeAreaMargin) || position;
+        // console.log('  useNestleEdge position1:', position);
         if (position.left !== left || position.top !== top) {
             if ((onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(position, edge)) === false) {
                 return;
@@ -70,9 +77,11 @@ export function useNestleEdge(dom, { enable, safeAreaMargin, interactiveEdges, o
     const debounceUpdate = useDebounce(() => update(), 100);
     const throttleUpdate = useThrottle(update, 16);
     useLayoutEffect(() => {
+        // console.log('  useNestleEdge useLayoutEffect');
         throttleUpdate(false);
-    });
+    }); //, [dom]
     useEffect(() => {
+        // console.log('  useNestleEdge resize');
         window.addEventListener('resize', debounceUpdate);
         return () => {
             window.removeEventListener('resize', debounceUpdate);

package/es/float-button/main.scss

@@ -3,6 +3,8 @@
 .#{$prefix}float-button {
     position: fixed;
     z-index: 1001;
+    width: fit-content;
+    height: fit-content;
 
     &-backtop {
         transition:

package/es/float-button/util.js

@@ -63,7 +63,9 @@ export function adjustBySafeAreaMargin(position, rect, safeAreaMargin) {
         return num;
     };
     return {
-        left: makeInRange(position.left, Math.max(0, left), Math.min(width, width - rect.width - right)),
-        top: makeInRange(position.top, Math.max(0, top), Math.min(height, height - rect.height - bottom)),
+        left: makeInRange(position.left, Math.max(0, Math.min(left, width - rect.width - right)), Math.min(width, width - rect.width - right)),
+        // 目前这样的写法对顶部距离最小吸边逻辑会有问题
+        top: makeInRange(position.top, Math.max(0, Math.min(top, height - rect.height - bottom)), // 最小值
+        Math.min(height, height - rect.height - bottom)),
     };
 }

package/es/float-button/view/float-button.js

@@ -64,7 +64,9 @@ const FloatButton = forwardRef((props, ref) => {
         safeAreaMargin,
         interactiveEdges,
         onUpdate(position, edge) {
+            // 隐藏的时候不执行吸边流程
             if (isHideRef.current) {
+                // 更新小球位置，再出现时使用
                 saveRestorePosition(position);
                 return false;
             }
@@ -97,12 +99,14 @@ const FloatButton = forwardRef((props, ref) => {
         onDraging(_, e) {
             draggedRef.current = true;
             handleMove(e);
+            // 隐藏的时候不处理
             if (isHideRef.current) {
                 return false;
             }
         },
         onDragend() {
             updateAlign();
+            // 不隐藏的时候才处理
             if (!isHideRef.current) {
                 updateNestleEdge();
             }

package/es/index.js

@@ -20,4 +20,4 @@ export { default as CardLoading } from './card-loading';
 export { default as Origin } from './origin';
 export { default as Loading } from './loading';
 export { default as Drawer } from './drawer';
-export const version = '0.3.5';
+export const version = '0.3.7';

package/lib/float-button/hooks/useAutoAlign.js

@@ -29,10 +29,11 @@ trigger, // 触发器dom
         const { left, top, width, height } = trigger.getBoundingClientRect();
         let newAlign = align;
         let newMaxHeight = maxHeight;
+        // 去除bl/br/tl/tr的支持，因为会导致弹层面板高度变矮，所以目前只用了'rt'|'lt'|'rb'|'lb'4种布局
         switch (edge) {
             case 'top': {
-                newAlign = subEdge === 'left' ? 'bl' : 'br';
-                newMaxHeight = screenHeight - top - height - DEFAULT_PANE_OFFSET - DEFAULT_EDGE_OFFSET;
+                newAlign = subEdge === 'left' ? 'rt' : 'lt';
+                newMaxHeight = screenHeight - top - DEFAULT_EDGE_OFFSET;
                 break;
             }
             case 'right': {
@@ -41,8 +42,8 @@ trigger, // 触发器dom
                 break;
             }
             case 'bottom': {
-                newAlign = subEdge === 'left' ? 'tl' : 'tr';
-                newMaxHeight = top - DEFAULT_PANE_OFFSET - DEFAULT_EDGE_OFFSET;
+                newAlign = subEdge === 'left' ? 'rb' : 'lb';
+                newMaxHeight = top + height - DEFAULT_EDGE_OFFSET;
                 break;
             }
             case 'left': {

package/lib/float-button/hooks/useAutoHide.js

@@ -12,6 +12,7 @@ function useAutoHide(dom, { enable, leftSize, interactiveEdges, }) {
     const positionRef = (0, react_1.useRef)();
     const setByMouseEnterRef = (0, react_1.useRef)(false);
     const setPosition = ({ left, top }, animation = true) => {
+        console.log('useAutoHide setPosition left top dom:', left, top, dom);
         if (!dom) {
             return;
         }
@@ -28,6 +29,7 @@ function useAutoHide(dom, { enable, leftSize, interactiveEdges, }) {
         positionRef.current = { left, top };
     };
     const triggerHide = (hide, rect) => {
+        // console.log('useAutoHide triggerHide hide dom rect:', hide, rect, dom);
         if (!dom) {
             return;
         }
@@ -64,13 +66,18 @@ function useAutoHide(dom, { enable, leftSize, interactiveEdges, }) {
         }
     };
     const setHide = (hide, rect) => {
+        // console.log('useAutoHide setHide isHideRef.current hide dom enable:', isHideRef.current, hide, dom, enable);
         if (isHideRef.current === hide || !dom || !enable) {
             return;
         }
         triggerHide(hide, rect);
     };
+    // 目前这样的逻辑必须要 主动的通过api的方式或者 拖拽小球的方式触发首次隐藏
+    // 后续鼠标的移入移出事件才会生效
     const setHideByMouse = (hide) => {
+        // console.log('useAutoHide setHideByMouse hide', hide, isHideRef);
         if (hide) {
+            // 这里加了这个判断会导致首次通过鼠标方式的隐藏不会被触发
             if (setByMouseEnterRef.current) {
                 setHide(true);
                 setByMouseEnterRef.current = false;
@@ -82,6 +89,7 @@ function useAutoHide(dom, { enable, leftSize, interactiveEdges, }) {
         }
     };
     const setHideByApi = (hide) => {
+        // console.log('useAutoHide setHideByApi hide', hide);
         setByMouseEnterRef.current = false;
         setHide(hide);
     };
@@ -93,9 +101,12 @@ function useAutoHide(dom, { enable, leftSize, interactiveEdges, }) {
             return;
         }
         const enter = () => {
+            // console.log('useAutoHide enter');
             throttleSetHideByMouse(false);
         };
+        // 感觉leave 不应该是离开球，可以是
         const leave = () => {
+            // console.log('useAutoHide leave');
             throttleSetHideByMouse(true);
         };
         dom.addEventListener('mouseenter', enter);
@@ -153,8 +164,8 @@ function useAutoHide(dom, { enable, leftSize, interactiveEdges, }) {
     const throttleHandleMove = (0, utils_1.useThrottle)(handleMove, 100);
     return {
         isHideRef,
-        handleMove: throttleHandleMove,
-        setHide: throttleSetHideByApi,
+        handleMove: throttleHandleMove, // 拖拽过程中执行
+        setHide: throttleSetHideByApi, // 提供外部的执行方法
         saveRestorePosition,
     };
 }

package/lib/float-button/hooks/useNestleEdge.d.ts

@@ -1,6 +1,6 @@
 import type { Margin, Edge, Position } from '../types';
 /**
- * 吸边逻辑
+ * 吸边逻辑，找到靠的最近的边，然后再根据安全距离算出最终的位置
  */
 export declare function useNestleEdge(dom: HTMLElement | null, { enable, safeAreaMargin, interactiveEdges, onUpdate, onUpdateEnd, }: {
     enable?: boolean;

package/lib/float-button/hooks/useNestleEdge.js

@@ -5,19 +5,24 @@ const react_1 = require("react");
 const utils_1 = require("../../utils");
 const util_1 = require("../util");
 /**
- * 吸边逻辑
+ * 吸边逻辑，找到靠的最近的边，然后再根据安全距离算出最终的位置
  */
 function useNestleEdge(dom, { enable, safeAreaMargin, interactiveEdges, onUpdate, onUpdateEnd, }) {
+    // 首次的问题，首次拿不到dom节点，dom的值是null
     const update = (animation = true) => {
+        // console.log('  useNestleEdge update0', dom);
         if (!enable || !dom) {
             return;
         }
+        // console.log('  useNestleEdge update1', dom);
         // 悬浮球的dom的结构
         const rect = dom.getBoundingClientRect();
         const { left, top, width, height } = rect;
         const { width: screenWidth, height: screenHeight } = (0, util_1.getScreenSize)();
         const [edge] = (0, util_1.getNearlyEdge)(dom, interactiveEdges, rect);
         let position = { left, top };
+        // console.log('  useNestleEdge edge', edge);
+        // console.log('  useNestleEdge position', position);
         switch (edge) {
             case 'top': {
                 position.top = 0;
@@ -39,7 +44,9 @@ function useNestleEdge(dom, { enable, safeAreaMargin, interactiveEdges, onUpdate
                 return;
             }
         }
+        // console.log('  useNestleEdge position0:', position);
         position = (0, util_1.adjustBySafeAreaMargin)(position, { width, height }, safeAreaMargin) || position;
+        // console.log('  useNestleEdge position1:', position);
         if (position.left !== left || position.top !== top) {
             if ((onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(position, edge)) === false) {
                 return;
@@ -73,9 +80,11 @@ function useNestleEdge(dom, { enable, safeAreaMargin, interactiveEdges, onUpdate
     const debounceUpdate = (0, utils_1.useDebounce)(() => update(), 100);
     const throttleUpdate = (0, utils_1.useThrottle)(update, 16);
     (0, react_1.useLayoutEffect)(() => {
+        // console.log('  useNestleEdge useLayoutEffect');
         throttleUpdate(false);
-    });
+    }); //, [dom]
     (0, react_1.useEffect)(() => {
+        // console.log('  useNestleEdge resize');
         window.addEventListener('resize', debounceUpdate);
         return () => {
             window.removeEventListener('resize', debounceUpdate);

package/lib/float-button/main.scss

@@ -3,6 +3,8 @@
 .#{$prefix}float-button {
     position: fixed;
     z-index: 1001;
+    width: fit-content;
+    height: fit-content;
 
     &-backtop {
         transition:

package/lib/float-button/util.js

@@ -69,7 +69,9 @@ function adjustBySafeAreaMargin(position, rect, safeAreaMargin) {
         return num;
     };
     return {
-        left: makeInRange(position.left, Math.max(0, left), Math.min(width, width - rect.width - right)),
-        top: makeInRange(position.top, Math.max(0, top), Math.min(height, height - rect.height - bottom)),
+        left: makeInRange(position.left, Math.max(0, Math.min(left, width - rect.width - right)), Math.min(width, width - rect.width - right)),
+        // 目前这样的写法对顶部距离最小吸边逻辑会有问题
+        top: makeInRange(position.top, Math.max(0, Math.min(top, height - rect.height - bottom)), // 最小值
+        Math.min(height, height - rect.height - bottom)),
     };
 }

package/lib/float-button/view/float-button.js

@@ -66,7 +66,9 @@ const FloatButton = (0, react_1.forwardRef)((props, ref) => {
         safeAreaMargin,
         interactiveEdges,
         onUpdate(position, edge) {
+            // 隐藏的时候不执行吸边流程
             if (isHideRef.current) {
+                // 更新小球位置，再出现时使用
                 saveRestorePosition(position);
                 return false;
             }
@@ -99,12 +101,14 @@ const FloatButton = (0, react_1.forwardRef)((props, ref) => {
         onDraging(_, e) {
             draggedRef.current = true;
             handleMove(e);
+            // 隐藏的时候不处理
             if (isHideRef.current) {
                 return false;
             }
         },
         onDragend() {
             updateAlign();
+            // 不隐藏的时候才处理
             if (!isHideRef.current) {
                 updateNestleEdge();
             }

package/lib/index.js

@@ -46,4 +46,4 @@ var loading_1 = require("./loading");
 Object.defineProperty(exports, "Loading", { enumerable: true, get: function () { return tslib_1.__importDefault(loading_1).default; } });
 var drawer_1 = require("./drawer");
 Object.defineProperty(exports, "Drawer", { enumerable: true, get: function () { return tslib_1.__importDefault(drawer_1).default; } });
-exports.version = '0.3.5';
+exports.version = '0.3.7';

package/package.json

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