@material-ui/core#List TypeScript Examples

BankAccount = () => {
	const [account, isLoading] = useAccount()
	const [showModal, closeModal] = useModal()
	const currently_due: string[] = account?.stripe?.requirements.currently_due ?? []
	const isRequired = isLoading || currently_due.includes("external_account")
	const bankAccounts = account?.stripe?.external_accounts.data || []

	return (
		<Box>
			<List>
				{bankAccounts.map(value => {
					return (
						<ListItem button key={value.id}>
							<ListItemText primary={`${value.bank_name} - ${value.account_holder_name}`} primaryTypographyProps={{ variant: "subtitle1" }} />
							<ListItemSecondaryAction>
								<Box display="flex" alignItems="center">
									<NavigateNextIcon />
								</Box>
							</ListItemSecondaryAction>
						</ListItem>
					)
				})}

				<ListItem button onClick={() => {
					showModal(<Payout onClose={closeModal} />, false)
				}}>
					<ListItemText primary="Register your bank account" primaryTypographyProps={{ variant: "subtitle2" }} />
					<ListItemSecondaryAction>
						<Box display="flex" alignItems="center">
							{isRequired && <Chip variant="outlined" size="small" color="secondary" label="Required" />}
							<NavigateNextIcon />
						</Box>
					</ListItemSecondaryAction>
				</ListItem>
			</List>
		</Box>
	)
}

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://github.com/EliEladElrom/react-tutorials"
          target="_blank"
          rel="noopener noreferrer"
        >
          Eli Elad Elrom - React Tutorials
        </a>

        <List>
          {[{ name: 'MyPage', url: '/MyPage' }].map((itemObject, index) => (
            <NavLink className="App-link" to={itemObject.url} key={itemObject.url}>
              <ListItem>{itemObject.name}</ListItem>
            </NavLink>
          ))}
        </List>
      </header>
    </div>
  )
}

render(): React.ReactElement {
    return (
      <List
        id="FileConflictsList"
        className={
          this.state.hidden
            ? classes(logPanelClass, hiddenClass)
            : classes(logPanelClass)
        }
      >
        {this._renderEntries()}
      </List>
    );
  }

Players = React.memo(({ players, host, czar, roomId, isCurrentUserHost }: PlayersProps) => {
  const [, , , kickPlayer] = useFetchData(`/api/rooms/kick`, FetchType.PUT);
  const onPlayerKick = useCallback((playerToKick: string) => {
    return kickPlayer({ roomId, clientId: playerToKick }).catch(() => { });
  }, [kickPlayer, roomId]);

  if (window.screen.width < 600) {
    return <>
      {players.sort((a, b) => b.score - a.score).map((player) => {
        const isHost = player._id === host;
        const isCzar = player?._id === czar;
        return <MobilePlayer key={player._id} player={player} isHost={isHost} isCzar={isCzar} onPlayerKick={onPlayerKick} isCurrentUserHost={isCurrentUserHost} />
      })}
    </>
  }

  return <List className="players-list">
    {players.map((player, index) => {
      const isHost = player._id === host;
      const isCzar = player?._id === czar;
      return <React.Fragment key={player._id}>
        <Player player={player} isHost={isHost} isCzar={isCzar} onPlayerKick={onPlayerKick} isCurrentUserHost={isCurrentUserHost} />
        {index !== players?.length - 1 ? <Divider variant="inset" component="li" /> : null}
      </React.Fragment>
    })}
  </List>;
})

OnCallForScheduleList = ({ schedule }: { schedule: Schedule }) => {
    const opsgenieApi = useApi(opsgenieApiRef);
    const { value, loading, error } = useAsync(async () => await opsgenieApi.getOnCall(schedule.id));

    if (loading) {
        return <Progress />;
    } else if (error) {
        return (
            <Alert data-testid="error-message" severity="error">
                {error.message}
            </Alert>
        );
    }

    return (
        <List>
            {value!.map((responder, i) => (
                <ListItem key={i} button component="a" href={opsgenieApi.getUserDetailsURL(responder.id)}>
                    <ListItemIcon>
                        <PersonIcon />
                    </ListItemIcon>

                    <ListItemText primary={responder.name} />
                </ListItem>
            ))}

            {value!.length === 0 && <ListItem><ListItemText primary="⚠️ No one on-call." /></ListItem>}
        </List>
    );
}

Home = () => {
  const classes = useStyles();
  const { stories } = useContext(StoriesContext);

  return (
    <Container component="main" maxWidth="xs">
      <CssBaseline />
      <div className={classes.paper}>
        <Typography component="h1" variant="h5">
          Latest Stories
        </Typography>
        <div className={classes.root}>
          <List component="span" aria-label="stories">
            {stories?.map((s) => (
              <ListItem key={s.timestamp}>
                <Story {...s} />
              </ListItem>
            ))}
          </List>
        </div>
      </div>
    </Container>
  );
}

LiveStreamList = ({ liveStreams }: LiveStreamListProps) => {
    const classes = useStyles();

    return (
        <div className={classes.root}>
            {liveStreams.length > 0 && (
                <List className={classes.list}>
                    {liveStreams.map((elem: FollowedLivestream) => (
                        <LiveStreamListItem {...elem} key={elem.id} />
                    ))}
                </List>
            )}
        </div>
    );
}

ControlsSubtabChangelogVersion: FunctionComponent<ControlsSubtabChangelogVersionProps> = memo(
  ({ version, date, description }) => {
    const classes = useStyles();

    const [open, setOpen] = useState(false);
    const toggleOpen = () => setOpen((value) => !value);

    return (
      <>
        <ListItem disableGutters button onClick={toggleOpen}>
          <ListItemText primary={version} secondary={date} />
          {open ? <ExpandLessIcon /> : <ExpandMoreIcon />}
        </ListItem>
        <Collapse in={open}>
          <List dense disablePadding>
            {_.map(description, (descriptionLine, index) => (
              <ListItem
                key={`${index}/${descriptionLine}`}
                disableGutters
                className={classes.subItem}
              >
                <ListItemText primary={descriptionLine} />
              </ListItem>
            ))}
          </List>
        </Collapse>
      </>
    );
  }
)

export function LoadMissionForm() {
  const { setShowLoadMissionForm } = AppStateContainer.useContainer();
  const [missionDir, setMissionDir] = useState([] as Array<string>);

  useEffect(() => {
    const init = async () => {
      try {
        const fetchedMissionDir = await gameService.getMissionDir();

        console.info('LoadMissionForm initialized successfully.');
        setMissionDir(fetchedMissionDir);
      } catch (error) {
        console.info('Failed to initialize LoadMissionForm.');
      }
    };

    init();
  }, []);

  const onClick = (index: number) => {
    gameService.sendLoadMission(missionDir[index]);
    console.log(`Loading mission ${missionDir[index]}`);
    setShowLoadMissionForm(false);
  };

  return (
    <div className="PopupBig">
      <List dense={true} style={{ height: '80vh', overflow: 'auto' }}>
        {missionDir.map((dir, index) => (
          <ListItem key={`dir-${index}`} button={true} onClick={() => onClick(index)}>
            <ListItemText primary={dir} />
          </ListItem>
        ))}
      </List>

      <button onClick={() => setShowLoadMissionForm(false)}>Close</button>
    </div>
  );
}

SitesList = ({ classes }: SitesListProps) => {
  const sitesList = useSelector(sitesListSelector);
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(sitesRequest());
  }, [dispatch]);

  return (
    <>
      <div className={classes.root}>
        <List component="nav">
          {sitesList?.map((site) => (
            <Link
              key={`site-list-item-${site.id}`}
              style={{ color: "inherit", textDecoration: "none" }}
              to={`/sites/${site.id}`}
            >
              <ListItem button>
                <ListItemText style={{ color: "white" }} primary={site.name} />
              </ListItem>
            </Link>
          ))}
        </List>
      </div>
    </>
  );
}

function RoundSettingsList(props: { children: React.ReactNode }) {
  return (
    <List
      style={{
        borderWidth: 1,
        borderStyle: "solid",
        borderColor: "rgba(0, 0, 0, 0.23)",
        borderRadius: 4,
        color: grey[600],
      }}
    >
      {props.children}
    </List>
  )
}

export function AdvancedSettings() {
  const [value, setValue] = useLocalStorage<'on' | 'off'>(
    'advanced-option',
    'off',
  );

  const toggleValue = (ev: React.ChangeEvent<HTMLInputElement>) => {
    setValue(ev.currentTarget.checked ? 'on' : 'off');
  };

  return (
    <Grid container direction="row" spacing={3}>
      <Grid item xs={12} md={6}>
        <InfoCard title="Advanced settings" variant="gridItem">
          <List>
            <ListItem>
              <ListItemText
                primary="Advanced user option"
                secondary="An extra settings tab to further customize the experience"
              />
              <ListItemSecondaryAction>
                <Switch
                  color="primary"
                  value={value}
                  onChange={toggleValue}
                  name="advanced"
                />
              </ListItemSecondaryAction>
            </ListItem>
          </List>
        </InfoCard>
      </Grid>
    </Grid>
  );
}

withActions = (): StoryFnReactReturnType => (
    <ScoreCard
        style={{ width: 400, flex: '0 0 auto' }}
        headerTitle={'Substation 3'}
        headerSubtitle={'High Humidity Alarm'}
        headerInfo={'4 Devices'}
        headerColor={Colors.blue[500]}
        headerFontColor={Colors.white[50]}
        headerBackgroundImage={backgroundImage}
        actionItems={actionItems}
        actionLimit={number('actionLimit', 3, { range: true, min: 1, max: 6, step: 1 })}
        actionRow={actionRow}
    >
        <List>
            <ListItem>
                <ListItemText primary={'Body Content'} />
            </ListItem>
        </List>
    </ScoreCard>
)

export function ContentPageTwo({ accountManager }: ContentPageTwoProps) {
  return (
    <List>
      {accountManager &&
        accountManager.userAccounts &&
        accountManager.userAccounts.map((account, index) => (
          <ListItem>
            <ListItemText primary={account.alias} />
            <ListItemSecondaryAction>
              <Tooltip title="Download">
                <IconButton
                  edge="end"
                  onClick={() => {
                    accountManager.downloadPemFiles(account.alias);
                  }}
                >
                  <GetApp />
                </IconButton>
              </Tooltip>
            </ListItemSecondaryAction>
          </ListItem>
        ))}
    </List>
  );
}

ConnectWallet: React.FC = () => {
  const { connect } = useTezos();

  return (
    <PageContainer container justify="flex-start" alignItems="center">
      <Grid item>
        <SpacingTitle align="left" variant="h3" color="textSecondary">
          Connect your wallet
        </SpacingTitle>
        <SpacingTitle align="left" variant="subtitle1" color="textSecondary">
          Create an organization by picking a template below
        </SpacingTitle>
        <Box>
          <List>
            <ListItem button={true} onClick={() => connect()}>
              <ListItemAvatar>
                <Avatar>
                  <ImageIcon />
                </Avatar>
              </ListItemAvatar>
              <ListItemText>
                <Typography variant="subtitle1" color="textSecondary">
                  {" "}
                  Connect
                </Typography>{" "}
              </ListItemText>
            </ListItem>
          </List>
        </Box>
      </Grid>
    </PageContainer>
  );
}

LanguageMenu = () => {
  const { t: translate, i18n } = useTranslation();
  const classes = useStyles();

  const checkBox = (language: "en" | "th") => {
    if (i18n.language === language) {
      return (
        <ListItemSecondaryAction className={classes.menuRightIcon}>
          <CheckIcon />
        </ListItemSecondaryAction>
      );
    }
    return null;
  };

  const handleChangeLanguage = (language: "en" | "th") => {
    i18n.changeLanguage(language);
  };

  return (
    <List component="nav" aria-label="sidemenu">
      <ListItem button key="th" onClick={() => handleChangeLanguage("th")}>
        <ListItemText primary={translate("language.th")} />
        {checkBox("th")}
      </ListItem>
      <ListItem button key="en" onClick={() => handleChangeLanguage("en")}>
        <ListItemText primary={translate("language.en")} />
        {checkBox("en")}
      </ListItem>
    </List>
  );
}

PropertyList = ({ data, nested }: any) => {
  return (
    <List disablePadding dense>
      {Object.entries(data).map(([key, value]: any) => (
        <PropertyListItem
          key={key}
          itemKey={key}
          itemValue={value}
          nested={nested}
        />
      ))}
    </List>
  )
}

export function SectionWithList({
    nodes,
    children,
    ...params
}: Omit<Parameters<typeof Section>[0], 'children'> & {
    children?: React.ReactNode
    nodes: ExtendedTlObject[]
}) {
    return (
        <Section {...params}>
            {children && <Typography variant="body1">{children}</Typography>}
            <List>
                {nodes.map((node) => (
                    <ListItemTlObject node={node} key={node.id} />
                ))}
            </List>
        </Section>
    )
}

ModuleList = (props: ModuleListProps) => {
  const classes = useStyles({});
  return (
            <Grid item xs={12} key={props.categoryName}>
              <Paper>
                <Typography variant="h6" gutterBottom className={classes.root}>
                  {getCategoryName(props.categoryModules)}
                </Typography>
                <List dense={true}>
                {Object.entries(props.categoryModules).map(
                  ([moduleKey, moduleObject]) => {
                    return (
                      <ListItem>
                    <Typography variant="subtitle1" gutterBottom>
                      <a href={`/checklist/${props.categoryName}/${moduleKey}`} >
                        {moduleObject.title}
                      </a>
                    </Typography>
                    </ListItem>);
                  },
                )}
                </List>
              </Paper>
            </Grid>

  );

}

export function SectionSideBar(props: ISectionProps): JSX.Element {
  return (
    <SideBar>
      <List dense>
        {Object.keys(props.sections).map((sectionKey, index) => {
          const { Icon, text, ref, hidden } = props.sections[sectionKey as PreferenceSections];
          if (hidden === true) return <></>;
          return (
            <React.Fragment key={sectionKey}>
              {index > 0 && <Divider />}
              <SideMenuListItem button index={index} onClick={() => ref.current?.scrollIntoView({ behavior: 'smooth', block: 'start' })}>
                <ListItemIcon>
                  <Icon />
                </ListItemIcon>
                <ListItemText primary={text} />
              </SideMenuListItem>
            </React.Fragment>
          );
        })}
      </List>
    </SideBar>
  );
}

UserList: React.FC<UserListProps> = ({ className, users }: UserListProps) => {
    const classes = useStyles();

    return (
        <Box className={className} p={2}>
            <Typography variant="h5" gutterBottom>Users ({users.length})</Typography>
            <List className={classes.list}>
                {users.map((user) => <User key={user.id} user={user}/>)}
            </List>
        </Box>
    );
}

SidebarNav = (props) => {
  const { pages, className, ...rest } = props;

  const classes = useStyles();

  return (
    <List {...rest} className={clsx(classes.root, className)}>
      {pages.map((page) => (
        <ListItem className={classes.item} disableGutters key={page.title}>
          <Link href={page.href}>
            <Button
              // activeClassName={classes.active}
              className={classes.button}
              // to={page.href}
            >
              <div className={classes.icon}>{page.icon}</div>
              {page.title}
            </Button>
          </Link>
        </ListItem>
      ))}
    </List>
  );
}

Summary: React.FC<SummaryProps> = ({ meta }) => {
  return (
    <>
      <Typography variant="subtitle2" component="h2">
        Summary
      </Typography>
      <Box my={1}>
        <MUIAlert severity={AlertType.INFO}>
          This is a summary of the calls results used to send your voice
          notification. To learn more about call status and definitions visit{' '}
          <Link
            href="https://www.twilio.com/docs/voice/api/call-resource#call-status-values"
            target="_blank"
            rel="noopener"
          >
            Twilio Call Resource documentation
          </Link>
        </MUIAlert>
      </Box>
      <List dense>
        {Object.values(CallStatus).map((status) => {
          const { count = {} as Count } = meta;
          return (
            <ListItem key={status} dense style={{ padding: 0 }}>
              <ListItemText style={{ margin: 0 }}>
                <Typography variant="subtitle1" component="div">
                  {`${count[status]} - ${status}`}
                </Typography>
              </ListItemText>
            </ListItem>
          );
        })}
      </List>
    </>
  );
}

export function ListDependents({
  onEdit = () => {
    /* default do nothing */
  },
  editing
}: ListDependentsProps): ReactElement {
  const dependents = useSelector(
    (state: TaxesState) => state.information.taxPayer.dependents
  )

  const dispatch = useDispatch()

  const drop = (i: number): void => dispatch(removeDependent(i))

  return (
    <List dense={true}>
      {dependents.map((p, i) => (
        <PersonListItem
          key={i}
          remove={() => drop(i)}
          person={p}
          editing={editing === i}
          onEdit={() => onEdit(i)}
        />
      ))}
    </List>
  )
}

ActionSheet = ({ url, text, onClose }: { url: string, text: string, onClose: () => void }) => {
	const [showSnackbar] = useSnackbar()
	return (
		<Paper>
			<Box>
				<Box padding={2}>
					<Typography variant="subtitle1">Share this page</Typography>
				</Box>
				<List>
					<ListItem button onClick={async () => {
						await navigator.clipboard.writeText(url)
						showSnackbar('success', 'Copied this page URL.')
						onClose()
					}}>
						<ListItemIcon>
							<AssignmentTurnedInIcon />
						</ListItemIcon>
						<ListItemText primary="Copy URL of this page" />
					</ListItem>
					<ListItem button onClick={() => {
						const encoded = encodeURI(url)
						const uri = `https://twitter.com/intent/tweet?text=${encoded}`
						if (!window.open(uri)) window.location.href = uri
						onClose()
					}}>
						<ListItemIcon>
							<TwitterIcon />
						</ListItemIcon>
						<ListItemText primary="Twitter" />
					</ListItem>
				</List>
				<Divider />
				<List>
					<ListItem button onClick={onClose}>
						<ListItemText primary="Cancel" />
					</ListItem>
				</List>
			</Box>
		</Paper>
	)
}

export function Header() {
  const classes = useStyles();
  const mediaQuery = useMediaQueryContext();
  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
  const location = useLocation();

  const toggleDrawer = (open) => (event) => {
    if (event && event.type === "keydown" && (event.key === "Tab" || event.key === "Shift")) {
      return;
    }

    setIsDrawerOpen(open);
  };

  return (
    <AppBar position="fixed" className={classes.appBar}>
      <Toolbar className={clsx(classes.toolbar, { container: !mediaQuery.smallScreen })}>
        {mediaQuery.smallScreen && (
          <>
            <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="open drawer" onClick={toggleDrawer(true)}>
              <MenuIcon />
            </IconButton>

            <NavDrawer toggleDrawer={toggleDrawer} isDrawerOpen={isDrawerOpen} />
          </>
        )}

        <div
          className={clsx(classes.logoContainer, {
            [classes.logoContainerSmall]: mediaQuery.smallScreen && !mediaQuery.phoneView
          })}
        >
          <Link to="/" className={classes.logoContainer}>
            <img src="/images/akashlytics_logo_compact.png" alt="Akashlytics logo" className={clsx(classes.logo, "App-logo")} />
          </Link>
        </div>

        {!mediaQuery.smallScreen && (
          <List component="nav" aria-labelledby="main navigation" className={classes.navDisplayFlex}>
            <Link to="/deploy" className={classes.linkText}>
              <ListItem className={classes.actionButtonListItem}>
                <Button
                  variant={location.pathname === "/deploy" ? "outlined" : "contained"}
                  className={clsx(classes.actionButtonBase, {
                    [classes.actionButton]: location.pathname !== "/deploy"
                  })}
                >
                  Deploy
                  <Box marginLeft=".5rem">
                    <CloudUploadIcon />
                  </Box>
                </Button>
              </ListItem>
            </Link>

            {navLinks.map(({ title, path }) => (
              <Link to={path} key={title} className={classes.linkText}>
                <ListItem button selected={location.pathname === path} classes={{ root: classes.navButton }}>
                  <ListItemText primary={title} />
                </ListItem>
              </Link>
            ))}
          </List>
        )}
      </Toolbar>
    </AppBar>
  );
}

export default function NavDrawer({
  currentSection,
  currentTable,
  ...props
}: INavDrawerProps) {
  const classes = useStyles();

  const { sections } = useFiretableContext();

  return (
    <Drawer open {...props} classes={{ paper: classes.paper }}>
      <Grid
        container
        spacing={1}
        wrap="nowrap"
        alignItems="center"
        className={classes.logoRow}
      >
        <Grid item>
          <IconButton
            aria-label="Close navigation drawer"
            onClick={props.onClose as any}
          >
            <CloseIcon />
          </IconButton>
        </Grid>

        <Grid item className={classes.logo}>
          <FiretableLogo />
        </Grid>
      </Grid>

      <nav>
        <List>
          <li>
            <ListItem
              button
              classes={{ root: classes.listItem }}
              component={Link}
              to={routes.home}
            >
              <ListItemIcon className={classes.listItemIcon}>
                <HomeIcon />
              </ListItemIcon>
              <ListItemText
                primary="Home"
                classes={{ primary: classes.listItemText }}
              />
            </ListItem>
          </li>

          <Divider variant="middle" className={classes.divider} />

          {sections &&
            Object.entries(sections).map(([section, tables]) => (
              <NavDrawerItem
                key={section}
                section={section}
                tables={tables}
                currentSection={currentSection}
                currentTable={currentTable}
              />
            ))}
        </List>
      </nav>
    </Drawer>
  );
}

MonitoringDialog: React.FC<MonitoringDialogProps> = ({ onClose, open }) => {
    const dispatch = useDispatch();
    const activeMetrics = useSelector((state: RootState) => state.monitoring.activeMetrics);
    const classes = useStyles();

    const metricList = Object.keys(activeMetrics).map((key, index) => {
        return (
            <ListItem key={index}>
                <ListItemIcon>
                    {metricLookup[key].icon}
                </ListItemIcon>
                <ListItemText id="switch-list-label-wifi" primary={metricLookup[key].label} />
                <ListItemSecondaryAction>
                    <Switch
                        edge="end"
                        onChange={(_event, checked) => dispatch(setMonitoringMetric(key, checked))}
                        checked={activeMetrics[key as MonitoringMetric].active}
                        inputProps={{ 'aria-labelledby': 'switch-list-label-wifi' }}
                    />
                </ListItemSecondaryAction>
            </ListItem>
        );
    });

    return (
        <Dialog aria-labelledby="simple-dialog-title" open={open} onClose={onClose}>
            <DialogTitle id="simple-dialog-title">
                <Typography variant="h5">
                    Select monitoring metrics
	      </Typography>
            </DialogTitle>
            <List className={classes.root}>
                {metricList}
            </List>
        </Dialog>
    );

}

render() {
    const comments = this.props.commentsList.map((comment, index) => (
      <div key={index}>
        <Comment reviewComment={comment} file={this.props.file} />
        <Divider />
      </div>
    ));
    const reviewTimeStamp = timeAgo(
      new Date().getTime(),
      this.props.reviewRequest.timestamp
    );
    return (
      <List
        subheader={
          <Grid container direction="column" spacing={0}>
            <Grid container direction="row" spacing={0}>
              <Grid item style={style.reviewIcon}>
                <RateReviewIcon color="primary" />
              </Grid>
              <Grid item>
                <Typography
                  color="primary"
                  style={style.commentListHeader}
                  gutterBottom
                >
                  {'Review requested: ' + this.props.reviewRequest.description}
                </Typography>
              </Grid>
            </Grid>
            <Grid item>
              <Typography
                color="primary"
                style={style.commentListDescription}
                gutterBottom
              >
                {'Requested by: ' + this.props.reviewRequest.requester}
              </Typography>
            </Grid>
            <Grid item>
              <Typography color="primary" style={style.commentListDescription}>
                {'Opened ' + reviewTimeStamp}
              </Typography>
            </Grid>
          </Grid>
        }
      >
        {' '}
        {comments}{' '}
      </List>
    );
  }