@material-ui/core#ListItem 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>
  )
}

private _renderEntries() {
    return this.state.entries.map((entry, index) => {
      return (
        <React.Fragment key={`${entry.id}-fragment`}>
          {index ? <Divider /> : undefined}
          <ListItem
            key={`${entry.id}-listItem`}
            className={classes(logEntryClass)}
          >
            <Typography
              className={classes(logEntryTimeClass)}
              color="textSecondary"
              variant="body2"
              key={`${entry.id}-timestamp`}
            >
              {entry.date.toTimeString().split(' ')[0]}
            </Typography>
            <Typography
              className={classes(logEntryValueClass)}
              color={entry.error ? 'error' : 'textPrimary'}
              variant="body2"
              key={`${entry.id}-value`}
              component="div"
            >
              {entry.value}
            </Typography>
          </ListItem>
        </React.Fragment>
      );
    });
  }

Player = ({ player, isHost, isCzar, onPlayerKick, isCurrentUserHost }: any) => {
  function renderIcon() {
    return <div style={!isCzar ? { opacity: 0 } : {}}>
      <ListItemAvatar>
        <Avatar>
          <StyleIcon />
        </Avatar>
      </ListItemAvatar>
    </div>
  }

  function renderKick() {
    if (isHost || !isCurrentUserHost) {
      return null;
    }

    return <ListItemSecondaryAction style={{ right: '-10px' }}>
      <Button color="secondary" onClick={() => { onPlayerKick(player?._id) }}>Kick</Button>
    </ListItemSecondaryAction>
  }

  return <ListItem>
    {renderIcon()}
    <ListItemText primary={player.username} secondary={`Score: ${!player?.score ? 0 : player.score}`} />
    {renderKick()}
  </ListItem>;
}

AlertListItem = ({ alert }: { alert: Alert }) => {
    const classes = useStyles();
    const [alertState, setAlertState] = useState({data: alert, updatedAt: alert.updatedAt});

    const onAlertChanged = (newAlert: Alert) => {
        setAlertState({
            data: newAlert,
            updatedAt: (new Date()).toISOString(),
        });
    };

    return (
        <ListItem dense key={alertState.data.id}>
            <ListItemIcon className={classes.listItemIcon}>
                <AlertStatus alert={alertState.data} />
            </ListItemIcon>
            <ListItemText
                primary={alertState.data.message}
                primaryTypographyProps={{
                    variant: 'body1',
                    className: classes.listItemPrimary,
                }}
                secondary={
                    <Typography noWrap variant="body2" color="textSecondary">
                        Created {moment(alertState.data.createdAt).fromNow()}
                    </Typography>
                }
            />
            <ListItemSecondaryAction>
                <AlertActionsMenu alert={alertState.data} onAlertChanged={onAlertChanged} />
            </ListItemSecondaryAction>
        </ListItem>
    );
}

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

SettingsNotifications = () => {
    const classes = useStyles();
    const [notificationsFlag, setNotificationsFlag] = useState<boolean>(false);
    const dispatch: AppDispatch = useDispatch();

    const { loading } = useSelector((state: RootState) => state.common);

    useEffect(() => {
        setNotificationsFlag(localStorageService.getNotificationFlag());
    }, [dispatch]);

    const handleChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
        setNotificationsFlag(event.target.checked);
        await dispatch(updateNotificationsState(event.target.checked));
    };

    return (
        <ListItem className={classes.root} dense>
            <ListItemIcon className={classes.icon}>
                <NotificationsIcon />
            </ListItemIcon>
            <ListItemText primary={<span>Just went live notification</span>} />
            <ListItemSecondaryAction>
                <AntSwitch
                    className={classes.switch}
                    checked={notificationsFlag}
                    onChange={async (e) => await handleChange(e)}
                    name="notifications-state"
                    color="primary"
                    inputProps={{ 'aria-label': 'secondary checkbox' }}
                    disabled={loading}
                />
            </ListItemSecondaryAction>
        </ListItem>
    );
}

AlphaLink = () => {
  const styles = useStyles();

  const handleClick = useCallback(() => {
    shell.openExternal(outerWildsAlphaUrl);
  }, []);

  return (
    <ListItem className={styles.root}>
      <Button
        variant="outlined"
        color="secondary"
        onClick={handleClick}
        startIcon={<DownloadIcon />}
      >
        {globalText.alphaWebsite}
      </Button>
    </ListItem>
  );
}

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 RoundSettings() {
  const currentGame = React.useContext(CurrentGameContext)

  return (
    <RoundSettingsList>
      {currentGame.rounds.map((round, index) => {
        return (
          <ListItem key={round.id}>
            <ListItemText>
              <Box pl={2}>
                {index + 1}. {capitalize(round.value)}
              </Box>
            </ListItemText>
          </ListItem>
        )
      })}
    </RoundSettingsList>
  )
}

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

export function SharedDialogButton(props: {
  onClick: () => void;
  icon: React.ReactElement;
  label: string;
  disabled?: boolean;
}) {
  return (
    <ListItem disableGutters={true}>
      <Button
        disabled={props.disabled}
        style={{ width: "100%", backgroundColor: "#efefef", padding: "13px" }}
        onClick={props.onClick}
      >
        {props.icon}
        <span style={{ width: "100%", textAlign: "left", marginLeft: "8px" }}>
          {props.label}
        </span>
      </Button>
    </ListItem>
  );
}

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

render() {
    const childPages = this.props.pageGroup.getChildPages();
    const padding = paddingForLevel(this.props.offset);
    const { classes, ...menuProps } = this.props;
    return (
      <Collapse in={childPages.length > 0} timeout="auto" mountOnEnter unmountOnExit>
        <div>
          <ListItem
            className={this.props.classes.menuItem}
            disabled
          >
            <ListItemText
              style={padding}
              primary={this.props.pageGroup.name} />
          </ListItem>
          {childPages.map(childPage =>
            <MenuPage
              {...menuProps}
              key={childPage.key}
              offset={this.props.offset}
              page={childPage}
            />
          )}
        </div>
      </Collapse>
    );
  }

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

export default function ExpandableElement({ children, expandable, defaultOpen }: Props): ReactElement | null {
  const classes = useStyles()
  const [open, setOpen] = useState<boolean>(Boolean(defaultOpen))

  const handleClick = () => {
    setOpen(!open)
  }

  return (
    <div className={`${classes.root} ${classes.rootLevel2}`}>
      <ListItem button onClick={handleClick} className={classes.header}>
        {children}
        {open ? <ExpandLess /> : <ExpandMore />}
      </ListItem>
      <Collapse in={open} timeout="auto" unmountOnExit>
        <div className={classes.contentLevel12}>{expandable}</div>
      </Collapse>
    </div>
  )
}

SearchItem = ({ item, onClick }: SearchItemProps) => {
  const classes = useStyles();
  const { i18n } = useTranslation();
  const lineType = getLineTypeLabel(item.lineType);
  const stationName = getStationName(item, i18n.language);
  return (
    <ListItem className={classes.listItem} onClick={() => onClick(item.id)}>
      <ListItemText primary={`${lineType} [${item.id}] ${stationName}`} />
    </ListItem>
  );
}

ReviewListItem: FC<any> = props => {
    const { data, onClick } = props;
    const classes = useStyles();
    const { content } = data;

    if (!content) {
        return null;
    }

    return (
        <ListItem
            button
            component={SearchListItemLink}
            data={data}
            onClick={onClick}
            alignItems="flex-start"
        >
            <ListItemAvatar className={classes.avatar}>
                <Avatar alt={content.reference}>
                    <CommentIcon fontSize="large" />
                </Avatar>
            </ListItemAvatar>
            <ListItemText
                primary={<Rating value={content.rating} readOnly />}
                secondary={<ReviewComment comment={content.comment} />}
                // @ts-ignore Could not make TS happy
                secondaryTypographyProps={secondaryTypographyProps}
            />
        </ListItem>
    );
}

SidebarListItem = styled(ListItem)`
  color: ${({ $customSelected }: SidebarListItemProps) =>
    $customSelected ? selectedColor : textColor};
  background: transparent;
  border-bottom: 1px solid transparent;
  border-top: 1px solid transparent;
  width: 100%
  &:hover {
    background: transparent;
    border-bottom: 1px solid ${hoverColor};
    border-top: 1px solid ${hoverColor};
  }
`

function TokenListItem({
  tokenInfo,
  onClick,
}: {
  tokenInfo: TokenInfo;
  onClick: (mint: PublicKey) => void;
}) {
  const mint = new PublicKey(tokenInfo.address);
  return (
    <ListItem
      button
      onClick={() => onClick(mint)}
      style={{ padding: "10px 20px" }}
    >
      <TokenIcon mint={mint} style={{ width: "30px", borderRadius: "15px" }} />
      <TokenName tokenInfo={tokenInfo} />
    </ListItem>
  );
}

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>

  );

}

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

PersonListItem = ({
  person,
  remove,
  onEdit,
  editing = false
}: PersonListItemProps): ReactElement => (
  <ListItem className={editing ? 'active' : ''}>
    <ListItemIcon>
      <PersonIcon />
    </ListItemIcon>
    <ListItemText
      primary={`${person.firstName} ${person.lastName}`}
      secondary={formatSSID(person.ssid)}
    />
    {(() => {
      if (editing) {
        return (
          <ListItemIcon>
            <IconButton onClick={onEdit} edge="end" aria-label="edit">
              <EditIcon />
            </IconButton>
          </ListItemIcon>
        )
      }
    })()}
    <ListItemSecondaryAction>
      <IconButton onClick={remove} edge="end" aria-label="delete">
        <DeleteIcon />
      </IconButton>
    </ListItemSecondaryAction>
  </ListItem>
)

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