@material-ui/core#Paper TypeScript Examples

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

export default function AuthLayout({ children, loading }: IAuthLayoutProps) {
  const classes = useStyles();

  return (
    <Div100vh className={classes.root} style={{ minHeight: "100rvh" }}>
      <Paper className={classes.paper}>
        <Typography variant="h4" component="h1" className={classes.wordmark}>
          firetable
        </Typography>
        <Typography variant="overline" className={classes.projectName}>
          {process.env.REACT_APP_FIREBASE_PROJECT_ID}
        </Typography>
        {children}

        {loading && <LinearProgress className={classes.progress} />}
      </Paper>
    </Div100vh>
  );
}

export default function ExperimentCodeSetup(): JSX.Element {
  const classes = useStyles()
  return (
    <Paper className={classes.root}>
      <Typography variant='h4'>Experiment Code Setup</Typography>
      <br />
      <Typography variant='body1'>
        See{' '}
        <Link
          href="https://github.com/Automattic/experimentation-platform/wiki/Experimenter's-Guide#writing-the-controlvariant-code-experiences"
          rel='noopener noreferrer'
          target='_blank'
          underline='always'
        >
          the wiki
        </Link>{' '}
        for platform-specific instructions.
      </Typography>
      <br />
      <Typography variant='body1'>
        When testing manually, note that <strong>changes may take up to ten minutes to propagate</strong> due to{' '}
        <Link
          href="https://github.com/Automattic/experimentation-platform/wiki/Experimenter's-Guide#the-file-system-cache"
          rel='noopener noreferrer'
          target='_blank'
          underline='always'
        >
          the file system assignment cache
        </Link>
        . As specified in the wiki, you will need to run <Code>svn up</Code> to update your sandbox copy of the cache to
        reflect the latest changes.
      </Typography>
    </Paper>
  )
}

AuthContainer = ({ children, maxWidth = "lg" }: AuthContainerProps) => {
  const classes = useStyles();

  const isXs = useMediaQuery((theme: Theme) => theme.breakpoints.down("xs"));

  return (
    <div className={classes.root}>
      <Container maxWidth={maxWidth} disableGutters={isXs}>
        <Paper elevation={0} className={classes.paper}>
          {children}
        </Paper>
      </Container>
    </div>
  );
}

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

TransactionCreateStepOne: React.FC<TransactionCreateStepOneProps> = ({
  setReceiver,
  userListSearch,
  users,
}) => {
  const classes = useStyles();

  return (
    <Paper className={classes.paper} elevation={0}>
      <UserListSearchForm userListSearch={userListSearch} />
      <UsersList users={users} setReceiver={setReceiver} />
    </Paper>
  );
}

ReactDOM.render(
    <Provider store={store}>
        <ThemeProvider theme={darkTheme}>
            <Paper square>
                <Router>
                    <Switch>
                        <Route path="/settings" component={SettingsPage} />
                        <Route component={App} />
                    </Switch>
                </Router>
            </Paper>
        </ThemeProvider>
    </Provider>,
    document.getElementById('root'),
);

render() {
    const {
      state: { error, stack },
      props: { children },
    } = this;

    if (error) {
      return (
        <Box margin={1}>
          <Paper>
            <Box px={2} maxHeight={150} overflow="hidden scroll">
              <code>
                <pre>{stack}</pre>
              </code>
            </Box>
          </Paper>
        </Box>
      );
    }

    return children;
  }

function TopSubHeader({children}: TopSubHeaderProps): React.ReactElement {
  const classes = useStyles();

  return (
    <Paper elevation={2} className={classes.container}>
      {children}
    </Paper>
  );
}

Hero: React.VFC<HeroProps> = ({ fullHeight, image, title }) => {
  const styles = useStyles();

  return (
    <Paper
      sx={{
        alignItems: 'center',
        bgcolor: fullHeight ? '#000' : 'background.paper',
        boxSizing: 'border-box',
        display: 'flex',
        height: fullHeight ? { xs: 'calc(100vh - 60px)', md: 'calc(100vh - 110px)' } : 210,
        justifyContent: 'center',
        overflow: 'hidden',
        p: 10,
        position: 'relative',
      }}
    >
      {image?.sourceUrl != null && (
        <Image
          className={clsx(styles.image, fullHeight && styles.imageContain)}
          mediaItem={image}
          next={false}
          loading="lazy"
        />
      )}
      {!fullHeight && (
        <Box sx={{ position: 'relative', zIndex: 2 }}>
          <Typography
            variant="h1"
            align="center"
            dangerouslySetInnerHTML={{ __html: title ?? '' }}
          />
        </Box>
      )}
    </Paper>
  );
}

ColumnPaper = withStyles(theme => ({
  root: {
    display: 'flex',
    flexDirection: 'column',
    flex: 1,
    padding: theme.spacing(2),
    backgroundColor:
      theme.palette.type === 'dark'
        ? theme.palette.grey[800]
        : theme.palette.grey[300],
    height: '100%',
  },
}))(Paper)

NoResults: React.FC<Props> = (props) => {
  const classes = useStyles();
  return (
    <Paper className={classes.card}>
      <img src={logo} className={classes.logo} alt="Crossfeed Icon" />
      <p>{props.message}</p>
    </Paper>
  );
}

render() {
    return (
      <Grid item xs={12} sm={6} md={4}>
        <Paper elevation={0} className={this.props.classes.box}>
          {this.props.icon && (
            <div className={this.props.classes.icon}>
              {this.props.icon}
            </div>
          )}
          <Typography variant='h5'>
            {this.props.title}
            {this.props.beta && (
              <Typography variant='caption' className={this.props.classes.beta}>BETA</Typography>
            )}
          </Typography>
          <Typography gutterBottom className={this.props.classes.description}>
            {this.props.description}
          </Typography>
        </Paper>
      </Grid>
    );
  }

CustomUrlButton = styled(Paper)({
  border: "1px solid #3866F9",
  width: 165,
  height: 31,
  boxSizing: "border-box",
  borderRadius: 21,
  cursor: "pointer",
  backgroundColor: "#fff",
  boxShadow: "none",
  textAlign: "center",
  margin: "auto",
  padding: 5,
  color: "#3866F9",
  marginTop: 12,
  fontFamily: "system-ui",
})

App = () => {
  const { token } = useAppState()
  const { setToken, showSettings } = useActions()
  return (
    <Container>
      <Box p={4} display="grid" gridGap="1rem" component={Paper}>
        <Box display="flex" justifyContent="space-between" alignItems="center">
          <Typography variant="h1">GitHub Deploy Center</Typography>
          <IconButton title="Settings" onClick={() => showSettings()}>
            <Icon>settings</Icon>
          </IconButton>
        </Box>
        <TextField
          label="Personal Access Token"
          value={token}
          onChange={(e) => setToken(e.target.value)}
          type="password"
        />
        {token && (
          <>
            <ManageApplicationsView />
            <SelectApplicationView />
            <EnvironmentsView />
            <ReleasesTableView />
            <NewApplicationDialog />
            <EditApplicationDialog />
            <DeploymentDialog />
          </>
        )}
      </Box>
      <SettingsDialog />
      <ModalContainer />
    </Container>
  )
}

RouteDetailInsight = ({
  nStations,
  fare,
}: RouteDetailInsightProps) => {
  const classes = useStyles();
  const { t: translate } = useTranslation();
  return (
    <Paper className={classes.paper}>
      <Grid container>
        <Grid container justifyContent="space-between">
          <Grid xs={6}>
            <Typography variant="h6">
              {translate("station.totalStation")}
            </Typography>
          </Grid>
          <Grid xs={6}>
            <Typography variant="h6">
              {translate("station.totalFare")}
            </Typography>
          </Grid>
        </Grid>
        <Grid container justifyContent="space-between">
          <Grid xs={6}>
            <Typography variant="body1">
              {nStations} {translate("station.station")}
            </Typography>
          </Grid>
          <Grid xs={6}>
            <Typography variant="body1">
              {fare} {translate("currency.baht")}
            </Typography>
          </Grid>
        </Grid>
      </Grid>
    </Paper>
  );
}

function PaperButton(props: { color: string; children: React.ReactNode; iconColor: 'LIGHT' | 'DARK' }) {
	return (
		<Paper style={{ backgroundColor: props.color, borderRadius: '50%' }}>
			<IconButton style={{ color: props.iconColor === 'LIGHT' ? 'white' : '#424242' }}>
				{props.children}
			</IconButton>
		</Paper>
	);
}

export function Page({
    toc,
    children,
}: {
    toc?: TableOfContentsItem[]
    children: React.ReactNode
}): React.ReactElement {
    const classes = useStyles()
    const [container, setContainer] = useState<HTMLElement | null>(null)

    return (
        <Paper ref={setContainer} elevation={0} className={classes.container}>
            <Container maxWidth="md" className={classes.inner}>
                <Box className={classes.box}>
                    {children}

                    <footer>
                        <Typography
                            color="textSecondary"
                            variant="body2"
                            className={classes.footer}
                        >
                            &copy; MTCute TL reference. This website is{' '}
                            <MuiLink href="https://github.com/mtcute/mtcute/tree/master/tl-reference">
                                open-source
                            </MuiLink>{' '}
                            and licensed under MIT.
                            <br />
                            This website is not affiliated with Telegram.
                        </Typography>
                    </footer>
                </Box>
            </Container>
            {toc && <TableOfContents items={toc} container={container} />}
        </Paper>
    )
}

BoxUI = ({ children }: BoxUIProps) => {
  const classes = useStyles();
  const { drawer } = useGUIContext();

  return (
    <Container className={`${classes.ui} ${drawer}`}>
      <Paper elevation={24}>{children}</Paper>
    </Container>
  );
}

function OpenOrdersAccounts() {
  const styles = useStyles();
  const openOrders = useOpenOrders();
  const openOrdersEntries: Array<[PublicKey, OpenOrders[]]> = useMemo(() => {
    return Array.from(openOrders.entries()).map(([market, oo]) => [
      new PublicKey(market),
      oo,
    ]);
  }, [openOrders]);
  return (
    <TableContainer component={Paper} elevation={0}>
      <Table className={styles.table} aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell>Market</TableCell>
            <TableCell align="center">Open Orders Account</TableCell>
            <TableCell align="center">Base Used</TableCell>
            <TableCell align="center">Base Free</TableCell>
            <TableCell align="center">Quote Used</TableCell>
            <TableCell align="center">Quote Free</TableCell>
            <TableCell align="center">Settle</TableCell>
            <TableCell align="center">Close</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {openOrdersEntries.map(([market, oos]) => {
            return (
              <OpenOrdersRow
                key={market.toString()}
                market={market}
                openOrders={oos}
              />
            );
          })}
        </TableBody>
      </Table>
    </TableContainer>
  );
}

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>

  );

}

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

ButtonActionGrid: React.FC<{ buttonPresses: ButtonPressItems }> = ({ buttonPresses }) => {
    const classes = useStyles();


    return (
        <Paper className={classes.buttonActionGrid} variant="outlined">
            <Droppable
                droppableId="GRID"
                direction="horizontal"
                isDropDisabled={buttonPresses.length >= 8}>
                {(provided, snapshot) => (
                    <div
                        className={classes.buttonActionDroppable}
                        ref={provided.innerRef}
                        style={{ display: 'inline-flex', verticalAlign: 'middle', alignItems: 'center' }}
                        {...provided.droppableProps}>
                        <Box display="flex" flexDirection="row">
                            {buttonPresses.map((item, index) => (
                                <Draggable key={item.id} draggableId={item.id} index={index}>
                                    {(provided, snapshot) => (
                                        <div
                                            style={getStyle(provided.draggableProps.style, snapshot)}
                                            ref={provided.innerRef}
                                            {...provided.draggableProps}
                                            {...provided.dragHandleProps}>

                                            <ButtonPressIcon press={item.press} isButton={true} />
                                        </div>
                                    )}
                                </Draggable>
                            ))}

                        </Box>
                        {provided.placeholder}
                        {/* && (buttonPresses.length == 0 && <Typography>  Drag your your sequence here.</Typography>)} */}
                    </div>
                )}
            </Droppable>
        </Paper>
    );
}

Challenge = (props: IChallengeContainerProps) => {

  const [flag, _setFlag] = useState("");
  const [warning, setWarning] = useState("");
  const { setChallengesDone } = useContext(LayoutContext);
  const history = useHistory();

  const challengeData = props.obj || { description: "", explanation: "", name: "", objective: "", url: "" };
  const Component = props.obj.component;


  const setFlag = (flg: string) => {
    if (validFlag(flg)) {
      _setFlag(flg);
      ProgressService.updateProgress(props.obj.url, flg);
    }

    setChallengesDone(ProgressService.done());
  };

  const resetChallenge = () => {
    _setFlag("");
    ProgressService.updateProgress(props.obj.url, "");
    setChallengesDone(ProgressService.done());
  };

  const onGoToDocsClicked = (path: string) => {
    return () => history.push(path);
  };

  const displayWarning = () => {
    return (
      <Box>
        <AppBar position="static" className={classes.warningTitle}>
          <Typography variant="h6">Warning</Typography>
        </AppBar>
        <Paper role="tabpanel" className={classes.warning}>
          {warning.split("\n").map((l, i) => <Typography key={i}>{l}</Typography>)}
        </Paper>
      </Box>
    );
  };

  useEffect(() => {
    const f = ProgressService.getFoundFlag(props.obj.url);
    setFlag(f);
  }, []);


  const classes = useStyles();

  return (
    <Grid container spacing={3}>
      <Grid item md={8}>

        <Paper className={classes.mainContainer}>
          <Typography variant="h4" gutterBottom className={classes.title}> {challengeData.name}</Typography>
          <Component flag={flag} setFlag={setFlag} setWarning={setWarning} />
        </Paper>
      </Grid>
      <Grid item md={4}>
        <Flag flag={flag} resetChallenge={resetChallenge} />

        {warning ? displayWarning() : ""}

        <AppBar position="static" className={classes.documentationTitle}>
          <Typography variant="h6">Docs</Typography>
        </AppBar>
        <Paper role="tabpanel" className={classes.documentation}>
          <Typography>If you are having trouble with this challenge take a look at our documentation <Link to={"docs" + props.obj.url}>here</Link> </Typography>
        </Paper>
      </Grid>
    </Grid>
  );
}

function AdvancedSettings({ open, handleClose, slippage, recipientAddress, onRecipientAddressChange, onSlippageChange }: IAdvancedSettingsProps) {
    return (
        <Modal id="hades" open={open} onClose={handleClose} hideBackdrop>
            <Paper className="ohm-card ohm-popover">
                <div className="cross-wrap">
                    <IconButton onClick={handleClose}>
                        <SvgIcon color="primary" component={XIcon} />
                    </IconButton>
                </div>

                <Box className="card-content">
                    <InputLabel htmlFor="slippage">
                        <p className="input-lable">Slippage</p>
                    </InputLabel>
                    <FormControl variant="outlined" color="primary" fullWidth>
                        <OutlinedInput
                            id="slippage"
                            value={slippage}
                            onChange={onSlippageChange}
                            fullWidth
                            type="number"
                            //@ts-ignore
                            max="100"
                            min="100"
                            className="bond-input"
                            endAdornment={
                                <InputAdornment position="end">
                                    <p className="percent">%</p>
                                </InputAdornment>
                            }
                        />
                        <div className="help-text">
                            <p className="text-bond-desc">Transaction may revert if price changes by more than slippage %</p>
                        </div>
                    </FormControl>
                </Box>
            </Paper>
        </Modal>
    );
}

TransactionItem: React.FC<TransactionProps> = ({ transaction }) => {
  const classes = useStyles();
  const history = useHistory();

  const showTransactionDetail = (transactionId: string) => {
    history.push(`/transaction/${transactionId}`);
  };

  return (
    <ListItem
      data-test={`transaction-item-${transaction.id}`}
      alignItems="flex-start"
      onClick={() => showTransactionDetail(transaction.id)}
    >
      <Paper className={classes.paper} elevation={0}>
        <Grid container spacing={2}>
          <Grid item>
            <ListItemAvatar>
              <Badge
                overlap="circle"
                anchorOrigin={{
                  vertical: "bottom",
                  horizontal: "right",
                }}
                badgeContent={<SmallAvatar src={transaction.receiverAvatar} />}
              >
                <Avatar src={transaction.senderAvatar} />
              </Badge>
            </ListItemAvatar>
          </Grid>
          <Grid item xs={12} sm container>
            <Grid item xs container direction="column" spacing={2}>
              <Grid item xs>
                <TransactionTitle transaction={transaction} />
                <Typography variant="body2" color="textSecondary" gutterBottom>
                  {transaction.description}
                </Typography>
                <Grid
                  container
                  direction="row"
                  justify="flex-start"
                  alignItems="flex-start"
                  spacing={1}
                  className={classes.socialStats}
                >
                  <Grid item>
                    <LikeIcon className={classes.countIcons} />
                  </Grid>
                  <Grid item>
                    <Typography data-test="transaction-like-count" className={classes.countText}>
                      {transaction.likes.length}
                    </Typography>
                  </Grid>
                  <Grid item>
                    <CommentIcon className={classes.countIcons} />
                  </Grid>
                  <Grid item>
                    <Typography data-test="transaction-comment-count" className={classes.countText}>
                      {transaction.comments.length}
                    </Typography>
                  </Grid>
                </Grid>
              </Grid>
            </Grid>
            <Grid item>
              <TransactionAmount transaction={transaction} />
            </Grid>
          </Grid>
        </Grid>
      </Paper>
    </ListItem>
  );
}

Settings = () => {
  const {
    settings: { alphaMode },
  } = useSettings();
  return (
    <PageContainer maxWidth={false}>
      <Container maxWidth="md">
        <List component={Paper}>
          {settingsInputs.map(
            ({ key, isAlpha, isCurrentGameSetting, isOwmlSetting, type }) =>
              (alphaMode
                ? (!isCurrentGameSetting && !isOwmlSetting) || isAlpha
                : !isAlpha) && (
                <React.Fragment key={key}>
                  {isOwmlSetting && (
                    <OwmlSettingControl
                      settingKey={key as OwmlSettingKey}
                      label={settingsText[key].label}
                      tooltip={settingsText[key].tooltip}
                      type={type}
                    />
                  )}
                  {!isOwmlSetting && (
                    <ModManagerSettingControl
                      settingKey={key as SettingKey}
                      label={settingsText[key].label}
                      tooltip={settingsText[key].tooltip}
                      type={type}
                    />
                  )}
                </React.Fragment>
              )
          )}
          {alphaMode && <AlphaLink />}
          <ResetSettings />
        </List>
      </Container>
    </PageContainer>
  );
}

function AdvancedSettings({
  open,
  handleClose,
  slippage,
  recipientAddress,
  onRecipientAddressChange,
  onSlippageChange,
}: IAdvancedSettingsProps) {
  const [value, setValue] = useState(slippage);

  useEffect(() => {
    let timeount: any = null;
    clearTimeout(timeount);

    timeount = setTimeout(() => onSlippageChange(value), 1000);
    return () => clearTimeout(timeount);
  }, [value]);

  return (
    <Modal id="hades" open={open} onClose={handleClose} hideBackdrop>
      <Paper className="ohm-card ohm-popover">
        <div className="cross-wrap">
          <IconButton onClick={handleClose}>
            <SvgIcon color="primary" component={XIcon} />
          </IconButton>
        </div>

        <p className="hades-title">Settings</p>

        <Box className="card-content">
          <InputLabel htmlFor="slippage">
            <p className="input-lable">Slippage</p>
          </InputLabel>
          <FormControl variant="outlined" color="primary" fullWidth>
            <OutlinedInput
              id="slippage"
              value={value}
              onChange={(e: any) => setValue(e.target.value)}
              fullWidth
              type="number"
              className="bond-input"
              endAdornment={
                <InputAdornment position="end">
                  <p className="percent">%</p>
                </InputAdornment>
              }
            />
            <div className="help-text">
              <p className="text-bond-desc">Transaction may revert if price changes by more than slippage %</p>
            </div>
          </FormControl>

          <InputLabel htmlFor="recipient">
            <p className="input-lable">Recipient Address</p>
          </InputLabel>
          <FormControl variant="outlined" color="primary" fullWidth>
            <OutlinedInput
              className="bond-input"
              id="recipient"
              value={recipientAddress}
              onChange={onRecipientAddressChange}
              type="text"
            />
            <div className="help-text">
              <p className="text-bond-desc">
                Choose recipient address. By default, this is your currently connected address
              </p>
            </div>
          </FormControl>
        </Box>
      </Paper>
    </Modal>
  );
}

SubHeader = () => (
  <Paper elevation={2}>
    <h3 style={{textAlign: 'center', padding: '10px'}}>Sub Header</h3>
  </Paper>
)