reactstrap#ListGroupItem TypeScript Examples
The following examples show how to use
reactstrap#ListGroupItem.
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: ExportDialogButton.tsx From nextclade with MIT License | 6 votes |
|
export function ExportFileElement({
Icon,
filename,
HelpMain,
HelpDetails,
HelpDownload,
onDownload,
}: ExportElementProps) {
const handleDownload = useCallback(() => onDownload(filename), [filename, onDownload])
const hasFilename = filename.length > 0
return (
<ListGroupItem className="d-flex">
<span className="flex-grow-0">
<Icon />
</span>
<div className="mx-3 d-inline-block flex-grow-1">
<pre className="mb-0 export-file-filename">{filename}</pre>
<p className="my-0 small">{HelpMain}</p>
<p className="my-0 small">{HelpDetails}</p>
</div>
<div className="d-inline-block ml-auto my-auto">
<Button color="primary" disabled={!hasFilename} title={HelpDownload} onClick={handleDownload}>
<DownloadIcon />
</Button>
</div>
</ListGroupItem>
)
}
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: DatasetSelectorList.tsx From nextclade with MIT License | 5 votes |
|
DatasetSelectorLi = styled(ListGroupItem)<{ $isDimmed?: boolean }>`
list-style: none;
margin: 0;
padding: 0.5rem;
cursor: pointer;
opacity: ${(props) => props.$isDimmed && 0.33};
background-color: transparent;
`
Example #5
| 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 #6
| 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>
);
}
