From 8dd14f37d6d9b74b5fc63ac38672c691b0a1ade2 Mon Sep 17 00:00:00 2001 From: Matt Fehskens Date: Mon, 1 Jul 2019 15:31:23 -0400 Subject: [PATCH 1/2] Allow events to be replaced --- src/factory.js | 27 ++++++++++++++++++++++----- 1 file changed, 22 insertions(+), 5 deletions(-) diff --git a/src/factory.js b/src/factory.js index ac51840..a1f5dc3 100644 --- a/src/factory.js +++ b/src/factory.js @@ -207,19 +207,36 @@ export default function plotComponentFactory(Plotly) { syncEventHandlers() { eventNames.forEach(eventName => { const prop = this.props['on' + eventName]; - const hasHandler = Boolean(this.handlers[eventName]); + const handler = this.handlers[eventName]; + const hasHandler = Boolean(handler); if (prop && !hasHandler) { - this.handlers[eventName] = prop; - this.el.on('plotly_' + eventName.toLowerCase(), this.handlers[eventName]); + this.addEventHandler(eventName, prop); } else if (!prop && hasHandler) { // Needs to be removed: - this.el.removeListener('plotly_' + eventName.toLowerCase(), this.handlers[eventName]); - delete this.handlers[eventName]; + this.removeHandler(eventName); + } else if (prop && hasHandler && prop !== handler) { + // replace the handler + this.removeHandler(eventName); + this.addEventHandler(eventName, prop); } }); } + addEventHandler(eventName, prop) { + this.handlers[eventName] = prop; + this.el.on(this.getPlotlyEventName(eventName), this.handlers[eventName]); + } + + removeEventHandler(eventName) { + this.el.removeListener(this.getPlotlyEventName(eventName), this.handlers[eventName]); + delete this.handlers[eventName]; + } + + getPlotlyEventName(eventName) { + return 'plotly_' + eventName.toLowerCase(); + } + render() { return (
Date: Mon, 1 Jul 2019 16:54:22 -0400 Subject: [PATCH 2/2] Added correct name of remove handler method - Added test for checking that a handler was added --- src/__tests__/react-plotly.test.js | 15 +++++++++++++++ src/factory.js | 4 ++-- 2 files changed, 17 insertions(+), 2 deletions(-) diff --git a/src/__tests__/react-plotly.test.js b/src/__tests__/react-plotly.test.js index d1b7646..11de80d 100644 --- a/src/__tests__/react-plotly.test.js +++ b/src/__tests__/react-plotly.test.js @@ -164,5 +164,20 @@ describe('', () => { .catch(err => done.fail(err)); }); }); + + describe('manging event handlers', () => { + test('should add an event handler when one does not already exist', (done) => { + const onRelayout = () => {}; + + createPlot({onRelayout}).then((plot) => { + const { handlers } = plot.instance(); + + expect(plot.prop('onRelayout')).toBe(onRelayout); + expect(handlers.Relayout).toBe(onRelayout); + + done(); + }); + }); + }); }); }); diff --git a/src/factory.js b/src/factory.js index a1f5dc3..2bfb798 100644 --- a/src/factory.js +++ b/src/factory.js @@ -214,10 +214,10 @@ export default function plotComponentFactory(Plotly) { this.addEventHandler(eventName, prop); } else if (!prop && hasHandler) { // Needs to be removed: - this.removeHandler(eventName); + this.removeEventHandler(eventName); } else if (prop && hasHandler && prop !== handler) { // replace the handler - this.removeHandler(eventName); + this.removeEventHandler(eventName); this.addEventHandler(eventName, prop); } });