MyCrypto/common/containers/Tabs/ENS/components/GeneralInfoPanel/GeneralInfoNode.tsx

30 lines
875 B
TypeScript

import React from 'react';
import { HeaderProps, ListProps, NodeProps, NodeState } from './types';
const InfoHeader = ({ children, onClickHandler }: HeaderProps) => (
<h6 onClick={onClickHandler}>
<span>+</span> {children}
</h6>
);
const InfoList = ({ children, isOpen }: ListProps) => (isOpen ? <ul>{children}</ul> : null);
export default class GeneralInfoNode extends React.Component<NodeProps, NodeState> {
public state = {
isOpen: false
};
public toggleVisibility = () => this.setState(prevState => ({ isOpen: !prevState.isOpen }));
public render() {
const { toggleVisibility, props: { innerList, headerContent }, state: { isOpen } } = this;
return (
<section>
<InfoHeader onClickHandler={toggleVisibility}>{headerContent}</InfoHeader>
<InfoList isOpen={isOpen}>{innerList}</InfoList>
</section>
);
}
}