From 52885ebe5085eee2cfdbc61a3640f9a313ce2d70 Mon Sep 17 00:00:00 2001 From: Ben Verbeken Date: Tue, 8 Jan 2019 11:34:11 +0100 Subject: [PATCH 1/4] added support for --- src/main/SeatsioDesigner.js | 8 +++++ src/main/index.js | 3 +- src/test/SeatsioDesigner.test.js | 55 ++++++++++++++++++++++++++++++++ 3 files changed, 65 insertions(+), 1 deletion(-) create mode 100644 src/main/SeatsioDesigner.js create mode 100644 src/test/SeatsioDesigner.test.js diff --git a/src/main/SeatsioDesigner.js b/src/main/SeatsioDesigner.js new file mode 100644 index 0000000..755dec6 --- /dev/null +++ b/src/main/SeatsioDesigner.js @@ -0,0 +1,8 @@ +import AbstractChart from "./AbstractChart"; + +export default class SeatsioDesigner extends AbstractChart { + + createChart(seatsio, config) { + return new seatsio.SeatingChartDesigner(config); + } +} \ No newline at end of file diff --git a/src/main/index.js b/src/main/index.js index d30228e..7796c41 100644 --- a/src/main/index.js +++ b/src/main/index.js @@ -1,2 +1,3 @@ export {default as SeatsioSeatingChart} from './SeatsioSeatingChart'; -export {default as SeatsioEventManager} from './SeatsioEventManager'; \ No newline at end of file +export {default as SeatsioEventManager} from './SeatsioEventManager'; +export {default as SeatsioDesigner} from './SeatsioDesigner'; \ No newline at end of file diff --git a/src/test/SeatsioDesigner.test.js b/src/test/SeatsioDesigner.test.js new file mode 100644 index 0000000..0a7decc --- /dev/null +++ b/src/test/SeatsioDesigner.test.js @@ -0,0 +1,55 @@ +import React from "react"; +import Enzyme, {mount} from "enzyme"; +import Adapter from 'enzyme-adapter-react-16'; +import {SeatsioDesigner} from "../main/index"; +import AbstractChart from "../main/AbstractChart"; + +Enzyme.configure({adapter: new Adapter()}); + +describe("SeatsioDesigner", () => { + + let seatsioMock = { + + SeatingChartDesigner: class { + + constructor(props) { + this.props = props; + } + + render() { + return this; + } + } + }; + + AbstractChart.prototype.loadSeatsio = () => { + return Promise.resolve(seatsioMock); + }; + + it('renders the designer', () => { + let chart = mount(( + + )); + + expect(chart.find('div#chart').length).toEqual(1); + }); + + it('passes parameters onto the designer', () => { + return new Promise(resolve => { + mount(( + { + expect(chart.props).toEqual({ + divId: 'someID', + designerKey: 'aDesignerKey' + }); + resolve(); + }}/> + )); + }); + }); + +}); \ No newline at end of file From d9aad1238bf3adcc85c14a6a392f34092318ebc4 Mon Sep 17 00:00:00 2001 From: Ben Verbeken Date: Tue, 8 Jan 2019 11:34:18 +0100 Subject: [PATCH 2/4] updated README --- README.md | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/README.md b/README.md index dabe8fc..b1866fb 100644 --- a/README.md +++ b/README.md @@ -103,3 +103,27 @@ Other parameters are supported as well. For a full list, check https://docs.seat ``` Other parameters are supported as well. For a full list, check https://docs.seats.io/docs/configuring-event-manager + + + +## Seating Chart Designer + +To embed the seating chart designer for the purpose of creating a new chart, do this: + +```jsx + +``` + +To be able to edit a chart from an embedded designer, you need to specify the chart to load: + +```jsx + +``` + + +Other parameters are supported as well. For a full list, check https://docs.seats.io/docs/embedded-designer-configuration From 59be6dd7d430f09bf4fcea2726110c37b7c7b04a Mon Sep 17 00:00:00 2001 From: Ben Verbeken Date: Tue, 8 Jan 2019 12:36:42 +0100 Subject: [PATCH 3/4] renamed AbstractChart to Embeddable --- src/main/{AbstractChart.js => Embeddable.js} | 4 ++-- src/main/SeatsioDesigner.js | 4 ++-- src/main/SeatsioEventManager.js | 4 ++-- src/main/SeatsioSeatingChart.js | 4 ++-- src/test/SeatsioDesigner.test.js | 4 ++-- src/test/SeatsioEventManager.test.js | 4 ++-- src/test/SeatsioSeatingChart.test.js | 4 ++-- 7 files changed, 14 insertions(+), 14 deletions(-) rename src/main/{AbstractChart.js => Embeddable.js} (92%) diff --git a/src/main/AbstractChart.js b/src/main/Embeddable.js similarity index 92% rename from src/main/AbstractChart.js rename to src/main/Embeddable.js index 8489f6f..0909036 100644 --- a/src/main/AbstractChart.js +++ b/src/main/Embeddable.js @@ -2,7 +2,7 @@ import React from 'react'; -export default class AbstractChart extends React.Component { +export default class Embeddable extends React.Component { async componentDidMount() { let seatsio = await this.getSeatsio(); @@ -43,6 +43,6 @@ export default class AbstractChart extends React.Component { } } -AbstractChart.defaultProps = { +Embeddable.defaultProps = { id: 'chart' }; \ No newline at end of file diff --git a/src/main/SeatsioDesigner.js b/src/main/SeatsioDesigner.js index 755dec6..ad4b5be 100644 --- a/src/main/SeatsioDesigner.js +++ b/src/main/SeatsioDesigner.js @@ -1,6 +1,6 @@ -import AbstractChart from "./AbstractChart"; +import Embeddable from "./Embeddable"; -export default class SeatsioDesigner extends AbstractChart { +export default class SeatsioDesigner extends Embeddable { createChart(seatsio, config) { return new seatsio.SeatingChartDesigner(config); diff --git a/src/main/SeatsioEventManager.js b/src/main/SeatsioEventManager.js index fa87f71..928157d 100644 --- a/src/main/SeatsioEventManager.js +++ b/src/main/SeatsioEventManager.js @@ -1,6 +1,6 @@ -import AbstractChart from "./AbstractChart"; +import Embeddable from "./Embeddable"; -export default class SeatsioEventManager extends AbstractChart { +export default class SeatsioEventManager extends Embeddable { createChart(seatsio, config) { return new seatsio.EventManager(config); diff --git a/src/main/SeatsioSeatingChart.js b/src/main/SeatsioSeatingChart.js index ace9bd0..70a6e63 100644 --- a/src/main/SeatsioSeatingChart.js +++ b/src/main/SeatsioSeatingChart.js @@ -1,6 +1,6 @@ -import AbstractChart from "./AbstractChart"; +import Embeddable from "./Embeddable"; -export default class SeatsioSeatingChart extends AbstractChart { +export default class SeatsioSeatingChart extends Embeddable { createChart(seatsio, config) { return new seatsio.SeatingChart(config); diff --git a/src/test/SeatsioDesigner.test.js b/src/test/SeatsioDesigner.test.js index 0a7decc..2c9aa23 100644 --- a/src/test/SeatsioDesigner.test.js +++ b/src/test/SeatsioDesigner.test.js @@ -2,7 +2,7 @@ import React from "react"; import Enzyme, {mount} from "enzyme"; import Adapter from 'enzyme-adapter-react-16'; import {SeatsioDesigner} from "../main/index"; -import AbstractChart from "../main/AbstractChart"; +import Embeddable from "../main/Embeddable"; Enzyme.configure({adapter: new Adapter()}); @@ -22,7 +22,7 @@ describe("SeatsioDesigner", () => { } }; - AbstractChart.prototype.loadSeatsio = () => { + Embeddable.prototype.loadSeatsio = () => { return Promise.resolve(seatsioMock); }; diff --git a/src/test/SeatsioEventManager.test.js b/src/test/SeatsioEventManager.test.js index 45fdd6e..56f1246 100644 --- a/src/test/SeatsioEventManager.test.js +++ b/src/test/SeatsioEventManager.test.js @@ -2,7 +2,7 @@ import React from "react"; import Enzyme, {mount} from "enzyme"; import Adapter from 'enzyme-adapter-react-16'; import {SeatsioEventManager} from "../main/index"; -import AbstractChart from "../main/AbstractChart"; +import Embeddable from "../main/Embeddable"; Enzyme.configure({adapter: new Adapter()}); @@ -22,7 +22,7 @@ describe("SeatsioEventManager", () => { } }; - AbstractChart.prototype.loadSeatsio = () => { + Embeddable.prototype.loadSeatsio = () => { return Promise.resolve(seatsioMock); }; diff --git a/src/test/SeatsioSeatingChart.test.js b/src/test/SeatsioSeatingChart.test.js index d9d2215..eaf653e 100644 --- a/src/test/SeatsioSeatingChart.test.js +++ b/src/test/SeatsioSeatingChart.test.js @@ -2,7 +2,7 @@ import React from "react"; import Enzyme, {mount} from "enzyme"; import Adapter from 'enzyme-adapter-react-16'; import {SeatsioSeatingChart} from "../main/index"; -import AbstractChart from "../main/AbstractChart"; +import Embeddable from "../main/Embeddable"; Enzyme.configure({adapter: new Adapter()}); @@ -22,7 +22,7 @@ describe("SeatsioSeatingChart", () => { } }; - AbstractChart.prototype.loadSeatsio = () => { + Embeddable.prototype.loadSeatsio = () => { return Promise.resolve(seatsioMock); }; From bea0375d83ad02b387989f276e37b16790a6dd85 Mon Sep 17 00:00:00 2001 From: Ben Verbeken Date: Tue, 8 Jan 2019 13:17:31 +0100 Subject: [PATCH 4/4] renamed onChartCreated to onRenderStarted --- README.md | 8 ++++---- src/main/Embeddable.js | 4 ++-- src/test/SeatsioDesigner.test.js | 2 +- src/test/SeatsioEventManager.test.js | 2 +- src/test/SeatsioSeatingChart.test.js | 6 +++--- 5 files changed, 11 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index b1866fb..cd0d727 100644 --- a/README.md +++ b/README.md @@ -41,17 +41,17 @@ Custom chart div class: > ``` -`onChartCreated` is fired when the chart has started loading, but hasn't rendered yet: +`onRenderStarted` is fired when the chart has started loading, but hasn't rendered yet: ```jsx { ... }} + onRenderStarted={chart => { ... }} > ``` -If you store the chart object that's passed to `onChartCreated`, you can access the properties defined on the wrapped `seatsio.SeatingChart`: +If you store the chart object that's passed to `onRenderStarted`, you can access the properties defined on the wrapped `seatsio.SeatingChart`: ```jsx let chart = null; @@ -59,7 +59,7 @@ let chart = null; { chart = createdChart }} + onRenderStarted={createdChart => { chart = createdChart }} > ... diff --git a/src/main/Embeddable.js b/src/main/Embeddable.js index 0909036..b63c931 100644 --- a/src/main/Embeddable.js +++ b/src/main/Embeddable.js @@ -6,11 +6,11 @@ export default class Embeddable extends React.Component { async componentDidMount() { let seatsio = await this.getSeatsio(); - let {id, className, onChartCreated, ...config} = this.props; + let {id, className, onRenderStarted, ...config} = this.props; config.divId = this.props.id; let chart = this.createChart(seatsio, config).render(); this.chart = chart; - if (this.props.onChartCreated) this.props.onChartCreated(chart); + if (this.props.onRenderStarted) this.props.onRenderStarted(chart); } componentWillUnmount() { diff --git a/src/test/SeatsioDesigner.test.js b/src/test/SeatsioDesigner.test.js index 2c9aa23..47a7d31 100644 --- a/src/test/SeatsioDesigner.test.js +++ b/src/test/SeatsioDesigner.test.js @@ -41,7 +41,7 @@ describe("SeatsioDesigner", () => { id="someID" className="someClassName" designerKey="aDesignerKey" - onChartCreated={chart => { + onRenderStarted={chart => { expect(chart.props).toEqual({ divId: 'someID', designerKey: 'aDesignerKey' diff --git a/src/test/SeatsioEventManager.test.js b/src/test/SeatsioEventManager.test.js index 56f1246..b177cd6 100644 --- a/src/test/SeatsioEventManager.test.js +++ b/src/test/SeatsioEventManager.test.js @@ -41,7 +41,7 @@ describe("SeatsioEventManager", () => { id="someID" className="someClassName" publicKey="aPublicKey" - onChartCreated={chart => { + onRenderStarted={chart => { expect(chart.props).toEqual({ divId: 'someID', publicKey: 'aPublicKey' diff --git a/src/test/SeatsioSeatingChart.test.js b/src/test/SeatsioSeatingChart.test.js index eaf653e..e08f100 100644 --- a/src/test/SeatsioSeatingChart.test.js +++ b/src/test/SeatsioSeatingChart.test.js @@ -57,7 +57,7 @@ describe("SeatsioSeatingChart", () => { id="someID" className="someClassName" publicKey="aPublicKey" - onChartCreated={chart => { + onRenderStarted={chart => { expect(chart.props).toEqual({ divId: 'someID', publicKey: 'aPublicKey' @@ -75,7 +75,7 @@ describe("SeatsioSeatingChart", () => { return new Promise(resolve => { let chart = mount(( { + onRenderStarted={() => { chart.unmount(); expect(mockedDestroy.mock.calls.length).toEqual(1); @@ -93,7 +93,7 @@ describe("SeatsioSeatingChart", () => { return new Promise(resolve => { let chartComponent = mount(( { + onRenderStarted={chart => { chart.state = 'DESTROYED'; chartComponent.unmount();