@material-ui/icons#Close JavaScript Examples
The following examples show how to use
@material-ui/icons#Close.
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: 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 #2
| Source File: Survey.js From treetracker-admin-client with GNU Affero General Public License v3.0 | 5 votes |
|
Survey = ({ toggleSurvey, setToggleSurvey }) => {
const iOS =
typeof navigator !== 'undefined' &&
typeof navigator.userAgent !== 'undefined' &&
/iPad|iPhone|iPod/.test(navigator.userAgent);
const {
title,
formTitle,
directions,
drawer,
surveyCloseButton,
} = useStyles();
return (
<>
<SwipeableDrawer
disablebackdroptransition={!iOS ? 'true' : 'false'}
disablediscovery={iOS ? 'true' : 'false'}
anchor={'right'}
open={toggleSurvey}
onClose={() => setToggleSurvey(false)}
onOpen={() => setToggleSurvey}
classes={{ paper: drawer }}
PaperProps={{ elevation: 6 }}
>
<Grid container spacing={2}>
<Grid item className={title}>
<Typography variant="h3" className={formTitle}>
Quick Survey
</Typography>
<IconButton
color="primary"
className={surveyCloseButton}
onClick={() => setToggleSurvey(false)}
>
<Close variant="inherit" />
</IconButton>
</Grid>
<Grid item>
<Typography variant="body1" className={directions}>
Write a survey question and up to three answer options. Then
select the target audience for the survey. All replies will be
available in your Messaging Inbox.
</Typography>
</Grid>
<Grid item>
<SurveyForm setToggleSurvey={setToggleSurvey} />
</Grid>
</Grid>
</SwipeableDrawer>
</>
);
}
Example #3
| Source File: stopModal.js From Queen with MIT License | 5 votes |
|
StopModal = React.forwardRef(({ open, setOpen, definitive }, ref) => {
const { quit, definitiveQuit, currentPage } = useContext(OrchestratorContext);
const utilInfo = type => {
return {
...SIMPLE_CLICK_EVENT,
idParadataObject: `${type}-button`,
page: currentPage,
};
};
const close = () => setOpen(false);
const agree = () => {
if (definitive) definitiveQuit();
else quit();
setOpen(false);
};
const stopTitle = definitive ? D.stopDefinitiveLabelTitle : D.stopLabelTitle;
const stopDetails = definitive ? D.stopDefinitiveDetails : D.stopDetails;
const validateLabel = definitive ? D.definitiveValidateButton : D.validateButton;
const classes = useStyles();
const agreeRef = useRef();
const onEntered = () => {
agreeRef.current.focus();
};
return (
<Dialog
open={open}
onClose={close}
disableEnforceFocus
onEntered={onEntered}
aria-labelledby="alert-dialog-slide-title"
aria-describedby="alert-dialog-slide-description"
container={() => ref.current}
>
<focus-trap>
<DialogTitle id="alert-dialog-slide-title">
{stopTitle}
{/* eslint-disable-next-line jsx-a11y/no-autofocus */}
<IconButton aria-label="close" className={classes.closeButton} onClick={close}>
<Close />
</IconButton>
</DialogTitle>
<DialogContent dividers>
<DialogContentText id="alert-dialog-slide-description">{stopDetails}</DialogContentText>
</DialogContent>
<DialogActions>
{/* eslint-disable-next-line jsx-a11y/no-autofocus */}
<Button onClick={paradataHandler(agree)(utilInfo('end-survey'))} ref={agreeRef}>
{validateLabel}
</Button>
<Button onClick={close}>{D.cancelButton}</Button>
</DialogActions>
</focus-trap>
</Dialog>
);
})
Example #4
| Source File: CopyDialog.jsx From archeage-tools with The Unlicense | 5 votes |
|
render() {
const { open, handleClose, title, label, value } = this.props;
const { copied } = this.state;
return (
<Dialog
open={open}
onClose={handleClose}
maxWidth="lg"
>
<AppBar position="static">
<Toolbar variant="dense">
<Typography variant="subtitle1" className="title-text">{title}</Typography>
<IconButton color="inherit" aria-label="Close" onClick={handleClose}>
<Close />
</IconButton>
</Toolbar>
</AppBar>
<DialogContent>
<TextField
label={label}
value={value}
InputProps={{
readOnly: true,
ref: (node) => this.copyTextfield = node,
endAdornment: (
<InputAdornment position="end">
<Tooltip title="Copy">
<FileCopy style={{ cursor: 'pointer' }} onClick={this.handleCopy} />
</Tooltip>
</InputAdornment>
),
}}
fullWidth
multiline
helperText={copied ? <Typography color="primary" variant="body2" component="span">Copied!</Typography> : ''}
style={{ width: 300 }}
/>
</DialogContent>
</Dialog>
);
}
Example #5
| Source File: ResultPage.js From Quizzie with MIT License | 4 votes |
|
function ResultPage(props) {
const [quizId, setQuizId] = useState(props.match.params.id);
const [loading, setLoading] = useState(true);
const [name, setName] = useState("");
const [marks, setMarks] = useState(null);
const [responses, setResponses] = useState([]);
const resIcon = (response) => {
if(response.selected === response.correctAnswer) {
return <Check style={{color: 'green', marginLeft: '3px'}} />
} else if(response.selected === null) {
return <Warning style={{color: 'goldenrod', marginLeft: '3px'}} />
}
else {
return <Close style={{color: 'red', marginLeft: '3px'}} />
}
}
const getDetails = async () => {
let token = localStorage.getItem("authToken");
let url = `https://quizzie-api.herokuapp.com/quiz/${quizId}`;
try {
await axios.get(url, {
headers: {
"auth-token": token
}
}).then(res => {
setName(res.data.result.quizName);
})
} catch (error) {
console.log(error);
}
}
const getResponses = async () => {
let token = localStorage.getItem("authToken");
let url = `https://quizzie-api.herokuapp.com/user/studentQuizResult/${quizId}`;
try {
await axios.get(url, {
headers: {
"auth-token": token
}
}).then(res => {
setMarks(res.data.result.marks);
setResponses(res.data.result.responses);
setLoading(false);
})
} catch (error) {
console.log(error);
}
}
useState(() => {
getDetails();
getResponses();
}, [])
if (loading) {
return <Loading />
}
return (
<Container className="result-page">
<div className="result-head">
<Typography variant="h4" className="result-title">Results</Typography>
</div>
<div className="result-quiz-info">
<Typography variant="h5"><span className="profile-param">Quiz:</span> <strong>{name}</strong></Typography>
<Typography variant="h5"><span className="profile-param">Scored:</span> <strong>{marks}</strong> out of <strong>{responses.length}</strong></Typography>
</div>
<div className="result-responses">
<div className="result-response-title">
<Typography variant="h5">Responses</Typography>
</div>
<div className="result-responses-list">
{responses.map((response) => (
<ExpansionPanel elevation={3} className="expansion" key={response.quesId}>
<ExpansionPanelSummary
className="question-response"
expandIcon={<ExpandMore />}
aria-controls="question-content"
aria-label="Expand"
>
<Typography className="question-label">{response.description} {resIcon(response)}</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<List component="nav" className="options-display">
{response.options.map((option) => (
<ListItem button key={option._id}>
<ListItemIcon><Adjust style={{ color: response.correctAnswer === option.text ? 'green' : (response.selected === option.text? 'red': 'black') }} /></ListItemIcon>
<ListItemText style={{ color: response.correctAnswer === option.text ? 'green' : (response.selected === option.text? 'red': 'black') }} primary={option.text} />
</ListItem>
))}
</List>
</ExpansionPanelDetails>
</ExpansionPanel>
))}
</div>
</div>
</Container>
)
}
Example #6
| Source File: StudentResponses.js From Quizzie with MIT License | 4 votes |
|
function StudentResponses(props) {
const [loading, setLoading] = useState(true);
const [name, setName] = useState("");
const [marks, setMarks] = useState(null);
const [responses, setResponses] = useState([]);
const [redirect, setRedirect] = useState(false);
let state = null;
const resIcon = (response) => {
if(response.selected === response.correctAnswer) {
return <Check style={{color: 'green', marginLeft: '3px'}} />
} else if(response.selected === null) {
return <Warning style={{color: 'goldenrod', marginLeft: '3px'}} />
}
else {
return <Close style={{color: 'red', marginLeft: '3px'}} />
}
}
const setup = () => {
setName(state.userId.name);
setMarks(state.marks);
setResponses(state.responses);
setLoading(false);
}
useState(() => {
if(props.location.state === undefined) {
setLoading(false);
setRedirect(true);
return;
}
state = props.location.state.response;
setup();
}, [])
if (loading) {
return <Loading />
} else if(redirect) {
return <Redirect to="/dashboard" />
}
return (
<Container className="result-page">
<div className="result-head">
<Typography variant="h4" className="result-title">Results</Typography>
</div>
<div className="result-quiz-info">
<Typography variant="h5"><span className="profile-param">Quiz:</span> <strong>{name}</strong></Typography>
<Typography variant="h5"><span className="profile-param">Scored:</span> <strong>{marks}</strong> out of <strong>{responses.length}</strong></Typography>
</div>
<div className="result-responses">
<div className="result-response-title">
<Typography variant="h5">Responses</Typography>
</div>
<div className="result-responses-list">
{responses.map((response) => (
<ExpansionPanel elevation={3} className="expansion" key={response.quesId}>
<ExpansionPanelSummary
className="question-response"
expandIcon={<ExpandMore />}
aria-controls="question-content"
aria-label="Expand"
>
<Typography className="question-label">{response.description} {resIcon(response)}</Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<List component="nav" className="options-display">
{response.options.map((option) => (
<ListItem button key={option._id}>
<ListItemIcon><Adjust style={{ color: response.correctAnswer === option.text ? 'green' : (response.selected === option.text? 'red': 'black') }} /></ListItemIcon>
<ListItemText style={{ color: response.correctAnswer === option.text ? 'green' : (response.selected === option.text? 'red': 'black') }} primary={option.text} />
</ListItem>
))}
</List>
</ExpansionPanelDetails>
</ExpansionPanel>
))}
</div>
</div>
</Container>
)
}
Example #7
| Source File: Regions.js From treetracker-admin-client with GNU Affero General Public License v3.0 | 4 votes |
|
RegionTable = (props) => {
const { classes } = props;
// const sortOptions = { byName: 'name' };
const {
regions,
collections,
currentPage,
pageSize,
showCollections,
changeCurrentPage,
changePageSize,
// changeSort,
setShowCollections,
regionCount,
collectionCount,
upload,
updateRegion,
updateCollection,
deleteRegion,
deleteCollection,
} = useContext(RegionContext);
const { orgList, userHasOrg } = useContext(AppContext);
const [openEdit, setOpenEdit] = useState(false);
const [isUpload, setIsUpload] = useState(false);
const [selectedItem, setSelectedItem] = useState(undefined);
const [openDelete, setOpenDelete] = useState(false);
const [snackbarOpen, setSnackbarOpen] = useState(false);
const [snackbarMessage, setSnackbarMesssage] = useState('');
useEffect(() => {
if (!openDelete && !openEdit) {
// Wait for the dialog to disappear before clearing the selected item.
setTimeout(() => {
setSelectedItem(undefined);
setIsUpload(false);
}, 300);
}
}, [openDelete, openEdit]);
const tableRef = useRef(null);
const handleChangeCurrentPage = (event, value) => {
tableRef.current && tableRef.current.scrollIntoView();
changeCurrentPage(value);
};
const handleChangeRowsPerPage = (event) => {
changePageSize(Number(event.target.value));
changeCurrentPage(0);
};
const handleEdit = (item, isCollection) => {
setSelectedItem({
...item,
isCollection,
});
setOpenEdit(true);
};
const handleDelete = (item, isCollection) => {
setSelectedItem({
...item,
isCollection,
});
setOpenDelete(true);
};
const handleChangeShowCollections = (event, val) => {
if (val !== null) {
setShowCollections(val);
}
};
const handleUploadClick = () => {
setIsUpload(true);
setOpenEdit(true);
};
const handleSnackbarClose = (event, reason) => {
if (reason === 'clickaway') {
return;
}
setSnackbarOpen(false);
setSnackbarMesssage('');
};
const showSnackbar = (message) => {
setSnackbarMesssage(message);
setSnackbarOpen(true);
};
const RegionProperties = ({ region, max = 0 }) => {
return Object.keys(region.properties || {}).map((key, idx) => {
if (max === 0 || idx < max)
return (
<Grid key={`prop_${region.id}_${key}_${max}`}>
<span>
<b>{key}:</b>
</span>
<span>{JSON.stringify(region.properties[key])}</span>
{max > 0 && idx === max - 1 && <span> …</span>}
</Grid>
);
});
};
const RegionTableRows = () => {
return (showCollections ? collections : regions).map((item) => (
<TableRow key={item.id} role="listitem">
{/* <TableCell>
<Checkbox
onChange={(e) => handleSelect(e.target.checked, region.id)}
checked={selected.includes(region.id)}
/>
</TableCell> */}
<TableCell component="th" scope="row" data-testid="region">
{item.name}
</TableCell>
{!userHasOrg && (
<TableCell>
{orgList.find((org) => org.stakeholder_uuid === item.owner_id)
?.name || '---'}
</TableCell>
)}
{!showCollections && (
<>
<TableCell>{item.collection_name || '---'}</TableCell>
<Tooltip title={<RegionProperties region={item} />}>
<TableCell>
<RegionProperties region={item} max={3} />
</TableCell>
</Tooltip>
<TableCell align="center">
{item.show_on_org_map ? 'Yes' : 'No'}
</TableCell>
<TableCell align="center">
{item.calculate_statistics ? 'Yes' : 'No'}
</TableCell>
</>
)}
<TableCell align="right" className={classes.operations}>
<IconButton
title="edit"
onClick={() => handleEdit(item, showCollections)}
>
<Edit />
</IconButton>
<IconButton
title="delete"
onClick={() => handleDelete(item, showCollections)}
>
<Delete />
</IconButton>
</TableCell>
</TableRow>
));
};
const RegionTablePagination = () => (
<TablePagination
count={Number(showCollections ? collectionCount : regionCount)}
rowsPerPageOptions={[25, 50, 100, { label: 'All', value: -1 }]}
page={currentPage}
rowsPerPage={pageSize}
onChangePage={handleChangeCurrentPage}
onChangeRowsPerPage={handleChangeRowsPerPage}
SelectProps={{
inputProps: { 'aria-label': 'rows per page' },
native: true,
}}
/>
);
return (
<>
<Grid container className={classes.regionsTableContainer}>
<Paper elevation={3} className={classes.menu}>
<Menu variant="plain" />
</Paper>
<Grid item container className={classes.rightBox}>
<Grid item xs={12}>
<Grid
container
justify="space-between"
className={classes.titleBox}
>
<Grid item>
<Grid container>
<Grid item>
<Typography variant="h2">Regions</Typography>
</Grid>
</Grid>
</Grid>
<Grid item className={classes.headerButtonBox}>
<ToggleButtonGroup
color="primary"
value={showCollections}
exclusive
onChange={handleChangeShowCollections}
>
<ToggleButton value={false}>Regions</ToggleButton>
<ToggleButton value={true}>Collections</ToggleButton>
</ToggleButtonGroup>
</Grid>
<Grid item className={classes.headerButtonBox}>
<Button
onClick={handleUploadClick}
variant="contained"
className={classes.upload}
color="primary"
>
UPLOAD
</Button>
</Grid>
</Grid>
<Grid container direction="column" className={classes.bodyBox}>
<TableContainer component={Paper} ref={tableRef}>
<Table className={classes.table} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell>
Name
{/* <IconButton
title="sortbyName"
onClick={() => changeSort(sortOptions.byName)}
>
<SortIcon />
</IconButton> */}
</TableCell>
{!userHasOrg && <TableCell>Owner</TableCell>}
{!showCollections && (
<>
<TableCell>Collection</TableCell>
<TableCell>Properties</TableCell>
<TableCell align="center">Shown on Org Map</TableCell>
<TableCell align="center">
Statistics Calculated
</TableCell>
</>
)}
<TableCell></TableCell>
</TableRow>
</TableHead>
<TableBody>
<RegionTableRows />
</TableBody>
<TableFooter>
<TableRow>
<RegionTablePagination />
</TableRow>
</TableFooter>
</Table>
</TableContainer>
</Grid>
</Grid>
</Grid>
</Grid>
<EditModal
openEdit={openEdit}
setOpenEdit={setOpenEdit}
isUpload={isUpload}
selectedItem={selectedItem}
styles={{ ...classes }}
upload={upload}
updateRegion={updateRegion}
updateCollection={updateCollection}
showSnackbar={showSnackbar}
/>
<DeleteDialog
selectedItem={selectedItem}
openDelete={openDelete}
setOpenDelete={setOpenDelete}
deleteRegion={deleteRegion}
deleteCollection={deleteCollection}
showSnackbar={showSnackbar}
/>
<Snackbar
open={snackbarOpen}
autoHideDuration={3000}
onClose={handleSnackbarClose}
message={snackbarMessage}
action={
<>
<IconButton
size="small"
aria-label="close"
color="inherit"
onClick={handleSnackbarClose}
>
<Close fontSize="small" />
</IconButton>
</>
}
/>
</>
);
}
Example #8
| Source File: Card.js From acsys with MIT License | 4 votes |
|
Card = memo(({ id, entry, deleteField }) => {
const ref = useRef(null);
const containerStyle = useMemo(() => ({ ...style }));
const data = [];
data.push(<option value="string">string</option>);
data.push(<option value="number">number</option>);
data.push(<option value="boolean">boolean</option>);
const width = [];
for (let i = 0; i < 12; i++) {
width.push(<option value={i + 1}>{i + 1}</option>);
}
const setDataType = (event) => {
entry.dataType = event;
};
const setFieldName = (event) => {
entry.fieldName = event;
};
const setValue = (event) => {
entry.value = event;
};
return (
<Paper style={{ maxHeight: 160, marginBottom: 30 }}>
<AppBar
style={{ height: 30, borderBottom: '1px solid rgba(0, 0, 0, 0.12)' }}
position="static"
color="default"
elevation={0}
>
<Grid container spacing={1}>
<Grid item xs />
<Grid item>
<IconButton
edge="start"
aria-label="remove"
style={{ padding: 0 }}
onClick={() => deleteField(entry)}
>
<Close />
</IconButton>
</Grid>
</Grid>
</AppBar>
<div ref={ref} style={containerStyle}>
<Grid container spacing={2}>
<Grid item xs={2}>
<div>
<Typography>Data Type</Typography>
</div>
</Grid>
<Grid item xs={5}>
<div>
<Typography>Field Name</Typography>
</div>
</Grid>
<Grid item xs={5}>
<div>
<Typography>Value</Typography>
</div>
</Grid>
<Grid item xs={2}>
<div>
<NativeSelect
defaultValue={entry.dataType}
onChange={(e) => setDataType(e.target.value)}
>
{data}
</NativeSelect>
</div>
</Grid>
<Grid item xs={5}>
<div>
<input
placeholder="Enter Field Name"
defaultValue={entry.fieldName}
onChange={(e) => setFieldName(e.target.value)}
type="text"
style={{ width: '90%' }}
/>
</div>
</Grid>
<Grid item xs={5}>
<div>
<input
placeholder="Enter Value"
defaultValue={entry.value}
onChange={(e) => setValue(e.target.value)}
type="text"
style={{ width: '90%' }}
/>
</div>
</Grid>
</Grid>
</div>
</Paper>
);
})
Example #9
| Source File: App.js From gitlab-lint-react with BSD 3-Clause "New" or "Revised" License | 4 votes |
|
App = () => {
const classes = useStyles();
const [state, dispatch] = useReducer(reducer, initialState, initializer);
const theme = useMemo(
() =>
createMuiTheme({
palette: {
...(state.mode === "light"
? {
// light mode
primary: {
main: gloBlue,
},
secondary: {
main: gloBlue,
},
primary1Color: gloBlue,
type: state.mode,
}
: {
// dark mode
primary: {
main: "#07366E",
},
secondary: {
main: gloBlue,
},
background: {
default: "#020c18",
paper: "#05182E",
},
primary1Color: gloBlue,
type: state.mode,
}),
},
typography: {
useNextVariants: true,
},
}),
[state.mode]
);
useEffect(() => {
localStorage.setItem("state", JSON.stringify(state));
}, [state]);
const [isMobile, setIsMobile] = React.useState(false);
const handleToggleMenu = () => {
setIsMobile((isMobile) => !isMobile);
};
function closeMenuOnScroll() {
setIsMobile(false);
}
React.useEffect(() => {
window.addEventListener("scroll", closeMenuOnScroll);
return () => {
window.removeEventListener("scroll", closeMenuOnScroll);
};
}, []);
return (
<Router>
<MuiThemeProvider theme={theme}>
<div className={classes.root}>
<CssBaseline />
<AppBar position="static" color="primary">
<Container maxWidth="lg">
<Toolbar className={classes.dFlex}>
<IconButton
className={classes.IconButton}
onClick={() => dispatch({ type: "toggle" })}
color="inherit"
>
{theme.palette.type === "dark" ? (
<Brightness4 />
) : (
<Brightness7 />
)}
</IconButton>
<Typography
component="a"
color="inherit"
variant="h6"
className={classes.title}
href="/"
>
gitlab-lint
</Typography>
<div
className={
isMobile ? classes.navLinksMobile : classes.navLinks
}
onClick={handleToggleMenu}
>
<Button component={Link} color="inherit" to="/rules">
Rules
</Button>
<Button component={Link} color="inherit" to="/projects">
Projects
</Button>
<Button component={Link} color="inherit" to="/levels">
Levels
</Button>
<Button component={Link} color="inherit" to="/about">
About
</Button>
</div>
<button
className={classes.mobileMenuIcon}
onClick={handleToggleMenu}
>
{isMobile ? <Close /> : <Menu />}
</button>
</Toolbar>
</Container>
</AppBar>
<main className={classes.main}>
<Container maxWidth="lg">
<Switch>
<Route exact path="/rules/:id">
<Rule />
</Route>
<Route exact path="/rules">
<Rules />
</Route>
<Route exact path="/projects/:id">
<Project />
</Route>
<Route exact path="/projects">
<Projects />
</Route>
<Route exact path="/levels">
<Levels />
</Route>
<Route exact path="/about">
<About />
</Route>
<Route exact path="/">
<Dashboard />
</Route>
<Route path={"*"} component={NotFound} />
</Switch>
</Container>
</main>
</div>
</MuiThemeProvider>
</Router>
);
}
Example #10
| Source File: App.js From covid-vaccine-notification-system with BSD 3-Clause "New" or "Revised" License | 4 votes |
|
/*
* Author:- Rahul Malhotra
* Description:- This method is used to render the UI
*/
render() {
const { classes } = this.props;
const {
states,
districts,
vaccines,
prices,
ages,
centreIdsToSkip,
searchOptions,
hasSearched,
vaccinesData,
notify,
selectedSearchBy,
pincode,
hasError,
selectedState,
selectedDistrict,
selectedAge,
selectedVaccine,
selectedVaccinePrice,
minDose1,
minDose2,
showBookVaccineConfirmationModal
} = this.state;
let showHiddenVaccineCentersButton, notifyButton, clearNotifyButton;
// * Setting up show hidden vaccination centres button
if (centreIdsToSkip.length) {
showHiddenVaccineCentersButton = (
<FormControl className={classes.formControl}>
<Button
variant="contained"
color="secondary"
onClick={this.clearCentreIdsToSkip.bind(this)}
startIcon={<Visibility />}
>
Show Hidden Vaccination Centres
</Button>
</FormControl>
);
}
// * Setting up notifications button
if (
hasSearched &&
vaccinesData.length === 0 &&
!notify &&
(
(
selectedSearchBy === 'district' &&
this.stateSelected() &&
this.districtSelected()
) ||
(
selectedSearchBy === 'pincode' &&
this.pincodeEntered()
)
)
) {
notifyButton = (
<FormControl className={classes.formControl}>
<Button
variant="contained"
color="primary"
onClick={this.notifyVaccineAvailability.bind(this)}
endIcon={<Notifications />}
>
Notify me when vaccines are available
</Button>
</FormControl>
);
}
// * Setting up stop notifications button
if (notify) {
clearNotifyButton = (
<FormControl className={classes.formControl}>
<Button
variant="contained"
color="secondary"
onClick={this.clearNotificationSearch.bind(this)}
endIcon={<Close />}
>
Stop Notifications
</Button>
</FormControl>
)
}
// * Setting up the UI
return (
<div>
<Card style={{ margin: '1rem' }}>
<CardContent>
<Typography gutterBottom variant="h5" component="h2">
COVID-19 Vaccine Notification System
</Typography>
{/* Form Inputs */}
<FormControl variant="outlined" className={classes.formControl}>
<InputLabel id="searchBy-label">Search by</InputLabel>
<Select
labelId="searchBy-label"
id="searchBy-input"
value={selectedSearchBy}
onChange={this.selectSearchBy}
label="Search by"
autoFocus
>
{searchOptions.map((searchOption) => (
<MenuItem key={searchOption.id} value={searchOption.value}>
{searchOption.name}
</MenuItem>
))}
</Select>
</FormControl>
{
(selectedSearchBy === 'pincode') && (
<FormControl required variant="outlined" className={classes.formControl} error={pincode && !this.pincodeEntered()}>
<TextField
required
id="outlined-pincode"
label="Enter pincode"
variant="outlined"
value={pincode}
type="number"
onChange={this.setPincode}
error={hasError && !this.pincodeEntered()}
helperText={
hasError && !this.pincodeEntered() &&
(
"Please enter pincode"
)
}
/>
</FormControl>
)
}
{
(selectedSearchBy === 'district') && (
<span>
<FormControl required variant="outlined" className={classes.formControl} error={hasError && !this.stateSelected()}>
<InputLabel id="state-label">Select state</InputLabel>
<Select
labelId="state-label"
id="state-input"
value={selectedState}
onChange={this.selectState}
label="Select state"
error={hasError && !this.stateSelected()}
>
{states.map((state) => (
<MenuItem key={state.state_id} value={state.state_id}>
{state.state_name}
</MenuItem>
))}
</Select>
{
hasError && !this.stateSelected() &&
(
<FormHelperText>Please select a state</FormHelperText>
)
}
</FormControl>
<FormControl required variant="outlined" className={classes.formControl} error={hasError && !this.districtSelected()}>
<InputLabel id="district-label">Select district</InputLabel>
<Select
labelId="district-label"
id="district-input"
value={selectedDistrict}
onChange={this.selectDistrict}
label="Select district"
error={hasError && !this.districtSelected()}
>
{districts.map((district) => (
<MenuItem
key={district.district_id}
value={district.district_id}
>
{district.district_name}
</MenuItem>
))}
</Select>
{
hasError && !this.districtSelected() &&
(
<FormHelperText>Please select a district</FormHelperText>
)
}
</FormControl>
</span>
)
}
<FormControl variant="outlined" className={classes.formControl}>
<InputLabel id="vaccine-label">Select vaccine</InputLabel>
<Select
labelId="vaccine-label"
id="vaccine-input"
value={selectedVaccine}
onChange={this.selectVaccine}
label="Select vaccine"
>
{vaccines.map((vaccine) => (
<MenuItem key={vaccine.id} value={vaccine.value}>
{vaccine.name}
</MenuItem>
))}
</Select>
</FormControl>
<FormControl variant="outlined" className={classes.formControl}>
<InputLabel id="price-label">Select price</InputLabel>
<Select
labelId="price-label"
id="price-input"
value={selectedVaccinePrice}
onChange={this.selectVaccinePrice}
label="Select price"
>
{prices.map((price) => (
<MenuItem key={price.id} value={price.value}>
{price.name}
</MenuItem>
))}
</Select>
</FormControl>
<FormControl variant="outlined" className={classes.formControl}>
<InputLabel id="age-label">Minimum age</InputLabel>
<Select
labelId="age-label"
id="age-input"
value={selectedAge}
onChange={this.selectAge}
label="Minimum age"
>
{ages.map((age) => (
<MenuItem key={age.id} value={age.value}>
{age.name}
</MenuItem>
))}
</Select>
</FormControl>
<FormControl variant="outlined" className={classes.formControl}>
<TextField
id="outlined-min-vaccine-dose-1"
label="Quantity required - 1st dose"
variant="outlined"
value={minDose1}
type="number"
onChange={this.setMinimumDose1}
onFocus={this.focusMinimumDose1}
/>
</FormControl>
<FormControl variant="outlined" className={classes.formControl}>
<TextField
id="outlined-min-vaccine-dose-2"
label="Quantity required - 2nd dose"
variant="outlined"
value={minDose2}
type="number"
onChange={this.setMinimumDose2}
onFocus={this.focusMinimumDose2}
/>
</FormControl>
<br />
<FormControl className={classes.formControl}>
<Button
variant="contained"
color="primary"
onClick={this.fetchVaccineCentres.bind(this)}
startIcon={<Search />}
>
Search Vaccination Centres
</Button>
</FormControl>
{showHiddenVaccineCentersButton}
{notifyButton}
{clearNotifyButton}
<FormControl className={classes.formControl}>
<Button
variant="contained"
color="primary"
onClick={this.displayBookVaccineModal.bind(this)}
endIcon={<ArrowForward />}
>
Book Vaccination Slot
</Button>
<ConfirmModal open={showBookVaccineConfirmationModal} onConfirm={this.bookVaccineSlot.bind(this)} onReject={this.closeBookVaccineModal.bind(this)} onClose={this.closeBookVaccineModal.bind(this)} heading="Book Vaccination Slot?" description="Please make sure that you take a note of the center details before proceeding" confirmButtonText="Yes" rejectButtonText="No" />
</FormControl>
</CardContent>
</Card>
{/* Data Table */}
<div style={{ maxWidth: "100%", margin: '1rem' }}>
<MaterialTable
icons={tableIcons}
columns={[
{ title: "Date", field: "date" },
{ title: "Center Name", field: "name" },
{ title: "Center Address", field: "address" },
{ title: "Vaccine Name", field: "vaccineName" },
{ title: "Minimum Age Required", field: "minAge" },
{ title: "Price", field: "price" },
{ title: "1st Dose Availability", field: "dose1Availability", type: "numeric" },
{ title: "2nd Dose Availability", field: "dose2Availability", type: "numeric" }
]}
data={vaccinesData}
title="Vaccination Centres"
options={{ selection: true }}
actions={[
{
tooltip: "Remove centres from search results",
icon: () => {
return <VisibilityOff />;
},
onClick: (event, centres) => {
// * Removing selected centres from search results
let currentCentreIdsToSkip = [...centreIdsToSkip];
centres.forEach((centre) =>
currentCentreIdsToSkip.push(centre.center_id)
);
// * Setting up unique centre ids to skip
this.setState({
centreIdsToSkip: currentCentreIdsToSkip.filter(this.getUnique),
});
// * Removing centres from search results
this.setState({
vaccinesData: vaccinesData.filter((vaccine) => !currentCentreIdsToSkip.includes(vaccine.center_id))
});
},
},
]}
/>
</div>
{/* Hit Counter */}
<br />
<center><b>Total Views Worldwide</b></center>
<br />
<center>
<a href="https://www.hitwebcounter.com" target="_blank" rel="noreferrer">
<img src="https://hitwebcounter.com/counter/counter.php?page=7816923&style=0005&nbdigits=9&type=page&initCount=0" title="Free Counter" Alt="web counter" border="0" />
</a>
</center>
<br />
</div>
);
}
Example #11
| Source File: Toolbox.jsx From doc2pen with Creative Commons Zero v1.0 Universal | 4 votes |
|
function VerticalTabs(props) {
const {
color,
setColor,
fillColor,
setFillColor,
fillOpacity,
setFillOpacity,
setBowing,
setFillStyle,
setFillWeight,
setHachureAngle,
setHachureGap,
bowing,
fillStyle,
fillWeight,
hachureAngle,
hachureGap,
background,
setBackground,
width,
setWidth,
stroke,
setStroke,
roughness,
setRoughness,
type,
setType,
fontSize,
setFontSize,
fontStyle,
setFontStyle,
fontFamily,
setFontFamily,
edge,
setEdge,
clear,
download,
initiateLoadSaved,
loadLastState,
saveInstance,
} = props;
const [displayColorPicker, setDisplayColorPicker] = useState(false);
const ColorPicker = props => {
const { width, name, color, onColorChange } = props;
return (
<div className={styles.root}>
<div className={styles.swatch}>
<div
className={styles.colorIndicator}
style={{
backgroundColor: props.color || "#fff",
}}
onMouseDown={() => {
setDisplayColorPicker(true);
}}
/>
</div>
{displayColorPicker ? (
<ClickAwayListener
onClickAway={() => {
setDisplayColorPicker(false);
}}
>
<div className={styles.popover}>
<ChromePicker
width={width}
name={name}
color={color}
onChangeComplete={color => onColorChange(color.hex)}
/>
</div>
</ClickAwayListener>
) : null}
</div>
);
};
const classes = useStyles();
const [value, setValue] = React.useState(0);
const handleChange = (event, newValue) => {
setValue(newValue);
};
function Feature({ title, children, classname }) {
return (
<ListItem>
<div className={styles.feature + " " + classname}>
<ListItemText className={styles.title}>{title}</ListItemText>
<div className={styles.body}>{children}</div>
</div>
</ListItem>
);
}
function Shape({ type_, id, label, children }) {
return (
<label style={{ marginTop: "3px" }} htmlFor={id} title={label}>
<div
className={`${styles.feature} ${
type === type_ && styles.active_feature
}`}
onClick={() => setType(type_)}
id={id}
>
{children}
</div>
</label>
);
}
return (
<div className={styles.toolbox_root}>
<div className={styles.canvas_toolbox}>
<div className={classes.root}>
<Tabs
orientation="vertical"
variant="scrollable"
value={value}
onChange={handleChange}
className={classes.tabs}
>
<Tab
onClick={() => setType("pen")}
label={
<label title="Project">
<AccountTree />
</label>
}
{...a11yProps(0)}
/>
<Tab
onClick={() => setType("pen")}
label={
<label title="Canvas Setup">
<RiFileSettingsLine size={25} />
</label>
}
{...a11yProps(1)}
/>
<Tab
onClick={() => setType("pen")}
label={
<label title="Shapes & Tools">
<FaShapes size={25} />
</label>
}
{...a11yProps(2)}
/>
<Tab
onClick={() => setType("text")}
label={
<label title="Text">
<TextFields />
</label>
}
{...a11yProps(3)}
/>
<Tab
onClick={() => {
setType("pen");
}}
label={
<label title="Icon Library">
<Apps />
</label>
}
{...a11yProps(4)}
/>
<Tab
onClick={() => setType("pen")}
label={
<label title="Minimize Sidebar">
<Close />
</label>
}
{...a11yProps(5)}
/>
</Tabs>
<TabPanel value={value} index={0}>
<List component="div">
<ListItem button onClick={clear}>
<ListItemIcon>
<Delete />
</ListItemIcon>
<ListItemText primary="Clear Canvas" />
</ListItem>
<ListItem button onClick={download}>
<ListItemIcon>
<SaveAlt />
</ListItemIcon>
<ListItemText primary="Download PNG" />
</ListItem>
<ListItem
button
onClick={() => initiateLoadSaved("img-file-selector")}
>
<ListItemIcon>
<PhotoLibrary />
<input
type="file"
id="img-file-selector"
style={{ display: "none" }}
accept="image/*"
onChange={event => loadLastState(event)}
/>
</ListItemIcon>
<ListItemText primary="Place Image" />
</ListItem>
<ListItem
button
onClick={() => saveInstance("savedProgress.d2ps")}
>
<ListItemIcon>
<Save />
</ListItemIcon>
<ListItemText primary="Save & download Progress" />
</ListItem>
<ListItem
button
onClick={() => initiateLoadSaved("file-selector")}
>
<ListItemIcon style={{ width: 0 }}>
<D2psIcon
style={{
transform: "scale(0.6) translateX(-30px)",
}}
/>
<input
type="file"
id="file-selector"
style={{ display: "none" }}
accept=".d2ps"
onChange={event => loadLastState(event)}
/>
</ListItemIcon>
<ListItemText primary="Load Previous Progress" />
</ListItem>
</List>
</TabPanel>
<TabPanel value={value} index={1}>
<List component="div">
<Feature title="Canvas Setup">
<div className={styles.colorPicker}>
<ColorPicker
width={200}
name="canvas_bg_color"
color={background}
onColorChange={setBackground}
/>
<input
className={styles.hexInput}
placeholder="#"
type="text"
value={background}
onInput={e => setBackground(e.target.value)}
/>
</div>
</Feature>
</List>
</TabPanel>
<TabPanel value={value} index={2}>
<List component="div">
<Feature title="Shapes and Tools">
<Shape type_="pen" id="sketch-shapes-pen" label="Pen">
<FaPencilAlt size={12} />
</Shape>
<Shape type_="line" id="sketch-shapes-line" label="Line">
<FaSlash size={10} />
</Shape>
<Shape type_="square" id="sketch-shapes-square" label="Square">
<FaRegSquare size={10} />
</Shape>
<Shape type_="circle" id="sketch-shapes-circle" label="Circle">
<FaRegCircle size={10} />
</Shape>
<Shape
type_="triangle"
id="sketch-shapes-triangle"
label="Triangle"
>
<GiTriangleTarget size={12} />
</Shape>
<Shape type_="arrow" id="sketch-shapes-arrow" label="Arrow">
<BsArrowUpRight size={12} />
</Shape>
<Shape
type_="diamond"
id="sketch-shapes-diamond"
label="Diamond"
>
<BsDiamond size={10} />
</Shape>
<Shape
type_="biShapeTriangle"
id="sketch-shapes-biShapeTriangle"
label="Bi Shape Triangle"
>
<BiShapeTriangle size={12} />
</Shape>
</Feature>
<Divider />
{!["text", "pen", "line"].includes(type) && (
<>
<Feature title="Fill Style">
<select
name="shape_fill_style"
value={fillStyle}
onChange={e => setFillStyle(e.target.value)}
>
<option value="none">none</option>
<option value="solid">solid</option>
<option value="hachure">hachure</option>
<option value="zigzag">zigzag</option>
<option value="cross-hatch">cross-hatch</option>
<option value="dots">dots</option>
<option value="dashed">dashed</option>
<option value="zigzag-line">zigzag-line</option>
</select>
</Feature>
{fillStyle !== "none" && (
<>
<Feature title="Fill Color">
<div className={styles.colorPicker}>
<ColorPicker
width={200}
name="canvas_pen_color"
color={fillColor}
onColorChange={setFillColor}
/>
<input
className={styles.hexInput}
placeholder="#"
type="text"
value={fillColor}
onInput={e => setFillColor(e.target.value)}
/>
</div>
</Feature>
<Feature
classname={styles.sliderWrapper}
title={"Fill Opacity"}
>
<input
className={styles.slider}
type="range"
min={0}
max={1}
step={0.1}
value={fillOpacity}
onChange={e => setFillOpacity(e.target.value)}
/>
</Feature>
</>
)}
{!["none", "solid"].includes(fillStyle) && (
<>
<Feature
classname={styles.sliderWrapper}
title={"Fill Weight"}
>
<input
className={styles.slider}
type="range"
min={1}
max={10}
step={0.1}
value={fillWeight}
onChange={e => setFillWeight(e.target.value)}
/>
</Feature>
<Feature
classname={styles.sliderWrapper}
title={"Fill Hachure Angle"}
>
<input
className={styles.slider}
type="range"
min={0}
max={360}
step={1}
value={hachureAngle + 180}
onChange={e => setHachureAngle(e.target.value - 180)}
/>
</Feature>
<Feature
classname={styles.sliderWrapper}
title={"Fill Hachure Gap"}
>
<input
className={styles.slider}
type="range"
min={1}
max={10}
step={0.1}
value={hachureGap}
onChange={e => setHachureGap(e.target.value)}
/>
</Feature>
</>
)}
<Divider />
</>
)}
<Feature title="Stroke">
<div className={styles.colorPicker}>
<ColorPicker
width={200}
name="canvas_pen_color"
color={color}
onColorChange={setColor}
/>
<input
className={styles.hexInput}
placeholder="#"
type="text"
value={color}
onInput={e => setColor(e.target.value)}
/>
</div>
</Feature>
<Feature classname={styles.sliderWrapper} title={"Roughness"}>
<input
className={styles.slider}
type="range"
min={0}
max={5}
step={0.1}
value={roughness}
onChange={e => setRoughness(e.target.value)}
/>
</Feature>
<Feature classname={styles.sliderWrapper} title={"Stroke Bowing"}>
<input
className={styles.slider}
type="range"
min={0}
max={10}
step={0.1}
value={bowing}
onChange={e => setBowing(e.target.value)}
/>
</Feature>
<Feature title="Stroke Width">
<select
name="canvas_pen_width"
value={width}
onChange={e => setWidth(e.target.value)}
>
<option value="1">1px</option>
<option value="2">2px</option>
<option value="3">3px</option>
<option value="4">4px</option>
<option value="5">5px</option>
<option value="6">6px</option>
<option value="7">7px</option>
<option value="8">8px</option>
<option value="9">9px</option>
<option value="10">10px</option>
<option value="11">11px</option>
</select>
</Feature>
<Feature title="Stroke Style">
<div
className={`${styles.feature_box} ${
stroke === "none" && styles.active_feature_box
}`}
onClick={() => setStroke("none")}
>
<AiOutlineLine size={20} />
</div>
<div
className={`${styles.feature_box} ${
stroke === "small" && styles.active_feature_box
}`}
onClick={() => setStroke("small")}
>
<AiOutlineSmallDash size={20} />
</div>
<div
className={`${styles.feature_box} ${
stroke === "big" && styles.active_feature_box
}`}
onClick={() => setStroke("big")}
>
<AiOutlineDash size={20} />
</div>
</Feature>
<Feature title="Edge">
<select value={edge} onChange={e => setEdge(e.target.value)}>
<option value="round">Round</option>
<option value="bevel">Bevel</option>
<option value="miter">Miter</option>
</select>
</Feature>
</List>
</TabPanel>
<TabPanel value={value} index={3}>
<List component="div">
<Feature title="Stroke">
<div className={styles.colorPicker}>
<ColorPicker
width={200}
name="canvas_pen_color"
color={color}
onColorChange={setColor}
/>
<input
className={styles.hexInput}
placeholder="#"
type="text"
value={color}
onInput={e => setColor(e.target.value)}
/>
</div>
</Feature>
<Feature
classname={styles.sliderWrapper}
title={`Font [ ${fontSize} ]`}
>
<input
className={styles.slider}
type="range"
min="10"
max="20"
value={fontSize * 10}
onChange={e => setFontSize(e.target.value / 10)}
/>
</Feature>
<Feature title="Font Style">
<div
className={`${styles.feature_box} ${
fontStyle === "normal" && styles.active_feature_box
}`}
onClick={() => setFontStyle("normal")}
>
<BsFonts size={20} />
</div>
<div
className={`${styles.feature_box} ${
fontStyle === "italic" && styles.active_feature_box
}`}
onClick={() => setFontStyle("italic")}
>
<FaItalic size={15} />
</div>
<div
className={`${styles.feature_box} ${
fontStyle === "bold" && styles.active_feature_box
}`}
onClick={() => setFontStyle("bold")}
>
<FaBold size={15} />
</div>
</Feature>
<Feature title="Font Family">
<select
value={fontFamily}
onChange={e => setFontFamily(e.target.value)}
>
<option value="cursive">Cursive</option>
<option value="Courier New">Courier New</option>
<option value="serif">Serif</option>
</select>
</Feature>
</List>
</TabPanel>
<TabPanel value={value} index={4}>
<List component="div">
<IconsLibrary />
</List>
</TabPanel>
<TabPanel
className={classes.tabPanelClose}
value={value}
index={5}
></TabPanel>
</div>
</div>
</div>
);
}
