This repository has been archived by the owner on May 13, 2024. It is now read-only.
/
index.tsx
81 lines (70 loc) · 2.27 KB
/
index.tsx
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
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
* You can obtain one at http://mozilla.org/MPL/2.0/. */
import * as React from 'react'
import Separator from '../separator'
import {
StyledContentToggleArrow,
StyledContentToggleArrowControl,
StyledContentToggleArrowSummary,
StyledContentToggleArrowContent
} from './style'
export interface ContentToggleArrowProps {
id?: string
summary: string
open?: boolean
defaultOpen?: boolean
withSeparator?: boolean
children?: React.ReactNode
onClick?: (e: any) => void
}
export interface ContentToggleArrowState {
open?: boolean
}
class ContentToggleArrow extends React.PureComponent<ContentToggleArrowProps, ContentToggleArrowState> {
constructor (props: ContentToggleArrowProps) {
super(props)
// defaultOpen is only valid when there's no user activity
// which means open is undefined
this.state = { open: props.open !== undefined ? props.open : props.defaultOpen }
this.handleClick = this.handleClick.bind(this)
}
componentWillReceiveProps (nextProps: ContentToggleArrowProps) {
if ('open' in nextProps) {
this.setState({ open: nextProps.open })
}
}
handleClick (e: any) {
this.setState((prevState: ContentToggleArrowState) => ({ open: !prevState.open }))
this.props.onClick!({
target: {
open: this.state.open,
id: e.target.id
}
})
}
render () {
const { id, summary, withSeparator, children } = this.props
const { open } = this.state
return (
<StyledContentToggleArrow id={id} open={open} withSeparator={withSeparator}>
<StyledContentToggleArrowControl
id={`${id}Control`}
open={open}
onClick={this.handleClick}
>
<StyledContentToggleArrowSummary>{summary}</StyledContentToggleArrowSummary>
</StyledContentToggleArrowControl>
{withSeparator && <Separator />}
<StyledContentToggleArrowContent
open={open}
withSeparator={withSeparator}
>
{children}
</StyledContentToggleArrowContent>
{open && withSeparator && <Separator />}
</StyledContentToggleArrow>
)
}
}
export default ContentToggleArrow