@alifd/chat 0.0.1 → 0.1.0

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

@@ -3,7 +3,15 @@ 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"));
+const next_1 = require("@alifd/next");
+const useTriggerType_1 = require("../hooks/useTriggerType");
+function Drawer(_a) {
+    var { prefix, target, children, trigger, triggerType, visible, onVisibleChange } = _a, rests = tslib_1.__rest(_a, ["prefix", "target", "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),
+        react_1.default.createElement(next_1.Drawer, Object.assign({}, rests, { visible: visible, onClose: reason => {
+                onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(false, reason);
+            }, v2: true }), children)));
 }
 exports.Drawer = Drawer;

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

@@ -9,14 +9,34 @@ const useAutoHide_1 = require("../hooks/useAutoHide");
 const useAutoAlign_1 = require("../hooks/useAutoAlign");
 const useNestleEdge_1 = require("../hooks/useNestleEdge");
 const useDragable_1 = require("../hooks/useDragable");
+const inner_drawer_1 = require("./inner-drawer");
+/**
+ * @component 悬浮球
+ * @en FloatButton
+ * @type 通用 - General
+ * @remarks 悬浮球组件用于承载机器人入口。- Apply for entry for web bot.
+ * @when 机器人入口 - The entry of robot
+ * @others
+ * ## 无障碍键盘操作指南
+ * | 按键    | 说明          |
+ * | :---- | :---------- |
+ * | Enter | 触发 onClick 事件 |
+ * | SPACE | 触发 onClick 事件 |
+ * @othersEn
+ * ## ARIA and KeyBoard
+ * | KeyBoard          | Description                              |
+ * | :---------- | :------------------------------ |
+ * | Enter       | Trigger the onClick event    |
+ * | SPACE       | Trigger the onClick event    |
+ */
 const FloatButton = (0, react_1.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 = tslib_1.__rest(_a, ["className", "style", "prefix", "type", "addonAfter", "addonBefore", "dragable", "safeAreaMargin", "autoNestleEdge", "interactiveEdges", "autoHide", "autoAlign", "leftSizeOfHidden", "defaultPosition", "trigger", "triggerType", "showClose", "align", "balloonProps", "children"]);
+    var { className, style, type = 'balloon', addonAfter, addonBefore, dragable, safeAreaMargin = [10, 10, 10, 10], autoNestleEdge = true, interactiveEdges = ['left', 'right'], autoHide, autoAlign, leftSizeOfHidden, defaultPosition, trigger, triggerType = 'click', showClose = true, align, balloonProps, drawerProps, children } = _a, others = tslib_1.__rest(_a, ["className", "style", "type", "addonAfter", "addonBefore", "dragable", "safeAreaMargin", "autoNestleEdge", "interactiveEdges", "autoHide", "autoAlign", "leftSizeOfHidden", "defaultPosition", "trigger", "triggerType", "showClose", "align", "balloonProps", "drawerProps", "children"]);
     const elRef = (0, react_1.useRef)(null);
     const triggerRef = (0, react_1.useRef)(null);
     const [el, setEl] = (0, react_1.useState)(null);
     const [triggerEl, setTriggerEl] = (0, react_1.useState)(null);
     const draggedRef = (0, react_1.useRef)(false);
-    const cls = `${prefix}float-button`;
+    const cls = `${index_1.PREFIX_DEFAULT}float-button`;
     const [visible, onVisibleChange] = (0, index_1.useControlable)(others, {
         valueName: 'visible',
         changeName: 'onVisibleChange',
@@ -25,10 +45,13 @@ const FloatButton = (0, react_1.forwardRef)((_a, ref) => {
         setEl(elRef.current);
         setTriggerEl(triggerRef.current);
     }, []);
-    const { align: currentAlign, update: updateAlign } = (0, useAutoAlign_1.useAutoAlign)(el === null || el === void 0 ? void 0 : el.querySelector(`.${cls}-popup`), triggerEl, {
+    const { align: currentAlign, update: _updateAlign } = (0, useAutoAlign_1.useAutoAlign)(el === null || el === void 0 ? void 0 : el.querySelector(`.${cls}-popup`), triggerEl, {
         enable: type === 'balloon' && autoAlign,
         defaultAlign: align,
     });
+    const updateAlign = () => {
+        _updateAlign(el === null || el === void 0 ? void 0 : el.querySelector(`.${cls}-popup`));
+    };
     const { isHideRef, setHide, handleMove, saveRestorePosition } = (0, useAutoHide_1.useAutoHide)(el, {
         enable: !visible && autoHide,
         interactiveEdges,
@@ -37,7 +60,6 @@ const FloatButton = (0, react_1.forwardRef)((_a, ref) => {
     (0, react_1.useEffect)(() => {
         if (visible) {
             setHide(false);
-            updateAlign();
         }
     }, [visible]);
     const { update: updateNestleEdge } = (0, useNestleEdge_1.useNestleEdge)(el, {
@@ -50,6 +72,9 @@ const FloatButton = (0, react_1.forwardRef)((_a, ref) => {
                 return false;
             }
         },
+        onUpdateEnd() {
+            updateAlign();
+        },
     });
     (0, react_1.useImperativeHandle)(ref, () => ({
         setVisible(value) {
@@ -89,13 +114,24 @@ const FloatButton = (0, react_1.forwardRef)((_a, ref) => {
                     return;
                 }
                 onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(...args);
+            }, popupProps: {
+                afterOpen() {
+                    var _a, _b;
+                    updateAlign();
+                    (_b = (_a = balloonProps === null || balloonProps === void 0 ? void 0 : balloonProps.popupProps) === null || _a === void 0 ? void 0 : _a.afterClose) === null || _b === void 0 ? void 0 : _b.call(_a);
+                },
             }, popupClassName: `${cls}-popup`, trigger: trigger, popupContainer: () => el, triggerType: triggerType, align: currentAlign, v2: true, closable: showClose, autoAdjust: false }, balloonProps), children));
     };
     const renderDrawer = () => {
         return react_1.default.createElement("div", null);
     };
     const renderInnerDrawer = () => {
-        return react_1.default.createElement("div", null);
+        return (react_1.default.createElement(inner_drawer_1.InnerDrawer, Object.assign({}, drawerProps, { prefix: `${cls}-`, target: ".card-legal-affairs", trigger: trigger, triggerType: triggerType, visible: visible, closable: showClose, onVisibleChange: (...args) => {
+                if (draggedRef.current) {
+                    return;
+                }
+                onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(...args);
+            } }), children));
     };
     const renderView = () => {
         switch (type) {

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

@@ -1,2 +1,16 @@
-import React from 'react';
-export declare function InnerDrawer(): React.JSX.Element;
+import React, { type ReactNode } from 'react';
+import type { FloatButtonProps } from '../types';
+export interface InnerDrawerProps {
+    className?: string;
+    title?: ReactNode;
+    prefix: string;
+    target: string | (() => HTMLElement);
+    visible?: boolean;
+    onVisibleChange?: (visible: boolean, reason: string) => void;
+    children?: ReactNode;
+    trigger: ReactNode;
+    closable?: boolean;
+    triggerType: FloatButtonProps['triggerType'];
+    width?: string | number;
+}
+export declare function InnerDrawer({ className, prefix, target, children, trigger, triggerType, visible, onVisibleChange, closable, title, width, }: InnerDrawerProps): React.JSX.Element;

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

@@ -2,8 +2,108 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InnerDrawer = void 0;
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
-function InnerDrawer() {
-    return react_1.default.createElement("div", null, "inner-drawer");
+const react_1 = tslib_1.__importStar(require("react"));
+const react_dom_1 = tslib_1.__importDefault(require("react-dom"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const next_1 = require("@alifd/next");
+const useTriggerType_1 = require("../hooks/useTriggerType");
+function getTarget(target) {
+    if (typeof target === 'string') {
+        return document.querySelector(target);
+    }
+    return target();
+}
+function getMountTarget(prefix, target) {
+    const dom = getTarget(target);
+    let parent = dom === null || dom === void 0 ? void 0 : dom.parentElement;
+    if (!dom || !parent) {
+        return null;
+    }
+    if (!parent.dataset.chat) {
+        const oldParent = parent;
+        parent = document.createElement('div');
+        parent.classList.add(`${prefix}outer`);
+        parent.dataset.chat = 'drawer';
+        oldParent.appendChild(parent);
+        parent.appendChild(dom);
+    }
+    let mountTarget = parent.childNodes[1];
+    if (!mountTarget) {
+        mountTarget = document.createElement('div');
+        mountTarget.dataset.chat = 'drawer-mounted';
+        mountTarget.classList.add(`${prefix}inner-end`);
+        mountTarget.style.width = '0px';
+        mountTarget.style.opacity = '0';
+        parent.appendChild(mountTarget);
+    }
+    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);
+    (0, react_1.useEffect)(() => {
+        if (visible) {
+            setMount(visible);
+        }
+    }, [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);
+            return () => {
+                clearTimeout(timer);
+            };
+        }
+    });
+    (0, react_1.useEffect)(() => {
+        if (!mountTarget || !className) {
+            return;
+        }
+        mountTarget.classList.add(className);
+        return () => {
+            mountTarget.classList.remove(className);
+        };
+    }, [mountTarget, className]);
+    (0, react_1.useEffect)(() => {
+        const onClick = (e) => {
+            const dom = domRef.current;
+            const trigger = triggerRef.current;
+            const target = e.target;
+            if (!dom || !trigger || !target) {
+                return;
+            }
+            if (!dom.contains(target) && !trigger.contains(target)) {
+                handleVisibleChangeRef.current(false, 'docClick');
+            }
+        };
+        window.addEventListener('click', onClick);
+        return () => {
+            window.removeEventListener('click', onClick);
+        };
+    }, []);
+    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_1.default.createElement("div", { className: `${cls}-inner` },
+                    react_1.default.createElement("div", { className: `${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, 'close') },
+                            react_1.default.createElement(next_1.Icon, { className: `${cls}-header-close-icon`, type: "close", size: 14 })))),
+                    react_1.default.createElement("div", { className: `${cls}-body` }, children))), mountTarget)));
 }
 exports.InnerDrawer = InnerDrawer;

package/lib/index.d.ts

@@ -1,2 +1,8 @@
 export { default as Button } from './button';
+export { default as Card } from './card';
+export { default as Feedback } from './feedback';
+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 declare const version: string;

package/lib/index.js

@@ -3,7 +3,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.version = exports.Button = void 0;
+exports.version = exports.Tab = exports.Tag = exports.Text = exports.FloatButton = exports.Feedback = exports.Card = exports.Button = void 0;
 var button_1 = require("./button");
 Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return __importDefault(button_1).default; } });
-exports.version = '0.0.1';
+var card_1 = require("./card");
+Object.defineProperty(exports, "Card", { enumerable: true, get: function () { return __importDefault(card_1).default; } });
+var feedback_1 = require("./feedback");
+Object.defineProperty(exports, "Feedback", { enumerable: true, get: function () { return __importDefault(feedback_1).default; } });
+var float_button_1 = require("./float-button");
+Object.defineProperty(exports, "FloatButton", { enumerable: true, get: function () { return __importDefault(float_button_1).default; } });
+var text_1 = require("./text");
+Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return __importDefault(text_1).default; } });
+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.0';

package/lib/tab/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Tab as NextTab } from '@alifd/next';
+import type { TabProps } from '@alifd/next/types/tab';
+declare const TabWithSub: React.ForwardRefExoticComponent<TabProps & React.RefAttributes<NextTab>> & {
+    Item: typeof import("@alifd/next/types/tab").Item;
+    displayName: string;
+};
+export default TabWithSub;

package/lib/tab/index.js

@@ -0,0 +1,16 @@
+"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");
+const Tab = (0, react_1.forwardRef)((_a, ref) => {
+    var { className, size = 'small' } = _a, props = tslib_1.__rest(_a, ["className", "size"]);
+    return react_1.default.createElement(next_1.Tab, Object.assign({}, props, { className: (0, classnames_1.default)(`${utils_1.PREFIX_DEFAULT}tabs`, className), ref: ref, size: size }));
+});
+const TabWithSub = (0, utils_1.assignSubComponent)(Tab, {
+    Item: next_1.Tab.Item,
+    displayName: 'Tab',
+});
+exports.default = TabWithSub;

package/lib/tab/main.scss

@@ -0,0 +1,10 @@
+@import "@alifd/next/variables.scss";
+@import "../core/variables.scss";
+
+.#{$prefix}tabs {
+  &.#{$css-prefix}tabs-pure {
+    .#{$css-prefix}tabs-bar {
+      border-color: transparent;
+    }
+  }
+}

package/lib/tab/style.d.ts

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

package/lib/tab/style.js

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

package/lib/tag/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @component 标签
+ * @en Tag
+ * @type 通用 - General
+ * @remarks 同 Next Tag - Same as Next.Tag
+ * @when Tag
+ */
+import React from 'react';
+import { Tag as NextTag } from '@alifd/next';
+import type { TagProps } from '@alifd/next/types/tag';
+declare const Tag: React.ForwardRefExoticComponent<TagProps & React.RefAttributes<NextTag>>;
+export default Tag;

package/lib/tag/index.js

@@ -0,0 +1,20 @@
+"use strict";
+/**
+ * @component 标签
+ * @en Tag
+ * @type 通用 - General
+ * @remarks 同 Next Tag - Same as Next.Tag
+ * @when Tag
+ */
+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");
+const Tag = (0, react_1.forwardRef)((_a, ref) => {
+    var { className, size = 'small', type = 'normal' } = _a, props = tslib_1.__rest(_a, ["className", "size", "type"]);
+    return (react_1.default.createElement(next_1.Tag, Object.assign({}, props, { ref: ref, className: (0, classnames_1.default)(`${utils_1.PREFIX_DEFAULT}tag`, className), size: size, type: type })));
+});
+Tag.displayName = 'Tag';
+exports.default = Tag;

package/lib/tag/main.scss

@@ -0,0 +1,9 @@
+@import '@alifd/next/variables.scss';
+@import "../core/variables.scss";
+
+.#{$prefix}tag {
+
+  &.#{$css-prefix}tag {
+      border-color: transparent;
+  }
+}

package/lib/tag/style.d.ts

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

package/lib/tag/style.js

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

package/lib/tag/types.js

@@ -0,0 +1 @@
+"use strict";

package/lib/text/index.d.ts

@@ -0,0 +1,3 @@
+import type { TextProps } from './types';
+declare const _default: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<TextProps & import("@alifd/next/types/config-provider/types").ComponentCommonProps, undefined, {}>;
+export default _default;