# AmosAlert

Alert 弹出框

## 案例演示

### AmosAlert 基本使用

---demo
```js
import { AmosAlert, Button } from 'amos-framework';

const toggle = (type = 'info') => {
  if (type === 'confirm'){
    AmosAlert[type](type, '提示信息', {
      callback: (flag) => {
        // 确定
        if (flag) {
          console.log('click ok!');
        }
      }
    });
  } else {
    AmosAlert[type](type, '提示信息', {
      callback: (dom) => {
        //
        console.log(dom);
      }
    });
  }
}

ReactDOM.render((
  <div className="btn-demo">
    <Button onClick={() => toggle('info')}>info</Button>
    <Button onClick={() => toggle('normal')}>normal</Button>
    <Button onClick={() => toggle('modal')}>modal</Button>
    <Button onClick={() => toggle('confirm')}>confirm</Button>
    <Button onClick={() => toggle('error')}>error</Button>
    <Button onClick={() => toggle('emphasize')}>emphasize</Button>
    <Button onClick={() => toggle('success')}>success</Button>
    <Button onClick={() => toggle('warning')}>warning</Button>
  </div>
), _react_runner_);
```
---demoend

### AmosAlert confim 使用

---demo
```js
import { AmosAlert, Button } from 'amos-framework';

const showConfirm = () => {
  AmosAlert.confirm('提示', '是否删除?', {
    callback: (flag) => {
      if(flag){
        // 确定删除
      } else {
        // 取消
      }
    }
  });
};

ReactDOM.render((
  <div>
    <Button onClick={() => showConfirm()}>confirm</Button>
  </div>
), _react_runner_);
```
---demoend

### AmosAlert confim 自定义

所有的 `type` 类型，第三个参数，均支持传入 `btnText` 用来更改按钮文本。

confim 类型，如果只传入 `btnText` 将会更改 `确定` 按钮文本。如果传入 `okText`，则会覆盖 `btnText` 内容

---demo
```js
import { AmosAlert, Button } from 'amos-framework';

const showConfirm = () => {
  AmosAlert.confirm('提示', '是否删除?', {
    // btnText: '是',
    okText: '是',
    cancelText: '否',
    callback: (flag) => {
      if(flag){
        // 确定删除
      } else {
        // 取消
      }
    }
  });
};

ReactDOM.render((
  <div>
    <Button onClick={() => showConfirm()}>confirm</Button>
  </div>
), _react_runner_);
```
---demoend


## Method

- `AmosAlert.info(title, content, { callback = noop, target, draggable, btnText } = {})`
- `AmosAlert.normal(title, content, { callback = noop, target, draggable, btnText } = {})`
- `AmosAlert.modal(title, content, { callback = noop, draggable, width = '500px', btnText } = {})`
- `AmosAlert.confirm(title, content, { callback = noop, target, draggable, btnText, okText, cancelText } = {})`
- `AmosAlert.error(title, content, { callback = noop, target, draggable, btnText } = {})`
- `AmosAlert.emphasize(title, content, { callback = noop, target, draggable, btnText } = {})`
- `AmosAlert.success(title, content, { callback = noop, target, draggable, btnText } = {})`
- `AmosAlert.warning(title, content, { callback = noop, target, draggable, btnText } = {})`

参数说明：

- `title`: 标题
- `content`: 内容
- `options: { callback = noop, target, draggable }`
  - `callback`: 关闭回调 （对应原始的 onClose）
  - `target`: 目标id | tag
  - `draggable`: 是否可拖拽
  - `btnText`: 确定按钮自定义文本 （对应原始的 confirmButtonText）
  - `okText`: 确定按钮自定义文本 `confirm` 特有
  - `cancelText`: 取消按钮自定义文本 `confirm` 特有


`AmosAlert.modal` 支持更多的自定义配置

```js
const restProps = {
  // 以下5个属性，已被其他参数代替，不起效
  title: '', // 用于设置弹窗标题文本
  text: '', // 用于设置弹窗纯文本内容（不支持HTML标签渲染）
  html: '', // 用于设置弹窗HTML格式内容（支持标签解析）
  confirmButtonText: 'OK', // 用于设置确认按钮显示文本
  onClose: null, // 用于设置弹窗关闭后的回调函数

  // 以下属性 `AmosAlert.modal` 支持在 `options` 中传入
  titleText: '', // 弹窗标题文本（替代原失效的title参数）
  type: null, // 弹窗类型，支持类型：'success | error | warning | info | question'，null为无默认样式
  customClass: '', // 弹窗自定义CSS类名（可传入多个类名，空格分隔，用于自定义弹窗样式）
  target: 'body', // 弹窗挂载的目标DOM元素选择器，弹窗将被插入到该元素内部
  animation: true, // 是否启用弹窗显示/隐藏的过渡动画（true启用，false禁用无过渡效果）
  allowOutsideClick: true, // 是否允许点击弹窗外部区域关闭弹窗（true允许，false禁止）
  allowEscapeKey: true, // 是否允许按下ESC键关闭弹窗（true允许，false禁止）
  allowEnterKey: true, // 是否允许按下Enter键触发确认操作（true允许，false禁止）
  showConfirmButton: true, // 是否显示确认按钮（true显示，false隐藏）
  showCancelButton: false, // 是否显示取消按钮（true显示，false隐藏）
  preConfirm: null, // 确认按钮点击后、弹窗关闭前的前置回调函数（支持异步操作，返回Promise会等待执行完成）
  confirmButtonColor: '#3085d6', // 确认按钮的背景颜色
  confirmButtonClass: null, // 确认按钮的自定义CSS类名，用于自定义按钮样式
  cancelButtonText: 'Cancel', // 取消按钮的显示文本
  cancelButtonColor: '#aaa', // 取消按钮的背景颜色
  cancelButtonClass: null, // 取消按钮的自定义CSS类名，用于自定义按钮样式
  buttonsStyling: true, // 是否启用自带的按钮默认样式（true启用，false禁用，使用自定义样式）
  reverseButtons: false, // 是否反转确认按钮与取消按钮的排列顺序（true：取消左、确认右；false：默认顺序）
  focusCancel: false, // 弹窗打开时是否默认聚焦到取消按钮（true聚焦取消按钮，false聚焦确认按钮）
  showCloseButton: false, // 是否显示弹窗右上角的关闭按钮（true显示，false隐藏）
  showLoaderOnConfirm: false, // 点击确认按钮后是否显示加载动画（true显示，配合preConfirm异步操作使用，禁用按钮状态）
  imageUrl: null, // 弹窗内要显示的图片URL地址（null则不显示图片）
  imageWidth: null, // 弹窗内图片的宽度（单位：像素，仅imageUrl有效时生效）
  imageHeight: null, // 弹窗内图片的高度（单位：像素，仅imageUrl有效时生效）
  imageClass: null, // 弹窗内图片的自定义CSS类名，用于自定义图片样式
  timer: null, // 弹窗自动关闭的计时器（单位：毫秒，传入数值则定时关闭，null不自动关闭）
  width: 500, // 弹窗宽度（单位：像素）
  padding: 20, // 弹窗内部的内边距（单位：像素，控制内容与弹窗边框的间距）
  background: '#fff', // 弹窗的背景颜色
  input: null, // 弹窗内置输入框配置，指定输入类型：'text | email | password | select'等，null不显示输入框
  inputPlaceholder: '', // 输入框的占位提示文本（仅input不为null时生效）
  inputValue: '', // 输入框的默认初始值（仅input不为null时生效）
  inputOptions: {}, // 下拉选择框（input: 'select'）的选项配置，格式：{选项值: 选项显示文本}
  inputAutoTrim: true, // 是否自动去除输入框内容的首尾空格（true自动去除，false保留原始内容）
  inputClass: null, // 输入框的自定义CSS类名，用于自定义输入框样式
  inputAttributes: {}, // 输入框的自定义HTML属性配置，格式：{属性名: 属性值}，如{maxlength: 10}
  inputValidator: null, // 输入框内容验证函数，接收输入值为参数；返回null表示验证通过，返回字符串为错误提示文本
  progressSteps: [], // 多步骤弹窗的步骤配置数组，如['步骤1', '步骤2']，用于显示顶部步骤指示器
  currentProgressStep: null, // 当前激活的进度步骤（指定progressSteps中的元素或索引）
  progressStepsDistance: '40px', // 进度步骤之间的间距（支持CSS单位，仅progressSteps非空时生效）
  onOpen: null, // 弹窗成功打开并渲染完成后的回调函数（可用于操作弹窗内DOM元素）
  // 不采用reject
  useRejections: false, // 自定义配置：是否启用Promise.reject机制（false不采用，避免抛出取消/错误异常）
  // 是否进行强调显示
  emphasize: false, // 自定义配置：是否对弹窗进行强调显示（开启后强化视觉效果，如震动等）
};
```