Add DataEntryGroup component
This commit is contained in:
parent
98a826179c
commit
4320e20952
@ -0,0 +1,12 @@
|
|||||||
|
.data-entry-group-header {
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.data-entry-group-header .data-entry-group-title {
|
||||||
|
position: absolute;
|
||||||
|
left: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-entry-group-body {
|
||||||
|
padding-left: 1rem;
|
||||||
|
}
|
@ -0,0 +1,54 @@
|
|||||||
|
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
|
||||||
|
};
|
@ -5,7 +5,7 @@ import React from 'react'
|
|||||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||||
import { faQuestionCircle, faPaintBrush, faInfoCircle, faTimes, faCheck, faCheckDouble,
|
import { faQuestionCircle, faPaintBrush, faInfoCircle, faTimes, faCheck, faCheckDouble,
|
||||||
faAngleLeft, faCaretDown, faSearch, faEye, faCaretUp } from '@fortawesome/free-solid-svg-icons'
|
faAngleLeft, faCaretDown, faSearch, faEye, faCaretUp, faCaretRight } from '@fortawesome/free-solid-svg-icons'
|
||||||
|
|
||||||
library.add(
|
library.add(
|
||||||
faQuestionCircle,
|
faQuestionCircle,
|
||||||
@ -17,6 +17,7 @@ library.add(
|
|||||||
faAngleLeft,
|
faAngleLeft,
|
||||||
faCaretDown,
|
faCaretDown,
|
||||||
faCaretUp,
|
faCaretUp,
|
||||||
|
faCaretRight,
|
||||||
faSearch,
|
faSearch,
|
||||||
faEye
|
faEye
|
||||||
);
|
);
|
||||||
@ -61,6 +62,10 @@ const UpIcon = () => (
|
|||||||
<FontAwesomeIcon icon="caret-up" />
|
<FontAwesomeIcon icon="caret-up" />
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const RightIcon = () => (
|
||||||
|
<FontAwesomeIcon icon="caret-right" />
|
||||||
|
);
|
||||||
|
|
||||||
const SearchIcon = () => (
|
const SearchIcon = () => (
|
||||||
<FontAwesomeIcon icon="search" />
|
<FontAwesomeIcon icon="search" />
|
||||||
);
|
);
|
||||||
@ -76,5 +81,6 @@ export {
|
|||||||
BackIcon,
|
BackIcon,
|
||||||
DownIcon,
|
DownIcon,
|
||||||
UpIcon,
|
UpIcon,
|
||||||
|
RightIcon,
|
||||||
SearchIcon
|
SearchIcon
|
||||||
};
|
};
|
||||||
|
Loading…
Reference in New Issue
Block a user