[CDropdown] UI 升级（客户视图使用）

Author: liyuan-meng

src/components/c-dropdown/demos/arrow.md

@@ -0,0 +1,88 @@
+---
+order: 1
+title: 下拉菜单选择器（新）
+desc: 基本用法。
+---
+
+```jsx
+
+/**
+ * title: 下拉菜单选择器（新）
+ * desc: 展示箭头
+ */
+import React, { useState } from 'react';
+import { 
+	CDropdown as Dropdown,
+	Icon,
+	CMenu as Menu,
+    Button,
+  Message
+} from 'cloud-react';
+
+const { Item } = Menu;
+
+class DropdownDemo extends React.Component {
+
+	 handleMenuClick = key => {
+        Message.success(`菜单Item onClick ${key}`);
+    }
+
+    onOpenChange = e => {
+        console.log(`收缩、展开 ${e}`);
+        Message.success(`收缩、展开 ${e}`);
+    }
+
+	render() {
+        // 'bottom', 'bottomLeft', 'bottomRight', 'top', 'topLeft', 'topRight'。
+        const style = { display: 'flex', gap: '30px', flexWrap: 'wrap' };
+        const overlay = (
+            <Dropdown.Menu onClick={this.handleMenuClick}>
+                <Dropdown.Item icon={<Icon type="shop-line"/>} id="tenement">租户</Dropdown.Item>
+                <Dropdown.Item icon={<Icon type="people"/>} id="client">客户</Dropdown.Item>
+                <Dropdown.Item icon={<Icon type="group"/>} id="clientBase">客户群</Dropdown.Item>
+            </Dropdown.Menu>
+        );
+		return (
+          <div style={style}>
+            <Dropdown
+              arrow
+              overlay={overlay}
+              placement="bottom">
+              <Button type="normal">向下</Button>
+            </Dropdown>
+            <Dropdown
+              arrow
+              overlay={overlay}
+              placement="bottomLeft">
+              <Button type="normal">向左下</Button>
+            </Dropdown>
+            <Dropdown
+              arrow
+              overlay={overlay}
+              placement="bottomRight">
+              <Button type="normal">向右下</Button>
+            </Dropdown>
+            <Dropdown
+              arrow
+              overlay={overlay}
+              placement="top">
+              <Button type="normal">向上</Button>
+            </Dropdown>
+            <Dropdown
+              arrow
+              overlay={overlay}
+              placement="topLeft">
+              <Button type="normal">向左上</Button>
+            </Dropdown>
+            <Dropdown
+              arrow
+              overlay={overlay}
+              placement="topRight">
+              <Button type="normal">向右上</Button>
+            </Dropdown>
+          </div>
+		);
+	}
+}
+export default DropdownDemo;
+```

src/components/c-dropdown/demos/placement.md

@@ -15,7 +15,8 @@ import {
 	CDropdown as Dropdown,
 	Icon,
 	CMenu as Menu,
-    Button
+    Button,
+  Message
 } from 'cloud-react';
 
 const { Item } = Menu;

src/components/c-dropdown/demos/selected.md

@@ -0,0 +1,57 @@
+---
+order: 1
+title: 下拉菜单选择器（新）
+desc: 基本用法。
+---
+
+```jsx
+
+import React, { useState } from 'react';
+import { 
+	CDropdown as Dropdown,
+	Icon,
+	CMenu as Menu,
+	Message
+} from 'cloud-react';
+
+const { Item } = Menu;
+
+const dataList = [
+  { label: '租户', id: '1' },
+  { label: '客户', id: '2' },
+  { label: '店铺', id: '3' },
+];
+
+class DropdownDemo extends React.Component {
+
+    state = {
+      checkedId: '1',
+	};
+
+	render() {
+		const overlay = (
+            <Dropdown.Menu checkedId={this.state.checkedId} onClick={id => {
+              this.setState({ checkedId: id })
+            }}>
+              {dataList.map(item => (
+                <Dropdown.Item key={item.id} id={item.id}>{item.label}</Dropdown.Item>
+              ))}
+            </Dropdown.Menu>
+        );
+		return (
+			<Dropdown
+              // arrow
+              placement="bottom"
+              overlay={overlay}
+              trigger={['click']}>
+              <div>
+                <span>{dataList.find(item => item.id === this.state.checkedId)?.label || '点击展示'}</span>
+                <Icon type="down" />
+              </div>
+			</Dropdown>
+		);
+	}
+}
+
+export default DropdownDemo;
+```

src/components/c-dropdown/demos/simple.md

@@ -49,7 +49,7 @@ class DropdownDemo extends React.Component {
                         </Dropdown.Menu>
                     }>
                     <div>
-                        <span>基础下拉菜单</span>
+                        <span>基础下拉菜单,带分割线</span>
                         <Icon type="down" />
                     </div>
                 </Dropdown>

src/components/c-dropdown/dropdowns/index.js

@@ -61,7 +61,7 @@ function Dropdown(props) {
   };
 
   const dropdownTrigger = cloneElement(children, {
-    className: classNames(`${prefixCls}-dropdowns`, className),
+    className: classNames(`${prefixCls}-dropdowns`, className, children?.props?.className),
     disabled,
   });
 

src/components/c-dropdown/dropdowns/item.js

@@ -2,6 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 import { prefixCls } from '@utils';
 import 'rc-dropdown/assets/index.css';
+import Icon from '../../icon';
 
 function DropdownItem(props) {
   const {
@@ -12,6 +13,7 @@ function DropdownItem(props) {
     className,
     type,
     id,
+    checkedId,
     ...restProps
   } = props;
 
@@ -30,12 +32,19 @@ function DropdownItem(props) {
         [`${prefixCls}-dropdowns-menu-item`]: true,
         [className]: className || '',
         disabled: !!disabled,
+        'menu-item-checked': checkedId && props.id === checkedId,
       })}
       onClick={() => handleClickItem(id)}
       {...restProps}
     >
       {icon && icon}
       {children}
+      {checkedId && props.id === checkedId && (
+        <Icon
+          type="finish"
+          className="menu-item-checked-icon"
+        />
+      )}
     </div>
   );
 

src/components/c-dropdown/dropdowns/menu.js

@@ -4,14 +4,16 @@ import { prefixCls } from '@utils';
 import 'rc-dropdown/assets/index.css';
 
 function DropdownMenu(props) {
-  const { children, className, restProps } = props;
+  const { children, className, checkedId, style, restProps } = props;
 
   return (
     <div
       className={classNames(`${prefixCls}-dropdowns-menu`, className)}
+      style={style || {}}
       {...restProps}
     >
       {Children.map(children, (child) => cloneElement(child, {
+        checkedId,
         onClick(key) {
           if (typeof props.onClick === 'function') {
             props.onClick(key);