@alifd/chat 0.1.3 → 0.1.4

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,9 +34,12 @@
                 width 0.3s,
                 opacity 0.3s;
             display: flex;
+            width: 0;
+            opacity: 0;
         }
         &-inner {
-            flex: 1;
+            width: 100%;
+            height: 100%;
             display: flex;
             flex-direction: column;
 

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

@@ -225,4 +225,13 @@ export interface FloatButtonInnerDrawerProps extends FloatButtonProps {
     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';
@@ -122,7 +122,9 @@ const FloatButton = forwardRef((props, ref) => {
     };
     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,22 +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 } },
+            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, '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, drawerClassName } = props, rests = __rest(props, ["width", "title", "target", "drawerClassName"]);
+    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, { 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.3';
+export const version = '0.1.4';

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,9 +34,12 @@
                 width 0.3s,
                 opacity 0.3s;
             display: flex;
+            width: 0;
+            opacity: 0;
         }
         &-inner {
-            flex: 1;
+            width: 100%;
+            height: 100%;
             display: flex;
             flex-direction: column;
 

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

@@ -225,4 +225,13 @@ export interface FloatButtonInnerDrawerProps extends FloatButtonProps {
     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

@@ -124,7 +124,9 @@ const FloatButton = (0, react_1.forwardRef)((props, ref) => {
     };
     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,23 +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_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, '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, drawerClassName } = props, rests = tslib_1.__rest(props, ["width", "title", "target", "drawerClassName"]);
+    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, { 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.3';
+exports.version = '0.1.4';

package/package.json

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