-
-
Notifications
You must be signed in to change notification settings - Fork 1.2k
/
index.js
95 lines (92 loc) · 3.46 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import { Spring, animated, config as defaultConfig } from 'react-spring'
import { Accordion } from './Accordion'
/** A component that handles animating the height of an expandable element. */
class Expandable extends Component {
render() {
const { children, className, config, expanded, ...rest } = this.props
return (
<Spring
force
native
from={{ height: 0 }}
to={{ height: expanded ? 'auto' : 0 }}
config={{ ...(config || defaultConfig.default), precision: 1 }}>
{style => (
<animated.div style={{ overflow: 'hidden', ...style }} {...rest}>
{children}
</animated.div>
)}
</Spring>
)
}
}
function App() {
return (
<Accordion>
<Accordion.Item id="1">
{({ contentProps, titleProps }) => (
<React.Fragment>
<h1 style={{ margin: '0 0 16px 0' }} {...titleProps}>
Item 1
</h1>
<Expandable {...contentProps}>
<Accordion style={{ backgroundColor: '#3fcbb994' }}>
<Accordion.Item id="1">
{({ contentProps, titleProps }) => (
<React.Fragment>
<h1 style={{ margin: '0 0 16px 0' }} {...titleProps}>
SubItem 1
</h1>
<Expandable {...contentProps}>
Etsy stumptown aesthetic heirloom pabst deep v.
Wayfarers occupy knausgaard migas drinking vinegar.
8-bit gluten-free photo booth fixie small batch,
dreamcatcher pug forage banh mi ennui af retro slow-carb
kinfolk. Kombucha cliche kogi celiac, chicharrones PBR&B
freegan.
</Expandable>
</React.Fragment>
)}
</Accordion.Item>
</Accordion>
</Expandable>
</React.Fragment>
)}
</Accordion.Item>
<Accordion.Item id="2">
{({ contentProps, titleProps }) => (
<React.Fragment>
<h1 style={{ margin: '0 0 16px 0' }} {...titleProps}>
Item 1
</h1>
<Expandable {...contentProps}>
<Accordion style={{ backgroundColor: '#3fcbb994' }}>
<Accordion.Item id="1">
{({ contentProps, titleProps }) => (
<React.Fragment>
<h1 style={{ margin: '0 0 16px 0' }} {...titleProps}>
SubItem 1
</h1>
<Expandable {...contentProps}>
Etsy stumptown aesthetic heirloom pabst deep v.
Wayfarers occupy knausgaard migas drinking vinegar.
8-bit gluten-free photo booth fixie small batch,
dreamcatcher pug forage banh mi ennui af retro slow-carb
kinfolk. Kombucha cliche kogi celiac, chicharrones PBR&B
freegan.
</Expandable>
</React.Fragment>
)}
</Accordion.Item>
</Accordion>
</Expandable>
</React.Fragment>
)}
</Accordion.Item>
</Accordion>
)
}
const rootElement = document.getElementById('root')
ReactDOM.render(<App />, rootElement)