@material-ui/core#Box TypeScript Examples

LatestBlock = (props: {block: BlockInfo}) => {

    return (
        <Card>
            <CardHeader title="Latest block"/>
            <CardContent>
                <Grid container alignItems="center">
                    <Grid item md={6} xs={12}>
                        <Typography variant="h6">Block number:</Typography>
                        <Typography variant="subtitle2">{props.block.number}</Typography>
                        <Divider light/>
                        <Box m={"0.5rem"}/>
                        <Typography variant="h6">Hash:</Typography>
                        <Typography variant="subtitle2">{props.block.hash}</Typography>
                    </Grid>
                </Grid>
            </CardContent>
        </Card>
    );
}

ChartType: React.FC<ChartTypeProps> = ({
  typeTexts,
  chartTypes,
  chartType,
  setChartType,
}) => {
  const classes = useStyles();
  const { palette } = useTheme();

  return (
    <Box display='flex' alignItems='center'>
      {chartTypes.map((value, index) => (
        <Box
          key={index}
          className={classes.chartType}
          bgcolor={chartType === value ? palette.grey.A400 : 'transparent'}
          onClick={() => setChartType(value)}
        >
          <Typography variant='caption'>{typeTexts[index]}</Typography>
        </Box>
      ))}
    </Box>
  );
}

function RebaseTimer() {
    const currentBlockTime = useSelector<IReduxState, number>(state => {
        return state.app.currentBlock;
    });

    const nextRebase = useSelector<IReduxState, number>(state => {
        return state.app.nextRebase;
    });

    const timeUntilRebase = useMemo(() => {
        if (currentBlockTime && nextRebase) {
            const seconds = secondsUntilBlock(currentBlockTime, nextRebase);
            return prettifySeconds(seconds);
        }
    }, [currentBlockTime, nextRebase]);

    return (
        <Box className="rebase-timer">
            <p>
                {currentBlockTime ? (
                    timeUntilRebase ? (
                        <>
                            <strong>{timeUntilRebase}</strong> to Next Rebase
                        </>
                    ) : (
                        <strong>Rebasing</strong>
                    )
                ) : (
                    <Skeleton width="200px" />
                )}
            </p>
        </Box>
    );
}

StatusDialog: React.FC<StatusDialogProps> = props => {
    return (
        <Dialog
            open={props.visible}
            style={{ userSelect: 'none', textAlign: 'center' }}
            onClick={event => event.stopPropagation()}
        >
            <DialogContent>
                <Typography variant="h6">{props.title}</Typography>
                {props.extraInfo !== undefined && (
                    <Typography variant="caption" color="textSecondary">
                        {props.extraInfo}
                    </Typography>
                )}
                <Box my={1}>
                    <PropertyTable>
                        <tbody>{props.children}</tbody>
                    </PropertyTable>
                </Box>
                <DialogActions>
                    <Button
                        style={{ margin: '0 auto' }}
                        onClick={event => props.onClickDone(event)}
                    >
                        Done
                    </Button>
                </DialogActions>
            </DialogContent>
        </Dialog>
    )
}

export function LinearProgressWithLabel(props: LinearProgressProps & { value: number; min: number; max: number; }) {
  return props.value > 0 ? (
      <div style={{ width: '98%' }}>
        <Box display="flex" alignItems="center">
          <Box width="100%" mr={1}>
            <LinearProgress variant="determinate" value={normalise(props.value, props.min, props.max)} />
          </Box>
          <Box minWidth={35} style={{ whiteSpace: "nowrap" }}>
            <Typography variant="body2" color="textSecondary">
              {`${Math.round(normalise(props.value, props.min, props.max))}% (${props.value}/${props.max})`}
            </Typography>
          </Box>
        </Box>
      </div>
  ) : null;
}

private _makeSetupEntry(arr, id) {
    return arr.map((value, index) => {
      if (index % 2) {
        return (
          <Box
            key={`${id}-innerBox${index}`}
            fontWeight="fontWeightBold"
            display="inline"
          >
            {value}
          </Box>
        );
      } else {
        return (
          <React.Fragment key={`${id}-innerFrag${index}`}>
            {value}
          </React.Fragment>
        );
      }
    });
  }

Documentation = () => {

  const [documentation, setDocumentation] = useState("");
  const classes = useStyles();
  const { topic } = useParams();
  const layoutContext = useContext(LayoutContext);

  useEffect(() => {
    layoutContext.setLoading(true);
    DocumentationService.getDocumentation(topic).then((res: string) => {

      setDocumentation(res);
      layoutContext.setLoading(false);
    }).catch(() => layoutContext.setLoading(false));

  }, []);

  useEffect(() => {
    fixImages();
    setTimeout(() => hljs.initHighlighting(), 500);
  }, [documentation]);


  return (
    <Box>
      <Paper id="doc-container" className={classes.root}>
        <Typography variant="h2">Documentation</Typography>
        <ReactMarkdown source={documentation} />
      </Paper>
    </Box >
  );
}

SortButton: React.FC<SortButtonProps> = ({
  toggleSortOrder,
  ascending,
}) => {
  const classes = useStyles();
  return (
    <Box className={classes.filterWrapper} onClick={toggleSortOrder}>
      <Typography>{ascending ? '↑' : '↓'}</Typography>
    </Box>
  );
}

MessageBlock = (props: IMessageBlockProps) => {
  const classes = useStyles();

  if (props.messages.length === 0) return (<div />);
  const firstMessage = props.messages[0];
  const ownMessage = firstMessage.author === me;
  const systemMessage = firstMessage.author === system;
  const alignment = ownMessage ? classes.messageRight : classes.messageLeft;
  const className = ownMessage ? classes.ownMessage : classes.receivedMessage;

  return (
    <Box className={alignment}>
      <Box className={classes.messageAuthorImg}>
        {
          ownMessage ? "" : <img className={classes.auhtorImg} src={firstMessage.author.avatar} width="40" />
        }
      </Box>
      <Box className={classes.messageContent} textAlign={ownMessage ? "right" : "left"}>
        <Box className={classes.participantNameMessage}><Typography variant="caption">{firstMessage.author.username} {firstMessage.date}</Typography></Box>
        {
          props.messages.map((m, i) => {
            return (
              <Box key={i} className={classes.messageChip}>
                {
                  m.type === "message" ? MessageChip(m.content, className) : NotificationChip(m.content)
                }
              </Box>
            );
          })
        }
      </Box>
    </Box>
  );
}

CustomModal: React.FC<CustomModalProps> = ({
  open,
  onClose,
  children,
  background,
  overflow,
}) => {
  const classes = useStyles({ background, overflow });
  return (
    <Modal
      open={open}
      onClose={onClose}
      BackdropComponent={Backdrop}
      BackdropProps={{ timeout: 500 }}
    >
      <Fade in={open}>
        <Box className={classes.wrapper}>{children}</Box>
      </Fade>
    </Modal>
  );
}

Loading = () => {
  const layoutContext = useContext(LayoutContext);
  const loading = layoutContext.loading;
  const lp = <LinearProgress />;

  return (
    <Box style={{ height: '4px' }}>{loading ? lp : null}</Box>

  );
}

DoubleCurrencyLogo: React.FC<DoubleCurrencyLogoProps> = ({
  currency0,
  currency1,
  size = 16,
  margin = false,
}: DoubleCurrencyLogoProps) => {
  const classes = useStyles({ size, margin });
  return (
    <Box className={classes.wrapper}>
      <CurrencyLogo currency={currency0} size={size.toString() + 'px'} />
      <CurrencyLogo currency={currency1} size={size.toString() + 'px'} />
    </Box>
  );
}

MainCard: React.FC<MainCardProps> = ({ title, actions, children }) => {
    const classes = useStyles();

    return (
        <Card className={classes.card}>
            <Typography className={classes.title} variant="h5" style={{ display: 'flex', alignItems: 'center' }}>
                <Box flexGrow={1}>
                    {title}
                </Box>

                {actions}
            </Typography>
            <CardContent>
                {children}
            </CardContent>
        </Card>
    );
}

Footer: React.FC = () => {
  const classes = useStyles();
  const copyrightYear = new Date().getFullYear();

  return (
    <Box className={classes.footer}>
      <QuickIcon />
      <Typography>© {copyrightYear} QuickSwap.</Typography>
    </Box>
  );
}

ButtonActionCreator: React.FC<{ buttonDuration: ButtonPress }> = ({ buttonDuration }) => {
    const draggableId = uuidv4();

    return (
        <Droppable droppableId="PALETTE" direction="horizontal" isDropDisabled={true}>
            {(provided, _snapshot) => (
                <div ref={provided.innerRef} {...provided.droppableProps}>
                    <Box width={1} style={{ display: 'inline-flex', verticalAlign: 'middle', alignItems: 'center' }}>
                        <Draggable key={draggableId} draggableId={draggableId} index={buttonDuration as number}>

                            {(provided, snapshot) => (
                                <Box style={{ width: 50, height: 50 }}>
                                    <div
                                        style={{ width: 50, height: 50 }}
                                        ref={provided.innerRef}
                                        {...provided.draggableProps}
                                        {...provided.dragHandleProps}>

                                        <ButtonPressIcon press={buttonDuration} isButton={true} />
                                    </div>
                                    {snapshot.isDragging &&
                                        <ButtonPressIcon press={buttonDuration} isButton={true} />
                                    }
                                </Box>
                            )}
                        </Draggable>


                        <Typography>
                            {buttonDuration === ButtonPress.Short ? "Short button press" : "Long button press"}
                        </Typography>
                    </Box>
                </div>
            )}
        </Droppable>
    );
}

function LogRow({ logRecord, index }) {
  const classes = useStyles();

  return (
    <Box>
      <Typography
        variant="body2"
        className={`${classes.logNumber} ${classes.logFont}`}
      >
        {index}
      </Typography>
      <Typography
        variant="body2"
        className={`${classes.logEntry} ${classes.logFont}`}
      >
        <Ansi
          className={
            logRecord.level === "info"
              ? classes.logTypeInfo
              : classes.logTypeError
          }
        >
          {moment(logRecord.timestamp).format("LTS")}
        </Ansi>
        {"  "}
        <Ansi>
          {logRecord.log
            .replaceAll("\\n", "\n")
            .replaceAll("\\t", "\t")
            .replaceAll("\\", "")}
        </Ansi>
      </Typography>
    </Box>
  );
}

Popups: React.FC = () => {
  // get all popups
  const activePopups = useActivePopups();
  const urlWarningActive = useURLWarningVisible();
  const classes = useStyles({
    extraPadding: urlWarningActive,
    height: activePopups?.length > 0 ? 'fit-content' : 0,
  });

  return (
    <>
      <Box className={classes.fixedPopupColumn}>
        {activePopups.map((item) => (
          <PopupItem
            key={item.key}
            content={item.content}
            popKey={item.key}
            removeAfterMs={item.removeAfterMs}
          />
        ))}
      </Box>
      <Box className={classes.mobilePopupWrapper}>
        <Box className={classes.mobilePopupInner}>
          {activePopups // reverse so new items up front
            .slice(0)
            .reverse()
            .map((item) => (
              <PopupItem
                key={item.key}
                content={item.content}
                popKey={item.key}
                removeAfterMs={item.removeAfterMs}
              />
            ))}
        </Box>
      </Box>
    </>
  );
}

Empty = ({ onClose }: { onClose: () => void }) => {

	useEffect(onClose, [])

	return (
		<Box display="flex" fontSize={18} fontWeight={500} padding={3} justifyContent="center">
			The items are empty.
		</Box>
	)
}

PlusHelper: React.FC<{ text: string; color?: string }> = ({
  text,
  color,
}) => {
  const classes = useStyles({ color });

  return (
    <CustomTooltip title={text}>
      <Box className={classes.questionWrapper}>
        <PlusCircle size={16} />
      </Box>
    </CustomTooltip>
  );
}

SKUList = ({ skus }: { skus: SKU[] }) => {
	return (
		<Box>
			{
				skus.map((sku, index) => {
					return <SKUListItem key={index} sku={sku} />
				})
			}
		</Box>
	)
}

TransactionErrorContent: React.FC<TransactionErrorContentProps> = ({
  message,
  onDismiss,
}) => {
  const classes = useStyles();
  return (
    <Box padding={4}>
      <Box>
        <Box className={classes.modalHeader}>
          <Typography variant='h5' color='error'>
            Error!
          </Typography>
          <CloseIcon onClick={onDismiss} />
        </Box>
        <Box className={classes.modalContent}>
          <TransactionFailed />
          <Typography variant='body1'>{message}</Typography>
        </Box>
      </Box>
      <Button className={classes.submitButton} onClick={onDismiss}>
        Dismiss
      </Button>
    </Box>
  );
}

ProductList = ({ products }: { products: ProductDraft[] }) => {
	return (
		<Box>
			{
				products.map((product, index) => {
					return <ProductListItem key={index} product={product} />
				})
			}
		</Box>
	)
}

ConfirmationPendingContent: React.FC<ConfirmationPendingContentProps> = ({
  onDismiss,
  pendingText,
}) => {
  const classes = useStyles();
  return (
    <Box padding={4}>
      <Box className={classes.modalHeader}>
        <CloseIcon onClick={onDismiss} />
      </Box>
      <Box className={classes.modalContent}>
        <Box my={4} display='flex' justifyContent='center'>
          <CircularProgress size={80} />
        </Box>
        <Typography variant='h5'>Waiting For Confirmation</Typography>
        <Typography variant='body1'>{pendingText}</Typography>
        <Typography variant='caption'>
          Please confirm this transaction in your wallet.
        </Typography>
      </Box>
    </Box>
  );
}

Increase = ({ sku, callback }: { sku: SKU, callback: () => void }) => {

	const [setProcessing] = useProcessing()

	const incrementCount = useInput(0)

	const increase = async (event) => {
		event.preventDefault()
		const amount = Math.floor(Number(incrementCount.value))
		if (amount !== 0) {
			setProcessing(true)
			try {
				await sku.increaseInventory(amount)
			} catch (error) {
				console.error(error)
			}
			setProcessing(false)
			callback()
		}
	}
	return (
		<form onSubmit={increase}>
			<Paper>
				<Box padding={2} fontSize={18} fontWeight={500}>
					Add inventory
					<Box maxWidth={600} minWidth={400} flexGrow={1} display='flex' alignItems='center' justifyContent='space-between'>
						<Input variant='outlined' margin='dense' required {...incrementCount} />
						<Button type='submit' variant='contained' color='primary'>Add</Button>
					</Box>
				</Box>
			</Paper>
		</form>
	)
}

ToggleSwitch: React.FC<{ toggled: boolean; onToggle: () => void }> = ({
  toggled,
  onToggle,
}) => {
  const classes = useStyles({ toggled });
  return (
    <Box
      className={classes.wrapper}
      bgcolor={toggled ? 'rgba(15, 198, 121, 0.2)' : 'transparent'}
      onClick={onToggle}
    >
      <Box
        className={classes.innerCircle}
        left={toggled ? 'unset' : '2px'}
        right={toggled ? '2px' : 'unset'}
      />
    </Box>
  );
}

function GitHubGistWidget(props: WidgetArgs) {
  const classes = useStyles(props);
  const { t } = useTranslation();
  const [url, setURL] = useState<string>("");

  const setGistURL = useCallback(
    (url: string) => {
      try {
        const location = new URL(url);
        if (location.host !== "gist.github.com") {
          return;
        } else {
          props.setAttributes({
            url: location.origin + location.pathname,
          });
        }
      } catch (error) {}
    },
    [props]
  );

  if (props.attributes["url"]) {
    return (
      <Box className={"preview github-gist"} style={{ whiteSpace: "normal" }}>
        <Gist url={props.attributes["url"]}></Gist>
        {!props.isPreview && (
          <Box className={clsx(classes.actionButtonsGroup)}>
            <IconButton onClick={() => props.removeSelf()}>
              <TrashCanOutline></TrashCanOutline>
            </IconButton>
          </Box>
        )}
      </Box>
    );
  }

  if (props.isPreview) {
    return null;
  }

  return (
    <Card elevation={2} className={clsx(classes.card)}>
      <Typography variant={"h5"}>
        {t("widget/crossnote.github_gist/title")}
      </Typography>
      <TextField
        label={t("widget/crossnote/github_gist/enter-github-gist-url")}
        placeholder={"https://gist.github.com/..."}
        value={url}
        onChange={(event) => setURL(event.target.value)}
        fullWidth={true}
        onKeyUp={(event) => {
          if (event.which === 13) {
            setGistURL(url);
          }
        }}
      ></TextField>
      <Box className={clsx(classes.actionButtonsGroup)}>
        <Tooltip title={t("general/Delete")}>
          <IconButton onClick={() => props.removeSelf()}>
            <TrashCan></TrashCan>
          </IconButton>
        </Tooltip>
      </Box>
    </Card>
  );
}

List = ({ data }: { data: Order[] }) => {
	return (
		<Box>
			{
				data.map((data, index) => {
					return <ListItem key={index} data={data} />
				})
			}
		</Box>
	)
}

SyrupAPR: React.FC<{ syrup: SyrupInfo; dQUICKAPY: string }> = ({
  syrup,
  dQUICKAPY,
}) => {
  const { palette } = useTheme();
  const isDQUICKStakingToken = syrup.stakingToken.equals(
    returnTokenFromKey('DQUICK'),
  );

  return (
    <>
      <Typography variant='body2' style={{ color: palette.success.main }}>
        {getTokenAPRSyrup(syrup).toLocaleString()}%
      </Typography>
      {isDQUICKStakingToken && (
        <Box display='flex'>
          <Box
            borderRadius='4px'
            border={`1px solid ${palette.grey.A400}`}
            padding='4px'
            marginTop='4px'
            display='flex'
            alignItems='center'
          >
            <CurrencyLogo currency={returnTokenFromKey('QUICK')} size='12px' />
            <Typography variant='caption' style={{ marginLeft: 4 }}>
              {dQUICKAPY}% <span style={{ color: palette.text.hint }}>APY</span>
            </Typography>
          </Box>
        </Box>
      )}
    </>
  );
}

Child = ({ index, open, onClose, children }: { index: number, open: boolean, onClose: () => void, children: any }) => {
	const zIndex = 1000 + index
	return (
		<Slide direction="left" in={open} mountOnEnter unmountOnExit
			onExited={() => {
				onClose()
			}}
		>
			<Box
				zIndex={zIndex}
				position="absolute"
				display="flex"
				flexGrow={1}
				width="100%"
				top={0}
				bottom={0}
				left={0}
				right={0}
			>
				<Paper elevation={0} square style={{ width: "100%" }}>
					{children}
				</Paper>
			</Box>
		</Slide>
	)
}