From 8a10918272361efd0a9fd2f24437cc3f6411202e Mon Sep 17 00:00:00 2001
From: guaneec <guaneec@users.noreply.github.com>
Date: Wed, 23 Oct 2019 04:34:23 +0800
Subject: [PATCH] [@types/slate-react] Specify event types (#39113)

* Specify event types

* Remove redundant type
---
 types/slate-react/index.d.ts            | 40 ++++++++++++-------------
 types/slate-react/slate-react-tests.tsx | 24 ++++++++++++++-
 2 files changed, 43 insertions(+), 21 deletions(-)

diff --git a/types/slate-react/index.d.ts b/types/slate-react/index.d.ts
index 4c3aa6c332..ef144b0f40 100644
--- a/types/slate-react/index.d.ts
+++ b/types/slate-react/index.d.ts
@@ -99,7 +99,7 @@ export interface RenderInlineProps extends RenderNodeProps {
     node: Inline;
 }
 
-export type EventHook = (event: Event, editor: CoreEditor, next: () => any) => any;
+export type EventHook<T = Event> = (event: T, editor: CoreEditor, next: () => any) => any;
 
 export interface Plugin extends CorePlugin {
     decorateNode?: (node: SlateNode, editor: CoreEditor, next: () => any) => any;
@@ -118,25 +118,25 @@ export interface Plugin extends CorePlugin {
         next: () => any
     ) => any;
 
-    onBeforeInput?: EventHook;
-    onBlur?: EventHook;
-    onClick?: EventHook;
-    onCompositionEnd?: EventHook;
-    onCompositionStart?: EventHook;
-    onCopy?: EventHook;
-    onCut?: EventHook;
-    onDragEnd?: EventHook;
-    onDragEnter?: EventHook;
-    onDragExit?: EventHook;
-    onDragLeave?: EventHook;
-    onDragOver?: EventHook;
-    onDragStart?: EventHook;
-    onDrop?: EventHook;
-    onFocus?: EventHook;
-    onInput?: EventHook;
-    onKeyDown?: EventHook;
-    onPaste?: EventHook;
-    onSelect?: EventHook;
+    onBeforeInput?: EventHook<React.FormEvent>;
+    onBlur?: EventHook<React.FocusEvent>;
+    onClick?: EventHook<React.MouseEvent>;
+    onCompositionEnd?: EventHook<React.CompositionEvent>;
+    onCompositionStart?: EventHook<React.CompositionEvent>;
+    onCopy?: EventHook<React.ClipboardEvent>;
+    onCut?: EventHook<React.ClipboardEvent>;
+    onDragEnd?: EventHook<React.DragEvent>;
+    onDragEnter?: EventHook<React.DragEvent>;
+    onDragExit?: EventHook<React.DragEvent>;
+    onDragLeave?: EventHook<React.DragEvent>;
+    onDragOver?: EventHook<React.DragEvent>;
+    onDragStart?: EventHook<React.DragEvent>;
+    onDrop?: EventHook<React.DragEvent>;
+    onFocus?: EventHook<React.FocusEvent>;
+    onInput?: EventHook<React.FormEvent>;
+    onKeyDown?: EventHook<React.KeyboardEvent>;
+    onPaste?: EventHook<React.ClipboardEvent>;
+    onSelect?: EventHook<React.SyntheticEvent>;
 }
 
 export type PluginOrPlugins = Plugin | Plugins;
diff --git a/types/slate-react/slate-react-tests.tsx b/types/slate-react/slate-react-tests.tsx
index e947b58106..4005557817 100644
--- a/types/slate-react/slate-react-tests.tsx
+++ b/types/slate-react/slate-react-tests.tsx
@@ -32,8 +32,30 @@ class MyPlugin implements Plugin {
     }
 }
 
+const eventPlugin: Plugin = {
+    onBeforeInput: (event, editor, next) => {[event.nativeEvent, ]; },
+    onBlur: (event, editor, next) => {[event.nativeEvent, ]; },
+    onClick: (event, editor, next) => {[event.nativeEvent, event.clientX, ]; },
+    onCompositionEnd: (event, editor, next) => {[event.nativeEvent, event.data, ]; },
+    onCompositionStart: (event, editor, next) => {[event.nativeEvent, event.data, ]; },
+    onCopy: (event, editor, next) => {[event.nativeEvent, event.clipboardData, ]; },
+    onCut: (event, editor, next) => {[event.nativeEvent, event.clipboardData, ]; },
+    onDragEnd: (event, editor, next) => {[event.nativeEvent.dataTransfer, event.clientX, ]; },
+    onDragEnter: (event, editor, next) => {[event.nativeEvent.dataTransfer, event.clientX, ]; },
+    onDragExit: (event, editor, next) => {[event.nativeEvent.dataTransfer, event.clientX, ]; },
+    onDragLeave: (event, editor, next) => {[event.nativeEvent.dataTransfer, event.clientX, ]; },
+    onDragOver: (event, editor, next) => {[event.nativeEvent.dataTransfer, event.clientX, ]; },
+    onDragStart: (event, editor, next) => {[event.nativeEvent.dataTransfer, event.clientX, ]; },
+    onDrop: (event, editor, next) => {[event.nativeEvent.dataTransfer, event.clientX, ]; },
+    onFocus: (event, editor, next) => {[event.nativeEvent, ]; },
+    onInput: (event, editor, next) => {[event.nativeEvent, ]; },
+    onKeyDown: (event, editor, next) => {[event.nativeEvent, event.key, ]; },
+    onPaste: (event, editor, next) => {[event.nativeEvent, event.clipboardData, ]; },
+    onSelect: (event, editor, next) => {[event.nativeEvent, ]; },
+};
+
 const myPlugin = new MyPlugin();
-const plugins = [myPlugin, [myPlugin, [myPlugin]]];
+const plugins = [myPlugin, [myPlugin, [myPlugin]], eventPlugin];
 
 interface MyEditorState {
     value: Value;