@alifd/chat 0.0.1

package/es/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/es/float-button/style.d.ts

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

package/es/float-button/style.js

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

package/es/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/es/float-button/types.js

@@ -0,0 +1 @@
+export {};

package/es/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/es/float-button/util.js

@@ -0,0 +1,67 @@
+export function getScreenSize() {
+    return {
+        width: document.documentElement.clientWidth,
+        height: document.documentElement.clientHeight,
+    };
+}
+export 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];
+}
+export 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);
+}
+export 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)),
+    };
+}

package/es/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/es/float-button/view/backtop.js

@@ -0,0 +1,73 @@
+import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { ConfigProvider } from '@alifd/next';
+import cs from 'classnames';
+import { debounce } from '../../utils';
+function getScroller(scroller) {
+    if (!scroller) {
+        return window;
+    }
+    if (typeof scroller === 'string') {
+        return document.getElementById(scroller);
+    }
+    return scroller;
+}
+const Backtop = forwardRef(({ prefix = 'next-', autoHide = true, scroller, offset = 10, smooth = true, children }, ref) => {
+    const [visible, setVisible] = useState(true);
+    const cls = `${prefix}float-button-backtop`;
+    const visibleRef = 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;
+    };
+    useImperativeHandle(ref, () => ({
+        backToTop: handleBackToTop,
+        setHide(isHide, force) {
+            let vis = !isHide;
+            if (!force && vis && isAtTop(getScroller(scroller))) {
+                vis = false;
+            }
+            if (vis !== visible) {
+                setVisible(vis);
+            }
+        },
+    }));
+    useEffect(() => {
+        if (!autoHide) {
+            if (!visible) {
+                setVisible(true);
+            }
+            return;
+        }
+        const target = getScroller(scroller);
+        if (!target) {
+            return;
+        }
+        const onScroll = 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.createElement("button", { className: cs(cls, { [`${cls}--hidden`]: !visible }), onClick: handleBackToTop }, children));
+});
+export default ConfigProvider.config(Backtop);

package/es/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/es/float-button/view/balloon.js

@@ -0,0 +1,12 @@
+import { __rest } from "tslib";
+import React from 'react';
+import { Balloon as NextBalloon } from '@alifd/next';
+import { useAutoAlign } from '../hooks/useAutoAlign';
+export function Balloon(props) {
+    const { triggerEl, el, autoAlign, align, cls } = props, rests = __rest(props, ["triggerEl", "el", "autoAlign", "align", "cls"]);
+    const { align: currentAlign } = useAutoAlign(el === null || el === void 0 ? void 0 : el.querySelector(`.${cls}-popup`), triggerEl, {
+        enable: autoAlign,
+        defaultAlign: align,
+    });
+    return React.createElement(NextBalloon, Object.assign({}, rests, { align: currentAlign }));
+}

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

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

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

@@ -0,0 +1,4 @@
+import React from 'react';
+export function Drawer() {
+    return (React.createElement("div", null, "drawer"));
+}

package/es/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;

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

@@ -0,0 +1,117 @@
+import { __rest } from "tslib";
+import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import cs from 'classnames';
+import { Balloon, ConfigProvider } from '@alifd/next';
+import { useControlable } from '../../utils/index';
+import { useAutoHide } from '../hooks/useAutoHide';
+import { useAutoAlign } from '../hooks/useAutoAlign';
+import { useNestleEdge } from '../hooks/useNestleEdge';
+import { useDragable } from '../hooks/useDragable';
+const FloatButton = forwardRef((_a, ref) => {
+    var { className, style, prefix = 'next-', type = 'balloon', 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 } = _a, others = __rest(_a, ["className", "style", "prefix", "type", "addonAfter", "addonBefore", "dragable", "safeAreaMargin", "autoNestleEdge", "interactiveEdges", "autoHide", "autoAlign", "leftSizeOfHidden", "defaultPosition", "trigger", "triggerType", "showClose", "align", "balloonProps", "children"]);
+    const elRef = useRef(null);
+    const triggerRef = useRef(null);
+    const [el, setEl] = useState(null);
+    const [triggerEl, setTriggerEl] = useState(null);
+    const draggedRef = useRef(false);
+    const cls = `${prefix}float-button`;
+    const [visible, onVisibleChange] = useControlable(others, {
+        valueName: 'visible',
+        changeName: 'onVisibleChange',
+    });
+    useEffect(() => {
+        setEl(elRef.current);
+        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,
+        defaultAlign: align,
+    });
+    const { isHideRef, setHide, handleMove, saveRestorePosition } = useAutoHide(el, {
+        enable: !visible && autoHide,
+        interactiveEdges,
+        leftSize: leftSizeOfHidden,
+    });
+    useEffect(() => {
+        if (visible) {
+            setHide(false);
+            updateAlign();
+        }
+    }, [visible]);
+    const { update: updateNestleEdge } = useNestleEdge(el, {
+        enable: !!autoNestleEdge,
+        safeAreaMargin,
+        interactiveEdges,
+        onUpdate(position) {
+            if (isHideRef.current) {
+                saveRestorePosition(position);
+                return false;
+            }
+        },
+    });
+    useImperativeHandle(ref, () => ({
+        setVisible(value) {
+            onVisibleChange(value, 'api');
+        },
+        setHide(isHide) {
+            setHide(isHide);
+        },
+        updateAlign,
+        updateNestleEdge,
+    }));
+    const { className: dragClassName, style: dragStyle } = useDragable(el, {
+        enable: dragable,
+        safeAreaMargin,
+        defaultPosition,
+        onDragBefore() {
+            draggedRef.current = false;
+        },
+        onDraging(_, e) {
+            draggedRef.current = true;
+            updateAlign();
+            handleMove(e);
+            if (isHideRef.current) {
+                return false;
+            }
+        },
+        onDragend() {
+            if (!isHideRef.current) {
+                Promise.resolve().then(() => updateNestleEdge());
+            }
+        },
+    });
+    const classNames = cs(cls, className, dragClassName);
+    const renderBalloon = () => {
+        return (React.createElement(Balloon, Object.assign({ visible: visible, onVisibleChange: (...args) => {
+                if (draggedRef.current) {
+                    return;
+                }
+                onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(...args);
+            }, popupClassName: `${cls}-popup`, trigger: trigger, popupContainer: () => el, triggerType: triggerType, align: currentAlign, v2: true, closable: showClose, autoAdjust: false }, balloonProps), children));
+    };
+    const renderDrawer = () => {
+        return React.createElement("div", null);
+    };
+    const renderInnerDrawer = () => {
+        return React.createElement("div", null);
+    };
+    const renderView = () => {
+        switch (type) {
+            case 'drawer': {
+                return renderDrawer();
+            }
+            case 'inner-drawer': {
+                return renderInnerDrawer();
+            }
+            default: {
+                return renderBalloon();
+            }
+        }
+    };
+    return (React.createElement("div", { className: classNames, style: Object.assign(Object.assign({}, style), dragStyle), ref: elRef },
+        !!addonBefore && (React.createElement("div", { className: cs(`${cls}-addon`, `${cls}-addon--before`) }, addonBefore)),
+        React.createElement("div", { className: cs(`${cls}-trigger`), ref: triggerRef }, renderView()),
+        !!addonAfter && (React.createElement("div", { className: cs(`${cls}-addon`, `${cls}-addon--after`) }, addonAfter))));
+});
+FloatButton.displayName = 'FloatButton';
+export default ConfigProvider.config(FloatButton);

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

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

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

@@ -0,0 +1,4 @@
+import React from 'react';
+export function InnerDrawer() {
+    return React.createElement("div", null, "inner-drawer");
+}

package/es/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Button } from './button';
+export declare const version: string;

package/es/index.js

@@ -0,0 +1,2 @@
+export { default as Button } from './button';
+export const version = '0.0.1';

package/es/utils/common.d.ts

@@ -0,0 +1,2 @@
+import { type ComponentType } from 'react';
+export declare function assignSubComponent<T extends ComponentType, P extends Record<string, unknown>>(Component: T, SubComponents: P): T & P;

package/es/utils/common.js

@@ -0,0 +1,8 @@
+export function assignSubComponent(Component, SubComponents) {
+    for (const key in SubComponents) {
+        if (Object.prototype.hasOwnProperty.call(SubComponents, key)) {
+            Component[key] = SubComponents[key];
+        }
+    }
+    return Component;
+}

package/es/utils/func.d.ts

@@ -0,0 +1,3 @@
+import { type AnyFunction } from './types';
+export declare function debounce<Callback extends AnyFunction>(callback: Callback, delay: number, leading?: boolean): (...args: Parameters<Callback>) => void;
+export declare function throttle<Callback extends AnyFunction>(callback: Callback, delay: number): (...args: Parameters<Callback>) => void;

package/es/utils/func.js

@@ -0,0 +1,30 @@
+export function debounce(callback, delay, leading = false) {
+    let timer;
+    let isFirstRun = true;
+    const fn = (...args) => {
+        if (isFirstRun && leading) {
+            isFirstRun = false;
+            timer = setTimeout(() => {
+                callback(...args);
+            });
+            return;
+        }
+        isFirstRun = false;
+        clearTimeout(timer);
+        timer = setTimeout(() => {
+            callback(...args);
+        }, delay);
+    };
+    return fn;
+}
+export function throttle(callback, delay) {
+    let lastTime;
+    const fn = (...args) => {
+        const time = Date.now();
+        if (!lastTime || time - lastTime > delay) {
+            Promise.resolve().then(() => callback(...args));
+            lastTime = time;
+        }
+    };
+    return fn;
+}

package/es/utils/hooks/useControlable.d.ts

@@ -0,0 +1,6 @@
+export interface ControlableOptions {
+    valueName?: string;
+    defaultValueName?: string;
+    changeName?: string;
+}
+export declare function useControlable<Value = unknown, OnChange extends (nextValue: Value, ...rest: unknown[]) => unknown = (nextValue: Value, ...rest: unknown[]) => unknown>(props: Record<string, unknown>, { valueName, defaultValueName, changeName, }?: ControlableOptions): readonly [Value, OnChange];

package/es/utils/hooks/useControlable.js

@@ -0,0 +1,27 @@
+import { useEffect, useState } from 'react';
+function upperFirst(str) {
+    return `${str.slice(0, 1).toUpperCase()}${str.slice(1)}`;
+}
+function getDefaultValueName(valueName) {
+    return `default${upperFirst(valueName)}`;
+}
+export function useControlable(props, { valueName = 'value', defaultValueName = getDefaultValueName(valueName), changeName = 'onChange', } = {}) {
+    const isControl = valueName in props;
+    const propValue = (isControl ? props[valueName] : props[defaultValueName]);
+    const propOnChange = props[changeName];
+    const [value, setValue] = useState(() => propValue);
+    const handleChange = (nextValue, ...rest) => {
+        if (!isControl) {
+            setValue(() => nextValue);
+        }
+        if (typeof propOnChange === 'function') {
+            propOnChange(nextValue, ...rest);
+        }
+    };
+    useEffect(() => {
+        if (value !== propValue) {
+            setValue(() => propValue);
+        }
+    }, [propValue]);
+    return [value, handleChange];
+}

package/es/utils/hooks/useDebounce.d.ts

@@ -0,0 +1,2 @@
+import { type AnyFunction } from '../types';
+export declare function useDebounce<Callback extends AnyFunction>(callback: Callback, delay?: number, leading?: boolean): (...args: Parameters<Callback>) => void;