@alifd/chat 0.3.37-beta.0 → 0.3.37-beta.10

package/lib/float-button/__docs__/demo/basic/index.js

@@ -1,107 +0,0 @@
-"use strict";
-/**
- * @demo 基本使用
- * @en Basic usage
- * @order 1
- * @remarks remarks.- 111
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-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 chat_1 = require("@alifd/chat");
-require("@alifd/chat/es/float-button/style");
-const styled_components_1 = require("styled-components");
-const GlobalStyle = (0, styled_components_1.createGlobalStyle) `
-.my-trigger {
-    width: 42px;
-    height: 42px;
-    border-radius: 50%;
-    overflow: hidden;
-    box-shadow: 0 2px 10px 0 rgba(31, 56, 88, 0.15);
-    cursor: pointer;
-
-    &--active {
-        background: linear-gradient(0deg, #ff6f00 0%, #ff9616 100%);
-    }
-
-    &-img {
-        width: 100%;
-        height: 100%;
-        background: url('https://img.alicdn.com/imgextra/i3/O1CN01HV78sy1Q8Rieq3nI2_!!6000000001931-0-tps-84-84.jpg')
-            center / contain no-repeat;
-    }
-
-    &-close {
-        width: 100%;
-        height: 100%;
-        background: url('https://img.alicdn.com/tfs/TB1yEj_qhD1gK0jSZFsXXbldVXa-96-96.png') center /
-            contain no-repeat;
-    }
-}
-
-.my-popup {
-    width: 200px;
-    height: 200px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-`;
-// 关于 autoNestleEdge 的触发时机
-// 首次渲染：不会触发，首次位置满足吸边后需求解决
-// 点击：不会触发？
-// 拖拽：拖拽结束触发
-// 关于 autoHide 的触发时机
-function App() {
-    const [active, setActive] = (0, react_1.useState)(false);
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement(GlobalStyle, null),
-        react_1.default.createElement("div", null, "dragable/autoAlign/[20,50,50,200]/[100, 200, 50, 10]"),
-        react_1.default.createElement("iframe", { src: 'https://work.alibaba-inc.com/', style: {
-                width: '600px',
-                height: '600px',
-                background: 'pink',
-                pointerEvents: 'none',
-                userSelect: 'none',
-            } }),
-        react_1.default.createElement("iframe", { src: 'https://work.alibaba-inc.com/', style: {
-                width: '600px',
-                height: '600px',
-                background: 'blue',
-                userSelect: 'none',
-            } }),
-        react_1.default.createElement("iframe", { src: 'https://work.alibaba-inc.com/', style: {
-                width: '600px',
-                height: '600px',
-                background: 'red',
-                userSelect: 'none'
-            } }),
-        react_1.default.createElement(chat_1.FloatButton, { dragable: true, align: "bl", autoAlign // 这个是弹层的自动对齐，用于设置Balloon 组件中的align参数，根据弹层的内容有没有超出屏幕区域做相关的align调整
-            : true, onVisibleChange: v => setActive(v), safeAreaMargin: [0, 100, 50, 20], autoNestleEdge // 默认值是 true, 自动吸边，拖拽后自动贴边，safeAreaMargin 也同时影响自动吸边的边距，也影响点击后的位置重画
-            : true, 
-            // interactiveEdges={['top']} // 默认值左右
-            autoHide // 这个配置比较诡异，感觉基本不太能用
-            : true, defaultPosition: {
-                right: 100,
-                bottom: 50,
-                // left: 220
-            }, trigger: react_1.default.createElement("div", { className: (0, classnames_1.default)('my-trigger', { 'my-trigger--active': active }) }, active ? (react_1.default.createElement("div", { className: "my-trigger-close" })) : (react_1.default.createElement("div", { className: "my-trigger-img" }))), 
-            // addonBefore={<div className="my-addon-before" style={{
-            //     height: '150px',
-            //     background: 'pink'
-            // }}>hello</div>}
-            // addonAfter={<div className="my-addon-after" style={{
-            //     height: '100px',
-            //     background: 'pink'
-            // }}>world</div>}
-            balloonProps: {
-                // offset: [0, 0],
-                // placementOffset: '-20px',
-                popupClassName: 'QIUQIU',
-                popupStyle: { height: 600 }
-            } },
-            react_1.default.createElement("div", { className: "my-popup", style: { height: '100%' } }, "Content"))));
-}
-react_dom_1.default.render(react_1.default.createElement(App, null), mountNode);

package/lib/html-render/__docs__/demo/basic/index.d.ts

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

package/lib/html-render/__docs__/demo/basic/index.js

@@ -1,98 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-/**
- * @demo HTML 渲染示例
- * @en HTML Rendering Example
- * @order 1
- * @remarks 这个示例展示了如何使用 `HTMLRenderer` 组件解析和渲染 HTML 字符串内容，并提供图片预览、发送文本、链接跳转和文本复制功能。
- * - This demo shows how to use the `HTMLRenderer` component to parse and render HTML strings, with additional features such as image preview, send text message, link handling, and text copying.
- */
-const react_1 = tslib_1.__importDefault(require("react"));
-const react_dom_1 = tslib_1.__importDefault(require("react-dom"));
-const chat_1 = require("@alifd/chat");
-const copy_to_clipboard_1 = tslib_1.__importDefault(require("copy-to-clipboard"));
-const next_1 = require("@alifd/next");
-const htmlContent = `
-  <p>This is a paragraph with a <a href="https://www.dingtalk.com/">link</a>.</p>
-  <p>Click <a href="copy://Hello%20World">here</a> to copy text.</p>
-  <p>Click <a href="message://Hello%20World">here</a> to send a message.</p>
-  <img src="img.alicdn.com/imgextra/i4/O1CN01Xz0X3m1XzvXzvXzvX_!!6000000002991-2-tps-200-200.png" />
-  <img src="//img.alicdn.com/imgextra/i4/O1CN01Xz0X3m1XzvXzvXzvX_!!6000000002991-2-tps-200-200.png" />
-  <img src="https://img.alicdn.com/imgextra/i4/O1CN01Xz0X3m1XzvXzvXzvX_!!6000000002991-2-tps-200-200.png" />
-
-<h1>一级标题 <img draggable="false" style="vertical-align: text-center; display: inline-block; pointer-events: none;" class="emoji" title="[[FullOfVitality]]" src="https://g.alicdn.com/dingding/emotion-assets/0.75.0/mobile/emotion_d0017.gif" alt="[FullOfVitality]" /></h1>
-<h2>二级标题 <img draggable="false" style="vertical-align: text-center; display: inline-block; pointer-events: none;" class="emoji" title="[[FullOfVitality]]" src="https://g.alicdn.com/dingding/emotion-assets/0.75.0/mobile/emotion_d0017.gif" alt="[FullOfVitality]" /></h2>
-<h3>三级标题 [魔法棒]</h3>
-<h4>四级标题</h4>
-<h5>五级标题</h5>
-<p><span style="color: var(--common_red1_color)" class="markdownFont">彩色</span><br />
-<span style="color: var(--common_green1_color)" class="markdownFont">文本</span><br />
-<span style="color: var(--common_blue1_color)" class="markdownFont">内容</span></p>
-<p>正文 <strong>加粗文本</strong> <em>斜体文本</em> <a href="https://www.dingtalk.com/">钉钉官网链接</a> <img draggable="false" style="vertical-align: text-center; display: inline-block; pointer-events: none;" class="emoji" title="[[FullOfVitality]]" src="https://g.alicdn.com/dingding/emotion-assets/0.75.0/mobile/emotion_d0017.gif" alt="[FullOfVitality]" /></p>
-<p><a href="copy://testqiuqiu%E5%A4%8D%E5%88%B6">链接复制</a><br />
-<a href="https://xn--testqiuqiu-s31qt07d">链接复制1</a></p>
-<p><a href="dtmd://dingtalkclient/sendMessage?content=%E7%A7%8B%E7%A7%8B%E7%9A%84%E6%B5%8B%E8%AF%95%E6%8C%87%E4%BB%A4%E5%A4%A7%E5%85%A8&amp;context=%7B%22allowToDingtalk%22%3Afalse%2C%22source%22%3A%22user_chat%22%2C%22value%22%3A%226abbe0cb38ee49b09b3d0762054df4b8%22%7D">链接发送消息</a><br />
-<a href="https://dingtalkclient/sendMessage?content=%E7%A7%8B%E7%A7%8B%E7%9A%84%E6%B5%8B%E8%AF%95%E6%8C%87%E4%BB%A4%E5%A4%A7%E5%85%A8&amp;context=%7B%22allowToDingtalk%22%3Afalse%2C%22source%22%3A%22user_chat%22%2C%22value%22%3A%226abbe0cb38ee49b09b3d0762054df4b8%22%7D">链接发送消息1</a></p>
-<p><img src="https://static.dingtalk.com/media/lADPDetfXH_Pn3HNAbrNBDg_1080_442.jpg" alt="" /></p>
-<h3 style="font-size: var(--common_h3_text_style__font_size); color: var(--common_blue1_color)" class="markdownFont">蓝色三级标题</h3>
-<ol>
-<li>第一个有序列表项
-<ul>
-<li>第一个无序列表项
-<ul>
-<li>第一个嵌套无序列表项</li>
-<li>第二个嵌套无序列表项</li>
-</ul>
-</li>
-<li>第二个无序列表项</li>
-</ul>
-</li>
-<li>第二个有序列表项</li>
-<li>第三个有序列表项</li>
-</ol>
-<table>
-<thead>
-<tr>
-<th style="text-align:left">表格标题 1</th>
-<th style="text-align:center">表格标题 2</th>
-<th style="text-align:right">表格标题 3</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td style="text-align:left">左对齐内容 1</td>
-<td style="text-align:center">剧中内容 1</td>
-<td style="text-align:right">右对齐内容 1</td>
-</tr>
-<tr>
-<td style="text-align:left">左对齐内容 2</td>
-<td style="text-align:center">剧中内容 2</td>
-<td style="text-align:right">右对齐内容 2</td>
-</tr>
-</tbody>
-</table>
-<pre><code class="language-javascript"><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&quot;Hello, world!&quot;</span>);
-</code></pre>
-`;
-const handleOpenLink = (url) => {
-    window.open(url, '_blank');
-};
-const sendTextMessage = (message) => {
-    console.log(`Sending message`);
-};
-const copyText = (val) => {
-    return () => {
-        (0, copy_to_clipboard_1.default)(val);
-        next_1.Message.success(i18n('common.button.copy'));
-    };
-};
-const i18n = (key) => {
-    const translations = {
-        'common.button.copy': 'Copied!'
-    };
-    return translations[key] || key;
-};
-react_dom_1.default.render(react_1.default.createElement("div", null,
-    react_1.default.createElement(chat_1.HtmlRender, { className: "htmlRenderer-basic-demo", imagePreview: true, loose: true, handleOpenLink: handleOpenLink, sendTextMessage: sendTextMessage, i18n: i18n, copyText: copyText }, htmlContent),
-    react_1.default.createElement(chat_1.HtmlRender, { className: "htmlRenderer-basic-demo", imagePreview: true, loose: true, handleOpenLink: handleOpenLink, sendTextMessage: sendTextMessage, i18n: i18n, copyText: copyText }, htmlContent)), mountNode);

package/lib/icon/__docs__/demo/basic/index.d.ts

@@ -1,8 +0,0 @@
-/**
- * @demo 基本使用
- * @en Basic
- * @order 1
- * @remarks Icon 组件的基本用法。
- * - Basic usage of `Icon`
- */
-import '@alifd/chat/es/icon/style';

package/lib/icon/__docs__/demo/basic/index.js

@@ -1,20 +0,0 @@
-"use strict";
-/**
- * @demo 基本使用
- * @en Basic
- * @order 1
- * @remarks Icon 组件的基本用法。
- * - Basic usage of `Icon`
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
-const react_dom_1 = tslib_1.__importDefault(require("react-dom"));
-const chat_1 = require("@alifd/chat");
-require("@alifd/chat/es/icon/style");
-react_dom_1.default.render(react_1.default.createElement("div", { className: "icon-basic-demo" },
-    react_1.default.createElement(chat_1.Icon, { type: "atm" }),
-    react_1.default.createElement(chat_1.Icon, { type: "smile" }),
-    react_1.default.createElement(chat_1.Icon, { type: "success" }),
-    react_1.default.createElement(chat_1.Icon, { type: "loading" }),
-    react_1.default.createElement(chat_1.Icon, { type: "copy" })), mountNode);

package/lib/image-preview/__docs__/demo/basic/index.d.ts

@@ -1,8 +0,0 @@
-/**
- * @demo 图片预览
- * @en ImagePreview
- * @order 1
- * @remarks 可以通过设置 `src` 属性控制图片的源地址，并且可以包含子元素来触发预览功能。
- * - The source URL of an image is controlled by a `src` attribute, and you can include child elements to trigger the preview functionality.
- */
-import '@alifd/chat/es/image-preview/style';

package/lib/image-preview/__docs__/demo/basic/index.js

@@ -1,17 +0,0 @@
-"use strict";
-/**
- * @demo 图片预览
- * @en ImagePreview
- * @order 1
- * @remarks 可以通过设置 `src` 属性控制图片的源地址，并且可以包含子元素来触发预览功能。
- * - The source URL of an image is controlled by a `src` attribute, and you can include child elements to trigger the preview functionality.
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
-const react_dom_1 = tslib_1.__importDefault(require("react-dom"));
-const chat_1 = require("@alifd/chat");
-require("@alifd/chat/es/image-preview/style");
-react_dom_1.default.render(react_1.default.createElement("div", { className: "ImagePreview-basic-demo" },
-    react_1.default.createElement(chat_1.ImagePreview, { src: "https://img.alicdn.com/imgextra/i2/O1CN01XG8prl1D9jro3BH1b_!!6000000000174-0-tps-600-600.jpg" },
-        react_1.default.createElement("img", { src: "https://img.alicdn.com/imgextra/i2/O1CN01XG8prl1D9jro3BH1b_!!6000000000174-0-tps-600-600.jpg", alt: "Preview" }))), mountNode);

package/lib/img/__docs__/demo/basic/index.d.ts

@@ -1,8 +0,0 @@
-/**
- * @demo 基本使用
- * @en Basic
- * @order 1
- * @remarks Img 组件的基本用法。
- * - Basic usage of `Img`
- */
-import '@alifd/chat/es/img/style';

package/lib/img/__docs__/demo/basic/index.js

@@ -1,47 +0,0 @@
-"use strict";
-/**
- * @demo 基本使用
- * @en Basic
- * @order 1
- * @remarks Img 组件的基本用法。
- * - Basic usage of `Img`
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
-const react_dom_1 = tslib_1.__importDefault(require("react-dom"));
-const chat_1 = require("@alifd/chat");
-require("@alifd/chat/es/img/style");
-const IMAGE_MAX_HEIGHT = 'https://img.alicdn.com/imgextra/i1/O1CN01DRnlBv27xlh7dD3Zi_!!6000000007864-0-tps-1040-104.jpg';
-const IMAGE_MAX_WIDTH = 'https://img.alicdn.com/imgextra/i4/O1CN01K1YBme1jne9cQqQHM_!!6000000004593-0-tps-2960-660.jpg';
-const IMAGE_emoji = 'https://g.alicdn.com/dingding/emotion-assets/0.75.0/mobile/emotion_d0017.gif';
-react_dom_1.default.render(react_1.default.createElement("div", { className: "origin-basic-demo" },
-    react_1.default.createElement("div", { style: {
-            width: '500px',
-            background: 'pink'
-        } },
-        react_1.default.createElement(chat_1.Img, { src: IMAGE_MAX_HEIGHT }),
-        react_1.default.createElement(chat_1.Img, { src: IMAGE_MAX_WIDTH }),
-        react_1.default.createElement(chat_1.Img, { src: IMAGE_emoji, imageClassName: 'emoji', enablePreview: false })),
-    react_1.default.createElement("div", { style: {
-            width: '300px',
-            background: 'red'
-        } },
-        react_1.default.createElement(chat_1.Img, { src: IMAGE_MAX_HEIGHT, enablePreview: false }),
-        react_1.default.createElement(chat_1.Img, { src: IMAGE_MAX_WIDTH, enablePreview: false, onImageClick: (src, e) => {
-                console.log('AUTUMN image click src:', src);
-                console.log('AUTUMN image click e:', e);
-            } }),
-        react_1.default.createElement(chat_1.Img, { src: IMAGE_emoji, imageClassName: 'emoji', enablePreview: false })),
-    react_1.default.createElement("div", { style: {
-            width: '600px',
-            background: 'green'
-        } },
-        react_1.default.createElement(chat_1.Img, { src: IMAGE_MAX_HEIGHT }),
-        react_1.default.createElement(chat_1.Img, { src: IMAGE_MAX_WIDTH, onImageLoad: (e) => {
-                console.log('AUTUMN image load e:', e);
-            }, onImageClick: (src, e) => {
-                console.log('AUTUMN image click src:', src);
-                console.log('AUTUMN image click e:', e);
-            } }),
-        react_1.default.createElement(chat_1.Img, { src: IMAGE_emoji, imageClassName: 'emoji', enablePreview: false }))), mountNode);

package/lib/input/__docs__/demo/basic/index.d.ts

@@ -1 +0,0 @@
-import '@alifd/chat/es/input/style';

package/lib/input/__docs__/demo/basic/index.js

@@ -1,15 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
-const react_dom_1 = tslib_1.__importDefault(require("react-dom"));
-const chat_1 = require("@alifd/chat");
-require("@alifd/chat/es/input/style");
-const onChange = v => {
-    console.log(v);
-};
-react_dom_1.default.render(react_1.default.createElement("div", null,
-    react_1.default.createElement("div", { style: { marginBottom: 12 } },
-        react_1.default.createElement(chat_1.Input, { placeholder: "Large", onChange: onChange, "aria-label": "Large" })),
-    react_1.default.createElement("div", null,
-        react_1.default.createElement(chat_1.Input.TextArea, { rows: 4, placeholder: "Large", onChange: onChange, "aria-label": "Large" }))), mountNode);

package/lib/list/__docs__/demo/basic/index.d.ts

@@ -1,8 +0,0 @@
-/**
- * @demo 基本使用
- * @en Basic example
- * @order 0
- * @remarks 最简单的用法。
- * - Simple example of List component.
- */
-import '@alifd/chat/es/list/style';

package/lib/list/__docs__/demo/basic/index.js

@@ -1,40 +0,0 @@
-"use strict";
-/**
- * @demo 基本使用
- * @en Basic example
- * @order 0
- * @remarks 最简单的用法。
- * - Simple example of List component.
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
-const react_dom_1 = tslib_1.__importDefault(require("react-dom"));
-const chat_1 = require("@alifd/chat");
-require("@alifd/chat/es/list/style");
-const data = [
-    {
-        title: 'A Title',
-        img: 'https://img.alicdn.com/tfs/TB1QS.4l4z1gK0jSZSgXXavwpXa-1024-1024.png',
-        money: '$20',
-    },
-    {
-        title: 'B Title',
-        img: 'https://img.alicdn.com/tfs/TB1QS.4l4z1gK0jSZSgXXavwpXa-1024-1024.png',
-        money: '$10',
-    },
-    {
-        title: 'Title',
-        img: 'https://img.alicdn.com/tfs/TB1QS.4l4z1gK0jSZSgXXavwpXa-1024-1024.png',
-        money: '$20',
-    },
-    {
-        title: 'Title',
-        img: 'https://img.alicdn.com/tfs/TB1QS.4l4z1gK0jSZSgXXavwpXa-1024-1024.png',
-        money: '$20',
-    },
-];
-react_dom_1.default.render(react_1.default.createElement("div", { style: { width: 288 } },
-    react_1.default.createElement(chat_1.List, { size: "small", header: react_1.default.createElement("div", null, "Notifications"), dataSource: data, renderItem: (item, i) => (react_1.default.createElement(chat_1.List.Item, { key: i, extra: item.money, title: item.title },
-            "List Item ",
-            i)) })), mountNode);

package/lib/loading/__docs__/demo/basic/index.d.ts

@@ -1,8 +0,0 @@
-/**
- * @demo 基本使用
- * @en Basic
- * @order 1
- * @remarks Loading 组件的基本用法。
- * - Basic usage of `Loading`
- */
-import '@alifd/chat/es/loading/style';

package/lib/loading/__docs__/demo/basic/index.js

@@ -1,37 +0,0 @@
-"use strict";
-/**
- * @demo 基本使用
- * @en Basic
- * @order 1
- * @remarks Loading 组件的基本用法。
- * - Basic usage of `Loading`
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
-const react_dom_1 = tslib_1.__importDefault(require("react-dom"));
-const chat_1 = require("@alifd/chat");
-require("@alifd/chat/es/loading/style");
-react_dom_1.default.render(react_1.default.createElement("div", null,
-    react_1.default.createElement("div", { style: {
-            "display": "flex",
-            "justifyContent": "space-around",
-            "marginBottom": "50px"
-        } },
-        react_1.default.createElement(chat_1.Loading, null,
-            react_1.default.createElement("div", null, "default")),
-        react_1.default.createElement(chat_1.Loading, { shape: "dot" },
-            react_1.default.createElement("div", null, "dot")),
-        react_1.default.createElement(chat_1.Loading, { shape: "bar" },
-            react_1.default.createElement("div", null, "bar"))),
-    react_1.default.createElement("div", { style: {
-            "display": "flex",
-            "justifyContent": "space-around"
-        } },
-        react_1.default.createElement(chat_1.Loading, { size: 'medium' },
-            react_1.default.createElement("div", null, "default")),
-        react_1.default.createElement(chat_1.Loading, { shape: "dot", size: 'medium' }),
-        react_1.default.createElement(chat_1.Loading, { shape: "dot", size: 'medium' },
-            react_1.default.createElement("div", null, "dot")),
-        react_1.default.createElement(chat_1.Loading, { shape: "bar", size: 'medium' },
-            react_1.default.createElement("div", null, "bar")))), mountNode);

package/lib/markdown/__docs__/demo/baisc/index.d.ts

@@ -1 +0,0 @@
-import '@alifd/chat/es/markdown/style';