[@types/slate-react] Specify event types (#39113)

* Specify event types

* Remove redundant type
This commit is contained in:
guaneec 2019-10-23 04:34:23 +08:00 committed by Wesley Wigham
parent 1db75c0e2e
commit 8a10918272
2 changed files with 43 additions and 21 deletions

View File

@ -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;

View File

@ -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;