Skip to content

[Review] Refactor event listeners #148

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Mar 31, 2016
Merged

[Review] Refactor event listeners #148

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1983df4
more generic event handling for onSomething and handleSomething liste…
Mar 29, 2016
9a511bb
don't include non-events in createEventListeners method
Mar 29, 2016
4554761
Merge branch 'master' into refactor-event-listeners
nikgraf Mar 31, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
126 changes: 49 additions & 77 deletions draft-js-plugins-editor/src/Editor/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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) => {
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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 = {
Expand All @@ -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"
/>
);
Expand Down