@alifd/chat 0.1.5 → 0.1.7

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

@@ -18,8 +18,9 @@ function parsePosition(position, element) {
         const maxLeft = width - rect.width;
         const maxTop = height - rect.height;
         return {
-            left: Math.min(maxLeft, normalizePositionRatio(widthRatio) * width),
-            top: Math.min(maxTop, normalizePositionRatio(heightRatio) * height),
+            transform: `translate(${Math.min(maxLeft, normalizePositionRatio(widthRatio) * width)}px, ${Math.min(maxTop, normalizePositionRatio(heightRatio) * height)}px)`,
+            left: 0,
+            top: 0,
         };
     }
     return position;

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

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react';
+import { useEffect, useLayoutEffect, useRef } from 'react';
 import { useDebounce } from '../../utils';
 import { getScreenSize, getNearlyEdge, adjustBySafeAreaMargin } from '../util';
 /**
@@ -60,11 +60,9 @@ export function useNestleEdge(dom, { enable, safeAreaMargin, interactiveEdges, o
         }
     };
     const debounceUpdate = useDebounce(() => update(), 100);
-    useEffect(() => {
-        if (dom) {
-            update(false);
-        }
-    }, [dom]);
+    useLayoutEffect(() => {
+        update(false);
+    });
     useEffect(() => {
         window.addEventListener('resize', debounceUpdate);
         return () => {

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

@@ -1,7 +1,8 @@
 /// <reference types="react" />
 declare const FloatButtonWithSub: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<Pick<import("./types").FloatButtonProps & import("react").RefAttributes<import("./types").FloatButtonRef>, "key" | keyof import("./types").FloatButtonProps> & import("@alifd/next/types/config-provider/types").ComponentCommonProps, import("./types").FloatButtonRef, {}> & {
     Backtop: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<Pick<import("./types").BacktopProps & import("react").RefAttributes<import("./types").BacktopRef>, "key" | keyof import("./types").BacktopProps> & import("@alifd/next/types/config-provider/types").ComponentCommonProps, import("./types").BacktopRef, {}>;
+    Drawer: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<import("./types").FloatButtonDrawerProps & import("@alifd/next/types/config-provider/types").ComponentCommonProps, undefined, {}>;
     InnerDrawer: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<import("./types").FloatButtonInnerDrawerProps & import("@alifd/next/types/config-provider/types").ComponentCommonProps, undefined, {}>;
 };
-export type { BacktopRef, BacktopProps, FloatButtonRef, FloatButtonProps, FloatButtonInnerDrawerProps, DragableOption, Edge, Margin, Position, RequiredParts, ScreenRatioPosition, Size, TriggerType, } from './types';
+export type { BacktopRef, BacktopProps, FloatButtonRef, FloatButtonProps, FloatButtonDrawerProps, FloatButtonInnerDrawerProps, Edge, Margin, Position, RequiredParts, ScreenRatioPosition, Size, TriggerType, } from './types';
 export default FloatButtonWithSub;

package/es/float-button/index.js

@@ -1,6 +1,7 @@
 import FloatButton from './view/float-button';
 import Backtop from './view/backtop';
 import InnerDrawer from './view/inner-drawer';
+import Drawer from './view/drawer';
 import { assignSubComponent } from '../utils/index';
-const FloatButtonWithSub = assignSubComponent(FloatButton, { Backtop, InnerDrawer });
+const FloatButtonWithSub = assignSubComponent(FloatButton, { Backtop, Drawer, InnerDrawer });
 export default FloatButtonWithSub;

package/es/float-button/main.scss

@@ -82,7 +82,7 @@
                 background-color: transparent;
 
                 &:hover {
-                    color: $color-brand1-6;
+                    color: $color-text1-4;
                 }
             }
         }

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'
@@ -205,10 +201,6 @@ export interface FloatButtonProps extends CommonProps {
     children?: React.ReactNode;
     _renderView?: (prefix: string, props: RequiredParts<FloatButtonProps, 'visible' | 'onVisibleChange'>) => ReactNode;
 }
-/**
- * @api
- * @order 5
- */
 export interface DragableOption {
     enable?: boolean;
     defaultPosition?: FloatButtonProps['defaultPosition'];
@@ -235,3 +227,20 @@ export interface FloatButtonInnerDrawerProps extends FloatButtonProps {
     beforeClose?: () => void;
     afterClose?: () => void;
 }
+/**
+ * @api FloatButton.Drawer
+ */
+export interface FloatButtonDrawerProps extends FloatButtonProps {
+    width?: string | number;
+    title?: ReactNode;
+    drawerClassName?: string;
+    /**
+     * 关闭时是否保留节点
+     * @defaultValue false
+     */
+    cache?: boolean;
+    beforeOpen?: () => void;
+    afterOpen?: () => void;
+    beforeClose?: () => void;
+    afterClose?: () => void;
+}

package/es/float-button/view/drawer.d.ts

@@ -1,8 +1,10 @@
 import React from 'react';
 import type { DrawerProps as NextDrawerProps } from '@alifd/next/types/drawer';
-import type { TriggerType } from '../types';
+import type { FloatButtonDrawerProps, TriggerType } from '../types';
 export interface DrawerProps extends Omit<NextDrawerProps, 'triggerType' | 'container' | 'onVisibleChange'> {
     onVisibleChange?: (visible: boolean, reason: string) => void;
     triggerType?: TriggerType | TriggerType[];
 }
-export declare function Drawer({ prefix, target, children, trigger, triggerType, visible, onVisibleChange, ...rests }: DrawerProps): React.JSX.Element;
+export declare function Drawer({ prefix, children, trigger, triggerType, visible, onVisibleChange, ...rests }: DrawerProps): React.JSX.Element;
+declare const _default: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<FloatButtonDrawerProps & import("@alifd/next/types/config-provider/types").ComponentCommonProps, undefined, {}>;
+export default _default;

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

@@ -1,9 +1,10 @@
 import { __rest } from "tslib";
 import React from 'react';
-import { Drawer as NextDrawer } from '@alifd/next';
+import { Drawer as NextDrawer, ConfigProvider } from '@alifd/next';
 import { useTriggerType } from '../hooks/useTriggerType';
+import FloatButton from './float-button';
 export function Drawer(_a) {
-    var { prefix, target, children, trigger, triggerType, visible, onVisibleChange } = _a, rests = __rest(_a, ["prefix", "target", "children", "trigger", "triggerType", "visible", "onVisibleChange"]);
+    var { prefix, children, trigger, triggerType, visible, onVisibleChange } = _a, rests = __rest(_a, ["prefix", "children", "trigger", "triggerType", "visible", "onVisibleChange"]);
     const handlers = useTriggerType({ visible, onVisibleChange, triggerType });
     return (React.createElement(React.Fragment, null,
         React.createElement("div", Object.assign({}, handlers), trigger),
@@ -11,3 +12,10 @@ export function Drawer(_a) {
                 onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(false, reason);
             }, v2: true }), children)));
 }
+function FloatButtonDrawer(_a) {
+    var { width, title, drawerClassName, cache = false, beforeOpen, afterOpen, beforeClose, afterClose } = _a, rests = __rest(_a, ["width", "title", "drawerClassName", "cache", "beforeOpen", "afterOpen", "beforeClose", "afterClose"]);
+    return (React.createElement(FloatButton, Object.assign({}, rests, { _renderView: (prefix, { visible, onVisibleChange, trigger, triggerType, showClose, children }) => {
+            return (React.createElement(Drawer, { prefix: prefix, className: drawerClassName, visible: visible, onVisibleChange: onVisibleChange, trigger: trigger, closeMode: ['esc', 'mask', ...(showClose ? ['close'] : [])], triggerType: triggerType, cache: cache }, children));
+        } })));
+}
+export default ConfigProvider.config(FloatButtonDrawer);

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

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

@@ -21,8 +21,9 @@ function parsePosition(position, element) {
         const maxLeft = width - rect.width;
         const maxTop = height - rect.height;
         return {
-            left: Math.min(maxLeft, normalizePositionRatio(widthRatio) * width),
-            top: Math.min(maxTop, normalizePositionRatio(heightRatio) * height),
+            transform: `translate(${Math.min(maxLeft, normalizePositionRatio(widthRatio) * width)}px, ${Math.min(maxTop, normalizePositionRatio(heightRatio) * height)}px)`,
+            left: 0,
+            top: 0,
         };
     }
     return position;

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

@@ -63,11 +63,9 @@ function useNestleEdge(dom, { enable, safeAreaMargin, interactiveEdges, onUpdate
         }
     };
     const debounceUpdate = (0, utils_1.useDebounce)(() => update(), 100);
-    (0, react_1.useEffect)(() => {
-        if (dom) {
-            update(false);
-        }
-    }, [dom]);
+    (0, react_1.useLayoutEffect)(() => {
+        update(false);
+    });
     (0, react_1.useEffect)(() => {
         window.addEventListener('resize', debounceUpdate);
         return () => {

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

@@ -1,7 +1,8 @@
 /// <reference types="react" />
 declare const FloatButtonWithSub: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<Pick<import("./types").FloatButtonProps & import("react").RefAttributes<import("./types").FloatButtonRef>, "key" | keyof import("./types").FloatButtonProps> & import("@alifd/next/types/config-provider/types").ComponentCommonProps, import("./types").FloatButtonRef, {}> & {
     Backtop: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<Pick<import("./types").BacktopProps & import("react").RefAttributes<import("./types").BacktopRef>, "key" | keyof import("./types").BacktopProps> & import("@alifd/next/types/config-provider/types").ComponentCommonProps, import("./types").BacktopRef, {}>;
+    Drawer: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<import("./types").FloatButtonDrawerProps & import("@alifd/next/types/config-provider/types").ComponentCommonProps, undefined, {}>;
     InnerDrawer: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<import("./types").FloatButtonInnerDrawerProps & import("@alifd/next/types/config-provider/types").ComponentCommonProps, undefined, {}>;
 };
-export type { BacktopRef, BacktopProps, FloatButtonRef, FloatButtonProps, FloatButtonInnerDrawerProps, DragableOption, Edge, Margin, Position, RequiredParts, ScreenRatioPosition, Size, TriggerType, } from './types';
+export type { BacktopRef, BacktopProps, FloatButtonRef, FloatButtonProps, FloatButtonDrawerProps, FloatButtonInnerDrawerProps, Edge, Margin, Position, RequiredParts, ScreenRatioPosition, Size, TriggerType, } from './types';
 export default FloatButtonWithSub;

package/lib/float-button/index.js

@@ -4,6 +4,7 @@ const tslib_1 = require("tslib");
 const float_button_1 = tslib_1.__importDefault(require("./view/float-button"));
 const backtop_1 = tslib_1.__importDefault(require("./view/backtop"));
 const inner_drawer_1 = tslib_1.__importDefault(require("./view/inner-drawer"));
+const drawer_1 = tslib_1.__importDefault(require("./view/drawer"));
 const index_1 = require("../utils/index");
-const FloatButtonWithSub = (0, index_1.assignSubComponent)(float_button_1.default, { Backtop: backtop_1.default, InnerDrawer: inner_drawer_1.default });
+const FloatButtonWithSub = (0, index_1.assignSubComponent)(float_button_1.default, { Backtop: backtop_1.default, Drawer: drawer_1.default, InnerDrawer: inner_drawer_1.default });
 exports.default = FloatButtonWithSub;

package/lib/float-button/main.scss

@@ -82,7 +82,7 @@
                 background-color: transparent;
 
                 &:hover {
-                    color: $color-brand1-6;
+                    color: $color-text1-4;
                 }
             }
         }

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'
@@ -205,10 +201,6 @@ export interface FloatButtonProps extends CommonProps {
     children?: React.ReactNode;
     _renderView?: (prefix: string, props: RequiredParts<FloatButtonProps, 'visible' | 'onVisibleChange'>) => ReactNode;
 }
-/**
- * @api
- * @order 5
- */
 export interface DragableOption {
     enable?: boolean;
     defaultPosition?: FloatButtonProps['defaultPosition'];
@@ -235,3 +227,20 @@ export interface FloatButtonInnerDrawerProps extends FloatButtonProps {
     beforeClose?: () => void;
     afterClose?: () => void;
 }
+/**
+ * @api FloatButton.Drawer
+ */
+export interface FloatButtonDrawerProps extends FloatButtonProps {
+    width?: string | number;
+    title?: ReactNode;
+    drawerClassName?: string;
+    /**
+     * 关闭时是否保留节点
+     * @defaultValue false
+     */
+    cache?: boolean;
+    beforeOpen?: () => void;
+    afterOpen?: () => void;
+    beforeClose?: () => void;
+    afterClose?: () => void;
+}

package/lib/float-button/view/drawer.d.ts

@@ -1,8 +1,10 @@
 import React from 'react';
 import type { DrawerProps as NextDrawerProps } from '@alifd/next/types/drawer';
-import type { TriggerType } from '../types';
+import type { FloatButtonDrawerProps, TriggerType } from '../types';
 export interface DrawerProps extends Omit<NextDrawerProps, 'triggerType' | 'container' | 'onVisibleChange'> {
     onVisibleChange?: (visible: boolean, reason: string) => void;
     triggerType?: TriggerType | TriggerType[];
 }
-export declare function Drawer({ prefix, target, children, trigger, triggerType, visible, onVisibleChange, ...rests }: DrawerProps): React.JSX.Element;
+export declare function Drawer({ prefix, children, trigger, triggerType, visible, onVisibleChange, ...rests }: DrawerProps): React.JSX.Element;
+declare const _default: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<FloatButtonDrawerProps & import("@alifd/next/types/config-provider/types").ComponentCommonProps, undefined, {}>;
+export default _default;

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

@@ -5,8 +5,9 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const next_1 = require("@alifd/next");
 const useTriggerType_1 = require("../hooks/useTriggerType");
+const float_button_1 = tslib_1.__importDefault(require("./float-button"));
 function Drawer(_a) {
-    var { prefix, target, children, trigger, triggerType, visible, onVisibleChange } = _a, rests = tslib_1.__rest(_a, ["prefix", "target", "children", "trigger", "triggerType", "visible", "onVisibleChange"]);
+    var { prefix, children, trigger, triggerType, visible, onVisibleChange } = _a, rests = tslib_1.__rest(_a, ["prefix", "children", "trigger", "triggerType", "visible", "onVisibleChange"]);
     const handlers = (0, useTriggerType_1.useTriggerType)({ visible, onVisibleChange, triggerType });
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("div", Object.assign({}, handlers), trigger),
@@ -15,3 +16,10 @@ function Drawer(_a) {
             }, v2: true }), children)));
 }
 exports.Drawer = Drawer;
+function FloatButtonDrawer(_a) {
+    var { width, title, drawerClassName, cache = false, beforeOpen, afterOpen, beforeClose, afterClose } = _a, rests = tslib_1.__rest(_a, ["width", "title", "drawerClassName", "cache", "beforeOpen", "afterOpen", "beforeClose", "afterClose"]);
+    return (react_1.default.createElement(float_button_1.default, Object.assign({}, rests, { _renderView: (prefix, { visible, onVisibleChange, trigger, triggerType, showClose, children }) => {
+            return (react_1.default.createElement(Drawer, { prefix: prefix, className: drawerClassName, visible: visible, onVisibleChange: onVisibleChange, trigger: trigger, closeMode: ['esc', 'mask', ...(showClose ? ['close'] : [])], triggerType: triggerType, cache: cache }, children));
+        } })));
+}
+exports.default = next_1.ConfigProvider.config(FloatButtonDrawer);

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

package/package.json

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