# MActionSheet 动作面板

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/mobile/action-sheet/freepass)
- 平台：移动端
- 维护者：揭志胜
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[MActionSheet]

## 代码演示

### 基础用法

直接引入组件进行使用

```jsx
import React, { Component } from 'react';
import { MActionSheet, MButton, Dialog, AnyObj, Switch } from '@weapp/ui';
import { regHook } from '@weapp/utils';

export default class ActionSheetDemo extends Component<any, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      clicked: 'none',
      clicked1: 'none',
      clicked2: 'none',
    };
  }

  componentDidMount(): void {
    regHook('weappUi', 'ActionSheep.config.overwrite', (config: any) => {
      console.error('config', config)
      if (config?.title === '批量操作111') {
        const newOptions: AnyObj[] = [
          {
            content: '添加的 option',
            onClick: () => alert('我是通过复写 config 添加的 option'),
            disable: false,
            icon: 'Icon-Classification-template',
          },
          ...(config.options as AnyObj[])
        ]
        const newConfig = { ...config, options: newOptions }
        return newConfig;
      }
    })
  }

  dataList = [
    { url: 'OpHiXAcYzmPQHcdlLFrc', title: '发送给朋友', disable: true },
    { url: 'wvEzCMiDZjthhAOcwTOu', title: '新浪微博', disable: true },
    { url: 'cTTayShKtEIdQVEMuiWt', title: '生活圈' },
    { url: 'umnHwvEgSyQtXlZjNJTt', title: '微信好友' },
    { url: 'SxpunpETIwdxNjcJamwB', title: 'QQ' },
  ].map(obj => ({
    icon: <img src={`https://gw.alipayobjects.com/zos/rmsportal/${obj.url}.png`} alt={obj.title} style={{ width: 36 }} />,
    title: obj.title,
    disable: obj.disable || false
  }));

  showActionSheet = () => {
    const BUTTONS = [
      {
        content: 'Operation1',
        onClick: () => console.log('Operation1'),
        disable: true
      },
      {
        content: 'Operation2',
        onClick: () => console.log('Operation2'),
        disable: true
      },
      {
        content: 'Operation3',
        onClick: () => console.log('Operation3'),
        disable: true
      },
      {
        content: 'Operation4',
        onClick: () => console.log('Operation4'),
      },
      {
        content: 'Operation5',
        onClick: () => console.log('Operation5'),
      },
      {
        content: 'Operation6',
        onClick: () => console.log('Operation6'),
      },
      {
        content: 'Operation7',
        onClick: () => console.log('Operation7'),
      },
      {
        content: 'Operation8',
        onClick: () => console.log('Operation8'),
      },
      {
        content: 'Operation9',
        onClick: () => console.log('Operation9'),
      },
      {
        content: 'Cancel',
        onClick: () => console.log('Cancel'),
      },
    ];
    MActionSheet.showActionSheetWithOptions({
      options: BUTTONS,
      cancelButtonIndex: BUTTONS.length - 1,
      // destructiveButtonIndex: BUTTONS.length - 2,
      // title: 'title',
      message: 'I am description, description, description',
      maskClosable: true,
      showSensitive: true,
      showEntityGroup: true,
      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"
        }
      },
      // 'data-seed': 'logId',
    },
      (buttonIndex) => {
        this.setState({ clicked: BUTTONS[buttonIndex] });
      });
  }

  showGridActionSheet = () => {
    let BUTTONS = [
      {
        content: '批量操作',
        onClick: () => console.log('Operation1'),
        icon: 'Icon-Classification-template',
        disable: true
      },
      {
        content: '批量操作',
        onClick: () => console.log('Operation2'),
        icon: 'Icon-Classification-template',
        disable: true
      },
      {
        content: '批量操作',
        onClick: () => console.log('Operation3'),
        icon: 'Icon-Classification-template',
        disable: true
      },
      {
        content: '批量操作',
        onClick: () => console.log('Operation4'),
        icon: 'Icon-Classification-template',
      },
      {
        content: '批量操作',
        onClick: () => console.log('Operation5'),
        icon: 'Icon-Classification-template',
      },
      {
        content: '批量操作',
        onClick: () => console.log('Operation6'),
        icon: 'Icon-Classification-template',
      },
      {
        content: '批量操作',
        onClick: () => console.log('Operation7'),
        icon: 'Icon-Classification-template',
      },
      {
        content: '批量操作',
        onClick: () => console.log('Operation8'),
        icon: 'Icon-Classification-template',
      },
      {
        content: '批量操作',
        onClick: () => console.log('Operation9'),
        icon: 'Icon-Classification-template',
      },
      {
        content: '批量操作',
        onClick: () => console.log('Operation6'),
        icon: 'Icon-Classification-template',
      },
      {
        content: '批量操作2',
        onClick: () => console.log('Operation7'),
        icon: 'Icon-Classification-template',
      },
      {
        content: '批量操作2',
        onClick: () => console.log('Operation8'),
        icon: 'Icon-Classification-template',
      },
      {
        content: '批量操作2',
        onClick: () => console.log('Operation9'),
        icon: 'Icon-Classification-template',
      },
      {
        content: '取消',
        onClick: () => console.log('Cancel'),
      },
    ];
    MActionSheet.showActionSheetWithGridOptions({
      options: BUTTONS,
      cancelButtonIndex: BUTTONS.length - 1,
      cancelButtonText: '取消',
      title: '批量操作',
      // message: 'I am description, description, description',
      maskClosable: true,
      column: 5,
      showEntityGroup: true,
      entityGroupParams: {
        module: 'hrm', // 模块
        entityId: '1', // 事项id
        createEntityGroupParams: { // 创建事项群所需参数
          module: 'hrm', // 模块
          entityId: '1', // 事项id
          moduleId: '1', // 模块id
        }
      }
      // 'data-seed': 'logId',
    },
      (buttonIndex) => {
        this.setState({ clicked: BUTTONS[buttonIndex] });
      });
  }

  showGridActionSheet2 = () => {
    let BUTTONS = [
      {
        content: '批量操作',
        onClick: () => console.log('Operation1'),
        icon: 'Icon-Classification-template',
        disable: true
      },
      {
        content: '批量操作',
        onClick: () => console.log('Operation2'),
        icon: 'Icon-Classification-template',
        disable: true
      },
      {
        content: '批量操作',
        onClick: () => console.log('Operation3'),
        icon: 'Icon-Classification-template',
        disable: true
      },
      {
        content: '批量操作',
        onClick: () => console.log('Operation4'),
        icon: 'Icon-Classification-template',
      },
      {
        content: '批量操作',
        onClick: () => console.log('Operation5'),
        icon: 'Icon-Classification-template',
      },
      {
        content: '批量操作',
        onClick: () => console.log('Operation6'),
        icon: 'Icon-Classification-template',
      },
      {
        content: '批量操作',
        onClick: () => console.log('Operation7'),
        icon: 'Icon-Classification-template',
      },
      {
        content: '批量操作',
        onClick: () => console.log('Operation8'),
        icon: 'Icon-Classification-template',
      },
      {
        content: '批量操作',
        onClick: () => console.log('Operation9'),
        icon: 'Icon-Classification-template',
      },
      {
        content: '批量操作',
        onClick: () => console.log('Operation6'),
        icon: 'Icon-Classification-template',
      },
      {
        content: '批量操作2',
        onClick: () => console.log('Operation7'),
        icon: 'Icon-Classification-template',
      },
      {
        content: '批量操作2',
        onClick: () => console.log('Operation8'),
        icon: 'Icon-Classification-template',
      },
      {
        content: '批量操作2',
        onClick: () => console.log('Operation9'),
        icon: 'Icon-Classification-template',
      },
      {
        content: '取消',
        onClick: () => console.log('Cancel'),
      },
    ];
    MActionSheet.showActionSheetWithGridOptions({
      options: BUTTONS,
      cancelButtonIndex: BUTTONS.length - 1,
      cancelButtonText: '取消',
      title: '批量操作111',
      // message: 'I am description, description, description',
      maskClosable: true,
      column: 5,
      showEntityGroup: true,
      entityGroupParams: {
        module: 'hrm', // 模块
        entityId: '1', // 事项id
        createEntityGroupParams: { // 创建事项群所需参数
          module: 'hrm', // 模块
          entityId: '1', // 事项id
          moduleId: '1', // 模块id
        }
      }
      // 'data-seed': 'logId',
    },
      (buttonIndex) => {
        this.setState({ clicked: BUTTONS[buttonIndex] });
      });
  }

  showShareActionSheet = () => {
    MActionSheet.showShareActionSheetWithOptions(
      {
        options: this.dataList,
        // title: 'title',
        message: 'I am description, description, description',
      },
      (buttonIndex) => {
        this.setState({ clicked1: buttonIndex > -1 ? this.dataList[buttonIndex].title : 'cancel' });
        // also support Promise
        return new Promise((resolve) => {
          Dialog.message({ content: 'closed after 1000ms' });
          setTimeout(resolve, 1000);
        });
      },
      <div>11</div>
    );
  }

  showShareActionSheetMulpitleLine = () => {
    const data = [[...this.dataList, this.dataList[2]], [this.dataList[3], this.dataList[4]]];
    MActionSheet.showShareActionSheetWithOptions({
      options: data,
      message: 'I am description, description, description',
      showEntityGroup: true,
      entityGroupParams: {
        module: 'hrm', // 模块
        entityId: '1', // 事项id
        createEntityGroupParams: { // 创建事项群所需参数
          module: 'hrm', // 模块
          entityId: '1', // 事项id
          moduleId: '1', // 模块id
        }
      }
    },
      (buttonIndex, rowIndex = 0) => {
        this.setState({ clicked2: buttonIndex > -1 ? data[rowIndex][buttonIndex].title : 'cancel' });
      });
  }

  render() {
    return (
      <div style={{ padding: 15 }}>
        <MButton size="large" onClick={this.showActionSheet}>showActionSheet</MButton>
        <br />
        <MButton size="large" onClick={this.showGridActionSheet}>showGridActionSheet</MButton>
        <br />
        <MButton size="large" onClick={this.showShareActionSheet}>showShareActionSheet</MButton>
        <br />
        <MButton size="large" onClick={this.showShareActionSheetMulpitleLine}>showShareActionSheetMulpitleLine</MButton>
        <br />
        <h3>复写 actionSheet options:</h3>
        <MButton size="large" onClick={this.showGridActionSheet2}>showActionSheetRewrite</MButton>
      </div>
    );
  }
}
```

从底部弹出的模态框，提供和当前场景相关的 2 个以上的操作动作，也支持提供标题和描述。内置固定的展示样式、不支持特别灵活的修改。

### 规则

- 提供清晰的退出按钮。
- 可高亮破坏性操作，e.g. 将『删除』处理成红色文本。
- 不要放置过多内容，避免面板纵向滚动。

## API

### static showActionSheetWithOptions(options: Object, callback: Function)

显示 action sheet，``对象必须包含以下的一个或者多个：

- options (array of strings) - 按钮标题列表 (required)
- cancelButtonIndex (int) - 按钮列表中取消按钮的索引位置
- destructiveButtonIndex (int) - 按钮列表中破坏性按钮（一般为删除）的索引位置
- title (string) - 顶部标题
- message (string/React.element) - 顶部标题下的简要消息
- maskClosable (bool) - 点击蒙层是否允许关闭，默认允许
- showSensitive (bool) - 启用上报敏感词功能（默认启用）
- showEntityGroup (bool) - 启用事项群聊功能 (默认关闭)
- entityGroupParams (EntityGroupParamsType) - 事项群聊所需参数

``函数支持返回 Promise

### static showActionSheetWithGridOptions(options: Object, callback: Function)

显示 action sheet，``对象必须包含以下的一个或者多个：

- options (array of `{ icon: iconName || ReactNode, content: string, onClick: () => void, disable?: boolean;}`) - 按钮列表 (required)
- cancelButtonIndex (int) - 按钮列表中取消按钮的索引位置
- destructiveButtonIndex (int) - 按钮列表中破坏性按钮（一般为删除）的索引位置
- title (string) - 顶部标题
- message (string/React.element) - 顶部标题下的简要消息
- maskClosable (bool) - 点击蒙层是否允许关闭，默认允许
- showSensitive (bool) - 启用上报敏感词功能（默认启用）
- showEntityGroup (bool) - 启用事项群聊功能 (默认关闭)
- entityGroupParams (EntityGroupParamsType) - 事项群聊所需参数

``函数支持返回 Promise

### static showActionSheetWithOptions(options: Object, callback: Function)

显示 action sheet，``对象必须包含以下的一个或者多个：

- options (array of `{ icon: ReactNode, content: string, onClick: () => void,  disable?: boolean; }`) - 按钮标题列表 (required)
- cancelButtonIndex (int) - 按钮列表中取消按钮的索引位置
- destructiveButtonIndex (int) - 按钮列表中破坏性按钮（一般为删除）的索引位置
- title (string) - 顶部标题
- message (string/React.element) - 顶部标题下的简要消息
- maskClosable (bool) - 点击蒙层是否允许关闭，默认允许
- column (number) - 每行多少列
- showSensitive (bool) - 启用上报敏感词功能（默认启用）
- showEntityGroup (bool) - 启用事项群聊功能 (默认关闭)
- entityGroupParams (EntityGroupParamsType) - 事项群聊所需参数

``函数支持返回 Promise

### static showShareActionSheetWithOptions(options: Object, callback: Function)

显示分享 action sheet，``对象必须包含以下的一个或者多个：

- options (array of `{icon: ReactNode, title: string, disable?: boolean}`) - 分享按钮列表 (required)可以是二维数组，能显示多行按钮，例如`[[{icon,title},...],...]`表示两行两列。当为二维数组时`callback`有两个参数，第一个为`列`序列、第二个为`行`序列。
- cancelButtonText (string) - 取消按钮文案，默认为`取消`
- title (string) - 顶部标题
- message (string/React.element) - 顶部标题下的简要消息
- maskClosable (bool) - 点击蒙层是否允许关闭，默认允许
- showSensitive (bool) - 启用上报敏感词功能（默认启用）
- showEntityGroup (bool) - 启用事项群聊功能 (默认关闭)
- entityGroupParams (EntityGroupParamsType) - 事项群聊所需参数

``函数支持返回 Promise

### static close() - programmatically close.

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

```
1.showSensitive:  options内设置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;
}
```

## 复写 config

通过钩子可以复写 config 配置：

```
regHook('weappUi', 'ActionSheep.config.overwrite', (config: any) => {
  const newConfig = {...config };
  // 调整 newConfig ...
  return newConfig;
})
```
