@alifd/chat 0.1.6 → 0.1.7

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

@@ -181,10 +181,6 @@ export interface FloatButtonProps extends CommonProps {
      * 触发节点
      */
     trigger: NonNullable<BalloonProps['trigger']>;
-    /**
-     * 隐藏时的触发节点，默认为 trigger
-     */
-    hiddenTrigger?: BalloonProps['trigger'];
     /**
      * 触发方式
      * @defaultValue 'click'

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

@@ -22,7 +22,7 @@ function getMountTarget(prefix, target) {
         parent = document.createElement('div');
         parent.classList.add(`${prefix}outer`);
         parent.dataset.chat = 'drawer';
-        oldParent.appendChild(parent);
+        oldParent.insertBefore(parent, dom);
         parent.appendChild(dom);
     }
     let mountTarget = parent.childNodes[1];
@@ -35,11 +35,27 @@ function getMountTarget(prefix, target) {
         parent.appendChild(mountTarget);
     }
     dom.classList.add(`${prefix}inner-start`);
-    return mountTarget;
+    return {
+        mountTarget,
+        unmount() {
+            // 这里直接根据 mountTarget 的 dom 结构来卸载，防止 dom 结构发生变化导致报错
+            if (!document.body.contains(mountTarget)) {
+                return;
+            }
+            const outer = mountTarget.parentElement;
+            if (!outer.dataset.chat) {
+                return;
+            }
+            const dom = outer.childNodes[0];
+            dom.classList.remove(`${prefix}inner-start`);
+            outer.parentElement.replaceChild(dom, outer);
+        },
+    };
 }
 export function InnerDrawer({ className, prefix, target, children, trigger, triggerType, visible, onVisibleChange, closable = true, title, cache = false, width = 400, beforeOpen, beforeClose, afterOpen, afterClose, }) {
     const cls = `${prefix}inner-drawer`;
     const [mountTarget, setMountTarget] = useState(null);
+    const effectsRef = useRef(new Map());
     const [showPane, setShowPane] = useState(!!visible);
     const propsRef = useRef({ visible, afterOpen, afterClose });
     propsRef.current = {
@@ -54,10 +70,29 @@ export function InnerDrawer({ className, prefix, target, children, trigger, trig
     };
     useEffect(() => {
         if (visible) {
-            setMountTarget(getMountTarget(`${cls}-`, target));
+            const prefix = `${cls}-`;
+            const results = getMountTarget(prefix, target);
+            if (!results) {
+                return;
+            }
+            setMountTarget(pre => {
+                var _a;
+                if (pre !== results.mountTarget) {
+                    // 当挂载节点发生变化时，清除上一次的副作用，保存本次的副作用清除函数
+                    (_a = effectsRef.current.get('mount')) === null || _a === void 0 ? void 0 : _a();
+                    effectsRef.current.set('mount', results.unmount);
+                }
+                return results.mountTarget;
+            });
             setShowPane(true);
         }
     }, [visible]);
+    useEffect(() => {
+        return () => {
+            // 组件卸载，清除副作用
+            effectsRef.current.forEach(f => f());
+        };
+    }, []);
     const handleVisibleChange = (nextVisible, type) => {
         onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(nextVisible, type);
     };

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.6';
+export const version = '0.1.7';

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

@@ -181,10 +181,6 @@ export interface FloatButtonProps extends CommonProps {
      * 触发节点
      */
     trigger: NonNullable<BalloonProps['trigger']>;
-    /**
-     * 隐藏时的触发节点，默认为 trigger
-     */
-    hiddenTrigger?: BalloonProps['trigger'];
     /**
      * 触发方式
      * @defaultValue 'click'

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

@@ -25,7 +25,7 @@ function getMountTarget(prefix, target) {
         parent = document.createElement('div');
         parent.classList.add(`${prefix}outer`);
         parent.dataset.chat = 'drawer';
-        oldParent.appendChild(parent);
+        oldParent.insertBefore(parent, dom);
         parent.appendChild(dom);
     }
     let mountTarget = parent.childNodes[1];
@@ -38,11 +38,27 @@ function getMountTarget(prefix, target) {
         parent.appendChild(mountTarget);
     }
     dom.classList.add(`${prefix}inner-start`);
-    return mountTarget;
+    return {
+        mountTarget,
+        unmount() {
+            // 这里直接根据 mountTarget 的 dom 结构来卸载，防止 dom 结构发生变化导致报错
+            if (!document.body.contains(mountTarget)) {
+                return;
+            }
+            const outer = mountTarget.parentElement;
+            if (!outer.dataset.chat) {
+                return;
+            }
+            const dom = outer.childNodes[0];
+            dom.classList.remove(`${prefix}inner-start`);
+            outer.parentElement.replaceChild(dom, outer);
+        },
+    };
 }
 function InnerDrawer({ className, prefix, target, children, trigger, triggerType, visible, onVisibleChange, closable = true, title, cache = false, width = 400, beforeOpen, beforeClose, afterOpen, afterClose, }) {
     const cls = `${prefix}inner-drawer`;
     const [mountTarget, setMountTarget] = (0, react_1.useState)(null);
+    const effectsRef = (0, react_1.useRef)(new Map());
     const [showPane, setShowPane] = (0, react_1.useState)(!!visible);
     const propsRef = (0, react_1.useRef)({ visible, afterOpen, afterClose });
     propsRef.current = {
@@ -57,10 +73,29 @@ function InnerDrawer({ className, prefix, target, children, trigger, triggerType
     };
     (0, react_1.useEffect)(() => {
         if (visible) {
-            setMountTarget(getMountTarget(`${cls}-`, target));
+            const prefix = `${cls}-`;
+            const results = getMountTarget(prefix, target);
+            if (!results) {
+                return;
+            }
+            setMountTarget(pre => {
+                var _a;
+                if (pre !== results.mountTarget) {
+                    // 当挂载节点发生变化时，清除上一次的副作用，保存本次的副作用清除函数
+                    (_a = effectsRef.current.get('mount')) === null || _a === void 0 ? void 0 : _a();
+                    effectsRef.current.set('mount', results.unmount);
+                }
+                return results.mountTarget;
+            });
             setShowPane(true);
         }
     }, [visible]);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            // 组件卸载，清除副作用
+            effectsRef.current.forEach(f => f());
+        };
+    }, []);
     const handleVisibleChange = (nextVisible, type) => {
         onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(nextVisible, type);
     };

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.6';
+exports.version = '0.1.7';

package/package.json

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