Skip to content

Commit 91c2730

Browse files
author
chenyueban
committed
feat(Tooltip): Complete the component Tooltip
1 parent 9479180 commit 91c2730

13 files changed

Lines changed: 304 additions & 20 deletions

File tree

‎packages/fluent-ui-hooks/src/index.ts‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
export * from './useAction'
2-
export * from './useOnClickOutside'
2+
export * from './useClickOutside'
33
export * from './usePortal'
44
export * from './useReveal'
5-
export * from './useHover'
65
export * from './usePopper'
6+
export * from './useHover'
7+
export * from './useClick'
8+
export * from './useTouch'
9+
export * from './useFocus'

‎packages/fluent-ui-hooks/src/useClick.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import * as React from 'react'
2+
3+
export function useClick(
4+
statusHandler?: (status: boolean) => void
5+
): [
6+
boolean,
7+
{
8+
onMouseUp: () => void
9+
},
10+
React.Dispatch<React.SetStateAction<boolean>>
11+
] {
12+
const [isClicked, setClicked] = React.useState(false)
13+
14+
const bind = {
15+
onMouseUp: (): void => {
16+
statusHandler ? statusHandler(true) : setClicked(true)
17+
}
18+
}
19+
20+
return [isClicked, bind, setClicked]
21+
}

packages/fluent-ui-hooks/src/useOnClickOutside.ts renamed to packages/fluent-ui-hooks/src/useClickOutside.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useEffect, RefObject } from 'react'
22

3-
export function useOnClickOutside(
3+
export function useClickOutside(
44
ref: RefObject<HTMLDivElement>,
55
handler: (e?: MouseEvent | TouchEvent) => void
66
): void {

‎packages/fluent-ui-hooks/src/useFocus.ts‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import * as React from 'react'
2+
3+
export function useFocus(
4+
statusHandler?: (status: boolean) => void
5+
): [
6+
boolean,
7+
{
8+
onFocus: () => void
9+
onBlur: () => void
10+
}
11+
] {
12+
const [isFocused, setFocused] = React.useState(false)
13+
14+
const bind = {
15+
onFocus: (): void => {
16+
statusHandler ? statusHandler(true) : setFocused(true)
17+
},
18+
onBlur: (): void => {
19+
statusHandler ? statusHandler(false) : setFocused(false)
20+
}
21+
}
22+
23+
return [isFocused, bind]
24+
}

‎packages/fluent-ui-hooks/src/useHover.ts‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import * as React from 'react'
22

3-
export function useHover(): [
3+
export function useHover(
4+
statusHandler?: (status: boolean) => void
5+
): [
46
boolean,
57
{
68
onMouseEnter: () => void
@@ -11,10 +13,10 @@ export function useHover(): [
1113

1214
const bind = {
1315
onMouseEnter: (): void => {
14-
setHovered(true)
16+
statusHandler ? statusHandler(true) : setHovered(true)
1517
},
1618
onMouseLeave: (): void => {
17-
setHovered(false)
19+
statusHandler ? statusHandler(false) : setHovered(false)
1820
}
1921
}
2022

‎packages/fluent-ui-hooks/src/usePopper.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
import * as React from 'react'
22
import PopperJS from 'popper.js'
33

4+
// eslint-disable-next-line
5+
export interface usePropperOptions extends PopperJS.PopperOptions {}
6+
47
export function usePopper({
58
placement = 'bottom',
69
positionFixed = false,
710
eventsEnabled = true,
811
...otherOptions
9-
}: PopperJS.PopperOptions): [React.MutableRefObject<null>, React.MutableRefObject<null>] {
12+
}: usePropperOptions): [React.MutableRefObject<null>, React.MutableRefObject<null>] {
1013
const popperInstance = React.useRef<PopperJS>(null)
1114
const referenceRef = React.useRef(null)
1215
const popperRef = React.useRef(null)

‎packages/fluent-ui-hooks/src/useTouch.ts‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import * as React from 'react'
2+
3+
export function useTouch(
4+
statusHandler?: (status: boolean) => void
5+
): [
6+
boolean,
7+
{
8+
onTouchStart: () => void
9+
onTouchEnd: () => void
10+
}
11+
] {
12+
const [isTouched, setTouched] = React.useState(false)
13+
14+
const bind = {
15+
onTouchStart: (): void => {
16+
statusHandler ? statusHandler(true) : setTouched(true)
17+
},
18+
onTouchEnd: (): void => {
19+
statusHandler ? statusHandler(false) : setTouched(false)
20+
}
21+
}
22+
23+
return [isTouched, bind]
24+
}

‎packages/fluent-ui.com/src/components/template.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,8 @@ import {
1818
Badge as BadgeIcon,
1919
NUIFPStartSlideHand as NUIFPStartSlideHandIcon,
2020
NUIFPRollLeftHand as NUIFPRollLeftHandIcon,
21-
BackgroundToggle as BackgroundToggleIcon
21+
BackgroundToggle as BackgroundToggleIcon,
22+
ToolTip as TooltipIcon
2223
} from '@fluent-ui/icons'
2324

2425
import Layout from './layout'
@@ -110,6 +111,10 @@ const iconMap = [
110111
{
111112
title: 'Transition',
112113
icon: <BackgroundToggleIcon />
114+
},
115+
{
116+
title: 'Tooltip',
117+
icon: <TooltipIcon />
113118
}
114119
]
115120

‎packages/fluent-ui.com/src/docs/components/Tooltip/README.md‎

Lines changed: 130 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,137 @@ components: Tooltip
55

66
# Tooltip
77

8+
## Simple Tooltips
9+
10+
```jsx
11+
<>
12+
<Tooltip title="Add">
13+
<IconButton>
14+
<Icon.Add />
15+
</IconButton>
16+
</Tooltip>
17+
<Tooltip title="Add">
18+
<IconButton variant="primary">
19+
<Icon.Add />
20+
</IconButton>
21+
</Tooltip>
22+
</>
23+
```
24+
25+
## Positioned Tooltips
26+
27+
```jsx
28+
<Box>
29+
<Box width={600} margin="0 auto">
30+
<Box display="flex" justifyContent="center">
31+
<Tooltip title="Add" placement="top-start">
32+
<Button>top-start</Button>
33+
</Tooltip>
34+
<Box margin="0 5px" />
35+
<Tooltip title="Add" placement="top">
36+
<Button>top</Button>
37+
</Tooltip>
38+
<Box margin="0 5px" />
39+
<Tooltip title="Add" placement="top-end">
40+
<Button>top-end</Button>
41+
</Tooltip>
42+
</Box>
43+
<Box display="flex" justifyContent="space-between">
44+
<Box display="flex" flexDirection="column">
45+
<Tooltip title="Add" placement="left-start">
46+
<Button>left-start</Button>
47+
</Tooltip>
48+
<br />
49+
<Tooltip title="Add" placement="left">
50+
<Button>left</Button>
51+
</Tooltip>
52+
<br />
53+
<Tooltip title="Add" placement="left-end">
54+
<Button>left-end</Button>
55+
</Tooltip>
56+
</Box>
57+
<Box display="flex" flexDirection="column">
58+
<Tooltip title="Add" placement="right-start">
59+
<Button>right-start</Button>
60+
</Tooltip>
61+
<br />
62+
<Tooltip title="Add" placement="right">
63+
<Button>right</Button>
64+
</Tooltip>
65+
<br />
66+
<Tooltip title="Add" placement="right-end">
67+
<Button>right-end</Button>
68+
</Tooltip>
69+
</Box>
70+
</Box>
71+
<Box display="flex" justifyContent="center">
72+
<Tooltip title="Add" placement="bottom-start">
73+
<Button>bottom-start</Button>
74+
</Tooltip>
75+
<Box margin="0 5px" />
76+
<Tooltip title="Add" placement="bottom">
77+
<Button>bottom</Button>
78+
</Tooltip>
79+
<Box margin="0 5px" />
80+
<Tooltip title="Add" placement="bottom-end">
81+
<Button>bottom-end</Button>
82+
</Tooltip>
83+
</Box>
84+
</Box>
85+
</Box>
86+
```
87+
88+
## Custom
89+
90+
```jsx
91+
<Tooltip title={
92+
<Box
93+
width={50}
94+
backgroundColor="primary.default"
95+
color="white.default"
96+
boxShadow="1"
97+
textAlign="center"
98+
>
99+
hello
100+
</Box>
101+
}>
102+
<Button>HTML</Button>
103+
</Tooltip>
104+
```
105+
106+
## Controlled
107+
8108
```jsx
9109
() => {
10-
110+
const [visible, setVisible] = React.useState(false)
111+
function handleVisible(v) {
112+
setVisible(v)
113+
}
114+
return (
115+
<Tooltip title="Add" visible={visible} onChange={handleVisible}>
116+
<IconButton>
117+
<Icon.Add />
118+
</IconButton>
119+
</Tooltip>
120+
)
11121
}
12122
```
123+
124+
## Triggers
125+
126+
```jsx
127+
<>
128+
<Tooltip title="Hovered!" trigger="hover">
129+
<Button>Hover</Button>
130+
</Tooltip>
131+
<Tooltip title="Clicked!" trigger="click">
132+
<Button>Click</Button>
133+
</Tooltip>
134+
<Tooltip title="Touched!" trigger="touch">
135+
<Button>Touch</Button>
136+
</Tooltip>
137+
<Tooltip title="Focused!" trigger="focus">
138+
<Button>Focus</Button>
139+
</Tooltip>
140+
</>
141+
```

‎packages/fluent-ui.com/src/docs/components/Tooltip/api.md‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,4 +16,11 @@ import { Tooltip } from '@fluent-ui/core'
1616

1717
| Name | Type | Default | Description |
1818
| --- | --- | --- | --- |
19-
| children | React.ReactNode | | Elements that require Tooltip effects. |
19+
| children&nbsp;* | React.ReactElement | | Tooltip reference element. |
20+
| title&nbsp;* | React.ReactElement | | Tooltip title. |
21+
| visible | boolean | | If `true`, the tooltip is shown. |
22+
| onChange | (visible: boolean) => void | | Callback fired when the tooltip requests to be change. |
23+
| trigger | 'hover' &or; 'click' &or; 'touch' &or; 'focus' | 'hover' | Tooltip trigger mode. |
24+
| placement | 'auto-start' &or; 'auto' &or; 'auto-end' &or; 'top-start' &or; 'top' &or; 'top-end' &or; 'right-start' &or; 'right' &or; 'right-end' &or; 'bottom-end' &or; 'bottom' &or; 'bottom-start' &or; 'left-end' &or; 'left' &or; 'left-start' | 'bottom' | The position of the tooltip relative to the target. |
25+
26+
`Tooltip` based on [`Popper.js`](https://popper.js.org), so it also supports more [Popper.js features](https://popper.js.org/popper-documentation.html#Popper.Defaults)

0 commit comments

Comments
 (0)