@alifd/chat 0.0.1 → 0.1.0

package/lib/text/index.js

@@ -0,0 +1,304 @@
+"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 button_1 = tslib_1.__importDefault(require("../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 = (0, react_1.useRef)({ before, after });
+    callbackRef.current = { before, after };
+    const [canCollapse, setCanCollapse] = (0, react_1.useState)(false);
+    const getLineHeight = (0, react_1.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 = (0, react_1.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);
+    }, []);
+    (0, react_1.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);
+        }
+    });
+    (0, react_1.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 = (0, react_1.useRef)({ before, after });
+    callbackRef.current = { before, after };
+    const ensureTriggerEnd = (0, react_1.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);
+    }, []);
+    (0, react_1.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 = (0, react_1.useRef)();
+    const debounceOnResize = (0, utils_1.useDebounce)(onResize, 50);
+    const observer = (0, react_1.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;
+        });
+    }, []);
+    (0, react_1.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 = utils_1.PREFIX_DEFAULT;
+    const triggerTypes = normalizeTriggerType(triggerType);
+    const clickToTrigger = triggerTypes.includes('click');
+    const hoverToTrigger = triggerTypes.includes('hover');
+    const [value, onChange] = (0, utils_1.useControlable)(props, {
+        valueName: 'visible',
+        changeName: 'onVisibleChange',
+    });
+    const shouldTriggerResizeRef = (0, react_1.useRef)(false);
+    const [, rerender] = (0, react_1.useState)({});
+    const boxRef = (0, react_1.useRef)(null);
+    const textRef = (0, react_1.useRef)(null);
+    const triggerRef = (0, react_1.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);
+    (0, react_1.useEffect)(() => {
+        shouldTriggerResizeRef.current = true;
+    }, []);
+    const render = renderTrigger ||
+        ((visible, onVisibleChange) => {
+            return (react_1.default.createElement(button_1.default, { 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 = (0, utils_1.useDebounce)(triggerByContent, 100);
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(`${prefix}text`, className), ref: boxRef },
+        react_1.default.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_1.default.createElement("span", { className: `${prefix}text-trigger`, ref: triggerRef }, render(value, v => onChange(v, 'trigger'))))));
+}
+TextComp.displayName = 'Text';
+exports.default = next_1.ConfigProvider.config(TextComp);

package/lib/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/lib/text/style.d.ts

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

package/lib/text/style.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("./main.scss");

package/lib/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/lib/text/types.js

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

package/lib/utils/consts.d.ts

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

package/lib/utils/consts.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PREFIX_DEFAULT = void 0;
+exports.PREFIX_DEFAULT = 'ct-';

package/lib/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/lib/utils/hooks/useControlable.js

@@ -9,9 +9,10 @@ function getDefaultValueName(valueName) {
     return `default${upperFirst(valueName)}`;
 }
 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] = (0, react_1.useState)(() => propValue);
     const handleChange = (nextValue, ...rest) => {
         if (!isControl) {

package/lib/utils/index.d.ts

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

package/lib/utils/index.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useThrottle = exports.useDebounce = exports.useControlable = void 0;
 const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./consts"), exports);
 tslib_1.__exportStar(require("./types"), exports);
 tslib_1.__exportStar(require("./common"), exports);
 tslib_1.__exportStar(require("./func"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alifd/chat",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "description": "A configurable component library for chat built on React.",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -14,10 +14,86 @@
       "import": "./es/button/index.js",
       "require": "./lib/button/index.js"
     },
+    "./button/style": {
+      "import": "./es/button/style.js",
+      "require": "./lib/button/style.js"
+    },
+    "./button/style.js": {
+      "import": "./es/button/style.js",
+      "require": "./lib/button/style.js"
+    },
+    "./card": {
+      "import": "./es/card/index.js",
+      "require": "./lib/card/index.js"
+    },
+    "./card/style": {
+      "import": "./es/card/style.js",
+      "require": "./lib/card/style.js"
+    },
+    "./card/style.js": {
+      "import": "./es/card/style.js",
+      "require": "./lib/card/style.js"
+    },
+    "./feedback": {
+      "import": "./es/feedback/index.js",
+      "require": "./lib/feedback/index.js"
+    },
+    "./feedback/style": {
+      "import": "./es/feedback/style.js",
+      "require": "./lib/feedback/style.js"
+    },
+    "./feedback/style.js": {
+      "import": "./es/feedback/style.js",
+      "require": "./lib/feedback/style.js"
+    },
     "./float-button": {
       "import": "./es/float-button/index.js",
       "require": "./lib/float-button/index.js"
     },
+    "./float-button/style": {
+      "import": "./es/float-button/style.js",
+      "require": "./lib/float-button/style.js"
+    },
+    "./float-button/style.js": {
+      "import": "./es/float-button/style.js",
+      "require": "./lib/float-button/style.js"
+    },
+    "./tab": {
+      "import": "./es/tab/index.js",
+      "require": "./lib/tab/index.js"
+    },
+    "./tab/style": {
+      "import": "./es/tab/style.js",
+      "require": "./lib/tab/style.js"
+    },
+    "./tab/style.js": {
+      "import": "./es/tab/style.js",
+      "require": "./lib/tab/style.js"
+    },
+    "./tag": {
+      "import": "./es/tag/index.js",
+      "require": "./lib/tag/index.js"
+    },
+    "./tag/style": {
+      "import": "./es/tag/style.js",
+      "require": "./lib/tag/style.js"
+    },
+    "./tag/style.js": {
+      "import": "./es/tag/style.js",
+      "require": "./lib/tag/style.js"
+    },
+    "./text": {
+      "import": "./es/text/index.js",
+      "require": "./lib/text/index.js"
+    },
+    "./text/style": {
+      "import": "./es/text/style.js",
+      "require": "./lib/text/style.js"
+    },
+    "./text/style.js": {
+      "import": "./es/text/style.js",
+      "require": "./lib/text/style.js"
+    },
     "./utils": {
       "import": "./es/utils/index.js",
       "require": "./lib/utils/index.js"
@@ -43,13 +119,16 @@
     "@rspack/dev-server": "^0.5.1",
     "@rspack/plugin-react-refresh": "^0.5.1",
     "@swc/core": "^1.3.104",
+    "@swc/helpers": "^0.5.6",
     "@types/fs-extra": "^11.0.4",
+    "@types/hoist-non-react-statics": "^3.3.5",
     "@types/lodash": "^4.14.202",
     "@types/minimist": "^1.2.5",
     "@types/react": "^16.0.0",
     "@types/react-dom": "^16.0.0",
     "@typescript-eslint/eslint-plugin": "^6.19.0",
     "@typescript-eslint/parser": "^6.19.0",
+    "ajv": "^8.12.0",
     "chalk": "^5.3.0",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
@@ -86,6 +165,7 @@
     "react-dom": ">=16.0.0"
   },
   "dependencies": {
+    "hoist-non-react-statics": "^3.3.2",
     "tslib": "^2.6.2"
   },
   "sideEffects": [

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

@@ -1,23 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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/lib/button/view/button.d.ts

@@ -1,23 +0,0 @@
-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/lib/button/view/button.js

@@ -1,29 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const react_1 = require("react");
-const React = tslib_1.__importStar(require("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 = (0, react_1.forwardRef)((props, ref) => {
-    return React.createElement("div", null, props.children);
-});
-Button.displayName = 'Button';
-exports.default = Button;