import { Layout, Playground, Attributes } from 'lib/components'
import { Popover, Spacer, Link } from 'components'
import { useState } from 'react'

export const meta = {
  title: '气泡卡片 Popover',
  group: '数据展示',
}

## Popover / 气泡卡片

通过点击或鼠标移入触发的气泡风格弹出层。

<Playground
  desc="基础示例。"
  scope={{ Popover, Spacer, Link }}
  code={`
() => {
  const content = () => (
    <div style={{ padding: '0 10px' }}>
      <Link href="#">一个超链接</Link>
      <Spacer h={.5} />
      <Link color href="#">外部链接</Link>
    </div>
  )
  return (
    <Popover content={content}>
      菜单
    </Popover>
  )
}
`}
/>

<Playground
  title="预置子选项"
  desc="使用预置的 `Item` 组件完成弹出内容的布局。"
  scope={{ Popover, Spacer, Link }}
  code={`
() => {
  const content = () => (
    <>
      <Popover.Item title>
        <span>用户设置</span>
      </Popover.Item>
      <Popover.Item>
        <Link href="#">一个超链接</Link>
      </Popover.Item>
      <Popover.Item>
        <Link color href="#">前往修改用户配置</Link>
      </Popover.Item>
      <Popover.Item line />
      <Popover.Item>
        <span>命令行工具</span>
      </Popover.Item>
    </>
  )
  return (
    <Popover content={content}>
      菜单
    </Popover>
  )
}
`}
/>

<Playground
  title="手动关闭"
  desc="你可以控制何时手动地关闭弹出卡片。"
  scope={{ Popover, Spacer, Link, useState }}
  code={`
() => {
  const [visible, setVisible] = useState(false)
  const changeHandler = (next) => {
    setVisible(next)
  }
  const content = () => (
    <div style={{ padding: '0 10px' }}>
      <span onClick={() => setVisible(false)}>点击关闭</span>
      <Spacer h={.5} />
      <span>不关闭</span>
    </div>
  )
  return (
    <Popover content={content} visible={visible}
      onVisibleChange={changeHandler}>
      菜单
    </Popover>
  )
}
`}
/>

<Attributes edit="/pages/zh-cn/components/popover.mdx">
<Attributes.Title>Popover.Props</Attributes.Title>

| 属性                      | 描述                         | 类型                          | 推荐值      | 默认     |
| ------------------------- | ---------------------------- | ----------------------------- | ----------- | -------- |
| **content**               | 气泡卡片内容                 | `ReactNode` `() => ReactNode` | -           | -        |
| **visible**               | 手动控制气泡的显示与隐藏     | `boolean`                     | -           | `false`  |
| **initialVisible**        | 初始是否可见                 | `boolean`                     | -           | `false`  |
| **hideArrow**             | 隐藏箭头                     | `boolean`                     | -           | `false`  |
| **placement**             | 气泡卡片与目标的对齐方式     | [Placement](#placement)       | -           | `bottom` |
| **trigger**               | 触发气泡卡片的方式           | `'click' / 'hover'`           | -           | `click`  |
| **enterDelay**(ms)        | 在提示显示前的延迟           | `number`                      | -           | `100`    |
| **leaveDelay**(ms)        | 关闭提示前的延迟             | `number`                      | -           | `0`      |
| **offset**(px)            | 提示框与目标之间的偏移       | `number`                      | -           | `12`     |
| **portalClassName**       | 气泡卡片的类名               | `string`                      | -           | -        |
| **onVisibleChange**       | 当气泡卡片状态改变时触发     | `(visible: boolean) => void`  | -           | -        |
| **disableItemsAutoClose** | 当 Item 被点击时阻止气泡关闭 | `boolean`                     | -           | `false`  |
| ...                       | 原生属性                     | `HTMLAttributes`              | `'id', ...` | -        |

<Attributes.Title alias="Popover.Option">Popover.Item</Attributes.Title>

| 属性                 | 描述                         | 类型      | 推荐值 | 默认    |
| -------------------- | ---------------------------- | --------- | ------ | ------- |
| **line**             | 显示线条                     | `boolean` | -      | `false` |
| **title**            | 用标题的样式展示文字         | `boolean` | -      | `false` |
| **disableAutoClose** | 触发点击事件时也不要关闭气泡 | `boolean` | -      | `false` |

<Attributes.Title>Placement</Attributes.Title>

```ts
type Placement = 'top'
  | 'topStart',
  | 'topEnd',
  | 'left',
  | 'leftStart',
  | 'leftEnd',
  | 'bottom',
  | 'bottomStart',
  | 'bottomEnd',
  | 'right',
  | 'rightStart',
  | 'rightEnd',
```

</Attributes>

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