@alifd/chat 0.1.2 → 0.1.4

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

@@ -16,7 +16,7 @@ export function useTriggerType({ triggerType, visible, onVisibleChange, }) {
     }, 150);
     if (allowClick) {
         triggerHandlerProps.onClick = () => {
-            onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(!visible, 'fromeTrigger');
+            onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(!visible, 'fromTrigger');
         };
     }
     if (allowHover) {

package/es/float-button/main.scss

@@ -18,9 +18,7 @@
 
     &-inner-drawer {
         flex: 1;
-        display: flex;
         overflow: hidden;
-        display: flex;
         box-shadow: $shadow-2;
         border-radius: $size-base * 2;
 
@@ -36,24 +34,38 @@
                 width 0.3s,
                 opacity 0.3s;
             display: flex;
+            width: 0;
+            opacity: 0;
         }
         &-inner {
-            flex: 1;
+            width: 100%;
+            height: 100%;
             display: flex;
             flex-direction: column;
+
+            &--has-title {
+                .#{$prefix}float-button-inner-drawer {
+                    &-header {
+                        padding: $size-base * 2 $size-base * 3;
+                    }
+                    &-body {
+                        padding-top: 0;
+                    }
+                }
+            }
         }
         &-header {
             flex: none;
-            display: flex;
-            justify-content: end;
-            padding: $size-base * 2 $size-base * 3;
+            position: relative;
             &-title {
-                flex: 1;
                 font-size: $font-size-subhead;
                 line-height: 1.5;
+                padding-right: $size-base * 2;
             }
             &-close {
-                flex: none;
+                position: absolute;
+                right: $size-base * 2;
+                top: $size-base * 2;
                 color: $color-text1-2;
                 cursor: pointer;
                 transition: color 0.15s;
@@ -70,7 +82,7 @@
         }
         &-body {
             flex: 1;
-            padding: 0 $size-base * 3 $size-base * 2;
+            padding: $size-base * 2 $size-base * 3;
         }
         &-footer {
             flex: none;

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

@@ -109,20 +109,6 @@ export type RequiredParts<O, K extends keyof O> = Omit<O, K> & Required<Pick<O,
 export interface FloatButtonProps extends CommonProps {
     className?: string;
     style?: React.CSSProperties;
-    /**
-     * 面板展示类型
-     * @defaultValue 'balloon'
-     * @example
-     * - `balloon`: 悬浮面板
-     * - `drawer`: 悬浮侧边抽屉
-     * - `inner-drawer`: 文档内部抽屉
-     */
-    type?: 'balloon' | 'drawer' | 'inner-drawer';
-    drawerProps?: {
-        title?: ReactNode;
-        width?: number | string;
-        target: string | (() => HTMLElement);
-    };
     /**
      * 弹层位置，适用 `type`: 'balloon'
      */
@@ -238,4 +224,14 @@ export interface FloatButtonInnerDrawerProps extends FloatButtonProps {
     width?: string | number;
     target: string | (() => HTMLElement);
     title?: ReactNode;
+    drawerClassName?: string;
+    /**
+     * 关闭时是否保留节点
+     * @defaultValue false
+     */
+    cache?: boolean;
+    beforeOpen?: () => void;
+    afterOpen?: () => void;
+    beforeClose?: () => void;
+    afterClose?: () => void;
 }

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

@@ -1,5 +1,5 @@
 import { __rest } from "tslib";
-import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState, } from 'react';
+import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import cs from 'classnames';
 import { Balloon, ConfigProvider } from '@alifd/next';
 import { PREFIX_DEFAULT, useControlable } from '../../utils/index';
@@ -7,7 +7,6 @@ import { useAutoHide } from '../hooks/useAutoHide';
 import { useAutoAlign } from '../hooks/useAutoAlign';
 import { useNestleEdge } from '../hooks/useNestleEdge';
 import { useDragable } from '../hooks/useDragable';
-// import { InnerDrawer } from './inner-drawer';
 /**
  * @component 悬浮球
  * @en FloatButton
@@ -28,7 +27,7 @@ import { useDragable } from '../hooks/useDragable';
  * | SPACE       | Trigger the onClick event    |
  */
 const FloatButton = forwardRef((props, ref) => {
-    const { className, style, type = 'balloon', addonAfter, addonBefore, dragable, safeAreaMargin = [10, 10, 10, 10], autoNestleEdge = true, interactiveEdges = ['left', 'right'], autoHide, autoAlign, leftSizeOfHidden, defaultPosition, trigger, triggerType = 'click', showClose = true, align, balloonProps, drawerProps, children, _renderView } = props, others = __rest(props, ["className", "style", "type", "addonAfter", "addonBefore", "dragable", "safeAreaMargin", "autoNestleEdge", "interactiveEdges", "autoHide", "autoAlign", "leftSizeOfHidden", "defaultPosition", "trigger", "triggerType", "showClose", "align", "balloonProps", "drawerProps", "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 } = props, others = __rest(props, ["className", "style", "addonAfter", "addonBefore", "dragable", "safeAreaMargin", "autoNestleEdge", "interactiveEdges", "autoHide", "autoAlign", "leftSizeOfHidden", "defaultPosition", "trigger", "triggerType", "showClose", "align", "balloonProps", "children", "_renderView"]);
     const elRef = useRef(null);
     const triggerRef = useRef(null);
     const [el, setEl] = useState(null);
@@ -44,7 +43,7 @@ const FloatButton = forwardRef((props, ref) => {
         setTriggerEl(triggerRef.current);
     }, []);
     const { align: currentAlign, update: _updateAlign } = useAutoAlign(el === null || el === void 0 ? void 0 : el.querySelector(`.${cls}-popup`), triggerEl, {
-        enable: type === 'balloon' && autoAlign,
+        enable: autoAlign,
         defaultAlign: align,
     });
     const updateAlign = () => {
@@ -121,33 +120,11 @@ const FloatButton = forwardRef((props, ref) => {
                 },
             }, popupClassName: `${cls}-popup`, trigger: trigger, popupContainer: () => el, triggerType: triggerType, align: currentAlign, v2: true, closable: showClose, autoAdjust: false }, balloonProps), children));
     };
-    // const renderDrawer = () => {
-    //     return <div></div>;
-    // };
-    // const renderInnerDrawer = () => {
-    //     return (
-    //         <InnerDrawer
-    //             {...drawerProps}
-    //             prefix={`${cls}-`}
-    //             target=".card-legal-affairs"
-    //             trigger={trigger}
-    //             triggerType={triggerType}
-    //             visible={visible}
-    //             closable={showClose}
-    //             onVisibleChange={(...args) => {
-    //                 if (draggedRef.current) {
-    //                     return;
-    //                 }
-    //                 onVisibleChange?.(...args);
-    //             }}
-    //         >
-    //             {children}
-    //         </InnerDrawer>
-    //     );
-    // };
     const renderView = () => {
         if (typeof _renderView === 'function') {
-            return _renderView(`${cls}-`, Object.assign(Object.assign({}, props), { visible, onVisibleChange: handleVisibleChange }));
+            return _renderView(`${cls}-`, Object.assign(Object.assign({}, props), { triggerType,
+                showClose,
+                visible, onVisibleChange: handleVisibleChange }));
         }
         return renderBalloon();
     };

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

@@ -12,7 +12,12 @@ export interface InnerDrawerProps {
     closable?: boolean;
     triggerType: FloatButtonProps['triggerType'];
     width?: string | number;
+    cache?: boolean;
+    beforeOpen?: () => void;
+    afterOpen?: () => void;
+    beforeClose?: () => void;
+    afterClose?: () => void;
 }
-export declare function InnerDrawer({ className, prefix, target, children, trigger, triggerType, visible, onVisibleChange, closable, title, width, }: InnerDrawerProps): React.JSX.Element;
+export declare function InnerDrawer({ className, prefix, target, children, trigger, triggerType, visible, onVisibleChange, closable, title, cache, width, beforeOpen, beforeClose, afterOpen, afterClose, }: InnerDrawerProps): React.JSX.Element;
 declare const _default: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<FloatButtonInnerDrawerProps & import("@alifd/next/types/config-provider/types").ComponentCommonProps, undefined, {}>;
 export default _default;

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

@@ -1,5 +1,5 @@
 import { __rest } from "tslib";
-import React, { useRef, useLayoutEffect, useEffect, useState } from 'react';
+import React, { useRef, useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
 import cs from 'classnames';
 import { Icon, ConfigProvider } from '@alifd/next';
@@ -37,36 +37,70 @@ function getMountTarget(prefix, target) {
     dom.classList.add(`${prefix}inner-start`);
     return mountTarget;
 }
-export function InnerDrawer({ className, prefix, target, children, trigger, triggerType, visible, onVisibleChange, closable = true, title, width = 400, }) {
-    const [mount, setMount] = useState(!!visible);
+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 [showPane, setShowPane] = useState(!!visible);
+    const propsRef = useRef({ visible, afterOpen, afterClose });
+    propsRef.current = {
+        visible,
+        afterOpen,
+        afterClose() {
+            afterClose === null || afterClose === void 0 ? void 0 : afterClose();
+            if (!cache) {
+                setShowPane(false);
+            }
+        },
+    };
     useEffect(() => {
         if (visible) {
-            setMount(visible);
+            setMountTarget(getMountTarget(`${cls}-`, target));
+            setShowPane(true);
         }
     }, [visible]);
-    const cls = `${prefix}inner-drawer`;
     const handleVisibleChange = (nextVisible, type) => {
         onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(nextVisible, type);
     };
     const handleVisibleChangeRef = useRef(handleVisibleChange);
     handleVisibleChangeRef.current = handleVisibleChange;
     const handlers = useTriggerType({ visible, onVisibleChange: handleVisibleChange, triggerType });
-    const mountTarget = mount ? getMountTarget(`${cls}-`, target) : undefined;
     const domRef = useRef(null);
     const triggerRef = useRef(null);
-    useLayoutEffect(() => {
-        if (mountTarget) {
-            const timer = setTimeout(() => {
-                mountTarget.style.width = visible
-                    ? `${typeof width === 'number' ? `${width}px` : width}`
-                    : '0px';
-                mountTarget.style.opacity = visible ? '1' : '0';
-            }, 16);
+    useEffect(() => {
+        if (!mountTarget) {
+            return;
+        }
+        if (visible) {
+            beforeOpen === null || beforeOpen === void 0 ? void 0 : beforeOpen();
+            const id = requestAnimationFrame(() => {
+                mountTarget.style.width = `${typeof width === 'number' ? `${width}px` : width}`;
+                mountTarget.style.opacity = '1';
+            });
             return () => {
-                clearTimeout(timer);
+                cancelAnimationFrame(id);
             };
         }
-    });
+        else {
+            beforeClose === null || beforeClose === void 0 ? void 0 : beforeClose();
+            mountTarget.style.width = `0px`;
+            mountTarget.style.opacity = '0';
+        }
+    }, [visible, mountTarget]);
+    useEffect(() => {
+        if (!mountTarget) {
+            return;
+        }
+        const onEnd = (e) => {
+            if (e.target === mountTarget && e.propertyName === 'width') {
+                const { visible, afterClose, afterOpen } = propsRef.current;
+                visible ? afterOpen === null || afterOpen === void 0 ? void 0 : afterOpen() : afterClose === null || afterClose === void 0 ? void 0 : afterClose();
+            }
+        };
+        mountTarget.addEventListener('transitionend', onEnd);
+        return () => {
+            mountTarget.removeEventListener('transitionend', onEnd);
+        };
+    }, [mountTarget]);
     useEffect(() => {
         if (!mountTarget || !className) {
             return;
@@ -96,20 +130,22 @@ export function InnerDrawer({ className, prefix, target, children, trigger, trig
     return (React.createElement(React.Fragment, null,
         React.createElement("div", Object.assign({}, handlers, { ref: triggerRef }), trigger),
         !!mountTarget &&
-            ReactDOM.createPortal(React.createElement("div", { className: cs(cls, { [`${cls}--visible`]: visible }), ref: domRef, style: { width } },
-                React.createElement("div", { className: `${cls}-inner` },
-                    React.createElement("div", { className: `${cls}-header` },
+            ReactDOM.createPortal(React.createElement("div", { className: cs(cls, { [`${cls}--visible`]: visible }), ref: domRef },
+                React.createElement("div", { className: cs(`${cls}-inner`, {
+                        [`${cls}-inner--has-title`]: !!title,
+                    }), style: { width } },
+                    React.createElement("div", { className: cs(`${cls}-header`) },
                         !!title && React.createElement("div", { className: `${cls}-header-title` }, title),
-                        !!closable && (React.createElement("button", { className: `${cls}-header-close`, onClick: () => handleVisibleChange(false, 'close') },
+                        !!closable && (React.createElement("button", { className: `${cls}-header-close`, onClick: () => handleVisibleChange(false, 'closeClick') },
                             React.createElement(Icon, { className: `${cls}-header-close-icon`, type: "close", size: 12 })))),
-                    React.createElement("div", { className: `${cls}-body` }, children))), mountTarget)));
+                    React.createElement("div", { className: `${cls}-body` }, showPane ? children : null))), mountTarget)));
 }
 function FloatButtonByInnerDrawer(props) {
-    const { width, title, target } = props, rests = __rest(props, ["width", "title", "target"]);
+    const { width, title, target, drawerClassName, cache = false, beforeOpen, afterOpen, beforeClose, afterClose } = props, rests = __rest(props, ["width", "title", "target", "drawerClassName", "cache", "beforeOpen", "afterOpen", "beforeClose", "afterClose"]);
     return (React.createElement(FloatButton, Object.assign({}, rests, { _renderView: (prefix, { trigger, triggerType, visible, onVisibleChange, showClose, children }) => {
-            return (React.createElement(InnerDrawer, { prefix: prefix, target: target, width: width, title: title, trigger: trigger, triggerType: triggerType, visible: visible, closable: showClose, onVisibleChange: (...args) => {
+            return (React.createElement(InnerDrawer, { className: drawerClassName, prefix: prefix, target: target, width: width, title: title, trigger: trigger, triggerType: triggerType, visible: visible, closable: showClose, onVisibleChange: (...args) => {
                     onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(...args);
-                } }, children));
+                }, cache: cache, beforeOpen: beforeOpen, afterOpen: afterOpen, beforeClose: beforeClose, afterClose: afterClose }, children));
         } })));
 }
 export default ConfigProvider.config(FloatButtonByInnerDrawer);

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

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

@@ -19,7 +19,7 @@ function useTriggerType({ triggerType, visible, onVisibleChange, }) {
     }, 150);
     if (allowClick) {
         triggerHandlerProps.onClick = () => {
-            onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(!visible, 'fromeTrigger');
+            onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(!visible, 'fromTrigger');
         };
     }
     if (allowHover) {

package/lib/float-button/main.scss

@@ -18,9 +18,7 @@
 
     &-inner-drawer {
         flex: 1;
-        display: flex;
         overflow: hidden;
-        display: flex;
         box-shadow: $shadow-2;
         border-radius: $size-base * 2;
 
@@ -36,24 +34,38 @@
                 width 0.3s,
                 opacity 0.3s;
             display: flex;
+            width: 0;
+            opacity: 0;
         }
         &-inner {
-            flex: 1;
+            width: 100%;
+            height: 100%;
             display: flex;
             flex-direction: column;
+
+            &--has-title {
+                .#{$prefix}float-button-inner-drawer {
+                    &-header {
+                        padding: $size-base * 2 $size-base * 3;
+                    }
+                    &-body {
+                        padding-top: 0;
+                    }
+                }
+            }
         }
         &-header {
             flex: none;
-            display: flex;
-            justify-content: end;
-            padding: $size-base * 2 $size-base * 3;
+            position: relative;
             &-title {
-                flex: 1;
                 font-size: $font-size-subhead;
                 line-height: 1.5;
+                padding-right: $size-base * 2;
             }
             &-close {
-                flex: none;
+                position: absolute;
+                right: $size-base * 2;
+                top: $size-base * 2;
                 color: $color-text1-2;
                 cursor: pointer;
                 transition: color 0.15s;
@@ -70,7 +82,7 @@
         }
         &-body {
             flex: 1;
-            padding: 0 $size-base * 3 $size-base * 2;
+            padding: $size-base * 2 $size-base * 3;
         }
         &-footer {
             flex: none;

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

@@ -109,20 +109,6 @@ export type RequiredParts<O, K extends keyof O> = Omit<O, K> & Required<Pick<O,
 export interface FloatButtonProps extends CommonProps {
     className?: string;
     style?: React.CSSProperties;
-    /**
-     * 面板展示类型
-     * @defaultValue 'balloon'
-     * @example
-     * - `balloon`: 悬浮面板
-     * - `drawer`: 悬浮侧边抽屉
-     * - `inner-drawer`: 文档内部抽屉
-     */
-    type?: 'balloon' | 'drawer' | 'inner-drawer';
-    drawerProps?: {
-        title?: ReactNode;
-        width?: number | string;
-        target: string | (() => HTMLElement);
-    };
     /**
      * 弹层位置，适用 `type`: 'balloon'
      */
@@ -238,4 +224,14 @@ export interface FloatButtonInnerDrawerProps extends FloatButtonProps {
     width?: string | number;
     target: string | (() => HTMLElement);
     title?: ReactNode;
+    drawerClassName?: string;
+    /**
+     * 关闭时是否保留节点
+     * @defaultValue false
+     */
+    cache?: boolean;
+    beforeOpen?: () => void;
+    afterOpen?: () => void;
+    beforeClose?: () => void;
+    afterClose?: () => void;
 }

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

@@ -9,7 +9,6 @@ const useAutoHide_1 = require("../hooks/useAutoHide");
 const useAutoAlign_1 = require("../hooks/useAutoAlign");
 const useNestleEdge_1 = require("../hooks/useNestleEdge");
 const useDragable_1 = require("../hooks/useDragable");
-// import { InnerDrawer } from './inner-drawer';
 /**
  * @component 悬浮球
  * @en FloatButton
@@ -30,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, type = 'balloon', addonAfter, addonBefore, dragable, safeAreaMargin = [10, 10, 10, 10], autoNestleEdge = true, interactiveEdges = ['left', 'right'], autoHide, autoAlign, leftSizeOfHidden, defaultPosition, trigger, triggerType = 'click', showClose = true, align, balloonProps, drawerProps, children, _renderView } = props, others = tslib_1.__rest(props, ["className", "style", "type", "addonAfter", "addonBefore", "dragable", "safeAreaMargin", "autoNestleEdge", "interactiveEdges", "autoHide", "autoAlign", "leftSizeOfHidden", "defaultPosition", "trigger", "triggerType", "showClose", "align", "balloonProps", "drawerProps", "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 } = 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 elRef = (0, react_1.useRef)(null);
     const triggerRef = (0, react_1.useRef)(null);
     const [el, setEl] = (0, react_1.useState)(null);
@@ -46,7 +45,7 @@ const FloatButton = (0, react_1.forwardRef)((props, ref) => {
         setTriggerEl(triggerRef.current);
     }, []);
     const { align: currentAlign, update: _updateAlign } = (0, useAutoAlign_1.useAutoAlign)(el === null || el === void 0 ? void 0 : el.querySelector(`.${cls}-popup`), triggerEl, {
-        enable: type === 'balloon' && autoAlign,
+        enable: autoAlign,
         defaultAlign: align,
     });
     const updateAlign = () => {
@@ -123,33 +122,11 @@ const FloatButton = (0, react_1.forwardRef)((props, ref) => {
                 },
             }, popupClassName: `${cls}-popup`, trigger: trigger, popupContainer: () => el, triggerType: triggerType, align: currentAlign, v2: true, closable: showClose, autoAdjust: false }, balloonProps), children));
     };
-    // const renderDrawer = () => {
-    //     return <div></div>;
-    // };
-    // const renderInnerDrawer = () => {
-    //     return (
-    //         <InnerDrawer
-    //             {...drawerProps}
-    //             prefix={`${cls}-`}
-    //             target=".card-legal-affairs"
-    //             trigger={trigger}
-    //             triggerType={triggerType}
-    //             visible={visible}
-    //             closable={showClose}
-    //             onVisibleChange={(...args) => {
-    //                 if (draggedRef.current) {
-    //                     return;
-    //                 }
-    //                 onVisibleChange?.(...args);
-    //             }}
-    //         >
-    //             {children}
-    //         </InnerDrawer>
-    //     );
-    // };
     const renderView = () => {
         if (typeof _renderView === 'function') {
-            return _renderView(`${cls}-`, Object.assign(Object.assign({}, props), { visible, onVisibleChange: handleVisibleChange }));
+            return _renderView(`${cls}-`, Object.assign(Object.assign({}, props), { triggerType,
+                showClose,
+                visible, onVisibleChange: handleVisibleChange }));
         }
         return renderBalloon();
     };

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

@@ -12,7 +12,12 @@ export interface InnerDrawerProps {
     closable?: boolean;
     triggerType: FloatButtonProps['triggerType'];
     width?: string | number;
+    cache?: boolean;
+    beforeOpen?: () => void;
+    afterOpen?: () => void;
+    beforeClose?: () => void;
+    afterClose?: () => void;
 }
-export declare function InnerDrawer({ className, prefix, target, children, trigger, triggerType, visible, onVisibleChange, closable, title, width, }: InnerDrawerProps): React.JSX.Element;
+export declare function InnerDrawer({ className, prefix, target, children, trigger, triggerType, visible, onVisibleChange, closable, title, cache, width, beforeOpen, beforeClose, afterOpen, afterClose, }: InnerDrawerProps): React.JSX.Element;
 declare const _default: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<FloatButtonInnerDrawerProps & import("@alifd/next/types/config-provider/types").ComponentCommonProps, undefined, {}>;
 export default _default;

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

@@ -40,36 +40,70 @@ function getMountTarget(prefix, target) {
     dom.classList.add(`${prefix}inner-start`);
     return mountTarget;
 }
-function InnerDrawer({ className, prefix, target, children, trigger, triggerType, visible, onVisibleChange, closable = true, title, width = 400, }) {
-    const [mount, setMount] = (0, react_1.useState)(!!visible);
+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 [showPane, setShowPane] = (0, react_1.useState)(!!visible);
+    const propsRef = (0, react_1.useRef)({ visible, afterOpen, afterClose });
+    propsRef.current = {
+        visible,
+        afterOpen,
+        afterClose() {
+            afterClose === null || afterClose === void 0 ? void 0 : afterClose();
+            if (!cache) {
+                setShowPane(false);
+            }
+        },
+    };
     (0, react_1.useEffect)(() => {
         if (visible) {
-            setMount(visible);
+            setMountTarget(getMountTarget(`${cls}-`, target));
+            setShowPane(true);
         }
     }, [visible]);
-    const cls = `${prefix}inner-drawer`;
     const handleVisibleChange = (nextVisible, type) => {
         onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(nextVisible, type);
     };
     const handleVisibleChangeRef = (0, react_1.useRef)(handleVisibleChange);
     handleVisibleChangeRef.current = handleVisibleChange;
     const handlers = (0, useTriggerType_1.useTriggerType)({ visible, onVisibleChange: handleVisibleChange, triggerType });
-    const mountTarget = mount ? getMountTarget(`${cls}-`, target) : undefined;
     const domRef = (0, react_1.useRef)(null);
     const triggerRef = (0, react_1.useRef)(null);
-    (0, react_1.useLayoutEffect)(() => {
-        if (mountTarget) {
-            const timer = setTimeout(() => {
-                mountTarget.style.width = visible
-                    ? `${typeof width === 'number' ? `${width}px` : width}`
-                    : '0px';
-                mountTarget.style.opacity = visible ? '1' : '0';
-            }, 16);
+    (0, react_1.useEffect)(() => {
+        if (!mountTarget) {
+            return;
+        }
+        if (visible) {
+            beforeOpen === null || beforeOpen === void 0 ? void 0 : beforeOpen();
+            const id = requestAnimationFrame(() => {
+                mountTarget.style.width = `${typeof width === 'number' ? `${width}px` : width}`;
+                mountTarget.style.opacity = '1';
+            });
             return () => {
-                clearTimeout(timer);
+                cancelAnimationFrame(id);
             };
         }
-    });
+        else {
+            beforeClose === null || beforeClose === void 0 ? void 0 : beforeClose();
+            mountTarget.style.width = `0px`;
+            mountTarget.style.opacity = '0';
+        }
+    }, [visible, mountTarget]);
+    (0, react_1.useEffect)(() => {
+        if (!mountTarget) {
+            return;
+        }
+        const onEnd = (e) => {
+            if (e.target === mountTarget && e.propertyName === 'width') {
+                const { visible, afterClose, afterOpen } = propsRef.current;
+                visible ? afterOpen === null || afterOpen === void 0 ? void 0 : afterOpen() : afterClose === null || afterClose === void 0 ? void 0 : afterClose();
+            }
+        };
+        mountTarget.addEventListener('transitionend', onEnd);
+        return () => {
+            mountTarget.removeEventListener('transitionend', onEnd);
+        };
+    }, [mountTarget]);
     (0, react_1.useEffect)(() => {
         if (!mountTarget || !className) {
             return;
@@ -99,21 +133,23 @@ function InnerDrawer({ className, prefix, target, children, trigger, triggerType
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("div", Object.assign({}, handlers, { ref: triggerRef }), trigger),
         !!mountTarget &&
-            react_dom_1.default.createPortal(react_1.default.createElement("div", { className: (0, classnames_1.default)(cls, { [`${cls}--visible`]: visible }), ref: domRef, style: { width } },
-                react_1.default.createElement("div", { className: `${cls}-inner` },
-                    react_1.default.createElement("div", { className: `${cls}-header` },
+            react_dom_1.default.createPortal(react_1.default.createElement("div", { className: (0, classnames_1.default)(cls, { [`${cls}--visible`]: visible }), ref: domRef },
+                react_1.default.createElement("div", { className: (0, classnames_1.default)(`${cls}-inner`, {
+                        [`${cls}-inner--has-title`]: !!title,
+                    }), style: { width } },
+                    react_1.default.createElement("div", { className: (0, classnames_1.default)(`${cls}-header`) },
                         !!title && react_1.default.createElement("div", { className: `${cls}-header-title` }, title),
-                        !!closable && (react_1.default.createElement("button", { className: `${cls}-header-close`, onClick: () => handleVisibleChange(false, 'close') },
+                        !!closable && (react_1.default.createElement("button", { className: `${cls}-header-close`, onClick: () => handleVisibleChange(false, 'closeClick') },
                             react_1.default.createElement(next_1.Icon, { className: `${cls}-header-close-icon`, type: "close", size: 12 })))),
-                    react_1.default.createElement("div", { className: `${cls}-body` }, children))), mountTarget)));
+                    react_1.default.createElement("div", { className: `${cls}-body` }, showPane ? children : null))), mountTarget)));
 }
 exports.InnerDrawer = InnerDrawer;
 function FloatButtonByInnerDrawer(props) {
-    const { width, title, target } = props, rests = tslib_1.__rest(props, ["width", "title", "target"]);
+    const { width, title, target, drawerClassName, cache = false, beforeOpen, afterOpen, beforeClose, afterClose } = props, rests = tslib_1.__rest(props, ["width", "title", "target", "drawerClassName", "cache", "beforeOpen", "afterOpen", "beforeClose", "afterClose"]);
     return (react_1.default.createElement(float_button_1.default, Object.assign({}, rests, { _renderView: (prefix, { trigger, triggerType, visible, onVisibleChange, showClose, children }) => {
-            return (react_1.default.createElement(InnerDrawer, { prefix: prefix, target: target, width: width, title: title, trigger: trigger, triggerType: triggerType, visible: visible, closable: showClose, onVisibleChange: (...args) => {
+            return (react_1.default.createElement(InnerDrawer, { className: drawerClassName, prefix: prefix, target: target, width: width, title: title, trigger: trigger, triggerType: triggerType, visible: visible, closable: showClose, onVisibleChange: (...args) => {
                     onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(...args);
-                } }, children));
+                }, cache: cache, beforeOpen: beforeOpen, afterOpen: afterOpen, beforeClose: beforeClose, afterClose: afterClose }, children));
         } })));
 }
 exports.default = next_1.ConfigProvider.config(FloatButtonByInnerDrawer);

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.1';
+exports.version = '0.1.4';

package/package.json

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