@material-ui/lab#TimelineOppositeContent TypeScript Examples

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>
  );
}

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>
  );
}