@material-ui/lab#TimelineOppositeContent TypeScript Examples
The following examples show how to use
@material-ui/lab#TimelineOppositeContent.
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: Desktop.tsx From aqualink-app with MIT License | 5 votes |
TimelineDesktop = ({
siteId,
loading,
displayAddButton,
surveys,
pointId,
pointName,
isAdmin,
timeZone,
}: TimelineProps) => {
const classes = useStyles();
const isSiteIdValid = typeof siteId === "number";
return (
<Timeline>
{displayAddButton && !loading && (
<TimelineItem className={classes.timelineItem}>
<TimelineOppositeContent
className={classNames(
classes.timelineOppositeContent,
classes.addNewButtonOpposite
)}
/>
<TimelineContent className={classes.addNewButtonWrapper}>
{isSiteIdValid && <AddButton siteId={siteId} />}
</TimelineContent>
</TimelineItem>
)}
{surveys.map((survey, index) => (
<TimelineItem
key={survey?.id || `loading-survey-${index}`}
className={classes.timelineItem}
>
<TimelineOppositeContent className={classes.timelineOppositeContent}>
<LoadingSkeleton
className={classes.dateSkeleton}
loading={loading}
variant="text"
width="30%"
lines={1}
>
{survey?.diveDate && (
<Typography variant="h6" className={classes.dates}>
{displayTimeInLocalTimezone({
isoDate: survey.diveDate,
format: "MM/DD/YYYY",
displayTimezone: false,
timeZone,
})}
</Typography>
)}
</LoadingSkeleton>
</TimelineOppositeContent>
<TimelineSeparator>
<hr className={classes.connector} />
<TimelineDot variant="outlined" className={classes.dot} />
<hr className={classes.connector} />
</TimelineSeparator>
<TimelineContent className={classes.surveyCardWrapper}>
<SurveyCard
pointId={pointId}
pointName={pointName}
isAdmin={isAdmin}
siteId={siteId}
survey={survey}
loading={loading}
/>
</TimelineContent>
</TimelineItem>
))}
</Timeline>
);
}
Example #2
Source File: AdrMenu.tsx From log4brains with Apache License 2.0 | 4 votes |
export function AdrMenu({ adrs, currentAdrSlug, className, ...props }: Props) {
const classes = useStyles();
const [newAdrOpen, setNewAdrOpen] = React.useState(false);
const mode = React.useContext(Log4brainsModeContext);
if (adrs === undefined) {
return null; // Because inside a <Grow>
}
let lastDateString = "";
return (
<div className={clsx(className, classes.root)} {...props}>
{mode === Log4brainsMode.preview && (
<Dialog
open={newAdrOpen}
onClose={() => setNewAdrOpen(false)}
aria-labelledby="newadr-dialog-title"
aria-describedby="newadr-dialog-description"
>
<DialogTitle id="newadr-dialog-title">Create a new ADR</DialogTitle>
<DialogContent>
<DialogContentText id="newadr-dialog-description">
<Typography>
Run the following command in your terminal:
</Typography>
<pre>
<code className="hljs bash">log4brains adr new</code>
</pre>
<Typography>
This will create a new ADR from your template and will open it
in your editor.
<br />
Just press <code>Ctrl+S</code> to watch your changes here,
thanks to Hot Reload.
</Typography>
<Typography variant="body2" style={{ marginTop: 20 }}>
Would you have preferred to create a new ADR directly from here?
<br />
Leave a ? on{" "}
<MuiLink
href="https://github.com/thomvaill/log4brains/issues/9"
target="_blank"
rel="noopener"
>
this GitHub issue
</MuiLink>{" "}
then!
</Typography>
</DialogContentText>
</DialogContent>
<DialogActions>
<Button
onClick={() => setNewAdrOpen(false)}
color="primary"
autoFocus
>
OK
</Button>
</DialogActions>
</Dialog>
)}
<Timeline className={classes.timeline}>
{mode === Log4brainsMode.preview && (
<TimelineItem className={classes.timelineItem}>
<TimelineOppositeContent
classes={{ root: classes.timelineOppositeContentRootAdd }}
/>
<TimelineSeparator>
<Tooltip title="Create a new ADR">
<Fab
size="small"
color="primary"
aria-label="create a new ADR"
className={classes.newAdrFab}
onClick={() => setNewAdrOpen(true)}
>
<AddIcon />
</Fab>
</Tooltip>
<TimelineConnector />
</TimelineSeparator>
<TimelineContent />
</TimelineItem>
)}
{adrs.map((adr) => {
const currentDateString = moment(
adr.publicationDate || adr.creationDate
).format("MMMM|YYYY");
const dateString =
currentDateString === lastDateString ? "" : currentDateString;
lastDateString = currentDateString;
const [month, year] = dateString.split("|");
return (
<TimelineItem
key={adr.slug}
className={clsx(classes.timelineItem, {
[classes.selectedTimelineItem]: currentAdrSlug === adr.slug
})}
>
<TimelineOppositeContent
classes={{ root: classes.timelineOppositeContentRoot }}
>
<Typography variant="body2" className={classes.date}>
{month}
</Typography>
<Typography variant="body2" className={classes.date}>
{year}
</Typography>
</TimelineOppositeContent>
<TimelineSeparator>
<TimelineDot className={classes.timelineConnector} />
<TimelineConnector className={classes.timelineConnector} />
</TimelineSeparator>
<TimelineContent>
<div className={classes.timelineContentContainer}>
<Link href={`/adr/${adr.slug}`} passHref>
<MuiLink
className={clsx(classes.adrLink, {
[classes[
`${adr.status}Link` as keyof typeof classes
]]: true
})}
variant="body2"
>
<span className={classes.adrTitle}>
{adr.title || "Untitled"}
</span>
{adr.package ? (
<span className={classes.package}>
<CropFreeIcon
fontSize="inherit"
className={classes.icon}
/>{" "}
{adr.package}
</span>
) : null}
</MuiLink>
</Link>
<div>
<AdrStatusChip
status={adr.status}
className={classes.adrStatusChip}
/>
</div>
</div>
</TimelineContent>
</TimelineItem>
);
})}
<TimelineItem>
<TimelineOppositeContent
classes={{ root: classes.timelineStartOppositeContentRoot }}
/>
<TimelineSeparator>
<TimelineConnector />
<TimelineDot>
<EmojiFlagsIcon />
</TimelineDot>
</TimelineSeparator>
<TimelineContent />
</TimelineItem>
</Timeline>
</div>
);
}