@alifd/chat 0.1.7 → 0.1.8

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

@@ -83,7 +83,7 @@ export function useAutoHide(dom, { enable, leftSize, interactiveEdges, }) {
         setHide(hide);
     };
     const debounceTriggerHide = useDebounce(triggerHide, 100);
-    const throttleSetHideByMouse = useThrottle(setHideByMouse, 250);
+    const throttleSetHideByMouse = useThrottle(setHideByMouse, 50);
     const throttleSetHideByApi = useThrottle(setHideByApi, 250);
     useEffect(() => {
         if (!dom) {

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

@@ -6,8 +6,8 @@ export declare function useNestleEdge(dom: HTMLElement | null, { enable, safeAre
     enable?: boolean;
     safeAreaMargin?: Margin;
     interactiveEdges?: Edge[];
-    onUpdate?: (position: Position) => void | false;
-    onUpdateEnd?: (position: Position) => void;
+    onUpdate?: (position: Position, edge: Edge) => void | false;
+    onUpdateEnd?: (position: Position, edge: Edge) => void;
 }): {
-    update: (animation?: boolean) => void;
+    update: (animation?: boolean | undefined) => void;
 };

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

@@ -1,17 +1,10 @@
-import { useEffect, useLayoutEffect, useRef } from 'react';
-import { useDebounce } from '../../utils';
+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, }) {
-    const eventTimerRef = useRef();
-    const triggerUpdateEnd = (position) => {
-        clearTimeout(eventTimerRef.current);
-        eventTimerRef.current = setTimeout(() => {
-            onUpdateEnd === null || onUpdateEnd === void 0 ? void 0 : onUpdateEnd(position);
-        }, 300);
-    };
     const update = (animation = true) => {
         if (!enable || !dom) {
             return;
@@ -20,7 +13,7 @@ export function useNestleEdge(dom, { enable, safeAreaMargin, interactiveEdges, o
         const { left, top, width, height } = rect;
         const { width: screenWidth, height: screenHeight } = getScreenSize();
         const [edge] = getNearlyEdge(dom, interactiveEdges, rect);
-        const position = { left, top };
+        let position = { left, top };
         switch (edge) {
             case 'top': {
                 position.top = 0;
@@ -38,30 +31,45 @@ export function useNestleEdge(dom, { enable, safeAreaMargin, interactiveEdges, o
                 position.left = 0;
                 break;
             }
-            // no default
+            default: {
+                return;
+            }
         }
-        if (position.left !== left || position.left !== top) {
-            const { left, top } = adjustBySafeAreaMargin(position, dom.getBoundingClientRect(), safeAreaMargin) ||
-                position;
-            const shouldContinue = onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate({ left, top });
-            if (shouldContinue === false) {
+        position = adjustBySafeAreaMargin(position, { width, height }, safeAreaMargin) || position;
+        if (position.left !== left || position.top !== top) {
+            if ((onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(position, edge)) === false) {
                 return;
             }
             dom.style.left = '0px';
             dom.style.top = '0px';
             if (animation) {
                 dom.style.transition = 'transform 0.25s';
+                let isRemoved = false;
+                const onEnd = throttle(() => {
+                    onUpdateEnd === null || onUpdateEnd === void 0 ? void 0 : onUpdateEnd(position, edge);
+                    dom.removeEventListener('transitionend', onEnd);
+                    isRemoved = true;
+                }, 10);
+                dom.addEventListener('transitionend', onEnd);
+                // 超时 500ms 移除监听
+                setTimeout(() => {
+                    if (!isRemoved) {
+                        dom.removeEventListener('transitionend', onEnd);
+                    }
+                }, 500);
+                dom.style.transform = `translate(${position.left}px, ${position.top}px)`;
             }
             else {
                 dom.style.transition = '';
+                dom.style.transform = `translate(${position.left}px, ${position.top}px)`;
+                onUpdateEnd === null || onUpdateEnd === void 0 ? void 0 : onUpdateEnd(position, edge);
             }
-            dom.style.transform = `translate(${left}px, ${top}px)`;
-            triggerUpdateEnd({ left, top });
         }
     };
     const debounceUpdate = useDebounce(() => update(), 100);
+    const throttleUpdate = useThrottle(update, 16);
     useLayoutEffect(() => {
-        update(false);
+        throttleUpdate(false);
     });
     useEffect(() => {
         window.addEventListener('resize', debounceUpdate);
@@ -70,6 +78,6 @@ export function useNestleEdge(dom, { enable, safeAreaMargin, interactiveEdges, o
         };
     }, []);
     return {
-        update,
+        update: throttleUpdate,
     };
 }

package/es/float-button/types.d.ts

@@ -164,6 +164,19 @@ export interface FloatButtonProps extends CommonProps {
      * @defaultValue true
      */
     autoNestleEdge?: boolean;
+    /**
+     * 当触发边缘吸附前的回调
+     * @param position - 吸附位置
+     * @param edge - 吸附的边
+     * @returns false 则不允许吸附
+     */
+    beforeNestleEdge?: (position: Position, edge: Edge) => false | void;
+    /**
+     * 吸附到边缘后的回调
+     * @param position - 吸附位置
+     * @param edge - 吸附的边
+     */
+    afterNestleEdge?: (position: Position, edge: Edge) => void;
     /**
      * 在屏幕边缘时是否自动隐藏
      */

package/es/float-button/util.d.ts

@@ -5,4 +5,7 @@ export declare function getScreenSize(): {
 };
 export declare function getNearlyEdge(el: HTMLElement, interactiveEdges?: Edge[], rect?: DOMRect): [] | [nearestEdge: Edge, subNearestEdge?: Edge];
 export declare function isInScreen(dom: HTMLElement): boolean;
-export declare function adjustBySafeAreaMargin(position: Position | undefined, rect: DOMRect | null, safeAreaMargin?: Margin): Position | undefined;
+export declare function adjustBySafeAreaMargin(position: Position | undefined, rect: {
+    width: number;
+    height: number;
+} | null, safeAreaMargin?: Margin): Position | undefined;

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

@@ -27,7 +27,7 @@ import { useDragable } from '../hooks/useDragable';
  * | SPACE       | Trigger the onClick event    |
  */
 const FloatButton = forwardRef((props, ref) => {
-    const { className, style, addonAfter, addonBefore, dragable, safeAreaMargin = [10, 10, 10, 10], autoNestleEdge = true, interactiveEdges = ['left', 'right'], autoHide, autoAlign, leftSizeOfHidden, defaultPosition, trigger, triggerType = 'click', showClose = false, align, balloonProps, children, _renderView } = props, others = __rest(props, ["className", "style", "addonAfter", "addonBefore", "dragable", "safeAreaMargin", "autoNestleEdge", "interactiveEdges", "autoHide", "autoAlign", "leftSizeOfHidden", "defaultPosition", "trigger", "triggerType", "showClose", "align", "balloonProps", "children", "_renderView"]);
+    const { className, style, addonAfter, addonBefore, dragable, safeAreaMargin = [10, 10, 10, 10], autoNestleEdge = true, interactiveEdges = ['left', 'right'], autoHide, autoAlign, leftSizeOfHidden, defaultPosition, trigger, triggerType = 'click', showClose = false, align, balloonProps, children, _renderView, beforeNestleEdge, afterNestleEdge } = props, others = __rest(props, ["className", "style", "addonAfter", "addonBefore", "dragable", "safeAreaMargin", "autoNestleEdge", "interactiveEdges", "autoHide", "autoAlign", "leftSizeOfHidden", "defaultPosition", "trigger", "triggerType", "showClose", "align", "balloonProps", "children", "_renderView", "beforeNestleEdge", "afterNestleEdge"]);
     const elRef = useRef(null);
     const triggerRef = useRef(null);
     const [el, setEl] = useState(null);
@@ -63,14 +63,18 @@ const FloatButton = forwardRef((props, ref) => {
         enable: !!autoNestleEdge,
         safeAreaMargin,
         interactiveEdges,
-        onUpdate(position) {
+        onUpdate(position, edge) {
             if (isHideRef.current) {
                 saveRestorePosition(position);
                 return false;
             }
+            if ((beforeNestleEdge === null || beforeNestleEdge === void 0 ? void 0 : beforeNestleEdge(position, edge)) === false) {
+                return false;
+            }
         },
-        onUpdateEnd() {
+        onUpdateEnd(position, edge) {
             updateAlign();
+            afterNestleEdge === null || afterNestleEdge === void 0 ? void 0 : afterNestleEdge(position, edge);
         },
     });
     useImperativeHandle(ref, () => ({
@@ -100,7 +104,7 @@ const FloatButton = forwardRef((props, ref) => {
         },
         onDragend() {
             if (!isHideRef.current) {
-                Promise.resolve().then(() => updateNestleEdge());
+                updateNestleEdge();
             }
         },
     });

package/es/index.js

@@ -5,4 +5,4 @@ export { default as FloatButton } from './float-button';
 export { default as Text } from './text';
 export { default as Tag } from './tag';
 export { default as Tab } from './tab';
-export const version = '0.1.7';
+export const version = '0.1.8';

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

@@ -86,7 +86,7 @@ function useAutoHide(dom, { enable, leftSize, interactiveEdges, }) {
         setHide(hide);
     };
     const debounceTriggerHide = (0, utils_1.useDebounce)(triggerHide, 100);
-    const throttleSetHideByMouse = (0, utils_1.useThrottle)(setHideByMouse, 250);
+    const throttleSetHideByMouse = (0, utils_1.useThrottle)(setHideByMouse, 50);
     const throttleSetHideByApi = (0, utils_1.useThrottle)(setHideByApi, 250);
     (0, react_1.useEffect)(() => {
         if (!dom) {

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

@@ -6,8 +6,8 @@ export declare function useNestleEdge(dom: HTMLElement | null, { enable, safeAre
     enable?: boolean;
     safeAreaMargin?: Margin;
     interactiveEdges?: Edge[];
-    onUpdate?: (position: Position) => void | false;
-    onUpdateEnd?: (position: Position) => void;
+    onUpdate?: (position: Position, edge: Edge) => void | false;
+    onUpdateEnd?: (position: Position, edge: Edge) => void;
 }): {
-    update: (animation?: boolean) => void;
+    update: (animation?: boolean | undefined) => void;
 };

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

@@ -8,13 +8,6 @@ const util_1 = require("../util");
  * 吸边逻辑
  */
 function useNestleEdge(dom, { enable, safeAreaMargin, interactiveEdges, onUpdate, onUpdateEnd, }) {
-    const eventTimerRef = (0, react_1.useRef)();
-    const triggerUpdateEnd = (position) => {
-        clearTimeout(eventTimerRef.current);
-        eventTimerRef.current = setTimeout(() => {
-            onUpdateEnd === null || onUpdateEnd === void 0 ? void 0 : onUpdateEnd(position);
-        }, 300);
-    };
     const update = (animation = true) => {
         if (!enable || !dom) {
             return;
@@ -23,7 +16,7 @@ function useNestleEdge(dom, { enable, safeAreaMargin, interactiveEdges, onUpdate
         const { left, top, width, height } = rect;
         const { width: screenWidth, height: screenHeight } = (0, util_1.getScreenSize)();
         const [edge] = (0, util_1.getNearlyEdge)(dom, interactiveEdges, rect);
-        const position = { left, top };
+        let position = { left, top };
         switch (edge) {
             case 'top': {
                 position.top = 0;
@@ -41,30 +34,45 @@ function useNestleEdge(dom, { enable, safeAreaMargin, interactiveEdges, onUpdate
                 position.left = 0;
                 break;
             }
-            // no default
+            default: {
+                return;
+            }
         }
-        if (position.left !== left || position.left !== top) {
-            const { left, top } = (0, util_1.adjustBySafeAreaMargin)(position, dom.getBoundingClientRect(), safeAreaMargin) ||
-                position;
-            const shouldContinue = onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate({ left, top });
-            if (shouldContinue === false) {
+        position = (0, util_1.adjustBySafeAreaMargin)(position, { width, height }, safeAreaMargin) || position;
+        if (position.left !== left || position.top !== top) {
+            if ((onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(position, edge)) === false) {
                 return;
             }
             dom.style.left = '0px';
             dom.style.top = '0px';
             if (animation) {
                 dom.style.transition = 'transform 0.25s';
+                let isRemoved = false;
+                const onEnd = (0, utils_1.throttle)(() => {
+                    onUpdateEnd === null || onUpdateEnd === void 0 ? void 0 : onUpdateEnd(position, edge);
+                    dom.removeEventListener('transitionend', onEnd);
+                    isRemoved = true;
+                }, 10);
+                dom.addEventListener('transitionend', onEnd);
+                // 超时 500ms 移除监听
+                setTimeout(() => {
+                    if (!isRemoved) {
+                        dom.removeEventListener('transitionend', onEnd);
+                    }
+                }, 500);
+                dom.style.transform = `translate(${position.left}px, ${position.top}px)`;
             }
             else {
                 dom.style.transition = '';
+                dom.style.transform = `translate(${position.left}px, ${position.top}px)`;
+                onUpdateEnd === null || onUpdateEnd === void 0 ? void 0 : onUpdateEnd(position, edge);
             }
-            dom.style.transform = `translate(${left}px, ${top}px)`;
-            triggerUpdateEnd({ left, top });
         }
     };
     const debounceUpdate = (0, utils_1.useDebounce)(() => update(), 100);
+    const throttleUpdate = (0, utils_1.useThrottle)(update, 16);
     (0, react_1.useLayoutEffect)(() => {
-        update(false);
+        throttleUpdate(false);
     });
     (0, react_1.useEffect)(() => {
         window.addEventListener('resize', debounceUpdate);
@@ -73,7 +81,7 @@ function useNestleEdge(dom, { enable, safeAreaMargin, interactiveEdges, onUpdate
         };
     }, []);
     return {
-        update,
+        update: throttleUpdate,
     };
 }
 exports.useNestleEdge = useNestleEdge;

package/lib/float-button/types.d.ts

@@ -164,6 +164,19 @@ export interface FloatButtonProps extends CommonProps {
      * @defaultValue true
      */
     autoNestleEdge?: boolean;
+    /**
+     * 当触发边缘吸附前的回调
+     * @param position - 吸附位置
+     * @param edge - 吸附的边
+     * @returns false 则不允许吸附
+     */
+    beforeNestleEdge?: (position: Position, edge: Edge) => false | void;
+    /**
+     * 吸附到边缘后的回调
+     * @param position - 吸附位置
+     * @param edge - 吸附的边
+     */
+    afterNestleEdge?: (position: Position, edge: Edge) => void;
     /**
      * 在屏幕边缘时是否自动隐藏
      */

package/lib/float-button/util.d.ts

@@ -5,4 +5,7 @@ export declare function getScreenSize(): {
 };
 export declare function getNearlyEdge(el: HTMLElement, interactiveEdges?: Edge[], rect?: DOMRect): [] | [nearestEdge: Edge, subNearestEdge?: Edge];
 export declare function isInScreen(dom: HTMLElement): boolean;
-export declare function adjustBySafeAreaMargin(position: Position | undefined, rect: DOMRect | null, safeAreaMargin?: Margin): Position | undefined;
+export declare function adjustBySafeAreaMargin(position: Position | undefined, rect: {
+    width: number;
+    height: number;
+} | null, safeAreaMargin?: Margin): Position | undefined;

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

@@ -29,7 +29,7 @@ const useDragable_1 = require("../hooks/useDragable");
  * | SPACE       | Trigger the onClick event    |
  */
 const FloatButton = (0, react_1.forwardRef)((props, ref) => {
-    const { className, style, addonAfter, addonBefore, dragable, safeAreaMargin = [10, 10, 10, 10], autoNestleEdge = true, interactiveEdges = ['left', 'right'], autoHide, autoAlign, leftSizeOfHidden, defaultPosition, trigger, triggerType = 'click', showClose = false, align, balloonProps, children, _renderView } = props, others = tslib_1.__rest(props, ["className", "style", "addonAfter", "addonBefore", "dragable", "safeAreaMargin", "autoNestleEdge", "interactiveEdges", "autoHide", "autoAlign", "leftSizeOfHidden", "defaultPosition", "trigger", "triggerType", "showClose", "align", "balloonProps", "children", "_renderView"]);
+    const { className, style, addonAfter, addonBefore, dragable, safeAreaMargin = [10, 10, 10, 10], autoNestleEdge = true, interactiveEdges = ['left', 'right'], autoHide, autoAlign, leftSizeOfHidden, defaultPosition, trigger, triggerType = 'click', showClose = false, align, balloonProps, children, _renderView, beforeNestleEdge, afterNestleEdge } = props, others = tslib_1.__rest(props, ["className", "style", "addonAfter", "addonBefore", "dragable", "safeAreaMargin", "autoNestleEdge", "interactiveEdges", "autoHide", "autoAlign", "leftSizeOfHidden", "defaultPosition", "trigger", "triggerType", "showClose", "align", "balloonProps", "children", "_renderView", "beforeNestleEdge", "afterNestleEdge"]);
     const elRef = (0, react_1.useRef)(null);
     const triggerRef = (0, react_1.useRef)(null);
     const [el, setEl] = (0, react_1.useState)(null);
@@ -65,14 +65,18 @@ const FloatButton = (0, react_1.forwardRef)((props, ref) => {
         enable: !!autoNestleEdge,
         safeAreaMargin,
         interactiveEdges,
-        onUpdate(position) {
+        onUpdate(position, edge) {
             if (isHideRef.current) {
                 saveRestorePosition(position);
                 return false;
             }
+            if ((beforeNestleEdge === null || beforeNestleEdge === void 0 ? void 0 : beforeNestleEdge(position, edge)) === false) {
+                return false;
+            }
         },
-        onUpdateEnd() {
+        onUpdateEnd(position, edge) {
             updateAlign();
+            afterNestleEdge === null || afterNestleEdge === void 0 ? void 0 : afterNestleEdge(position, edge);
         },
     });
     (0, react_1.useImperativeHandle)(ref, () => ({
@@ -102,7 +106,7 @@ const FloatButton = (0, react_1.forwardRef)((props, ref) => {
         },
         onDragend() {
             if (!isHideRef.current) {
-                Promise.resolve().then(() => updateNestleEdge());
+                updateNestleEdge();
             }
         },
     });

package/lib/index.js

@@ -18,4 +18,4 @@ var tag_1 = require("./tag");
 Object.defineProperty(exports, "Tag", { enumerable: true, get: function () { return __importDefault(tag_1).default; } });
 var tab_1 = require("./tab");
 Object.defineProperty(exports, "Tab", { enumerable: true, get: function () { return __importDefault(tab_1).default; } });
-exports.version = '0.1.7';
+exports.version = '0.1.8';

package/package.json

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