reactstrap#ListGroup TypeScript Examples
The following examples show how to use
reactstrap#ListGroup.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: Sidebar.tsx From TutorBase with MIT License | 6 votes |
|
Sidebar =() => {
return (
<div className={classNames("bg-none", "border-right")} id="sidebar-wrapper">
<div className="sidebar-heading">TutorBase</div>
<ListGroup>
<ListGroupItem tag="a" href="/home" className={classNames("list-group-item", "bg-none", "tab-active")}><FontAwesomeIcon icon={faAddressBook} />Schedule a Session</ListGroupItem>
<ListGroupItem tag="a" href="/home/meetings" className={classNames("list-group-item", "bg-none")}><FontAwesomeIcon icon={faCalendar} />Upcoming Meetings</ListGroupItem>
<ListGroupItem tag="a" href="/home/history" className={classNames("list-group-item", "bg-none")}><FontAwesomeIcon icon={faHistory} />History</ListGroupItem>
<ListGroupItem tag="a" href="/home/settings" className={classNames("list-group-item", "bg-none")}><FontAwesomeIcon icon={faCog} />Settings</ListGroupItem>
</ListGroup>
<ListGroup className="list-group-bottom">
{/* <ListGroupItem tag="a" href="#" className={classNames("list-group-item", "bg-none")}><FontAwesomeIcon icon={faRandom} />Switch Dashboard</ListGroupItem> */}
<ListGroupItem tag="a" href="#" className={classNames("list-group-item", "bg-none")}><FontAwesomeIcon icon={faSignOutAlt} />Logout</ListGroupItem>
</ListGroup>
</div>
);
}
Example #2
| Source File: DatasetSelectorList.tsx From nextclade with MIT License | 6 votes |
|
DatasetSelectorUl = styled(ListGroup)`
flex: 1;
overflow-y: scroll;
// prettier-ignore
background:
linear-gradient(#eaeaea 25%, rgba(255,255,255, 0)),
linear-gradient(rgba(255,255,255, 0), #eaeaea 90%) 0 100%,
radial-gradient(farthest-side at 50% 0, rgba(100,100,100, 0.25), rgba(0,0,0,0)),
radial-gradient(farthest-side at 50% 100%, rgba(100,100,100, 0.25), rgba(0,0,0,0)) 0 100%;
background-color: transparent;
background-repeat: no-repeat;
background-attachment: local, local, scroll, scroll;
background-size: 100% 70px, 100% 70px, 100% 30px, 100% 30px;
`
Example #3
| Source File: MeasurementInterval.tsx From mops-vida-pm-watchdog with MIT License | 5 votes |
|
MeasurementInterval: React.FC = () => {
const [open, setOpen] = React.useState(false);
const dispatch = useDispatch();
const connected = useSelector((state) => state.report.connected);
const interval = useSelector((state) => state.report.latest.measurementInterval);
const enabled = useSelector((state) => state.report.latest.measurementIntervalEnabled);
const onToggle = () => setOpen(connected && !open);
const onChange = async (value: number) => {
setOpen(false);
await dispatch(setMeasurementInterval(value));
await dispatch(setMeasurementEnable(true));
};
const onDisable = async () => {
setOpen(false);
dispatch(setMeasurementEnable(false));
};
return (
<>
<span onClick={onToggle}>{enabled ? `${interval} minutes` : 'Disabled'}</span>
<Modal placement='bottom' isOpen={open} toggle={onToggle}>
<ModalHeader>Measurement interval</ModalHeader>
<ModalBody>
<p>Current Interval: {interval} minutes</p>
<ListGroup>
{steps.map((step) => (
<ListGroupItem onClick={() => onChange(step)} key={step} active={step === interval}>
{step} minutes
</ListGroupItem>
))}
</ListGroup>
</ModalBody>
<ModalFooter>
<Button color='primary' onClick={onDisable} hidden={!enabled}>
Disable
</Button>
<Button color='secondary' onClick={onToggle}>
Cancel
</Button>
</ModalFooter>
</Modal>
</>
);
}
Example #4
| Source File: ClientSettings.tsx From TutorBase with MIT License | 4 votes |
|
ClientSettings = () => {
let clientData = useSelector(selectClientData);
let dispatch = useDispatch();
let [nameModalOpen, setNameModalOpen] = useState<boolean>(false);
let [imgModalOpen, setImgModalOpen] = useState<boolean>(false);
let [tempName, setTempName] = useState<Name>({
first_name: "",
last_name: ""
});
let [clientName, setClientName] = useState<Name>({
first_name: "",
last_name: ""
});
let [croppedImg, setCroppedImg] = useState<string>("");
let [clientImg, setClientImg] = useState<string>("");
const saveNameChange = async () => {
let name: Name = {first_name: tempName.first_name, last_name: tempName.last_name};
await api.SetClientName(name, clientData.clientId);
setClientName(name);
dispatch(clientDataActions.setFirstName(tempName.first_name));
dispatch(clientDataActions.setLastName(tempName.last_name));
setNameModalOpen(false);
}
const handleImageSave = async (img: string) => {
await api.SetClientProfileImage(img, clientData.clientId);
setClientImg(img);
dispatch(clientDataActions.setProfileImage(img));
}
const saveImgChange = async () => {
if(croppedImg.toString() !== "") {
CompressAndSaveImg(croppedImg, clientData.first_name + clientData.last_name + "-photo", handleImageSave);
} else {
handleImageSave(croppedImg);
}
setImgModalOpen(false);
}
const cancelNameChange = () => {
setNameModalOpen(false);
setTempName(clientName);
}
const cancelImgChange = () => {
setCroppedImg("");
setImgModalOpen(false);
}
useEffect(() => {
const getUser = async () => {
return (await api.GetUserById(clientData.clientId)).data;
}
getUser().then(value => {
setTempName({first_name: value[0].first_name, last_name: value[0].last_name});
setClientName({first_name: value[0].first_name, last_name: value[0].last_name});
setClientImg(value[0].profile_img);
dispatch(clientDataActions.setFirstName(value[0].first_name));
dispatch(clientDataActions.setLastName(value[0].last_name));
dispatch(clientDataActions.setProfileImage(value[0].profile_img));
});
}, [clientData.clientId, dispatch]);
return (
<Container className="settings" fluid>
<Row className="title" style={{ marginTop: '25px'}}>
<div className="profile-text">Settings</div>
</Row>
<hr></hr>
<Row>
<ListGroup>
<ListGroupItem className="img-item">
<img src={clientImg === "" ? defaultUser : clientImg} width="200px"/>
<a href="#" className="modal-link" onClick={() => setImgModalOpen(true)}>
<span className="heading-item"><FontAwesomeIcon icon={faEdit} className="font-adj"/></span>
</a>
<Modal isOpen={imgModalOpen} fade={false} toggle={() => {setImgModalOpen(!imgModalOpen)}} className="img-modal">
<ModalHeader toggle={() => {cancelImgChange()}}>Edit Profile Photo</ModalHeader>
<ModalBody>
Change your profile photo here.
<hr/>
<Avatar
width={250}
height={250}
cropColor="#E66064"
closeIconColor="#E66064"
onCrop={(img) => setCroppedImg(img)}
onClose={() => {setCroppedImg("")}}
onBeforeFileLoad={() => {}}
src={clientImg === "" ? defaultUser : clientImg}
/>
</ModalBody>
<ModalFooter>
<Button className="btn-red" onClick={() => {saveImgChange()}}>Save</Button>
<Button color="secondary" onClick={() => {cancelImgChange()}}>Cancel</Button>
</ModalFooter>
</Modal>
</ListGroupItem>
<ListGroupItem className="name-item">
<span className="heading-item">{clientName.first_name} {clientName.last_name}</span>
<a href="#" className="modal-link" onClick={() => {setNameModalOpen(true)}}>
<span className="heading-item"><FontAwesomeIcon icon={faEdit} className="font-adj"/></span>
</a>
<Modal isOpen={nameModalOpen} fade={false} toggle={() => {setNameModalOpen(!nameModalOpen)}} className="name-modal">
<ModalHeader toggle={() => {cancelNameChange()}}>Edit Name</ModalHeader>
<ModalBody>
Change your name here.
<hr/>
<InputGroup>
First Name:<Input id="first-name" value={tempName.first_name} onChange={(value) => setTempName({first_name: value.target.value, last_name: tempName.last_name})} />
</InputGroup>
<InputGroup>
Last Name:<Input id="last-name" value={tempName.last_name} onChange={(value) => setTempName({first_name: tempName.first_name, last_name: value.target.value})} />
</InputGroup>
</ModalBody>
<ModalFooter>
<Button className="btn-red" onClick={() => {saveNameChange()}}>Save</Button>
<Button color="secondary" onClick={() => {cancelNameChange()}}>Cancel</Button>
</ModalFooter>
</Modal>
</ListGroupItem>
</ListGroup>
</Row>
</Container>
);
}
Example #5
| Source File: Sidebar.tsx From TutorBase with MIT License | 4 votes |
|
Sidebar = (params: IParams) => {
let dispatch = useDispatch();
let param : string = useLocation().pathname;
let extension:string = param.split('/')[2];
return (
<div className={classNames("bg-none", "border-right")} id="sidebar-wrapper">
<div className="sidebar-heading" style={{position: "fixed"}}>TutorBase</div>
<ListGroup>
{params.mode === "Tutor"
? ( params.isTutor ? (
<div style={{position: "fixed", top: '50px'}}>
<ListGroupItem tag="a" href="/tutor/overview"
className={classNames("list-group-item", "bg-none", extension==='overview' ?"tab-active" : null)}><FontAwesomeIcon
icon={faUserClock}/>Overview</ListGroupItem>
<ListGroupItem tag="a" href="/tutor/meetings"
className={classNames("list-group-item", "bg-none", extension==='meetings' ?"tab-active" : null)}><FontAwesomeIcon
icon={faCalendar}/>Upcoming Meetings</ListGroupItem>
<ListGroupItem tag="a" href="/tutor/history"
className={classNames("list-group-item", "bg-none", extension==='history' ?"tab-active" : null)}><FontAwesomeIcon
icon={faHistory}/>History</ListGroupItem>
<ListGroupItem tag="a" href="/tutor/analytics"
className={classNames("list-group-item", "bg-none", extension==='analytics' ?"tab-active" : null)}><FontAwesomeIcon
icon={faChartArea}/>Analytics</ListGroupItem>
<ListGroupItem tag="a" href="/tutor/settings"
className={classNames("list-group-item", "bg-none", extension==='settings' ?"tab-active" : null)}><FontAwesomeIcon
icon={faCog}/>Settings</ListGroupItem>
{isMobile ?
<div>
<ListGroupItem tag="a" href="/home/schedule" className={classNames("list-group-item", "bg-none")} style={{marginTop:'20rem'}}>
<FontAwesomeIcon icon={faToggleOn}/>
Switch to Client Dashboard
</ListGroupItem>
<ListGroupItem tag="a" href="#" className={classNames("list-group-item", "bg-none")}>
<FontAwesomeIcon icon={faSignOutAlt}/>
Logout
</ListGroupItem>
</div>
: null}
</div>
)
:
<div></div>
)
: (
<div style={{position: "fixed", top: '50px'}}>
<ListGroupItem tag="a" href="/home/schedule"
className={classNames("list-group-item", "bg-none", extension==='schedule' ?"tab-active" : null)}><FontAwesomeIcon
icon={faAddressBook}/>Schedule a Session</ListGroupItem>
<ListGroupItem tag="a" href="/home/meetings"
className={classNames("list-group-item", "bg-none", extension==='meetings' ?"tab-active" : null)}><FontAwesomeIcon
icon={faCalendar}/>Upcoming Meetings</ListGroupItem>
<ListGroupItem tag="a" href="/home/history"
className={classNames("list-group-item", "bg-none", extension==='history' ?"tab-active" : null)}><FontAwesomeIcon
icon={faHistory}/>History</ListGroupItem>
<ListGroupItem tag="a" href="/home/settings"
className={classNames("list-group-item", "bg-none")}><FontAwesomeIcon
icon={faCog}/>Settings</ListGroupItem>
{isMobile ?
<div>
<ListGroupItem tag="a" href="/tutor/meetings" className={classNames("list-group-item", "bg-none")} style={{marginTop:'20rem'}}>
<FontAwesomeIcon icon={faToggleOff}/>
Switch to Tutor Dashboard
</ListGroupItem>
<ListGroupItem tag="a" href="#" className={classNames("list-group-item", "bg-none")}>
<FontAwesomeIcon icon={faSignOutAlt}/>
Logout
</ListGroupItem>
</div>
: null}
</div>
)}
</ListGroup>
{isMobile ? null
:<ListGroup className="list-group-bottom">
{params.mode === "Tutor"
? (
<div>
<ListGroupItem tag="a" href="/home/schedule" className={classNames("list-group-item", "bg-none")}>
<FontAwesomeIcon icon={faToggleOn}/>
Switch to Client Dashboard
</ListGroupItem>
</div>
) :
(
<div>
<ListGroupItem tag="a" href="/tutor/overview" className={classNames("list-group-item", "bg-none")}>
<FontAwesomeIcon icon={faToggleOff}/>
Switch to Tutor Dashboard
</ListGroupItem>
</div>
)
}
<ListGroupItem tag="a" href="#" className={classNames("list-group-item", "bg-none")}>
<FontAwesomeIcon icon={faSignOutAlt}/>
Logout
</ListGroupItem>
</ListGroup>
}
</div>
);
}
Example #6
| Source File: ExportDialogButton.tsx From nextclade with MIT License | 4 votes |
|
export function ExportDialogButton() {
const { t } = useTranslationSafe()
const [isOpen, setIsOpen] = useState<boolean>(false)
const toggleOpen = useCallback(() => setIsOpen((isOpen) => !isOpen), [])
const open = useCallback(() => setIsOpen(true), [])
const close = useCallback(() => setIsOpen(false), [])
const canDownload = useRecoilValue(canDownloadAtom)
// TODO: We could probably use a map and then iterate over it, to reduce duplication
const exportZip = useExportZip()
const exportFasta = useExportFasta()
const exportCsv = useExportCsv()
const exportTsv = useExportTsv()
const exportJson = useExportJson()
const exportNdjson = useExportNdjson()
const exportPeptides = useExportPeptides()
const exportTree = useExportTree()
const exportInsertionsCsv = useExportInsertionsCsv()
const exportErrorsCsv = useExportErrorsCsv()
const exportParams = useMemo(() => DEFAULT_EXPORT_PARAMS, [])
return (
<>
<PanelButton type="button" onClick={open} title={t('Download results')} disabled={!canDownload}>
<DownloadIcon />
</PanelButton>
<Modal centered isOpen={isOpen} toggle={toggleOpen} fade={false} size="lg">
<ModalHeader toggle={close} tag="div" className="d-flex">
<h4 className="mx-auto">
<DownloadIcon />
{t('Download results')}
</h4>
</ModalHeader>
<ModalBody>
<Row>
<Col>
<Card>
<ListGroup flush>
<ExportFileElement
Icon={FileIconJson}
filename={exportParams.filenameJson}
HelpMain={t('Results of the analysis in JSON format.')}
HelpDetails={t(
'Contains detailed results of the analysis, such as clades, mutations, QC metrics etc., in JSON format. Convenient for further automated processing.',
)}
HelpDownload={t('Download results of the analysis in JSON format.')}
onDownload={exportJson}
/>
<ExportFileElement
Icon={FileIconNdjson}
filename={exportParams.filenameNdjson}
HelpMain={t('Results of the analysis in NDJSON format (newline-delimited JSON).')}
HelpDetails={t(
'Contains detailed results of the analysis, such as clades, mutations, QC metrics etc., in NDJSON format. Convenient for further automated processing.',
)}
HelpDownload={t('Download results of the analysis in NDJSON format.')}
onDownload={exportNdjson}
/>
<ExportFileElement
Icon={FileIconCsv}
filename={exportParams.filenameCsv}
HelpMain={t('Summarized results of the analysis in CSV format.')}
HelpDetails={t(
'Contains summarized results of the analysis, such as clades, mutations, QC metrics etc., in tabular format. Convenient for further review and processing using spreadsheets or data-science tools.',
)}
HelpDownload={t('Download summarized results in CSV format')}
onDownload={exportCsv}
/>
<ExportFileElement
Icon={FileIconTsv}
filename={exportParams.filenameTsv}
HelpMain={t('Summarized results of the analysis in TSV format.')}
HelpDetails={t(
'Contains summarized results of the analysis, such as clades, mutations, QC metrics etc in tabular format. Convenient for further review and processing using spreadsheets or data-science tools.',
)}
HelpDownload={t('Download summarized results in TSV format')}
onDownload={exportTsv}
/>
<ExportFileElement
Icon={FileIconJson}
filename={exportParams.filenameTree}
HelpMain={t('Phylogenetic tree with sequenced placed onto it.')}
HelpDetails={
<>
{t('The tree is in Nextstrain format.')}{' '}
{t('Can be viewed locally with Nextstrain Auspice or in {{auspice_us}}')}
<LinkExternal url="https://auspice.us">{'auspice.us'}</LinkExternal>
{'.'}
</>
}
HelpDownload={t(
'Download phylogenetic tree with sequenced placed onto it, in Auspice JSON v2 format.',
)}
onDownload={exportTree}
/>
<ExportFileElement
Icon={FileIconFasta}
filename={exportParams.filenameFasta}
HelpMain={t('Aligned sequences in FASTA format.')}
HelpDetails={t('Contains aligned sequences in FASTA format.')}
HelpDownload={t('Download aligned sequences in FASTA format.')}
onDownload={exportFasta}
/>
<ExportFileElement
Icon={FileIconZip}
filename={exportParams.filenamePeptidesZip}
HelpMain={t('Aligned peptides in FASTA format, zipped')}
HelpDetails={t(
'Contains results of translation of your sequences. One FASTA file per gene, all in a zip archive.',
)}
HelpDownload={t(
'Download aligned peptides in FASTA format, one file per gene, all in a zip archive.',
)}
onDownload={exportPeptides}
/>
<ExportFileElement
Icon={FileIconCsv}
filename={exportParams.filenameInsertionsCsv}
HelpMain={t('Insertions in CSV format.')}
HelpDetails={t('Contains insertions stripped from aligned sequences.')}
HelpDownload={t('Download insertions in CSV format')}
onDownload={exportInsertionsCsv}
/>
<ExportFileElement
Icon={FileIconCsv}
filename={exportParams.filenameErrorsCsv}
HelpMain={t('Errors, warnings, and failed genes in CSV format.')}
HelpDetails={t(
'Contains a list of errors, a list of warnings and a list of genes that failed processing, per sequence, in CSV format.',
)}
HelpDownload={t('Download warnings, and failed genes in CSV format')}
onDownload={exportErrorsCsv}
/>
<ExportFileElement
Icon={FileIconZip}
filename={exportParams.filenameZip}
HelpMain={t('All files in a zip archive.')}
HelpDetails={t('Contains all of the above files in a single zip file.')}
HelpDownload={t('Download all in zip archive')}
onDownload={exportZip}
/>
</ListGroup>
</Card>
</Col>
</Row>
</ModalBody>
<ModalFooter>
<Button type="button" onClick={close} title={t('Close')}>
<div>{t('Close')}</div>
</Button>
</ModalFooter>
</Modal>
</>
)
}
