@material-ui/core/#IconButton JavaScript Examples

The following examples show how to use @material-ui/core/#IconButton. 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: DeviceDialog.js    From budgie-stream with MIT License 6 votes vote down vote up
CustomDialogTitle = withStyles(styles)((props) => {
  const { children, classes, onRefresh, ...other } = props;
  return (
    <DialogTitle disableTypography className={classes.root} {...other}>
      <Typography className={classes.title} variant="h6">
        {children}
      </Typography>

      <IconButton
        aria-label="refresh"
        className={classes.closeButton}
        onClick={onRefresh}
      >
        <SyncIcon />
      </IconButton>
    </DialogTitle>
  );
})
Example #2
Source File: LoginForm.js    From to-view-list with MIT License 4 votes vote down vote up
LoginForm = () => {
  const [credentials, setCredentials] = useState({
    email: '',
    password: '',
  });
  const [error, setError] = useState(null);
  const [showPass, setShowPass] = useState(false);
  const [, authDispatch] = useAuthContext();
  const [{ isLoading }, entryDispatch] = useEntryContext();
  const classes = useRegisterLoginForm();
  const history = useHistory();
  const { email, password } = credentials;

  const handleOnChange = (e) => {
    setCredentials({ ...credentials, [e.target.name]: e.target.value });
  };

  const handleLogin = async (e) => {
    e.preventDefault();
    try {
      entryDispatch(toggleIsLoading());
      const user = await authService.login(credentials);
      entryService.setToken(user.token);
      authDispatch(loginUser(user));
      storageService.saveUser(user);
      entryDispatch(toggleIsLoading());

      setCredentials({
        email: '',
        password: '',
      });
      setError(null);
      history.push('/');
      notify(
        entryDispatch,
        `Welcome, ${user.displayName}! You're logged in.`,
        'success'
      );
    } catch (err) {
      entryDispatch(toggleIsLoading());

      if (err?.response?.data?.error) {
        setError({ message: err.response.data.error, severity: 'error' });
      } else {
        setError({ message: err.message, severity: 'error' });
      }
    }
  };

  return (
    <Paper className={classes.root}>
      <form onSubmit={handleLogin} className={classes.form}>
        <Typography variant="h4" color="primary" className={classes.formTitle}>
          Login to your account
        </Typography>
        <div className={classes.input}>
          <AlternateEmailIcon color="secondary" className={classes.inputIcon} />
          <TextField
            color="secondary"
            required
            type="email"
            label="Email"
            value={email}
            name="email"
            onChange={handleOnChange}
            fullWidth
          />
        </div>
        <div className={classes.input}>
          <LockIcon color="secondary" className={classes.inputIcon} />
          <TextField
            color="secondary"
            required
            type={showPass ? 'text' : 'password'}
            label="Password"
            value={password}
            name="password"
            onChange={handleOnChange}
            fullWidth
            InputProps={{
              endAdornment: (
                <InputAdornment position="end">
                  <IconButton onClick={() => setShowPass(!showPass)}>
                    {showPass ? <VisibilityOffIcon /> : <VisibilityIcon />}
                  </IconButton>
                </InputAdornment>
              ),
            }}
          />
        </div>

        <Button
          type="submit"
          variant="contained"
          color="primary"
          size="large"
          className={classes.submitButton}
          startIcon={<ExitToAppIcon />}
          disabled={isLoading}
        >
          {isLoading ? 'Logging in' : 'Login'}
        </Button>
        <Typography variant="body1" className={classes.bottomText}>
          Don't have an account?{' '}
          <Link component={RouterLink} to="/register">
            Register.
          </Link>
        </Typography>
        {error && (
          <AlertBox
            message={error.message}
            severity={error.severity}
            clearError={() => setError(null)}
            title={error.title}
          />
        )}
        <DemoCredsBox />
      </form>
    </Paper>
  );
}
Example #3
Source File: RegisterForm.js    From to-view-list with MIT License 4 votes vote down vote up
RegisterForm = () => {
  const [userDetails, setUserDetails] = useState({
    displayName: '',
    email: '',
    password: '',
  });
  const [confirmPassword, setConfirmPassword] = useState('');
  const [error, setError] = useState(null);
  const [showPass, setShowPass] = useState(false);
  const [showConfirmPass, setShowConfirmPass] = useState(false);
  const [, authDispatch] = useAuthContext();
  const [{ isLoading }, entryDispatch] = useEntryContext();
  const classes = useRegisterLoginForm();
  const history = useHistory();
  const { displayName, email, password } = userDetails;

  const handleOnChange = (e) => {
    setUserDetails({ ...userDetails, [e.target.name]: e.target.value });
  };

  const handleRegister = async (e) => {
    e.preventDefault();
    if (password !== confirmPassword) {
      return setError(`Confirm password failed! Both passwords need to match.`);
    }
    try {
      entryDispatch(toggleIsLoading());
      const user = await authService.register(userDetails);
      entryService.setToken(user.token);
      authDispatch(registerUser(user));
      storageService.saveUser(user);
      entryDispatch(toggleIsLoading());

      setUserDetails({
        displayName: '',
        email: '',
        password: '',
      });
      setConfirmPassword('');
      setError(null);
      history.push('/');
      notify(
        entryDispatch,
        `Welcome, ${user.displayName}! Your account has been registered.`,
        'success'
      );
    } catch (err) {
      entryDispatch(toggleIsLoading());

      if (err?.response?.data?.error) {
        setError(err.response.data.error);
      } else {
        setError(err.message);
      }
    }
  };

  return (
    <Paper className={classes.root}>
      <form onSubmit={handleRegister} className={classes.form}>
        <Typography variant="h4" color="primary" className={classes.formTitle}>
          Create an account
        </Typography>
        <div className={classes.input}>
          <PersonIcon color="secondary" className={classes.inputIcon} />
          <TextField
            color="secondary"
            required
            label="Display Name"
            value={displayName}
            name="displayName"
            onChange={handleOnChange}
            fullWidth
          />
        </div>
        <div className={classes.input}>
          <AlternateEmailIcon color="secondary" className={classes.inputIcon} />
          <TextField
            color="secondary"
            required
            type="email"
            label="Email"
            value={email}
            name="email"
            onChange={handleOnChange}
            fullWidth
          />
        </div>
        <div className={classes.input}>
          <LockIcon color="secondary" className={classes.inputIcon} />
          <TextField
            color="secondary"
            required
            type={showPass ? 'text' : 'password'}
            label="Password"
            value={password}
            name="password"
            onChange={handleOnChange}
            fullWidth
            InputProps={{
              endAdornment: (
                <InputAdornment position="end">
                  <IconButton onClick={() => setShowPass(!showPass)}>
                    {showPass ? <VisibilityOffIcon /> : <VisibilityIcon />}
                  </IconButton>
                </InputAdornment>
              ),
            }}
          />
        </div>
        <div className={classes.input}>
          <EnhancedEncryptionIcon
            color="secondary"
            className={classes.inputIcon}
          />
          <TextField
            color="secondary"
            required
            type={showConfirmPass ? 'text' : 'password'}
            label="Confirm Password"
            value={confirmPassword}
            name="confirmPassword"
            onChange={({ target }) => setConfirmPassword(target.value)}
            fullWidth
            InputProps={{
              endAdornment: (
                <InputAdornment position="end">
                  <IconButton
                    onClick={() => setShowConfirmPass(!showConfirmPass)}
                  >
                    {showConfirmPass ? (
                      <VisibilityOffIcon />
                    ) : (
                      <VisibilityIcon />
                    )}
                  </IconButton>
                </InputAdornment>
              ),
            }}
          />
        </div>
        <Button
          type="submit"
          variant="contained"
          color="primary"
          size="large"
          className={classes.submitButton}
          startIcon={<PersonAddIcon />}
          disabled={isLoading}
        >
          {isLoading ? 'Registering' : 'Register'}
        </Button>
        <Typography variant="body1" className={classes.bottomText}>
          Already have an account?{' '}
          <Link component={RouterLink} to="/login">
            Login.
          </Link>
        </Typography>
        {error && (
          <AlertBox
            message={error}
            severity="error"
            clearError={() => setError(null)}
          />
        )}
        <DemoCredsBox />
      </form>
    </Paper>
  );
}
Example #4
Source File: SpeechToText.js    From handReacting with Apache License 2.0 4 votes vote down vote up
function SpeechToText() {


    const classes = useStyles();
    const [open, setOpen] = useState(false);
    const [copy, setCopy] = useState(false)
    const [copied, setCopied] = useState(false)
  
    const handleClickOpen = () => {
      setOpen(true);
    };
  
    const handleClose = () => {
      setOpen(false);
    };

    const handleCopyClick = () => {
        setCopy(true);
      };

    const handleCopyClose = () => {
        setCopy(false);
      };

    const { transcript, interimTranscript, finalTranscript, resetTranscript, listening } = useSpeechRecognition();

    useEffect(() => {
        if (finalTranscript !== '') {
         console.log('Got final result:', finalTranscript);
        }
    }, [interimTranscript, finalTranscript]);

    if (!SpeechRecognition.browserSupportsSpeechRecognition()) {
        return null;
      }
     
    if (!SpeechRecognition.browserSupportsSpeechRecognition()) {
    console.log('Your browser does not support speech recognition software! Try Chrome desktop, maybe?');
    }
    const listenContinuously = () => {
    SpeechRecognition.startListening({
        continuous: true,
        language: 'en-GB',
    });
    };

    console.log(transcript);

    return (
        <div className="speechToText">
          <div className="textInfo2">
            <div className="textLeft2">
              {/* <img src={convert} alt="" /> */}
            </div>
            <div className="textRight2">
              <p>
                Introducing voice typing. <br/>
                Now you just have to speak and we will convert it into text for you!<br />
                Get started by clicking the button below.
              </p>
            </div>
          </div>
          <Button variant="contained" color="primary" onClick={handleClickOpen}>
            Voice Typing
          </Button>



            <Dialog fullScreen open={open} onClose={handleClose} TransitionComponent={Transition}>
            <AppBar className={classes.appBar}>
            <Toolbar>
                <Typography variant="h6" className={classes.title}>
                        Voice Typing
                </Typography>
                <IconButton edge="start" color="inherit" onClick={handleClose} aria-label="close">
                  <CloseIcon />
                </IconButton>
            </Toolbar>
            </AppBar>  


            <div className="convertVoice" >
                <div className="recorder">
                    {' '}
                    {listening ? <MicIcon /> : <MicOffIcon />}
                    <div className="buttonsContainer">
                        <Button type="button" onClick={listenContinuously}>Listen</Button>
                        <Button type="button" onClick={SpeechRecognition.stopListening}>Stop</Button>
                        <Button type="button" onClick={resetTranscript}>Clear</Button>
                    </div>
                </div>
                <div className="recodedText">
                    <Paper elevation={3} className="textPaper">
                            <CopyToClipboard text={transcript}
                                onCopy={() => setCopied(true)}>
                                    <IconButton aria-label="delete"  onClick={handleCopyClick}>
                                        <FileCopyIcon fontSize="large"/>
                                    </IconButton>
                            </CopyToClipboard>
                            <p>{transcript}</p>
                    </Paper>
                </div>
            </div>
            

             
                
            </Dialog>
            <Snackbar open={copy} autoHideDuration={6000} onClose={handleCopyClose}>
                <Alert onClose={handleCopyClose} severity="success" style={{backgroundColor: '#262626', color: '#ec4c4c'}}>
                Copied to Clipboard
                </Alert>
            </Snackbar>
            
        </div>
    )
}
Example #5
Source File: TesseractScan.js    From handReacting with Apache License 2.0 4 votes vote down vote up
function TesseractScan() {

    const classes = useStyles();
    const [open, setOpen] = useState(false);
    const [copy, setCopy] = useState(false)
    const [text, setText] = useState(true)
  
    const handleClickOpen = () => {
      setOpen(true);
    };
  
    const handleClose = () => {
      setOpen(false);
    };

    const handleCopyClick = () => {
        setCopy(true);
      };

    const handleCopyClose = () => {
        setCopy(false);
      };

    const [scanText, setScanText] = useState('Scanned Text Will Appear Here. Please be patient, it might take 1-2 mins')
    const [image, setImage] = useState(null)
    const [copied, setCopied] = useState(false)

    const imageUpload = (event) => {
        setImage(URL.createObjectURL(event.target.files[0]))
    }

    const ScanText = () => {
        const worker = createWorker({
            logger: m => console.log(m)
          });
          
          (async () => {
            await worker.load();
            await worker.loadLanguage('eng');
            await worker.initialize('eng');
            const { data: { text } } = await worker.recognize(image);
            setScanText(text)
            console.log(text);
            await worker.terminate();
          })();
    }

    

    return (
        <div className="tesseractScan">
          <div className="textInfo">
            <div className="textLeft">
              <img src={convert} alt="" />
            </div>
            <div className="textRight">
              <p>
                Too lazy to type in the text? <br/>
                Well, we have it covered for you. Now you can upload an image and extract the text from it. <br />
                Get started by clicking the button below.
              </p>
            </div>
          </div>
          <Button variant="contained" color="primary" onClick={handleClickOpen}>
            Extract Text From Image
          </Button>



            <Dialog fullScreen open={open} onClose={handleClose} TransitionComponent={Transition} >
            <AppBar className={classes.appBar}>
            <Toolbar>
                <Typography variant="h6" className={classes.title}>
                    Extract Text From Image
                </Typography>
                <IconButton edge="start" color="inherit" onClick={handleClose} aria-label="close">
                  <CloseIcon />
                </IconButton>
            </Toolbar>
            </AppBar>   
                
            <div className="scanContainer">
                <div className="image_left">

                  <img src={upload} alt="" style={{display: text ? 'block': 'none', width: '300px'}}/>

                    <label htmlFor="fileUpload" className="custom-file-upload">
                        <input id="fileUpload" type="file" onChange={imageUpload} accept="image/*" name="image" 
                            onClick={() => setText(false)}/>
                        Upload Image
                    </label>
                    
                    <img src={image} alt="" />

                    <div className="uploadText" style={{display: text ? 'block': 'none'}}>
                        <h3 className="helpText"><RiQuillPenLine/> Upload image that contain any text</h3>
                        <h3 className="helpText"><RiQuillPenLine/> Click the SCAN Button to extract the text</h3>
                        <h3 className="helpText"><RiQuillPenLine/> This might take a while depending on the amount of text</h3>
                        <h3 className="helpText"><RiQuillPenLine/> Click the copy icon <FileCopyIcon /> to copy the text to clipboard</h3>
                    </div>
                    
                    
                </div>

              <div className="buttonContainer">
                <Button variant="contained" onClick={ScanText}>Scan</Button>
              </div>
                

                <div className="image_right">
                <Paper elevation={3} className="textPaper">
                    <CopyToClipboard text={scanText}
                        onCopy={() => setCopied(true)}>
                            <IconButton aria-label="delete"  onClick={handleCopyClick}>
                                <FileCopyIcon fontSize="large"/>
                            </IconButton>
                    </CopyToClipboard>
                    <p>{scanText}</p>
                </Paper>
                    
                </div>
            </div>
            </Dialog>
            <Snackbar open={copy} autoHideDuration={6000} onClose={handleCopyClose}>
                <Alert onClose={handleCopyClose} severity="success" style={{backgroundColor: '#262626', color: '#ec4c4c'}}>
                Copied to Clipboard
                </Alert>
            </Snackbar>
            
        </div>
    )
}