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-25 07:18:03 +00:00
|
|
|
const IconArrow= ({ isOpen, ...props }) => <Icons.ArrowContentIcon {...props} />;
|
|
|
|
|
|
|
|
const Arrow = styled(IconArrow)`
|
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-26 13:41:14 +00:00
|
|
|
const StyledText = styled(Text.Headline)`
|
2019-08-01 09:22:34 +00:00
|
|
|
height: 26px;
|
|
|
|
line-height: 26px;
|
|
|
|
font-style: normal;
|
2019-07-26 13:41:14 +00:00
|
|
|
&:hover{
|
2019-08-13 11:45:35 +00:00
|
|
|
border-bottom: 1px dashed;
|
2019-07-26 13:41:14 +00:00
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
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-09-10 07:03:36 +00:00
|
|
|
}
|
2019-07-22 15:39:53 +00:00
|
|
|
|
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} />
|
2019-08-06 14:31:52 +00:00
|
|
|
<StyledText forwardedAs='h2' size='medium' isInline={true}>{this.props.label}</StyledText>
|
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-29 09:06:32 +00:00
|
|
|
label: PropTypes.string.isRequired,
|
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;
|