Dropdown demo

packages/components/src/components/dropdown/style/index.less

@@ -17,7 +17,6 @@
 
   &-content {
     position: relative;
-    padding: 16px 8px 12px;
     background-color: @color-background-dropdown;
     border-radius: 4px;
     box-shadow: @shadow-dropdown;

packages/components/src/components/tooltip/Tooltip.tsx

@@ -8,7 +8,7 @@ import Link from '../link';
 import getPlacements from './placements';
 import useControlledState from '../../utils/hooks/useControlledState';
 
-const Tooltip = (props: TooltipProps): React.ReactNode => {
+const Tooltip = (props: TooltipProps): JSX.Element => {
   const {
     title,
     tooltipLink,

packages/website/src/components/functional/dropdown/demo/assistList.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Button, Dropdown, List } from '@gio-design/components';
+
+const options = [
+  { value: 'a', label: '功能名称', description: '这里是辅助文字' },
+  { value: 'b', label: '功能名称', description: '这里是辅助文字', tooltip: 'test', disabled: true },
+  { value: 'c', label: '功能名称', description: '这里是辅助文字' },
+  { value: 'd', label: '功能名称', description: '这里是辅助文字', disabled: true },
+];
+
+export default () => (
+  <Dropdown overlay={<List dataSource={options} width={144} height={176} />}>
+    <Button type="secondary">更多操作</Button>
+  </Dropdown>
+);

packages/website/src/components/functional/dropdown/demo/base.tsx

@@ -3,7 +3,25 @@ import { Dropdown, Button } from '@gio-design/components';
 import '@gio-design/components/es/components/dropdown/style/index.css';
 
 export default () => (
-  <Dropdown overlay={<div style={{ width: 200 }}>11111</div>}>
-    <Button>点击我</Button>
+  <Dropdown
+    overlay={
+      <div
+        style={{
+          width: 294,
+          height: 372,
+          border: '1px dashed #DCDFED',
+          borderRadius: '4px',
+          backgroundColor: '#FFFFFF',
+          display: 'inline-flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        内容区域
+      </div>
+    }
+    placement="bottomRight"
+  >
+    <Button type="secondary">更多操作</Button>
   </Dropdown>
 );

packages/website/src/components/functional/dropdown/demo/button.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Button, Dropdown, List } from '@gio-design/components';
+
+const options = [
+  { value: 'a', label: '功能名称' },
+  { value: 'b', label: '功能名称', tooltip: 'test', disabled: true },
+  { value: 'c', label: '功能名称' },
+  { value: 'd', label: '功能名称', disabled: true },
+];
+
+export default () => (
+  <Dropdown overlay={<List dataSource={options} width={144} height={176} />}>
+    <Button type="secondary">更多操作</Button>
+  </Dropdown>
+);

packages/website/src/components/functional/dropdown/demo/content.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Dropdown, Avatar, Link } from '@gio-design/components';
+import '@gio-design/components/es/components/dropdown/style/index.css';
+import image from '../../avatar/demo/Avatar.png';
+import './index.less';
+
+const renderAvatarContent = () => {
+  return (
+    <div className="avatar-content">
+      <div className="avatar-content-info">
+        <Avatar size="large">T</Avatar>
+        <p className="avatar-content-info-name">TANGTANG</p>
+        <p className="avatar-content-info-email">tangtang@growingio.com</p>
+        <Link className="avatar-content-info-link" to="/account/personal_info">
+          个人设置
+        </Link>
+      </div>
+      <div className="avatar-content-version">
+        <p className="avatar-content-version-title">版本信息</p>
+        <p className="avatar-content-version-content">当前版本：V 2020.6.4</p>
+      </div>
+      <hr />
+      <div className="avatar-content-logout">退出登录</div>
+    </div>
+  );
+};
+
+export default () => {
+  return (
+    <Dropdown overlay={renderAvatarContent}>
+      <Avatar src={image}>1111</Avatar>
+    </Dropdown>
+  );
+};

packages/website/src/components/functional/dropdown/demo/filter.tsx

@@ -0,0 +1,68 @@
+/* eslint-disable react/jsx-wrap-multilines */
+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: '功能名称' },
+];
+
+export default () => {
+  const [searchvalue, setSearchValue] = useState<string>('');
+  const [value, setValue] = useState<string[]>(['a', 'b']);
+  return (
+    <Dropdown
+      overlay={
+        <>
+          <SearchBar
+            id="demo"
+            value={searchvalue}
+            onChange={(va) => {
+              setSearchValue(va);
+            }}
+            inputWrapStyle={{ width: 208, margin: '16px 16px 8px' }}
+          />
+          <List
+            dataSource={options}
+            width={240}
+            height={358}
+            value={value}
+            isMultiple
+            onChange={(o) => {
+              if (value.includes(o.value)) {
+                setValue(difference(value, o.value));
+              } else {
+                setValue(union(value, o.value));
+              }
+            }}
+          />
+          <div style={{ borderTop: '1px solid #DCDFED' }}>
+            <Button
+              type="text"
+              size="small"
+              style={{ margin: '12px 16px' }}
+              onClick={() => {
+                setValue([]);
+              }}
+            >
+              清除
+            </Button>
+            <Button size="small" style={{ float: 'right', margin: '12px 16px' }}>
+              确定
+            </Button>
+          </div>
+        </>
+      }
+    >
+      <Button type="assist" icon={<FilterOutlined />} />
+    </Dropdown>
+  );
+};

packages/website/src/components/functional/dropdown/demo/function.tsx

@@ -0,0 +1,43 @@
+/* eslint-disable react/jsx-wrap-multilines */
+import React, { useState } from 'react';
+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: '功能名称' },
+];
+
+export default () => {
+  const [searchvalue, setSearchValue] = useState<string>('');
+  return (
+    <Dropdown
+      overlay={
+        <>
+          <SearchBar
+            id="demo"
+            value={searchvalue}
+            onChange={(va) => {
+              setSearchValue(va);
+            }}
+            inputWrapStyle={{ width: 288, margin: '16px 16px 8px' }}
+          />
+          <List dataSource={options} width={320} height={358} />
+          <div style={{ borderTop: '1px solid #DCDFED' }}>
+            <Button size="small" type="text" icon={<PlusCircleFilled />} style={{ margin: '8px 16px' }}>
+              清除
+            </Button>
+          </div>
+        </>
+      }
+    >
+      <Button type="secondary">这是一个 Select</Button>
+    </Dropdown>
+  );
+};

packages/website/src/components/functional/dropdown/demo/icons.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Button, Dropdown, List } from '@gio-design/components';
+import { More } from '@gio-design/icons';
+
+const options = [
+  { value: 'a', label: '功能名称' },
+  { value: 'b', label: '功能名称', tooltip: 'test', disabled: true },
+  { value: 'c', label: '功能名称' },
+  { value: 'd', label: '功能名称', disabled: true },
+];
+
+export default () => (
+  <Dropdown overlay={<List dataSource={options} width={144} height={176} />}>
+    <Button type="assist" icon={<More />} />
+  </Dropdown>
+);

packages/website/src/components/functional/dropdown/demo/index.less

@@ -0,0 +1,67 @@
+.avatar-content {
+  width: 280px;
+  height: 323px;
+  letter-spacing: 0;
+  border-radius: 6px;
+  box-shadow: 0 2px 14px 0 rgba(223, 226, 237, 0.8);
+  &-info {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-top: 10px;
+    background-color: #f5f7fc;
+    &-name {
+      color: #313e75;
+      font-weight: 500;
+      font-size: 14px;
+      line-height: 22px;
+    }
+    &-email {
+      color: #a3adc8;
+      font-size: 12px;
+      line-height: 20px;
+    }
+    &-link {
+      margin: 8px 0;
+      color: #1248e9;
+      font-size: 14px;
+      line-height: 24px;
+      text-decoration: underline;
+    }
+  }
+  &-version {
+    height: 56px;
+    margin: 16px 8px 8px;
+    overflow: hidden;
+    border-radius: 4px;
+    &-title {
+      margin: 7px 0 0 16px;
+      color: #313e75;
+      font-size: 14px;
+      line-height: 22px;
+    }
+    &-content {
+      margin-left: 16px;
+      color: #a3adc8;
+      font-size: 12px;
+      line-height: 20px;
+    }
+  }
+  hr {
+    margin: 0 16px;
+    border-top: 1px solid #dcdfed;
+  }
+  &-logout {
+    height: 40px;
+    margin: 8px 8px 16px;
+    padding: 9px 16px;
+    color: #313e75;
+    font-size: 14px;
+    line-height: 22px;
+    border-radius: 4px;
+    cursor: pointer;
+    &:hover {
+      background-color: #f7f8fc;
+    }
+  }
+}

packages/website/src/components/functional/dropdown/demo/placement.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Button, Dropdown, List } from '@gio-design/components';
+import { More } from '@gio-design/icons';
+
+const options = [
+  { value: 'a', label: '功能名称' },
+  { value: 'c', label: '功能名称' },
+];
+
+export default () => (
+  <>
+    <Dropdown visible 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">
+      <Button type="assist" icon={<More />} style={{ margin: '0px 128px' }} />
+    </Dropdown>
+    <Dropdown visible overlay={<List dataSource={options} width={144} height={88} />} placement="bottomLeft">
+      <Button type="assist" icon={<More />} />
+    </Dropdown>
+  </>
+);

packages/website/src/components/functional/dropdown/index.zh-CN.md

@@ -14,13 +14,35 @@ group:
 
 向下弹出的列表。当页面上的操作命令过多时，用此组件可以收纳操作元素。点击或移入触点，会出现一个下拉菜单。可在列表中进行选择，并执行相应的命令。
 
-- 用于收罗一组命令操作。
-- Select 用于选择，而 Dropdown 是命令集合。
+[1] 用于收罗一组命令操作。
+[2] Select 用于选择，而 Dropdown 是命令集合。
+
+## 应用场景
+
+【在控件中使用】
+
+- Table - 「···」、「头像列表 - 看板」、「Tag 列表 - 埋点事件」、「筛选」
+- 导航 - 「头像」、「选择项目」
+- 搜索框 - 「最近搜索记录」
+
+【在页面中使用】
+
+- Button「···」触发；
+- Select 触发。
 
 ## 代码演示
 
-<code src='./demo/base.tsx' title='信息通知样式' />
-<code src='./demo/other.tsx' title='信息通知样式' />
+[1] 当页面上的操作命令过多时，常使用 Dropdown 收纳操作元素。
+[2] 点击触点，出现下拉菜单，在列表中选择相应的命令执行，点击相应命令后自动收起列表，点击区域为整条列表项，点击空白处列表收起。
+
+<code src='./demo/base.tsx' title='自定义内容样式' />
+<code src='./demo/content.tsx' title='自定义内容示例' />
+<code src='./demo/icons.tsx' title='触发对象为 Icon' />
+<code src='./demo/button.tsx' title='触发对象为按钮' />
+<code src='./demo/assistList.tsx' title='列表含辅助信息的样式' />
+<code src='./demo/filter.tsx' title='常用过滤样式' />
+<code src='./demo/function.tsx' title='含新建功能的样式' />
+<code src='./demo/placement.tsx' title='下拉菜单出现的位置' desc='一共 12 种位置。位置选择原则：下拉菜单需要显示完整且不错乱。' />
 
 ## 参数说明