feat(popover): add popover component with scrollable content (#645)

Author: LuckyFBB

src/index.ts

@@ -32,6 +32,7 @@ export { default as MarkdownRender } from './markdownRender';
 export { default as Modal } from './modal';
 export { default as NotFound } from './notFound';
 export { default as Popconfirm } from './popConfirm';
+export { default as Popover } from './popover';
 export { default as ProgressBar } from './progressBar';
 export { default as ProgressLine } from './progressLine';
 export { default as Resize } from './resize';

src/popover/__tests__/index.test.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+
+import Popover from '..';
+
+describe('Popover', () => {
+    it('should render popover with default overlay className', async () => {
+        render(
+            <Popover title="Popover title" content="Popover content" visible>
+                <span>Hover me</span>
+            </Popover>
+        );
+
+        await waitFor(() => expect(screen.getByText('Popover content')).toBeInTheDocument());
+
+        expect(document.querySelector('.dtc-popover')).toBeInTheDocument();
+    });
+
+    it('should merge custom overlayClassName', async () => {
+        render(
+            <Popover
+                title="Popover title"
+                content="Popover content"
+                overlayClassName="custom-popover"
+                visible
+            >
+                <span>Hover me</span>
+            </Popover>
+        );
+
+        await waitFor(() => expect(document.querySelector('.dtc-popover')).toBeInTheDocument());
+
+        expect(document.querySelector('.dtc-popover')).toHaveClass('custom-popover');
+    });
+
+    it('should pass overlayInnerStyle to antd Popover', async () => {
+        render(
+            <Popover
+                title="Popover title"
+                content="Popover content"
+                overlayInnerStyle={{ color: 'red' }}
+                visible
+            >
+                <span>Hover me</span>
+            </Popover>
+        );
+
+        await waitFor(() =>
+            expect(document.querySelector('.ant-popover-inner')).toBeInTheDocument()
+        );
+
+        expect(document.querySelector('.ant-popover-inner')).toHaveStyle({
+            color: 'red',
+        });
+    });
+});

src/popover/demos/basic.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Button } from 'antd';
+import { Popover } from 'dt-react-component';
+
+export default function Basic() {
+    return (
+        <Popover title="标题" content="这是一段 Popover 内容">
+            <Button type="primary">Hover me</Button>
+        </Popover>
+    );
+}

src/popover/demos/customHeight.tsx

@@ -0,0 +1,20 @@
+import React, { CSSProperties } from 'react';
+import { Button } from 'antd';
+import { Popover } from 'dt-react-component';
+
+const content = Array.from({ length: 12 }, (_, index) => (
+    <div key={index}>这是第 {index + 1} 行自定义高度的 Popover 内容</div>
+));
+
+export default function CustomHeight() {
+    return (
+        <Popover
+            title="自定义高度"
+            content={<div>{content}</div>}
+            trigger="click"
+            overlayStyle={{ '--max-height': '160px' } as CSSProperties}
+        >
+            <Button>点击查看自定义高度 Popover</Button>
+        </Popover>
+    );
+}

src/popover/demos/maxWidth.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Button } from 'antd';
+import { Popover } from 'dt-react-component';
+
+export default function MaxWidth() {
+    return (
+        <Popover
+            title="最大宽度"
+            content="这是一段非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常长的 Popover 内容，用于展示浮层最大宽度为 400px 时的换行效果。"
+        >
+            <Button>最大宽度 Popover</Button>
+        </Popover>
+    );
+}

src/popover/demos/noTitle.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Button } from 'antd';
+import { Popover } from 'dt-react-component';
+
+export default function NoTitle() {
+    return (
+        <Popover content="这是一段没有标题的 Popover 内容">
+            <Button>无标题 Popover</Button>
+        </Popover>
+    );
+}

src/popover/demos/scroll.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Button } from 'antd';
+import { Popover } from 'dt-react-component';
+
+const content = Array.from({ length: 30 }, (_, index) => (
+    <div key={index}>这是第 {index + 1} 行较长的 Popover 内容</div>
+));
+
+export default function Scroll() {
+    return (
+        <Popover title="长内容" content={<div>{content}</div>} trigger="click">
+            <Button>点击查看长内容 Popover</Button>
+        </Popover>
+    );
+}

src/popover/index.md

@@ -0,0 +1,27 @@
+---
+title: Popover 气泡卡片
+group: 组件
+toc: content
+demo:
+    cols: 2
+---
+
+# Popover 气泡卡片
+
+## 何时使用
+
+用于展示更丰富的气泡内容。组件基于 antd Popover 封装，浮层内容最大高度为 400px，超过后可滚动查看。
+
+## 代码演示
+
+<code src="./demos/basic.tsx" title="基本使用" description="Popover 的基本使用。"></code>
+<code src="./demos/noTitle.tsx" title="无标题内容" description="仅展示内容的 Popover。"></code>
+<code src="./demos/scroll.tsx" title="长内容滚动" description="当 Popover 内容超过 400px 时，浮层内部滚动。"></code>
+<code src="./demos/customHeight.tsx" title="自定义高度" description="通过 CSS 变量自定义 Popover 浮层内容最大高度。"></code>
+<code src="./demos/maxWidth.tsx" title="最大宽度" description="Popover 浮层最大宽度为 400px，长内容自动换行。"></code>
+
+## API
+
+### Popover
+
+Popover 组件支持 antd Popover 组件的所有属性，详见 [Ant Design Popover API](https://ant.design/components/popover-cn/#API)。

src/popover/index.scss

@@ -0,0 +1,24 @@
+.dtc-popover {
+    min-width: 220px;
+    max-width: 400px;
+    .ant-popover-inner {
+        border-radius: 4px;
+    }
+    .ant-popover-title {
+        padding: 16px 16px 0;
+        border-bottom: 0;
+        font-weight: 500;
+        font-size: 14px;
+        color: #3D446E;
+    }
+    .ant-popover-inner-content {
+        padding: 16px;
+        max-height: var(--max-height, 400px);
+        overflow-y: auto;
+        font-size: 12px;
+        color: #8B8FA8;
+    }
+    .ant-popover-title + .ant-popover-inner-content {
+        padding-top: 4px;
+    }
+}

src/popover/index.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Popover as AntdPopover, PopoverProps as AntdPopoverProps } from 'antd';
+import classNames from 'classnames';
+
+import './index.scss';
+
+export type PopoverProps = AntdPopoverProps;
+
+const Popover = ({ overlayClassName, ...rest }: PopoverProps) => {
+    return <AntdPopover overlayClassName={classNames('dtc-popover', overlayClassName)} {...rest} />;
+};
+
+export default Popover;