@alifd/chat 0.0.1

package/README.md

@@ -0,0 +1 @@
+## Fusion Chat

package/es/button/index.d.ts

@@ -0,0 +1 @@
+export { default } from './view/button.js';

package/es/button/index.js

@@ -0,0 +1 @@
+export { default } from './view/button.js';

package/es/button/style.d.ts

@@ -0,0 +1 @@
+import './main.scss';

package/es/button/style.js

@@ -0,0 +1 @@
+import './main.scss';

package/es/button/types.d.ts

@@ -0,0 +1,123 @@
+import type React from 'react';
+/**
+ * 按钮类型
+ * @api
+ */
+export type ButtonSize = 'small' | 'medium' | 'large';
+/**
+ * @api Button.Group
+ */
+export interface GroupProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * 统一设置 Button 组件的按钮大小
+     */
+    size?: ButtonSize;
+}
+type HTMLAttributesWeak = Omit<React.ButtonHTMLAttributes<HTMLElement>, 'type' | 'onClick'>;
+/**
+ * @api Button
+ */
+export interface ButtonProps extends HTMLAttributesWeak {
+    /**
+     * 按钮的类型
+     * @en Typeo of button
+     * @defaultValue 'normal'
+     */
+    type?: 'primary' | 'secondary' | 'normal';
+    /**
+     * @deprecated use `warning` `text` `ghost` insteaded
+     * @skip
+     */
+    shape?: 'warning' | 'text' | 'ghost';
+    /**
+     * 按钮的尺寸
+     * @en Size of button
+     * @defaultValue 'medium'
+     */
+    size?: ButtonSize;
+    /**
+     * 按钮中可配置的 Icon
+     * @en Available icons in button
+     * @example
+     * \{ loading: <Icon type="loading"/> \}
+     */
+    icons?: {
+        loading?: React.ReactNode;
+    };
+    /**
+     * 按钮中 Icon 的尺寸
+     * @en Size of icon in button
+     * @defaultValue 默认根据 size 自动映射，映射规则：
+     * size:large -\> `small`
+     * size:medium -\> `xs`
+     * size:small -\> `xs`
+     */
+    iconSize?: number | 'xxs' | 'xs' | 'small' | 'medium' | 'large' | 'xl' | 'xxl' | 'xxxl' | 'inherit';
+    /**
+     * button 标签的 type 值
+     * @en Original html type for button element
+     * @defaultValue 'button'
+     * @remarks 仅当 component = 'button' 时使用
+     */
+    htmlType?: 'submit' | 'reset' | 'button';
+    /**
+     * 最终渲染的 jsx 标签标签类型
+     * @en The jsx tag to be rendered
+     * @remarks 直接去掉原先的 ReactNode 类型，因为即使传递了非法类型运行时也会报错，不如在类型提示阶段就将错误抛出
+     */
+    component?: 'button' | 'a' | React.ComponentType<unknown>;
+    /**
+     * 设置按钮的载入状态
+     * @en Loading state of a button
+     * @defaultValue false
+     */
+    loading?: boolean;
+    /**
+     * 是否为幽灵按钮
+     * @en Setting ghost button
+     * @defaultValue false
+     */
+    ghost?: true | false | 'light' | 'dark';
+    /**
+     * 是否为文本按钮
+     * @en Is text button
+     * @defaultValue false
+     */
+    text?: boolean;
+    /**
+     * 是否为警告按钮
+     * @en Is warning button
+     * @defaultValue false
+     */
+    warning?: boolean;
+    /**
+     * 是否禁用
+     * @en Is disabled
+     * @defaultValue false
+     */
+    disabled?: boolean;
+    /**
+     * 点击按钮的回调
+     * @en Callback of click event
+     */
+    onClick?: React.MouseEventHandler;
+    /**
+     * 'a' 标签的 href 属性
+     * @remarks 仅在 component = 'a' 时使用
+     * @skip
+     */
+    href?: string;
+    /**
+     * 'a' 标签的 target 属性
+     * @remarks 仅在 component = 'a' 时使用
+     * @skip
+     */
+    target?: string;
+    /**
+     * 'ReactRouterLink' 组件的 to 属性
+     * @remarks 仅在 component 支持 to 属性时使用
+     * @skip
+     */
+    to?: string;
+}
+export {};

package/es/button/types.js

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

package/es/button/view/button.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import type { ButtonProps } from '../types.js';
+/**
+ * @component 按钮
+ * @en Button
+ * @type 通用 - General
+ * @remarks 按钮用于开始一个即时操作。- Button used to trigger an action.
+ * @when 标记一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。- Buttons are used for emphasizing important functions on your page.
+ * @others
+ * ## 无障碍键盘操作指南
+ * | 按键    | 说明          |
+ * | :---- | :---------- |
+ * | Enter | 触发 onClick 事件 |
+ * | SPACE | 触发 onClick 事件 |
+ * @othersEn
+ * ## ARIA and KeyBoard
+ * | KeyBoard          | Description                              |
+ * | :---------- | :------------------------------ |
+ * | Enter       | Trigger the onClick event    |
+ * | SPACE       | Trigger the onClick event    |
+ */
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<{}>>;
+export default Button;

package/es/button/view/button.js

@@ -0,0 +1,26 @@
+import { forwardRef } from 'react';
+import * as React from 'react';
+/**
+ * @component 按钮
+ * @en Button
+ * @type 通用 - General
+ * @remarks 按钮用于开始一个即时操作。- Button used to trigger an action.
+ * @when 标记一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。- Buttons are used for emphasizing important functions on your page.
+ * @others
+ * ## 无障碍键盘操作指南
+ * | 按键    | 说明          |
+ * | :---- | :---------- |
+ * | Enter | 触发 onClick 事件 |
+ * | SPACE | 触发 onClick 事件 |
+ * @othersEn
+ * ## ARIA and KeyBoard
+ * | KeyBoard          | Description                              |
+ * | :---------- | :------------------------------ |
+ * | Enter       | Trigger the onClick event    |
+ * | SPACE       | Trigger the onClick event    |
+ */
+const Button = forwardRef((props, ref) => {
+    return React.createElement("div", null, props.children);
+});
+Button.displayName = 'Button';
+export default Button;

package/es/float-button/hooks/useAutoAlign.d.ts

@@ -0,0 +1,11 @@
+import type { BalloonProps } from '../types';
+/**
+ * 自动调整弹层 align 位置逻辑
+ */
+export declare function useAutoAlign(dom: HTMLElement | null | undefined, trigger: HTMLElement | null, { enable, defaultAlign, }: {
+    enable?: boolean;
+    defaultAlign: BalloonProps['align'];
+}): {
+    align: "b" | "br" | "rt" | "tr" | "t" | "r" | "l" | "tl" | "bl" | "lt" | "lb" | "rb" | undefined;
+    update: () => void;
+};

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

@@ -0,0 +1,45 @@
+import { useState } from 'react';
+import { getNearlyEdge, isInScreen } from '../util';
+import { useThrottle } from '../../utils';
+/**
+ * 自动调整弹层 align 位置逻辑
+ */
+export function useAutoAlign(dom, trigger, { enable, defaultAlign, }) {
+    const [align, setAlign] = useState(defaultAlign);
+    const update = () => {
+        if (!enable || !dom || !trigger) {
+            return;
+        }
+        if (isInScreen(dom)) {
+            return;
+        }
+        const [edge, subEdge] = getNearlyEdge(trigger, ['top', 'right', 'bottom', 'left']);
+        let newAlign = align;
+        switch (edge) {
+            case 'top': {
+                newAlign = subEdge === 'left' ? 'bl' : 'br';
+                break;
+            }
+            case 'right': {
+                newAlign = subEdge === 'top' ? 'lt' : 'lb';
+                break;
+            }
+            case 'bottom': {
+                newAlign = subEdge === 'left' ? 'tl' : 'tr';
+                break;
+            }
+            case 'left': {
+                newAlign = subEdge === 'top' ? 'rt' : 'rb';
+                break;
+            }
+        }
+        if (newAlign !== align) {
+            setAlign(newAlign);
+        }
+    };
+    const throttleUpdate = useThrottle(update, 100);
+    return {
+        align,
+        update: throttleUpdate,
+    };
+}

package/es/float-button/hooks/useAutoHide.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import type { Edge, Position } from '../types';
+/**
+ * 自动隐藏悬浮球逻辑
+ */
+export declare function useAutoHide(dom: HTMLElement | null, { enable, leftSize, interactiveEdges, }: {
+    enable?: boolean;
+    leftSize?: number;
+    interactiveEdges?: Edge[];
+}): {
+    isHideRef: import("react").MutableRefObject<boolean>;
+    handleMove: (e: MouseEvent) => void;
+    setHide: (hide: boolean) => void;
+    saveRestorePosition: (position?: Position) => void;
+};

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

@@ -0,0 +1,157 @@
+import { useEffect, useRef } from 'react';
+import { getScreenSize, getNearlyEdge } from '../util';
+import { useThrottle, useDebounce } from '../../utils';
+/**
+ * 自动隐藏悬浮球逻辑
+ */
+export function useAutoHide(dom, { enable, leftSize, interactiveEdges, }) {
+    const isHideRef = useRef(false);
+    const positionRef = useRef();
+    const setByMouseEnterRef = useRef(false);
+    const setPosition = ({ left, top }, animation = true) => {
+        if (!dom) {
+            return;
+        }
+        dom.style.transition = animation ? 'transform 0.25s' : '';
+        dom.style.transform = `translate(${left}px, ${top}px)`;
+        dom.style.left = '0px';
+        dom.style.top = '0px';
+    };
+    const saveRestorePosition = (position) => {
+        if (!dom && !position) {
+            return;
+        }
+        const { left, top } = position || dom.getBoundingClientRect();
+        positionRef.current = { left, top };
+    };
+    const triggerHide = (hide, rect) => {
+        if (!dom) {
+            return;
+        }
+        isHideRef.current = hide;
+        if (hide) {
+            const [edge] = getNearlyEdge(dom, interactiveEdges, rect);
+            const { left, top, width, height } = rect || dom.getBoundingClientRect();
+            const screenSize = getScreenSize();
+            if (edge === 'left' || edge === 'right') {
+                const resolvedLeftSize = typeof leftSize !== 'undefined'
+                    ? Math.max(Math.min(leftSize, width - 10), 10)
+                    : width / 2;
+                setPosition({
+                    left: edge === 'left'
+                        ? resolvedLeftSize - width
+                        : screenSize.width - resolvedLeftSize,
+                    top,
+                });
+            }
+            else if (edge === 'top' || edge === 'bottom') {
+                const resolvedLeftSize = typeof leftSize !== 'undefined'
+                    ? Math.max(Math.min(leftSize, height - 10), 10)
+                    : height / 2;
+                setPosition({
+                    left,
+                    top: edge === 'top'
+                        ? resolvedLeftSize - height
+                        : screenSize.height - resolvedLeftSize,
+                });
+            }
+        }
+        else {
+            positionRef.current && setPosition(positionRef.current);
+        }
+    };
+    const setHide = (hide, rect) => {
+        if (isHideRef.current === hide || !dom || !enable) {
+            return;
+        }
+        triggerHide(hide, rect);
+    };
+    const setHideByMouse = (hide) => {
+        if (hide) {
+            if (setByMouseEnterRef.current) {
+                setHide(true);
+                setByMouseEnterRef.current = false;
+            }
+        }
+        else if (isHideRef.current) {
+            setByMouseEnterRef.current = true;
+            setHide(false);
+        }
+    };
+    const setHideByApi = (hide) => {
+        setByMouseEnterRef.current = false;
+        setHide(hide);
+    };
+    const debounceTriggerHide = useDebounce(triggerHide, 100);
+    const throttleSetHideByMouse = useThrottle(setHideByMouse, 250);
+    const throttleSetHideByApi = useThrottle(setHideByApi, 250);
+    useEffect(() => {
+        if (!dom) {
+            return;
+        }
+        const enter = () => {
+            throttleSetHideByMouse(false);
+        };
+        const leave = () => {
+            throttleSetHideByMouse(true);
+        };
+        dom.addEventListener('mouseenter', enter);
+        dom.addEventListener('mouseleave', leave);
+        return () => {
+            dom.removeEventListener('mouseenter', enter);
+            dom.removeEventListener('mouseleave', leave);
+        };
+    }, [dom]);
+    useEffect(() => {
+        if (!dom) {
+            return;
+        }
+        const onResize = () => {
+            if (isHideRef.current) {
+                debounceTriggerHide(true);
+            }
+        };
+        window.addEventListener('resize', onResize);
+        return () => {
+            window.removeEventListener('resize', onResize);
+        };
+    }, [dom]);
+    const handleMove = (e) => {
+        if (!enable || !dom) {
+            return;
+        }
+        setByMouseEnterRef.current = false;
+        const { clientX, clientY } = e;
+        const rect = dom.getBoundingClientRect();
+        const { width, height } = rect;
+        const screenSize = getScreenSize();
+        // 判断是否贴近边缘
+        if (clientX > width / 2 &&
+            clientX < screenSize.width - width / 2 &&
+            clientY > height / 2 &&
+            clientY < screenSize.height - height / 2) {
+            return;
+        }
+        if (isHideRef.current) {
+            return;
+        }
+        const [edge] = getNearlyEdge(dom, interactiveEdges, rect);
+        const conditions = {
+            left: clientX <= width / 2,
+            right: clientX >= screenSize.width - width / 2,
+            top: clientY <= height / 2,
+            bottom: clientY >= screenSize.height - height / 2,
+        };
+        if (edge && conditions[edge]) {
+            saveRestorePosition(rect);
+            setHide(true, rect);
+        }
+    };
+    const throttleHandleMove = useThrottle(handleMove, 100);
+    return {
+        isHideRef,
+        handleMove: throttleHandleMove,
+        setHide: throttleSetHideByApi,
+        saveRestorePosition,
+    };
+}

package/es/float-button/hooks/useDragable.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { DragableOption } from '../types';
+/**
+ * 拖拽逻辑
+ */
+export declare function useDragable(dom: HTMLElement | null | undefined, options: DragableOption): {
+    className?: string;
+    style?: React.CSSProperties;
+};

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

@@ -0,0 +1,128 @@
+import { useEffect, useRef, useState } from 'react';
+import { adjustBySafeAreaMargin, getScreenSize } from '../util';
+function normalizePositionRatio(ratio) {
+    ratio = Number(ratio);
+    if (typeof ratio !== 'number' || isNaN(ratio)) {
+        return 1;
+    }
+    return Math.max(0, Math.min(1, ratio));
+}
+function parsePosition(position, element) {
+    if (!position || !element) {
+        return undefined;
+    }
+    if (Array.isArray(position)) {
+        const [widthRatio, heightRatio] = position;
+        const { width, height } = getScreenSize();
+        const rect = element.getBoundingClientRect();
+        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),
+        };
+    }
+    return position;
+}
+function normalizePositionStyle(position) {
+    if (!position) {
+        return undefined;
+    }
+    return {
+        transform: `translate(${position.left}px, ${position.top}px)`,
+        left: 0,
+        top: 0,
+    };
+}
+/**
+ * 拖拽逻辑
+ */
+export function useDragable(dom, options) {
+    const optionsRef = useRef(options);
+    optionsRef.current = options;
+    const [position, setPosition] = useState();
+    useEffect(() => {
+        if (!dom || !options.enable) {
+            return;
+        }
+        let isDown = false;
+        let isMoving = false;
+        let leftOffset = 0;
+        let topOffset = 0;
+        let domSize;
+        let domRect;
+        let lastPosition;
+        const down = (e) => {
+            var _a, _b;
+            isDown = true;
+            lastPosition = undefined;
+            const rect = dom.getBoundingClientRect();
+            leftOffset = rect.left - e.clientX;
+            topOffset = rect.top - e.clientY;
+            domSize = { width: rect.width, height: rect.height };
+            (_b = (_a = optionsRef.current).onDragBefore) === null || _b === void 0 ? void 0 : _b.call(_a, dom);
+            domRect = dom.getBoundingClientRect();
+        };
+        const move = (e) => {
+            var _a, _b, _c, _d;
+            if (!isDown) {
+                return;
+            }
+            e.preventDefault();
+            isMoving = true;
+            // do update dom position
+            const position = Object.assign({ left: e.clientX + leftOffset, top: e.clientY + topOffset }, domSize);
+            const adjustPosition = adjustBySafeAreaMargin(position, domRect, optionsRef.current.safeAreaMargin);
+            const { left, top } = adjustPosition || position;
+            if (lastPosition && lastPosition.left === left && lastPosition.top === top) {
+                (_b = (_a = optionsRef.current).onDraging) === null || _b === void 0 ? void 0 : _b.call(_a, dom, e);
+                return;
+            }
+            lastPosition = { left, top };
+            const res = (_d = (_c = optionsRef.current).onDraging) === null || _d === void 0 ? void 0 : _d.call(_c, dom, e);
+            if (res === false) {
+                return;
+            }
+            dom.style.transition = 'unset';
+            dom.style.transform = `translate(${left}px, ${top}px)`;
+            dom.style.left = `0px`;
+            dom.style.top = `0px`;
+        };
+        const up = (e) => {
+            var _a, _b;
+            if (!isDown) {
+                return;
+            }
+            if (!isMoving) {
+                isDown = false;
+                return;
+            }
+            dom.style.transition = '';
+            isDown = false;
+            isMoving = false;
+            leftOffset = 0;
+            topOffset = 0;
+            (_b = (_a = optionsRef.current).onDragend) === null || _b === void 0 ? void 0 : _b.call(_a, dom);
+            if (dom !== e.target && !dom.contains(e.target)) {
+                return;
+            }
+            // do update position
+            const rect = dom.getBoundingClientRect();
+            setPosition({ left: rect.left, top: rect.top });
+        };
+        dom.addEventListener('mousedown', down);
+        window.addEventListener('mousemove', move);
+        window.addEventListener('mouseup', up);
+        return () => {
+            dom.removeEventListener('mousedown', down);
+            window.removeEventListener('move', move);
+            window.removeEventListener('up', up);
+        };
+    }, [dom, options.enable]);
+    return {
+        className: '',
+        style: (position ? normalizePositionStyle(position) : undefined) ||
+            parsePosition(options.defaultPosition, dom) ||
+            {},
+    };
+}

package/es/float-button/hooks/useNestleEdge.d.ts

@@ -0,0 +1,13 @@
+import type { Margin, Edge, Position } from '../types';
+/**
+ * 吸边逻辑
+ */
+export declare function useNestleEdge(dom: HTMLElement | null, { enable, safeAreaMargin, interactiveEdges, onUpdate, onUpdateEnd, }: {
+    enable?: boolean;
+    safeAreaMargin?: Margin;
+    interactiveEdges?: Edge[];
+    onUpdate?: (position: Position) => void | false;
+    onUpdateEnd?: (position: Position) => void;
+}): {
+    update: (animation?: boolean) => void;
+};

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

@@ -0,0 +1,77 @@
+import { useEffect, useRef } from 'react';
+import { useDebounce } from '../../utils';
+import { getScreenSize, getNearlyEdge, adjustBySafeAreaMargin } from '../util';
+/**
+ * 吸边逻辑
+ */
+export function useNestleEdge(dom, { enable, safeAreaMargin, interactiveEdges, onUpdate, onUpdateEnd, }) {
+    const eventTimerRef = 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 } = getScreenSize();
+        const [edge] = 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 } = 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 = useDebounce(() => update(), 100);
+    useEffect(() => {
+        if (dom) {
+            update(false);
+        }
+    }, [dom]);
+    useEffect(() => {
+        window.addEventListener('resize', debounceUpdate);
+        return () => {
+            window.removeEventListener('resize', debounceUpdate);
+        };
+    }, []);
+    return {
+        update,
+    };
+}

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

@@ -0,0 +1,5 @@
+import FloatButton from './view/float-button';
+import Backtop from './view/backtop';
+import { assignSubComponent } from '../utils/index';
+const FloatButtonWithSub = assignSubComponent(FloatButton, { Backtop });
+export default FloatButtonWithSub;