2019-07-22 14:48:06 +00:00
|
|
|
import React from 'react'
|
|
|
|
import styled from 'styled-components'
|
|
|
|
import { Icons } from '../icons'
|
|
|
|
import { Text } from '../text'
|
2019-07-22 15:39:53 +00:00
|
|
|
import PropTypes from 'prop-types'
|
2019-07-22 14:48:06 +00:00
|
|
|
|
|
|
|
|
2019-07-23 07:58:49 +00:00
|
|
|
const StyledContent = styled.div`
|
2019-07-22 14:48:06 +00:00
|
|
|
color: #333;
|
|
|
|
display: ${props => props.isOpen ? 'block' : 'none'};
|
|
|
|
padding-top: 9px;
|
|
|
|
`;
|
|
|
|
|
2019-07-23 07:58:49 +00:00
|
|
|
const Arrow = styled(Icons.ArrowContentIcon)`
|
2019-07-22 14:48:06 +00:00
|
|
|
|
|
|
|
margin-right: 9px;
|
|
|
|
margin-bottom: 5px;
|
|
|
|
transform: ${props => props.isOpen && 'rotate(180deg)'};
|
|
|
|
`;
|
|
|
|
|
2019-07-23 08:34:19 +00:00
|
|
|
const StyledSpan = styled.span`
|
|
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
user-select: none;
|
|
|
|
`;
|
|
|
|
|
2019-07-22 14:48:06 +00:00
|
|
|
class ToggleContent extends React.Component {
|
|
|
|
|
2019-07-22 15:39:53 +00:00
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
2019-07-22 14:48:06 +00:00
|
|
|
|
|
|
|
this.state = {
|
2019-07-22 15:39:53 +00:00
|
|
|
isOpen: this.props.isOpen
|
2019-07-22 14:48:06 +00:00
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
toggleContent = (isOpen) => this.setState({ isOpen: isOpen });
|
|
|
|
|
2019-07-22 15:39:53 +00:00
|
|
|
componentDidUpdate(prevProps) {
|
|
|
|
if (this.props.isOpen !== prevProps.isOpen) {
|
|
|
|
this.setState({ isOpen: this.props.isOpen });
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2019-07-22 14:48:06 +00:00
|
|
|
render() {
|
2019-07-24 17:39:19 +00:00
|
|
|
//console.log("ToggleContent render");
|
2019-07-22 14:48:06 +00:00
|
|
|
return (
|
2019-07-23 10:35:04 +00:00
|
|
|
<div>
|
2019-07-23 14:54:52 +00:00
|
|
|
<StyledSpan onClick={() => {
|
|
|
|
this.toggleContent(!this.state.isOpen);
|
|
|
|
this.props.onChange && this.props.onChange(!this.state.isOpen);
|
|
|
|
}}>
|
2019-07-22 14:48:06 +00:00
|
|
|
<Arrow color="#333333" isfill={true} size='medium' isOpen={this.state.isOpen} />
|
|
|
|
<Text.Headline tag='h2' isInline={true}>{this.props.label}</Text.Headline>
|
2019-07-23 08:34:19 +00:00
|
|
|
</StyledSpan>
|
2019-07-22 14:48:06 +00:00
|
|
|
<StyledContent isOpen={this.state.isOpen}>{this.props.children}</StyledContent>
|
2019-07-23 10:35:04 +00:00
|
|
|
</div>
|
2019-07-22 14:48:06 +00:00
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-07-22 15:39:53 +00:00
|
|
|
ToggleContent.propTypes = {
|
2019-07-23 14:54:52 +00:00
|
|
|
isOpen: PropTypes.bool,
|
|
|
|
onChange: PropTypes.func
|
2019-07-22 15:39:53 +00:00
|
|
|
}
|
|
|
|
|
2019-07-22 14:48:06 +00:00
|
|
|
ToggleContent.defaultProps = {
|
2019-07-22 15:39:53 +00:00
|
|
|
isOpen: false,
|
2019-07-22 14:48:06 +00:00
|
|
|
label: "Some label"
|
|
|
|
}
|
|
|
|
|
|
|
|
export default ToggleContent;
|