@mui/material#OutlinedInput JavaScript Examples
The following examples show how to use
@mui/material#OutlinedInput.
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: Balance.js From react-saas-template with MIT License | 6 votes |
|
function Balance(props) {
const { balance, classes, openAddBalanceDialog } = props;
return (
<div className={classes.wrapper}>
<OutlinedInput
value={balance === null ? "" : currencyPrettyPrint(balance)}
className={classes.outlinedInput}
classes={{ input: classes.input }}
readOnly
labelWidth={0}
onClick={openAddBalanceDialog}
/>
</div>
);
}
Example #2
| Source File: UserListToolbar.js From Django-REST-Framework-React-BoilerPlate with MIT License | 6 votes |
|
SearchStyle = styled(OutlinedInput)(({ theme }) => ({
width: 240,
transition: theme.transitions.create(['box-shadow', 'width'], {
easing: theme.transitions.easing.easeInOut,
duration: theme.transitions.duration.shorter,
}),
'&.Mui-focused': { width: 320, boxShadow: theme.customShadows.z8 },
'& fieldset': {
borderWidth: `1px !important`,
borderColor: `${theme.palette.grey[500_32]} !important`,
},
}))
Example #3
| Source File: Settings1.js From react-saas-template with MIT License | 4 votes |
|
function Settings1(props) {
const { classes, pushMessageToSnackbar } = props;
const [isSaveLoading, setIsSaveLoading] = useState(false);
const [isDefaultLoading, setIsDefaultLoading] = useState(false);
const [option1, setOption1] = useState("None");
const [option2, setOption2] = useState("None");
const [option3, setOption3] = useState("None");
const [option4, setOption4] = useState("None");
const [option5, setOption5] = useState("2 Days");
const [option6, setOption6] = useState(7500);
const handleChange = useCallback(
(event) => {
const { name, value } = event.target;
if (name === "option6") {
if (value > 7500 || value < 1000) {
return;
}
}
switch (name) {
case "option1": {
setOption1(value);
break;
}
case "option2": {
setOption2(value);
break;
}
case "option3": {
setOption3(value);
break;
}
case "option4": {
setOption4(value);
break;
}
case "option5": {
setOption5(value);
break;
}
case "option6": {
setOption6(value);
break;
}
default:
throw new Error("No branch selected in switch statement.");
}
},
[setOption1, setOption2, setOption3, setOption4, setOption5, setOption6]
);
const resetState = useCallback(() => {
setIsSaveLoading(false);
setIsDefaultLoading(false);
setOption1("None");
setOption2("None");
setOption3("None");
setOption4("None");
setOption5("2 Days");
setOption6(7500);
}, [
setIsSaveLoading,
setIsDefaultLoading,
setOption1,
setOption2,
setOption3,
setOption4,
setOption5,
setOption6,
]);
const onSetDefault = useCallback(() => {
setIsDefaultLoading(true);
setTimeout(() => {
pushMessageToSnackbar({
text: "Your settings have been reset to default",
});
resetState();
}, 1500);
}, [pushMessageToSnackbar, resetState]);
const onSubmit = useCallback(() => {
setIsSaveLoading(true);
setTimeout(() => {
pushMessageToSnackbar({
text: "Your settings have been saved",
});
setIsSaveLoading(false);
}, 1500);
}, [setIsSaveLoading, pushMessageToSnackbar]);
const inputs = [
{
state: option1,
label: "Option 1",
stateName: "option1",
},
{
state: option2,
label: "Option 2",
stateName: "option2",
},
{
state: option3,
label: "Option 3",
stateName: "option3",
},
{
state: option4,
label: "Option 4",
stateName: "option4",
},
];
return (
<Accordion>
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
<Typography>Settings 1</Typography>
</AccordionSummary>
<AccordionDetails className={classes.dBlock}>
<List disablePadding>
<Bordered disableVerticalPadding disableBorderRadius>
{inputs.map((element, index) => (
<ListItem
className="listItemLeftPadding"
disableGutters
divider
key={index}
>
<ListItemText>
<Typography variant="body2">{element.label}</Typography>
</ListItemText>
<FormControl variant="outlined">
<ListItemSecondaryAction
className={classes.ListItemSecondaryAction}
>
<Select
value={element.state}
onChange={handleChange}
input={
<OutlinedInput
name={element.stateName}
labelWidth={0}
className={classes.numberInput}
classes={{ input: classes.numberInputInput }}
/>
}
MenuProps={{ disableScrollLock: true }}
>
{inputOptions.map((innerElement) => (
<MenuItem value={innerElement} key={innerElement}>
{innerElement}
</MenuItem>
))}
</Select>
</ListItemSecondaryAction>
</FormControl>
</ListItem>
))}
<ListItem className="listItemLeftPadding" disableGutters divider>
<ListItemText>
<Typography variant="body2">Option 5</Typography>
</ListItemText>
<FormControl variant="outlined">
<ListItemSecondaryAction
className={classes.ListItemSecondaryAction}
>
<Select
value={option5}
onChange={handleChange}
input={
<OutlinedInput
name="option5"
labelWidth={0}
className={classes.numberInput}
classes={{ input: classes.numberInputInput }}
/>
}
MenuProps={{ disableScrollLock: true }}
>
{[
"Always",
"6 Hours",
"12 Hours",
"1 Day",
"2 Days",
"3 Days",
"1 Week",
].map((element) => (
<MenuItem value={element} key={element}>
{element}
</MenuItem>
))}
</Select>
</ListItemSecondaryAction>
</FormControl>
</ListItem>
<ListItem className="listItemLeftPadding" disableGutters>
<ListItemText>
<Typography variant="body2">Option 6</Typography>
</ListItemText>
<FormControl variant="outlined">
<ListItemSecondaryAction
className={classes.ListItemSecondaryAction}
>
<OutlinedInput
labelWidth={0}
name="option6"
value={option6}
type="number"
onChange={handleChange}
className={classes.numberInput}
classes={{ input: classes.numberInputInput }}
inputProps={{ step: 20 }}
/>
</ListItemSecondaryAction>
</FormControl>
</ListItem>
</Bordered>
</List>
</AccordionDetails>
<AccordionDetails className={classes.accordionDetails}>
<Box mr={1}>
<Button
onClick={onSetDefault}
disabled={isSaveLoading || isDefaultLoading}
>
Default {isDefaultLoading && <ButtonCircularProgress />}
</Button>
</Box>
<Button
variant="contained"
color="secondary"
disabled={isSaveLoading || isDefaultLoading}
onClick={onSubmit}
>
Save {isSaveLoading && <ButtonCircularProgress />}
</Button>
</AccordionDetails>
</Accordion>
);
}
Example #4
| Source File: Settings2.js From react-saas-template with MIT License | 4 votes |
|
function Settings2(props) {
const { pushMessageToSnackbar, classes } = props;
const [isDefaultLoading, setIsDefaultLoading] = useState(false);
const [isSaveLoading, setIsSaveLoading] = useState(false);
const [option1, setOption1] = useState(false);
const [option2, setOption2] = useState(false);
const [option3, setOption3] = useState(false);
const [option4, setOption4] = useState(false);
const [option5, setOption5] = useState(false);
const [option6, setOption6] = useState("Both");
const [option7, setOption7] = useState("2 weeks");
const resetState = useCallback(() => {
setIsDefaultLoading(false);
setIsSaveLoading(false);
setOption1(false);
setOption2(false);
setOption3(false);
setOption4(false);
setOption5(false);
setOption6("Both");
setOption7("2 weeks");
}, [
setOption1,
setOption2,
setOption3,
setOption4,
setOption5,
setOption6,
setOption7,
]);
const onSubmit = useCallback(() => {
setIsSaveLoading(true);
setTimeout(() => {
pushMessageToSnackbar({
text: "Your settings have been saved",
});
setIsSaveLoading(false);
}, 1500);
}, [pushMessageToSnackbar, setIsSaveLoading]);
const onSetDefault = useCallback(() => {
setIsDefaultLoading(true);
setTimeout(() => {
pushMessageToSnackbar({
text: "Your settings have been reset to default",
});
resetState();
}, 1500);
}, [pushMessageToSnackbar, resetState, setIsDefaultLoading]);
const handleInputChange = useCallback(
(event) => {
const { name, value } = event.target;
switch (name) {
case "option6": {
setOption6(value);
break;
}
case "option7": {
setOption7(value);
break;
}
default:
throw new Error("No branch selected in switch statement");
}
},
[setOption6, setOption7]
);
const handleCheckboxChange = (name) => (event) => {
switch (name) {
case "option1":
setOption1(event.target.checked);
break;
case "option2":
setOption2(event.target.checked);
break;
case "option3":
setOption3(event.target.checked);
break;
case "option4":
setOption4(event.target.checked);
break;
case "option5":
setOption5(event.target.checked);
break;
default:
throw new Error("No branch selected in switch statement.");
}
};
const inputs = [
{
title: "Option 1",
secondaryAction: (
<Checkbox
value="option1"
color="primary"
checked={option1}
onChange={handleCheckboxChange("option1")}
/>
),
},
{
title: "Option 2",
secondaryAction: (
<Checkbox
value="option2"
color="primary"
checked={option2}
onChange={handleCheckboxChange("option2")}
/>
),
},
{
title: "Option 3",
secondaryAction: (
<Checkbox
value="option3"
color="primary"
checked={option3}
onChange={handleCheckboxChange("option3")}
/>
),
helpText: "You can add some further explanation here.",
},
{
title: "Option 4",
secondaryAction: (
<Checkbox
value="option4"
color="primary"
checked={option4}
onChange={handleCheckboxChange("option4")}
/>
),
},
{
title: "Option 5",
secondaryAction: (
<Checkbox
value="option5"
color="primary"
checked={option5}
onChange={handleCheckboxChange("option5")}
/>
),
},
{
title: "Option 6",
secondaryAction: (
<Select
value={option6}
input={
<OutlinedInput
onChange={handleInputChange}
labelWidth={0}
className={classes.numberInput}
classes={{ input: classes.numberInputInput }}
name="option6"
/>
}
>
<MenuItem value="Both">Both</MenuItem>
<MenuItem value="Male+">Male+</MenuItem>
<MenuItem value="Female+">Female+</MenuItem>
<MenuItem value="Only male">Only male</MenuItem>
<MenuItem value="Only female">Only female</MenuItem>
</Select>
),
helpText: "You can add some further explanation here.",
},
{
title: "Option 7",
secondaryAction: (
<Select
value={option7}
input={
<OutlinedInput
onChange={handleInputChange}
labelWidth={0}
className={classes.numberInput}
classes={{ input: classes.numberInputInput }}
name="option7"
/>
}
>
<MenuItem value="None">None</MenuItem>
<MenuItem value="6 hours">6 hours</MenuItem>
<MenuItem value="12 hours">12 hours</MenuItem>
<MenuItem value="1 day">1 day</MenuItem>
<MenuItem value="3 days">3 days</MenuItem>
<MenuItem value="1 week">1 week</MenuItem>
<MenuItem value="2 weeks">2 weeks</MenuItem>
<MenuItem value="1 month">1 month</MenuItem>
<MenuItem value="3 months">3 months</MenuItem>
<MenuItem value="6 months">6 months</MenuItem>
</Select>
),
helpText: "You can add some further explanation here.",
},
];
return (
<Accordion>
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
<Typography>Settings 2</Typography>
</AccordionSummary>
<AccordionDetails className={classes.dBlock}>
<List disablePadding>
<Bordered disableVerticalPadding disableBorderRadius>
{inputs.map((element, index) => (
<ListItem
key={index}
divider={index !== inputs.length - 1}
className="listItemLeftPadding"
>
<ListItemText>
<Typography variant="body2">
{element.title}
{element.helpText && <HelpIcon title={element.helpText} />}
</Typography>
</ListItemText>
<ListItemSecondaryAction>
<FormControl variant="outlined">
{element.secondaryAction}
</FormControl>
</ListItemSecondaryAction>
</ListItem>
))}
</Bordered>
</List>
</AccordionDetails>
<AccordionDetails className={classes.AccordionDetails}>
<Box mr={1}>
<Button
onClick={onSetDefault}
disabled={isSaveLoading || isDefaultLoading}
>
Default {isDefaultLoading && <ButtonCircularProgress />}
</Button>
</Box>
<Button
variant="contained"
color="secondary"
onClick={onSubmit}
disabled={isSaveLoading || isDefaultLoading}
>
Save {isSaveLoading && <ButtonCircularProgress />}
</Button>
</AccordionDetails>
</Accordion>
);
}
Example #5
| Source File: AddPostOptions.js From react-saas-template with MIT License | 4 votes |
|
function AddPostOptions(props) {
const {
Dropzone,
classes,
files,
deleteItem,
onDrop,
EmojiTextArea,
ImageCropper,
DateTimePicker,
cropperFile,
onCrop,
onCropperClose,
uploadAt,
onChangeUploadAt,
} = props;
const [option1, setOption1] = useState("None");
const [option2, setOption2] = useState("None");
const [option3, setOption3] = useState("None");
const [option4, setOption4] = useState("None");
const handleChange = useCallback(
(event) => {
const { name, value } = event.target;
switch (name) {
case "option1":
setOption1(value);
break;
case "option2":
setOption2(value);
break;
case "option3":
setOption3(value);
break;
case "option4":
setOption4(value);
break;
default:
throw new Error("No branch selected in switch-statement.");
}
},
[setOption1, setOption2, setOption3, setOption4]
);
const printFile = useCallback(() => {
if (files[0]) {
return (
<div className={classes.imgWrapper}>
<img
alt="uploaded item"
src={files[0].preview}
className={classes.img}
style={{ height: 148 }}
/>
<div className={classes.floatButtonWrapper}>
<IconButton onClick={deleteItem} size="large">
<CloseIcon />
</IconButton>
</div>
</div>
);
}
return (
<Dropzone accept="image/png, image/jpeg" onDrop={onDrop} fullHeight>
<span className={classes.uploadText}>
Click / Drop file <br /> here
</span>
</Dropzone>
);
}, [onDrop, files, classes, deleteItem]);
const inputs =
[
{
state: option1,
label: "Option 1",
stateName: "option1",
},
{
state: option2,
label: "Option 2",
stateName: "option2",
},
{
state: option3,
label: "Option 3",
stateName: "option3",
},
{
state: option4,
label: "Option 4",
stateName: "option4",
},
];
return (
<Fragment>
{ImageCropper && (
<ImageCropperDialog
open={cropperFile ? true : false}
ImageCropper={ImageCropper}
src={cropperFile ? cropperFile.preview : ""}
onCrop={onCrop}
onClose={onCropperClose}
aspectRatio={4 / 3}
/>
)}
<Typography paragraph variant="h6">
Upload Image
</Typography>
<Box mb={2}>
{EmojiTextArea && (
<EmojiTextArea
inputClassName={classes.emojiTextArea}
maxCharacters={2200}
rightContent={printFile()}
emojiSet="google"
/>
)}
</Box>
<Typography paragraph variant="h6">
Options
</Typography>
<List disablePadding>
<Bordered disableVerticalPadding disableBorderRadius>
<ListItem divider disableGutters className="listItemLeftPadding">
<ListItemText>
<Typography variant="body2">Upload at</Typography>
</ListItemText>
<ListItemSecondaryAction>
{DateTimePicker && (
<DateTimePicker
value={uploadAt}
format="yyyy/MM/dd hh:mm a"
onChange={onChangeUploadAt}
disablePast
/>
)}
</ListItemSecondaryAction>
</ListItem>
{inputs.map((element, index) => (
<ListItem
className="listItemLeftPadding"
disableGutters
divider={index !== inputs.length - 1}
key={index}
>
<ListItemText>
<Typography variant="body2">{element.label}</Typography>
</ListItemText>
<FormControl variant="outlined">
<ListItemSecondaryAction>
<Select
value={element.state}
onChange={handleChange}
input={
<OutlinedInput
name={element.stateName}
labelWidth={0}
className={classes.numberInput}
classes={{ input: classes.numberInputInput }}
/>
}
MenuProps={{ disableScrollLock: true }}
>
{inputOptions.map((innerElement) => (
<MenuItem value={innerElement} key={innerElement}>
{innerElement}
</MenuItem>
))}
</Select>
</ListItemSecondaryAction>
</FormControl>
</ListItem>
))}
</Bordered>
</List>
</Fragment>
);
}
Example #6
| Source File: index.js From neutron with Mozilla Public License 2.0 | 4 votes |
|
SectionSavedPassword = () => {
const [credentials, setCredentials] = useState([]);
const [revealPasswords, setRevealPasswords] = useState({});
const reloadCredentials = useCallback(() => {
getAllCredentialsAsync()
.then((_credentials) => {
setCredentials(_credentials);
})
.catch((err) => {
// eslint-disable-next-line no-console
console.log(err);
});
}, [setCredentials]);
useEffect(() => {
reloadCredentials();
}, [reloadCredentials]);
useEffect(() => {
ipcRenderer.removeAllListeners('password-credentials-added');
ipcRenderer.on('password-credentials-added', () => {
reloadCredentials();
});
return () => {
ipcRenderer.removeAllListeners('password-credentials-added');
};
}, [reloadCredentials]);
return (
<List disablePadding dense>
{credentials.length < 1 ? (
<ListItem disabled>
<ListItemText primary="Saved passwords will appear here." />
</ListItem>
) : (
<>
<ListItem>
<Table size="small" aria-label="Saved Passwords">
<TableHead>
<TableRow>
<TableCell>Website</TableCell>
<TableCell align="right">Username</TableCell>
<TableCell align="right">Password</TableCell>
<TableCell align="right" />
</TableRow>
</TableHead>
<TableBody>
{credentials.map((row) => {
const key = `${row.domain}-${row.username}`;
return (
<TableRow key={key}>
<TableCell component="th" scope="row">
{row.domain}
</TableCell>
<TableCell align="right">
<TextField
value={row.username}
margin="dense"
fullWidth
variant="outlined"
inputProps={{ 'aria-label': 'Username' }}
disabled
/>
</TableCell>
<TableCell align="right">
<FormControl variant="outlined">
<OutlinedInput
id="outlined-adornment-password"
type={revealPasswords[key] ? 'text' : 'password'}
defaultValue={row.password}
margin="dense"
endAdornment={(
<InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
onClick={() => {
setRevealPasswords({
...revealPasswords,
[key]: !revealPasswords[key],
});
}}
edge="end"
size="large"
>
{revealPasswords[key]
? <VisibilityIcon /> : <VisibilityOffIcon />}
</IconButton>
</InputAdornment>
)}
inputProps={{ 'aria-label': 'Password' }}
fullWidth
onChange={(e) => {
const newPassword = e.target.value;
saveCredentialAsync(row.domain, row.username, newPassword, row.id)
.then(() => reloadCredentials())
.catch((err) => {
// eslint-disable-next-line no-console
console.log(err);
});
}}
/>
</FormControl>
</TableCell>
<TableCell align="right">
<Tooltip title="Remove">
<IconButton
aria-label="Remove"
size="small"
onClick={() => {
deleteCredentialAsync(row.id)
.then(() => reloadCredentials())
.catch((err) => {
// eslint-disable-next-line no-console
console.log(err);
});
}}
>
<ClearIcon />
</IconButton>
</Tooltip>
</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
</ListItem>
<ListItem disabled>
<ListItemText primary={`Passwords are stored encrypted locally on disk with the master key stored securely in ${getKeytarVaultName()}.`} />
</ListItem>
</>
)}
</List>
);
}
