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

package/es/button/__docs__/demo/size/index.js

@@ -1,115 +0,0 @@
-/**
- * @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 React from 'react';
-import ReactDOM from 'react-dom';
-import { Button } from '@alifd/chat';
-import '@alifd/chat/es/button/style';
-const dataSource = [
-    {
-        buttonType: 'primary',
-        buttonStatus: 'disabled',
-        label: '竖排50',
-        onClick: () => {
-            console.log('竖排50');
-        },
-        action: {
-            tapType: 'OpenLink',
-            disabled: true,
-            config: {
-                //pc
-                pcUrl: 'https://alidocs.dingtalk.com/i/nodes/7NkDwLng8Za7QYkeHmnyaM6vJKMEvZBY',
-                //mobile
-                mobileUrl: 'mobilehttps://alidocs.dingtalk.com/i/nodes/7NkDwLng8Za7QYkeHmnyaM6vJKMEvZBY',
-            },
-        },
-    },
-    {
-        buttonType: 'secondary',
-        buttonStatus: 'disabled',
-        disabled: true,
-        label: "竖排51",
-        onClick: () => {
-            console.log('竖排51');
-        },
-        action: {
-            tapType: 'SendTextMessage',
-            config: {
-                message: '测试',
-            }
-        },
-    },
-    {
-        buttonType: 'normal',
-        buttonStatus: 'normal',
-        label: '竖排52',
-        onClick: () => {
-            console.log('竖排52');
-        },
-        action: {
-            tapType: 'Copy',
-            config: {
-                copyText: '复制的内容',
-            }
-        },
-    },
-    {
-        buttonType: 'secondary',
-        buttonStatus: 'normal',
-        label: "竖排53",
-        onClick: () => {
-            console.log('竖排53');
-        },
-        action: {
-            tapType: 'SendTextMessage',
-            config: {
-                message: '测试',
-            }
-        },
-    },
-    {
-        buttonType: 'secondary',
-        buttonStatus: 'normal',
-        label: "竖排54",
-        onClick: () => {
-            console.log('竖排54');
-        },
-        action: {
-            tapType: 'SendTextMessage',
-            config: {
-                message: '测试',
-            }
-        },
-    },
-    {
-        buttonType: 'secondary',
-        buttonStatus: 'normal',
-        label: "竖排55",
-        onClick: () => {
-            console.log('竖排55');
-        },
-        action: {
-            tapType: 'SendTextMessage',
-            config: {
-                message: '测试',
-            }
-        },
-    },
-];
-ReactDOM.render(React.createElement("div", null,
-    React.createElement(Button, { type: "primary", size: "large" }, "Large"),
-    React.createElement(Button, { type: "secondary", size: "medium", icon: 'smile' }, "Large"),
-    React.createElement(Button, { type: "normal", size: "small" }, "Large"),
-    React.createElement("div", null, "\u7AD6\u63923\u4E2A"),
-    React.createElement(Button.Group, { type: "column", dataSource: dataSource.slice(0, 3) }),
-    React.createElement("div", null, "\u7AD6\u63924\u4E2A"),
-    React.createElement(Button.Group, { size: "large", type: "column", dataSource: dataSource.slice(0, 4) }),
-    React.createElement("div", null, "\u7AD6\u63925\u4E2A"),
-    React.createElement(Button.Group, { type: "column", dataSource: dataSource.slice(0, 5) }),
-    React.createElement("div", null, "\u6A2A\u63923\u4E2A"),
-    React.createElement(Button.Group, { size: "large", dataSource: dataSource.slice(0, 3) }),
-    React.createElement(Button.Group, { size: "large", dataSource: dataSource.slice(0, 3) })), mountNode);

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

@@ -1,11 +0,0 @@
-/**
- * @demo 基本使用
- * @en Basic
- * @order 1
- * @remarks
- * 最简单的用法。
- * -
- * A simple card with title and sub-title.
- */
-import '@alifd/chat/es/card/style';
-import '@alifd/chat/es/feedback/style';

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

@@ -1,39 +0,0 @@
-/**
- * @demo 基本使用
- * @en Basic
- * @order 1
- * @remarks
- * 最简单的用法。
- * -
- * A simple card with title and sub-title.
- */
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { Card, Feedback } from '@alifd/chat';
-import '@alifd/chat/es/card/style';
-import '@alifd/chat/es/feedback/style';
-ReactDOM.render(React.createElement("div", null,
-    React.createElement("h3", null, "\u666E\u901A"),
-    React.createElement(Card, { style: { width: 300 } },
-        React.createElement("div", null,
-            "\u5173\u952E\u8BCD:xxx xxx xxx ",
-            React.createElement("br", null),
-            new Array(10).fill('这是一段创新提案摘要').join('，'))),
-    React.createElement("h3", null, "\u5E26 Title"),
-    React.createElement(Card, { title: "\u63D0\u6848\u6982\u89C8", style: { width: 300 } },
-        React.createElement("div", null,
-            "\u5173\u952E\u8BCD:xxx xxx xxx ",
-            React.createElement("br", null),
-            new Array(10).fill('这是一段创新提案摘要').join('，'))),
-    React.createElement("h3", null, "\u5E26 Footer"),
-    React.createElement(Card, { title: "\u63D0\u6848\u6982\u89C8", footer: React.createElement(Feedback, null), style: { width: 300 } },
-        React.createElement("div", null,
-            "\u5173\u952E\u8BCD:xxx xxx xxx ",
-            React.createElement("br", null),
-            new Array(10).fill('这是一段创新提案摘要').join('，'))),
-    React.createElement("h3", null, "\u5E26\u5206\u9694\u7EBF"),
-    React.createElement(Card, { title: "\u63D0\u6848\u6982\u89C8", footer: React.createElement(Feedback, null), style: { width: 300 }, titleLine: true, footerLine: true },
-        React.createElement("div", null,
-            "\u5173\u952E\u8BCD:xxx xxx xxx ",
-            React.createElement("br", null),
-            new Array(10).fill('这是一段创新提案摘要').join('，')))), mountNode);

package/es/card/__docs__/demo/demo-legal-affairs/index.d.ts

@@ -1,13 +0,0 @@
-/**
- * @demo 法务交付样例
- * @order 2
- * @remarks
- * 法务机器人卡片组件
- */
-import '@alifd/chat/es/card/style';
-import '@alifd/chat/es/feedback/style';
-import '@alifd/chat/es/text/style';
-import '@alifd/chat/es/tag/style';
-import '@alifd/chat/es/tab/style';
-import '@alifd/chat/es/float-button/style';
-import '@alifd/chat/es/button/style';

package/es/card/__docs__/demo/demo-legal-affairs/index.js

@@ -1,130 +0,0 @@
-/**
- * @demo 法务交付样例
- * @order 2
- * @remarks
- * 法务机器人卡片组件
- */
-import React, { useState } from 'react';
-import ReactDOM from 'react-dom';
-import cs from 'classnames';
-import { Card, Feedback, Text, Tag, Tab, FloatButton, Button } from '@alifd/chat';
-import '@alifd/chat/es/card/style';
-import '@alifd/chat/es/feedback/style';
-import '@alifd/chat/es/text/style';
-import '@alifd/chat/es/tag/style';
-import '@alifd/chat/es/tab/style';
-import '@alifd/chat/es/float-button/style';
-import '@alifd/chat/es/button/style';
-import { createGlobalStyle } from 'styled-components';
-const GlobalStyle = createGlobalStyle `
-.card-legal-affairs {
-    .ct-card-header-title {
-        background-image: radial-gradient(
-            ellipse 160px 90px at 20px -20px,
-            rgb(from var(--color-brand1-6, #5584ff) r g b / 0.15) 0%,
-            transparent 100%
-        );
-        color: var(--color-brand1-6, #5584ff);
-    }
-}
-
-.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;
-}
-`;
-function FloatButtonDemo() {
-    const [active, setActive] = useState(false);
-    const [active2, setActive2] = useState(false);
-    const [target, setTarget] = useState('.card-legal-affairs');
-    const [show, setShow] = useState(true);
-    return (React.createElement("div", null,
-        React.createElement("button", { onClick: () => setShow(!show) }, "toggle"),
-        React.createElement("button", { onClick: () => {
-                setTarget(target === '.card-legal-affairs'
-                    ? '#demo-legal-affairs-mount'
-                    : '.card-legal-affairs');
-            } }, "change target"),
-        show && (React.createElement(FloatButton.InnerDrawer, { dragable: true, target: target, align: "tl", autoAlign: true, title: "Title", showClose: true, autoHide: true, defaultPosition: [0.8, 0.8], onVisibleChange: v => setActive(v), 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" }))) },
-            React.createElement("div", { className: "my-popup" }, "Content"))),
-        React.createElement(FloatButton.Drawer, { dragable: true, align: "tl", autoAlign: true, title: "Title", showClose: true, defaultPosition: [0.8, 0.6], onVisibleChange: v => setActive2(v), trigger: React.createElement("div", { className: cs('my-trigger', { 'my-trigger--active': active2 }) }, active2 ? (React.createElement("div", { className: "my-trigger-close" })) : (React.createElement("div", { className: "my-trigger-img" }))) },
-            React.createElement("div", { className: "my-popup" }, "Content"))));
-}
-ReactDOM.render(React.createElement("div", { className: "card-legal-affairs" },
-    React.createElement(GlobalStyle, null),
-    React.createElement("h3", null, "\u666E\u901A\u6587\u672C\u5361\u7247"),
-    React.createElement(Card, { title: "\u63D0\u6848\u6982\u89C8", style: { width: 300 } },
-        React.createElement(Text, { maxLine: 4 },
-            "\u5173\u952E\u8BCD:xxx xxx xxx ",
-            React.createElement("br", null),
-            React.createElement(Tag, { color: "green", type: "normal" }, "123"),
-            React.createElement(Tag, { color: "green", type: "primary" }, "xxx"),
-            new Array(101)
-                .fill('')
-                .map((_, i) => `${i}`)
-                .join('，'))),
-    React.createElement("h3", null, "\u666E\u901A\u6587\u672C\u5361\u7247\u5E26\u8D5E\u8E29"),
-    React.createElement(Card, { title: "\u63D0\u6848\u6982\u89C8", footer: React.createElement(Feedback, null), style: { width: 300 }, footerLine: true },
-        React.createElement("div", null,
-            "\u5173\u952E\u8BCD:xxx xxx xxx ",
-            React.createElement("br", null),
-            new Array(10).fill('这是一段创新提案摘要').join('，'))),
-    React.createElement("h3", null, "hover \u5C55\u793A\u5168\u8C8C"),
-    React.createElement(Card.Collapsable, { title: "\u63D0\u6848\u6982\u89C8", footer: React.createElement(Feedback, null), style: { width: 300 }, footerLine: true, renderContent: ({ visible, onVisibleChange, children }) => {
-            return (React.createElement(Text, { maxLine: 4, visible: visible, onVisibleChange: onVisibleChange, showTrigger: false, triggerType: "hover" }, children));
-        } },
-        "\u5173\u952E\u8BCD:xxx xxx xxx ",
-        React.createElement("br", null),
-        new Array(15).fill('这是一段创新提案摘要').join('，')),
-    React.createElement("h3", null, "Tab card"),
-    React.createElement(Card, { title: "\u63D0\u6848\u6982\u89C8", footer: React.createElement(Feedback, null), style: { width: 300 }, footerLine: true },
-        React.createElement(Tab, { contentStyle: { paddingTop: 8 } },
-            React.createElement(Tab.Item, { title: "Tab1" },
-                React.createElement("div", null,
-                    React.createElement(Button, null, "\u6309\u94AE"),
-                    React.createElement(Button, { type: "primary" }, "\u6309\u94AE"),
-                    "\u5173\u952E\u8BCD:xxx xxx xxx1 ",
-                    React.createElement("br", null),
-                    new Array(10).fill('这是一段创新提案摘要').join('，'))),
-            React.createElement(Tab.Item, { title: "Tab2" },
-                React.createElement("div", null,
-                    "\u5173\u952E\u8BCD:xxx xxx xxx2 ",
-                    React.createElement("br", null),
-                    new Array(10).fill('这是一段创新提案摘要').join('，'))),
-            React.createElement(Tab.Item, { title: "Tab3" },
-                React.createElement("div", null,
-                    "\u5173\u952E\u8BCD:xxx xxx xxx3 ",
-                    React.createElement("br", null),
-                    new Array(10).fill('这是一段创新提案摘要').join('，'))))),
-    React.createElement("h3", null, "Inner drawer float button"),
-    React.createElement(FloatButtonDemo, null)), mountNode);

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

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

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

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

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

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

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

@@ -1,26 +0,0 @@
-/**
- * @demo 基础用法
- * @en Basic
- * @order 1
- */
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { CheckboxGroup } from '@alifd/chat';
-import '@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);
-};
-ReactDOM.render(React.createElement("div", null,
-    React.createElement("div", { style: { maxWidth: 400 } },
-        React.createElement(CheckboxGroup, { options: options1, value: ["Pear"], confirmButtonText: "\u63D0 \u4EA4", onChange: onChange })),
-    React.createElement("div", { style: { maxWidth: 400, marginTop: 40 } },
-        React.createElement(CheckboxGroup, { options: options2, onChange: onChange }))), mountNode);

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

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

@@ -1,13 +0,0 @@
-/**
- * @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 React from 'react';
-import ReactDOM from 'react-dom';
-import { DatePicker } from '@alifd/chat';
-import '@alifd/chat/es/date-picker/style';
-ReactDOM.render(React.createElement("div", null,
-    React.createElement(DatePicker, null)), mountNode);

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

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

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

@@ -1,30 +0,0 @@
-/**
- * @demo 基本使用
- * @en Basic
- * @order 1
- * @remarks Drawer 组件的基本用法。
- * - Basic usage of `Drawer`
- */
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { Drawer, Button } from '@alifd/chat';
-import '@alifd/chat/es/drawer/style';
-import '@alifd/chat/es/button/style';
-ReactDOM.render(React.createElement("div", null,
-    React.createElement(Drawer, { v2: true, title: "\u6807\u9898", height: 500, visible: true, placement: 'bottom', hasMask: false, headerStyle: {
-            background: 'pink'
-        }, bodyStyle: {
-            background: 'blue'
-        }, footer: [React.createElement(Button, { key: "ok", size: 'large' }, "\u786E\u5B9A"), React.createElement(Button, { key: "cancel", size: 'large' }, "\u53D6\u6D88")] },
-        React.createElement("div", { style: {
-                width: '100%',
-                height: '100%',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-            } },
-            React.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/es/feedback/__docs__/demo/basic/index.d.ts

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

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

@@ -1,12 +0,0 @@
-/**
- * @demo 基本使用
- * @en Basic
- * @order 1
- * @remarks 反馈组件的基本用法。
- * - Basic usage of `Feedback`
- */
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { Feedback } from '@alifd/chat';
-import '@alifd/chat/es/feedback/style';
-ReactDOM.render(React.createElement(Feedback, { defaultValue: 'good' }), mountNode);

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

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

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

@@ -1,25 +0,0 @@
-/**
- * @demo 指定尺寸
- * @en Size
- * @order 2
- * @remarks 控制组件尺寸大小。
- * - Control the size of `Feedback`
- */
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { Feedback } from '@alifd/chat';
-import '@alifd/chat/es/feedback/style';
-ReactDOM.render(React.createElement("div", null,
-    React.createElement("div", null, "\u666E\u901A\u5927\u5C0F"),
-    React.createElement(Feedback, null),
-    React.createElement("div", null,
-        "\u901A\u8FC7 ",
-        React.createElement("b", null, "fontSize"),
-        " \u63A7\u5236\uFF0C\u95F4\u8DDD\u901A\u8FC7 css \u6837\u5F0F\u56FA\u5B9A"),
-    React.createElement(Feedback, { style: { fontSize: 20 } }),
-    React.createElement("br", null),
-    React.createElement("div", null,
-        "\u901A\u8FC7 ",
-        React.createElement("b", null, "size"),
-        " \u5C5E\u6027\u63A7\u5236\uFF0C\u95F4\u8DDD\u6839\u636E\u4F20\u5165\u7684 size \u81EA\u52A8\u8BA1\u7B97"),
-    React.createElement(Feedback, { size: 20 })), mountNode);

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

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

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

@@ -1,23 +0,0 @@
-/**
- * @demo 基本使用
- * @en Basic
- * @order 1
- * @remarks flip 折叠组件的基本用法。
- * - Basic usage of `flip`
- */
-import React, { useState } from 'react';
-import ReactDOM from 'react-dom';
-import { Flip } from '@alifd/chat';
-import '@alifd/chat/es/flip/style';
-const Demo = () => {
-    const [expanded, setExpanded] = useState(true);
-    return (React.createElement("div", { className: "origin-basic-demo" },
-        React.createElement("div", { style: {
-                width: '500px',
-            } },
-            React.createElement(Flip, { defaultExpanded: true, onToggle: onToggle => {
-                    console.log('onToggle：', onToggle);
-                }, animated: false })),
-        React.createElement("button", { onClick: () => setExpanded(!expanded) }, "Toggle")));
-};
-ReactDOM.render(React.createElement(Demo, null), mountNode);

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

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

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

@@ -1,104 +0,0 @@
-/**
- * @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);