## 气泡确认框

> 鼠标点击元素，弹出气泡样式的卡片

## API

### 组件式调用

| 参数              | 说明                                                                                                                   | 类型                     | 默认值               | 是否必传 |
| ----------------- | ---------------------------------------------------------------------------------------------------------------------- | ------------------------ | -------------------- | -------- |
| message           | 警告提示标题                                                                                                           | string                   | 无                   | 是       |
| description       | 警告提示内容                                                                                                           | string 或者 React 组件   | 无                   | 否       |
| confirmText       | 确认按钮自定义文本                                                                                                     | string                   | 是                   | 否       |
| cancelText        | 关闭按钮自定义文本                                                                                                     | string                   | 否                   | 否       |
| placement         | 气泡框位置，可选 top left right bottom topLeft topRight bottomLeft bottomRight leftTop leftBottom rightTop rightBottom | string                   | top                  | 否       |
| onConfirm         | 确定按钮点击回调函数                                                                                                   | ()=>{}                   | 否                   | 否       |
| onCancel          | 取消按钮点击回调函数                                                                                                   | ()=>{}                   | 否                   | 否       |
| onVisibleChange   | 显示隐藏的回调函数, 与确定取消按钮解耦                                                                                 | (visible)=>{}            | 否                   | 否       |
| extraCls          | 自定义组件容器 class,一般用于覆盖组件默认样式使用                                                                      | string                   | 无                   | No       |
| translation       | 语言包 用于翻译组件内置常量                                                                                            | {no: string,yes: string} | {no: '否',yes: '是'} |
| tipIcon           | 自定义的提示图标                                                                                                       | JSX.Element              | 无                   | 否       |
| visible           | 是否显示 用于受控模式                                                                                                  | boolean                  | false                | 否       |
| getPopupContainer | 浮层渲染父节点，默认渲染到 body 上                                                                                     | Function(triggerNode)    | () => document.body  |
| maskClosable      | 是否可以点击遮罩关闭弹层                                                                                               | boolean                  | true                 | 否       |
| lang              | 当前语言环境(zh_CN,en_US,zh_TW)                                                                                        | string                   | zh_CN                | 否       |

### 函数式调用 PopConfirm.show({...param})

| 参数              | 说明                                              | 类型                     | 默认值               | 是否必传 |
| ----------------- | ------------------------------------------------- | ------------------------ | -------------------- | -------- |
| message           | 警告提示标题                                      | string                   | 无                   | 是       |
| description       | 警告提示内容                                      | string 或者 React 组件   | 无                   | 否       |
| confirmText       | 确认按钮自定义文本                                | string                   | 是                   | 否       |
| cancelText        | 关闭按钮自定义文本                                | string                   | 否                   | 否       |
| placement         | 气泡框位置,只提供四种，可选 top left right bottom | string                   | top                  | 否       |
| onConfirm         | 确定按钮点击回调函数                              | ()=>{}                   | 否                   | 否       |
| onCancel          | 取消按钮点击回调函数                              | ()=>{}                   | 否                   | 否       |
| extraCls          | 自定义组件容器 class,一般用于覆盖组件默认样式使用 | string                   | 无                   | No       |
| translation       | 语言包 用于翻译组件内置常量                       | {no: string,yes: string} | {no: '否',yes: '是'} |
| tipIcon           | 自定义的提示图标                                  | JSX.Element              | 无                   | 否       |
| lang              | 当前语言环境(zh_CN,en_US,zh_TW)                   | string                   | zh_CN                | 否       |
| getPopupContainer | 浮层渲染父节点，默认渲染到 body 上                | Function()               |
| hasCancelBtn      | 是否显示 cancel 按钮                              | boolean                  | true                 |
| hasConfirmBtn     | 是否显示确认按钮                                  | boolean                  | true                 |

> 提供函数式调用 demo

```javascript
//属性说明
export interface PopConfirmProps {
  message: string; //警告提示标题
  description?: string | React.ReactNode; //描述
  placement?: string; //默认top 函数模式下支持top | bottom | left | right四个位置
  confirmText?: string; //确认按钮渲染文本
  cancelText?: string; //关闭按钮自定义文本
  tipIcon?: JSX.Element; //自定义图标的icon
  extraCls?: string;
  onCancel?: (e: ReactMouseEvent) => void; //取消回调
  onConfirm?: (e: ReactMouseEvent) => void; //确定回调
  translation?: { [key: string]: any }; //翻译 {no: '否',yes: '是'}
  getPopupContainer?: (triggerNode?: HTMLElement) => HTMLElement; //挂载节点 默认body
  hasCancelBtn?: boolean; //是否显示取消按钮
  hasConfirmBtn?: boolean; //是否显示确定按钮
}
export interface IPopConfirmFunPorps extends PopConfirmProps {
  target: HTMLElement; //目标元素dom节点
}
import Popconfirm from "@beisen-phoenix/popconfirm";
const { useCallback, useRef } = React;
const PopConfirmFun: React.FC = () => {
  const containerRef = useRef < HTMLDivElement > null;
  const handleClick = useCallback((e: React.MouseEvent) => {
    PopConfirm.show({
      message: "测试",
      target: e.currentTarget,
      placement: "bottom",
      getPopupContainer: () => {
        return containerRef.current;
      }
      // container: containerRef.current
    });
  }, []);
  return (
    <div ref={containerRef}>
      <button
        // style={{ marginLeft: '1200px', marginTop: '200px' }}
        onClick={handleClick}
      >
        test
      </button>
    </div>
  );
};
```

## changelog

### 2019-11-25

> 新增 hasConfirmBtn、hasCancelBtn 两个属性，用于控制是、否按钮的显示隐藏

### 2019-11-19

> 新增 lang 属性，用于表示当前的语言环境，取值范围为“zh_CN,zh_TW,en_US”内部新增中文简体、英文、中文繁体语言包。

> 新增内置语言包

> 2019/11/8 新增 PopConfirm.show 函数式调用