@material-ui/core#IconButton JavaScript Examples
The following examples show how to use
@material-ui/core#IconButton.
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: CustomSnackbarProvider.component.js From akashlytics-deploy with GNU General Public License v3.0 | 6 votes |
|
CustomSnackbarProvider = ({ children }) => {
const notistackRef = useRef();
const classes = useStyles();
const onClickDismiss = (key) => () => {
notistackRef.current.closeSnackbar(key);
};
return (
<SnackbarProvider
maxSnack={3}
anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
ref={notistackRef}
classes={{
containerRoot: classes.root,
variantSuccess: classes.success,
variantError: classes.error,
variantWarning: classes.warning,
variantInfo: classes.info
}}
hideIconVariant
action={(key) => (
<Box width="2rem">
<IconButton onClick={onClickDismiss(key)} size="small" className={classes.action}>
<CloseIcon fontSize="small" />
</IconButton>
</Box>
)}
>
{children}
</SnackbarProvider>
);
}
Example #2
| Source File: CoinDialog.js From Alternative-Uniswap-Interface with GNU General Public License v3.0 | 6 votes |
|
DialogTitle = withStyles(styles)((props) => {
const { children, classes, onClose, ...other } = props;
return (
<MuiDialogTitle
disableTypography
className={classes.titleSection}
{...other}
>
<Grid
container
direction="row"
justifyContent="space-between"
alignContent="center"
>
<Typography variant="h6" className={classes.titleText}>
{children}
</Typography>
{onClose ? (
<IconButton aria-label="close" onClick={onClose}>
<CloseIcon />
</IconButton>
) : null}
</Grid>
</MuiDialogTitle>
);
})
Example #3
| Source File: navbar.js From connect-4-online-multiplayer with MIT License | 6 votes |
|
export default function NavBar() {
const classes = useStyles();
// const preventDefault = (event) => event.preventDefault();
return (
<div className={classes.root}>
<AppBar position="static">
<Toolbar>
<Typography variant="h6" className={classes.title}>
Connect 4
</Typography>
<div>
<Link
href="https://github.com/BhavyaCodes/connect-4-online-multiplayer"
target="_blank"
rel="noopener noreferrer"
color="inherit"
>
<IconButton
aria-label="Github repository link"
aria-controls="menu-appbar"
aria-haspopup="true"
color="inherit"
>
<GitHubIcon />
</IconButton>
</Link>
</div>
</Toolbar>
</AppBar>
</div>
);
}
Example #4
| Source File: CreateList.js From social-media-strategy-fe with MIT License | 6 votes |
|
export default function CreateList() {
const dispatch = useDispatch();
const classes = useStyles();
const [title, setTitle] = useState("");
const handleSubmit = (e) => {
e.preventDefault();
if (title && title !== "Drafts") {
dispatch(addList(title));
}
};
const handleTextInput = (e) => {
setTitle(e.currentTarget.value);
};
return (
<form onSubmit={handleSubmit} className={classes.root}>
<InputBase
placeholder="New list…"
inputProps={{ "aria-label": "add list" }}
onChange={handleTextInput}
fullWidth
/>
<IconButton
type="submit"
className={classes.iconButton}
aria-label="search"
>
<AddIcon />
</IconButton>
</form>
);
}
Example #5
| Source File: CopyButton.js From treetracker-admin-client with GNU Affero General Public License v3.0 | 6 votes |
|
export function CopyButton(props) {
const { value, label, confirmCopy } = props;
const classes = useStyles();
return (
<IconButton
className={classes.copyButton}
title="Copy to clipboard"
onClick={() => {
navigator.clipboard.writeText(value);
confirmCopy(label);
}}
>
<FileCopy fontSize="small" />
</IconButton>
);
}
Example #6
| Source File: SocialIcons.js From personal-website-react with MIT License | 6 votes |
|
SocialIcons = () => {
const classes = useStyles();
const socialItems = Resume.basics.profiles.map((socialItem) => (
<Link
href={socialItem.url}
key={socialItem.network.toLowerCase()}
target='_blank'
rel='noopener noreferrer'
underline='none'
color='inherit'
>
<Tooltip
title={socialItem.username}
placement='left'
TransitionComponent={Zoom}
>
<IconButton
color='inherit'
aria-label={socialItem.network}
className={classes.iconButton}
>
<i className={`${classes.icon} ${socialItem.x_icon}`}></i>
</IconButton>
</Tooltip>
</Link>
));
return <div className={classes.socialIcons}>{socialItems}</div>;
}
Example #7
| Source File: ProfileHeader.js From ehr with GNU Affero General Public License v3.0 | 6 votes |
|
render() {
const { selectedTab } = this.state;
return (
<StyledTabs
value={selectedTab}
aria-label="profile tabs"
TabIndicatorProps={{ style: { background: 'none' } }}
>
{this.state.users.map((user, index) => (
<HeaderTab
key={index}
label={user.name}
id={user.id}
value={user.id}
handleClick={this.handleClick}
active={selectedTab === user.id}
refreshUsers={this.refreshUsers}
/>
))}
<Box>
<IconButton onClick={this.handleNewClick}>
<AddIcon />
</IconButton>
</Box>
</StyledTabs>
);
}
Example #8
| Source File: Lightbox.jsx From archeage-tools with The Unlicense | 6 votes |
|
render() {
const { image, title, caption, elevation, float } = this.props;
const { open } = this.state;
return (
<>
<Paper
className={cn('lightbox-thumb', { [float]: Boolean(float) })}
elevation={elevation}
>
<img src={image || NoImage} alt={title} onClick={this.handleOpen} />
<Typography variant="caption">{title}</Typography>
</Paper>
<Dialog
open={open}
onClose={this.handleClose}
maxWidth="xl"
TransitionComponent={Zoom}
>
<AppBar position="static">
<Toolbar variant="dense">
<Typography variant="subtitle1" className="title-text">{title}</Typography>
<IconButton color="inherit" aria-label="Close" onClick={this.handleClose}>
<CloseIcon />
</IconButton>
</Toolbar>
</AppBar>
<DialogContent>
<img src={image} alt={title} />
<Typography>{caption}</Typography>
</DialogContent>
</Dialog>
</>
);
}
Example #9
| Source File: UserMoreMenu.js From course-manager with MIT License | 6 votes |
|
function UserMoreMenu({ id }) {
const navigate = useNavigate();
const ref = useRef(null);
const [isOpen, setIsOpen] = useState(false);
return (
<>
<IconButton ref={ref} onClick={() => setIsOpen(true)}>
<Icon icon={moreVerticalFill} width={20} height={20} />
</IconButton>
<Menu
open={isOpen}
anchorEl={ref.current}
onClose={() => setIsOpen(false)}
PaperProps={{
sx: { width: 200, maxWidth: '100%' }
}}
anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
transformOrigin={{ vertical: 'top', horizontal: 'right' }}
>
<MenuItem sx={{ color: 'text.secondary' }} onClick={() => navigate(id)}>
<ListItemIcon>
<Icon icon={trash2Outline} width={24} height={24} />
</ListItemIcon>
<ListItemText primary="Delete" primaryTypographyProps={{ variant: 'body2' }} />
</MenuItem>
<MenuItem component={RouterLink} to="#" sx={{ color: 'text.secondary' }}>
<ListItemIcon>
<Icon icon={editFill} width={24} height={24} />
</ListItemIcon>
<ListItemText primary="Create" primaryTypographyProps={{ variant: 'body2' }} />
</MenuItem>
</Menu>
</>
);
}
Example #10
| Source File: alumni.js From dscbppimt-official-website with MIT License | 6 votes |
|
MemberCard = (props) => {
return(
<Card style={{maxWidth : '11em', padding : '0em 0px 1em 0px', margin : '2px', minHeight : '17.5em', position : 'relative'}}>
<CardContent style={{textAlign : 'center'}}>
<img src={props.image} style={{borderRadius : '50%', width : '60%', padding : '4px'}}/>
<Typography variant="h6" style={{fontSize : '1.2em', fontWeight : 'bold'}}>{props.name}</Typography>
<Typography variant="body2">{props.pos}</Typography>
</CardContent>
<Box style={{display : 'flex', justifyContent : 'center', position : 'absolute', bottom : '20px', width : '100%'}}>
<IconButton style={{padding : '4px'}} onClick={() => window.open(props.github)}><GitHubIcon/></IconButton>
<IconButton style={{padding : '4px'}} onClick={() => window.open(props.linkedin)}><LinkedInIcon /></IconButton>
</Box>
</Card>)
}
Example #11
| Source File: CustomDialogTitle.js From reddish with MIT License | 6 votes |
|
DialogTitle = withStyles(styles)((props) => {
const { children, classes, onClose, ...other } = props;
return (
<MuiDialogTitle disableTypography className={classes.root} {...other}>
<Typography variant="h6" color="primary">
{children}
</Typography>
{onClose ? (
<IconButton
aria-label="close"
className={classes.closeButton}
onClick={onClose}
>
<CloseIcon />
</IconButton>
) : null}
</MuiDialogTitle>
);
})
Example #12
| Source File: CustomDialogTitle.js From stack-underflow with MIT License | 6 votes |
|
DialogTitle = withStyles(styles)((props) => {
const { children, classes, onClose, ...other } = props;
return (
<MuiDialogTitle disableTypography className={classes.root} {...other}>
<Typography variant="h6">{children}</Typography>
{onClose ? (
<IconButton
aria-label="close"
className={classes.closeButton}
onClick={onClose}
>
<CloseIcon />
</IconButton>
) : null}
</MuiDialogTitle>
);
})
Example #13
| Source File: About.js From Dog-Book with MIT License | 6 votes |
|
About = () => {
const classes = useStyle();
return (
<Container>
<Typography variant="h4" className={classes.contributers} component="h2">
Contributers
</Typography>
{data.contributers.map((contributer) => (
<Card className={classes.root} elevation={4}>
<CardContent className={classes.content}>
<Avatar alt="avatar" src={contributer.avatar_url}></Avatar>
<Typography variant="h5" className={classes.name}>
{contributer.name}
</Typography>
</CardContent>
<CardActions className={classes.actions}>
<IconButton href={contributer.username}>
<GitHub className={classes.avatar} />
</IconButton>
</CardActions>
</Card>
))}
</Container>
);
}
Example #14
| Source File: MenuHeader.js From Trellis with GNU General Public License v3.0 | 6 votes |
|
export default function MenuHeader({ text, closeHandler, type, backHandler }) {
const classes = useStyles({ type })
return (
<div style={{ display: 'flex' }}>
{type === 'background' && (
<IconButton onClick={backHandler} className={classes.close}>
<ArrowBackIosIcon fontSize="small" />
</IconButton>
)}
<div className={classes.title}>{text}</div>
<IconButton onClick={closeHandler} className={classes.close}>
<CloseIcon />
</IconButton>
</div>
)
}
Example #15
| Source File: Post.js From clone-instagram-ui with MIT License | 6 votes |
|
Post = ({ post, onCommentChange, onLike }) => {
const firstCharacter = post.userName[0].toUpperCase();
return (
<Card className="ins-post">
<Link
to={`/profile/${post.userName}`}
className="profile-navigation-link"
>
<CardHeader
avatar={
<Avatar style={{ background: getBackgroundColor(firstCharacter) }}>
{firstCharacter || '-'}
</Avatar>
}
title={post.userName}
/>
</Link>
<img
className="ins-post-media"
src={post.media}
title={post.content}
alt={post.title}
/>
<CardActions disableSpacing>
<IconButton aria-label="add to favorites" onClick={onLike}>
<FavoriteBorderOutlined />
</IconButton>
</CardActions>
<CardContent className="comments-section">
<b>{`${post.likes || 0} Likes`}</b>
{post.comment.map((c) => (
<Comment {...c} />
))}
</CardContent>
<AddComment onCommentChange={onCommentChange} />
</Card>
);
}
Example #16
| Source File: Header.jsx From scholar-front-end with MIT License | 6 votes |
|
function Header() {
const classes = useStyle();
return (
<div className={styles.header}>
<div><Notification/></div>
<div className={classes.defaultHeader}>
<IconButton>
<div className={styles.logo}><img className={styles.logoImage} src={require("../../data/logoUnfinished.jpg").default} alt="logo"/></div>
</IconButton>
<Button className={classes.linkStyle}><CategoryIcon /></Button>
<form noValidate autoComplete="off">
<TextField id="standard-basic" label="Search Courses" variant="filled" />
</form>
<Button> <ShoppingCart /> </Button>
<div className={styles.signupOptions}>
<Link to="login">
<Button variant="contained" color="primary" className={classes.root}>Login</Button>
</Link>
<Link to="signup">
<Button variant="contained" color="primary" className={classes.root}>Signup</Button>
</Link>
</div>
</div>
</div>
)
}
Example #17
| Source File: MenuCard.jsx From test-deploy-gatsby-apps with BSD Zero Clause License | 6 votes |
|
MenuCard = ({ item, onAddItem }) => {
const classes = useStyles()
return (
<Card style={{ padding: "10px" }}>
<Grid container justify="space-between" spacing={5} direction="column">
<Grid item>
<Typography variant={"subtitle2"}>{item.name}</Typography>
</Grid>
<Grid item>
<Grid container justify="space-between" alignItems="center">
<Grid item>
<Typography variant="body2">{item.price}</Typography>
</Grid>
<Grid item>
<IconButton
component="span"
size="small"
className={classes.iconButton}
onClick={() => onAddItem(item)}
>
<img
src={addButton}
alt={"add-" + item.name}
style={{ width: "6vw", height: "6vh" }}
/>
</IconButton>
</Grid>
</Grid>
</Grid>
</Grid>
</Card>
)
}
Example #18
| Source File: LeftNav.js From akashlytics-deploy with GNU General Public License v3.0 | 5 votes |
|
LeftNav = ({ onOpenMenuClick, isNavOpen }) => {
const classes = useStyles();
const location = useLocation();
const routes = [
{ title: "Dashboard", icon: (props) => <DashboardIcon {...props} />, url: UrlService.dashboard(), activeRoutes: [UrlService.dashboard()] },
{
title: "Deployments",
icon: (props) => <CloudIcon {...props} />,
url: UrlService.deploymentList(),
activeRoutes: [UrlService.deploymentList(), "/deployment"]
},
{ title: "Templates", icon: (props) => <CollectionsIcon {...props} />, url: UrlService.templates(), activeRoutes: [UrlService.templates()] },
{ title: "Providers", icon: (props) => <DnsIcon {...props} />, url: UrlService.providers(), activeRoutes: [UrlService.providers()] },
{ title: "Settings", icon: (props) => <SettingsIcon {...props} />, url: UrlService.settings(), activeRoutes: [UrlService.settings()] }
];
return (
<div className={classes.root} style={{ width: isNavOpen ? drawerWidth : closedDrawerWidth }}>
<List className={classes.list}>
<ListItem>
<ListItemIcon className={classes.closedListItemIcon}>
<IconButton size="small" onClick={onOpenMenuClick} className={classes.toggleButton}>
{isNavOpen ? <MenuOpenIcon /> : <MenuIcon />}
</IconButton>
</ListItemIcon>
<ListItemText
primary={
<Button size="small" variant="contained" color="primary" fullWidth component={Link} to="/createDeployment" className={classes.deployButton}>
Deploy
</Button>
}
primaryTypographyProps={{
component: "div",
className: classes.deployButtonContainer,
style: { opacity: isNavOpen ? 1 : 0, flex: 1 }
}}
/>
</ListItem>
{routes.map((route) => {
const isSelected = route.url === UrlService.dashboard() ? location.pathname === "/" : route.activeRoutes.some((x) => location.pathname.startsWith(x));
const listItemIcon = (
<ListItemIcon color="primary" className={classes.closedListItemIcon}>
{route.icon({ color: isSelected ? "primary" : "disabled" })}
</ListItemIcon>
);
return (
<ListItem button key={route.title} component={Link} to={route.url} selected={isSelected}>
{isNavOpen ? (
listItemIcon
) : (
<Tooltip classes={{ tooltip: classes.tooltip }} arrow title={route.title} placement="right">
{listItemIcon}
</Tooltip>
)}
<ListItemText
primary={route.title}
primaryTypographyProps={{
className: clsx(classes.listText, { [classes.selected]: isSelected, [classes.notSelected]: !isSelected }),
style: { opacity: isNavOpen ? 1 : 0 }
}}
/>
</ListItem>
);
})}
</List>
</div>
);
}
Example #19
| Source File: EditList.js From social-media-strategy-fe with MIT License | 5 votes |
|
EditList = (props) => {
const { listTitle, list, handleInputText, submit } = props;
const { form, iconButton, divider, input } = useStyles();
const dispatch = useDispatch();
const { lists } = useSelector((state) => state.kanban);
const [modalOpen, setModalOpen] = useState(false);
const handleDeleteConfirmation = () => {
dispatch(deleteList(lists, list));
};
const handleBlur = (e) => {
if (!modalOpen) {
submit(e);
}
};
return (
<>
<form onSubmit={submit} className={form} style={{ width: "100%" }}>
<InputBase
autoFocus
onFocus={(e) => e.target.select()}
onBlur={handleBlur}
onChange={handleInputText}
id="standard-error-helper-text"
defaultValue={listTitle}
fullWidth
className={input}
inputProps={{
"aria-label": "edit title",
}}
/>
<IconButton
type="submit"
className={iconButton}
aria-label="confirm edit"
>
<CheckIcon />
</IconButton>
<Divider className={divider} orientation="vertical" />
<IconButton
onClick={() => setModalOpen(true)}
className={iconButton}
aria-label="delete list"
>
<DeleteIcon />
</IconButton>
</form>
<Modal
open={modalOpen}
handleClose={() => setModalOpen(false)}
title={`Would you like to delete the ${listTitle} list?`}
content={
"Confirming this action all posts in the list will also be deleted."
}
handleConfirmation={handleDeleteConfirmation}
/>
</>
);
}
Example #20
| Source File: Topbar.js From usfm-grammar-online with MIT License | 5 votes |
|
export default function Topbar() {
const classes = useStyles();
return (
<div className={classes.root}>
<AppBar position="fixed">
<Toolbar>
<Grid container>
<Grid item xs={6} sm={4} md={2}>
<img src={logo} alt="logo" className={classes.logo} />
</Grid>
<Grid item xs={12} sm={6} md={8} className={classes.title}>
<Typography variant="h5">USFM Grammar Online</Typography>
</Grid>
<Grid item xs={6} sm={2} md={2}>
<Box
display="flex"
flexDirection="row-reverse"
p={1}
m={1.5}
mr={0}
>
<Tooltip title="GitHub code repository">
<IconButton
variant="outlined"
className={classes.button}
color="inherit"
href="https://github.com/Bridgeconn/usfm-grammar"
target="_blank"
rel="noopener"
>
<GitHubIcon />
</IconButton>
</Tooltip>
<Typography className={classes.version}>v2.2.0</Typography>
</Box>
</Grid>
</Grid>
</Toolbar>
</AppBar>
</div>
);
}
Example #21
| Source File: OwnerOrganizers.js From Quizzie with MIT License | 5 votes |
|
function OwnerUsers() {
const [organizers, setOrganizers] = useState([]);
const getUsers = async () => {
let token = localStorage.getItem("authToken");
let url = `https://quizzie-api.herokuapp.com/owner/allAdmins`;
try {
await axios.get(url, {
headers: {
"auth-token": token
}
}).then(res => {
setOrganizers(res.data.result);
})
} catch(error) {
console.log(error);
}
}
useEffect(() => {
getUsers();
}, [])
return (
<div className="owner-quizzes">
<List aria-label="users-display" className="owner-quiz-list">
{organizers.map((user) => (
<ListItem button key={user._id}>
<ListItemText primary={user.email} secondary={user.name} />
<ListItemSecondaryAction>
<IconButton edge="end" aria-label="details">
<ArrowForwardIos />
</IconButton>
</ListItemSecondaryAction>
</ListItem>
))}
</List>
</div>
)
}
Example #22
| Source File: header.js From React-Messenger-App with MIT License | 5 votes |
|
render() {
return (
<div>
<AppBar position="static">
<Toolbar>
<Typography
className={this.props.classes.heading}
variant="display1"
color="inherit"
>
Chat Server
</Typography>
<Hidden mdUp>
<IconButton
color="inherit"
onClick={this.handleMenubutton}
className={this.props.classes.menuButton}
>
<MenuIcon />
</IconButton>
</Hidden>
<Hidden smDown>
<Typography className={this.props.classes.links}>
<Button href="/api/signup" color="primary" variant="contained">
Signup
</Button>
<Button href="/api/signin" color="primary" variant="contained">
Signin
</Button>
<Button href="/api/chat" color="primary" variant="contained">
Chat
</Button>
</Typography>
</Hidden>
</Toolbar>
</AppBar>
<Hidden mdUp>
<Drawer
variant="persistent"
anchor="top"
open={this.state.open}
classes={{ paperAnchorTop: this.props.classes.drawerColor }}
>
<div className={this.props.classes.drawerWidth}>
<IconButton onClick={this.handleMenubutton}>
<KeyboardArrowUpIcon />
</IconButton>
<List>
{["SignUp", "SignIn", "Chat"].map((text, index) => (
<ListItem button key={index}>
<Button href={`#${text}`} onClick={this.handleMenubutton}>
<ListItemText primary={text} />
</Button>
</ListItem>
))}
</List>
</div>
</Drawer>
</Hidden>
</div>
);
}
Example #23
| Source File: AnnounceMessage.js From treetracker-admin-client with GNU Affero General Public License v3.0 | 5 votes |
|
AnnounceMessage = ({
toggleAnnounceMessage,
setToggleAnnounceMessage,
}) => {
const iOS =
typeof navigator !== 'undefined' &&
typeof navigator.userAgent !== 'undefined' &&
/iPad|iPhone|iPod/.test(navigator.userAgent);
const { drawer, title, formTitle, directions, closeAnnounce } = useStyles();
return (
<SwipeableDrawer
disablebackdroptransition={!iOS ? 'true' : 'false'}
disablediscovery={iOS ? 'true' : 'false'}
anchor={'right'}
open={toggleAnnounceMessage}
onOpen={() => setToggleAnnounceMessage(true)}
onClose={() => setToggleAnnounceMessage(false)}
classes={{ paper: drawer }}
PaperProps={{ elevation: 6 }}
>
<Grid container spacing={2}>
<Grid item className={title}>
<Typography variant="h4" className={formTitle}>
Announce Message
</Typography>
<IconButton
color="primary"
className={closeAnnounce}
onClick={() => setToggleAnnounceMessage(false)}
>
<Close fontSize="inherit" />
</IconButton>
</Grid>
<Grid item>
<Typography variant="body1" className={directions}>
Write a group message or notification below. Then select the target
audience for your message. All replies will be available in your
Messaging Inbox.
</Typography>
</Grid>
<Grid item>
<AnnounceMessageForm
setToggleAnnounceMessage={setToggleAnnounceMessage}
/>
</Grid>
</Grid>
</SwipeableDrawer>
);
}
Example #24
| Source File: header.js From Queen with MIT License | 5 votes |
|
Header = ({ title, hierarchy }) => {
const { page, standalone, queenBindings, quit, setPage, currentPage } = useContext(
OrchestratorContext
);
const classes = useStyles({ standalone });
const setToFirstPage = useCallback(() => setPage('1'), [setPage]);
const quitButtonRef = useRef();
const utilInfo = type => {
return {
...SIMPLE_CLICK_EVENT,
idParadataObject: `${type}-button`,
page: currentPage,
};
};
const { sequence, subSequence } = hierarchy || {};
const sequenceBinded = {
...sequence,
label: lunatic.interpret(['VTL'])(queenBindings)(sequence?.label),
};
const subSequenceBinded = subSequence
? {
...subSequence,
label: lunatic.interpret(['VTL'])(queenBindings)(subSequence?.label),
}
: null;
const quitShortCut = () => {
if (quitButtonRef && quitButtonRef.current) quitButtonRef.current.focus();
quit();
};
return (
<div className={classes.root}>
<Navigation className={classes.headerItemNavigation} title={title} />
<div className="header-item">
<ButtonBase
focusRipple
onClick={setToFirstPage}
aria-label={D.backToBeginning}
title={D.backToBeginning}
>
<img id="logo" src={insee} alt="Logo de L'Insee" className={classes.headerLogo} />
</ButtonBase>
</div>
<div className={classes.headerTitle}>
<span className={classes.questionnaireTitle}>{title}</span>
{sequence && (
<BreadcrumbQueen
sequence={sequenceBinded}
subsequence={subSequenceBinded}
currentPage={page}
/>
)}
</div>
{!standalone && (
<>
<div className={classes.headerClose}>
<IconButton
ref={quitButtonRef}
title={D.simpleQuit}
className={classes.closeIcon}
onClick={paradataHandler(quit)(utilInfo('end-survey'))}
>
<ExitToApp htmlColor={'#000000'} />
</IconButton>
</div>
<KeyboardEventHandler
handleKeys={['alt+q']}
onKeyEvent={paradataHandler(quitShortCut)(utilInfo('end-survey'))}
handleFocusableElements
/>
</>
)}
</div>
);
}
Example #25
| Source File: RequestDataModal.js From ehr with GNU Affero General Public License v3.0 | 5 votes |
|
render() {
return (
<Dialog fullWidth={true} open={this.props.isOpen}>
<DialogTitle>
<Box display="flex" alignItems="center">
<Box flexGrow={1}>{t('ehr', 'Request Data')}</Box>
<Box>
<IconButton onClick={this.props.onClose}>
<CloseIcon />
</IconButton>
</Box>
</Box>
</DialogTitle>
<DialogContent>
<Grid container direction="column">
<Grid item xs={6}>
<KailonaTextField
inputRef={this.toEmailRef}
id="providerEmail"
type="text"
label={t('ehr', 'Email')}
style={{ width: '100%' }}
/>
</Grid>
<Grid item xs={12} style={{ marginTop: '20px' }}>
<Grid container direction="column">
<Grid item>
<Typography variant="body2">{t('ehr', 'Message to Provider:')}</Typography>
</Grid>
<Grid item>
<TextareaAutosize
ref={this.emailBodyRef}
rowsMin={5}
defaultValue={this.defaultEmailBody}
style={{ width: '100%', resize: 'vertical' }}
/>
</Grid>
</Grid>
</Grid>
</Grid>
</DialogContent>
<DialogActions>
<KailonaButton
class="default"
title={t('ehr', 'Cancel')}
onClick={this.props.onClose}
disabled={this.state.loading}
/>
<KailonaButton
class="primary"
title={t('ehr', 'Send Request')}
onClick={this.sendRequest}
loading={this.state.loading}
disabled={this.state.loading}
/>
</DialogActions>
</Dialog>
);
}
Example #26
| Source File: header.js From ark-funds-monitor with GNU Affero General Public License v3.0 | 5 votes |
|
render() {
return (
<div className="header-section">
<Grid container spacing={3} justify="center" alignItems="center">
<Grid item xs={6} md={10} className='title-container'>
{/* <span className="logo">
<a href="http://karlzhu-se.github.io/ark-funds-monitor/">
<img height="90" width="120" src="https://ark-funds.com/wp-content/uploads/2020/07/ark-logo-1-1.svg" alt="ark-funds.com" title="" />
</a>
</span> */}
<a className='title' href="http://karlzhu-se.github.io/ark-funds-monitor/">
<span>ARK Funds Monitor</span>
</a>
{/* <div className="github-section">
<span>View it on</span>
<a className="github-icon" href="https://github.com/KarlZhu-SE/ark-funds-monitor" target="_blank" rel="noopener noreferrer" aria-label="Github">
<svg height="24" viewBox="0 0 16 16" version="1.1" width="24" aria-hidden="true"><path fillRule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>
</a>
</div> */}
</Grid>
<Grid item xs={6} md={2} className="ticker-input-section">
<form onSubmit={this.handleSubmit}>
<FormControl>
<div>
<Input
id="ticker-textfield"
value={this.state.inputTicker}
onCompositionStart={this.handlingComposition}
onCompositionUpdate={this.handlingComposition}
onCompositionEnd={this.handleComposition}
onChange={this.handleChange}
onBlur={this.handleBlur}
placeholder='Ticker'
endAdornment={
<InputAdornment position="start">
<IconButton
aria-label="Search"
onClick={this.handleSubmit}
edge="end"
>
<SearchIcon color="primary" />
</IconButton>
</InputAdornment>
}
/>
</div>
</FormControl>
</form>
</Grid>
</Grid>
</div>
);
}
Example #27
| Source File: StepperFinish.js From Otto with MIT License | 5 votes |
|
export default function StepperFinish() {
const classes = useStyles();
const { state } = useState();
const { nn_state } = useNNState();
const {model_state} = useModelState();
const [codeCopied, setCodeCopied] = React.useState(false);
const copyToClipboard = (setCopied = true) => {
navigator.clipboard.writeText(CodeGen(state, nn_state, model_state));
setCodeCopied(setCopied);
};
const openInCollab = async () => {
copyToClipboard(true);
await new Promise((r) => setTimeout(r, 1200));
window
.open("https://colab.research.google.com/#create=true", "_blank")
.focus();
};
return (
<>
<Typography className={classes.titleInner} color="textPrimary">
You're all set to continue the journey!
</Typography>
<Grid
direction="row"
container
justify="center"
spacing={2}
style={{ marginBottom: "8px" }}
>
<Grid item>
<Tooltip
title={codeCopied ? "Code copied!" : "Copy code"}
placement="top"
>
<IconButton
onClick={copyToClipboard}
color="primary"
component="span"
>
{codeCopied ? <AssignmentTurnedInIcon /> : <AssignmentIcon />}
</IconButton>
</Tooltip>
</Grid>
<Grid item>
<Tooltip title="Launch Google Collab" placement="top">
<IconButton onClick={openInCollab} color="primary" component="span">
<ExitToAppIcon />
</IconButton>
</Tooltip>
</Grid>
<Grid item>
<Tooltip title="Reset Otto" placement="top">
<IconButton
onClick={() => {
window.location.reload();
return false;
}}
color="primary"
component="span"
>
<RotateLeftIcon />
</IconButton>
</Tooltip>
</Grid>
</Grid>
<CodeContainer getIsShown={() => true} />
</>
);
}
Example #28
| Source File: Login.jsx From archeage-tools with The Unlicense | 5 votes |
|
render() {
const { open, closeWindow } = this.props;
const { formData, loading } = this.state;
return (
<Dialog
open={open}
onClose={closeWindow}
maxWidth="xl"
>
<AppBar position="static">
<Toolbar variant="dense">
<Typography variant="subtitle1" className="title-text">Login</Typography>
<IconButton color="inherit" aria-label="Close" onClick={closeWindow}>
<CloseIcon />
</IconButton>
</Toolbar>
</AppBar>
<DialogContent>
<form autoComplete="off" onSubmit={this.handleSubmit}>
<FormControl component="fieldset" className="form-control">
<TextField
id="login-username"
required
label="Username"
value={formData.username}
onChange={this.handleChange('username')}
/>
<TextField
id="login-password"
required
label="Password"
value={formData.password}
onChange={this.handleChange('password')}
type="password"
/>
<Button
variant="contained"
color="primary"
type="submit"
className="submit"
disabled={loading}
>
Login
</Button>
</FormControl>
</form>
</DialogContent>
</Dialog>
);
}
Example #29
| Source File: UserListToolbar.js From course-manager with MIT License | 5 votes |
|
export default function UserListToolbar({ numSelected, filterName, onFilterName }) {
return (
<RootStyle
sx={{
...(numSelected > 0 && {
color: 'primary.main',
bgcolor: 'primary.lighter'
})
}}
>
{numSelected > 0 ? (
<Typography component="div" variant="subtitle1">
{numSelected} selected
</Typography>
) : (
<SearchStyle
value={filterName}
onChange={onFilterName}
placeholder="Search user..."
startAdornment={
<InputAdornment position="start">
<Box component={Icon} icon={searchFill} sx={{ color: 'text.disabled' }} />
</InputAdornment>
}
/>
)}
{numSelected > 0 ? (
<Tooltip title="Delete">
<IconButton>
<Icon icon={trash2Fill} />
</IconButton>
</Tooltip>
) : (
<Tooltip title="Filter list">
<IconButton>
<Icon icon={roundFilterList} />
</IconButton>
</Tooltip>
)}
</RootStyle>
);
}
