react#SyntheticEvent TypeScript Examples

FileSystemContext = createContext<{
  fs: BrowserState,
  modal:(title: string, message: string | JSX.Element, okLabel: string, okFn: () => void, cancelLabel?: string, cancelFn?: () => void) => void,
  dispatchInitWorkspace:() => Promise<void>,
  dispatchFetchDirectory:(path: string) => Promise<void>,
  dispatchAddInputField:(path: string, type: 'file' | 'folder') => Promise<void>,
  dispatchRemoveInputField:(path: string) => Promise<void>,
  dispatchCreateWorkspace: (workspaceName: string, workspaceTemplateName: string) => Promise<void>,
  toast: (toasterMsg: string) => void,
  dispatchFetchWorkspaceDirectory: (path: string) => Promise<void>,
  dispatchSwitchToWorkspace: (name: string) => Promise<void>,
  dispatchRenameWorkspace: (oldName: string, workspaceName: string) => Promise<void>,
  dispatchDeleteWorkspace: (workspaceName: string) => Promise<void>,
  dispatchPublishToGist: (path?: string, type?: string) => Promise<void>,
  dispatchUploadFile: (target?: SyntheticEvent, targetFolder?: string) => Promise<void>,
  dispatchCreateNewFile: (path: string, rootDir: string) => Promise<void>,
  dispatchSetFocusElement: (elements: { key: string, type: 'file' | 'folder' | 'gist' }[]) => Promise<void>,
  dispatchCreateNewFolder: (path: string, rootDir: string) => Promise<void>,
  dispatchDeletePath: (path: string[]) => Promise<void>,
  dispatchRenamePath: (oldPath: string, newPath: string) => Promise<void>,
  dispatchCopyFile: (src: string, dest: string) => Promise<void>,
  dispatchCopyFolder: (src: string, dest: string) => Promise<void>,
  dispatchRunScript: (path: string) => Promise<void>,
  dispatchEmitContextMenuEvent: (cmd: customAction) => Promise<void>,
  dispatchHandleClickFile: (path: string, type: 'file' | 'folder' | 'gist') => Promise<void>
  dispatchHandleExpandPath: (paths: string[]) => Promise<void>,
  dispatchHandleDownloadFiles: () => Promise<void>,
  dispatchHandleRestoreBackup: () => Promise<void>
    }>(null)

updateFormFromSubmit = (
  event: SyntheticEvent,
  form: FormInputs,
  FormInputClass: any,
): FormInputs => {
  event.preventDefault()

  const updatedForm: FormInputs = JSON.parse(JSON.stringify(form))

  let formInputs: any = new FormInputClass() as any

  for (var key in updatedForm) {
    updatedForm[key].blurred = true
    if (updatedForm.hasOwnProperty(key)) {
      formInputs[key] = updatedForm[key].value
    }
  }

  validateSync(formInputs).forEach((error: ValidationError) => {
    const firstConstraint = error && error.constraints
    if (firstConstraint && updatedForm[error.property])
      updatedForm[error.property].error = firstConstraint[Object.keys(firstConstraint)[0]]
  })

  return updatedForm
}

function CodeExamples({ examples }: CodeExamplesProps) {
  const [language, setLanguage] = useState(examples[0].lang)
  
  const onTabChange = useCallback((e: SyntheticEvent<Element, Event>, language: string) => {
    setLanguage(language)
  }, [setLanguage])

  return (
    <TabContext value={language}>
      <TabList onChange={onTabChange} sx={{ pl: 0 }}>
        {examples.map(({ lang }) => (
          <Tab
            label={humanLangMap[lang] ?? lang}
            value={lang}
          />
        ))}
      </TabList>
      <Divider />
      {examples.map(({ lang, code }) => (
        <TabPanel value={lang} sx={{ p: 0 }}>
          <SyntaxHighlighter 
            language={langMap[lang] ?? lang} 
          >
            {code}
          </SyntaxHighlighter>
        </TabPanel>
      ))}
    </TabContext>
  )
}

useMessageForm = (client: MessengerClient) => {
  const [message, setMessage] = useState<string>("");

  const onChange = useCallback(
    (event: SyntheticEvent) => {
      const target = event.target as HTMLInputElement;
      setMessage(target.value);
    },
    [setMessage]
  );

  const onSubmit = useCallback(
    (event: SyntheticEvent) => {
      event.preventDefault();
      const req = new MessageRequest();
      req.setMessage(message);
      client.createMessage(req, null, res => console.log(res));
      setMessage("");
    },
    [client, message]
  );

  return {
    message,
    onChange,
    onSubmit
  };
}

export default function SensitivitySelector({ dispatch, disabled, readOnly, sensitivity }: SensitivitySelectorProps) {
  const handleChange = useCallback(
    (e: SyntheticEvent<HTMLElement, Event>, newValue = '50') => {
      let int = parseInt(newValue, 10);
      if (isNaN(int)) {
        int = 1;
      } else {
        int = 100 - int;
      }
      dispatch({
        type: 'updateSensitivity',
        sensitivity: int,
      });
    },
    [dispatch],
  );
  return (
    <SpinButton
      label="Mouse movement sensitivity (1-99)"
      className={classnames(readOnly && 'no-pointer-events')}
      labelPosition={Position.top}
      disabled={disabled}
      onChange={readOnly ? undefined : handleChange}
      value={disabled ? 'N/A' : (100 - sensitivity).toString()}
      min={1}
      max={99}
    />
  );
}

DropdownMenuItem = ({
  icon,
  importedIcon,
  label,
  labelParams,
  nextScreen,
  nextScreenParams,
  navigateToWithParams,
}: PropsFromRedux) => {
  const handleClickOnMenuItem = (event: SyntheticEvent) => {
    event.stopPropagation();
    navigateToWithParams(nextScreen, nextScreenParams);
  };

  return (
    <div
      className="dropdown-menu-item"
      onClick={(event) => handleClickOnMenuItem(event)}>
      {importedIcon && <img className="icon" src={`/assets/images/${icon}`} />}
      {!importedIcon && (
        <Icon
          name={icon}
          type={IconType.STROKED}
          additionalClassName="icon"></Icon>
      )}
      <div className="label">{chrome.i18n.getMessage(label, labelParams)}</div>
    </div>
  );
}

TextInput: VFC = () => {
  const inputRef = useRef<HTMLInputElement | null>(null);
  const handleClick = (e: SyntheticEvent): void => {
    e.preventDefault();
    // eslint-disable-next-line no-alert
    if (inputRef.current) alert(inputRef.current.value);
  };
  useEffect(() => {
    if (inputRef.current) inputRef.current.focus();
  }, []);

  return (
    <>
      <input ref={inputRef} type="text" />
      <button onClick={handleClick} type="button">
        Click
      </button>
    </>
  );
}

ErrorFooter = ({
  onCancel,
  onRetry,
}: {
  onCancel: (event: SyntheticEvent) => void
  onRetry: (event: SyntheticEvent) => void
}) => (
  <>
    <ButtonWithMargin onClick={onCancel} variant="contained">
      Cancel
    </ButtonWithMargin>
    <Button color="primary" onClick={onRetry} variant="contained">
      Retry
    </Button>
  </>
)

ContinueFooter = ({
  continueButtonDisabled,
  onContinue,
}: {
  continueButtonDisabled: boolean
  onContinue: (event: SyntheticEvent) => void
}) => (
  <Button
    color="primary"
    disabled={continueButtonDisabled}
    onClick={onContinue}
    variant="contained"
    data-testid="continue-btn"
  >
    Continue
  </Button>
)

gracefulClose = (e?: SyntheticEvent<HTMLDivElement, MouseEvent>): void => {
    if (this.isMouseClicked !== true) {
      return;
    }

    e && e.preventDefault();
    this.isAboutToClose = true;
    this.isClosedGracefully = true;
    this.forceUpdate();

    setTimeout(() => {
      this.props.onClose && this.props.onClose();
      this.isAboutToClose = false;
      this.isClosedGracefully = true;
    }, timeout);
  };

onClickButton = (event: SyntheticEvent) => {
    if (event) {
      event.preventDefault();
    }

    this.setState({
      showConfirm: true,
    });

    if (this.props.onClick) {
      this.props.onClick();
    }
  };

onClickCancel = (event: SyntheticEvent) => {
    if (event) {
      event.preventDefault();
    }
    this.setState({
      showConfirm: false,
    });
    if (this.props.onCancel) {
      this.props.onCancel();
    }
  };

onSubmit = (e: SyntheticEvent) => {
    e.preventDefault();

    const { newPassword, valid } = this.state;
    if (valid) {
      this.props.onSubmit(newPassword);
    } else {
      appEvents.emit(AppEvents.alertWarning, ['New passwords do not match']);
    }
  };

VerticalScroll: React.FC<{
  scroll: number;
  height: number;
  scrollHeight: number;
  topOffset: number;
  rtl: boolean;
  onScroll: (event: SyntheticEvent<HTMLDivElement>) => void;
}> = ({ scroll, height, scrollHeight, topOffset, rtl, onScroll }) => {
  const scrollRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (scrollRef.current) {
      scrollRef.current.scrollTop = scroll;
    }
  }, [scroll]);

  return (
    <div
      style={{
        height,
        marginTop: topOffset,
        marginLeft: rtl ? '' : '-8px',
      }}
      className={'erda-gantt-vertical-scroll'}
      onScroll={onScroll}
      ref={scrollRef}
    >
      <div style={{ height: scrollHeight, width: 1 }} />
    </div>
  );
}

createResetHandler = (ctrl: Ctrl, field: PasswordFieldEnum) => (
  event: SyntheticEvent<HTMLInputElement>
) => {
  event.preventDefault();
  // Reset also normal plain text password to remove it and only save it in secureJsonData.
  ctrl.current[field] = null;
  ctrl.current.secureJsonFields[field] = false;
  ctrl.current.secureJsonData = ctrl.current.secureJsonData || {};
  ctrl.current.secureJsonData[field] = '';
}

onInputChangeHandler = (key: keyof OpenTsdbOptions, value: Props['value'], onChange: Props['onChange']) => (
  event: SyntheticEvent<HTMLInputElement>
) => {
  onChange({
    ...value,
    jsonData: {
      ...value.jsonData,
      [key]: event.currentTarget.value,
    },
  });
}

export default function Snackbar({ message, onClose, variant }: PropSnackbar): ReactElement {
  const [open, setOpen] = useState(true);

  const handleClose: (event: SyntheticEvent<any>, reason: SnackbarCloseReason | null) => void = (
    event,
    reason,
  ) => {
    if (reason === 'clickaway') return;
    setOpen(false);
    if (onClose) onClose();
  };

  return (
    <div>
      <MaterialSnackbar
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'left',
        }}
        open={open}
        autoHideDuration={6000}
        onClose={handleClose}
      >
        <SnackbarContentWrapper
          onClose={(event) => handleClose(event, null)}
          variant={variant === undefined ? 'success' : variant}
          message={message}
        />
      </MaterialSnackbar>
    </div>
  );
}

getValueFromEventItem = (eventItem: SyntheticEvent<HTMLInputElement> | SelectableValue<string>) => {
  if (!eventItem) {
    return '';
  }

  if (eventItem.hasOwnProperty('currentTarget')) {
    return eventItem.currentTarget.value;
  }

  return (eventItem as SelectableValue<string>).value;
}

onChangeHandler = (key: keyof PromOptions, value: Props['value'], onChange: Props['onChange']) => (
  eventItem: SyntheticEvent<HTMLInputElement> | SelectableValue<string>
) => {
  onChange({
    ...value,
    jsonData: {
      ...value.jsonData,
      [key]: getValueFromEventItem(eventItem),
    },
  });
}

BaseImage: React.FC<ImageProps> = props => {
	const fallback = '/img/default.png'
	const [ webpUnavailable, setWebpUnavailable ] = useState<boolean>()
	
	useEffect(()=> {
		setWebpUnavailable(localStorage.webp === 'false')
	}, [])
	
	return <img
		alt={props.alt ?? 'Image'}
		loading='lazy'
		className={props.className}
		src={
			webpUnavailable && props.fallbackSrc || props.src
		}
		onError={(e: SyntheticEvent<HTMLImageElement, ImageEvent>)=> {
			if(webpUnavailable) {
				(e.target as ImageTarget).onerror = (event) => {
					// All Fails
					(event.target as ImageTarget).onerror = () => { Logger.warn('FALLBACK IMAGE LOAD FAIL') }
					(event.target as ImageTarget).src = fallback
					
				}
			}
			else if (props.fallbackSrc) {
				(e.target as ImageTarget).onerror = (event) => {
					// All Fails
					(event.target as ImageTarget).onerror = () => { Logger.warn('FALLBACK IMAGE LOAD FAIL') }
					(event.target as ImageTarget).src = fallback
				}
				// Webp Load Fail
				(e.target as ImageTarget).src = props.fallbackSrc
				if(!supportsWebP()) localStorage.setItem('webp', 'false')
			}
			else {
				(e.target as ImageTarget).src = fallback
			}
		}}
	/>
}

onSkip = (e: SyntheticEvent) => {
    this.props.onSkip();
  };

onSubmit = (e: SyntheticEvent) => {
    e.preventDefault();

    const { user, password, email } = this.state;
    if (this.state.valid) {
      this.props.onSubmit({ user, password, email });
    }
  };

WalletDialog: FC<WalletDialogProps> = ({
    title = 'Select your wallet',
    featuredWallets = 3,
    onClose,
    ...props
}) => {
    const { wallets, select } = useWallet();
    const { open, setOpen } = useWalletDialog();
    const [expanded, setExpanded] = useState(false);

    const [featured, more] = useMemo(
        () => [wallets.slice(0, featuredWallets), wallets.slice(featuredWallets)],
        [wallets, featuredWallets]
    );

    const handleClose = useCallback(
        (event: SyntheticEvent, reason?: 'backdropClick' | 'escapeKeyDown') => {
            if (onClose) onClose(event, reason!);
            if (!event.defaultPrevented) setOpen(false);
        },
        [setOpen, onClose]
    );

    const handleWalletClick = useCallback(
        (event: SyntheticEvent, walletName: WalletName) => {
            select(walletName);
            handleClose(event);
        },
        [select, handleClose]
    );

    const handleExpandClick = useCallback(() => setExpanded(!expanded), [setExpanded, expanded]);

    return (
        <RootDialog open={open} onClose={handleClose} {...props}>
            <DialogTitle>
                {title}
                <IconButton onClick={handleClose} size="large">
                    <CloseIcon />
                </IconButton>
            </DialogTitle>
            <DialogContent>
                <List>
                    {featured.map((wallet) => (
                        <WalletListItem
                            key={wallet.adapter.name}
                            onClick={(event) => handleWalletClick(event, wallet.adapter.name)}
                            wallet={wallet}
                        />
                    ))}
                    {more.length ? (
                        <>
                            <Collapse in={expanded} timeout="auto" unmountOnExit>
                                <List>
                                    {more.map((wallet) => (
                                        <WalletListItem
                                            key={wallet.adapter.name}
                                            onClick={(event) => handleWalletClick(event, wallet.adapter.name)}
                                            wallet={wallet}
                                        />
                                    ))}
                                </List>
                            </Collapse>
                            <ListItem>
                                <Button onClick={handleExpandClick}>
                                    {expanded ? 'Less' : 'More'} options
                                    {expanded ? <CollapseIcon /> : <ExpandIcon />}
                                </Button>
                            </ListItem>
                        </>
                    ) : null}
                </List>
            </DialogContent>
        </RootDialog>
    );
}

createChangeHandler = (ctrl: any, field: PasswordFieldEnum) => (
  event: SyntheticEvent<HTMLInputElement>
) => {
  ctrl.current.secureJsonData = ctrl.current.secureJsonData || {};
  ctrl.current.secureJsonData[field] = event.currentTarget.value;
}

ResetPasswordView = ({ resetPasswordCallback, loading }: ResetPasswordViewProps) => {
  const [form, setForm] = useState<FormInputs>({
    solution: { value: '' },
    newPassword: { value: '' },
  })

  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    const updatedForm = updateFormFromChange(e, form, ResetPasswordInputs)
    setForm(updatedForm)
  }

  const handleBlur = (e: ChangeEvent<HTMLInputElement>) => {
    const updatedForm = updateFormFromBlur(e, form)
    setForm(updatedForm)
  }

  const handleSubmit = (event: SyntheticEvent) => {
    const updatedForm = updateFormFromSubmit(event, form, ResetPasswordInputs)

    if (!updatedForm.newPassword.error && !updatedForm.solution.error)
      resetPasswordCallback({
        newPassword: updatedForm.newPassword.value,
        solution: updatedForm.solution.value,
      })
    else setForm(updatedForm)
  }

  return (
    <ResetPasswordStyled>
      <ResetPasswordTitle>
        <h1>Reset Password</h1>
      </ResetPasswordTitle>
      <ResetPasswordCard>
        <form onSubmit={handleSubmit}>
          <Input
            icon="check-shield"
            name="solution"
            placeholder="Captcha from email"
            type="text"
            onChange={handleChange}
            value={form.solution.value}
            onBlur={handleBlur}
            inputStatus={getInputStatus(form.solution)}
            errorMessage={getErrorMessage(form.solution)}
          />
          <Input
            icon="password"
            name="newPassword"
            placeholder="New password"
            type="password"
            onChange={handleChange}
            value={form.newPassword.value}
            onBlur={handleBlur}
            inputStatus={getInputStatus(form.newPassword)}
            errorMessage={getErrorMessage(form.newPassword)}
          />
          <InputSpacer />
          <Button type="submit" text="Submit" icon="login" loading={loading} />
        </form>
      </ResetPasswordCard>
    </ResetPasswordStyled>
  )
}

LoginView = ({ loginCallback, loading }: LoginViewProps) => {
  const [form, setForm] = useState<FormInputs>({
    usernameOrEmail: { value: '' },
    password: { value: '' },
  })

  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    const updatedForm = updateFormFromChange(e, form, LoginInputs)
    setForm(updatedForm)
  }

  const handleBlur = (e: ChangeEvent<HTMLInputElement>) => {
    const updatedForm = updateFormFromBlur(e, form)
    setForm(updatedForm)
  }

  const handleSubmit = (event: SyntheticEvent) => {
    const updatedForm = updateFormFromSubmit(event, form, LoginInputs)

    if (!updatedForm.usernameOrEmail.error && !updatedForm.password.error)
      loginCallback({
        usernameOrEmail: updatedForm.usernameOrEmail.value,
        password: updatedForm.password.value,
      })
    else setForm(updatedForm)
  }

  return (
    <LoginStyled>
      <LoginTitle>
        <h1>Login</h1>
      </LoginTitle>
      <LoginCard>
        <form onSubmit={handleSubmit}>
          <Input
            icon="user"
            name="usernameOrEmail"
            placeholder="Username or Email"
            type="text"
            onChange={handleChange}
            value={form.usernameOrEmail.value}
            onBlur={handleBlur}
            inputStatus={getInputStatus(form.usernameOrEmail)}
            errorMessage={getErrorMessage(form.usernameOrEmail)}
          />
          <Input
            icon="password"
            name="password"
            placeholder="Password"
            type="password"
            onChange={handleChange}
            value={form.password.value}
            onBlur={handleBlur}
            inputStatus={getInputStatus(form.password)}
            errorMessage={getErrorMessage(form.password)}
          />
          <InputSpacer />
          <Button type="submit" text="Login" icon="login" loading={loading} />
        </form>
      </LoginCard>
      <LoginSignUp>
        <Link to="/sign-up">Or sign up now!</Link>
        <Link to="/forgot-password">Forgot Password?</Link>
      </LoginSignUp>
    </LoginStyled>
  )
}

ForgotPasswordView = ({ forgotPasswordCallback, loading }: ForgotPasswordViewProps) => {
  const [form, setForm] = useState<FormInputs>({
    usernameOrEmail: { value: '' },
  })

  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    const updatedForm = updateFormFromChange(e, form, ForgotPasswordInputs)
    setForm(updatedForm)
  }

  const handleBlur = (e: ChangeEvent<HTMLInputElement>) => {
    const updatedForm = updateFormFromBlur(e, form)
    setForm(updatedForm)
  }

  const handleSubmit = (event: SyntheticEvent) => {
    const updatedForm = updateFormFromSubmit(event, form, ForgotPasswordInputs)

    if (!updatedForm.usernameOrEmail.error)
      forgotPasswordCallback({
        usernameOrEmail: updatedForm.usernameOrEmail.value,
      })
    else setForm(updatedForm)
  }

  return (
    <ForgotPasswordStyled>
      <ForgotPasswordTitle>
        <h1>Forgot Password</h1>
      </ForgotPasswordTitle>
      <ForgotPasswordCard>
        <form onSubmit={handleSubmit}>
          <Input
            icon="user"
            name="usernameOrEmail"
            placeholder="Username or Email"
            type="text"
            onChange={handleChange}
            value={form.usernameOrEmail.value}
            onBlur={handleBlur}
            inputStatus={getInputStatus(form.usernameOrEmail)}
            errorMessage={getErrorMessage(form.usernameOrEmail)}
          />
          <InputSpacer />
          <Button type="submit" text="Submit" icon="forgotPassword" loading={loading} />
        </form>
      </ForgotPasswordCard>
    </ForgotPasswordStyled>
  )
}

function GenerateCodePage() {
  const { language } = useParams<{ language: string }>()
  const history = useHistory()

  const onTabChange = useCallback((e: SyntheticEvent<Element, Event>, language: string) => {
    history.replace(language)
  }, [history])

  return (
    <Box sx={{ py: 2, overflow: 'hidden scroll', flexGrow: 1 }}>
      <Container maxWidth="lg">
        <Typography variant="h4" component="h1" gutterBottom>
          Generate Code
        </Typography>
        <Paper>
          <TabContext value={language}>
            <TabList onChange={onTabChange}>
              <Tab label="C++" value="cpp" />
              <Tab label="Rust" value="rs" />
              <Tab label="C# Enum" value="cs" />
              <Tab label="SHV.NET" value="shvdn" />
              <Tab label="RPH" value="rph" />
            </TabList>
            <Divider />
            <TabPanel value="cpp">
              <CPlusPlus />
            </TabPanel>
            <TabPanel value="rs">
              <Rust />
            </TabPanel>
            <TabPanel value="cs">
              <CSharpEnum />
            </TabPanel>
            <TabPanel value="shvdn">
              Soon&trade;
            </TabPanel>
            <TabPanel value="rph">
              Soon&trade;
            </TabPanel>
          </TabContext>
        </Paper>
      </Container>
    </Box>
  )
}

Info = ({ version }: PageProps) => {
  const menuItems = [
    {
      name: 'Report a bug',
      url: 'https://github.com/lucide-icons/lucide/issues'
    },
    {
      name: 'Contribute an icon',
      url: 'https://github.com/lucide-icons/lucide/blob/master/CONTRIBUTING.md'
    },
    {
      name: 'Website',
      url: 'https://lucide.dev'
    },
    {
      name: 'Repository',
      url: 'https://github.com/lucide-icons/lucide'
    },
    {
      name: 'License',
      url: 'https://lucide.dev/license'
    },
    {
      name: 'Community Page',
      url: 'https://www.figma.com/community/plugin/939567362549682242/Lucide-Icons'
    },
    {
      name: 'Supported Frameworks',
      url: 'https://lucide.dev/packages'
    }
  ]

  const onClick = (url: string) => (event: SyntheticEvent) => {
    event.preventDefault()

    window.open(url,'_blank')
  }

  return (
    <div className="info-page">
      <img src="https://lucide.dev/logo-text.svg" alt="Lucide Logo" className="lucide-logo"/>
      <p className='version'>
        v{version}
      </p>
      <section className="link-list">
        {
          menuItems.map(({ name, url }) => (
            <a href={url} key={name} aria-label={name} className="info-link" onClick={onClick(url)}>
              {name}
            </a>
          ))
        }
      </section>
    </div>
  )
}