@material-ui/core#Input JavaScript Examples
The following examples show how to use
@material-ui/core#Input.
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: SearchInput.js From SESTA-FMS with GNU Affero General Public License v3.0 | 6 votes |
|
SearchInput = props => {
const { className, onChange, style, ...rest } = props;
const classes = useStyles();
return (
<Paper
{...rest}
className={clsx(classes.root, className)}
style={style}
>
<SearchIcon className={classes.icon} />
<Input
{...rest}
className={classes.input}
disableUnderline
onChange={onChange}
/>
</Paper>
);
}
Example #2
| Source File: SettingsPage.js From Doto with MIT License | 6 votes |
|
InputEmailField = props => {
return (
<FormControl id="input-field">
<Input
startAdornment={
<InputAdornment position="start">
<EmailIcon />
</InputAdornment>
}
value={props.email}
disabled={true}
/>
</FormControl>
);
}
Example #3
| Source File: SearchInput.js From git-insights with MIT License | 6 votes |
|
SearchInput = props => {
const { className, onChange, style, ...rest } = props;
const classes = useStyles();
return (
<Paper
{...rest}
className={clsx(classes.root, className)}
style={style}
>
<SearchIcon className={classes.icon} />
<Input
{...rest}
className={classes.input}
disableUnderline
onChange={onChange}
/>
</Paper>
);
}
Example #4
| Source File: Search.js From dataqa with GNU General Public License v3.0 | 6 votes |
|
function SearchInput({ getAutocomplete, getButtonProps, getInputProps, appliedFilters }) {
return (
<>
<div className="sui-search-box__wrapper">
<Input
{...getInputProps()}
startAdornment={appliedFilters}
/>
{getAutocomplete()}
</div>
<input {...getButtonProps()} />
</>
);
}
Example #5
| Source File: index.js From AED-Map with MIT License | 6 votes |
|
MyImageField = ({ label, id, name, setFieldValue, ...props }) => {
const classes = useStyles();
return (
<div className={classes.root}>
<Input
type="file"
inputProps={{
accept: 'image/*',
multiple: true
}}
name={name}
id={id}
className={classes.imageField}
onChange={e => {
setFieldValue('images', e.currentTarget.files);
}}
/>
<InputLabel htmlFor={id}>
<Button {...props} component='span'>
{ label }
</Button>
</InputLabel>
</div>
);
}
Example #6
| Source File: AddGraph.js From Interceptor with MIT License | 6 votes |
|
render() {
//console.log("Rendering AddGraph");
return (
<Dialog
open={this.props.show}
aria-labelledby="form-dialog-title"
>
<DialogTitle id="form-dialog-title">Add Graph</DialogTitle>
<DialogContent>
<Grid container spacing={2} direction="column" alignItems="center">
<Grid item>
<FormControl>
<InputLabel htmlFor="plotname">Plot Name</InputLabel>
<Input
id="plotname"
onChange={event => this.plotname = event.target.value}
aria-describedby="plotname-helper-text"
inputProps={{
'aria-label': 'Plot Name',
}}
/>
<FormHelperText id="plotname-helper-text">Can be left empty</FormHelperText>
</FormControl>
</Grid>
<Grid item>
<ToggleButtonGroup orientation="vertical" value={this.lines} onChange={(event, lines) => {this.lines = lines; this.setState({render_revision: this.state.render_revision + 1}); } } aria-label="lines available">
{this.renderButtons()}
</ToggleButtonGroup>
</Grid>
</Grid>
</DialogContent>
<DialogActions>
<Button onClick={() => this.props.addplot(this.plotname, this.lines)} color="default">
Save
</Button>
</DialogActions>
</Dialog>
);
}
Example #7
| Source File: CreateNewBudget.js From Simplify-Testing-with-React-Testing-Library with MIT License | 5 votes |
|
render() {
const { classes } = this.props;
const { open, category, amount } = this.state;
return (
<Fragment>
<Button
variant='contained'
className={classes.newBudgetBtn}
color='primary'
onClick={this.handleOpen}
>
Create New Budget
</Button>
<Modal
aria-labelledby='Create New Budget'
aria-describedby="Create's a new budget"
open={open}
onClose={this.handleClose}
>
<div className={classes.paper}>
<Typography variant='body1' id='modal-title'>
Select a category and enter a budget amount.
</Typography>
<FormControl
style={{
width: '181px',
marginTop: '10px',
marginBottom: '20px',
}}
>
<InputLabel htmlFor='category-native-simple'>Category</InputLabel>
<Select
native
value={category}
onChange={this.handleChange}
inputProps={{
name: 'category',
id: 'category-native-simple',
}}
>
<option value='' />
{this.renderBudgetOptions()}
</Select>
</FormControl>
<FormControl style={{ display: 'block', marginBottom: '20px' }}>
<InputLabel htmlFor='adornment-amount'>Amount</InputLabel>
<Input
type='number'
inputProps={{
name: 'amount',
id: 'amount-native-simple',
}}
placeholder='Enter a number'
onChange={this.handleChange}
startAdornment={
<InputAdornment position='start'>$</InputAdornment>
}
/>
<Typography color='error' variant='body1'>
* Budgets must be in increments of 5. {<br />}* Amounts less
than 5 will default to $5.
</Typography>
</FormControl>
<Button
disabled={amount && category ? false : true}
fullWidth
variant='contained'
color='secondary'
onClick={this.handleAddNewBudget}
>
Add Budget
</Button>
</div>
</Modal>
</Fragment>
);
}
Example #8
| Source File: FeaturedPost.js From alexa-community-jaipur with MIT License | 5 votes |
|
export default function FeaturedPost(props) {
const classes = useStyles();
const { post } = props;
return (
<Grid item xs={12} md={6}>
<Card className={classes.card}>
<div className={classes.cardDetails}>
<CardContent>
<Typography component="h2" variant="h5">
{post.title}
</Typography>
<Typography variant="subtitle1" color="textSecondary">
{post.date}
</Typography>
<Typography variant="subtitle1" paragraph>
{post.description}
</Typography>
{post.suggestionPlaceholder ? (
<Grid container direction="row">
<FormControl>
<Grid item>
<InputLabel htmlFor="suggestions">
{post.suggestionPlaceholder}
</InputLabel>
<Input
id="suggestions"
aria-describedby="my-helper-suggestions"
/>
<Button type="submit">Submit</Button>
</Grid>
<FormHelperText id="my-helper-suggestions">
We will try to cover the most asked topics.
</FormHelperText>
</FormControl>
</Grid>
) : null}
{post.feedback ? (
<Grid container direction="row">
<FormControl>
<Grid item>
<InputLabel htmlFor="feedback">{post.feedback}</InputLabel>
<Input id="feedback" aria-describedby="my-helper-text" />
<Button type="submit">Submit</Button>
</Grid>
<FormHelperText id="my-helper-text">
Your feedback helps us improve.
</FormHelperText>
</FormControl>
</Grid>
) : null}
<Typography variant="subtitle1" color="primary">
<Button href="#" disabled={post.buttonDisable}>
{post.buttonText}
</Button>
</Typography>
</CardContent>
</div>
<Hidden xsDown>
<CardMedia
className={classes.cardMedia}
image={post.image}
title={post.imageTitle}
/>
</Hidden>
</Card>
</Grid>
);
}
Example #9
| Source File: ContactFlow.js From voicemail-for-amazon-connect with Apache License 2.0 | 5 votes |
|
render() {
let classes = this.props.classes;
return(
<div className={classes.root}>
<h6 className={classes.title}>Generate Contact Flow</h6>
<Grid className={classes.inputsContainer} container direction={"column"}>
<FormControl>
<InputLabel type={"text"} htmlFor="welcome-message">Welcome Message</InputLabel>
<Input id="welcome-message" disableUnderline={true} readOnly={false} name={"welcomeMessage"} value={this.state.welcomeMessage} onChange={this.handleInputChange}/>
</FormControl>
<FormControl>
<InputLabel htmlFor="fallback-queue-name">Fallback Queue</InputLabel>
<Input id="fallback-queue-name" disableUnderline={true} readOnly={false} name={"fallbackQueueName"} value={this.state.fallbackQueueName} onChange={this.handleInputChange}/>
</FormControl>
<FormControl>
<InputLabel type={"text"} htmlFor="default-error-message">Default Error Message</InputLabel>
<Input id="default-error-message" disableUnderline={true} readOnly={false} name={"defaultErrorMessage"} value={this.state.defaultErrorMessage} onChange={this.handleInputChange}/>
</FormControl>
<FormControl>
<InputLabel htmlFor="max-vm-duration">Max Voicemail Duration (sec.)</InputLabel>
<Input type={"number"} inputProps={{ min: "1", max: "120", step: "1" }} id="max-vm-duration" disableUnderline={true} readOnly={false} name={"maxVoicemailDuration"} value={this.state.maxVoicemailDuration} onChange={this.handleInputChange}/>
</FormControl>
<FormControl>
<InputLabel htmlFor="loop-count">Incorrect Extension Loop Count</InputLabel>
<Input type={"number"} inputProps={{ min: "0", max: "10", step: "1" }} id="loop-count" disableUnderline={true} readOnly={false} name={"errorLoopCount"} value={this.state.errorLoopCount} onChange={this.handleInputChange}/>
</FormControl>
</Grid>
{(this.props.downloadError) ?
<p className={classes.error}>
{this.props.downloadError}
</p> :
null
}
<Grid className={classes.padTop} container spacing={5} direction="row">
<Grid item>
<AsyncButton loading={this.props.downloading} color="primary" variant="contained" onClick={this.handleDownload} disabled={this.props.userRole != "Administrator"}>Download</AsyncButton>
</Grid>
</Grid>
</div>
)
}
Example #10
| Source File: AddComment.js From yasn with MIT License | 5 votes |
|
export default function InputWithIcon(props) {
const classes = useStyles();
const cookies = new Cookies();
const email = cookies.get('userCookie').Email;
const googleToken = cookies.get('userCookie').Token;
return (
<div>
<div className={classes.margin}>
<Formik
initialValues={{
comment: '',
}}
validate={() => {}}
onSubmit={async (values) => {
if (values.comment && props.userId) {
axios
.post(
`${ConnectServerUrl}/addcomment?` +
queryString.stringify(
{ googleToken, email },
{ withCredentials: true }
),
{
comment: values.comment,
postId: props.postId,
username: props.username,
userId: props.userId,
name: props.name,
}
)
.then(function (res) {
if (res.data === 'success') {
console.log('comment added!');
window.location.reload();
}
})
.catch(function (error) {
console.log(error);
});
}
}}
>
{({ values, handleChange, handleBlur, handleSubmit }) => (
<form onSubmit={handleSubmit} className={classes.root}>
<FormControl fullWidth className={classes.margin}>
{/* <InputLabel htmlFor="standard-adornment-amount">
Add a comment
</InputLabel> */}
<Input
id="standard-adornment-amount"
name="comment"
value={values.comment}
onChange={handleChange}
onBlur={handleBlur}
placeholder="Add a comment"
endAdornment={
<InputAdornment position="end">
<IconButton aria-label="send" size="medium" type="submit">
<SendIcon />
</IconButton>
</InputAdornment>
}
/>
</FormControl>
</form>
)}
</Formik>
</div>
</div>
);
}
Example #11
| Source File: GraphSettings.js From Interceptor with MIT License | 5 votes |
|
render() {
//console.log("Rendering GraphSettings");
return (
<Dialog
open={this.props.show}
aria-labelledby="form-dialog-title"
>
<DialogTitle id="form-dialog-title">Graphs settings</DialogTitle>
<DialogContent>
<Grid container spacing={2} direction="column" alignItems="flex-start">
<Grid item>
<FormControl>
<InputLabel htmlFor="cols">Graph columns</InputLabel>
<Input
id="cols"
value={this.state.cols}
onChange={event => this.setState({ cols: Math.min(Math.max(parseInt(event.target.value), 1), 12) })}
aria-describedby="cols-helper-text"
inputProps={{
'aria-label': 'Graph columns',
}}
/>
<FormHelperText id="cols-helper-text">Max: 12</FormHelperText>
</FormControl>
</Grid>
<Grid item>
<FormControl>
<InputLabel htmlFor="rateHz">Render rate</InputLabel>
<Input
id="rateHz"
value={this.state.rateHz}
onChange={event => this.setState({ rateHz: Math.min(Math.max(parseInt(event.target.value), 0.5), 20) })}
endAdornment={<InputAdornment position="end">Hz</InputAdornment>}
aria-describedby="rateHz-helper-text"
inputProps={{
'aria-label': 'Render rate',
}}
/>
<FormHelperText id="rateHz-helper-text">Min: 0.5, Max: 20</FormHelperText>
</FormControl>
</Grid>
<Grid item>
<FormControl>
<InputLabel htmlFor="max_datapoints">Max data points</InputLabel>
<Input
id="max_datapoints"
value={this.state.max_datapoints}
onChange={event => this.setState({ max_datapoints: Math.min(Math.max(parseInt(event.target.value), 20), 10000) })}
aria-describedby="max_datapoints-helper-text"
inputProps={{
'aria-label': 'Max data points',
}}
/>
<FormHelperText id="max_datapoints-helper-text">Max: 10000</FormHelperText>
</FormControl>
</Grid>
<Grid item>
<FormControlLabel
control={<Switch checked={this.state.webgl} onChange={() => this.setState({ webgl: !this.state.webgl })} name="webGL" />}
label="WebGL support"
/>
</Grid>
</Grid>
</DialogContent>
<DialogActions>
<Button onClick={() => this.props.setSettings(this.state.cols, this.state.rateHz, this.state.max_datapoints, this.state.webgl)} color="default">
Save
</Button>
</DialogActions>
</Dialog>
);
}
Example #12
| Source File: index.jsx From redive_linebot with MIT License | 5 votes |
|
EditForm = ({ onCancel, onSubmit }) => {
const classes = useStyles();
const [{ data: bossData = [], loading }] = useAxios("/api/Admin/WorldBoss");
const bossEl = useRef(null);
const announceEl = useRef(null);
const startTimeEl = useRef(null);
const endTimeEl = useRef(null);
const handleSubmit = () => {
const [startAt, endAt] = [startTimeEl.current.value, endTimeEl.current.value];
if (startAt >= endAt) {
alert("請確認活動時間");
return;
}
onSubmit({
world_boss_id: parseInt(bossEl.current.value),
announcement: announceEl.current.value,
start_time: startAt,
end_time: endAt,
});
};
return (
<Grid container spacing={1} component={Paper} className={classes.form}>
{loading && <HeartbeatLoading />}
<Grid item xs={12}>
<Typography variant="h5">世界王活動管理</Typography>
</Grid>
<Grid item xs={12}>
<FormControl fullWidth>
<NativeSelect fullWidth inputRef={bossEl}>
{bossData.map(boss => (
<option key={boss.id} value={boss.id}>
{boss.name}
</option>
))}
</NativeSelect>
<FormHelperText>請選擇世界王來綁定活動，若無世界王，請先去新增世界王</FormHelperText>
</FormControl>
</Grid>
<Grid item xs={12}>
<TextField label="活動公告" multiline fullWidth margin="normal" inputRef={announceEl} />
</Grid>
<Grid item xs={6}>
<FormControl fullWidth required margin="normal">
<FormLabel>開始時間</FormLabel>
<Input inputProps={{ type: "datetime-local" }} inputRef={startTimeEl} />
</FormControl>
</Grid>
<Grid item xs={6}>
<FormControl fullWidth required margin="normal">
<FormLabel>結束時間</FormLabel>
<Input inputProps={{ type: "datetime-local" }} inputRef={endTimeEl} />
</FormControl>
</Grid>
<Grid item xs={6}>
<Button variant="contained" color="secondary" fullWidth onClick={onCancel}>
取消
</Button>
</Grid>
<Grid item xs={6}>
<Button variant="contained" color="primary" fullWidth onClick={handleSubmit}>
新增
</Button>
</Grid>
</Grid>
);
}
Example #13
| Source File: MainSettings.js From Interceptor with MIT License | 5 votes |
|
render() {
//console.log("Rendering MainSettings");
return (
<Dialog
open={this.props.show}
aria-labelledby="form-dialog-title"
>
<DialogTitle id="form-dialog-title">Main settings</DialogTitle>
<DialogContent>
<Grid container spacing={2} direction="column" alignItems="flex-start">
<Grid item>
<FormControl>
<InputLabel htmlFor="ws_url">WebSocket URL</InputLabel>
<Input
id="ws_url"
value={this.state.ws_url}
onChange={event => this.setState({ ws_url: event.target.value })}
aria-describedby="ws_url-helper-text"
inputProps={{
'aria-label': 'WebSocket URL',
}}
/>
<FormHelperText id="ws_url-helper-text">Tethered WiFi ws://192.168.43.1:8989</FormHelperText>
</FormControl>
</Grid>
<Grid item>
<FormControl>
<InputLabel htmlFor="rateHz">Render rate</InputLabel>
<Input
id="rateHz"
value={this.state.rateHz}
onChange={event => this.setState({ rateHz: Math.min(Math.max(parseInt(event.target.value), 0.5), 20) })}
endAdornment={<InputAdornment position="end">Hz</InputAdornment>}
aria-describedby="rateHz-helper-text"
inputProps={{
'aria-label': 'Render rate',
}}
/>
<FormHelperText id="rateHz-helper-text">Min: 0.5, Max: 20</FormHelperText>
</FormControl>
</Grid>
<Grid item>
<FormControlLabel
control={<Switch checked={this.state.dark_theme} onChange={() => this.setState({ dark_theme: !this.state.dark_theme })} name="dark_theme" />}
label="Dark theme"
/>
</Grid>
</Grid>
</DialogContent>
<DialogActions>
<Button onClick={() => this.props.setSettings(this.state.ws_url, this.state.rateHz, this.state.dark_theme)} color="default">
Save
</Button>
</DialogActions>
</Dialog>
);
}
Example #14
| Source File: Header.js From hk-independent-bus-eta with GNU General Public License v3.0 | 5 votes |
|
Header = (props) => {
const { searchRoute, setSearchRoute } = useContext( AppContext )
const { path } = useRouteMatch()
const { t, i18n } = useTranslation()
const classes = useStyles()
let location = useLocation()
const history = useHistory()
const handleLanguageChange = lang => {
vibrate(1)
history.replace( location.pathname.replace('/'+i18n.language+'/', '/'+lang+'/') )
i18n.changeLanguage(lang)
}
return (
<Toolbar
className={classes.toolbar}
>
<div onClick={() => {
vibrate(1)
history.push(`/${i18n.language}/search`)}
}
>
<Typography variant='subtitle2'>獨立巴士預報</Typography>
</div>
<Input
className={classes.searchRouteInput}
type="text"
value={searchRoute}
placeholder={t('巴士線')}
onChange={e => setSearchRoute(e.target.value)}
onFocus={e => {
vibrate(1)
if ( checkMobile() ) {
document.activeElement.blur()
}
history.replace(`/${i18n.language}/search`)
}}
disabled={path.includes('route')}
/>
<LanguageTabs
value={i18n.language}
onChange={(e, v) => handleLanguageChange(v)}
>
<LanguageTab value="en" label="En" />
<LanguageTab value="zh" label="繁" />
</LanguageTabs>
</Toolbar>
);
}
Example #15
| Source File: CreateNewBudget.js From Simplify-Testing-with-React-Testing-Library with MIT License | 5 votes |
|
render() {
const { classes } = this.props;
const { open, category, amount } = this.state;
return (
<Fragment>
<Button
variant='contained'
className={classes.newBudgetBtn}
color='primary'
onClick={this.handleOpen}
>
Create New Budget
</Button>
<Modal
aria-labelledby='Create New Budget'
aria-describedby="Create's a new budget"
open={open}
onClose={this.handleClose}
>
<div className={classes.paper}>
<Typography variant='body1' id='modal-title'>
Select a category and enter a budget amount.
</Typography>
<FormControl
style={{
width: '181px',
marginTop: '10px',
marginBottom: '20px',
}}
>
<InputLabel htmlFor='category-native-simple'>Category</InputLabel>
<Select
native
value={category}
onChange={this.handleChange}
inputProps={{
name: 'category',
id: 'category-native-simple',
}}
>
<option value='' />
{this.renderBudgetOptions()}
</Select>
</FormControl>
<FormControl style={{ display: 'block', marginBottom: '20px' }}>
<InputLabel htmlFor='adornment-amount'>Amount</InputLabel>
<Input
type='number'
inputProps={{
name: 'amount',
id: 'amount-native-simple',
}}
placeholder='Enter a number'
onChange={this.handleChange}
startAdornment={
<InputAdornment position='start'>$</InputAdornment>
}
/>
<Typography color='error' variant='body1'>
* Budgets must be in increments of 5. {<br />}* Amounts less
than 5 will default to $5.
</Typography>
</FormControl>
<Button
disabled={amount && category ? false : true}
fullWidth
variant='contained'
color='secondary'
onClick={this.handleAddNewBudget}
>
Add Budget
</Button>
</div>
</Modal>
</Fragment>
);
}
Example #16
| Source File: OperationForm.js From Designer-Client with GNU General Public License v3.0 | 5 votes |
|
export default function OperationForm(props) {
const classes = useStyles();
const operation = props.operation;
return (
<div className={classes.formContainer}>
<div className={classes.formGroup}>
<FormControl fullWidth={true}>
<InputLabel htmlFor="operation-title">오퍼레이션 명칭</InputLabel>
<Input id="operation-title" value={operation.title}></Input>
</FormControl>
</div>
<div className={classes.formGroup}>
<FormControl fullWidth={true}>
<TextField
id="operation-description"
label="오퍼레이션 설명"
multiline
rows={5}
value={operation.desc}
aria-describedby="description-helper-text"
name="description"
placeholder="API 이용자에게 안내되는 설명글 입니다. 데이터의 이해를 위한 설명을 친절히 작성해 주세요."
/>
</FormControl>
</div>
<div className={classes.formGroup}>
<Grid container spacing={2}>
<Grid item xs={12} sm={3}>
<FormControl fullWidth={true}>
<InputLabel width="100%" htmlFor="operation-method">
호출 방식
</InputLabel>
<Select
labelId="operation-method"
id="namespace-input"
name="method"
value={operation.method || 'GET'}
>
<MenuItem value={"GET"}>GET</MenuItem>
</Select>
<FormHelperText id="operation-method-text">Http metod를 선택해주세요. 현재 GET 기능만 지원합니다.</FormHelperText>
</FormControl>
</Grid>
<Grid item xs={12} sm={9}>
<FormControl fullWidth={true}>
<InputLabel width="100%" htmlFor="operation-end-point">호출 주소</InputLabel>
<Input id="operation-end-point" value={operation.endPoint || ''} aria-describedby="entityName-helper-text" name="entityName" />
<FormHelperText id="operation-end-point-text">{`https://OOOOOO.go.kr/api/APINAME/v1/TEST`}</FormHelperText>
</FormControl>
</Grid>
</Grid>
</div>
</div>
)
}
Example #17
| Source File: options-picker.js From horondi_admin with MIT License | 5 votes |
|
OptionsPicker = ({ value, handler, label, options }) => {
const styles = useStyles();
const { optionHandler, setRenderValue } = useFilter(options, handler);
const filteredOptions = {};
options.map((option) =>
Object.assign(filteredOptions, { [option.value]: option.label })
);
return (
<Badge
badgeContent={value.length}
color={materialUiConstants.styleError}
anchorOrigin={badgePosition}
>
<FormControl className={styles.container}>
<InputLabel id={materialUiConstants.checkBoxLabel}>{label}</InputLabel>
<Select
labelId={materialUiConstants.checkBoxLabel}
id={materialUiConstants.checkBoxId}
multiple
value={value}
onChange={optionHandler}
renderValue={(selected) => setRenderValue(selected, filteredOptions)}
input={<Input />}
autoWidth
MenuProps={MenuProps}
>
{options.map((item) => (
<MenuItem key={item.value} value={item.value}>
<Checkbox checked={value.indexOf(item.value) > -1} />
<ListItemText primary={item.label} />
</MenuItem>
))}
</Select>
</FormControl>
</Badge>
);
}
Example #18
| 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 #19
| Source File: nav-filter-by-values.js From horondi_admin with MIT License | 5 votes |
|
NavFilterByValues = ({
filterByMultipleOptions: {
filters,
setFilterHandler,
label,
selectItems,
objForTranslateRenderItems
}
}) => {
const styles = useStyles();
const { optionHandler, setRenderValue } = useFilter(
selectItems,
setFilterHandler
);
return (
<div className={styles.formblock}>
<Badge
badgeContent={filters.length}
color={materialUiConstants.styleError}
anchorOrigin={badgePosition}
>
<FormControl style={{ minWidth: 170 }} className={styles.formControl}>
<InputLabel id={materialUiConstants.checkBoxLabel}>
{label}
</InputLabel>
<Select
labelId={materialUiConstants.checkBoxLabel}
id={materialUiConstants.checkBoxId}
multiple
value={filters}
onChange={optionHandler}
renderValue={(selected) =>
setRenderValue(selected, objForTranslateRenderItems)
}
input={<Input />}
autoWidth
MenuProps={MenuProps}
>
{selectItems.map((item) => (
<MenuItem key={item.key} value={item.key}>
<Checkbox checked={filters.indexOf(item.key) > -1} />
<ListItemText primary={item.value} />
</MenuItem>
))}
</Select>
</FormControl>
</Badge>
</div>
);
}
Example #20
| Source File: Searchbar.js From course-manager with MIT License | 5 votes |
|
// ----------------------------------------------------------------------
export default function Searchbar() {
const [isOpen, setOpen] = useState(false);
const handleOpen = () => {
setOpen((prev) => !prev);
};
const handleClose = () => {
setOpen(false);
};
return (
<ClickAwayListener onClickAway={handleClose}>
<div>
{!isOpen && (
<IconButton onClick={handleOpen}>
<Icon icon={searchFill} width={20} height={20} />
</IconButton>
)}
<Slide direction="down" in={isOpen} mountOnEnter unmountOnExit>
<SearchbarStyle>
<Input
autoFocus
fullWidth
disableUnderline
placeholder="Search…"
startAdornment={
<InputAdornment position="start">
<Box
component={Icon}
icon={searchFill}
sx={{ color: 'text.disabled', width: 20, height: 20 }}
/>
</InputAdornment>
}
sx={{ mr: 1, fontWeight: 'fontWeightBold' }}
/>
<Button variant="contained" onClick={handleClose}>
Search
</Button>
</SearchbarStyle>
</Slide>
</div>
</ClickAwayListener>
);
}
Example #21
| Source File: DashboardPage.jsx From frontend with MIT License | 4 votes |
|
DashboardPage = () => {
const [selectedFacilityId, setSelectedFacilityId] = useState('');
const [selectedContactId, setSelectedContactId] = useState('');
const [selectedCategory, setSelectedCategory] = useState('');
const [modalOpen, setModalOpen] = useState(false);
const [resourceEditId, setResourceEditId] = useState(0);
const [requests, setRequests] = useState([]);
const [facilities, setFacilites] = useState([]);
const [contacts, setContacts] = useState([]);
const [categories, setCategories] = useState([]);
const [amount, setAmount] = useState(0);
const selectedFacility = facilities.find((x) => x.name === selectedFacilityId);
const selectedContact = contacts.find((x) => x.name === selectedContactId);
useEffect(() => {
if (modalOpen) {
setSelectedFacilityId('');
setSelectedContactId('');
setSelectedCategory('');
setAmount(0);
} else if (resourceEditId) {
setTimeout(() => setResourceEditId(0), 50);
}
}, [modalOpen]);
useEffect(() => {
if (resourceEditId) {
const {
name,
quantity,
beneficiary,
contactPerson,
} = requests.find(({ id }) => id === resourceEditId);
setSelectedFacilityId(beneficiary.name);
setSelectedContactId(contactPerson.name);
setSelectedCategory(name);
setAmount(quantity);
}
}, [resourceEditId]);
const getData = () => {
fetch(`${apiUrl}/resources`)
.then((x) => x.json())
.then((x) => x.list.filter((a) => a.name))
.then((x) => {
setRequests(x);
const facilitiesX = x
.reduce((res, next) => res.set(next.beneficiary.name, next.beneficiary), new Map());
setFacilites([...facilitiesX.values()]);
const contactsX = x
.reduce((res, next) => res.set(next.contactPerson.name, next.contactPerson), new Map());
setContacts([...contactsX.values()]);
const categoriesX = x
.reduce((res, next) => res.set(next.name, next.name), new Map());
setCategories([...categoriesX.values()]);
});
};
const init = useRef(false);
useEffect(() => {
if (!init.current) {
getData();
init.current = true;
}
}, [init]);
const submit = (modalClose) => {
const req = {
beneficiary: selectedFacility,
contactPerson: selectedContact,
status: 'OPEN',
items: [{
name: selectedCategory,
quantity: parseInt(amount, 10),
}],
};
/* if (resourceEditId) {
fetch(`${apiUrl}/resources/${resourceEditId}`, {
method: 'PUT',
body: JSON.stringify(req),
}).then((response) => {
setRequests(requests.reduce((acc, rowData) => {
if (rowData.id === resourceEditId) {
acc.push(response);
} else {
acc.push(rowData);
}
return acc;
}), []);
}).then(() => modalClose())
.catch((e) => console.log(e));
} else {
fetch(`${apiUrl}/resources`, {
method: 'POST',
body: JSON.stringify(req),
}).then((x) => setRequests(x.list.filter((a) => a.name)))
.then(() => modalClose())
.catch((e) => console.log(e));
} */
// temporarily until the server is implemented
modalClose();
};
return (
<>
<Box mb={4} display="flex" justifyContent="space-between">
<Typography variant="h4">Dashboard</Typography>
<Button color="primary" variant="contained" onClick={() => setModalOpen(true)}>
<Icon>add</Icon>
{' '}
Create Request
</Button>
</Box>
{/* <Box mb={2}>
<Paper elevation={2}>
<Box p={2}>
<Typography variant="h5" gutterBottom>Filter</Typography>
<Grid container spacing={2}>
<Grid item xs>
<FormControl>
<InputLabel>Facility</InputLabel>
<Input />
</FormControl>
</Grid>
<Grid item xs>
<FormControl>
<InputLabel>Region</InputLabel>
<Input />
</FormControl>
</Grid>
<Grid item xs>
<FormControl>
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<KeyboardDatePicker label="Deadline" onChange={() => {}} />
</MuiPickersUtilsProvider>
</FormControl>
</Grid>
</Grid>
</Box>
</Paper>
</Box> */}
<Paper elevation={2}>
<Table>
<TableHead>
<TableRow>
{columns.map((c) => <TableCell key={c.label}>{c.label}</TableCell>)}
</TableRow>
</TableHead>
<TableBody>
{requests.map((x) => (
<TableRow key={x.id}>
<TableCell>{x.beneficiary.name}</TableCell>
<TableCell>{x.name}</TableCell>
<TableCell>{x.quantity}</TableCell>
<TableCell>{x.deadline}</TableCell>
<TableCell>
{x.contactPerson ? x.contactPerson.name : (
<Button color="secondary" variant="contained">
Assign
</Button>
)}
</TableCell>
<TableCell align="right">
<IconButton
variant="icon"
onClick={() => {
setResourceEditId(x.id);
setModalOpen(true);
}}
>
<Icon>edit</Icon>
</IconButton>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</Paper>
<Dialog open={modalOpen} fullWidth>
<DialogTitle>
{resourceEditId ? 'Update' : 'New'}
{' '}
Request
</DialogTitle>
<DialogContent>
<Box mb={2}>
<FormControl fullWidth>
<InputLabel>Facility</InputLabel>
<Select
value={selectedFacilityId}
fullWidth
onChange={({ target: { value } }) => setSelectedFacilityId(value)}
>
{facilities.map((x) => <MenuItem key={x.name} value={x.name}>{x.name}</MenuItem>)}
</Select>
</FormControl>
{
selectedFacilityId
? (
<>
<Typography color="textSecondary" variant="subtitle1">{selectedFacility.name}</Typography>
<Typography color="textSecondary" variant="subtitle2">{selectedFacility.address}</Typography>
</>
) : null
}
</Box>
<Box mb={2}>
<FormControl fullWidth>
<InputLabel>Contact person</InputLabel>
<Select
value={selectedContactId}
fullWidth
onChange={({ target: { value } }) => setSelectedContactId(value)}
>
{contacts.map((x) => <MenuItem key={x.name} value={x.name}>{x.name}</MenuItem>)}
</Select>
</FormControl>
{
selectedContactId
? (
<>
<Typography color="textSecondary" variant="subtitle1">{selectedContact.name}</Typography>
<Typography color="textSecondary" variant="subtitle2">{selectedContact.phone}</Typography>
</>
) : null
}
</Box>
<Typography variant="h6">Request</Typography>
<Box mb={2}>
<FormControl fullWidth>
<InputLabel>Category</InputLabel>
<Select
value={selectedCategory}
fullWidth
onChange={({ target: { value } }) => setSelectedCategory(value)}
>
{categories.map((x) => <MenuItem key={x} value={x}>{x}</MenuItem>)}
</Select>
</FormControl>
</Box>
<Box mb={2}>
<FormControl fullWidth>
<InputLabel>Amount</InputLabel>
<Input value={amount} onChange={(({ target: { value } }) => setAmount(value))} />
</FormControl>
</Box>
<Box mb={2}>
<FormControl fullWidth>
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<KeyboardDatePicker fullWidth label="Deadline" onChange={() => {}} />
</MuiPickersUtilsProvider>
</FormControl>
</Box>
</DialogContent>
<DialogActions>
<Button
color="secondary"
onClick={() => {
setModalOpen(false);
}}
>
Cancel
</Button>
<Button
variant="contained"
color="primary"
onClick={() => {
submit(() => setModalOpen(false));
}}
>
{resourceEditId ? 'Update' : 'Create'}
</Button>
</DialogActions>
</Dialog>
</>
);
}
Example #22
| Source File: product-options-container.js From horondi_admin with MIT License | 4 votes |
|
ProductOptionsContainer = ({
selectedOptions,
setOptions,
additions,
toggleFieldsChanged
}) => {
const styles = useStyles();
const productOptions = useSelector(({ Products }) => Products.productOptions);
const { sizes, bottomMaterials } = productOptions;
const handleOptionChange = (event, name) => {
toggleFieldsChanged(true);
setOptions({ ...selectedOptions, [name]: event.target.value });
};
const handleAdditionChange = (event) => {
toggleFieldsChanged(true);
const { name, checked } = event.target;
setOptions({ ...selectedOptions, [name]: checked });
};
const handleDeleteOption = (option, name) => {
toggleFieldsChanged(true);
const currentOption = selectedOptions[option];
const sizeToRemove = currentOption.indexOf(name);
setOptions({
...selectedOptions,
[option]: [
...currentOption.slice(0, sizeToRemove),
...currentOption.slice(sizeToRemove + 1)
]
});
};
const getCardItems = (items, option, labels) =>
items
.filter(({ name }) =>
selectedOptions[option].some((item) => item === name)
)
.map((item) => {
const cardContent = labels.map(({ label, name }) => (
<Typography key={name}>
{label}: {item[name]}
</Typography>
));
const priceDetail = (
<Typography>
{ADDITIONAL_PRICE}: {item.additionalPrice[0].value / 100}
</Typography>
);
return (
<Grid item key={item.name}>
<Card>
<CardContent>
<Grid container justify='flex-end'>
<Tooltip title={DELETE_PRODUCT_BTN} placement='top'>
<IconButton
className={styles.removeIcon}
onClick={() => handleDeleteOption(option, item.name)}
>
<CloseIcon />
</IconButton>
</Tooltip>
</Grid>
{cardContent}
{priceDetail}
</CardContent>
</Card>
</Grid>
);
});
const getOptions = (name, _id) => (
<MenuItem value={name} key={_id}>
{name}
</MenuItem>
);
const sortSizes = (a, b) => {
if (a.name > b.name) {
return -1;
}
if (b.name > a.name) {
return 1;
}
return 0;
};
const sizesOptions = useMemo(
() =>
sizes
.slice()
.sort(sortSizes)
.map(({ name, _id }) => getOptions(name, _id)),
[sizes]
);
const bottomMaterialsOptions = useMemo(
() =>
bottomMaterials.map(({ name, _id }) => getOptions(name[0].value, _id)),
[bottomMaterials]
);
const formattedMaterials = useMemo(
() =>
bottomMaterials.map((item) => ({ ...item, name: item.name[0].value })),
[bottomMaterials]
);
const optionsToMap = useMemo(
() => [sizesOptions, bottomMaterialsOptions],
[sizesOptions, bottomMaterialsOptions]
);
const cardLabels = useMemo(() => [sizeCardsLabels, materialsLabels], []);
const cardOptions = useMemo(
() => [sizes, formattedMaterials],
[sizes, formattedMaterials]
);
return (
<div>
{optionsLabels.map(({ label, name }, idx) => (
<div key={name}>
{!!selectedOptions[name].length && <Box mt={2.5} />}
<Grid container className={styles.select}>
<Grid item>
<Badge
color='error'
anchorOrigin={badgePosition}
badgeContent={selectedOptions[name].length}
>
<FormControl className={styles.formControl}>
<InputLabel id='multiple-checkbox-label'>{label}</InputLabel>
<Select
required
labelId='multiple-checkbox-label'
id='multiple-checkbox'
multiple
value={selectedOptions[name]}
onChange={(e) => handleOptionChange(e, name)}
input={<Input />}
>
{optionsToMap[idx]}
</Select>
</FormControl>
</Badge>
</Grid>
<Grid item container spacing={2} className={styles.gridContainer}>
{getCardItems(cardOptions[idx], name, cardLabels[idx])}
</Grid>
</Grid>
</div>
))}
<Grid container className={styles.checkbox}>
<FormControlLabel
control={
<Checkbox
checked={selectedOptions.additions}
onChange={handleAdditionChange}
name='additions'
color='primary'
/>
}
label={
!!(additions && additions.length) && (
<div>
{additions[0].name[0].value}
<span>
(
<span className={styles.additionalPrice}>
+{additions[0].additionalPrice[0].value / 100}
{` ${UAH}`}
</span>
)
</span>
</div>
)
}
/>
</Grid>
</div>
);
}
Example #23
| Source File: JoystickSettings.js From Interceptor with MIT License | 4 votes |
|
render() {
//console.log("Rendering JoystickSettings");
const new_state = _.cloneDeep(this.state);
return (
<Dialog
open={this.props.show}
aria-labelledby="joystick-settings"
>
<DialogTitle id="joystick-settings">Joystick settings</DialogTitle>
<DialogContent>
<Grid container spacing={1} direction="row" alignItems="center">
<Grid item xs={6}>
<Grid container alignItems="center" spacing={2}>
<Grid item xs={6} align="center">
<FormControl>
<InputLabel htmlFor="axis_0_neg">axis_0 negative</InputLabel>
<Input
id="axis_0_neg"
value={new_state.axes_scale[0][0]}
onChange={event => { new_state.axes_scale[0][0] = event.target.value; this.setState(new_state); }}
inputProps={{
'aria-label': 'axis_0 negative',
style: { textAlign: 'center' }
}}
/>
</FormControl>
</Grid>
<Grid item xs={6} align="center">
<FormControl>
<InputLabel htmlFor="axis_0_pos">axis_0 positive</InputLabel>
<Input
id="axis_0_pos"
value={new_state.axes_scale[0][1]}
onChange={event => { new_state.axes_scale[0][1] = event.target.value; this.setState(new_state); }}
inputProps={{
'aria-label': 'axis_0 positive',
style: { textAlign: 'center' }
}}
/>
</FormControl>
</Grid>
<Grid item xs={6} align="center">
<FormControl>
<InputLabel htmlFor="axis_1_neg">axis_1 negative</InputLabel>
<Input
id="axis_1_neg"
value={new_state.axes_scale[1][0]}
onChange={event => { new_state.axes_scale[1][0] = event.target.value; this.setState(new_state); }}
inputProps={{
'aria-label': 'axis_1 negative',
style: { textAlign: 'center' }
}}
/>
</FormControl>
</Grid>
<Grid item xs={6} align="center">
<FormControl>
<InputLabel htmlFor="axis_1_pos">axis_1 positive</InputLabel>
<Input
id="axis_1_pos"
value={new_state.axes_scale[1][1]}
onChange={event => { new_state.axes_scale[1][1] = event.target.value; this.setState(new_state); }}
inputProps={{
'aria-label': 'axis_1 positive',
style: { textAlign: 'center' }
}}
/>
</FormControl>
</Grid>
<Grid item xs={12} align="center">
<FormControl fullWidth>
<InputLabel htmlFor=">axis_0_deadzone">axis_0 deadzone</InputLabel>
<Input
id="axis_0_deadzone"
value={new_state.axes_deadzone[0]}
onChange={event => { new_state.axes_deadzone[0] = event.target.value; this.setState(new_state); }}
inputProps={{
'aria-label': 'axis_0 deadzone',
style: { textAlign: 'center' }
}}
/>
</FormControl>
</Grid>
<Grid item xs={12} align="center">
<FormControl fullWidth>
<InputLabel htmlFor="axis_1_deadzone">axis_1 deadzone</InputLabel>
<Input
id="axis_1_deadzone"
value={new_state.axes_deadzone[1]}
onChange={event => { new_state.axes_deadzone[1] = event.target.value; this.setState(new_state); }}
inputProps={{
'aria-label': 'axis_1 deadzone',
style: { textAlign: 'center' }
}}
/>
</FormControl>
</Grid>
<Grid item xs={12} align="center">
<FormControl fullWidth>
<InputLabel htmlFor='axis_0_mode'>axis_0 mode</InputLabel>
<Select
id='axis_0_mode'
value={new_state.axesMode[0]}
onChange={event => { new_state.axesMode[0] = event.target.value; this.setState(new_state); }}
displayEmpty
inputProps={{ 'aria-label': 'axis_0 mode' }}
>
<MenuItem value='interceptor'>interceptor</MenuItem>
<MenuItem value='injector'>injector</MenuItem>
<MenuItem value='adder'>adder</MenuItem>
</Select>
</FormControl>
</Grid>
<Grid item xs={12} align="center">
<FormControl fullWidth>
<InputLabel htmlFor='axis_1_mode'>axis_1 mode</InputLabel>
<Select
id='axis_1_mode'
value={new_state.axesMode[1]}
onChange={event => { new_state.axesMode[1] = event.target.value; this.setState(new_state); }}
displayEmpty
inputProps={{ 'aria-label': 'axis_1 mode', }}
>
<MenuItem value='interceptor'>interceptor</MenuItem>
<MenuItem value='injector'>injector</MenuItem>
<MenuItem value='adder'>adder</MenuItem>
</Select>
</FormControl>
</Grid>
<Grid item xs={12} align="center">
<FormControlLabel
control={<Switch checked={new_state.restJoystick_0} onChange={() => { new_state.restJoystick_0 = !new_state.restJoystick_0; this.setState(new_state); }} name="restJoystick_0" />}
label="vJoystick_0 rest"
/>
</Grid>
</Grid>
</Grid>
<Grid item xs={6}>
<Grid container alignItems="center" spacing={2}>
<Grid item xs={6} align="center">
<FormControl>
<InputLabel htmlFor="axis_2_neg">axis_2 negative</InputLabel>
<Input
id="axis_2_neg"
value={new_state.axes_scale[2][0]}
onChange={event => { new_state.axes_scale[2][0] = event.target.value; this.setState(new_state); }}
inputProps={{
'aria-label': 'axis_2 negative',
style: { textAlign: 'center' }
}}
/>
</FormControl>
</Grid>
<Grid item xs={6} align="center">
<FormControl>
<InputLabel htmlFor="axis_2_pos">axis_2 positive</InputLabel>
<Input
id="axis_2_pos"
value={new_state.axes_scale[2][1]}
onChange={event => { new_state.axes_scale[2][1] = event.target.value; this.setState(new_state); }}
inputProps={{
'aria-label': 'axis_2 positive',
style: { textAlign: 'center' }
}}
/>
</FormControl>
</Grid>
<Grid item xs={6} align="center">
<FormControl>
<InputLabel htmlFor="axis_3_neg">axis_3 negative</InputLabel>
<Input
id="axis_3_neg"
value={new_state.axes_scale[3][0]}
onChange={event => { new_state.axes_scale[3][0] = event.target.value; this.setState(new_state); }}
inputProps={{
'aria-label': 'axis_3 negative',
style: { textAlign: 'center' }
}}
/>
</FormControl>
</Grid>
<Grid item xs={6} align="center">
<FormControl>
<InputLabel htmlFor="axis_3_pos">axis_3 positive</InputLabel>
<Input
id="axis_3_pos"
value={new_state.axes_scale[3][1]}
onChange={event => { new_state.axes_scale[3][1] = event.target.value; this.setState(new_state); }}
inputProps={{
'aria-label': 'axis_3 positive',
style: { textAlign: 'center' }
}}
/>
</FormControl>
</Grid>
<Grid item xs={12} align="center">
<FormControl fullWidth>
<InputLabel htmlFor=">axis_2_deadzone">axis_2 deadzone</InputLabel>
<Input
id="axis_2_deadzone"
value={new_state.axes_deadzone[2]}
onChange={event => { new_state.axes_deadzone[2] = event.target.value; this.setState(new_state); }}
inputProps={{
'aria-label': 'axis_2 deadzone',
style: { textAlign: 'center' }
}}
/>
</FormControl>
</Grid>
<Grid item xs={12} align="center">
<FormControl fullWidth>
<InputLabel htmlFor="axis_3_deadzone">axis_3 deadzone</InputLabel>
<Input
id="axis_3_deadzone"
value={new_state.axes_deadzone[3]}
onChange={event => { new_state.axes_deadzone[3] = event.target.value; this.setState(new_state); }}
inputProps={{
'aria-label': 'axis_3 deadzone',
style: { textAlign: 'center' }
}}
/>
</FormControl>
</Grid>
<Grid item xs={12} align="center">
<FormControl fullWidth>
<InputLabel htmlFor='axis_2_mode'>axis_2 mode</InputLabel>
<Select
id='axis_2_mode'
value={new_state.axesMode[2]}
onChange={event => { new_state.axesMode[2] = event.target.value; this.setState(new_state); }}
displayEmpty
inputProps={{ 'aria-label': 'axis_2 mode' }}
>
<MenuItem value='interceptor'>interceptor</MenuItem>
<MenuItem value='injector'>injector</MenuItem>
<MenuItem value='adder'>adder</MenuItem>
</Select>
</FormControl>
</Grid>
<Grid item xs={12} align="center">
<FormControl fullWidth>
<InputLabel htmlFor='axis_3_mode'>axis_3 mode</InputLabel>
<Select
id='axis_3_mode'
value={new_state.axesMode[3]}
onChange={event => { new_state.axesMode[3] = event.target.value; this.setState(new_state); }}
displayEmpty
inputProps={{ 'aria-label': 'axis_3 mode', }}
>
<MenuItem value='interceptor'>interceptor</MenuItem>
<MenuItem value='injector'>injector</MenuItem>
<MenuItem value='adder'>adder</MenuItem>
</Select>
</FormControl>
</Grid>
<Grid item xs={12} align="center">
<FormControlLabel
control={<Switch checked={new_state.restJoystick_1} onChange={() => { new_state.restJoystick_1 = !new_state.restJoystick_1; this.setState(new_state); }} name="restJoystick_1" />}
label="vJoystick_1 rest"
/>
</Grid>
</Grid>
</Grid>
</Grid>
</DialogContent>
<DialogActions>
<Button onClick={() => this.props.setSettings(this.state)} color="default">
Save
</Button>
</DialogActions>
</Dialog>
);
}
Example #24
| Source File: Projects.js From gitlab-lint-react with BSD 3-Clause "New" or "Revised" License | 4 votes |
|
Projects = () => {
const classes = useStyles();
const [page, setPage] = useState(1);
const [searchInput, setSearchInput] = useState("");
const handleChange = (event, value) => {
setPage(value);
fetchData({ query: { page: value, q: searchInput } });
};
const debouncedSearch = useCallback(
() => debounce((value) => fetchData({ query: { page, q: value } }), 500),
[page]
);
const handleChangeSearch = (value) => {
setSearchInput(value);
debouncedSearch(value);
};
const [rows, setData] = useState({});
const [meta, setMeta] = useState({});
const fetchData = ({ query }) => {
GitlabLintHttpClient("GET_ALL", { entity: "projects", query: query })
.then((data) => {
setData(data.data);
setMeta(data.meta);
})
.catch((err) => console.error(err));
};
useEffect(() => {
fetchData({ query: { page: 1 } });
}, []);
if (Object.keys(rows).length === 0 && rows.constructor === Object) {
return <Loading />;
}
return (
<React.Fragment>
<div className={classes.header}>
<Typography variant="h4" paragraph>
Projects
</Typography>
<form noValidate autoComplete="off">
<Input
placeholder="Find a project..."
value={searchInput}
onChange={(e) => handleChangeSearch(e.target.value)}
/>
</form>
</div>
<List>
{rows.map((row) => {
return (
<ListItem
button
component={Link}
to={`/projects/${row.id}`}
key={row.id}
>
<ListItemText primary={row.path_with_namespace} />
<div className={classes.levels}>
{Object.keys(row.rules).map((key, index) => {
return (
<Tooltip key={key} title={key} placement="top-start">
<Chip
className={`${classes.level} ${classes[key]}`}
label={row.rules[key]}
size="small"
/>
</Tooltip>
);
})}
</div>
</ListItem>
);
})}
</List>
<div className={classes.pagination}>
<Pagination
boundaryCount={2}
color="primary"
count={meta.totalOfPages}
onChange={handleChange}
page={page}
siblingCount={2}
/>
</div>
</React.Fragment>
);
}
Example #25
| Source File: ArtistForm.js From Octave with MIT License | 4 votes |
|
function ArtistForm({ artists }) {
const [loading, setLoading] = useState(false);
const [progress, setProgress] = useState(0);
const [message, setMessage] = useState({ type: "", text: "" });
const [formData, handleChange, formRef, clearForm] = useForm({
name: "",
description: "",
imageUrl: "",
image: null,
});
const handleAddArtistForm = async (e) => {
e.preventDefault();
setMessage({ type: "", message: "" });
const name = capitalizeAllWords(formData.name);
const names = createNamesArrayWithCaptitalizedWords(formData.name);
const { description, imageUrl } = formData;
const data = { description, name, names, imageUrl };
// validations
if (artists.includes(name)) {
return setMessage({
type: "error",
text: `${name} already exists in DB`,
});
} else if (!data.imageUrl && !formData.image) {
return setMessage({
type: "error",
text: "Either image URL should be provided or Image should be uploaded",
});
} else if (data.imageUrl && !isValidURL(data.imageUrl)) {
return setMessage({
type: "error",
text: "Invliad image URL",
});
} else if (formData.image && !formData.image?.type.startsWith("image")) {
return setMessage({
type: "error",
text: "File must be of type image",
});
}
setLoading(true);
if (formData.image) {
const uploadTask = uploadArtistToStorage(formData.image);
uploadTask.on(
"state_change",
({ bytesTransferred, totalBytes }) => {
setProgress(Math.round((bytesTransferred / totalBytes) * 100));
},
handleError,
() => {
getArtistImageURL(uploadTask.snapshot.ref)
.then(async (url) => {
console.log(url);
data.imageUrl = url; // adding the recived Url
await addArtist(data).catch(handleError);
setMessage({
type: "textPrimary",
text: "Artist added",
});
clearForm();
})
.catch(handleError);
}
); // end of UploadTask
} else if (data.imageUrl) {
await addArtist(data).catch(handleError);
setMessage({
type: "textPrimary",
text: "Artist added",
});
clearForm();
} else
setMessage({
type: "error",
text: "Either image URL should be provided or Image should be uploaded",
});
setLoading(false);
};
return (
<form
ref={formRef}
onSubmit={handleAddArtistForm}
className="admin__form"
autoComplete="off"
>
<Typography align="center" variant="h5">
Add Artist to DB
</Typography>
<div className="admin__formGroup">
<TextField
name="name"
value={formData.name}
onChange={handleChange}
label="Artist Name"
required
fullWidth
color="secondary"
/>
</div>
<div className="admin__formGroup">
<TextField
name="description"
value={formData.description}
onChange={handleChange}
label="Description"
required
fullWidth
color="secondary"
/>
</div>
<div className="admin__formGroup">
<TextField
name="imageUrl"
value={formData.imageUrl}
onChange={handleChange}
label="Image Url (Not needed if uploading image)"
fullWidth
color="secondary"
/>
</div>
<div className="admin__formGroup">
<Input
name="image"
type="file"
accept="image/*"
color="secondary"
onChange={handleChange}
/>
</div>
<div className="admin__formGroup">
<LinearProgress
value={progress}
variant="determinate"
color="secondary"
/>
</div>
{message.text && (
<div
className="admin__formGroup admin__formMessage"
style={{ backgroundColor: "#f5f5f5" }}
>
<Typography color={message.type} variant="subtitle1">
<strong>{message.text}</strong>
</Typography>
</div>
)}
<Button
onClick={() => {
setMessage({ type: "", message: "" });
clearForm();
}}
type="button"
variant="contained"
color="default"
>
Clear
</Button>
<Button
disabled={loading}
type="submit"
variant="contained"
color="secondary"
>
Add
</Button>
</form>
);
}
Example #26
| Source File: BigStat.js From react-code-splitting-2021-04-26 with MIT License | 4 votes |
|
export default function BigStat(props) {
var { product, total, color, registrations, bounce } = props;
var classes = useStyles();
var theme = useTheme();
// local
var [value, setValue] = useState("daily");
return (
<Widget
header={
<div className={classes.title}>
<Typography variant="h5">{product}</Typography>
<Select
value={value}
onChange={e => setValue(e.target.value)}
input={
<Input
disableUnderline
classes={{ input: classes.selectInput }}
/>
}
className={classes.select}
>
<MenuItem value="daily">Daily</MenuItem>
<MenuItem value="weekly">Weekly</MenuItem>
<MenuItem value="monthly">Monthly</MenuItem>
</Select>
</div>
}
upperTitle
bodyClass={classes.bodyWidgetOverflow}
>
<div className={classes.totalValueContainer}>
<div className={classes.totalValue}>
<Typography size="xxl" color="text" colorBrightness="secondary">
{total[value]}
</Typography>
<Typography color={total.percent.profit ? "success" : "secondary"}>
{total.percent.profit ? "+" : "-"}
{total.percent.value}%
</Typography>
</div>
<BarChart width={150} height={70} data={getRandomData()}>
<Bar
dataKey="value"
fill={theme.palette[color].main}
radius={10}
barSize={10}
/>
</BarChart>
</div>
<div className={classes.bottomStatsContainer}>
<div className={classnames(classes.statCell, classes.borderRight)}>
<Grid container alignItems="center">
<Typography variant="h6">{registrations[value].value}</Typography>
<ArrowForwardIcon
className={classnames(classes.profitArrow, {
[!registrations[value].profit]: classes.profitArrowDanger,
})}
/>
</Grid>
<Typography size="sm" color="text" colorBrightness="secondary">
Registrations
</Typography>
</div>
<div className={classes.statCell}>
<Grid container alignItems="center">
<Typography variant="h6">{bounce[value].value}%</Typography>
<ArrowForwardIcon
className={classnames(classes.profitArrow, {
[!registrations[value].profit]: classes.profitArrowDanger,
})}
/>
</Grid>
<Typography size="sm" color="text" colorBrightness="secondary">
Bounce Rate
</Typography>
</div>
<div className={classnames(classes.statCell, classes.borderRight)}>
<Grid container alignItems="center">
<Typography variant="h6">
{registrations[value].value * 10}
</Typography>
<ArrowForwardIcon
className={classnames(classes.profitArrow, {
[classes.profitArrowDanger]: !registrations[value].profit,
})}
/>
</Grid>
<Typography size="sm" color="text" colorBrightness="secondary">
Views
</Typography>
</div>
</div>
</Widget>
);
}
Example #27
| Source File: Projects.js From eSim-Cloud with GNU General Public License v3.0 | 4 votes |
|
function PublicProjects (props) {
const classes = useStyles()
const dispatch = useDispatch()
const projects = useSelector(state => state.dashboardReducer.publicProjects)
const [sort, setSort] = React.useState('')
const [order, setOrder] = React.useState('ascending')
const [filteredProjects, setFilteredProjects] = React.useState(projects)
const [anchorEl, setAnchorEl] = React.useState(null)
const open = Boolean(anchorEl)
useEffect(() => {
dispatch(fetchPublicProjects())
}, [dispatch])
useEffect(() => {
setFilteredProjects(projects)
}, [projects])
const handleFilterOpen = (e) => {
if (anchorEl) {
setAnchorEl(null)
} else {
setAnchorEl(e.currentTarget)
}
}
const sortSaves = (sorting, order) => {
if (order === 'ascending') {
if (sorting === 'name') {
setFilteredProjects(filteredProjects.sort((a, b) => a.title > b.title))
} else if (sorting === 'author') {
setFilteredProjects(filteredProjects.sort((a, b) => a.author > b.author))
} else if (sorting === 'status') {
setFilteredProjects(filteredProjects.sort((a, b) => a.status_name > b.status_name))
}
} else {
if (sorting === 'name') {
setFilteredProjects(filteredProjects.sort((a, b) => a.title < b.title))
} else if (sorting === 'author') {
setFilteredProjects(filteredProjects.sort((a, b) => a.author < b.author))
} else if (sorting === 'status') {
setFilteredProjects(filteredProjects.sort((a, b) => a.status_name < b.status_name))
}
}
}
const handleSort = (e) => {
sortSaves(e.target.value, order)
setSort(e.target.value)
}
const handleOrder = (e) => {
setOrder(e.target.value)
if (sort !== '') {
sortSaves(sort, e.target.value)
}
}
const onSearch = (e) => {
setFilteredProjects(projects.filter((o) =>
// eslint-disable-next-line
Object.keys(o).some((k) => {
if ((k === 'title' || k === 'description' || k === 'author' || k === 'status_name') && String(o[k]).toLowerCase().includes(e.target.value.toLowerCase())) {
return String(o[k]).toLowerCase().includes(e.target.value.toLowerCase())
}
}
)
))
}
return (
<div className={classes.root}>
<CssBaseline />
<Container maxWidth="lg" className={classes.header}>
<Grid
container
direction="row"
justify="flex-start"
alignItems="flex-start"
alignContent="center"
spacing={3}
>
{/* eSim Gallery Header */}
<Grid item xs={12}>
<MainCard />
</Grid>
<Grid item xs={12}>
{filteredProjects && <IconButton onClick={handleFilterOpen} style={{ float: 'right' }} ><FilterListIcon /></IconButton>}
{filteredProjects && <Input style={{ float: 'right' }} onChange={(e) => onSearch(e)} placeholder='Search' />}
<Popover
open={open}
onClose={handleFilterOpen}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'center'
}}
transformOrigin={{
vertical: 'top',
horizontal: 'center'
}}
anchorEl={anchorEl}
>
<FormControl style={{ width: ' 200px', padding: '2%' }}>
<InputLabel>Select Sort</InputLabel>
<Select className={classes.popover} value={sort} onChange={handleSort} >
<MenuItem key='name' value='name'>Name</MenuItem>
<MenuItem key='author' value='author'>Author</MenuItem>
<MenuItem key='status' value='status'>Status</MenuItem>
</Select>
</FormControl>
<FormControl style={{ width: ' 200px', padding: '2%' }}>
<InputLabel>Select Order</InputLabel>
<Select className={classes.popover} value={order} onChange={handleOrder} >
<MenuItem key='ascending' value='ascending'>Ascending</MenuItem>
<MenuItem key='descending' value='descending'>Descending</MenuItem>
</Select>
</FormControl>
</Popover>
</Grid>
{/* Listing Gallery Schematics */}
{filteredProjects.map(
(pub) => {
console.log(pub)
return (
<Grid item xs={12} sm={6} lg={4} key={pub.save_id}>
<ProjectCard pub={pub} is_review={true} />
</Grid>
)
})}
</Grid>
</Container>
</div>
)
}
Example #28
| Source File: Regions.js From treetracker-admin-client with GNU Affero General Public License v3.0 | 4 votes |
|
EditModal = ({
openEdit,
setOpenEdit,
isUpload,
selectedItem,
styles,
upload,
updateRegion,
updateCollection,
showSnackbar,
}) => {
const [errors, setErrors] = useState({});
const [id, setId] = useState(undefined);
const [ownerId, setOwnerId] = useState(undefined);
const [name, setName] = useState(undefined);
const [regionNameProperty, setRegionNameProperty] = useState(undefined);
const [show, setShow] = useState(true);
const [calc, setCalc] = useState(true);
const [geojson, setGeoJson] = useState(undefined);
const [shape, setShape] = useState(undefined);
const [isCollection, setIsCollection] = useState(false);
const [saveInProgress, setSaveInProgress] = useState(false);
const [shapeProperties, setShapeProperties] = useState([]);
const { orgList, userHasOrg } = useContext(AppContext);
const reset = () => {
setShape(undefined);
setGeoJson(undefined);
setRegionNameProperty(undefined);
setId(undefined);
setName(undefined);
setRegionNameProperty(undefined);
setShow(true);
setCalc(true);
setIsCollection(false);
setOwnerId(undefined);
setErrors({});
};
useEffect(() => {
reset();
if (selectedItem) {
setId(selectedItem.id);
setOwnerId(selectedItem.owner_id);
setName(selectedItem.name);
if (selectedItem.isCollection) {
setIsCollection(true);
} else {
setShow(selectedItem.show_on_org_map);
setCalc(selectedItem.calculate_statistics);
}
} else {
setOwnerId(getOrganizationUUID());
}
}, [selectedItem]);
useEffect(() => {
if (shape?.type?.endsWith('Collection')) {
setIsCollection(true);
setShapeProperties(
(shape?.features || []).reduce((props, feature) => {
return [
...new Set([...props, ...Object.keys(feature.properties || {})]),
];
}, [])
);
} else {
setShapeProperties(shape?.properties || []);
}
}, [shape]);
useEffect(() => {
// Auto-set to "name" if present
const nameProp = shapeProperties?.find(
(prop) => prop.toLowerCase() === 'name'
);
if (nameProp) {
setRegionNameProperty(nameProp);
}
}, [shapeProperties]);
const onOwnerChange = (e) => {
setOwnerId(e.target.value);
setErrors((prev) => ({
...prev,
owner: undefined,
}));
};
const onNameChange = (e) => {
setName(e.target.value);
setErrors((prev) => ({
...prev,
name: undefined,
}));
};
const onRegionNamePropertyChange = (e) => {
setRegionNameProperty(e.target.value);
setErrors((prev) => ({
...prev,
name: undefined,
}));
};
const onShowChange = (e) => {
setShow(e.target.checked);
};
const onCalcChange = (e) => {
setCalc(e.target.checked);
};
const onFileChange = (e) => {
setErrors((prev) => ({
...prev,
shape: undefined,
}));
const fileread = new FileReader();
try {
fileread.onload = function (e) {
const content = e.target.result;
const json = JSON.parse(content);
setShape(json);
};
} catch (error) {
setErrors((prev) => ({
...prev,
shape: `Failed to process shape file: ${error}`,
}));
}
fileread.readAsText(e.target.files[0]);
setGeoJson(e.target.value);
};
const handleEditDetailClose = () => {
setOpenEdit(false);
};
const handleSave = async () => {
let hasError = false;
if (isUpload) {
if (!shape) {
hasError = true;
setErrors((prev) => {
return { ...prev, shape: 'Please select a shape file.' };
});
} else if (!regionNameProperty) {
hasError = true;
setErrors((prev) => {
return { ...prev, name: 'Please select a region name property.' };
});
}
}
if ((!isUpload || isCollection) && !name) {
hasError = true;
setErrors((prev) => {
return {
...prev,
name: `Please enter a name for the ${
isCollection ? 'collection' : 'region'
}.`,
};
});
}
if (!hasError) {
setSaveInProgress(true);
let res;
try {
if (isUpload) {
res = await upload({
id,
owner_id: ownerId,
collection_name: isCollection ? name : undefined,
region_name_property: regionNameProperty,
shape,
show_on_org_map: show,
calculate_statistics: calc,
});
} else {
if (isCollection) {
res = await updateCollection({
id,
owner_id: ownerId,
name,
});
} else {
res = await updateRegion({
id,
owner_id: ownerId,
name,
show_on_org_map: show,
calculate_statistics: calc,
});
}
}
if (res?.error) {
throw res.message;
} else {
showSnackbar(
`${isCollection ? 'Collection' : res?.region?.name} ${
isUpload ? 'uploaded' : 'updated'
}`
);
setOpenEdit(false);
}
} catch (error) {
// TO DO - report the error details
alert(`Upload failed: ${error}`);
}
setSaveInProgress(false);
}
};
return (
<Dialog open={openEdit} aria-labelledby="form-dialog-title">
<DialogTitle id="form-dialog-title">
{isUpload
? 'Upload New Region or Collection'
: `Edit ${isCollection ? 'Collection' : 'Region'}`}
</DialogTitle>
<DialogContent>
{isUpload && (
<>
<Grid container>
<Grid item className={styles.input}>
<Input
type="file"
value={geojson || ''}
onChange={onFileChange}
inputProps={{
accept: '.json,.geojson',
}}
error={errors.shape ? true : false}
/>
</Grid>
</Grid>
{shape && (
<Grid container>
<Grid item className={styles.input}>
<Typography>
{isCollection ? 'Collection' : 'Region'}
</Typography>
</Grid>
</Grid>
)}
</>
)}
<Grid container>
{!userHasOrg && (
<Grid item className={styles.owner}>
<TextField
error={errors.owner ? true : false}
helperText={errors.owner}
select
className={styles.input}
id="owner"
label="Owner"
value={ownerId || ''}
onChange={onOwnerChange}
fullWidth
>
<MenuItem key={'null'} value={null}>
No owner
</MenuItem>
{orgList.length &&
orgList.map((org) => (
<MenuItem
key={org.stakeholder_uuid}
value={org.stakeholder_uuid}
>
{org.name}
</MenuItem>
))}
</TextField>
</Grid>
)}
<Grid item>
{(!isUpload || isCollection) && (
<TextField
error={errors.name ? true : false}
helperText={errors.name}
id="name"
label={`${isCollection ? 'Collection' : 'Region'} Name`}
type="text"
variant="outlined"
fullWidth
value={name || ''}
className={styles.input}
onChange={onNameChange}
/>
)}
{isUpload && (
<TextField
select
error={errors.name ? true : false}
helperText={errors.name}
id="prop"
label="Region Name Property"
type="text"
variant="outlined"
fullWidth
value={regionNameProperty || ''}
className={styles.input}
onChange={onRegionNamePropertyChange}
>
{shapeProperties.length ? (
shapeProperties.map((prop) => (
<MenuItem key={prop} value={prop}>
{prop}
</MenuItem>
))
) : (
<MenuItem key={'null'} value={null}>
No properties found
</MenuItem>
)}
</TextField>
)}
</Grid>
{!isCollection && (
<FormGroup row={true}>
<FormControlLabel
control={<Switch checked={show} onChange={onShowChange} />}
label="Show on Organization Map"
/>
<FormControlLabel
control={<Switch checked={calc} onChange={onCalcChange} />}
label="Calculate Statistics"
/>
</FormGroup>
)}
</Grid>
</DialogContent>
<DialogActions>
<Button onClick={handleEditDetailClose} disabled={saveInProgress}>
Cancel
</Button>
<Button
onClick={handleSave}
variant="contained"
color="primary"
disabled={saveInProgress}
>
{saveInProgress ? (
<CircularProgress size={21} />
) : isUpload ? (
'Upload'
) : (
'Save'
)}
</Button>
</DialogActions>
</Dialog>
);
}
Example #29
| Source File: AdminEventList.js From AdaptivApps-fe with MIT License | 4 votes |
|
AdminEventList = props => {
// Declare Create, Update, and Delete mutation functions
const [CreateEvent] = useMutation(CREATE_EVENT);
const [UpdateEvent] = useMutation(UPDATE_EVENT);
const [DeleteEvent] = useMutation(DELETE_EVENT);
// Grab the events data from props
const events = props.events;
//commented out to remove console warning, eventType defined but never used
//const eventType = props.events.type;
const useStyles = makeStyles({
grid: {
maxWidth: "120rem",
marginLeft: "3rem",
"& .MuiButton-label": {
fontSize: "1.6rem",
fontWeight: "500",
},
},
tableHead: {
"& th": {
fontSize: "1.6rem",
},
},
addBtn: {
color: "#2763FF",
textTransform: "none",
},
img: { width: "15rem", objectFit: "contain" },
label: {
marginTop: ".8rem",
color: "red",
fontSize: "1rem",
},
});
const classes = useStyles();
// This code is returning a material table object
// For more info on material table, please visit their docs at
// https://material-table.com/
return (
<Grid className={classes.grid}>
<MaterialTable
components={{
Pagination: props => (
<TablePagination
{...props}
SelectProps={{
style: {
fontSize: "1.4rem",
},
}}
/>
),
}}
title=""
columns={[
{
title: "Title",
field: "title",
render: rowData => (
<div
style={{
fontSize: "1.6rem",
width: "20rem",
}}
>
{rowData.title}
</div>
),
editComponent: props => (
<>
<Input
type="text"
value={props.value}
onChange={e => props.onChange(e.target.value)}
/>
<InputLabel className={classes.label}>*Required</InputLabel>
</>
),
},
{
title: "Type",
field: "type",
render: rowData => (
<div
style={{
fontSize: "1.6rem",
width: "10rem",
}}
>
{rowData.type}
</div>
),
editComponent: props => (
<>
<Select
value={props.value}
onChange={e => props.onChange(e.target.value)}
>
<MenuItem value="In Person">In Person</MenuItem>
<MenuItem value="Webinar">Webinar</MenuItem>
</Select>
<InputLabel className={classes.label}>*Required</InputLabel>
</>
),
},
{
title: "Host",
field: "host",
render: rowData => (
<div
style={{
fontSize: "1.6rem",
width: "16rem",
}}
>
{rowData.host}
</div>
),
editComponent: props => (
<Input
type="text"
value={props.value}
onChange={e => props.onChange(e.target.value)}
/>
),
},
{
title: "Speakers",
field: "speakers",
render: rowData => (
<div
style={{
overflow: "scroll",
maxHeight: "10rem",
fontSize: "1.6rem",
width: "20rem",
}}
>
{rowData.speakers}
</div>
),
editComponent: props => (
<Input
type="text"
value={props.value}
onChange={e => props.onChange(e.target.value)}
/>
),
},
{
title: "Start Time",
field: "startTime",
editComponent: props => (
<Input
type="time"
value={props.value}
onChange={e => props.onChange(e.target.value)}
/>
),
},
{
title: "Start Date",
field: "startDate",
render: rowData => (
<div
style={{
fontSize: "1.6rem",
width: "9rem",
}}
>
{rowData.startDate}
</div>
),
editComponent: props => (
<>
<Input
type="date"
value={props.value}
onChange={e => props.onChange(e.target.value)}
/>
<InputLabel className={classes.label}>*Required</InputLabel>
</>
),
},
{
title: "End Date",
field: "endDate",
render: rowData => (
<div
style={{
fontSize: "1.6rem",
width: "9rem",
}}
>
{rowData.endDate}
</div>
),
editComponent: props => (
<>
<Input
type="date"
value={props.value}
onChange={e => props.onChange(e.target.value)}
/>
<InputLabel className={classes.label}>*Required</InputLabel>
</>
),
},
{
title: "Location",
field: "location",
render: rowData => (
<div
style={{
fontSize: "1.6rem",
width: "14rem",
}}
>
{rowData.location}
</div>
),
editComponent: props => (
<>
<Input
type="text"
value={props.value}
onChange={e => props.onChange(e.target.value)}
/>
<InputLabel className={classes.label}>*Required</InputLabel>
</>
),
},
{
title: "Link",
field: "link",
render: rowData => (
<div
style={{
overflow: "scroll",
fontSize: "1.6rem",
width: "22rem",
}}
>
{rowData.link}
</div>
),
editComponent: props => (
<Input
type="url"
value={props.value}
onChange={e => props.onChange(e.target.value)}
/>
),
},
{
title: "Image Url",
field: "imgUrl",
render: rowData => (
<img
style={{
maxHeight: "12rem",
}}
src={rowData.imgUrl}
alt="Event"
className={classes.img}
/>
),
editComponent: props => (
<Input
type="text"
value={props.value}
onChange={e => props.onChange(e.target.value)}
/>
),
},
{
title: "Sponsors",
field: "sponsors",
render: rowData => (
<div
style={{
overflow: "scroll",
fontSize: "1.6rem",
width: "20rem",
}}
>
{rowData.sponsors}
</div>
),
editComponent: props => (
<Input
type="text"
value={props.value}
onChange={e => props.onChange(e.target.value)}
/>
),
},
{
title: "Details",
field: "details",
render: rowData => (
<div
style={{
fontSize: "1.6rem",
width: "30rem",
maxHeight: "14rem",
overflow: "scroll",
}}
>
{rowData.details}
</div>
),
editComponent: props => (
<textarea
style={{
fontSize: "1.6rem",
}}
rows="8"
cols="60"
type="text"
value={props.value}
onChange={e => props.onChange(e.target.value)}
/>
),
},
]}
data={events}
editable={{
onRowAdd: async newData => {
await CreateEvent({
variables: {
title: newData.title,
type: newData.type,
host: newData.host,
speakers: newData.speakers,
startTime: newData.startTime,
startDate: newData.startDate,
endDate: newData.endDate,
location: newData.location,
imgUrl: newData.imgUrl,
sponsors: newData.sponsors,
details: newData.details,
link: newData.link,
},
});
props.eventsRefetch();
},
onRowUpdate: async (newData, oldData) => {
await UpdateEvent({
variables: {
id: newData.id,
title: newData.title,
type: newData.type,
host: newData.host,
speakers: newData.speakers,
startTime: newData.startTime,
startDate: newData.startDate,
endDate: newData.endDate,
location: newData.location,
imgUrl: newData.imgUrl,
sponsors: newData.sponsors,
details: newData.details,
link: newData.link,
},
});
props.eventsRefetch();
},
onRowDelete: async oldData => {
await DeleteEvent({
variables: {
id: oldData.id,
},
});
props.eventsRefetch();
},
}}
icons={{
Add: () => (
<>
<AddCircleOutlineIcon
style={{ color: "#2962FF" }}
fontSize="large"
/>
<Button className={classes.addBtn}>Add Event</Button>
</>
),
Edit: () => (
<EditIcon style={{ color: "#2962FF" }} fontSize="large" />
),
Delete: () => (
<DeleteIcon style={{ color: "#2962FF" }} fontSize="large" />
),
}}
detailPanel={[
{
tooltip: "Show Activities",
isFreeAction: true,
render: rowData => {
// When clicking on a row, display a list of activities associated
// With the event
const event_id = rowData.id;
return <AdminActivityList event_id={event_id} />;
},
},
]}
options={{
cellStyle: {
fontSize: "1.6rem",
},
headerStyle: {
fontSize: "4rem",
backgroundColor: "#2962FF",
color: "#FFF",
},
rowStyle: {
backgroundColor: "#FFF",
},
emptyRowsWhenPaging: false,
toolbarButtonAlignment: "left",
searchFieldStyle: {
width: "20rem",
fontSize: "1.6rem",
},
doubleHorizontalScrolldoubleHorizontalScroll: false,
columnsButton: true,
}}
/>
</Grid>
);
}
