# Toast

消息提醒，全局展示通知提醒信息。可自定义消息内容、标题等

## 使用场景

在全局显示消息提醒

- 通知内容比较复杂
- 有交互的通知
- 主动推送的通知，如 根据 websocket 内容，自动弹出消息

## 案例演示

### Toast 基本使用

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

const basic = () => {
  Toast.open({
    title: '标题',
    content: '基本使用',
    onClick: () => {
      console.log('Toast Clicked!');
    }
  });
};

const tirgerClick = (type) => {
  Toast[type]({
    title: `标题 - ${type}`,
    content: '内容区域，可以是 String 及 ReactNode'
  });
};

ReactDOM.render((
  <div className="btn-demo">
    <Button onClick={basic}>基本使用</Button>
    <Button onClick={() => tirgerClick('success')}>成功通知</Button>
    <Button onClick={() => tirgerClick('warning')}>警告通知</Button>
    <Button onClick={() => tirgerClick('info')}>说明通知</Button>
    <Button onClick={() => tirgerClick('error')}>错误通知</Button>
  </div>
), _react_runner_);
```
---demoend

### Toast 位置设置

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

const tirgerPlaceClick = (placement = 'topRight') => {
  Toast.open({
    title: `标题 - ${placement}`,
    content: '内容区域，可以是 String 及 ReactNode',
    placement
  });
};

ReactDOM.render((
  <div className="btn-demo">
    <Button onClick={() => tirgerPlaceClick()}>默认</Button>
    <Button onClick={() => tirgerPlaceClick('topLeft')}>topLeft</Button>
    <Button onClick={() => tirgerPlaceClick('topRight')}>topRight</Button>
    <Button onClick={() => tirgerPlaceClick('bottomLeft')}>bottomLeft</Button>
    <Button onClick={() => tirgerPlaceClick('bottomRight')}>bottomRight</Button>
    <Button onClick={() => tirgerPlaceClick('bottomMiddle')}>bottomMiddle</Button>
    <Button onClick={() => tirgerPlaceClick('topMiddle')}>topMiddle</Button>
  </div>
), _react_runner_);
```
---demoend

### Toast 参数配置

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

const cusClick = (type) => {
  const params = {};
  const key = `open${Date.now()}`;
  switch (type) {
    case 'icon':
      params.icon = <Icon icon="building" />;
      break;
    case 'style':
      params.style = { width: 300, marginLeft: -150 };
      break;
    case 'duration':
      params.duration = 0;
      params.content = '设置 Toast 自动关闭的延时，默认 4.5s，设置为 0 或者 null，则不关闭';
      break;
    case 'footer':
      params.key = key;
      params.footer = <Button onClick={() => Toast.close(key)}>知道了</Button>;
      break;
    case 'stress':
      params.stress = true;
      break;
    default:
      break;
  }
  Toast.open({
    title: `自定义 - ${type}`,
    content: '内容区域，可以是 String 及 ReactNode',
    ...params
  });
};

const updater = () => {
  const key = 'updater-toast';
  Toast.open({
    key,
    title: '原始标题',
    content: '原始内容，隔2秒后，将会更新',
    duration: 10
  });
  setTimeout(() => {
    Toast.open({
      key,
      title: '新标题',
      content: '新内容'
    });
  }, 2000);
};

ReactDOM.render((
  <div className="btn-demo">
    <Button onClick={() => cusClick('icon')}>自定义图标</Button>
    <Button onClick={() => cusClick('style')}>自定义 style</Button>
    <Button onClick={() => cusClick('duration')}>设置关闭时间</Button>
    <Button onClick={() => cusClick('footer')}>自定义底部</Button>
    <Button onClick={() => cusClick('stress')}>强调</Button>
    <Button onClick={() => updater()}>内容更新</Button>
  </div>
), _react_runner_);
```
---demoend

## methods

- 成功 `Toast.success(config)`
- 错误 `Toast.error(config)` 同 `Toast.danger(config)`
- 提示 `Toast.info(config)`
- 警告 `Toast.warning(config)` 同 `Toast.warn(config)`
- 通用打开(默认无图标) `Toast.open(config)`
- 关闭指定key的toast `Toast.close(key: String)`
- 销毁 `Toast.destroy()`

## props

> 注意，一组Toast默认采用用一个实例，此时，如果改变配置信息 `stress、duration、top、bottom`，则会应用在所有的 Toast 上。

默认按照 `prefixCls-placement` 来统一创造实例，相同的 placement 将具有相同的实例。

### Toast props

| params  | type | default | description |
| --- | --- | --- | --- |
| className | string | - | 自定义 CSS class |
| style | [React.CSSProperties](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/e434515761b36830c3e58a970abf5186f005adac/types/react/index.d.ts#L794) | - | 自定义内联样式 |
| title | `string or ReactNode` | - | 通知提醒标题，必选 |
| content | `string or ReactNode` | - | 通知提醒内容，必选 |
| footer | ReactNode | - | 自定义底部，如 可设置按钮等 |
| top | number | 24 | 消息从顶部弹出时，距离顶部的位置，单位像素。 |
| bottom | number | 24 | 消息从底部弹出时，距离底部的位置，单位像素。 |
| placement | string | topRight | 弹出位置，可选 `topLeft` `topRight` `bottomLeft` `bottomRight` `bottomMiddle` `topMiddle` |
| duration | number | 4.5 | 默认 4.5 秒后自动关闭，配置为 null 、0  则不自动关闭 |
| icon | ReactNode | - | 自定义图标, 设置为 `false、null、undefined`  将不显示图标 |
| key | string | - | 当前通知唯一标志 |
| getContainer | `() => HTMLNode` | `() => document.body` | 配置渲染节点的输出位置 |
| onClose | Function | - | 点击默认关闭按钮时触发的回调函数 |
| onClick | Function | - | 点击通知时触发的回调函数 |
| stress | boolean | false | 启用强调模式，该模式下降采用 `scale` 动画。 |

> 常见 PropTypes 见 [DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped)

还提供了一个全局配置方法，在调用前提前配置，全局一次生效。

- `Toast.config(options)`

```js
Toast.config({
  placement: 'bottomRight',
  bottom: 50,
  duration: 3,
});
```

### config options

| params  | type | default | description |
| --- | --- | --- | --- |
| bottom | number | 24 | 消息从底部弹出时，距离底部的位置，单位像素。 |
| duration | number | 4.5 | 默认自动关闭延时，单位秒 |
| getContainer | () => HTMLNode | () => document.body | 配置渲染节点的输出位置 |
| placement | string | topRight | 弹出位置，可选 `topLeft` `topRight` `bottomLeft` `bottomRight` |
| top | number | 24 | 消息从顶部弹出时，距离顶部的位置，单位像素。 |
| className | string | - | 自定义 root toast 样式名 |