101 lines
2.5 KiB
JavaScript
101 lines
2.5 KiB
JavaScript
import React from "react";
|
|
import PropTypes from "prop-types";
|
|
import styled from "styled-components";
|
|
|
|
import { ArrowContentReactSvg } from "./svg";
|
|
import Heading from "../heading";
|
|
import { StyledContent, StyledContainer } from "./styled-toggle-content";
|
|
import commonIconsStyles from "../utils/common-icons-style";
|
|
|
|
const StyledArrowContentIcon = styled(ArrowContentReactSvg)`
|
|
${commonIconsStyles}
|
|
`;
|
|
// eslint-disable-next-line react/prop-types, no-unused-vars
|
|
class ToggleContent extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
const { isOpen } = props;
|
|
|
|
this.state = {
|
|
isOpen,
|
|
};
|
|
}
|
|
|
|
toggleContent = () => {
|
|
if (!this.props.enableToggle) return;
|
|
|
|
this.setState({ isOpen: !this.state.isOpen });
|
|
};
|
|
|
|
componentDidUpdate(prevProps) {
|
|
const { isOpen } = this.props;
|
|
if (isOpen !== prevProps.isOpen) {
|
|
this.setState({ isOpen });
|
|
}
|
|
}
|
|
|
|
render() {
|
|
// console.log("ToggleContent render");
|
|
|
|
const { children, className, id, label, style, enableToggle } = this.props;
|
|
|
|
const { isOpen } = this.state;
|
|
|
|
return (
|
|
<StyledContainer
|
|
className={className}
|
|
isOpen={isOpen}
|
|
id={id}
|
|
style={style}
|
|
enableToggle={enableToggle}
|
|
>
|
|
<div className="toggle-container">
|
|
<span className="span-toggle-content" onClick={this.toggleContent}>
|
|
<StyledArrowContentIcon
|
|
className="arrow-toggle-content"
|
|
size="medium"
|
|
/>
|
|
<Heading
|
|
className="heading-toggle-content"
|
|
level={2}
|
|
size="small"
|
|
isInline={true}
|
|
>
|
|
{label}
|
|
</Heading>
|
|
</span>
|
|
</div>
|
|
<StyledContent isOpen={isOpen}>{children}</StyledContent>
|
|
</StyledContainer>
|
|
);
|
|
}
|
|
}
|
|
|
|
ToggleContent.propTypes = {
|
|
/** Displays the child elements */
|
|
children: PropTypes.any,
|
|
/** Accepts class */
|
|
className: PropTypes.string,
|
|
/** Accepts id */
|
|
id: PropTypes.string,
|
|
/** Displays the component's state */
|
|
isOpen: PropTypes.bool,
|
|
/** Sets the header label */
|
|
label: PropTypes.string.isRequired,
|
|
/** The change event is triggered when the element's value is modified */
|
|
onChange: PropTypes.func,
|
|
/** Accepts css style */
|
|
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
|
/** Enables/disables toggle */
|
|
enableToggle: PropTypes.bool,
|
|
};
|
|
|
|
ToggleContent.defaultProps = {
|
|
isOpen: false,
|
|
enableToggle: true,
|
|
label: "",
|
|
};
|
|
|
|
export default ToggleContent;
|