import { Layout, Playground, Attributes } from 'lib/components'
import { useToasts, Button, Spacer, Link } from 'components'

export const meta = {
  title: '通知 useToast',
  group: '组件增强',
  index: 12,
}

## useToast / 通知

显示重要的全局通知信息。

<Playground
  desc="基础示例。"
  scope={{ Button, useToasts }}
  code={`
() => {
  const { setToast } = useToasts()
  const click = () => setToast({ text: '你正在浏览文档站点。' })
  return <Button scale={2/3} auto onClick={click}>显示通知</Button>
}
`}
/>

<Playground
  title="多行"
  desc="显示多行或过长的文本。"
  scope={{ Button, useToasts }}
  code={`
() => {
  const { setToast } = useToasts()
  const click = () => setToast({ text: 'CSS是一门基于规则的语言 —— 你能定义用于你的网页中特定元素样式的一组规则. 比如“我希望页面中的主标题是红色的大字”' })
  return <Button scale={2/3} auto onClick={click}>显示通知</Button>
}
`}
/>

<Playground
  title="动作"
  desc="在通知中附加一个按钮。"
  scope={{ Button, useToasts }}
  code={`
() => {
  const { setToast } = useToasts()
  const action = {
    name: '点击我',
    handler: () => alert('由 Toast / 通知组件触发。')
  }
  const click = () => setToast({
    text: '我正在浏览文档站点。',
    actions: [action],
  })
  return <Button scale={2/3} auto onClick={click} type="secondary">显示通知</Button>
}
`}
/>

<Playground
  title="取消"
  desc="使用 `passive` (消极地) 改变按钮的状态与样式。"
  scope={{ Button, useToasts }}
  code={`
() => {
  const { setToast } = useToasts()
  const action = {
    name: '取消',
    passive: true,
    handler: (event, cancel) => cancel()
  }
  const click = () => setToast({
    text: '我正在浏览文档站点。',
    actions: [action],
  })
  return <Button scale={2/3} auto onClick={click}>显示通知</Button>
}
`}
/>

<Playground
  title="自定义模板"
  desc="以 `ReactNode` 代替字符串展示更丰富的信息。"
  scope={{ Button, useToasts, Link }}
  code={`
() => {
  const { setToast } = useToasts()
  const click = () => setToast({
    text: <p>点击此<Link target="_blank" color block href="https://github.com/geist-org/geist-ui">链接</Link>了解更多信息</p>,
    delay: 4000,
  })
  return <Button scale={2/3} auto onClick={click}>显示通知</Button>
}
`}
/>

<Playground
  title="类型"
  scope={{ Button, useToasts, Spacer }}
  code={`
() => {
  const { setToast } = useToasts()
  const click = type => setToast({
    text: '我正在浏览文档站点。',
    type,
  })
  return (
    <>
    <Button scale={2/3} auto onClick={() => click('success')} type="success">显示成功状态</Button>
    <Spacer inline x={.5} />
    <Button scale={2/3} auto onClick={() => click('warning')} type="warning">显示警告状态</Button>
    </>
  )
}
`}
/>

<Attributes edit="/pages/zh-cn/hooks/use-toast.mdx">
<Attributes.Title>useToasts</Attributes.Title>

```ts
const {
  // 当前 DOM 中所有可用实例
  toasts: Array<Toast>

  // 创建一个立即显示的通知
  setToast: (toast: ToastInput) => void

  // 立刻隐藏所有的通知
  removeAll: () => void

  // 按 ID 查询指定的实例
  findToastOneByID: (ident: string) => Toast | undefined

  // 按 ID 移除一个指定通知
  removeToastOneByID: (ident: string) => void
} = useToasts(layout: ToastLayout)
```

<Attributes.Title>ToastLayout</Attributes.Title>

| 参数          | 描述           | 类型                              | 默认值        |
| ------------- | -------------- | --------------------------------- | ------------- |
| **padding**   | 通用 CSS 属性  | `string`                          | -             |
| **margin**    | 通用 CSS 属性  | `string`                          | -             |
| **width**     | 通用 CSS 属性  | `string`                          | -             |
| **maxWidth**  | 通用 CSS 属性  | `string`                          | `90vw`        |
| **maxHeight** | 通用 CSS 属性  | `string`                          | `75px`        |
| **placement** | 组件弹出的位置 | [ToastPlacement](#toastplacement) | `bottomRight` |

<Attributes.Title>ToastInput</Attributes.Title>

| 参数        | 描述                    | 类型                        | 默认值    |
| ----------- | ----------------------- | --------------------------- | --------- |
| **id**      | 唯一识别 ID，可自动生成 | `string`                    | -         |
| **text**    | 组件内显示的信息        | `string`, `ReactNode`       | -         |
| **type**    | 组件的样式类型          | [ToastTypes](#toasttypes)   | `default` |
| **delay**   | 自动关闭前等待的时间    | `number`                    | `2000`    |
| **actions** | 指定一个默认的动作      | [ToastAction](#toastaction) | -         |

<Attributes.Title>ToastPlacement</Attributes.Title>

```ts
type ToastPlacement = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'
```

<Attributes.Title>ToastAction</Attributes.Title>

```ts
interface ToastAction {
  name: string
  handler: (event: React.MouseEventHandler<HTMLButtonElement>, cancel: Function) => void
  passive?: boolean
}
```

<Attributes.Title>ToastTypes</Attributes.Title>

```ts
type ToastTypes = 'default' \| 'secondary' | 'success' | 'warning' | 'error'
```

</Attributes>

export default ({ children }) => <Layout meta={meta}>{children}</Layout>
