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

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

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

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

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 SideBarItem({ iconStart, iconEnd, path, label }: Props): ReactElement {
  const classes = useStyles()
  const location = useLocation()
  const isSelected = Boolean(path && matchPath(location.pathname, path))

  return (
    <StyledListItem button selected={isSelected} disableRipple>
      <ListItemIcon className={isSelected ? classes.activeIcon : classes.icon}>{iconStart}</ListItemIcon>
      <ListItemText primary={label} />
      <ListItemIcon className={isSelected ? classes.activeIcon : classes.icon}>{iconEnd}</ListItemIcon>
    </StyledListItem>
  )
}

MenuItem: FC<MenuItemProps> = (props) => {
  const { withIcons, loading, icon, iconClassName } = props;

  const renderIcon = useCallback(() => {
    if (loading) return <Loader size={24} className={iconClassName} />;
    if (icon) return cloneElement(icon, { className: iconClassName });
    return null;
  }, [loading, icon, iconClassName]);

  if (withIcons) {
    return (
      <MaterialMenuItem
        selected={props.selected}
        className={props.className}
        onClick={(e) => props.onClick?.(e, props)}
      >
        <ListItemIcon>{renderIcon()}</ListItemIcon>
        <ListItemText>{props.text}</ListItemText>
      </MaterialMenuItem>
    );
  } else {
    return (
      <MaterialMenuItem
        selected={props.selected}
        className={props.className}
        onClick={(e) => props.onClick?.(e, props)}
      >
        {props.text}
      </MaterialMenuItem>
    );
  }
}

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

ListItemTextMultibleLine = withStyles((theme: Theme) =>
  createStyles({
    primary: {
      wordBreak: 'break-all'
    },
    secondary: {
      wordBreak: 'break-all'
    }
  })
)(ListItemText)

render(): JSX.Element {
        const state = this.props.state;
        return (
            <FacetValuesList component="div" disablePadding>

                <FacetValueListItem dense disableGutters>
                    <Radio edge="start" disableRipple
                        disabled={this.props.inProgress}
                        checked={!state.isApplied}
                        onChange={(evt) => state.value = null}
                    />
                    <ListItemText primary="[ANY]" />
                </FacetValueListItem>
                <FacetValueListItem dense disableGutters>
                    <Radio edge="start" disableRipple
                        disabled={this.props.inProgress}
                        checked={state.value === true}
                        onChange={(evt) => state.value = true}
                    />
                    <ListItemText primary={`TRUE(${state.trueCount})`} />
                </FacetValueListItem>
                <FacetValueListItem dense disableGutters>
                    <Radio edge="start" disableRipple
                        disabled={this.props.inProgress}
                        checked={state.value === false}
                        onChange={(evt) => state.value = false}
                    />
                    <ListItemText primary={`FALSE(${state.falseCount})`} />
                </FacetValueListItem>

            </FacetValuesList>
        );
    }

export default function SearchGithubRepo(props: Props): JSX.Element {
  const userInfos = useUserInfoObservable();
  const githubUsername = userInfos?.['github-userName'];
  const accessToken = userInfos?.['github-token'];

  const { t } = useTranslation();
  const graphqlClient = useMemo(
    () =>
      new GraphQLClient({
        url: GITHUB_GRAPHQL_API,
      }),
    [],
  );
  useEffect(() => {
    graphqlClient.setHeader('Authorization', accessToken !== undefined ? `Bearer ${accessToken}` : '');
  }, [accessToken, graphqlClient]);

  if (githubUsername === '' || githubUsername === undefined || accessToken === '' || accessToken === undefined) {
    return <ListItemText>{t('AddWorkspace.WaitForLogin')}</ListItemText>;
  } else {
    return (
      <ClientContext.Provider value={graphqlClient}>
        <SearchGithubRepoResultList {...props} githubUsername={githubUsername} accessToken={accessToken} />
      </ClientContext.Provider>
    );
  }
}

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

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

}

CommentListItem: React.FC<CommentListItemProps> = ({ comment }) => {
  return (
    <ListItem data-test={`comment-list-item-${comment.id}`}>
      <ListItemText primary={`${comment.content}`} />
    </ListItem>
  );
}

LiveStreamListItem = (elem: FollowedLivestream) => {
    const classes = useStyles();
    const [anchorEl, setAnchorEl] = React.useState<HTMLElement | null>(null);
    const handlePopoverOpen = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
        setAnchorEl(event.currentTarget);
    };
    const [elapsedTime, setElapsedTime] = useState(getElapsedTime(elem.started_at));

    useEffect(() => {
        const timer = setInterval(() => {
            setElapsedTime(getElapsedTime(elem.started_at));
        }, 1000);

        return () => clearInterval(timer);
    }, [elem.started_at]);

    const handlePopoverClose = () => {
        setAnchorEl(null);
    };

    const open = Boolean(anchorEl);

    return (
        <>
            <ListItem
                className={classes.root}
                button
                component="a"
                target="_blank"
                rel="noopener noreferrer"
                href={elem.url}
                divider
                dense
                onMouseEnter={handlePopoverOpen}
                onMouseLeave={handlePopoverClose}
            >
                <ListItemAvatar>
                    <Avatar src={elem.profile_image_url} />
                </ListItemAvatar>
                <ListItemText
                    className={classes.streamerDiv}
                    primary={elem.display_name}
                    secondary={
                        <Typography
                            className={classes.gameText}
                            noWrap
                            variant={'subtitle2'}
                            color={'textSecondary'}
                        >
                            {elem.game}
                        </Typography>
                    }
                />
                <ListItemSecondaryAction>
                    <IconButton edge="end" disabled size={'small'}>
                        <Typography
                            noWrap
                            variant={'subtitle1'}
                            color={'textSecondary'}
                            className={classes.viewersText}
                        >
                            {formatViewers(elem.viewer_count)}
                        </Typography>
                        <ViewerIcon />
                    </IconButton>
                    <Typography
                        noWrap
                        variant={'subtitle2'}
                        color={'textSecondary'}
                        className={classes.elapsedTimeText}
                    >
                        {elapsedTime}
                    </Typography>
                </ListItemSecondaryAction>
            </ListItem>
            <PopperTitle title={elem.title} anchorEl={anchorEl} open={open} />
        </>
    );
}

function Rule({ rule }) {
  const [showMoreDetails, setShowMoreDetails] = useState(false);
  const [language] = useLanguage();
  const classes = useStyles();

  const { from, to, details, moreDetails } = rule;

  const dateFromTo = [
    from ? `${i18n.FROM[language]} ${parseDate(from)}` : "",
    to ? `${i18n.TO[language]} ${parseDate(to)}` : "",
  ].join(" ");

  return (
    <Card className={classes.cardRoot} variant="outlined">
      <CardContent>
        {dateFromTo && (
          <Typography
            component={"div"}
            className={classes.dateFromTo}
            color="textPrimary"
            gutterBottom
          >
            ? {dateFromTo}
          </Typography>
        )}
        {rule.name && (
          <Typography variant="h5" component="h2">
            {getLocalizedValue(rule.name)}
          </Typography>
        )}

        {details && (
          <Typography
            component={"div"}
            color="textPrimary"
            className={classes.rulesList}
          >
            <List component="nav" dense={true}>
              {[...details, ...(showMoreDetails ? moreDetails : [])].map(
                (detail, index) => (
                  <ListItem button key={index}>
                    <ListItemText
                      classes={{ primary: classes.rule }}
                      primary={getLocalizedValue(detail)}
                    />
                  </ListItem>
                )
              )}
            </List>
          </Typography>
        )}
      </CardContent>
      {!showMoreDetails && moreDetails && (
        <CardActions classes={{ root: classes.cardActions }}>
          <Button
            size="medium"
            color="primary"
            variant="outlined"
            onClick={() => setShowMoreDetails(true)}
          >
            {i18n.MORE_INFO[language]}
          </Button>
        </CardActions>
      )}
    </Card>
  );
}

DetailsDialog = ({ open, details, onClose }: DetailsDialogProps) => {
  const classes = useStyles();

  return (
    <Dialog maxWidth="md" fullWidth open={open} onClose={onClose}>
      <DialogTitle disableTypography className={classes.dialogTitle}>
        <Typography variant="h4">Upload Details</Typography>
        <IconButton className={classes.closeButton} onClick={onClose}>
          <CloseIcon />
        </IconButton>
      </DialogTitle>
      <DialogContent>
        <List>
          {details.map(({ file, ignoredHeaders }, index) =>
            ignoredHeaders?.length ? (
              // eslint-disable-next-line react/no-array-index-key
              <ListItem key={`${file}-${index}`}>
                <ListItemAvatar>
                  <Avatar className={classes.avatar}>
                    <WarningIcon />
                  </Avatar>
                </ListItemAvatar>
                <ListItemText
                  primary={file}
                  primaryTypographyProps={{
                    color: "textSecondary",
                    variant: "h5",
                  }}
                  secondary={`
                      These columns are not configured for import yet and were
                      not uploaded: ${ignoredHeaders
                        .map((header) => `"${header}"`)
                        .join(", ")}.
                    `}
                  secondaryTypographyProps={{ variant: "subtitle1" }}
                />
              </ListItem>
            ) : null
          )}
        </List>
      </DialogContent>
    </Dialog>
  );
}