@alifd/chat 0.1.4 → 0.1.6

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

@@ -42,25 +42,31 @@
             height: 100%;
             display: flex;
             flex-direction: column;
+            position: relative;
 
             &--has-title {
                 .#{$prefix}float-button-inner-drawer {
                     &-header {
-                        padding: $size-base * 2 $size-base * 3;
+                        margin: $size-base * 2 $size-base * 3;
                     }
                     &-body {
-                        padding-top: 0;
+                        margin-top: 0;
+                    }
+                }
+            }
+            &--has-close {
+                .#{$prefix}float-button-inner-drawer {
+                    &-header-title {
+                        margin-right: $size-base * 2;
                     }
                 }
             }
         }
         &-header {
             flex: none;
-            position: relative;
             &-title {
                 font-size: $font-size-subhead;
                 line-height: 1.5;
-                padding-right: $size-base * 2;
             }
             &-close {
                 position: absolute;
@@ -76,13 +82,13 @@
                 background-color: transparent;
 
                 &:hover {
-                    color: $color-brand1-6;
+                    color: $color-text1-4;
                 }
             }
         }
         &-body {
             flex: 1;
-            padding: $size-base * 2 $size-base * 3;
+            margin: $size-base * 2 $size-base * 3;
         }
         &-footer {
             flex: none;

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

@@ -205,10 +205,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 +231,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

@@ -133,6 +133,7 @@ export function InnerDrawer({ className, prefix, target, children, trigger, trig
             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,
+                        [`${cls}-inner--has-close`]: !!closable,
                     }), style: { width } },
                     React.createElement("div", { className: cs(`${cls}-header`) },
                         !!title && React.createElement("div", { className: `${cls}-header-title` }, title),

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

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

@@ -42,25 +42,31 @@
             height: 100%;
             display: flex;
             flex-direction: column;
+            position: relative;
 
             &--has-title {
                 .#{$prefix}float-button-inner-drawer {
                     &-header {
-                        padding: $size-base * 2 $size-base * 3;
+                        margin: $size-base * 2 $size-base * 3;
                     }
                     &-body {
-                        padding-top: 0;
+                        margin-top: 0;
+                    }
+                }
+            }
+            &--has-close {
+                .#{$prefix}float-button-inner-drawer {
+                    &-header-title {
+                        margin-right: $size-base * 2;
                     }
                 }
             }
         }
         &-header {
             flex: none;
-            position: relative;
             &-title {
                 font-size: $font-size-subhead;
                 line-height: 1.5;
-                padding-right: $size-base * 2;
             }
             &-close {
                 position: absolute;
@@ -76,13 +82,13 @@
                 background-color: transparent;
 
                 &:hover {
-                    color: $color-brand1-6;
+                    color: $color-text1-4;
                 }
             }
         }
         &-body {
             flex: 1;
-            padding: $size-base * 2 $size-base * 3;
+            margin: $size-base * 2 $size-base * 3;
         }
         &-footer {
             flex: none;

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

@@ -205,10 +205,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 +231,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

@@ -136,6 +136,7 @@ function InnerDrawer({ className, prefix, target, children, trigger, triggerType
             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,
+                        [`${cls}-inner--has-close`]: !!closable,
                     }), 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),

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.4';
+exports.version = '0.1.6';

package/package.json

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