# MIconDropdown 图标下拉

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/mobile/icon-dropdown/freepass)
- 平台：移动端
- 维护者：蒋贝贝
- 设计稿：http://pd.e-cology.com.cn/pd/E10/interface/e10xiaoguotu/PC/E10zjys-2/#s12
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[MIconDropdown]

## 代码演示

### 基础用法

直接引入组件进行使用

```jsx
import React from "react";
import { MIconDropdown, MMenu, constants, MIconDropdownItemDataType, MIconDropdownDataType, ListData } from "@weapp/ui";

const { uiPcClsPrefix } = constants;

const prefixCls = `${uiPcClsPrefix}-demo-icon-dropdown`;

interface MIconDropdownDemoProps {

}

const data = [
  { id: 'tab1', content: '可选标签', icon: 'Icon-folder' },
  { id: 'tab2', content: '可选标签2', icon: 'Icon-folder' },
  { id: 'tab3', content: '可选标签2很长', icon: 'Icon-folder' },
];

const menudata = [
  { id: 'tab1', content: '可选标签1', icon: 'Icon-folder'  },
  { id: 'tab2', content: '可选标签2', icon: 'Icon-folder'  },
  { id: 'tab3', content: '可选标签2很长', icon: 'Icon-folder'  },
] as MIconDropdownDataType;

const menudataNoIcon = [
  { id: 'tab1', content: '可选标签1' },
  { id: 'tab2', content: '可选标签2' },
  { id: 'tab3', content: '可选标签2很长' },
] as MIconDropdownDataType;

class MIconDropdownDemo extends React.Component<MIconDropdownDemoProps>{
  state = {
    checkedKeys: [],
  }
  onCheck = (checkedKeys: (string | undefined)[], data: ListData, isChecked: boolean) => {
    console.log(checkedKeys, data, isChecked)
    this.setState({ checkedKeys })
  }
  onClick = (data?: ListData, index?: number) => console.log(data, index);
  entityGroupParams = {
    module: 'mainline', // 模块
    entityId: '5115908307481810000', // 事项id
    createEntityGroupParams: { // 创建事项群所需参数
      module: 'mainline', // 模块
      entityId: '5115908307481810000', // 事项id
      moduleId: '101', // 模块id
      "user": {
        "uid": "1559922292333471685",
        "cid": "882416350855692288"
      },
      "name": "test3333333333",
      "rules": ["primary", "participants"],
      "entityInfo": "aaaa"
    }
  }
  render() {
    return (
      <>
        <MMenu
          defaultValue={'tab1'}
          data={data}
          type="menu"
          extraContent={(
            <>
              <MIconDropdown key="more" icon={"Icon-Message-tag-read-o"} className={`${prefixCls}-single`} data={menudata} onClick={this.onClick} showHelp
                helpUrl="http://www.baidu.com" />
              <MIconDropdown key="more1" className={`${prefixCls}-single`} data={menudata} onClick={this.onClick} onCheck={this.onCheck} checkedKeys={this.state.checkedKeys} showHelp
                helpUrl="http://www.baidu.com" />
            </>
          )
          }
        />
        <div className={`${prefixCls}-left`}>
          <MIconDropdown
           
            key="more"
            icon={"Icon-Message-tag-read-o"}
            data={menudataNoIcon}
            onClick={this.onClick}
            showSensitive
            showEntityGroup
            entityGroupParams={this.entityGroupParams}
            showHelp
            helpUrl="http://www.baidu.com"
          />
        </div>
      </>
    )
  }
}
export default MIconDropdownDemo
```

### 选中受控

```jsx
import React from "react";
import { MIconDropdown, constants, MIconDropdownDataType, ListData, Icon } from "@weapp/ui";

const { uiPcClsPrefix } = constants;

const prefixCls = `${uiPcClsPrefix}-demo-icon-dropdown`;

const menuData = [
  { id: 'tab1', content: '可选标签1' },
  { id: 'tab2', content: '可选标签2'},
  { id: 'tab3', content: '可选标签2很长' },
] as MIconDropdownDataType

class MIconDropdownDemo extends React.Component<any, any>{
  state = {
    checkedKeys: [],
    menuData: menuData
  }

  onClick = (rowData: ListData, index?: number) => {
    console.log(rowData, index)
  }

  onCheck = (checkedKeys: (string | undefined)[], data: ListData, isChecked: boolean) => {
    console.log(checkedKeys, data, isChecked)
    this.setState({ checkedKeys })
    const da =  this.state.menuData?.map((da: any) => {return data.id === da.id ? {...da, orderType: 'desc', icon: 'Icon-folder'} : {...da, orderType: null, icon: null}; });
    this.setState({ menuData: [...da] })
  }

  onOrder = (order: string, rowData: ListData, data: ListData[]) => {
    console.log(order, rowData, data)
    const da =  data?.map((da) => {return {...da, orderType: 'desc'}; });
    this.setState({ menuData: [...da] })
  }

  render() {
    return (
      <>
        <div className={`${prefixCls}-left`}>
          <MIconDropdown
           
            key="more"
            icon={"Icon-Message-tag-read-o"}
            data={this.state.menuData}
            onClick={this.onClick}
            onCheck={this.onCheck}
            onOrder={this.onOrder}
            needOrder={true}
            checkedKeys={this.state.checkedKeys}
          />
        </div>
      </>
    )
  }
}
export default MIconDropdownDemo
```

## API

### 参数说明如下：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| icon | 图标名称 | IconNames | 否 |  |
| iconProps | 图标属性 | IconProps | 否 |  |
| triggerProps | 弹层属性 | TriggerProps | 否 |  |
| data | 菜单数据 | MIconDropdownDataType | 否 |  |
| onClick | 菜单点击事件 | (data?: ListData, index?: number) => void | 否 |  |
| customRenderContent | 自定义渲染每行数据内容 | (rowData: MListData) => ReactNode | 否 |  |
| checkedKeys | 选中值受控 | (string | undefined)[] | 否 |
| onCheck | 选中行数据回调 | (checkedKeys: (string | undefined)[], data: ListData, isChecked: boolean) => void | 否 |
| needOrder | 是否开启右侧排序 | boolean | 否 | false |
| onOrder | 排序行数据回调 | (order: string, rowData: ListData, data: ListData[]) => void | 否 |  |
| showSensitive | 上报敏感词 | boolean | 否 | false |
| showEntityGroup | 启用事项群聊功能 | boolean | 否 | false |
| entityGroupParams | 事项群聊所需参数 | EntityGroupParamsType | 否 | false |
| showHelp | 帮助菜单 | boolean | 否 | false |
| helpUrl | 帮助地址 | string | 否 | false |
##### MIconDropdownDataType 说明

```
type MIconDropdownDataType = Array<MIconDropdownItemDataType>;
type MIconDropdownItemDataType = DataType & {
  icon?: IconNames;
  iconProps?: IconProps;
}
```

### 上报敏感词功能说明

```
1.showSensitive: 组件 props上设置showSensitive=true，表示在组件维度开启上报敏感词功能
2.实际效果，是否展示上报敏感词的功能由后端接口统一开启
```

### 事项群聊所需参数说明(EntityGroupParamsType)

```
1.实例：
  entityGroupParams: {
    module: 'hrm', // 模块
    entityId: '1', // 事项id
    createEntityGroupParams: { // 创建事项群所需参数
      module: 'hrm', // 模块
      entityId: '1', // 事项id
      moduleId: '1', // 模块id
    }
  }

2.类型声明
export interface EntityGroupUser {
  cid: string;
  uid: string; 
}
export interface CreateEntityGroupParamsType {
  /* 模块名称 */
  module: string;
  /* 模块对应的类型 id */
  moduleId: string,
  /* 事项Id */
  entityId: string;
  /* 事项详情 */
  entityInfo?: string,
  /* 事项名称, 将作为事项群名称使用 */
  name?: string;
}
export interface EntityGroupParamsType {
  /* 事项Id */
  entityId: string;
  /* 模块名称 */
  module: string;
  /* 非必填 { cid, uid }  可不传，默认为当前用户 */
  user?: EntityGroupUser;
  /* 若群已经存在且该用户未加入群时的处理办法：0:直接加群 1:不加群, 默认 1 */
  join?: string | number;
  /* 创建事项群所需参数 */
  createEntityGroupParams: CreateEntityGroupParamsType;
  /* 事件执行成功回调 */
  success?: (params?: any) => void;
  /* 事件执行失败回调 */
  fail?: (params?: any) => void;
}
```
