@material-ui/lab#LoadingButton JavaScript Examples
The following examples show how to use
@material-ui/lab#LoadingButton.
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: VideoCreateForm.js From course-manager with MIT License | 4 votes |
|
function VideoCreateForm({ open, onClose, courseId, onDataCreated }) {
const classes = useStyles();
const [videoThumbnailUrl, setVideoThumbnailUrl] = useState('');
const [videoUrl, setVideoUrl] = useState('');
const VideoSchema = Yup.object().shape({
title: Yup.string().required('Title is required'),
description: Yup.string().required('Description is required')
});
const formik = useFormik({
initialValues: {
title: '',
description: ''
},
validationSchema: VideoSchema,
onSubmit: async (values) => {
const data = {
...values,
thumbnailUrl: videoThumbnailUrl,
videoUrl,
courseId
};
const newVideo = await apis.video.create(data);
if (!newVideo) {
return;
}
onDataCreated(newVideo);
onClose();
}
});
const { errors, touched, isSubmitting, handleSubmit, getFieldProps } = formik;
return (
<Modal open={open} onClose={onClose}>
<Card className={classes.card}>
<Stack direction="row" alignItems="center" justifyContent="space-between" mb={5}>
<Typography variant="h4" gutterBottom>
New Video
</Typography>
</Stack>
<FormikProvider value={formik}>
<Form autoComplete="off" noValidate onSubmit={handleSubmit}>
<Stack spacing={3}>
<TextField
fullWidth
autoComplete="title"
type="text"
label="Title"
{...getFieldProps('title')}
error={Boolean(touched.title && errors.title)}
helperText={touched.title && errors.title}
/>
<TextField
fullWidth
autoComplete="description"
type="text"
label="Description"
{...getFieldProps('description')}
error={Boolean(touched.description && errors.description)}
helperText={touched.description && errors.description}
/>
<FileUploader
initUrl={videoThumbnailUrl}
type={VIDEO_THUMBNAIL_TYPE}
setUrl={setVideoThumbnailUrl}
title="Upload thumbnail"
name="create-video-thumb"
/>
<FileUploader
initUrl={videoUrl}
type={VIDEO_TYPE}
setUrl={setVideoUrl}
title="Upload video"
name="create-video"
/>
<LoadingButton
fullWidth
size="large"
type="submit"
variant="contained"
loading={isSubmitting}
>
Submit
</LoadingButton>
</Stack>
</Form>
</FormikProvider>
</Card>
</Modal>
);
}
Example #2
| Source File: LoginForm.js From course-manager with MIT License | 4 votes |
|
// ----------------------------------------------------------------------
export default function LoginForm() {
const navigate = useNavigate();
const [showPassword, setShowPassword] = useState(false);
const LoginSchema = Yup.object().shape({
username: Yup.string().required('Username is required'),
password: Yup.string().required('Password is required')
});
setUpdateLoginState((newProfile) => {
console.log(`${newProfile.username} logged in`);
});
const formik = useFormik({
initialValues: {
username: '',
password: ''
},
validationSchema: LoginSchema,
onSubmit: async (values) => {
const user = await apis.auth.login(values);
if (user) navigate('/dashboard', { replace: true });
}
});
const { errors, touched, isSubmitting, handleSubmit, getFieldProps } = formik;
const handleShowPassword = () => {
setShowPassword((show) => !show);
};
return (
<FormikProvider value={formik}>
<Form autoComplete="off" noValidate onSubmit={handleSubmit}>
<Stack spacing={3}>
<TextField
fullWidth
autoComplete="username"
type="text"
label="Username"
{...getFieldProps('username')}
error={Boolean(touched.username && errors.username)}
helperText={touched.username && errors.username}
/>
<TextField
fullWidth
autoComplete="current-password"
type={showPassword ? 'text' : 'password'}
label="Password"
{...getFieldProps('password')}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<IconButton onClick={handleShowPassword} edge="end">
<Icon icon={showPassword ? eyeFill : eyeOffFill} />
</IconButton>
</InputAdornment>
)
}}
error={Boolean(touched.password && errors.password)}
helperText={touched.password && errors.password}
/>
</Stack>
<Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ my: 2 }}>
<Link component={RouterLink} variant="subtitle2" to="#">
Forgot password?
</Link>
</Stack>
<LoadingButton
fullWidth
size="large"
type="submit"
variant="contained"
loading={isSubmitting}
>
Login
</LoadingButton>
</Form>
</FormikProvider>
);
}
Example #3
| Source File: RegisterForm.js From course-manager with MIT License | 4 votes |
|
// ----------------------------------------------------------------------
export default function RegisterForm() {
const navigate = useNavigate();
const [showPassword, setShowPassword] = useState(false);
const RegisterSchema = Yup.object().shape({
firstName: Yup.string()
.min(2, 'Too Short!')
.max(50, 'Too Long!')
.required('First name required'),
lastName: Yup.string().min(2, 'Too Short!').max(50, 'Too Long!').required('Last name required'),
email: Yup.string().email('Email must be a valid email address').required('Email is required'),
password: Yup.string().required('Password is required')
});
const formik = useFormik({
initialValues: {
firstName: '',
lastName: '',
email: '',
password: ''
},
validationSchema: RegisterSchema,
onSubmit: () => {
navigate('/dashboard', { replace: true });
}
});
const { errors, touched, handleSubmit, isSubmitting, getFieldProps } = formik;
return (
<FormikProvider value={formik}>
<Form autoComplete="off" noValidate onSubmit={handleSubmit}>
<Stack spacing={3}>
<Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>
<TextField
fullWidth
label="First name"
{...getFieldProps('firstName')}
error={Boolean(touched.firstName && errors.firstName)}
helperText={touched.firstName && errors.firstName}
/>
<TextField
fullWidth
label="Last name"
{...getFieldProps('lastName')}
error={Boolean(touched.lastName && errors.lastName)}
helperText={touched.lastName && errors.lastName}
/>
</Stack>
<TextField
fullWidth
autoComplete="username"
type="email"
label="Email address"
{...getFieldProps('email')}
error={Boolean(touched.email && errors.email)}
helperText={touched.email && errors.email}
/>
<TextField
fullWidth
autoComplete="current-password"
type={showPassword ? 'text' : 'password'}
label="Password"
{...getFieldProps('password')}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<IconButton edge="end" onClick={() => setShowPassword((prev) => !prev)}>
<Icon icon={showPassword ? eyeFill : eyeOffFill} />
</IconButton>
</InputAdornment>
)
}}
error={Boolean(touched.password && errors.password)}
helperText={touched.password && errors.password}
/>
<LoadingButton
fullWidth
size="large"
type="submit"
variant="contained"
loading={isSubmitting}
>
Register
</LoadingButton>
</Stack>
</Form>
</FormikProvider>
);
}
Example #4
| Source File: Create.js From course-manager with MIT License | 4 votes |
|
// ----------------------------------------------------------------------
export default function Create() {
const [thumbnailUrl, setThumbnailUrl] = useState('');
const navigate = useNavigate();
const CourseSchema = Yup.object().shape({
title: Yup.string().required('Full name is required'),
description: Yup.string().required('Username is required')
});
const formik = useFormik({
initialValues: {
title: '',
description: ''
},
validationSchema: CourseSchema,
onSubmit: async (values) => {
const data = {
...values,
thumbnailUrl
};
const newCourse = await apis.course.create(data);
if (!newCourse) {
return;
}
navigate('/dashboard/courses', { replace: true });
}
});
const { errors, touched, isSubmitting, handleSubmit, getFieldProps } = formik;
return (
<Page title="List | Minimal-UI">
<Container>
<Stack direction="row" alignItems="center" justifyContent="space-between" mb={5}>
<Typography variant="h4" gutterBottom>
New Course
</Typography>
</Stack>
<FormikProvider value={formik}>
<Form autoComplete="off" noValidate onSubmit={handleSubmit}>
<Stack spacing={3}>
<TextField
fullWidth
autoComplete="title"
type="text"
label="Title"
{...getFieldProps('title')}
error={Boolean(touched.title && errors.title)}
helperText={touched.title && errors.title}
/>
<TextField
fullWidth
autoComplete="description"
type="text"
label="Description"
{...getFieldProps('description')}
error={Boolean(touched.description && errors.description)}
helperText={touched.description && errors.description}
/>
<FileUploader
initUrl={thumbnailUrl}
type={COURSE_THUMBNAIL_TYPE}
setUrl={setThumbnailUrl}
title="Upload thumbnail"
name="create-course-thumb"
/>
<LoadingButton
fullWidth
size="large"
type="submit"
variant="contained"
loading={isSubmitting}
>
Submit
</LoadingButton>
</Stack>
</Form>
</FormikProvider>
<Card />
</Container>
</Page>
);
}
Example #5
| Source File: Edit.js From course-manager with MIT License | 4 votes |
|
// ----------------------------------------------------------------------
export default function Edit() {
const navigate = useNavigate();
const { id } = useParams();
const [course, setCourse] = useState();
const [videos, setVideos] = useState([]);
const [isVideoModelOpen, setVideoModelOpen] = useState(false);
const [thumbnailUrl, setThumbnailUrl] = useState('');
useEffect(() => {
async function fetchCourse() {
const queryString = RequestQueryBuilder.create({
join: {
field: 'videos'
}
});
const course = await apis.course.findOne(id, queryString.query());
if (!course) navigate('/dashboard/courses', { replace: true });
formik.initialValues = {
title: course.title,
description: course.description
};
setCourse(course);
setVideos(course.videos);
setThumbnailUrl(course.thumbnailUrl);
}
fetchCourse();
}, []);
const CourseSchema = Yup.object().shape({
title: Yup.string().required('Full name is required'),
description: Yup.string().required('Username is required')
});
const formik = useFormik({
initialValues: course,
enableReinitialize: true,
validationSchema: CourseSchema,
onSubmit: async (values) => {
const data = {
...values,
thumbnailUrl
};
const updatedCourse = await apis.course.update(id, data);
if (!updatedCourse) {
return;
}
navigate('/dashboard/courses', { replace: true });
}
});
const { errors, touched, isSubmitting, handleSubmit, getFieldProps } = formik;
const closeVideoForm = (e, reason) => {
if (reason !== 'backdropClick') setVideoModelOpen(false);
};
const videoCreatedHandler = (newVideo) => {
setVideos([...videos, newVideo]);
};
return (
<Page title="List | Minimal-UI">
<Container>
<VideoCreateForm
open={isVideoModelOpen}
onClose={closeVideoForm}
onDataCreated={videoCreatedHandler}
/>
<Stack direction="row" alignItems="center" justifyContent="space-between" mb={5}>
<Typography variant="h4" gutterBottom>
Edit Course
</Typography>
</Stack>
{course && (
<FormikProvider value={formik}>
<Form autoComplete="off" noValidate onSubmit={handleSubmit}>
<Stack spacing={3}>
<TextField
fullWidth
autoComplete="title"
type="text"
label="Title"
{...getFieldProps('title')}
error={Boolean(touched.title && errors.title)}
helperText={touched.title && errors.title}
/>
<TextField
fullWidth
autoComplete="description"
type="text"
label="Description"
{...getFieldProps('description')}
error={Boolean(touched.description && errors.description)}
helperText={touched.description && errors.description}
/>
<FileUploader
initUrl={thumbnailUrl}
type={COURSE_THUMBNAIL_TYPE}
setUrl={setThumbnailUrl}
title="Upload thumbnail"
name="edit-course-thumb"
/>
<Stack direction="row" alignItems="center" justifyContent="space-between" mb={5}>
<Typography variant="h5" gutterBottom>
Videos
</Typography>
<Button
variant="contained"
onClick={() => setVideoModelOpen(true)}
startIcon={<Icon icon={plusFill} />}
>
Add video
</Button>
</Stack>
{videos && (
<Grid container spacing={3}>
{videos.map((video) => (
<Grid key={video.id} item xs={12} sm={6} md={3}>
<VideoCard video={video} />
</Grid>
))}
</Grid>
)}
<LoadingButton
fullWidth
size="large"
type="submit"
variant="contained"
loading={isSubmitting}
>
Submit
</LoadingButton>
</Stack>
</Form>
</FormikProvider>
)}
<Card />
</Container>
</Page>
);
}
Example #6
| Source File: Create.js From course-manager with MIT License | 4 votes |
|
// ----------------------------------------------------------------------
export default function Create() {
const navigate = useNavigate();
const [isAdmin, setIsAdmin] = useState(false);
const [isMod, setIsMod] = useState(false);
const [isSupporter, setIsSupporter] = useState(false);
const UserSchema = Yup.object().shape({
fullName: Yup.string().required('Full name is required'),
username: Yup.string().required('Username is required'),
email: Yup.string().email('Email must be a valid email address').required('Email is required')
});
const formik = useFormik({
initialValues: {
fullName: '',
username: '',
email: ''
},
validationSchema: UserSchema,
onSubmit: async (values) => {
const roles = [];
if (isAdmin) roles.push('ADMIN');
if (isSupporter) roles.push('SUPPORTER');
if (isMod) roles.push('MOD');
const newUser = await apis.user.create({
...values,
roles
});
console.log(`New user ${newUser.username}`);
navigate('/dashboard/user', { replace: true });
}
});
const handleChange = (event) => {
switch (event.target.name) {
case 'isAdmin':
setIsAdmin(event.target.checked);
if (event.target.checked) {
setIsMod(false);
setIsSupporter(false);
}
break;
case 'isMod':
setIsMod(event.target.checked);
break;
case 'isSupporter':
setIsSupporter(event.target.checked);
break;
default:
break;
}
};
const { errors, touched, isSubmitting, handleSubmit, getFieldProps } = formik;
return (
<Page title="List | Minimal-UI">
<Container>
<Stack direction="row" alignItems="center" justifyContent="space-between" mb={5}>
<Typography variant="h4" gutterBottom>
Edit User
</Typography>
<Button
variant="contained"
component={RouterLink}
to="#"
startIcon={<Icon icon={plusFill} />}
>
New List
</Button>
</Stack>
<FormikProvider value={formik}>
<Form autoComplete="off" noValidate onSubmit={handleSubmit}>
<Stack spacing={3}>
<TextField
fullWidth
autoComplete="username"
type="text"
label="Username"
{...getFieldProps('username')}
error={Boolean(touched.username && errors.username)}
helperText={touched.username && errors.username}
/>
<TextField
fullWidth
autoComplete="fullName"
type="text"
label="Full name"
{...getFieldProps('fullName')}
error={Boolean(touched.fullName && errors.fullName)}
helperText={touched.fullName && errors.fullName}
/>
<TextField
fullWidth
autoComplete="email"
type="email"
label="Email"
{...getFieldProps('email')}
error={Boolean(touched.email && errors.email)}
helperText={touched.email && errors.email}
/>
<FormControlLabel
control={<ODCheckbox checked={isAdmin} onChange={handleChange} name="isAdmin" />}
label="Is Admin"
/>
<FormGroup row>
<FormControlLabel
disabled={isAdmin}
control={<ODCheckbox checked={isMod} onChange={handleChange} name="isMod" />}
label="Is Mod"
/>
<FormControlLabel
disabled={isAdmin}
control={
<ODCheckbox checked={isSupporter} onChange={handleChange} name="isSupporter" />
}
label="Is Supporter"
/>
</FormGroup>
<LoadingButton
fullWidth
size="large"
type="submit"
variant="contained"
loading={isSubmitting}
>
Submit
</LoadingButton>
</Stack>
</Form>
</FormikProvider>
<Card />
</Container>
</Page>
);
}
