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

46 lines
967 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>
);
}
}