# Notice

全局通知

## 案例演示

### Notice 基本用法

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

class Demo extends Component {
  render() {
    return (
      <div className="btn-demo">
        <Button onClick={() => Notice.success('操作成功')}>成功</Button>
        <Button onClick={() => Notice.error('操作失败')}>失败</Button>
        <Button onClick={() => Notice.error('自定义关闭时间', 1.5)}>1.5秒后关闭</Button>
        <Button onClick={() => Notice.error('操作失败', 0)}>手动关闭</Button>
        <Button onClick={() => Notice.info('info')}>info</Button>
        <Button onClick={() => Notice.warning('warning')}>warning</Button>
      </div>
    );
  }
}

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend

### loading 用法

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

const success = () => {
  const hide = Notice.loading('正在加载...', 0);
  // 手动进行关闭
  setTimeout(hide, 2500);
};

ReactDOM.render(<Button onClick={success}>loading</Button>, _react_runner_);
```
---demoend

### Promise 用法

通过 then 方法在关闭后运行 callback。可以多次执行 then，以打开多种 notice

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

const success = () => {
  Notice.loading('正在执行...', 2.5)
    .then(() => Notice.success('加载完毕.', 2.5))
    .then(() => Notice.info('加载完毕', 2.5));
};

ReactDOM.render(<Button onClick={success}>打开</Button>, _react_runner_);
```
---demoend

## Method

提供的静态方法，使用方式和参数如下：

- `Notice.success(message, [duration], onClose)`
- `Notice.error(message, [duration], onClose)`
- `Notice.info(message, [duration], onClose)`
- `Notice.warning(message, [duration], onClose)`
- `Notice.warn(message, [duration], onClose)` 同 warning
- `Notice.loading(message, [duration], onClose)`


* `message`: 提示内容，string | element 内容，支持 React 元素
* `duration`: number 可选，持续时间，单位秒，为 0 时手动关闭， 默认 3 秒后自动关闭
* `onClose`: Function 可选，关闭时触发的回调函数


组件同时提供 promise 接口。

- `Notice[type](message, [duration]).then(afterClose)`
- `Notice[type](message, [duration], onClose).then(afterClose)`

其中 `Notice[type]` 是组件已经提供的静态方法。`then` 接口返回值是 Promise。

- `Notice.open(config)`

* `message`: 提示内容，string | element 内容，支持 React 元素
* `duration`: number 可选，持续时间，单位秒，为 0 时手动关闭， 默认 3 秒后自动关闭
* `onClose`: Function 可选，关闭时触发的回调函数
* `icon`: ReactNode，自定义图标

### 全局方法

还提供了全局配置和全局销毁方法：

- `Notice.config(options)`
- `Notice.destroy()`

#### Notice.config 全局配置

```js
Notice.config({
  top: 100,
  duration: 2,
  maxCount: 3,
});
```

| params  | type | default | description |
| --- | --- | --- | --- |
| duration | number | 3 | 默认自动关闭延时，单位秒 |
| getContainer | `() => HTMLElement` | `() => document.body` | 配置渲染节点的输出位置 |
| maxCount | number | - | 最大显示数, 超过限制时，最早的消息会被自动关闭 |
| top | number | 24 | 消息距离顶部的位置 |