Skip to content

Commit ad6daa2

Browse files
matto49matto49
authored
feat:add popover component (#20)
* feat:add popover component * fix:fix review bugs
1 parent 69eb3c0 commit ad6daa2

File tree

16 files changed

+540
-75
lines changed

16 files changed

+540
-75
lines changed

‎.prettierrc‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"semi": true,
3+
"singleQuote": true,
4+
"tabWidth": 2,
5+
"trailingComma": "all",
6+
"printWidth": 100
7+
}

‎packages/demo/src/components/Popover/demo/Base.tsx‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import { Popover } from 'pivot-design';
2+
import React from 'react';
3+
4+
import './index.scss';
5+
import { prefix } from '../../constant';
6+
7+
const App: React.FC = () => {
8+
return (
9+
<>
10+
<div className={`${prefix}-center`}>
11+
<Popover placement="top-left" content={<div>prompt text</div>}>
12+
<div>TL</div>
13+
</Popover>
14+
<Popover placement="top" content={<div>prompt text</div>}>
15+
<div>Top</div>
16+
</Popover>
17+
<Popover placement="top-right" content={<div>prompt text</div>}>
18+
<div>TR</div>
19+
</Popover>
20+
</div>
21+
<div className={`${prefix}-space`}>
22+
<Popover placement="left-top" content={<div>prompt text</div>}>
23+
<div>LT</div>
24+
</Popover>
25+
<Popover placement="right-top" content={<div>prompt text</div>}>
26+
<div>RT</div>
27+
</Popover>
28+
</div>
29+
<div className={`${prefix}-space`}>
30+
<Popover placement="left" content={<div>prompt text</div>}>
31+
<div>Left</div>
32+
</Popover>
33+
<Popover placement="right" content={<div>prompt text</div>}>
34+
<div>Right</div>
35+
</Popover>
36+
</div>
37+
<div className={`${prefix}-space`}>
38+
<Popover placement="left-bottom" content={<div>prompt text</div>}>
39+
<div>LB</div>
40+
</Popover>
41+
<Popover placement="right-bottom" content={<div>prompt text</div>}>
42+
<div>RB</div>
43+
</Popover>
44+
</div>
45+
<div className={`${prefix}-center`}>
46+
<Popover placement="bottom-left" content={<div>prompt text</div>}>
47+
<div>BL</div>
48+
</Popover>
49+
50+
<Popover placement="bottom" content={<div>prompt text</div>}>
51+
<div>Bottom</div>
52+
</Popover>
53+
<Popover placement="bottom-right" content={<div>prompt text</div>}>
54+
<div>BR</div>
55+
</Popover>
56+
</div>
57+
</>
58+
);
59+
};
60+
export default App;

‎packages/demo/src/components/Popover/demo/Trigger.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { Popover } from 'pivot-design';
2+
import React from 'react';
3+
import './index.scss';
4+
5+
const App: React.FC = () => {
6+
return (
7+
<>
8+
<div className="center">
9+
<Popover placement="top" triggerType="hover" content={<div>prompt text</div>}>
10+
<div className="tl">hover</div>
11+
</Popover>
12+
<Popover placement="top" triggerType="click" content={<div>prompt text</div>}>
13+
<div className="tl">click</div>
14+
</Popover>
15+
</div>
16+
</>
17+
);
18+
};
19+
export default App;

‎packages/demo/src/components/Popover/demo/index.scss‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
@import '../../common.scss';
2+
3+
.#{$prefix}-center {
4+
display: flex;
5+
justify-content: center;
6+
width: 100%;
7+
div {
8+
margin: 20px;
9+
padding: 3px 15px;
10+
border: 1px solid black;
11+
}
12+
}
13+
14+
.#{$prefix}-space {
15+
display: flex;
16+
justify-content: space-between;
17+
width: 100%;
18+
div {
19+
margin: 20px;
20+
padding: 3px 15px;
21+
border: 1px solid black;
22+
text-align: center;
23+
}
24+
}

‎packages/demo/src/components/Popover/index.mdx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# Popover
2+
3+
<div className="title">基本用法</div>
4+
<CodeBlock line={'5-7'}>
5+
<Base/>
6+
</CodeBlock>
7+
<div className="title">设置触发popover的条件</div>
8+
<CodeBlock line={'5-7'}>
9+
<Trigger/>
10+
</CodeBlock>

‎packages/demo/src/components/common.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
$prefix: 'pivot-demo';

‎packages/demo/src/components/constant.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export const prefix = 'pivot-demo';

‎packages/demo/src/pages/component/index.tsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
11
import { useState } from 'react';
2-
import { Button, Icon, Input, Skeleton, Card } from 'pivot-design';
2+
import { Button, Icon, Input, Skeleton, Card, Popover } from 'pivot-design';
33
// import router from '@/routers';
44
import ButtonMdx from '../../components/Button/index.mdx';
55
import IconMdx from '../../components/Icon/index.mdx';
66
import InputMdx from '../../components/Input/index.mdx';
77
import CardMdx from '../../components/Card/index.mdx';
88
import SkeletonMdx from '../../components/Skeleton/index.mdx';
9+
import PopoverMdx from '@/components/Popover/index.mdx';
10+
911
import Draggable from '@/examples/Draggable/Draggable';
1012
import CodeBlock from '@/components/_CodeBlock/codeBlock';
13+
1114
import './index.scss';
1215

1316
function Index() {
@@ -33,6 +36,9 @@ function Index() {
3336
<div className={`demo-item ${select === 'Input' ? 'active' : ''}`} onClick={() => setSelect('Input')}>
3437
输入框
3538
</div>
39+
<div className={`demo-item ${select === 'Popover' ? 'active' : ''}`} onClick={() => setSelect('Popover')}>
40+
气泡
41+
</div>
3642
</div>
3743
);
3844
};
@@ -45,6 +51,7 @@ function Index() {
4551
{select === 'Icon' ? <IconMdx components={{ Icon, CodeBlock }} /> : null}
4652
{select === 'Input' ? <InputMdx components={{ Input, CodeBlock }} /> : null}
4753
{select === 'Card' ? <CardMdx components={{ Card, CodeBlock }} /> : null}
54+
{select === 'Popover' ? <PopoverMdx components={{ Popover, CodeBlock }} /> : null}
4855
{select === 'Draggable' ? <Draggable /> : null}
4956
{select === 'Skeleton' ? <SkeletonMdx components={{ Skeleton, CodeBlock }} /> : null}
5057
</div>

‎packages/design-props/components/popover.ts‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import React from 'react';
2+
import { PivotDesignProps } from '.';
3+
4+
export type PlaceType =
5+
| 'top'
6+
| 'bottom'
7+
| 'left'
8+
| 'right'
9+
| 'top-left'
10+
| 'top-right'
11+
| 'bottom-left'
12+
| 'bottom-right'
13+
| 'left-top'
14+
| 'left-bottom'
15+
| 'right-top'
16+
| 'right-bottom';
17+
18+
export interface PopoverProps extends PivotDesignProps {
19+
/**
20+
* @version 1.0.0
21+
* @description 触发popover的内容
22+
* @default undefined
23+
*/
24+
children: React.ReactElement;
25+
26+
/**
27+
* @version 1.0.0
28+
* @description popover的内容
29+
* @default undefined
30+
*/
31+
content?: string | React.ReactNode;
32+
33+
/**
34+
* @version 1.0.0
35+
* @description 设置popover的位置
36+
* @default undefined
37+
*/
38+
placement?: PlaceType;
39+
40+
/**
41+
* @version 1.0.0
42+
* @description 为popover添加类名
43+
* @default undefined
44+
*/
45+
popoverClass?: string;
46+
47+
/**
48+
* @version 1.0.0
49+
* @description popover是否可用
50+
* @default false
51+
*/
52+
disabled?: boolean;
53+
54+
/**
55+
* @version 1.0.0
56+
* @description 是否显示箭头
57+
* @default true
58+
*/
59+
arrowShow?: boolean;
60+
61+
/**
62+
* @version 1.0.0
63+
* @description 触发popover的方式
64+
* @default 'hover'
65+
*/
66+
triggerType?: 'hover' | 'click';
67+
}

‎packages/design-props/index.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
export * from './components/button';
2-
export type { DraggableItemProps } from './components/draggable';
3-
export type { IconProps } from './components/icon';
2+
export * from './components/draggable';
3+
export * from './components/icon';
44
export * from './components/input';
5-
export { CardProps } from './components/card';
6-
export { DraggableListProps, DraggableItemProps } from './components/draggableList';
7-
export { SkeletonProps } from './components/skeleton';
5+
export * from './components/card';
6+
export * from './components/skeleton';
7+
export * from './components/popover';

0 commit comments

Comments
 (0)