2019-07-22 14:48:06 +00:00
|
|
|
import React from 'react'
|
|
|
|
import styled from 'styled-components'
|
|
|
|
import { Icons } from '../icons'
|
2019-12-04 09:36:13 +00:00
|
|
|
import Heading from '../heading'
|
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-12-03 13:50:14 +00:00
|
|
|
// eslint-disable-next-line react/prop-types, no-unused-vars
|
|
|
|
const IconArrow = ({ isOpen, ...props }) => <Icons.ArrowContentIcon {...props} />;
|
2019-07-25 07:18:03 +00:00
|
|
|
|
|
|
|
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-12-04 09:36:13 +00:00
|
|
|
const StyledText = styled(Heading)`
|
2019-12-27 08:35:46 +00:00
|
|
|
height: 24px;
|
2019-08-01 09:22:34 +00:00
|
|
|
line-height: 26px;
|
2019-12-24 09:47:32 +00:00
|
|
|
box-sizing: border-box;
|
2019-08-01 09:22:34 +00:00
|
|
|
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-12-03 13:50:14 +00:00
|
|
|
<div
|
|
|
|
className={this.props.className}
|
|
|
|
id={this.props.id}
|
|
|
|
style={this.props.style}
|
|
|
|
>
|
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-12-24 09:47:32 +00:00
|
|
|
<StyledText level={2} size='small' 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,
|
2019-10-23 08:31:36 +00:00
|
|
|
onChange: PropTypes.func,
|
2019-12-03 13:50:14 +00:00
|
|
|
className: PropTypes.string,
|
|
|
|
children: PropTypes.any,
|
|
|
|
id: PropTypes.string,
|
|
|
|
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
|
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;
|