@alifd/chat 0.3.36 → 0.3.37-beta.0

package/lib/checkbox-group/__docs__/demo/basic/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @demo 基础用法
+ * @en Basic
+ * @order 1
+ */
+import '@alifd/chat/es/checkbox-group/style';

package/lib/checkbox-group/__docs__/demo/basic/index.js

@@ -0,0 +1,29 @@
+"use strict";
+/**
+ * @demo 基础用法
+ * @en Basic
+ * @order 1
+ */
+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/checkbox-group/style");
+const options1 = [
+    { label: '苹果', value: 'Apple', description: '很好吃的苹果' },
+    { label: '梨', value: 'Pear', description: '鲜嫩多汁' },
+    { label: '桔子', value: 'Orange', description: '同样很好吃的桔子' }
+];
+const options2 = [
+    { label: '因公', value: 'Company' },
+    { label: '因私', value: 'Personal' },
+];
+const onChange = (value) => {
+    console.log(value);
+};
+react_dom_1.default.render(react_1.default.createElement("div", null,
+    react_1.default.createElement("div", { style: { maxWidth: 400 } },
+        react_1.default.createElement(chat_1.CheckboxGroup, { options: options1, value: ["Pear"], confirmButtonText: "\u63D0 \u4EA4", onChange: onChange })),
+    react_1.default.createElement("div", { style: { maxWidth: 400, marginTop: 40 } },
+        react_1.default.createElement(chat_1.CheckboxGroup, { options: options2, onChange: onChange }))), mountNode);

package/lib/date-picker/__docs__/demo/basic/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @demo 日期选择器
+ * @en Size
+ * @order 1
+ * @remarks 可以通过设置 `size` 属性控制按钮的尺寸，可选值为 `large` `medium` `small`，其中默认值为 `medium`。
+ * - The size of a Button is controlled by a `size` attribute, supporting `large`, `medium`, `small`, the default value is `medium`.
+ */
+import '@alifd/chat/es/date-picker/style';

package/lib/date-picker/__docs__/demo/basic/index.js

@@ -0,0 +1,16 @@
+"use strict";
+/**
+ * @demo 日期选择器
+ * @en Size
+ * @order 1
+ * @remarks 可以通过设置 `size` 属性控制按钮的尺寸，可选值为 `large` `medium` `small`，其中默认值为 `medium`。
+ * - The size of a Button is controlled by a `size` attribute, supporting `large`, `medium`, `small`, the default value is `medium`.
+ */
+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/date-picker/style");
+react_dom_1.default.render(react_1.default.createElement("div", null,
+    react_1.default.createElement(chat_1.DatePicker, null)), mountNode);

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

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

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

@@ -0,0 +1,33 @@
+"use strict";
+/**
+ * @demo 基本使用
+ * @en Basic
+ * @order 1
+ * @remarks Drawer 组件的基本用法。
+ * - Basic usage of `Drawer`
+ */
+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/drawer/style");
+require("@alifd/chat/es/button/style");
+react_dom_1.default.render(react_1.default.createElement("div", null,
+    react_1.default.createElement(chat_1.Drawer, { v2: true, title: "\u6807\u9898", height: 500, visible: true, placement: 'bottom', hasMask: false, headerStyle: {
+            background: 'pink'
+        }, bodyStyle: {
+            background: 'blue'
+        }, footer: [react_1.default.createElement(chat_1.Button, { key: "ok", size: 'large' }, "\u786E\u5B9A"), react_1.default.createElement(chat_1.Button, { key: "cancel", size: 'large' }, "\u53D6\u6D88")] },
+        react_1.default.createElement("div", { style: {
+                width: '100%',
+                height: '100%',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+            } },
+            react_1.default.createElement("img", { src: 'https://img.alicdn.com/imgextra/i3/O1CN01Pr17oD1nEcFc2YQtz_!!6000000005058-0-tps-334-334.jpg', style: {
+                    width: '100%',
+                    height: 'auto',
+                    display: 'block',
+                } })))), mountNode);

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

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

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

@@ -0,0 +1,15 @@
+"use strict";
+/**
+ * @demo 基本使用
+ * @en Basic
+ * @order 1
+ * @remarks 反馈组件的基本用法。
+ * - Basic usage of `Feedback`
+ */
+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/feedback/style");
+react_dom_1.default.render(react_1.default.createElement(chat_1.Feedback, { defaultValue: 'good' }), mountNode);

package/lib/feedback/__docs__/demo/size/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @demo 指定尺寸
+ * @en Size
+ * @order 2
+ * @remarks 控制组件尺寸大小。
+ * - Control the size of `Feedback`
+ */
+import '@alifd/chat/es/feedback/style';

package/lib/feedback/__docs__/demo/size/index.js

@@ -0,0 +1,28 @@
+"use strict";
+/**
+ * @demo 指定尺寸
+ * @en Size
+ * @order 2
+ * @remarks 控制组件尺寸大小。
+ * - Control the size of `Feedback`
+ */
+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/feedback/style");
+react_dom_1.default.render(react_1.default.createElement("div", null,
+    react_1.default.createElement("div", null, "\u666E\u901A\u5927\u5C0F"),
+    react_1.default.createElement(chat_1.Feedback, null),
+    react_1.default.createElement("div", null,
+        "\u901A\u8FC7 ",
+        react_1.default.createElement("b", null, "fontSize"),
+        " \u63A7\u5236\uFF0C\u95F4\u8DDD\u901A\u8FC7 css \u6837\u5F0F\u56FA\u5B9A"),
+    react_1.default.createElement(chat_1.Feedback, { style: { fontSize: 20 } }),
+    react_1.default.createElement("br", null),
+    react_1.default.createElement("div", null,
+        "\u901A\u8FC7 ",
+        react_1.default.createElement("b", null, "size"),
+        " \u5C5E\u6027\u63A7\u5236\uFF0C\u95F4\u8DDD\u6839\u636E\u4F20\u5165\u7684 size \u81EA\u52A8\u8BA1\u7B97"),
+    react_1.default.createElement(chat_1.Feedback, { size: 20 })), mountNode);

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

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

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

@@ -0,0 +1,26 @@
+"use strict";
+/**
+ * @demo 基本使用
+ * @en Basic
+ * @order 1
+ * @remarks flip 折叠组件的基本用法。
+ * - Basic usage of `flip`
+ */
+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 chat_1 = require("@alifd/chat");
+require("@alifd/chat/es/flip/style");
+const Demo = () => {
+    const [expanded, setExpanded] = (0, react_1.useState)(true);
+    return (react_1.default.createElement("div", { className: "origin-basic-demo" },
+        react_1.default.createElement("div", { style: {
+                width: '500px',
+            } },
+            react_1.default.createElement(chat_1.Flip, { defaultExpanded: true, onToggle: onToggle => {
+                    console.log('onToggle：', onToggle);
+                }, animated: false })),
+        react_1.default.createElement("button", { onClick: () => setExpanded(!expanded) }, "Toggle")));
+};
+react_dom_1.default.render(react_1.default.createElement(Demo, null), mountNode);

package/lib/float-button/__docs__/demo/basic/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @demo 基本使用
+ * @en Basic usage
+ * @order 1
+ * @remarks remarks.- 111
+ */
+import '@alifd/chat/es/float-button/style';

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

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

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

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

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

@@ -0,0 +1,8 @@
+/**
+ * @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

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

@@ -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/lib/image-preview/__docs__/demo/basic/index.js

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

@@ -0,0 +1,8 @@
+/**
+ * @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

@@ -0,0 +1,47 @@
+"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/index.js

@@ -70,4 +70,4 @@ var flip_1 = require("./flip");
 Object.defineProperty(exports, "Flip", { enumerable: true, get: function () { return tslib_1.__importDefault(flip_1).default; } });
 var tool_status_1 = require("./tool-status");
 Object.defineProperty(exports, "ToolStatus", { enumerable: true, get: function () { return tslib_1.__importDefault(tool_status_1).default; } });
-exports.version = '0.3.36';
+exports.version = '0.3.37-beta.0';

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

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

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

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

@@ -0,0 +1,8 @@
+/**
+ * @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

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

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