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

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

@@ -0,0 +1,104 @@
+/**
+ * @demo 基本使用
+ * @en Basic usage
+ * @order 1
+ * @remarks remarks.- 111
+ */
+import React, { useState } from 'react';
+import ReactDOM from 'react-dom';
+import cs from 'classnames';
+import { FloatButton } from '@alifd/chat';
+import '@alifd/chat/es/float-button/style';
+import { createGlobalStyle } from 'styled-components';
+const GlobalStyle = 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] = useState(false);
+    return (React.createElement("div", null,
+        React.createElement(GlobalStyle, null),
+        React.createElement("div", null, "dragable/autoAlign/[20,50,50,200]/[100, 200, 50, 10]"),
+        React.createElement("iframe", { src: 'https://work.alibaba-inc.com/', style: {
+                width: '600px',
+                height: '600px',
+                background: 'pink',
+                pointerEvents: 'none',
+                userSelect: 'none',
+            } }),
+        React.createElement("iframe", { src: 'https://work.alibaba-inc.com/', style: {
+                width: '600px',
+                height: '600px',
+                background: 'blue',
+                userSelect: 'none',
+            } }),
+        React.createElement("iframe", { src: 'https://work.alibaba-inc.com/', style: {
+                width: '600px',
+                height: '600px',
+                background: 'red',
+                userSelect: 'none'
+            } }),
+        React.createElement(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.createElement("div", { className: cs('my-trigger', { 'my-trigger--active': active }) }, active ? (React.createElement("div", { className: "my-trigger-close" })) : (React.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.createElement("div", { className: "my-popup", style: { height: '100%' } }, "Content"))));
+}
+ReactDOM.render(React.createElement(App, null), mountNode);

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

@@ -0,0 +1,95 @@
+/**
+ * @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.
+ */
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { HtmlRender } from '@alifd/chat';
+import copy from 'copy-to-clipboard';
+import { Message } from '@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 () => {
+        copy(val);
+        Message.success(i18n('common.button.copy'));
+    };
+};
+const i18n = (key) => {
+    const translations = {
+        'common.button.copy': 'Copied!'
+    };
+    return translations[key] || key;
+};
+ReactDOM.render(React.createElement("div", null,
+    React.createElement(HtmlRender, { className: "htmlRenderer-basic-demo", imagePreview: true, loose: true, handleOpenLink: handleOpenLink, sendTextMessage: sendTextMessage, i18n: i18n, copyText: copyText }, htmlContent),
+    React.createElement(HtmlRender, { className: "htmlRenderer-basic-demo", imagePreview: true, loose: true, handleOpenLink: handleOpenLink, sendTextMessage: sendTextMessage, i18n: i18n, copyText: copyText }, htmlContent)), mountNode);

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

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

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

@@ -0,0 +1,17 @@
+/**
+ * @demo 基本使用
+ * @en Basic
+ * @order 1
+ * @remarks Icon 组件的基本用法。
+ * - Basic usage of `Icon`
+ */
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Icon } from '@alifd/chat';
+import '@alifd/chat/es/icon/style';
+ReactDOM.render(React.createElement("div", { className: "icon-basic-demo" },
+    React.createElement(Icon, { type: "atm" }),
+    React.createElement(Icon, { type: "smile" }),
+    React.createElement(Icon, { type: "success" }),
+    React.createElement(Icon, { type: "loading" }),
+    React.createElement(Icon, { type: "copy" })), mountNode);

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

@@ -0,0 +1,8 @@
+/**
+ * @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/es/image-preview/__docs__/demo/basic/index.js

@@ -0,0 +1,14 @@
+/**
+ * @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 React from 'react';
+import ReactDOM from 'react-dom';
+import { ImagePreview } from '@alifd/chat';
+import '@alifd/chat/es/image-preview/style';
+ReactDOM.render(React.createElement("div", { className: "ImagePreview-basic-demo" },
+    React.createElement(ImagePreview, { src: "https://img.alicdn.com/imgextra/i2/O1CN01XG8prl1D9jro3BH1b_!!6000000000174-0-tps-600-600.jpg" },
+        React.createElement("img", { src: "https://img.alicdn.com/imgextra/i2/O1CN01XG8prl1D9jro3BH1b_!!6000000000174-0-tps-600-600.jpg", alt: "Preview" }))), mountNode);

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

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

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

@@ -0,0 +1,44 @@
+/**
+ * @demo 基本使用
+ * @en Basic
+ * @order 1
+ * @remarks Img 组件的基本用法。
+ * - Basic usage of `Img`
+ */
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Img } from '@alifd/chat';
+import '@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';
+ReactDOM.render(React.createElement("div", { className: "origin-basic-demo" },
+    React.createElement("div", { style: {
+            width: '500px',
+            background: 'pink'
+        } },
+        React.createElement(Img, { src: IMAGE_MAX_HEIGHT }),
+        React.createElement(Img, { src: IMAGE_MAX_WIDTH }),
+        React.createElement(Img, { src: IMAGE_emoji, imageClassName: 'emoji', enablePreview: false })),
+    React.createElement("div", { style: {
+            width: '300px',
+            background: 'red'
+        } },
+        React.createElement(Img, { src: IMAGE_MAX_HEIGHT, enablePreview: false }),
+        React.createElement(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.createElement(Img, { src: IMAGE_emoji, imageClassName: 'emoji', enablePreview: false })),
+    React.createElement("div", { style: {
+            width: '600px',
+            background: 'green'
+        } },
+        React.createElement(Img, { src: IMAGE_MAX_HEIGHT }),
+        React.createElement(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.createElement(Img, { src: IMAGE_emoji, imageClassName: 'emoji', enablePreview: false }))), mountNode);

package/es/index.js

@@ -32,4 +32,4 @@ export { default as CheckboxGroup } from './checkbox-group';
 export { default as Select } from './select';
 export { default as Flip } from './flip';
 export { default as ToolStatus } from './tool-status';
-export const version = '0.3.36-beta.0';
+export const version = '0.3.37-beta.0';

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

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

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Input } from '@alifd/chat';
+import '@alifd/chat/es/input/style';
+const onChange = v => {
+    console.log(v);
+};
+ReactDOM.render(React.createElement("div", null,
+    React.createElement("div", { style: { marginBottom: 12 } },
+        React.createElement(Input, { placeholder: "Large", onChange: onChange, "aria-label": "Large" })),
+    React.createElement("div", null,
+        React.createElement(Input.TextArea, { rows: 4, placeholder: "Large", onChange: onChange, "aria-label": "Large" }))), mountNode);

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

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

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

@@ -0,0 +1,37 @@
+/**
+ * @demo 基本使用
+ * @en Basic example
+ * @order 0
+ * @remarks 最简单的用法。
+ * - Simple example of List component.
+ */
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { List } from '@alifd/chat';
+import '@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',
+    },
+];
+ReactDOM.render(React.createElement("div", { style: { width: 288 } },
+    React.createElement(List, { size: "small", header: React.createElement("div", null, "Notifications"), dataSource: data, renderItem: (item, i) => (React.createElement(List.Item, { key: i, extra: item.money, title: item.title },
+            "List Item ",
+            i)) })), mountNode);

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

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

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

@@ -0,0 +1,34 @@
+/**
+ * @demo 基本使用
+ * @en Basic
+ * @order 1
+ * @remarks Loading 组件的基本用法。
+ * - Basic usage of `Loading`
+ */
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Loading } from '@alifd/chat';
+import '@alifd/chat/es/loading/style';
+ReactDOM.render(React.createElement("div", null,
+    React.createElement("div", { style: {
+            "display": "flex",
+            "justifyContent": "space-around",
+            "marginBottom": "50px"
+        } },
+        React.createElement(Loading, null,
+            React.createElement("div", null, "default")),
+        React.createElement(Loading, { shape: "dot" },
+            React.createElement("div", null, "dot")),
+        React.createElement(Loading, { shape: "bar" },
+            React.createElement("div", null, "bar"))),
+    React.createElement("div", { style: {
+            "display": "flex",
+            "justifyContent": "space-around"
+        } },
+        React.createElement(Loading, { size: 'medium' },
+            React.createElement("div", null, "default")),
+        React.createElement(Loading, { shape: "dot", size: 'medium' }),
+        React.createElement(Loading, { shape: "dot", size: 'medium' },
+            React.createElement("div", null, "dot")),
+        React.createElement(Loading, { shape: "bar", size: 'medium' },
+            React.createElement("div", null, "bar")))), mountNode);

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

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