From 9ca19650603aa1244594bf0df91b459130d86996 Mon Sep 17 00:00:00 2001
From: Lee Hon <lihang@growingio.com>
Date: Fri, 25 Sep 2020 09:46:20 +0800
Subject: [PATCH] =?UTF-8?q?docs(dropdown):=20=E7=BB=A7=E7=BB=AD=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84demo=20(#249)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

affects: website
---
 .../src/components/dropdown/style/index.less  |  1 +
 .../functional/dropdown/demo/assistList.tsx   | 22 +++++++++-
 .../functional/dropdown/demo/content.tsx      |  4 +-
 .../functional/dropdown/demo/filter.tsx       | 44 +++++++++----------
 .../functional/dropdown/demo/function.tsx     | 23 +++++-----
 .../functional/dropdown/demo/index.less       |  7 ++-
 .../functional/dropdown/demo/placement.tsx    |  6 +--
 7 files changed, 65 insertions(+), 42 deletions(-)

diff --git a/packages/components/src/components/dropdown/style/index.less b/packages/components/src/components/dropdown/style/index.less
index bc3de619b9..e4de8f09f7 100644
--- a/packages/components/src/components/dropdown/style/index.less
+++ b/packages/components/src/components/dropdown/style/index.less
@@ -24,6 +24,7 @@
 
   &-inner {
     overflow: hidden;
+    border-radius: 4px;
     &-content {
       position: relative;
       margin: 20px;
diff --git a/packages/website/src/components/functional/dropdown/demo/assistList.tsx b/packages/website/src/components/functional/dropdown/demo/assistList.tsx
index 36764d5af7..5b8f15f98e 100644
--- a/packages/website/src/components/functional/dropdown/demo/assistList.tsx
+++ b/packages/website/src/components/functional/dropdown/demo/assistList.tsx
@@ -9,7 +9,27 @@ const options = [
 ];
 
 export default () => (
-  <Dropdown overlay={<List dataSource={options} width={144} height={176} />}>
+  <Dropdown
+    overlay={
+      <List
+        dataSource={options}
+        width={144}
+        height={225}
+        rowHeight={56}
+        labelRenderer={(option: any, isGroup: boolean) => {
+          if (isGroup) {
+            return option.name;
+          }
+          return (
+            <div style={{ display: 'flex', flexDirection: 'column', padding: '7px 0' }}>
+              <span style={{ fontSize: '14px', lineHeight: '20px' }}>{option.label}</span>
+              <span style={{ fontSize: '14px', lineHeight: '20px' }}>{option.description}</span>
+            </div>
+          );
+        }}
+      />
+    }
+  >
     <Button type="secondary">更多操作</Button>
   </Dropdown>
 );
diff --git a/packages/website/src/components/functional/dropdown/demo/content.tsx b/packages/website/src/components/functional/dropdown/demo/content.tsx
index 4e1a3a08e3..7bd14570f9 100644
--- a/packages/website/src/components/functional/dropdown/demo/content.tsx
+++ b/packages/website/src/components/functional/dropdown/demo/content.tsx
@@ -28,7 +28,9 @@ const renderAvatarContent = () => {
 export default () => {
   return (
     <Dropdown overlay={renderAvatarContent}>
-      <Avatar src={image}>1111</Avatar>
+      <Avatar droppable src={image}>
+        1111
+      </Avatar>
     </Dropdown>
   );
 };
diff --git a/packages/website/src/components/functional/dropdown/demo/filter.tsx b/packages/website/src/components/functional/dropdown/demo/filter.tsx
index 41a2e1a09a..9e1e9bba03 100644
--- a/packages/website/src/components/functional/dropdown/demo/filter.tsx
+++ b/packages/website/src/components/functional/dropdown/demo/filter.tsx
@@ -2,47 +2,40 @@
 import React, { useState } from 'react';
 import { Button, Dropdown, List, SearchBar } from '@gio-design/components';
 import { FilterOutlined } from '@gio-design/icons';
-import { difference, union } from 'lodash';
 
 const options = [
-  { value: 'a', label: '功能名称' },
-  { value: 'b', label: '功能名称' },
-  { value: 'c', label: '功能名称' },
-  { value: 'd', label: '功能名称' },
-  { value: 'e', label: '功能名称' },
-  { value: 'f', label: '功能名称' },
-  { value: 'g', label: '功能名称' },
-  { value: 'h', label: '功能名称' },
+  { value: 'a', label: '实时监控看板' },
+  { value: 'b', label: 'Web 端获客看板' },
+  { value: 'c', label: '移动端获客看板' },
+  { value: 'd', label: '渠道分析' },
+  { value: 'e', label: '市场落地页分析' },
+  { value: 'f', label: '华北区广告投放分析' },
+  { value: 'g', label: '华东区广告投放分析' },
 ];
 
 export default () => {
   const [searchvalue, setSearchValue] = useState<string>('');
+  const [visible, setVisible] = useState<boolean>(false);
   const [value, setValue] = useState<string[]>(['a', 'b']);
   return (
     <Dropdown
+      visible={visible}
+      onVisibleChange={setVisible}
       overlay={
         <>
           <SearchBar
             id="demo"
             value={searchvalue}
-            onChange={(va) => {
-              setSearchValue(va);
-            }}
+            onChange={setSearchValue}
             inputWrapStyle={{ width: 208, margin: '16px 16px 8px' }}
           />
           <List
-            dataSource={options}
+            dataSource={options.filter((option) => option.label.includes(searchvalue))}
             width={240}
-            height={358}
+            height={280}
             value={value}
             isMultiple
-            onChange={(o) => {
-              if (value.includes(o.value)) {
-                setValue(difference(value, o.value));
-              } else {
-                setValue(union(value, o.value));
-              }
-            }}
+            onChange={setValue}
           />
           <div style={{ borderTop: '1px solid #DCDFED' }}>
             <Button
@@ -52,10 +45,17 @@ export default () => {
               onClick={() => {
                 setValue([]);
               }}
+              disabled={value.length === 0}
             >
               清除
             </Button>
-            <Button size="small" style={{ float: 'right', margin: '12px 16px' }}>
+            <Button
+              size="small"
+              style={{ float: 'right', margin: '12px 16px' }}
+              onClick={() => {
+                setVisible(false);
+              }}
+            >
               确定
             </Button>
           </div>
diff --git a/packages/website/src/components/functional/dropdown/demo/function.tsx b/packages/website/src/components/functional/dropdown/demo/function.tsx
index 900adb3a08..3a2e94ee96 100644
--- a/packages/website/src/components/functional/dropdown/demo/function.tsx
+++ b/packages/website/src/components/functional/dropdown/demo/function.tsx
@@ -4,14 +4,13 @@ import { Button, Dropdown, List, SearchBar } from '@gio-design/components';
 import { PlusCircleFilled } from '@gio-design/icons';
 
 const options = [
-  { value: 'a', label: '功能名称' },
-  { value: 'b', label: '功能名称' },
-  { value: 'c', label: '功能名称' },
-  { value: 'd', label: '功能名称' },
-  { value: 'e', label: '功能名称' },
-  { value: 'f', label: '功能名称' },
-  { value: 'g', label: '功能名称' },
-  { value: 'h', label: '功能名称' },
+  { value: 'a', label: '实时监控看板' },
+  { value: 'b', label: 'Web 端获客看板' },
+  { value: 'c', label: '移动端获客看板' },
+  { value: 'd', label: '渠道分析' },
+  { value: 'e', label: '市场落地页分析' },
+  { value: 'f', label: '华北区广告投放分析' },
+  { value: 'g', label: '华东区广告投放分析' },
 ];
 
 export default () => {
@@ -23,15 +22,13 @@ export default () => {
           <SearchBar
             id="demo"
             value={searchvalue}
-            onChange={(va) => {
-              setSearchValue(va);
-            }}
+            onChange={setSearchValue}
             inputWrapStyle={{ width: 288, margin: '16px 16px 8px' }}
           />
-          <List dataSource={options} width={320} height={358} />
+          <List dataSource={options.filter((option) => option.label.includes(searchvalue))} width={320} height={280} />
           <div style={{ borderTop: '1px solid #DCDFED' }}>
             <Button size="small" type="text" icon={<PlusCircleFilled />} style={{ margin: '8px 16px' }}>
-              清除
+              新建活动
             </Button>
           </div>
         </>
diff --git a/packages/website/src/components/functional/dropdown/demo/index.less b/packages/website/src/components/functional/dropdown/demo/index.less
index 6c5995ae10..42e027dc63 100644
--- a/packages/website/src/components/functional/dropdown/demo/index.less
+++ b/packages/website/src/components/functional/dropdown/demo/index.less
@@ -1,6 +1,6 @@
 .avatar-content {
   width: 280px;
-  height: 323px;
+  height: 300px;
   letter-spacing: 0;
   border-radius: 6px;
   box-shadow: 0 2px 14px 0 rgba(223, 226, 237, 0.8);
@@ -9,14 +9,16 @@
     flex-direction: column;
     align-items: center;
     padding-top: 10px;
-    background-color: #f5f7fc;
+    background-color: #f7f8fc;
     &-name {
+      margin: 8px 0 0;
       color: #313e75;
       font-weight: 500;
       font-size: 14px;
       line-height: 22px;
     }
     &-email {
+      margin-bottom: unset;
       color: #a3adc8;
       font-size: 12px;
       line-height: 20px;
@@ -49,6 +51,7 @@
   }
   hr {
     margin: 0 16px;
+    border: unset;
     border-top: 1px solid #dcdfed;
   }
   &-logout {
diff --git a/packages/website/src/components/functional/dropdown/demo/placement.tsx b/packages/website/src/components/functional/dropdown/demo/placement.tsx
index 92d0650a0a..69460da45c 100644
--- a/packages/website/src/components/functional/dropdown/demo/placement.tsx
+++ b/packages/website/src/components/functional/dropdown/demo/placement.tsx
@@ -9,13 +9,13 @@ const options = [
 
 export default () => (
   <>
-    <Dropdown visible overlay={<List dataSource={options} width={144} height={88} />} placement="bottomRight">
+    <Dropdown overlay={<List dataSource={options} width={144} height={88} />} placement="bottomRight">
       <Button type="assist" icon={<More />} style={{ marginLeft: '64px' }} />
     </Dropdown>
-    <Dropdown visible overlay={<List dataSource={options} width={144} height={88} />} placement="bottom">
+    <Dropdown overlay={<List dataSource={options} width={144} height={88} />} placement="bottom">
       <Button type="assist" icon={<More />} style={{ margin: '0px 128px' }} />
     </Dropdown>
-    <Dropdown visible overlay={<List dataSource={options} width={144} height={88} />} placement="bottomLeft">
+    <Dropdown overlay={<List dataSource={options} width={144} height={88} />} placement="bottomLeft">
       <Button type="assist" icon={<More />} />
     </Dropdown>
   </>