# MPopover 气泡卡片

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

## 代码演示

### 基础用法

直接引入组件进行使用

```jsx
import { Component } from 'react';
import { constants, MActionSheet, Popover, PopoverProps } from '@weapp/ui';

const prefixCls = `${constants.uiPcClsPrefix}-demo-popover-m`;

interface PopoverDemoState {
  visible?: boolean;
  visible1?: boolean;
}

class PopoverDemo extends Component<PopoverProps, PopoverDemoState> {
  getChildRef = (el: any) => this.childRef = el;
  childRef: any;
  constructor(props: PopoverProps) {
    super(props);
    this.state = {
      visible: false,
      visible1: false,
    }
  }
  onVisibleChange = (visible?: boolean) => this.setState({ visible })
  onVisibleChange1 = (visible1?: boolean) => this.setState({ visible1 })
  getPopup = () => (<div>PopoverContent</div>)
  showActionSheet = () => {
    const BUTTONS = [
      {
        content: 'Operation1',
        onClick: () => console.log('Operation1'),
      },
      {
        content: 'Operation2',
        onClick: () => console.log('Operation2'),
      },
      {
        content: 'Operation3',
        onClick: () => console.log('Operation3'),
      },
      {
        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'),
      },
    ];
    this.setState({
      visible: false,
    }, () => {
      MActionSheet.showActionSheetWithOptions({
        options: BUTTONS,
        cancelButtonIndex: BUTTONS.length - 1,
        message: 'I am description, description, description',
        maskClosable: true,
      });
    })
  
  }

  render() {
    const { visible, visible1 } = this.state;
    return (
      <div className={prefixCls}>
        <div>
          <h2>调用ActionSheet(Popover)</h2>
          <Popover
            action={['click']}
            popup={(<div onClick={this.showActionSheet}>showActionSheet</div>)}
            visible={visible}
            onVisibleChange={this.onVisibleChange}
            placement={"right"}
            mask
            maskClosable
          >
            <span>Popover</span>
          </Popover>
        </div>
        <h2>提示信息(ToolTip)</h2>
        <div>
          <Popover
            popup={(<div>PopoverContent</div>)}
            visible={visible1}
            onVisibleChange={this.onVisibleChange1}
            placement={"bottomLeft"}
            action={['click']}
            popoverType='tooltip'
          >
            <span>Popover</span>
          </Popover>
        </div>
      </div>
    );
  }
}

export default PopoverDemo;
```

### 设置弹层方向

通过 placement 设置弹层位置

```jsx
import { Component } from 'react';
import { constants, Popover, PopoverProps } from '@weapp/ui';

const prefixCls = `${constants.uiPcClsPrefix}-demo-popover-m`;

interface PopoverDemoState {
  visible1?: boolean;
  visible2?: boolean;
  visible3?: boolean;
  visible4?: boolean;
  visible5?: boolean;
  visible6?: boolean;
  visible7?: boolean;
  visible8?: boolean;
  visible9?: boolean;
  visible10?: boolean;
  visible11?: boolean;
  visible12?: boolean;
}

class PopoverDemo extends Component<PopoverProps, PopoverDemoState> {
  getChildRef = (el: any) => this.childRef = el;
  childRef: any;
  constructor(props: PopoverProps) {
    super(props);
    this.state = {
      visible1: false,
      visible2: false,
      visible3: false,
      visible4: false,
      visible5: false,
      visible6: false,
      visible7: false,
      visible8: false,
      visible9: false,
      visible10: false,
      visible11: false,
      visible12: false,
    }
  }
  onVisibleChange1 = (visible1?: boolean) => this.setState({ visible1 })
  onVisibleChange2 = (visible2?: boolean) => this.setState({ visible2 })
  onVisibleChange3 = (visible3?: boolean) => this.setState({ visible3 })
  onVisibleChange4 = (visible4?: boolean) => this.setState({ visible4 })
  onVisibleChange5 = (visible5?: boolean) => this.setState({ visible5 })
  onVisibleChange6 = (visible6?: boolean) => this.setState({ visible6 })
  onVisibleChange7 = (visible7?: boolean) => this.setState({ visible7 })
  onVisibleChange8 = (visible8?: boolean) => this.setState({ visible8 })
  onVisibleChange9 = (visible9?: boolean) => this.setState({ visible9 })
  onVisibleChange10 = (visible10?: boolean) => this.setState({ visible10 })
  onVisibleChange11 = (visible11?: boolean) => this.setState({ visible11 })
  onVisibleChange12 = (visible12?: boolean) => this.setState({ visible12 })
  getPopup = () => (<div>PopoverContent</div>)
  render() {
    const { visible1, visible2, visible3, visible4, visible5, visible6, visible7, visible8, visible9, visible10, visible11, visible12 } = this.state;
    return (
      <div className={prefixCls}>
        <h2>弹层位置-left</h2>
        <div>
          <div style={{ textAlign: "center"}}>
            <Popover
              popup={(<div>PopoverContent</div>)}
              visible={visible1}
              onVisibleChange={this.onVisibleChange1}
              placement={"left"}
              popoverType='tooltip'
            >
              <span>Popover</span>
            </Popover>
          </div>
          <h2>弹层位置-right</h2>
          <div style={{ textAlign: "center"}}>
            <Popover
              popup={(<div>PopoverContent</div>)}
              visible={visible2}
              onVisibleChange={this.onVisibleChange2}
              placement={"right"}
              popoverType='tooltip'
            >
              <span>Popover</span>
            </Popover>
          </div>
          <h2>弹层位置-top</h2>
          <div style={{ textAlign: "center"}}>
            <Popover
              popup={(<div>PopoverContent</div>)}
              visible={visible3}
              onVisibleChange={this.onVisibleChange3}
              placement={"top"}
              popoverType='tooltip'
            >
              <span>Popover</span>
            </Popover>
          </div>
          <h2>弹层位置-bottom</h2>
          <div style={{ textAlign: "center"}}>
            <Popover
              popup={(<div>PopoverContent</div>)}
              visible={visible4}
              onVisibleChange={this.onVisibleChange4}
              placement={"bottom"}
              popoverType='tooltip'
            >
              <span>Popover</span>
            </Popover>
          </div>
          <h2>弹层位置-topLeft</h2>
          <div style={{ textAlign: "center"}}>
            <Popover
              popup={(<div>PopoverContent</div>)}
              visible={visible5}
              onVisibleChange={this.onVisibleChange5}
              placement={"topLeft"}
              popoverType='tooltip'
            >
              <span>Popover</span>
            </Popover>
          </div>
          <h2>弹层位置-topRight</h2>
          <div style={{ textAlign: "center"}}>
            <Popover
              popup={(<div>PopoverContent</div>)}
              visible={visible6}
              onVisibleChange={this.onVisibleChange6}
              placement={"topRight"}
              popoverType='tooltip'
            >
              <span>Popover</span>
            </Popover>
          </div>
          <h2>弹层位置-bottomLeft</h2>
          <div style={{ textAlign: "center"}}>
            <Popover
              popup={(<div>PopoverContent</div>)}
              visible={visible7}
              onVisibleChange={this.onVisibleChange7}
              placement={"bottomLeft"}
              popoverType='tooltip'
            >
              <span>Popover</span>
            </Popover>
          </div>
          <h2>弹层位置-bottomRight</h2>
          <div style={{ textAlign: "center"}}>
            <Popover
              popup={(<div>PopoverContent</div>)}
              visible={visible8}
              onVisibleChange={this.onVisibleChange8}
              placement={"bottomRight"}
              popoverType='tooltip'
            >
              <span>Popover</span>
            </Popover>
          </div>
          <h2>弹层位置-leftTop</h2>
          <div style={{ textAlign: "center"}}>
            <Popover
              popup={(<div>PopoverContent</div>)}
              visible={visible9}
              onVisibleChange={this.onVisibleChange9}
              placement={"leftTop"}
              popoverType='tooltip'
            >
              <span>Popover</span>
            </Popover>
          </div>
          <h2>弹层位置-rightTop</h2>
          <div style={{ textAlign: "center"}}>
            <Popover
              popup={(<div>PopoverContent</div>)}
              visible={visible10}
              onVisibleChange={this.onVisibleChange10}
              placement={"rightTop"}
              popoverType='tooltip'
            >
              <span>Popover</span>
            </Popover>
          </div>
          <h2>弹层位置-leftBottom</h2>
          <div style={{ textAlign: "center"}}>
            <Popover
              popup={(<div>PopoverContent</div>)}
              visible={visible11}
              onVisibleChange={this.onVisibleChange11}
              placement={"leftBottom"}
              popoverType='tooltip'
            >
              <span>Popover</span>
            </Popover>
          </div>
          <h2>弹层位置-rightBottom</h2>
          <div style={{ textAlign: "center"}}>
            <Popover
              popup={(<div>PopoverContent</div>)}
              visible={visible12}
              onVisibleChange={this.onVisibleChange12}
              placement={"rightBottom"}
              popoverType='tooltip'
            >
              <span>Popover</span>
            </Popover>
          </div>
        </div>
      </div>
    );
  }
}

export default PopoverDemo;
```

## API

### 参数说明如下：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| placement | 弹层位置 | PopupPlacement | 否 | - |
| popup | 弹层内容 | ReactNode\|() => ReactNode | 否 | - |
| visible | 弹层显示/隐藏 | boolean | 否 | - |
| onVisibleChange | 弹层默认显示/隐藏事件 | (visible?: boolean) => void | 否 | - |
| action | 弹层动作(可设置 hover/click) | ActionType \| ActionType[] | 否 | - |
| popoverType | 弹层类型 | PopoverType | 否 | - |
| mask | 是否展示遮罩 | boolean | 否 | - |
| maskClosable | 点击蒙层是否允许关闭 | boolean | 否 | - |
| maskStyle | 蒙层自定义样式 | CSSProperties | 否 | - |
| getPopupContainer | 弹层容器定位 | () => HTMLElement\|undefined; | 否 | - |
| options | 选项配置，配置 popup 自定义弹层内容后，options 失效 | PopoverOptions[] | 否 | - |
| hideArrow | 是否隐藏箭头 | boolean | 否 | - |
#### PopupPlacement 参数说明同 Trigger 组件

#### PopoverType 参数说明如下：

```
  type PopoverType = 'popover' | 'tooltip' | 'bottomPopup';
```

#### PopoverOptions 参数说明如下：

```
type DataType = {
  /* 数据的标示 */
  id: string;
  /* 数据显示内容 */
  content?: string;
  /* 多种数据类型的type */
  type?: string;
  /* 数据的提示 */
  title?: string;
  /* 是否是禁用项 */
  disabled?: boolean;
  /* 是否可选 */
  checkable?: boolean;
};

interface PopoverOptions extends DataType {
  onClick?: () => void, // 响应事件
  icon?: IconNames, // 图标名称
  iconProps?: IconProps, // 图标参数配置，继承Icon组件
  btnProps?: ButtonProps, // 按钮参数配置，继承Button组件
}
```
