@alifd/chat 0.0.1

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

@@ -0,0 +1,81 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useNestleEdge = void 0;
+const react_1 = require("react");
+const utils_1 = require("../../utils");
+const util_1 = require("../util");
+/**
+ * 吸边逻辑
+ */
+function useNestleEdge(dom, { enable, safeAreaMargin, interactiveEdges, onUpdate, onUpdateEnd, }) {
+    const eventTimerRef = (0, react_1.useRef)();
+    const triggerUpdateEnd = (position) => {
+        clearTimeout(eventTimerRef.current);
+        eventTimerRef.current = setTimeout(() => {
+            onUpdateEnd === null || onUpdateEnd === void 0 ? void 0 : onUpdateEnd(position);
+        }, 300);
+    };
+    const update = (animation = true) => {
+        if (!enable || !dom) {
+            return;
+        }
+        const rect = dom.getBoundingClientRect();
+        const { left, top, width, height } = rect;
+        const { width: screenWidth, height: screenHeight } = (0, util_1.getScreenSize)();
+        const [edge] = (0, util_1.getNearlyEdge)(dom, interactiveEdges, rect);
+        const position = { left, top };
+        switch (edge) {
+            case 'top': {
+                position.top = 0;
+                break;
+            }
+            case 'right': {
+                position.left = screenWidth - width;
+                break;
+            }
+            case 'bottom': {
+                position.top = screenHeight - height;
+                break;
+            }
+            case 'left': {
+                position.left = 0;
+                break;
+            }
+            // no default
+        }
+        if (position.left !== left || position.left !== top) {
+            const { left, top } = (0, util_1.adjustBySafeAreaMargin)(position, dom.getBoundingClientRect(), safeAreaMargin) ||
+                position;
+            const shouldContinue = onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate({ left, top });
+            if (shouldContinue === false) {
+                return;
+            }
+            dom.style.left = '0px';
+            dom.style.top = '0px';
+            if (animation) {
+                dom.style.transition = 'transform 0.25s';
+            }
+            else {
+                dom.style.transition = '';
+            }
+            dom.style.transform = `translate(${left}px, ${top}px)`;
+            triggerUpdateEnd({ left, top });
+        }
+    };
+    const debounceUpdate = (0, utils_1.useDebounce)(() => update(), 100);
+    (0, react_1.useEffect)(() => {
+        if (dom) {
+            update(false);
+        }
+    }, [dom]);
+    (0, react_1.useEffect)(() => {
+        window.addEventListener('resize', debounceUpdate);
+        return () => {
+            window.removeEventListener('resize', debounceUpdate);
+        };
+    }, []);
+    return {
+        update,
+    };
+}
+exports.useNestleEdge = useNestleEdge;

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare const FloatButtonWithSub: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<Pick<import("./types").FloatButtonProps & import("react").RefAttributes<import("./types").FloatButtonRef>, keyof import("./types").FloatButtonProps | "key"> & 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, {}>;
+};
+export type { BacktopRef, BacktopProps, FloatButtonRef, FloatButtonProps } from './types';
+export default FloatButtonWithSub;

package/lib/float-button/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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 index_1 = require("../utils/index");
+const FloatButtonWithSub = (0, index_1.assignSubComponent)(float_button_1.default, { Backtop: backtop_1.default });
+exports.default = FloatButtonWithSub;

package/lib/float-button/main.scss

@@ -0,0 +1,16 @@
+@import '~@alifd/next/variables.scss';
+
+.#{$css-prefix}float-button {
+  position: fixed;
+  z-index: 1001;
+
+  &-backtop {
+    transition: opacity 0.2s, transform 0.2s;
+    cursor: pointer;
+
+    &--hidden {
+      opacity: 0;
+      transform: scale(0);
+    }
+  }
+}

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

@@ -0,0 +1,2 @@
+import '@alifd/next/lib/balloon/style';
+import './main.scss';

package/lib/float-button/style.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("@alifd/next/lib/balloon/style");
+require("./main.scss");

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

@@ -0,0 +1,225 @@
+import type React from 'react';
+import { type CommonProps } from '@alifd/next';
+import { type BalloonProps } from '@alifd/next/lib/balloon';
+export type { BalloonProps };
+/**
+ * @api
+ */
+export type ScreenRatioPosition = [widthRatio: number, heightRatio: number];
+/**
+ * @api
+ */
+export type Edge = 'top' | 'right' | 'bottom' | 'left';
+/**
+ * @api
+ */
+export type Position = {
+    left: number;
+    top: number;
+};
+/**
+ * @api
+ */
+export type Size = {
+    width: number;
+    height: number;
+};
+/**
+ * @api
+ */
+export type Margin = [top: number, right: number, bottom: number, left: number];
+/**
+ * 回到顶部组件 ref 对象
+ * @api
+ * @order 4
+ */
+export interface BacktopRef {
+    /**
+     * 滚动到顶部
+     */
+    backToTop(): void;
+    /**
+     * 设置是否隐藏
+     * @param isHide - 是否隐藏
+     * @param force - 强制设置，忽略此时的滚动位置
+     */
+    setHide(isHide: boolean, force?: boolean): void;
+}
+/**
+ * 回到顶部组件
+ * @api FloatButton.Backtop
+ *  @order 3
+ */
+export interface BacktopProps extends CommonProps {
+    /**
+     * 滚动到顶部自动隐藏
+     * @defaultValue true
+     */
+    autoHide?: boolean;
+    /**
+     * 内容
+     */
+    children: React.ReactNode;
+    /**
+     * 可触发隐藏的偏移距离 px
+     * @defaultValue 10
+     */
+    offset?: number;
+    /**
+     * 滚动节点
+     * @defaultValue window
+     */
+    scroller?: string | HTMLElement;
+    /**
+     * 采用平滑滚动
+     * @defaultValue true
+     */
+    smooth?: boolean;
+}
+/**
+ * 悬浮球组件 ref 对象
+ * @api
+ * @order 2
+ */
+export interface FloatButtonRef {
+    /**
+     * 设置是否展示弹窗
+     */
+    setVisible(visible: boolean): void;
+    /**
+     * 根据当前位置更新弹窗的 align 位置
+     */
+    updateAlign(): void;
+    /**
+     * 设置是否隐藏悬浮球
+     */
+    setHide(isHide: boolean): void;
+    /**
+     * 是悬浮球吸附到最近的屏幕边缘
+     * @param animation - 是否开启动画，默认为 true
+     */
+    updateNestleEdge(animation?: boolean): void;
+}
+/**
+ * @api FloatButton
+ * @order 1
+ */
+export interface FloatButtonProps extends CommonProps {
+    className?: string;
+    style?: React.CSSProperties;
+    /**
+     * 面板展示类型
+     * @defaultValue 'balloon'
+     * @example
+     * - `balloon`: 悬浮面板
+     * - `drawer`: 悬浮侧边抽屉
+     * - `inner-drawer`: 文档内部抽屉
+     */
+    type?: 'balloon' | 'drawer' | 'inner-drawer';
+    /**
+     * 弹层位置，适用 `type`: 'balloon'
+     */
+    align?: BalloonProps['align'];
+    /**
+     * 自动设置弹层位置，适用 `type`: 'balloon'
+     */
+    autoAlign?: boolean;
+    /**
+     * 抽屉位置，适用 `type`: 'drawer' | 'inner-drawer'
+     */
+    placement?: 'top' | 'right' | 'bottom' | 'left';
+    /**
+     * 是否显示弹层（受控模式）
+     */
+    visible?: boolean;
+    /**
+     * 是否默认展示弹层（非受控模式）
+     */
+    defaultVisible?: boolean;
+    /**
+     * 弹层展示状态变化事件
+     */
+    onVisibleChange?: BalloonProps['onVisibleChange'];
+    /**
+     * 前置添加内容
+     */
+    addonBefore?: React.ReactNode;
+    /**
+     * 后置添加内容
+     */
+    addonAfter?: React.ReactNode;
+    /**
+     * 是否可拖拽
+     */
+    dragable?: boolean;
+    /**
+     * 拖拽安全区边距
+     * @defaultValue [10, 10, 10, 10]
+     */
+    safeAreaMargin?: Margin;
+    /**
+     * 默认位置
+     */
+    defaultPosition?: {
+        top?: number | string;
+        right?: number | string;
+        bottom?: number | string;
+        left?: number | string;
+    } | ScreenRatioPosition;
+    /**
+     * 是否自动吸附屏幕边缘
+     * @defaultValue true
+     */
+    autoNestleEdge?: boolean;
+    /**
+     * 在屏幕边缘时是否自动隐藏
+     */
+    autoHide?: boolean;
+    /**
+     * 隐藏时留在屏幕内的尺寸
+     */
+    leftSizeOfHidden?: number;
+    /**
+     * 可交互的边缘，适用于 autoNestleEdge、autoHide
+     * @defaultValue ['left', 'right']
+     */
+    interactiveEdges?: Edge[];
+    /**
+     * 触发节点
+     */
+    trigger: NonNullable<BalloonProps['trigger']>;
+    /**
+     * 隐藏时的触发节点，默认为 trigger
+     */
+    hiddenTrigger?: BalloonProps['trigger'];
+    /**
+     * 触发方式
+     * @defaultValue 'click'
+     */
+    triggerType?: BalloonProps['triggerType'];
+    /**
+     * 展示关闭按钮
+     * @defaultValue false
+     */
+    showClose?: boolean;
+    /**
+     * 弹层组件其它参数
+     */
+    balloonProps?: BalloonProps;
+    /**
+     * 弹层内容
+     */
+    children?: React.ReactNode;
+}
+/**
+ * @api
+ * @order 5
+ */
+export interface DragableOption {
+    enable?: boolean;
+    defaultPosition?: FloatButtonProps['defaultPosition'];
+    safeAreaMargin?: Margin;
+    onDragBefore?: (dom: HTMLElement) => void;
+    onDraging?: (dom: HTMLElement, event: MouseEvent) => void | false;
+    onDragend?: (dom: HTMLElement) => void;
+}

package/lib/float-button/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,8 @@
+import type { Edge, Margin, Position } from './types';
+export declare function getScreenSize(): {
+    width: number;
+    height: number;
+};
+export declare function getNearlyEdge(el: HTMLElement, interactiveEdges?: Edge[], rect?: DOMRect): [] | [nearestEdge: Edge, subNearestEdge?: Edge];
+export declare function isInScreen(dom: HTMLElement): boolean;
+export declare function adjustBySafeAreaMargin(position: Position | undefined, rect: DOMRect | null, safeAreaMargin?: Margin): Position | undefined;

package/lib/float-button/util.js

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.adjustBySafeAreaMargin = exports.isInScreen = exports.getNearlyEdge = exports.getScreenSize = void 0;
+function getScreenSize() {
+    return {
+        width: document.documentElement.clientWidth,
+        height: document.documentElement.clientHeight,
+    };
+}
+exports.getScreenSize = getScreenSize;
+function getNearlyEdge(el, interactiveEdges, rect = el.getBoundingClientRect()) {
+    if (!(interactiveEdges === null || interactiveEdges === void 0 ? void 0 : interactiveEdges.length)) {
+        return [];
+    }
+    const edgeSet = new Set(interactiveEdges);
+    if (edgeSet.size === 1) {
+        return [interactiveEdges[0]];
+    }
+    const { left, top, width, height } = rect;
+    const { width: screenWidth, height: screenHeight } = getScreenSize();
+    const edgeItems = [
+        {
+            edge: 'left',
+            size: left + width / 2,
+        },
+        {
+            edge: 'top',
+            size: top + height / 2,
+        },
+        {
+            edge: 'right',
+            size: screenWidth - left - width / 2,
+        },
+        {
+            edge: 'bottom',
+            size: screenHeight - top - height / 2,
+        },
+    ];
+    const [closest, subClosest] = edgeItems
+        .filter(t => edgeSet.has(t.edge))
+        .sort((a, b) => (a.size > b.size ? 1 : -1));
+    return [closest.edge, subClosest === null || subClosest === void 0 ? void 0 : subClosest.edge];
+}
+exports.getNearlyEdge = getNearlyEdge;
+function isInScreen(dom) {
+    const rect = dom.getBoundingClientRect();
+    const { width, height } = getScreenSize();
+    const { left, top } = rect;
+    const right = width - rect.left - rect.width;
+    const bottom = height - rect.top - rect.height;
+    return [left, top, right, bottom].every(n => n >= 0);
+}
+exports.isInScreen = isInScreen;
+function adjustBySafeAreaMargin(position, rect, safeAreaMargin) {
+    if (!position || !rect || !safeAreaMargin) {
+        return undefined;
+    }
+    const [top, right, bottom, left] = safeAreaMargin;
+    const { width, height } = getScreenSize();
+    const makeInRange = (num, min, max) => {
+        if (num < min) {
+            return min;
+        }
+        if (num > max) {
+            return max;
+        }
+        return num;
+    };
+    return {
+        left: makeInRange(position.left, Math.max(0, left), Math.min(width, width - rect.width - right)),
+        top: makeInRange(position.top, Math.max(0, top), Math.min(height, height - rect.height - bottom)),
+    };
+}
+exports.adjustBySafeAreaMargin = adjustBySafeAreaMargin;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { BacktopProps, BacktopRef } from '../types';
+declare const _default: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<Pick<BacktopProps & React.RefAttributes<BacktopRef>, "key" | keyof BacktopProps> & import("@alifd/next/types/config-provider/types").ComponentCommonProps, BacktopRef, {}>;
+export default _default;

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

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const next_1 = require("@alifd/next");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const utils_1 = require("../../utils");
+function getScroller(scroller) {
+    if (!scroller) {
+        return window;
+    }
+    if (typeof scroller === 'string') {
+        return document.getElementById(scroller);
+    }
+    return scroller;
+}
+const Backtop = (0, react_1.forwardRef)(({ prefix = 'next-', autoHide = true, scroller, offset = 10, smooth = true, children }, ref) => {
+    const [visible, setVisible] = (0, react_1.useState)(true);
+    const cls = `${prefix}float-button-backtop`;
+    const visibleRef = (0, react_1.useRef)(visible);
+    visibleRef.current = visible;
+    const handleBackToTop = () => {
+        var _a;
+        if (!visible) {
+            return;
+        }
+        (_a = getScroller(scroller)) === null || _a === void 0 ? void 0 : _a.scrollTo({ top: 0, behavior: smooth ? 'smooth' : 'auto' });
+    };
+    const isAtTop = (el = window) => {
+        if (el === window) {
+            return el.scrollY <= offset;
+        }
+        if (el instanceof HTMLElement) {
+            return el.scrollTop <= offset;
+        }
+        return false;
+    };
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        backToTop: handleBackToTop,
+        setHide(isHide, force) {
+            let vis = !isHide;
+            if (!force && vis && isAtTop(getScroller(scroller))) {
+                vis = false;
+            }
+            if (vis !== visible) {
+                setVisible(vis);
+            }
+        },
+    }));
+    (0, react_1.useEffect)(() => {
+        if (!autoHide) {
+            if (!visible) {
+                setVisible(true);
+            }
+            return;
+        }
+        const target = getScroller(scroller);
+        if (!target) {
+            return;
+        }
+        const onScroll = (0, utils_1.debounce)(() => {
+            if (isAtTop(target)) {
+                visibleRef.current && setVisible(false);
+            }
+            else {
+                !visibleRef.current && setVisible(true);
+            }
+        }, 100);
+        window.addEventListener('scroll', onScroll);
+        return () => {
+            target.removeEventListener('scroll', onScroll);
+        };
+    }, [scroller, autoHide, offset]);
+    return (react_1.default.createElement("button", { className: (0, classnames_1.default)(cls, { [`${cls}--hidden`]: !visible }), onClick: handleBackToTop }, children));
+});
+exports.default = next_1.ConfigProvider.config(Backtop);

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

@@ -0,0 +1,8 @@
+import React, { type ComponentProps } from 'react';
+import { Balloon as NextBalloon } from '@alifd/next';
+export declare function Balloon(props: ComponentProps<typeof NextBalloon> & {
+    cls: string;
+    triggerEl: HTMLElement | null;
+    el: HTMLElement | null;
+    autoAlign?: boolean;
+}): React.JSX.Element;

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

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Balloon = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const next_1 = require("@alifd/next");
+const useAutoAlign_1 = require("../hooks/useAutoAlign");
+function Balloon(props) {
+    const { triggerEl, el, autoAlign, align, cls } = props, rests = tslib_1.__rest(props, ["triggerEl", "el", "autoAlign", "align", "cls"]);
+    const { align: currentAlign } = (0, useAutoAlign_1.useAutoAlign)(el === null || el === void 0 ? void 0 : el.querySelector(`.${cls}-popup`), triggerEl, {
+        enable: autoAlign,
+        defaultAlign: align,
+    });
+    return react_1.default.createElement(next_1.Balloon, Object.assign({}, rests, { align: currentAlign }));
+}
+exports.Balloon = Balloon;

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function Drawer(): React.JSX.Element;

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

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Drawer = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+function Drawer() {
+    return (react_1.default.createElement("div", null, "drawer"));
+}
+exports.Drawer = Drawer;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { FloatButtonProps, FloatButtonRef } from '../types';
+declare const _default: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<Pick<FloatButtonProps & React.RefAttributes<FloatButtonRef>, keyof FloatButtonProps | "key"> & import("@alifd/next/types/config-provider/types").ComponentCommonProps, FloatButtonRef, {}>;
+export default _default;