@mui/material#Input JavaScript Examples
The following examples show how to use
@mui/material#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: Searchbar.js From Django-REST-Framework-React-BoilerPlate 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}>
<Iconify icon="eva:search-fill" width={20} height={20} />
</IconButton>
)}
<Slide direction="down" in={isOpen} mountOnEnter unmountOnExit>
<SearchbarStyle>
<Input
autoFocus
fullWidth
disableUnderline
placeholder="Search…"
startAdornment={
<InputAdornment position="start">
<Iconify icon="eva:search-fill" 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 #2
| Source File: InputSlider.jsx From matx-react with MIT License | 5 votes |
|
export default function InputSlider() {
const [value, setValue] = React.useState(30);
const handleSliderChange = (_, newValue) => {
setValue(newValue);
};
const handleInputChange = (event) => {
setValue(event.target.value === "" ? "" : Number(event.target.value));
};
const handleBlur = () => {
if (value < 0) {
setValue(0);
} else if (value > 100) {
setValue(100);
}
};
return (
<Box width={250}>
<Typography id="input-slider" gutterBottom>
Volume
</Typography>
<Grid container spacing={2} alignItems="center">
<Grid item>
<VolumeUp />
</Grid>
<Grid item xs>
<Slider
value={typeof value === "number" ? value : 0}
onChange={handleSliderChange}
aria-labelledby="input-slider"
/>
</Grid>
<Grid item>
<Input
value={value}
margin="dense"
sx={{ width: 42 }}
onChange={handleInputChange}
onBlur={handleBlur}
inputProps={{
step: 10,
min: 0,
max: 100,
type: "number",
"aria-labelledby": "input-slider",
}}
/>
</Grid>
</Grid>
</Box>
);
}
Example #3
| Source File: Classes.js From admin-web with GNU Affero General Public License v3.0 | 4 votes |
|
render() {
const { classes, t, _classes, domain, tableState, handleMatch, handleRequestSort,
handleAdd, handleAddingSuccess, handleAddingClose, handleAddingError,
handleDelete, handleDeleteClose, handleDeleteError,
handleDeleteSuccess, handleEdit } = this.props;
const { order, orderBy, match, snackbar, adding, deleting } = tableState;
const writable = this.context.includes(DOMAIN_ADMIN_WRITE);
const { tab, root } = this.state;
return (
<TableViewContainer
handleScroll={this.handleScroll}
headline={t("Groups")}
subtitle={t("groups_sub")}
href="https://docs.grommunio.com/admin/administration.html#groups"
snackbar={snackbar || this.state.snackbar}
onSnackbarClose={this.handleSnackbarClose}
baseRef={tc => (this.treeContainer = tc)}
>
<Grid container alignItems="flex-end" className={classes.buttonGrid}>
<Button
variant="contained"
color="primary"
onClick={handleAdd}
className={classes.newButton}
disabled={!writable}
>
{t('New group')}
</Button>
<div className={classes.actions}>
<TextField
value={match}
onChange={handleMatch}
placeholder={t("Search")}
variant="outlined"
className={classes.textfield}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<Search color="secondary" />
</InputAdornment>
),
}}
color="primary"
/>
</div>
</Grid>
<Tabs
indicatorColor="primary"
textColor="primary"
className={classes.tabs}
onChange={this.handleTab}
value={tab}
>
<Tab value={0} label={t("List")} />
<Tab value={1} label={t("Tree")} />
</Tabs>
{!tab && <Typography className={classes.count} color="textPrimary">
{t("showingGroups", { count: _classes.Classes.length })}
</Typography>}
{!tab ? <Paper className={classes.tablePaper} elevation={1}>
<Table size="small">
<TableHead>
<TableRow>
{this.columns.map(column =>
<TableCell key={column.value}>
<TableSortLabel
active={orderBy === column.value}
align="left"
direction={orderBy === column.value ? order : 'asc'}
onClick={handleRequestSort(column.value)}
>
{t(column.label)}
</TableSortLabel>
</TableCell>
)}
<TableCell></TableCell>
</TableRow>
</TableHead>
<TableBody>
{_classes.Classes.map((obj, idx) =>
<TableRow key={idx} hover onClick={handleEdit('/' + domain.ID + '/classes/' + obj.ID)}>
<TableCell>{obj.classname}</TableCell>
<TableCell>{obj.listname}</TableCell>
<TableCell align="right">
{writable && <IconButton onClick={handleDelete(obj)} size="large">
<Delete color="error"/>
</IconButton>}
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
{(_classes.Classes.length < _classes.count) && <Grid container justifyContent="center">
<CircularProgress color="primary" className={classes.circularProgress}/>
</Grid>}
</Paper> :
<>
<FormControl className={classes.select}>
<InputLabel variant="standard">{t("Root group")}</InputLabel>
<Select
fullWidth
value={root > -1 ? root : ''}
onChange={this.handleRootSelect}
input={<Input />}
placeholder={t('Select root group')}
>
{_classes.Trees.map((tree, idx) => (
<MenuItem key={idx} value={idx}>
{tree.name}
</MenuItem>
))}
</Select>
</FormControl>
<div className={classes.treeContainer}>
{root !== -1 &&
<Paper style={{ flex: 1 }}>
<Tree
data={_classes.Trees[root]}
orientation="vertical"
renderCustomNodeElement={this.renderNode}
depthFactor={50}
pathFunc="step"
translate={this.getOffset()}
scaleExtent={{
min: 0.1,
max: 2,
}}
separation={{
siblings: 1,
nonSiblings: 2,
}}
onNodeClick={this.handleNodeClicked}
collapsible={false}
/>
</Paper>}
</div>
</>
}
<AddClass
open={adding}
onSuccess={handleAddingSuccess}
onError={handleAddingError}
domain={domain}
onClose={handleAddingClose}
/>
<DomainDataDelete
open={!!deleting}
delete={this.props.delete}
onSuccess={handleDeleteSuccess}
onError={handleDeleteError}
onClose={handleDeleteClose}
item={deleting.name}
id={deleting.ID}
domainID={domain.ID}
/>
</TableViewContainer>
);
}
Example #4
| Source File: find-in-page.js From neutron with Mozilla Public License 2.0 | 4 votes |
|
FindInPage = () => {
const dispatch = useDispatch();
const activeMatch = useSelector((state) => state.findInPage.activeMatch);
const matches = useSelector((state) => state.findInPage.matches);
const open = useSelector((state) => state.findInPage.open);
const text = useSelector((state) => state.findInPage.text);
const inputRef = useRef(null);
// https://stackoverflow.com/a/57556594
// Event handler utilizing useCallback ...
// ... so that reference never changes.
const handleOpenFindInPage = useCallback(() => {
inputRef.current.focus();
inputRef.current.select();
}, [inputRef]);
useEffect(() => {
ipcRenderer.on('open-find-in-page', handleOpenFindInPage);
// Remove event listener on cleanup
return () => {
ipcRenderer.removeListener('open-find-in-page', handleOpenFindInPage);
};
}, [handleOpenFindInPage]);
if (!open) return null;
return (
<Box
sx={{
background: 'background.default',
display: 'flex',
alignItems: 'center',
py: 0,
px: 0.5,
zIndex: 1,
height: 41, // need to have fixed height
borderBottom: '1px solid rgba(0, 0, 0, 0.2)',
width: 1,
}}
>
<Box
sx={{
flex: 1,
py: 0,
px: 1.5,
}}
>
<Typography variant="body2">
<strong>{activeMatch}</strong>
<span> / </span>
<strong>{matches}</strong>
<span> matches</span>
</Typography>
</Box>
<Box>
<Input
inputRef={inputRef}
placeholder="Find"
value={text}
margin="dense"
onChange={(e) => {
const val = e.target.value;
dispatch(updateFindInPageText(val));
if (val.length > 0) {
requestFindInPage(val, true);
} else {
requestStopFindInPage();
}
}}
onInput={(e) => {
const val = e.target.value;
dispatch(updateFindInPageText(val));
if (val.length > 0) {
requestFindInPage(val, true);
} else {
requestStopFindInPage();
}
}}
onKeyDown={(e) => {
if (e.key === 'Enter') { // Enter
const val = e.target.value;
if (val.length > 0) {
requestFindInPage(val, true);
}
}
if (e.key === 'Escape') { // Escape
requestStopFindInPage(true);
dispatch(closeFindInPage());
}
}}
/>
</Box>
<Button
color="inherit"
size="small"
disabled={text.length < 1 || matches < 1}
onClick={() => {
if (text.length > 0) {
requestFindInPage(text, false);
}
}}
>
Previous
</Button>
<Button
color="inherit"
size="small"
disabled={text.length < 1 || matches < 1}
onClick={() => {
if (text.length > 0) {
requestFindInPage(text, true);
}
}}
>
Next
</Button>
<Button
color="inherit"
size="small"
disabled={text.length < 1}
onClick={() => {
if (text.length > 0) {
requestFindInPage(text, true);
}
}}
>
Find
</Button>
<Button
color="inherit"
size="small"
onClick={() => {
requestStopFindInPage(true);
dispatch(closeFindInPage());
}}
>
Close
</Button>
</Box>
);
}
