@material-ui/core#PaperProps TypeScript Examples

export default function ConfirmationDialog({
  open,
  onClose,
  title,
  message,
  onPositiveAction,
  onNegativeAction,
  positionText = 'Yes',
  negativeText = 'No',
}: Props): ReactElement {
  const classes = useStyles();
  return (
    <Dialog
      open={open}
      onClose={onClose}
      aria-labelledby="alert-dialog-title"
      aria-describedby="alert-dialog-description"
      PaperProps={{ className: classes.paper }}
      PaperComponent={PaperComponent}
    >
      <DialogTitle id="alert-dialog-title">{title}</DialogTitle>
      <DialogContent>
        <DialogContentText id="alert-dialog-description">{message}</DialogContentText>
      </DialogContent>
      <DialogActions>
        <Button onClick={onPositiveAction} color="primary">
          {positionText}
        </Button>
        <Button onClick={onNegativeAction} color="primary" autoFocus>
          {negativeText}
        </Button>
      </DialogActions>
    </Dialog>
  );
}

export default function BlogPreview({ blog, open, onClose }: Props): ReactElement {
  const classes = useStyles();
  return (
    <Dialog
      fullScreen
      open={open}
      TransitionComponent={Transition}
      PaperProps={{ className: classes.paper }}
      PaperComponent={PaperComponent}
    >
      <AppBar position="fixed" color="secondary">
        <Toolbar>
          <IconButton edge="start" color="inherit" onClick={onClose} aria-label="close">
            <CloseIcon />
          </IconButton>
          <Typography variant="h6" className={classes.title}>
            {blog.title}
          </Typography>
          <Button color="inherit" onClick={onClose}>
            Done
          </Button>
        </Toolbar>
      </AppBar>
      <Grid container justify="center">
        <Grid item xs={12} sm={12} md={8} className={classes.blogContent}>
          {blog?.draftText && <Markdown text={blog.draftText} />}
        </Grid>
      </Grid>
    </Dialog>
  );
}

PaperComponent = (props: PaperProps) => <Paper {...props} />

PaperComponent = (props: PaperProps) => <Paper {...props} />

PaperComponent = (props: PaperProps) => <Paper {...props} />

PaperComponent = (props: PaperProps) => <Paper {...props} />

PaperComponent = (props: PaperProps) => <Paper {...props} />

export default function LoginDialog({
  open,
  onClose,
  onSignup,
}: {
  open: boolean;
  onClose: () => void;
  onSignup: () => void;
}): ReactElement | null {
  const { isLoggingIn } = useStateSelector(({ authState }) => authState);

  const classes = useStyles();
  const dispatch = useDispatch();

  const defaultFormState = {
    email: '',
    password: '',
    isEmailError: false,
    emailError: '',
    isPasswordError: false,
    passwordError: '',
  };

  const [credentials, setCredentials] = useState(defaultFormState);

  const handleCredentialChange = (name: string) => (e: ChangeEvent<HTMLInputElement>) => {
    e.preventDefault(); // to prevent from loosing focus
    setCredentials({
      ...credentials,
      isEmailError: false,
      emailError: '',
      isPasswordError: false,
      passwordError: '',
      [name]: e.target.value,
    });
  };

  const handleBasicLogin = () => {
    const validations = { ...credentials };
    validations.email = validations.email.trim();
    validations.password = validations.password.trim();
    let error = false;

    if (validations.email.length === 0) {
      validations.emailError = 'Email should not be empty';
      validations.isEmailError = true;
      error = true;
    }

    if (!validateEmail(validations.email)) {
      validations.emailError = 'Email is not valid';
      validations.isEmailError = true;
      error = true;
    }

    if (validations.password.length < 6) {
      validations.passwordError = 'Password not valid';
      validations.isPasswordError = true;
      error = true;
    }

    if (error) {
      setCredentials(validations);
    } else {
      dispatch(removeMessage.action());
      dispatch(
        basicLogin({
          email: credentials.email,
          password: credentials.password,
        }),
      );
    }
  };

  return (
    <Dialog
      onClose={onClose}
      open={open}
      PaperProps={{ className: classes.paper }}
      PaperComponent={PaperComponent}
      maxWidth="xs"
    >
      {isLoggingIn && <LinearProgress color="secondary" />}
      <DialogTitle disableTypography={true}>
        {isLoggingIn ? (
          <Typography component="p" variant="subtitle1">
            Logging please wait...
          </Typography>
        ) : (
          <div>
            <Box display="flex">
              <Box flexGrow={1}>
                <Typography component="span" variant="h6">
                  Login Form
                </Typography>
              </Box>
              <Box>
                <Button
                  color="primary"
                  variant="outlined"
                  onClick={() => {
                    onSignup();
                    setCredentials({ ...defaultFormState });
                  }}
                >
                  SIGNUP
                </Button>
              </Box>
            </Box>
          </div>
        )}
      </DialogTitle>
      <Divider />
      <DialogContent>
        <form className={classes.form} noValidate autoComplete="off">
          <TextField
            required={true}
            error={credentials.isEmailError}
            margin="normal"
            variant="outlined"
            id="email"
            label="Email"
            value={credentials.email}
            type="email"
            autoComplete="email"
            rows={1}
            autoFocus={true}
            disabled={isLoggingIn}
            helperText={credentials.emailError}
            onChange={handleCredentialChange('email')}
            fullWidth
          />
          <TextField
            required={true}
            error={credentials.isPasswordError}
            margin="normal"
            variant="outlined"
            id="password"
            label="Password"
            value={credentials.password}
            type="password"
            autoComplete="current-password"
            rows={1}
            disabled={isLoggingIn}
            helperText={credentials.passwordError}
            onChange={handleCredentialChange('password')}
            fullWidth
          />
        </form>
      </DialogContent>
      <DialogActions>
        <Button onClick={handleBasicLogin} color="primary">
          LOGIN
        </Button>
        <Button
          onClick={() => {
            onClose();
            setCredentials({ ...defaultFormState });
          }}
          color="primary"
        >
          CLOSE
        </Button>
      </DialogActions>
    </Dialog>
  );
}

export default function SignupDialog({
  open,
  onClose,
  onLogin,
}: {
  open: boolean;
  onClose: () => void;
  onLogin: () => void;
}): ReactElement | null {
  const { isLoggingIn } = useStateSelector(({ authState }) => authState);

  const classes = useStyles();
  const dispatch = useDispatch();

  const defaultFormState = {
    name: '',
    email: '',
    password: '',
    profilePicUrl: '',
    isNameError: false,
    isProfilePicUrlError: false,
    isEmailError: false,
    isPasswordError: false,
    nameError: '',
    emailError: '',
    passwordError: '',
    profilePicUrlError: '',
  };

  const [credentials, setCredentials] = useState(defaultFormState);

  const handleCredentialChange = (name: string) => (e: ChangeEvent<HTMLInputElement>) => {
    e.preventDefault(); // to prevent from loosing focus
    setCredentials({
      ...credentials,
      isNameError: false,
      isProfilePicUrlError: false,
      isEmailError: false,
      isPasswordError: false,
      nameError: '',
      emailError: '',
      passwordError: '',
      profilePicUrlError: '',
      [name]: e.target.value,
    });
  };

  const handleBasicSignup = () => {
    const validations = { ...credentials };
    validations.name = validations.name.trim();
    validations.email = validations.email.trim();
    validations.password = validations.password.trim();
    validations.profilePicUrl = validations.profilePicUrl.trim();
    let error = false;

    if (validations.name.trim().length === 0) {
      validations.nameError = 'Name should not be empty';
      validations.isNameError = true;
      error = true;
    }

    if (validations.name.trim().length > 100) {
      validations.nameError = 'Name is too large';
      validations.isNameError = true;
      error = true;
    }

    if (validations.email.trim().length === 0) {
      validations.emailError = 'Email should not be empty';
      validations.isEmailError = true;
      error = true;
    }

    if (!validateEmail(validations.email)) {
      validations.emailError = 'Email is not valid';
      validations.isEmailError = true;
      error = true;
    }

    if (validations.password.trim().length < 6) {
      validations.passwordError = 'Password not valid';
      validations.isPasswordError = true;
      error = true;
    }

    if (validations.profilePicUrl.trim().length > 0 && !validateUrl(validations.profilePicUrl)) {
      validations.profilePicUrlError = 'URL is not valid';
      validations.isProfilePicUrlError = true;
      error = true;
    }

    if (error) {
      setCredentials(validations);
    } else {
      dispatch(removeMessage.action());
      const singupBody: SignupRequestBody = {
        email: credentials.email,
        password: credentials.password,
        name: credentials.name,
      };
      if (validations.profilePicUrl) singupBody.profilePicUrl = validations.profilePicUrl;
      dispatch(basicSignup(singupBody));
    }
  };

  return (
    <Dialog
      onClose={onClose}
      open={open}
      PaperProps={{ className: classes.paper }}
      PaperComponent={PaperComponent}
      maxWidth="xs"
    >
      {isLoggingIn && <LinearProgress color="secondary" />}
      <DialogTitle disableTypography={true}>
        {isLoggingIn ? (
          <Typography component="p" variant="subtitle1">
            Creating account please wait...
          </Typography>
        ) : (
          <div>
            <Box display="flex">
              <Box flexGrow={1}>
                <Typography component="span" variant="h6">
                  Signup Form
                </Typography>
              </Box>
              <Box>
                <Button
                  color="primary"
                  variant="outlined"
                  onClick={() => {
                    onLogin();
                    setCredentials({ ...defaultFormState });
                  }}
                >
                  LOGIN
                </Button>
              </Box>
            </Box>
          </div>
        )}
      </DialogTitle>
      <Divider />
      <DialogContent>
        <form className={classes.form} noValidate autoComplete="off">
          <TextField
            required={true}
            error={credentials.isNameError}
            margin="normal"
            variant="outlined"
            id="name"
            label="Name"
            value={credentials.name}
            type="text"
            autoComplete="text"
            rows={1}
            autoFocus={true}
            disabled={isLoggingIn}
            helperText={credentials.nameError}
            onChange={handleCredentialChange('name')}
            fullWidth
          />
          <TextField
            required={true}
            error={credentials.isEmailError}
            margin="normal"
            variant="outlined"
            id="email"
            label="Email"
            value={credentials.email}
            type="email"
            autoComplete="email"
            rows={1}
            disabled={isLoggingIn}
            helperText={credentials.emailError}
            onChange={handleCredentialChange('email')}
            fullWidth
          />
          <TextField
            required={true}
            error={credentials.isPasswordError}
            margin="normal"
            variant="outlined"
            id="password"
            label="Password"
            value={credentials.password}
            type="password"
            autoComplete="current-password"
            rows={1}
            disabled={isLoggingIn}
            helperText={credentials.passwordError}
            onChange={handleCredentialChange('password')}
            fullWidth
          />
          <TextField
            required={false}
            error={credentials.isProfilePicUrlError}
            margin="normal"
            variant="outlined"
            id="profilePicUrl"
            label="(Optional) Profile Pic URL"
            value={credentials.profilePicUrl}
            type="text"
            autoComplete="text"
            rows={1}
            disabled={isLoggingIn}
            helperText={credentials.profilePicUrlError}
            onChange={handleCredentialChange('profilePicUrl')}
            fullWidth
          />
        </form>
      </DialogContent>
      <DialogActions>
        <Button onClick={handleBasicSignup} color="primary">
          SIGNUP
        </Button>
        <Button
          onClick={() => {
            onClose();
            setCredentials({ ...defaultFormState });
          }}
          color="primary"
        >
          CLOSE
        </Button>
      </DialogActions>
    </Dialog>
  );
}

export default function BlogDetailsForm({
  blog,
  localState,
  setLocalState,
  onSubmit,
  onSave,
  onCreate,
}: Props): ReactElement {
  const classes = useStyles();

  const handleBlogDetailChange = (name: string) => (event: ChangeEvent<HTMLInputElement>) => {
    event.preventDefault(); // to prevent from loosing focus
    let value = event.target.value;
    if (name == 'blogUrl') {
      value = value.replace(/\s/g, '-');
      value = value.replace(/\//g, '-');
      value = value.replace(/\./g, '-');
      value = value.toLowerCase();
    }

    setLocalState({
      ...localState,
      [name]: value,
      isTitleError: false,
      isDescriptionError: false,
      isImgUrlError: false,
      isBlogUrlError: false,
      isTagsError: false,
      isAllDataSentToServer: false,
    });
  };

  const handleBlogDetailFormSubmit = (event: MouseEvent<HTMLElement>) => {
    event.preventDefault();
    if (validateBlogDetailForm()) {
      if (!blog?._id) onCreate();
      else onSave();
    }
  };

  const validateBlogDetailForm = () => {
    const newstate = {
      ...localState,
      isTitleError: false,
      isDescriptionError: false,
      isBlogUrlError: false,
      isImgUrlError: false,
      isTagsError: false,
    };

    if (!newstate.title) newstate.isTitleError = true;
    if (!newstate.description) newstate.isDescriptionError = true;
    if (!newstate.blogUrl) newstate.isBlogUrlError = true;
    if (!validateUrl(newstate.imgUrl)) newstate.isImgUrlError = true;
    if (newstate.tags.length === 0) newstate.isTagsError = true;

    const isError =
      newstate.isTitleError ||
      newstate.isDescriptionError ||
      newstate.isBlogUrlError ||
      newstate.isTagsError ||
      newstate.isImgUrlError;

    setLocalState(newstate);
    return !isError;
  };

  return (
    <Dialog
      className={classes.root}
      open={localState.isBlogDetailsFormToShow}
      onClose={() =>
        setLocalState({
          ...localState,
          isBlogDetailsFormToShow: false,
          isForSubmission: false,
        })
      }
      PaperProps={{ className: classes.paper }}
      PaperComponent={PaperComponent}
      fullWidth={true}
      maxWidth="sm"
      scroll="body"
      aria-labelledby="form-dialog-title"
      aria-describedby="form-dialog-description"
    >
      <DialogTitle id="form-dialog-title">Blog Details</DialogTitle>
      <DialogContent dividers={true}>
        <form>
          <TextField
            required={true}
            error={localState.isTitleError}
            margin="normal"
            variant="outlined"
            id="title"
            label="Title"
            value={localState.title}
            type="text"
            rows={1}
            onChange={handleBlogDetailChange('title')}
            fullWidth
          />
          <TextField
            required={true}
            error={localState.isDescriptionError}
            margin="normal"
            variant="outlined"
            multiline
            id="description"
            label="Description"
            value={localState.description}
            type="text"
            rows={3}
            rowsMax={5}
            onChange={handleBlogDetailChange('description')}
            fullWidth
          />
          <TextField
            required={true}
            error={localState.isBlogUrlError}
            margin="normal"
            variant="outlined"
            id="blogUrl"
            label="URL Endpoint"
            value={localState.blogUrl}
            type="text"
            rows={1}
            onChange={handleBlogDetailChange('blogUrl')}
            fullWidth
          />
          <TextField
            required={true}
            error={localState.isImgUrlError}
            margin="normal"
            variant="outlined"
            id="imgUrl"
            label="Image URL"
            value={localState.imgUrl}
            type="text"
            rows={1}
            onChange={handleBlogDetailChange('imgUrl')}
            fullWidth
          />
          <ChipInput
            value={localState.tags}
            error={localState.isTagsError}
            fullWidth={true}
            placeholder="Add tags for the blog"
            helperText="Press enter key or use comma separator to create a tag"
            newChipKeys={['Enter', ',']}
            classes={{
              root: classes.editTagsField,
              chip: classes.tag,
            }}
            onAdd={(chip: string) => {
              const values = [...localState.tags];
              values.push(chip.toUpperCase());
              setLocalState({ ...localState, tags: values });
            }}
            onDelete={(chip: string) => {
              const values = localState.tags.filter((tag) => tag !== chip);
              setLocalState({ ...localState, tags: values });
            }}
          />
        </form>
      </DialogContent>
      <DialogActions>
        {blog?._id && localState.isForSubmission && localState.isAllDataSentToServer && (
          <Button onClick={onSubmit} color="primary">
            SUBMIT
          </Button>
        )}
        {!localState.isAllDataSentToServer && (
          <Button onClick={handleBlogDetailFormSubmit} color="primary">
            {!blog?._id ? 'CREATE' : 'UPDATE'}
          </Button>
        )}
        <Button
          onClick={() =>
            setLocalState({
              ...localState,
              isBlogDetailsFormToShow: false,
              isForSubmission: false,
            })
          }
          color="primary"
        >
          CLOSE
        </Button>
      </DialogActions>
    </Dialog>
  );
}