55 lines
1.3 KiB
TypeScript
55 lines
1.3 KiB
TypeScript
|
import React, { Fragment } from "react";
|
||
|
|
|
||
|
|
import './data-entry-group.css';
|
||
|
|
import { RightIcon, DownIcon } from "../../components/icons";
|
||
|
|
|
||
|
|
interface DataEntryProps {
|
||
|
|
name: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
interface DataEntryState {
|
||
|
|
collapsed: boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
class DataEntryGroup extends React.Component<DataEntryProps, DataEntryState> {
|
||
|
|
constructor(props) {
|
||
|
|
super(props);
|
||
|
|
|
||
|
|
this.state = {
|
||
|
|
collapsed: true
|
||
|
|
};
|
||
|
|
|
||
|
|
this.toggle = this.toggle.bind(this);
|
||
|
|
}
|
||
|
|
|
||
|
|
toggle() {
|
||
|
|
this.setState((state) => ({
|
||
|
|
collapsed: !state.collapsed
|
||
|
|
}));
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
return (
|
||
|
|
<Fragment>
|
||
|
|
<div className='data-entry-group-header' onClick={this.toggle}>
|
||
|
|
<CollapseIcon collapsed={this.state.collapsed} />
|
||
|
|
<span className='data-entry-group-title'>{this.props.name}</span>
|
||
|
|
</div>
|
||
|
|
<div className={`data-entry-group-body ${this.state.collapsed ? 'collapse' : ''}`}>
|
||
|
|
{this.props.children}
|
||
|
|
</div>
|
||
|
|
</Fragment>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const CollapseIcon: React.FunctionComponent<{collapsed: boolean}> = (props) => (
|
||
|
|
<span className="collapse-icon">
|
||
|
|
{props.collapsed ? <RightIcon/> : <DownIcon/>}
|
||
|
|
</span>
|
||
|
|
);
|
||
|
|
|
||
|
|
export {
|
||
|
|
DataEntryGroup
|
||
|
|
};
|