48 lines
1.4 KiB
TypeScript
48 lines
1.4 KiB
TypeScript
import React, { Fragment, useState } from "react";
|
|
|
|
import './data-entry-group.css';
|
|
|
|
import { DownIcon, RightIcon } from "../../components/icons";
|
|
|
|
interface DataEntryGroupProps {
|
|
/** Name of the group */
|
|
name: string;
|
|
/** Whether the group should be collapsed initially */
|
|
collapsed?: boolean;
|
|
showCount?: boolean;
|
|
}
|
|
|
|
const DataEntryGroup: React.FunctionComponent<DataEntryGroupProps> = (props) => {
|
|
const {
|
|
collapsed: initialCollapsed = true,
|
|
showCount = true
|
|
} = props;
|
|
|
|
const [collapsed, setCollapsed] = useState(initialCollapsed);
|
|
|
|
return (
|
|
<Fragment>
|
|
<div className='data-entry-group-header' onClick={() => setCollapsed(!collapsed)}>
|
|
<CollapseIcon collapsed={collapsed} />
|
|
<span className='data-entry-group-title'>
|
|
{props.name}
|
|
<span className='data-entry-group-count'>{showCount && ` (${React.Children.count(props.children)} attributes)`}</span>
|
|
</span>
|
|
</div>
|
|
<div className={`data-entry-group-body ${collapsed ? 'collapse' : ''}`}>
|
|
{props.children}
|
|
</div>
|
|
</Fragment>
|
|
);
|
|
};
|
|
|
|
const CollapseIcon: React.FunctionComponent<{collapsed: boolean}> = (props) => (
|
|
<span className="collapse-icon">
|
|
{props.collapsed ? <RightIcon/> : <DownIcon/>}
|
|
</span>
|
|
);
|
|
|
|
export {
|
|
DataEntryGroup
|
|
};
|