Merge pull request draft-js-plugins#148 from draft-js-plugins/refactor-event-listeners

nikgraf · nikgraf · commit 0be663a26c33 · 2016-03-31T12:34:27.000-07:00
[Review] Refactor event listeners
diff --git a/draft-js-plugins-editor/src/Editor/index.js b/draft-js-plugins-editor/src/Editor/index.js
@@ -9,6 +9,7 @@ import {
   getDefaultKeyBinding,
   KeyBindingUtil,
 } from 'draft-js';
+
 import createCompositeDecorator from '../utils/createCompositeDecorator';
 import moveSelectionToEnd from '../utils/moveSelectionToEnd';
 import moveToEndOfSelectedBlock from '../modifiers/moveToEndOfSelectedBlock';
@@ -60,54 +61,6 @@ export default class PluginEditor extends Component {
     }
   };
 
-  onDownArrow = (keyboardEvent) => {
-    // TODO allow to provide a custom onDownArrow
-
-    this.plugins.map((plugin) => {
-      if (plugin.onDownArrow) {
-        plugin.onDownArrow(keyboardEvent);
-      }
-
-      return undefined;
-    });
-  };
-
-  onUpArrow = (keyboardEvent) => {
-    // TODO allow to provide a custom onUpArrow
-
-    this.plugins.map((plugin) => {
-      if (plugin.onUpArrow) {
-        plugin.onUpArrow(keyboardEvent);
-      }
-
-      return undefined;
-    });
-  };
-
-  onEscape = (keyboardEvent) => {
-    // TODO allow to provide a custom onEscape
-
-    this.plugins.map((plugin) => {
-      if (plugin.onEscape) {
-        plugin.onEscape(keyboardEvent);
-      }
-
-      return undefined;
-    });
-  };
-
-  onTab = (keyboardEvent) => {
-    // TODO allow to provide a custom onTab
-
-    this.plugins.map((plugin) => {
-      if (plugin.onTab) {
-        plugin.onTab(keyboardEvent);
-      }
-
-      return undefined;
-    });
-  };
-
   getEditorState = () => this.editorState;
 
   handleKeyCommand = (command) => {
@@ -144,25 +97,6 @@ export default class PluginEditor extends Component {
     return preventDefaultBehaviour === true;
   };
 
-  handleReturn = (keyboardEvent) => {
-    // TODO optimize to break after the first one
-    const preventDefaultBehaviour = this.plugins
-      .map((plugin) => {
-        if (plugin.handleReturn) {
-          const handled = plugin.handleReturn(keyboardEvent);
-          if (handled === true) {
-            return handled;
-          }
-        }
-
-        return undefined;
-      })
-      .find((result) => result === true);
-
-    // TODO allow to provide a custom handleReturn
-    return preventDefaultBehaviour === true;
-  };
-
   keyBindingFn = (keyboardEvent) => {
     // TODO optimize to break after the first one
     let command = this.plugins
@@ -289,8 +223,51 @@ export default class PluginEditor extends Component {
     this.refs.editor.focus();
   };
 
+  createHandleListener = (name) => (event) => (
+    this.plugins
+      .filter((plug) => plug[name])
+      .map((plugin) => plugin[name](event))
+      .find((result) => result === true) === true
+  );
+
+  createOnListener = (name) => (event) => (
+    this.plugins
+      .filter(plug => typeof plug[name] === 'function')
+      .forEach(plug => plug[name](event))
+  );
+
+  createEventListeners = () => {
+    const listeners = {
+      onChange: this.onChange,
+      handleKeyCommand: this.handleKeyCommand,
+      keyBindingFn: this.keyBindingFn,
+      handleReturn: this.handleReturn,
+    };
+
+    const keepHandlers = ['onChange', 'handleKeyCommand'];
+
+    // bind random onListeners and handleListeners
+    this.plugins.forEach((plug) => {
+      Object.keys(plug).forEach((attrName) => {
+        if (attrName.indexOf('on') === 0 && !keepHandlers.includes(attrName)) {
+          listeners[attrName] = this.createOnListener(attrName);
+        }
+
+        if (attrName.indexOf('handle') === 0 && !keepHandlers.includes(attrName)) {
+          listeners[attrName] = this.createHandleListener(attrName);
+        }
+      });
+    });
+
+    return listeners;
+  };
+
   render() {
     let pluginProps = {};
+
+    // This puts pluginProps and the object inside getEditorProps
+    // on the Editor component (main use case is for aria props right now)
+    // Last plugin wins right now (not ideal)
     this.plugins.forEach((plugin) => {
       if (plugin.getEditorProps) {
         pluginProps = {
@@ -300,22 +277,17 @@ export default class PluginEditor extends Component {
       }
     });
 
+    const listeners = this.createEventListeners();
+
     return (
       <Editor
         {...pluginProps}
         {...this.props}
-        onChange={ this.onChange }
+        {...listeners}
         handleDroppedFiles={ this.handleDroppedFiles }
         handleDrop={ this.handleDrop }
-        editorState={ this.editorState }
-        blockRendererFn={ this.blockRendererFn }
-        handleKeyCommand={ this.handleKeyCommand }
-        keyBindingFn={ this.keyBindingFn }
-        onDownArrow={ this.onDownArrow }
-        onTab={ this.onTab }
-        onUpArrow={ this.onUpArrow }
-        onEscape={ this.onEscape }
-        handleReturn={ this.handleReturn }
+        editorState={this.editorState}
+        blockRendererFn={this.blockRendererFn}
         ref="editor"
       />
     );
