plain-design 1.0.0-beta.4 → 1.0.0-beta.5

package/src/pages/index/components/normal/DemoDropdown.tsx

@@ -1,463 +1,463 @@
-import {designPage} from "plain-design-composition";
-import {DemoRow} from "../../Demo/DemoRow";
-import {$message, Button, ButtonGroup, Dropdown, DropdownGroup, DropdownOption, Scroll, VirtualList} from "../../../../packages";
-import AddressData from '../../../data/address.json';
-
-export const demo1 = designPage(() => {
-  return () => (
-    <DemoRow title="基本用法">
-      <Dropdown onSelect={(data) => $message('select ' + data.props.val)}>
-        {{
-          default: () => <Button label="Click to open dropdown"/>,
-          popper: () => <>
-            <DropdownOption label="选项一" val="tag-1" onClick={() => $message('click tag-1')}/>
-            <DropdownOption label="选项二" val="tag-2" onClick={() => $message('click tag-2')}/>
-            <DropdownOption label="选项三" val="tag-3" onClick={() => $message('click tag-3')}/>
-          </>
-        }}
-      </Dropdown>
-
-      <ButtonGroup style={{ display: 'inline-flex' }}>
-        <Button label="Export"/>
-        <Dropdown placement="bottom-end">
-          {{
-            default: () => <Button icon="pi-down"/>,
-            popper: () => <>
-              <DropdownOption label="export jpg" onClick={() => $message('click tag-1')}/>
-              <DropdownOption label="export pdf" onClick={() => $message('click tag-2')}/>
-              <DropdownOption label="export source file" onClick={() => $message('click tag-3')}/>
-            </>
-          }}
-        </Dropdown>
-      </ButtonGroup>
-    </DemoRow>
-  );
-});
-
-
-export const demo2 = designPage(() => {
-  return () => (
-    <DemoRow title="选项内容对其">
-      <Dropdown align="start">
-        {{
-          default: () => <Button label="Start"/>,
-          popper: () => <>
-            <DropdownOption label="hello" val="tag-1"/>
-            <DropdownOption label="hello world" val="tag-2"/>
-            <DropdownOption label="hello world, guys" val="tag-3"/>
-          </>
-        }}
-      </Dropdown>
-
-      <Dropdown align="center" placement="bottom-center">
-        {{
-          default: () => <Button label="Center"/>,
-          popper: () => <>
-            <DropdownOption label="hello" val="tag-1"/>
-            <DropdownOption label="hello world" val="tag-2"/>
-            <DropdownOption label="hello world, guys" val="tag-3"/>
-          </>
-        }}
-      </Dropdown>
-
-      <Dropdown align="end" placement="bottom-end">
-        {{
-          default: () => <Button label="End"/>,
-          popper: () => <>
-            <DropdownOption label="hello" val="tag-1"/>
-            <DropdownOption label="hello world" val="tag-2"/>
-            <DropdownOption label="hello world, guys" val="tag-3"/>
-          </>
-        }}
-      </Dropdown>
-
-    </DemoRow>
-  );
-});
-
-export const demo3 = designPage(() => {
-  return () => (
-    <DemoRow title="插槽">
-      <Dropdown align="start">
-        {{
-          default: () => <Button label="Start"/>,
-          popper: () => <>
-            <DropdownOption val="tag-1">
-              <div>1. hello</div>
-            </DropdownOption>
-            <DropdownOption val="tag-2">
-              <div>2. hello world</div>
-            </DropdownOption>
-            <DropdownOption val="tag-3">
-              <div>3. hello world, guys</div>
-            </DropdownOption>
-          </>
-        }}
-      </Dropdown>
-    </DemoRow>
-  );
-});
-
-
-export const demo4 = designPage(() => {
-  return () => (
-    <DemoRow title="滚动条">
-      <p>超过6个选项时会自动启用滚动条</p>
-      <Dropdown align="start">
-        {{
-          default: () => <Button label="Start"/>,
-          popper: () => <>
-            <DropdownOption>
-              <div>1. hello</div>
-            </DropdownOption>
-            <DropdownOption>
-              <div>2. hello world</div>
-            </DropdownOption>
-            <DropdownOption>
-              <div>3. hello world, guys</div>
-            </DropdownOption>
-            <DropdownOption>
-              <div>4. hello</div>
-            </DropdownOption>
-            <DropdownOption>
-              <div>5. hello world, guys</div>
-            </DropdownOption>
-            <DropdownOption>
-              <div>6. hello world, guys</div>
-            </DropdownOption>
-            <DropdownOption>
-              <div>7. hello world, guys</div>
-            </DropdownOption>
-            <DropdownOption>
-              <div>8. hello</div>
-            </DropdownOption>
-            <DropdownOption>
-              <div>9. hello world</div>
-            </DropdownOption>
-            <DropdownOption>
-              <div>10. hello world, guys</div>
-            </DropdownOption>
-          </>
-        }}
-      </Dropdown>
-    </DemoRow>
-  );
-});
-
-
-export const demo6 = designPage(() => {
-  return () => (
-    <DemoRow title="大小尺寸">
-      <Dropdown size="mini">
-        {{
-          default: () => <Button label="Mini" size="mini"/>,
-          popper: () => <>
-            <DropdownOption val="tag-1">
-              <div>1. hello</div>
-            </DropdownOption>
-            <DropdownOption val="tag-2">
-              <div>2. hello world</div>
-            </DropdownOption>
-            <DropdownOption val="tag-3">
-              <div>3. hello world, guys</div>
-            </DropdownOption>
-          </>
-        }}
-      </Dropdown>
-
-      <Dropdown align="start" size="small">
-        {{
-          default: () => <Button label="Small" size="small"/>,
-          popper: () => <>
-            <DropdownOption val="tag-1">
-              <div>1. hello</div>
-            </DropdownOption>
-            <DropdownOption val="tag-2">
-              <div>2. hello world</div>
-            </DropdownOption>
-            <DropdownOption val="tag-3">
-              <div>3. hello world, guys</div>
-            </DropdownOption>
-          </>
-        }}
-      </Dropdown>
-      <Dropdown align="start" size="normal">
-        {{
-          default: () => <Button label="Normal" size="normal"/>,
-          popper: () => <>
-            <DropdownOption val="tag-1">
-              <div>1. hello</div>
-            </DropdownOption>
-            <DropdownOption val="tag-2">
-              <div>2. hello world</div>
-            </DropdownOption>
-            <DropdownOption val="tag-3">
-              <div>3. hello world, guys</div>
-            </DropdownOption>
-          </>
-        }}
-      </Dropdown>
-      <Dropdown align="start" size="large">
-        {{
-          default: () => <Button label="Large" size="large"/>,
-          popper: () => <>
-            <DropdownOption val="tag-1">
-              <div>1. hello</div>
-            </DropdownOption>
-            <DropdownOption val="tag-2">
-              <div>2. hello world</div>
-            </DropdownOption>
-            <DropdownOption val="tag-3">
-              <div>3. hello world, guys</div>
-            </DropdownOption>
-          </>
-        }}
-      </Dropdown>
-    </DemoRow>
-  );
-});
-
-export const demoIcons = designPage(() => {
-  return () => (
-    <DemoRow title="选项图标">
-      <Dropdown>
-        {{
-          default: () => <Button label="option with icon"/>,
-          popper: () => <>
-            <DropdownOption icon="pi-alipay-circle">
-              <div>支付宝</div>
-            </DropdownOption>
-            <DropdownOption icon="pi-wechatpay" disabled>
-              <div>微信支付</div>
-            </DropdownOption>
-            <DropdownOption icon="pi-qq">
-              <div>财付通</div>
-            </DropdownOption>
-          </>
-        }}
-      </Dropdown>
-    </DemoRow>
-  );
-});
-
-export const demoDisabled = designPage(() => {
-  return () => (
-    <DemoRow title="禁用选项">
-      <Dropdown>
-        {{
-          default: () => <Button label="disable option"/>,
-          popper: () => <>
-            <DropdownOption val="tag-1">
-              <div>1. hello</div>
-            </DropdownOption>
-            <DropdownOption val="tag-2" disabled>
-              <div>2. hello world</div>
-            </DropdownOption>
-            <DropdownOption val="tag-3">
-              <div>3. hello world, guys</div>
-            </DropdownOption>
-          </>
-        }}
-      </Dropdown>
-    </DemoRow>
-  );
-});
-
-export const demoGroups = designPage(() => {
-  return () => (
-    <DemoRow title="选项分组">
-      <Dropdown>
-        {{
-          default: () => <Button label="group option"/>,
-          popper: () => <>
-            <DropdownGroup title="分组一"/>
-            <DropdownOption label="选项1"/>
-            <DropdownGroup title="分组二"/>
-            <DropdownOption label="选项2-1" disabled/>
-            <DropdownOption label="选项2-2"/>
-            <DropdownGroup title="分组三"/>
-            <DropdownOption label="选项3-1"/>
-            <DropdownOption label="选项3-2"/>
-            <DropdownOption label="选项3-3"/>
-          </>
-        }}
-      </Dropdown>
-    </DemoRow>
-  );
-});
-
-
-export const demoIndicateIcon = designPage(() => {
-  return () => (
-    <DemoRow title="指示图标">
-      <ButtonGroup>
-        <Button label="Button(hover)"/>
-        <Dropdown placement="bottom-end" trigger="hover">
-          {{
-            reference: ({ open }: { open?: boolean }) => <Button icon={open ? 'pi-up' : 'pi-down'}/>,
-            popper: () => <>
-              <DropdownOption label="hello"/>
-              <DropdownOption label="hello world"/>
-              <DropdownOption label="hello world, guys"/>
-            </>
-          }}
-        </Dropdown>
-      </ButtonGroup>
-    </DemoRow>
-  );
-});
-
-
-export const demoCascade = designPage(() => {
-
-  const renderCascadeDropdownOption = (item: { name: string, id: string, children?: any[] }) => {
-    const slots = !item.children ? {} : { content: () => item.children!.map(child => renderCascadeDropdownOption(child)) };
-    return (
-      <DropdownOption label={item.name} key={item.id} onClick={() => $message(item.name)}>
-        {slots}
-      </DropdownOption>
-    );
-  };
-
-  return () => (
-    <DemoRow title="级联选项">
-      <Dropdown>
-        {{
-          default: () => <Button label="Reference"/>,
-          popper: () => <>
-            <DropdownOption onClick={() => $message('option-1')} label="option-1"/>
-            <DropdownOption onClick={() => $message('option-2')}>
-              {{
-                default: () => "option-2",
-                content: () => <>
-                  <DropdownOption onClick={() => $message('option-4')} label="option-4"/>
-                  <DropdownOption onClick={() => $message('option-5')}>
-                    {{
-                      default: () => "option-5",
-                      content: () => <>
-                        <DropdownOption onClick={() => $message('option-7')} label="option-7"/>
-                        <DropdownOption onClick={() => $message('option-8')} label="option-8"/>
-                      </>
-                    }}
-                  </DropdownOption>
-                  <DropdownOption onClick={() => $message('option-6')} label="option-6"/>
-                </>,
-              }}
-            </DropdownOption>
-            <DropdownOption onClick={() => $message('option-3')} label="option-3">
-              {{
-                content: () => <>
-                  <DropdownOption onClick={() => $message('option-9')} label="option-9"/>
-                </>
-              }}
-            </DropdownOption>
-          </>
-        }}
-      </Dropdown>
-
-      <Dropdown>
-        {{
-          default: () => <Button label="pick address"/>,
-          popper: () => <>
-            {AddressData.map(item => (renderCascadeDropdownOption(item)))}
-          </>
-        }}
-      </Dropdown>
-
-      <Dropdown placement="bottom-end">
-        {{
-          default: () => <Button label="pick address(align end)"/>,
-          popper: () => <>
-            {AddressData.map(item => (renderCascadeDropdownOption(item)))}
-          </>
-        }}
-      </Dropdown>
-
-      <Dropdown trigger="hover">
-        {{
-          default: () => <Button label="pick address(hover trigger)"/>,
-          popper: () => <>
-            {AddressData.map(item => (renderCascadeDropdownOption(item)))}
-          </>
-        }}
-      </Dropdown>
-    </DemoRow>
-  );
-});
-
-
-export const demoOptionWidth = designPage(() => {
-  return () => (
-    <DemoRow title="给每个option限制宽度">
-      <Dropdown optionWidth="120px">
-        {{
-          reference: () => <Button label="Button"/>,
-          popper: () => <>
-            <DropdownOption label="hello"/>
-            <DropdownOption label="hello world"/>
-            <DropdownOption label="hello world, guys"/>
-          </>
-        }}
-      </Dropdown>
-    </DemoRow>
-  );
-});
-
-export const demoDropdownScroll = designPage(() => {
-  return () => (
-    <DemoRow title="如果手动渲染了Scroll组件，则不会自动加上Scroll组件">
-      <Dropdown>
-        {{
-          reference: () => <Button label="Button"/>,
-          popper: () => <>
-            <div style={{ width: '200px', height: '200px' }}>
-              <Scroll>
-                <DropdownOption label="hello"/>
-                <DropdownOption label="hello world"/>
-                <DropdownOption label="hello world, guys"/>
-                <DropdownOption label="hello world, guys"/>
-                <DropdownOption label="hello world, guys"/>
-                <DropdownOption label="hello world, guys"/>
-                <DropdownOption label="hello world, guys"/>
-                <DropdownOption label="hello world, guys"/>
-              </Scroll>
-            </div>
-          </>
-        }}
-      </Dropdown>
-    </DemoRow>
-  );
-});
-
-
-export const demoDropdownVirtualList = designPage(() => {
-
-  const options = new Array(10000).fill({});
-
-  return () => (
-    <DemoRow title="虚拟滚动，长列表">
-      <Dropdown>
-        {{
-          reference: () => <Button label="Button"/>,
-          popper: () => <>
-            <div style={{ width: '120px', height: '200px' }}>
-              <VirtualList data={options} size={32}>
-                {{
-                  default: (data: any) => {
-                    return (
-                      <DropdownOption
-                        key={data.index}
-                        label={`option-${data.index}`}
-                        data-vid={data.index}
-                        onClick={() => $message(`option-${data.index}`)}
-                      />);
-                  }
-                }}
-              </VirtualList>
-            </div>
-          </>
-        }}
-      </Dropdown>
-    </DemoRow>
-  );
-});
+import {designPage} from "plain-design-composition";
+import {DemoRow} from "../../Demo/DemoRow";
+import {$message, Button, ButtonGroup, Dropdown, DropdownGroup, DropdownOption, Scroll, VirtualList} from "../../../../packages";
+import AddressData from '../../../data/address.json';
+
+export const demo1 = designPage(() => {
+  return () => (
+    <DemoRow title="基本用法">
+      <Dropdown onSelect={(data) => $message('select ' + data.props.val)}>
+        {{
+          default: () => <Button label="Click to open dropdown"/>,
+          popper: () => <>
+            <DropdownOption label="选项一" val="tag-1" onClick={() => $message('click tag-1')}/>
+            <DropdownOption label="选项二" val="tag-2" onClick={() => $message('click tag-2')}/>
+            <DropdownOption label="选项三" val="tag-3" onClick={() => $message('click tag-3')}/>
+          </>
+        }}
+      </Dropdown>
+
+      <ButtonGroup style={{ display: 'inline-flex' }}>
+        <Button label="Export"/>
+        <Dropdown placement="bottom-end">
+          {{
+            default: () => <Button icon="pi-down"/>,
+            popper: () => <>
+              <DropdownOption label="export jpg" onClick={() => $message('click tag-1')}/>
+              <DropdownOption label="export pdf" onClick={() => $message('click tag-2')}/>
+              <DropdownOption label="export source file" onClick={() => $message('click tag-3')}/>
+            </>
+          }}
+        </Dropdown>
+      </ButtonGroup>
+    </DemoRow>
+  );
+});
+
+
+export const demo2 = designPage(() => {
+  return () => (
+    <DemoRow title="选项内容对其">
+      <Dropdown align="start">
+        {{
+          default: () => <Button label="Start"/>,
+          popper: () => <>
+            <DropdownOption label="hello" val="tag-1"/>
+            <DropdownOption label="hello world" val="tag-2"/>
+            <DropdownOption label="hello world, guys" val="tag-3"/>
+          </>
+        }}
+      </Dropdown>
+
+      <Dropdown align="center" placement="bottom-center">
+        {{
+          default: () => <Button label="Center"/>,
+          popper: () => <>
+            <DropdownOption label="hello" val="tag-1"/>
+            <DropdownOption label="hello world" val="tag-2"/>
+            <DropdownOption label="hello world, guys" val="tag-3"/>
+          </>
+        }}
+      </Dropdown>
+
+      <Dropdown align="end" placement="bottom-end">
+        {{
+          default: () => <Button label="End"/>,
+          popper: () => <>
+            <DropdownOption label="hello" val="tag-1"/>
+            <DropdownOption label="hello world" val="tag-2"/>
+            <DropdownOption label="hello world, guys" val="tag-3"/>
+          </>
+        }}
+      </Dropdown>
+
+    </DemoRow>
+  );
+});
+
+export const demo3 = designPage(() => {
+  return () => (
+    <DemoRow title="插槽">
+      <Dropdown align="start">
+        {{
+          default: () => <Button label="Start"/>,
+          popper: () => <>
+            <DropdownOption val="tag-1">
+              <div>1. hello</div>
+            </DropdownOption>
+            <DropdownOption val="tag-2">
+              <div>2. hello world</div>
+            </DropdownOption>
+            <DropdownOption val="tag-3">
+              <div>3. hello world, guys</div>
+            </DropdownOption>
+          </>
+        }}
+      </Dropdown>
+    </DemoRow>
+  );
+});
+
+
+export const demo4 = designPage(() => {
+  return () => (
+    <DemoRow title="滚动条">
+      <p>超过6个选项时会自动启用滚动条</p>
+      <Dropdown align="start">
+        {{
+          default: () => <Button label="Start"/>,
+          popper: () => <>
+            <DropdownOption>
+              <div>1. hello</div>
+            </DropdownOption>
+            <DropdownOption>
+              <div>2. hello world</div>
+            </DropdownOption>
+            <DropdownOption>
+              <div>3. hello world, guys</div>
+            </DropdownOption>
+            <DropdownOption>
+              <div>4. hello</div>
+            </DropdownOption>
+            <DropdownOption>
+              <div>5. hello world, guys</div>
+            </DropdownOption>
+            <DropdownOption>
+              <div>6. hello world, guys</div>
+            </DropdownOption>
+            <DropdownOption>
+              <div>7. hello world, guys</div>
+            </DropdownOption>
+            <DropdownOption>
+              <div>8. hello</div>
+            </DropdownOption>
+            <DropdownOption>
+              <div>9. hello world</div>
+            </DropdownOption>
+            <DropdownOption>
+              <div>10. hello world, guys</div>
+            </DropdownOption>
+          </>
+        }}
+      </Dropdown>
+    </DemoRow>
+  );
+});
+
+
+export const demo6 = designPage(() => {
+  return () => (
+    <DemoRow title="大小尺寸">
+      <Dropdown size="mini">
+        {{
+          default: () => <Button label="Mini" size="mini"/>,
+          popper: () => <>
+            <DropdownOption val="tag-1">
+              <div>1. hello</div>
+            </DropdownOption>
+            <DropdownOption val="tag-2">
+              <div>2. hello world</div>
+            </DropdownOption>
+            <DropdownOption val="tag-3">
+              <div>3. hello world, guys</div>
+            </DropdownOption>
+          </>
+        }}
+      </Dropdown>
+
+      <Dropdown align="start" size="small">
+        {{
+          default: () => <Button label="Small" size="small"/>,
+          popper: () => <>
+            <DropdownOption val="tag-1">
+              <div>1. hello</div>
+            </DropdownOption>
+            <DropdownOption val="tag-2">
+              <div>2. hello world</div>
+            </DropdownOption>
+            <DropdownOption val="tag-3">
+              <div>3. hello world, guys</div>
+            </DropdownOption>
+          </>
+        }}
+      </Dropdown>
+      <Dropdown align="start" size="normal">
+        {{
+          default: () => <Button label="Normal" size="normal"/>,
+          popper: () => <>
+            <DropdownOption val="tag-1">
+              <div>1. hello</div>
+            </DropdownOption>
+            <DropdownOption val="tag-2">
+              <div>2. hello world</div>
+            </DropdownOption>
+            <DropdownOption val="tag-3">
+              <div>3. hello world, guys</div>
+            </DropdownOption>
+          </>
+        }}
+      </Dropdown>
+      <Dropdown align="start" size="large">
+        {{
+          default: () => <Button label="Large" size="large"/>,
+          popper: () => <>
+            <DropdownOption val="tag-1">
+              <div>1. hello</div>
+            </DropdownOption>
+            <DropdownOption val="tag-2">
+              <div>2. hello world</div>
+            </DropdownOption>
+            <DropdownOption val="tag-3">
+              <div>3. hello world, guys</div>
+            </DropdownOption>
+          </>
+        }}
+      </Dropdown>
+    </DemoRow>
+  );
+});
+
+export const demoIcons = designPage(() => {
+  return () => (
+    <DemoRow title="选项图标">
+      <Dropdown>
+        {{
+          default: () => <Button label="option with icon"/>,
+          popper: () => <>
+            <DropdownOption icon="pi-alipay-circle">
+              <div>支付宝</div>
+            </DropdownOption>
+            <DropdownOption icon="pi-wechatpay" disabled>
+              <div>微信支付</div>
+            </DropdownOption>
+            <DropdownOption icon="pi-qq">
+              <div>财付通</div>
+            </DropdownOption>
+          </>
+        }}
+      </Dropdown>
+    </DemoRow>
+  );
+});
+
+export const demoDisabled = designPage(() => {
+  return () => (
+    <DemoRow title="禁用选项">
+      <Dropdown>
+        {{
+          default: () => <Button label="disable option"/>,
+          popper: () => <>
+            <DropdownOption val="tag-1">
+              <div>1. hello</div>
+            </DropdownOption>
+            <DropdownOption val="tag-2" disabled>
+              <div>2. hello world</div>
+            </DropdownOption>
+            <DropdownOption val="tag-3">
+              <div>3. hello world, guys</div>
+            </DropdownOption>
+          </>
+        }}
+      </Dropdown>
+    </DemoRow>
+  );
+});
+
+export const demoGroups = designPage(() => {
+  return () => (
+    <DemoRow title="选项分组">
+      <Dropdown>
+        {{
+          default: () => <Button label="group option"/>,
+          popper: () => <>
+            <DropdownGroup title="分组一"/>
+            <DropdownOption label="选项1"/>
+            <DropdownGroup title="分组二"/>
+            <DropdownOption label="选项2-1" disabled/>
+            <DropdownOption label="选项2-2"/>
+            <DropdownGroup title="分组三"/>
+            <DropdownOption label="选项3-1"/>
+            <DropdownOption label="选项3-2"/>
+            <DropdownOption label="选项3-3"/>
+          </>
+        }}
+      </Dropdown>
+    </DemoRow>
+  );
+});
+
+
+export const demoIndicateIcon = designPage(() => {
+  return () => (
+    <DemoRow title="指示图标">
+      <ButtonGroup>
+        <Button label="Button(hover)"/>
+        <Dropdown placement="bottom-end" trigger="hover">
+          {{
+            reference: ({ open }: { open?: boolean }) => <Button icon={open ? 'pi-up' : 'pi-down'}/>,
+            popper: () => <>
+              <DropdownOption label="hello"/>
+              <DropdownOption label="hello world"/>
+              <DropdownOption label="hello world, guys"/>
+            </>
+          }}
+        </Dropdown>
+      </ButtonGroup>
+    </DemoRow>
+  );
+});
+
+
+export const demoCascade = designPage(() => {
+
+  const renderCascadeDropdownOption = (item: { name: string, id: string, children?: any[] }) => {
+    const slots = !item.children ? {} : { content: () => item.children!.map(child => renderCascadeDropdownOption(child)) };
+    return (
+      <DropdownOption label={item.name} key={item.id} onClick={() => $message(item.name)}>
+        {slots}
+      </DropdownOption>
+    );
+  };
+
+  return () => (
+    <DemoRow title="级联选项">
+      <Dropdown>
+        {{
+          default: () => <Button label="Reference"/>,
+          popper: () => <>
+            <DropdownOption onClick={() => $message('option-1')} label="option-1"/>
+            <DropdownOption onClick={() => $message('option-2')}>
+              {{
+                default: () => "option-2",
+                content: () => <>
+                  <DropdownOption onClick={() => $message('option-4')} label="option-4"/>
+                  <DropdownOption onClick={() => $message('option-5')}>
+                    {{
+                      default: () => "option-5",
+                      content: () => <>
+                        <DropdownOption onClick={() => $message('option-7')} label="option-7"/>
+                        <DropdownOption onClick={() => $message('option-8')} label="option-8"/>
+                      </>
+                    }}
+                  </DropdownOption>
+                  <DropdownOption onClick={() => $message('option-6')} label="option-6"/>
+                </>,
+              }}
+            </DropdownOption>
+            <DropdownOption onClick={() => $message('option-3')} label="option-3">
+              {{
+                content: () => <>
+                  <DropdownOption onClick={() => $message('option-9')} label="option-9"/>
+                </>
+              }}
+            </DropdownOption>
+          </>
+        }}
+      </Dropdown>
+
+      <Dropdown>
+        {{
+          default: () => <Button label="pick address"/>,
+          popper: () => <>
+            {AddressData.map(item => (renderCascadeDropdownOption(item)))}
+          </>
+        }}
+      </Dropdown>
+
+      <Dropdown placement="bottom-end">
+        {{
+          default: () => <Button label="pick address(align end)"/>,
+          popper: () => <>
+            {AddressData.map(item => (renderCascadeDropdownOption(item)))}
+          </>
+        }}
+      </Dropdown>
+
+      <Dropdown trigger="hover">
+        {{
+          default: () => <Button label="pick address(hover trigger)"/>,
+          popper: () => <>
+            {AddressData.map(item => (renderCascadeDropdownOption(item)))}
+          </>
+        }}
+      </Dropdown>
+    </DemoRow>
+  );
+});
+
+
+export const demoOptionWidth = designPage(() => {
+  return () => (
+    <DemoRow title="给每个option限制宽度">
+      <Dropdown optionWidth="120px">
+        {{
+          reference: () => <Button label="Button"/>,
+          popper: () => <>
+            <DropdownOption label="hello"/>
+            <DropdownOption label="hello world"/>
+            <DropdownOption label="hello world, guys"/>
+          </>
+        }}
+      </Dropdown>
+    </DemoRow>
+  );
+});
+
+export const demoDropdownScroll = designPage(() => {
+  return () => (
+    <DemoRow title="如果手动渲染了Scroll组件，则不会自动加上Scroll组件">
+      <Dropdown>
+        {{
+          reference: () => <Button label="Button"/>,
+          popper: () => <>
+            <div style={{ width: '200px', height: '200px' }}>
+              <Scroll>
+                <DropdownOption label="hello"/>
+                <DropdownOption label="hello world"/>
+                <DropdownOption label="hello world, guys"/>
+                <DropdownOption label="hello world, guys"/>
+                <DropdownOption label="hello world, guys"/>
+                <DropdownOption label="hello world, guys"/>
+                <DropdownOption label="hello world, guys"/>
+                <DropdownOption label="hello world, guys"/>
+              </Scroll>
+            </div>
+          </>
+        }}
+      </Dropdown>
+    </DemoRow>
+  );
+});
+
+
+export const demoDropdownVirtualList = designPage(() => {
+
+  const options = new Array(10000).fill({});
+
+  return () => (
+    <DemoRow title="虚拟滚动，长列表">
+      <Dropdown>
+        {{
+          reference: () => <Button label="Button"/>,
+          popper: () => <>
+            <div style={{ width: '120px', height: '200px' }}>
+              <VirtualList data={options} size={32}>
+                {{
+                  default: (data: any) => {
+                    return (
+                      <DropdownOption
+                        key={data.index}
+                        label={`option-${data.index}`}
+                        data-vid={data.index}
+                        onClick={() => $message(`option-${data.index}`)}
+                      />);
+                  }
+                }}
+              </VirtualList>
+            </div>
+          </>
+        }}
+      </Dropdown>
+    </DemoRow>
+  );
+});