Skip to content
This repository was archived by the owner on Nov 9, 2024. It is now read-only.

Commit f97f121

Browse files
atomiksatomiks
committed
Simplify demo
1 parent ff33f3a commit f97f121

File tree

1 file changed

+80
-165
lines changed

1 file changed

+80
-165
lines changed

‎demo/index.js‎

Lines changed: 80 additions & 165 deletions
Original file line numberDiff line numberDiff line change
@@ -1,190 +1,105 @@
1-
import React from 'react'
1+
import React, { useState, useEffect } from 'react'
22
import ReactDOM from 'react-dom'
33
import Tippy, { TippyGroup } from '../src'
44
import './index.css'
55

6-
Tippy.defaultProps = {
7-
content: 'Tooltip',
8-
animateFill: false,
9-
hideOnClick: false,
10-
}
6+
function ContentString() {
7+
const [count, setCount] = useState(0)
118

12-
class FetchExample extends React.Component {
13-
state = {
14-
image: null,
15-
isFetching: false,
16-
canFetch: true,
17-
isVisible: false,
18-
}
9+
useEffect(() => {
10+
setInterval(() => {
11+
setCount(count => count + 1)
12+
}, 1000)
13+
}, [])
1914

20-
static loadingContent = 'Loading new image...'
21-
22-
fetchRandomImage = () => {
23-
this.setState({ isVisible: true })
24-
25-
if (this.state.isFetching || !this.state.canFetch) return
26-
27-
this.setState({
28-
isFetching: true,
29-
canFetch: false,
30-
})
31-
32-
fetch('https://unsplash.it/200/?random')
33-
.then(response => response.blob())
34-
.then(blob => {
35-
if (this.state.isVisible) {
36-
this.setState({
37-
image: URL.createObjectURL(blob),
38-
})
39-
}
40-
this.setState({
41-
isFetching: false,
42-
})
43-
})
44-
}
15+
return (
16+
<Tippy content={count}>
17+
<button>ContentString</button>
18+
</Tippy>
19+
)
20+
}
4521

46-
onHidden = () => {
47-
this.setState({ image: null, canFetch: true })
48-
}
22+
function ContentElement() {
23+
const colors = ['red', 'orange', 'yellow', 'green', 'cyan', 'purple', 'pink']
24+
const [index, setIndex] = useState(0)
4925

50-
onHide = () => {
51-
this.setState({ isVisible: false })
26+
function renderNextColor() {
27+
setIndex(index === colors.length - 1 ? 0 : index + 1)
5228
}
5329

54-
render() {
55-
return (
56-
<Tippy
57-
onShow={this.fetchRandomImage}
58-
onHidden={this.onHidden}
59-
onHide={this.onHide}
60-
content={
61-
<React.Fragment>
62-
{this.state.image ? (
63-
<img
64-
width="200"
65-
height="200"
66-
src={this.state.image}
67-
alt="image"
68-
/>
69-
) : (
70-
FetchExample.loadingContent
71-
)}
72-
</React.Fragment>
73-
}
74-
>
75-
<button onClick={this.toggleArrow}>Async update</button>
76-
</Tippy>
77-
)
78-
}
30+
return (
31+
<Tippy
32+
content={
33+
<>
34+
<button onClick={renderNextColor}>Next color</button>
35+
<span style={{ color: colors[index] }}>Hello</span>
36+
</>
37+
}
38+
interactive={true}
39+
>
40+
<button>ContentElement</button>
41+
</Tippy>
42+
)
7943
}
8044

81-
const COLORS = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'purple']
45+
function EnabledProp() {
46+
const [enabled, setEnabled] = useState(true)
8247

83-
class InputExample extends React.Component {
84-
state = {
85-
value: '',
86-
}
48+
return (
49+
<Tippy content="Tooltip" enabled={enabled}>
50+
<button onClick={() => setEnabled(enabled => !enabled)}>
51+
enabled: {String(enabled)}
52+
</button>
53+
</Tippy>
54+
)
55+
}
8756

88-
onChange = e => {
89-
this.setState({ value: e.target.value })
90-
}
57+
function VisibleProp() {
58+
const [visible, setVisible] = useState(false)
9159

92-
render() {
93-
return (
94-
<Tippy
95-
content={
96-
<form>
97-
<span style={{ color: COLORS[this.state.value.length] }}>
98-
Hello
99-
</span>
100-
<input type="text" onChange={this.onChange} />
101-
</form>
102-
}
103-
interactive={true}
104-
>
105-
<button>Hover me</button>
106-
</Tippy>
107-
)
108-
}
60+
return (
61+
<Tippy content="Tooltip" visible={visible} hideOnClick={false}>
62+
<button onClick={() => setVisible(visible => !visible)}>
63+
visible: {String(visible)}
64+
</button>
65+
</Tippy>
66+
)
10967
}
11068

111-
class ComponentChild extends React.Component {
112-
render() {
113-
return <button>Component Child</button>
114-
}
115-
}
69+
function Group() {
70+
const [count, setCount] = useState(3)
11671

117-
class App extends React.Component {
118-
state = {
119-
arrow: false,
120-
customClass: 'hello',
121-
content: 'hello',
72+
let children = []
73+
for (let i = 0; i < count; i++) {
74+
children.push(
75+
<Tippy key={i} content="Tooltip">
76+
<button>{i}</button>
77+
</Tippy>,
78+
)
12279
}
12380

124-
toggleArrow = () => {
125-
this.setState(state => ({
126-
arrow: !state.arrow,
127-
}))
128-
}
81+
useEffect(() => {
82+
setInterval(() => {
83+
setCount(count => (count === 5 ? 1 : count + 1))
84+
}, 5000)
85+
}, [])
12986

130-
componentDidMount() {
131-
setTimeout(() => {
132-
this.setState({ customClass: 'bye', content: 'testing content update' })
133-
}, 2000)
134-
}
87+
return <TippyGroup delay={500}>{children}</TippyGroup>
88+
}
13589

136-
render() {
137-
return (
138-
<main className="container">
139-
<h1>Content</h1>
140-
<Tippy content="Hello">
141-
<button>String content</button>
142-
</Tippy>
143-
<Tippy content={<strong>Tooltip</strong>}>
144-
<button>JSX content</button>
145-
</Tippy>
146-
<Tippy
147-
onCreate={tip => (this.tippyArrowInstance = tip)}
148-
arrow={this.state.arrow}
149-
>
150-
<button onClick={this.toggleArrow}>Toggle arrow</button>
151-
</Tippy>
152-
<FetchExample />
153-
<InputExample />
154-
<Tippy>
155-
<ComponentChild />
156-
</Tippy>
157-
158-
<h1>Group</h1>
159-
<TippyGroup delay={1000}>
160-
<Tippy>
161-
<button>Text</button>
162-
</Tippy>
163-
<Tippy>
164-
<button>Text</button>
165-
</Tippy>
166-
</TippyGroup>
167-
168-
<h1>Multiple</h1>
169-
<Tippy placement="bottom" multiple>
170-
<Tippy placement="left" multiple>
171-
<Tippy>
172-
<button>Text</button>
173-
</Tippy>
174-
</Tippy>
175-
</Tippy>
176-
177-
<h1>Other</h1>
178-
<Tippy
179-
content={this.state.content}
180-
trigger="click"
181-
className={this.state.customClass}
182-
>
183-
<button>Custom class</button>
184-
</Tippy>
185-
</main>
186-
)
187-
}
90+
function App() {
91+
return (
92+
<>
93+
<h2>Content</h2>
94+
<ContentString />
95+
<ContentElement />
96+
<h2>Special</h2>
97+
<EnabledProp />
98+
<VisibleProp />
99+
<h2>Group dynamic children</h2>
100+
<Group />
101+
</>
102+
)
188103
}
189104

190105
ReactDOM.render(<App />, document.getElementById('root'))

0 commit comments

Comments
 (0)