@alifd/chat 0.0.1 → 0.1.1

package/es/tag/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @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';
+export type { TagProps } from '@alifd/next/types/tag';
+declare const _default: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<Pick<TagProps & React.RefAttributes<NextTag>, "key" | keyof TagProps> & import("@alifd/next/types/config-provider/types").ComponentCommonProps, NextTag, {}>;
+export default _default;

package/es/tag/index.js

@@ -0,0 +1,21 @@
+/**
+ * @component 标签
+ * @en Tag
+ * @type 通用 - General
+ * @remarks 同 Next Tag - Same as Next.Tag
+ * @when Tag
+ */
+import { __rest } from "tslib";
+import React, { forwardRef } from 'react';
+import { Tag as NextTag, ConfigProvider } from '@alifd/next';
+import cs from 'classnames';
+import { PREFIX_DEFAULT, assignSubComponent } from '../utils';
+const Tag = forwardRef((_a, ref) => {
+    var { className, size = 'small', type = 'normal' } = _a, props = __rest(_a, ["className", "size", "type"]);
+    return (React.createElement(NextTag, Object.assign({}, props, { ref: ref, className: cs(`${PREFIX_DEFAULT}tag`, className), size: size, type: type })));
+});
+// 暂时只开放 Tag 组件，其它子组件后续看需求
+const TagWithSub = assignSubComponent(Tag, {
+    displayName: 'Tag',
+});
+export default ConfigProvider.config(TagWithSub);

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

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

package/es/tag/style.js

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

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

package/es/text/index.js

@@ -0,0 +1,301 @@
+import React, { useRef, useLayoutEffect, useCallback, useEffect, useState, useMemo, } from 'react';
+import { ConfigProvider } from '@alifd/next';
+import cs from 'classnames';
+import { PREFIX_DEFAULT, useControlable, useDebounce } from '../utils';
+import Button from '../button';
+function normalizeTriggerType(triggerType) {
+    if (!triggerType) {
+        return ['click'];
+    }
+    const arr = Array.isArray(triggerType) ? triggerType : [triggerType];
+    const allowedSet = new Set(['click', 'hover']);
+    const results = Array.from(new Set(arr.filter(t => allowedSet.has(t))));
+    if (!results.length) {
+        results.push('click');
+    }
+    return results;
+}
+function useCollapseText({ enable, boxRef, textRef, maxLine, placeholder = '...', before, after, }) {
+    const callbackRef = useRef({ before, after });
+    callbackRef.current = { before, after };
+    const [canCollapse, setCanCollapse] = useState(false);
+    const getLineHeight = useCallback((dom) => {
+        const lineHeight = getComputedStyle(dom).getPropertyValue('line-height');
+        if (lineHeight === 'normal') {
+            // 向容器里添加一段文本来测试行高
+            const span = document.createElement('span');
+            span.style.whiteSpace = 'nowrap';
+            span.innerText = 'test';
+            span.style.visibility = 'hidden';
+            dom.appendChild(span);
+            const height = span.offsetHeight;
+            dom.removeChild(span);
+            return height;
+        }
+        return parseFloat(lineHeight);
+    }, []);
+    const handleCollapseText = useCallback((box, text, maxLine) => {
+        var _a, _b, _c, _d;
+        // 计算思路，通过容器的实际高度 / 行高 来判断是否超出限制行数，然后多次通过二分法截断文本
+        const lineHeight = getLineHeight(text);
+        const maxHeight = maxLine * lineHeight;
+        const isOver = () => {
+            const height = box.offsetHeight;
+            const max = maxHeight + lineHeight - 1;
+            return height > max;
+        };
+        if (!isOver()) {
+            return;
+        }
+        const removeNodeAndTry = (node) => {
+            node.parentNode.removeChild(node);
+            return !isOver();
+        };
+        const sliceTextAndTry = (node) => {
+            const str = node.textContent;
+            if (!str) {
+                if (removeNodeAndTry(node)) {
+                    return true;
+                }
+            }
+            else {
+                let left = 0;
+                let right = str.length - 1;
+                while (left < right) {
+                    const middle = Math.floor((left + right) / 2);
+                    const temp1 = str.slice(0, middle) + placeholder;
+                    node.textContent = temp1;
+                    if (!isOver()) {
+                        // 若已经到减去一个字符就满足，则中断
+                        if (right - middle === 1) {
+                            return true;
+                        }
+                        // 减半后高度小于最大高度，向后二分
+                        left = middle;
+                    }
+                    else {
+                        // 减半后高度还是大于最大高度，则继续向前二分
+                        right = middle;
+                    }
+                    if (left === right) {
+                        break;
+                    }
+                }
+                if (removeNodeAndTry(node)) {
+                    return true;
+                }
+            }
+            return false;
+        };
+        const loop = (childNodes) => {
+            const nodes = Array.from(childNodes);
+            for (let i = nodes.length - 1; i >= 0; i--) {
+                const node = nodes[i];
+                if (node.childNodes.length) {
+                    loop(node.childNodes);
+                }
+                else if (sliceTextAndTry(node)) {
+                    return;
+                }
+            }
+        };
+        const isContinue = (_b = (_a = callbackRef.current).before) === null || _b === void 0 ? void 0 : _b.call(_a);
+        if (isContinue === false) {
+            return;
+        }
+        loop(text.childNodes);
+        (_d = (_c = callbackRef.current).after) === null || _d === void 0 ? void 0 : _d.call(_c);
+    }, []);
+    useLayoutEffect(() => {
+        const box = boxRef.current;
+        const text = textRef.current;
+        if (!box || !text || typeof maxLine !== 'number' || maxLine <= 0) {
+            return;
+        }
+        const lineHeight = getLineHeight(text);
+        const newCanCollapse = box.offsetHeight > maxLine * lineHeight;
+        if (canCollapse !== newCanCollapse) {
+            setCanCollapse(newCanCollapse);
+        }
+    });
+    useLayoutEffect(() => {
+        const box = boxRef.current;
+        const text = textRef.current;
+        if (!enable ||
+            !box ||
+            !text ||
+            typeof maxLine !== 'number' ||
+            maxLine <= 0 ||
+            !canCollapse) {
+            return;
+        }
+        handleCollapseText(box, text, maxLine);
+    });
+    return canCollapse;
+}
+function useEnsureBoxFullLine({ enableRef, boxRef, modifierRef, before, after, }) {
+    const callbackRef = useRef({ before, after });
+    callbackRef.current = { before, after };
+    const ensureTriggerEnd = useCallback((box, modifier) => {
+        var _a, _b, _c, _d, _e, _f;
+        const blank = '&nbsp;';
+        const isEnd = () => {
+            const height = box.offsetHeight;
+            const text = document.createElement('span');
+            text.innerHTML = blank;
+            modifier.appendChild(text);
+            // 添加一个空格元素后，容器高度变化了则代表已经在行末
+            if (box.offsetHeight > height) {
+                modifier.removeChild(text);
+                return true;
+            }
+            modifier.removeChild(text);
+            return false;
+        };
+        (_b = (_a = callbackRef.current).before) === null || _b === void 0 ? void 0 : _b.call(_a);
+        if (isEnd()) {
+            (_d = (_c = callbackRef.current).after) === null || _d === void 0 ? void 0 : _d.call(_c);
+            return;
+        }
+        const height = box.offsetHeight;
+        const text = document.createElement('span');
+        text.innerHTML = blank;
+        modifier.appendChild(text);
+        const MAX_TIMES = 9999;
+        let times = 0;
+        while (box.offsetHeight === height) {
+            text.innerHTML = `${text.innerHTML}${blank}`;
+            if (times++ >= MAX_TIMES) {
+                break;
+            }
+        }
+        text.innerHTML = text.innerHTML.replace(new RegExp(`${blank}$`), '');
+        (_f = (_e = callbackRef.current).after) === null || _f === void 0 ? void 0 : _f.call(_e);
+    }, []);
+    useLayoutEffect(() => {
+        const enable = enableRef.current;
+        const box = boxRef.current;
+        const modifier = modifierRef.current;
+        if (!enable || !box || !modifier) {
+            return;
+        }
+        // 通过向 modifier 添加空格元素来保证 trigger 元素正好在行末
+        ensureTriggerEnd(box, modifier);
+    });
+}
+function useResize(domRef, onResize, shouldTriggerRef) {
+    const sizeRef = useRef();
+    const debounceOnResize = useDebounce(onResize, 50);
+    const observer = useMemo(() => {
+        return new ResizeObserver(() => {
+            const dom = domRef.current;
+            if (!dom || !shouldTriggerRef.current) {
+                return;
+            }
+            const { offsetWidth, offsetHeight } = dom;
+            const lastSize = sizeRef.current;
+            const newSize = { width: offsetWidth, height: offsetHeight };
+            if (!lastSize ||
+                newSize.width !== lastSize.width ||
+                newSize.height !== lastSize.height) {
+                debounceOnResize();
+            }
+            sizeRef.current = newSize;
+        });
+    }, []);
+    useEffect(() => {
+        const dom = domRef.current;
+        if (!dom) {
+            return;
+        }
+        observer.observe(dom);
+        return () => {
+            observer.unobserve(dom);
+        };
+    }, [domRef.current, observer]);
+}
+function TextComp(props) {
+    const { className, maxLine, renderTrigger, triggerType = 'click', locale, showTrigger = true, children, } = props;
+    const collapsable = typeof maxLine === 'number' && maxLine > 0;
+    const { collapseText = '收起', expandText = '展开' } = locale || {};
+    const prefix = PREFIX_DEFAULT;
+    const triggerTypes = normalizeTriggerType(triggerType);
+    const clickToTrigger = triggerTypes.includes('click');
+    const hoverToTrigger = triggerTypes.includes('hover');
+    const [value, onChange] = useControlable(props, {
+        valueName: 'visible',
+        changeName: 'onVisibleChange',
+    });
+    const shouldTriggerResizeRef = useRef(false);
+    const [, rerender] = useState({});
+    const boxRef = useRef(null);
+    const textRef = useRef(null);
+    const triggerRef = useRef(null);
+    const canCollapse = useCollapseText({
+        boxRef,
+        textRef,
+        maxLine,
+        enable: !value && collapsable,
+        before() {
+            shouldTriggerResizeRef.current = false;
+        },
+        after() {
+            shouldTriggerResizeRef.current = true;
+        },
+    });
+    useEnsureBoxFullLine({
+        enableRef: triggerRef,
+        boxRef,
+        modifierRef: textRef,
+        before() {
+            shouldTriggerResizeRef.current = false;
+        },
+        after() {
+            shouldTriggerResizeRef.current = true;
+        },
+    });
+    useResize(boxRef, () => {
+        rerender({});
+    }, shouldTriggerResizeRef);
+    useEffect(() => {
+        shouldTriggerResizeRef.current = true;
+    }, []);
+    const render = renderTrigger ||
+        ((visible, onVisibleChange) => {
+            return (React.createElement(Button, { text: true, className: `${prefix}text-trigger-btn`, component: "a", type: "primary", onClick: () => {
+                    onVisibleChange(!visible);
+                } }, visible ? collapseText : expandText));
+        });
+    const triggerByContent = (newValue = value) => {
+        if (!collapsable) {
+            return;
+        }
+        onChange(newValue !== null && newValue !== void 0 ? newValue : !value, 'content');
+    };
+    const debounceTriggerByContent = useDebounce(triggerByContent, 100);
+    return (React.createElement("div", { className: cs(`${prefix}text`, className), ref: boxRef },
+        React.createElement("span", { ref: textRef, className: `${prefix}text-inner`, role: "textbox", tabIndex: 0, key: Math.random(), onKeyUp: e => {
+                if (!clickToTrigger || e.key !== 'Enter') {
+                    return;
+                }
+                triggerByContent();
+            }, onClick: () => {
+                if (!clickToTrigger) {
+                    return;
+                }
+                triggerByContent();
+            }, onMouseEnter: () => {
+                if (!hoverToTrigger) {
+                    return;
+                }
+                debounceTriggerByContent(true);
+            }, onMouseLeave: () => {
+                if (!hoverToTrigger) {
+                    return;
+                }
+                debounceTriggerByContent(false);
+            } }, children),
+        showTrigger && canCollapse && collapsable && (React.createElement("span", { className: `${prefix}text-trigger`, ref: triggerRef }, render(value, v => onChange(v, 'trigger'))))));
+}
+TextComp.displayName = 'Text';
+export default ConfigProvider.config(TextComp);

package/es/text/main.scss

@@ -0,0 +1,19 @@
+@import '../core/variables.scss';
+
+.#{$prefix}text {
+    display: inline-block;
+
+    &-inner {
+    }
+    &-trigger {
+        line-height: 1;
+
+        & &-btn {
+            font-size: inherit;
+            line-height: inherit;
+            height: auto;
+            vertical-align: baseline;
+            margin-left: 12px;
+        }
+    }
+}

package/es/text/style.d.ts

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

package/es/text/style.js

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

package/es/text/types.d.ts

@@ -0,0 +1,16 @@
+import type { HTMLAttributes, ReactElement, ReactNode } from 'react';
+export type HTMLAttributesWeak = Omit<HTMLAttributes<HTMLDivElement>, 'children'>;
+export type TriggerType = 'click' | 'hover';
+export interface TextProps extends HTMLAttributesWeak {
+    maxLine?: number;
+    visible?: boolean;
+    children?: ReactNode;
+    onVisibleChange?: (visible: boolean, type: string) => void;
+    triggerType?: TriggerType | Array<TriggerType>;
+    showTrigger?: boolean;
+    renderTrigger?: (visible: boolean, onVisibleChange: (visible: boolean) => void) => ReactElement | string;
+    locale?: {
+        expandText?: string;
+        collapseText?: string;
+    };
+}

package/es/text/types.js

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

package/es/utils/consts.d.ts

@@ -0,0 +1 @@
+export declare const PREFIX_DEFAULT = "ct-";

package/es/utils/consts.js

@@ -0,0 +1 @@
+export const PREFIX_DEFAULT = 'ct-';

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

@@ -3,4 +3,4 @@ export interface ControlableOptions {
     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];
+export declare function useControlable<Value = unknown, OnChange extends (nextValue: Value, ...rest: unknown[]) => unknown = (nextValue: Value, ...rest: unknown[]) => unknown>(props: object, { valueName, defaultValueName, changeName, }?: ControlableOptions): readonly [Value, OnChange];

package/es/utils/hooks/useControlable.js

@@ -6,9 +6,10 @@ 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 typedProps = props;
+    const isControl = valueName in typedProps;
+    const propValue = (isControl ? typedProps[valueName] : typedProps[defaultValueName]);
+    const propOnChange = typedProps[changeName];
     const [value, setValue] = useState(() => propValue);
     const handleChange = (nextValue, ...rest) => {
         if (!isControl) {

package/es/utils/index.d.ts

@@ -1,3 +1,4 @@
+export * from './consts';
 export * from './types';
 export * from './common';
 export * from './func';

package/es/utils/index.js

@@ -1,3 +1,4 @@
+export * from './consts';
 export * from './types';
 export * from './common';
 export * from './func';

package/lib/button/index.d.ts

@@ -1 +1,24 @@
-export { default } from './view/button.js';
+/**
+ * @component 按钮
+ * @en Button
+ * @type 通用 - General
+ * @remarks 同 Next Button，按钮用于开始一个即时操作。- Same as Next.Button, 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    |
+ */
+import React from 'react';
+import type { ButtonProps } from './types';
+export * from './types';
+declare const _default: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<Pick<ButtonProps & React.RefAttributes<import("@alifd/next/types/config-provider/types").ConfiguredComponent<import("@alifd/next/types/button").ButtonProps & import("@alifd/next/types/config-provider/types").ComponentCommonProps, import("@alifd/next/types/button/view/button").default>>, keyof ButtonProps | "key"> & import("@alifd/next/types/config-provider/types").ComponentCommonProps, import("@alifd/next/types/config-provider/types").ConfiguredComponent<import("@alifd/next/types/button").ButtonProps & import("@alifd/next/types/config-provider/types").ComponentCommonProps, import("@alifd/next/types/button/view/button").default>, {}>;
+export default _default;

package/lib/button/index.js

@@ -1,8 +1,35 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
+/**
+ * @component 按钮
+ * @en Button
+ * @type 通用 - General
+ * @remarks 同 Next Button，按钮用于开始一个即时操作。- Same as Next.Button, 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    |
+ */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = void 0;
-var button_js_1 = require("./view/button.js");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(button_js_1).default; } });
+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 Button = (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.Button, Object.assign({}, props, { className: (0, classnames_1.default)(`${utils_1.PREFIX_DEFAULT}button`, className), size: size, ref: ref })));
+});
+const ButtonWithSub = (0, utils_1.assignSubComponent)(Button, {
+    displayName: 'Button',
+});
+tslib_1.__exportStar(require("./types"), exports);
+exports.default = next_1.ConfigProvider.config(ButtonWithSub);

package/lib/button/main.scss

@@ -0,0 +1,5 @@
+@import "../core/variables.scss";
+
+.#{$prefix}button {
+  
+}

package/lib/button/style.d.ts

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

package/lib/button/style.js

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

package/lib/card/index.d.ts

@@ -0,0 +1,6 @@
+import Collapsable from './view/collapsable';
+declare const CardWithSub: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<import("./types").CardProps & import("@alifd/next/types/config-provider/types").ComponentCommonProps, undefined, {}> & {
+    Collapsable: typeof Collapsable;
+};
+export * from './types';
+export default CardWithSub;

package/lib/card/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const utils_1 = require("../utils");
+const card_1 = tslib_1.__importDefault(require("./view/card"));
+const collapsable_1 = tslib_1.__importDefault(require("./view/collapsable"));
+const CardWithSub = (0, utils_1.assignSubComponent)(card_1.default, { Collapsable: collapsable_1.default });
+tslib_1.__exportStar(require("./types"), exports);
+exports.default = CardWithSub;