@material-ui/icons#OpenInBrowser JavaScript Examples
The following examples show how to use
@material-ui/icons#OpenInBrowser.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: CardUrls.js From FireShort with MIT License | 5 votes |
|
export default function CardUrls(props) {
const history = useHistory();
const classes = useStyles();
return (
<Container className={classes.cardGrid} maxWidth="lg">
<Grid container spacing={4}>
{props.shortUrls.map((card) => (
<Grid item key={card.id} xs={12} sm={6} md={4}>
<Card className={classes.card}>
<CardHeader
action={
<Tooltip title={"Copy to clipboard"}>
<IconButton color="primary" className={classes.copyButton} onClick={() => { navigator.clipboard.writeText(window.location.origin + "/" + card.data.curl) }}>
<FileCopyOutlinedIcon />
</IconButton>
</Tooltip>
}
title={
<Tooltip title={card.data.track === true ? "Link Tracking ON" : "Link Tracking OFF"}>
<Badge color={card.data.track === true ? "primary" : "error"} variant="dot">
<Typography>{card.data.curl}</Typography>
</Badge>
</Tooltip>
}
titleTypographyProps={{
variant: "subtitle1"
}}
>
</CardHeader>
<CardContent className={classes.cardContent}>
<Box bgcolor="text.primary" color="background.paper" p={2} style={{ overflowX: 'auto', overflowY: 'hidden', whiteSpace: "nowrap" }}>
{card.data.lurl}
</Box>
</CardContent>
<CardActions className={classes.cardActions}>
<Tooltip title={"Preview link"}>
<IconButton size="small" color="primary" href={card.data.lurl} target="_blank">
<VisibilityIcon />
</IconButton>
</Tooltip>
<Tooltip title={"Edit link"}>
<IconButton size="small" onClick={() => props.handleEditShortUrl(card.data.curl)}>
<EditIcon />
</IconButton>
</Tooltip>
<Tooltip title={"Analytics"}>
<IconButton size="small" disabled={!card.data.track} onClick={() => history.push(`/analytics/${card.data.curl}`)}>
<AnalyticsIcon />
</IconButton>
</Tooltip>
<Tooltip title={"Delete link"}>
<IconButton size="small" color="secondary" onClick={() => props.handleDeleteShortUrl(card.data.curl)}>
<DeleteForeverIcon />
</IconButton>
</Tooltip>
<Tooltip title={card.data.hits + " Hits"}>
<IconButton onClick={() => { props.openHits(card.data.curl) }} style={{ cursor: "pointer" }}>
<Badge badgeContent={card.data.hits} color="secondary" max={Infinity} showZero>
<OpenInBrowser />
</Badge>
</IconButton>
</Tooltip>
<Tooltip title={"Password protect"}>
<IconButton size='small' color='default' onClick={() => props.toggleSecurity(card.data.curl)}>
{card.data.locked ? <LockIcon /> : <LockOpenIcon />}
</IconButton>
</Tooltip>
</CardActions>
</Card>
</Grid>
))}
</Grid>
</Container>
);
}
Example #2
| Source File: ListUrls.js From FireShort with MIT License | 4 votes |
|
export default function ListUrls(props) {
const classes = useStyles();
const history = useHistory();
const [page, setPage] = React.useState(0);
const [rowsPerPage, setRowsPerPage] = React.useState(10);
const handleChangePage = (event, newPage) => {
setPage(newPage);
};
const handleChangeRowsPerPage = (event) => {
setRowsPerPage(+event.target.value);
setPage(0);
};
return (
<Container className={classes.cardGrid} maxWidth="lg">
<Paper className={classes.root}>
<TableContainer className={classes.container}>
<Table stickyHeader aria-label="sticky table">
<TableHead>
<TableRow>
<TableCell
key="curl"
align="left"
style={{
minWidth: "100px",
}}
>
Short URL
</TableCell>
<TableCell
key="action"
align="center"
style={{
minWidth: "100px",
}}
>
Action
</TableCell>
<TableCell
key="lurl"
align="left"
style={{ minWidth: "100px" }}
>
Long URL
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{props.shortUrls
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
.map((card) => {
return (
<TableRow hover role="checkbox" tabIndex={-1} key={card.id}>
<TableCell
key="curl"
align="left"
style={{ minWidth: "100px" }}
>
<Tooltip title="Copy to clipboard">
<Button
startIcon={<FileCopyOutlinedIcon />}
onClick={() => {
navigator.clipboard.writeText(
window.location.origin + "/" + card.data.curl
);
}}
classes={{ label: classes.label }}
>
{card.data.curl}
</Button>
</Tooltip>
<Tooltip title={card.data.hits + " Hits"}>
<IconButton onClick={() => { props.openHits(card.data.curl) }} style={{ cursor: "pointer" }}>
<Badge
badgeContent={card.data.hits}
color="secondary"
max={Infinity}
showZero
>
<OpenInBrowser />
</Badge>
</IconButton>
</Tooltip>
</TableCell>
<TableCell
key="action"
align="right"
style={{ minWidth: "100px" }}
>
<ButtonGroup variant="outlined" color="default">
<Tooltip title="Preview link">
<Button
size="small"
color="primary"
href={card.data.lurl}
target="_blank"
>
<VisibilityIcon />
</Button>
</Tooltip>
<Tooltip title="Analytics">
<Button
size='small'
disabled={!card.data.track}
onClick={() => history.push(`/analytics/${card.data.curl}`)}
>
<AnalyticsIcon />
</Button>
</Tooltip>
<Tooltip title="Edit link">
<Button
size="small"
onClick={() =>
props.handleEditShortUrl(card.data.curl)
}
>
<EditIcon />
</Button>
</Tooltip>
<Tooltip title="Delete link">
<Button
size="small"
color="secondary"
onClick={() =>
props.handleDeleteShortUrl(card.data.curl)
}
>
<DeleteForeverIcon />
</Button>
</Tooltip>
<Tooltip title="Toggle link protection">
<Button
size="small"
color="default"
onClick={() => props.toggleSecurity(card.data.curl)}
>
{card.data.locked ? <LockIcon /> : <LockOpenIcon />}
</Button>
</Tooltip>
</ButtonGroup>
</TableCell>
<TableCell
key="lurl"
align="left"
style={{ minWidth: "100px" }}
>
<Box
bgcolor="text.primary"
color="background.paper"
p={2}
style={{
overflowX: "auto",
overflowY: "hidden",
whiteSpace: "nowrap",
}}
>
{card.data.lurl}
</Box>
</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</TableContainer>
<TablePagination
rowsPerPageOptions={[10, 25, 100]}
component="div"
count={props.shortUrls.length}
rowsPerPage={rowsPerPage}
page={page}
onChangePage={handleChangePage}
onChangeRowsPerPage={handleChangeRowsPerPage}
/>
</Paper>
</Container>
);
}
