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 y={.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 y={.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`  | -                                | -        |
| ...                 | 原生属性                 | `HTMLAttributes`              | `'id', 'name', 'className', ...` | -        |

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

| 属性      | 描述                 | 类型      | 推荐值 | 默认    |
| --------- | -------------------- | --------- | ------ | ------- |
| **line**  | 显示线条             | `boolean` | -      | `false` |
| **title** | 用标题的样式展示文字 | `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>
