Merge pull request #1 from seatsio/add-designer-support

Add designer support
seatsio · Jan 8, 2019 · a34f381 · a34f381
2 parents 2790196 + bea0375
commit a34f381
Show file tree

Hide file tree

Showing 9 changed files with 109 additions and 21 deletions.
diff --git a/README.md b/README.md
@@ -41,25 +41,25 @@ 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
 <SeatsioSeatingChart
     publicKey="<yourPublicKey>"
     event="<yourEventKey>"
-    onChartCreated={chart => { ... }}
+    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;
 
 <SeatsioSeatingChart
     publicKey="<yourPublicKey>"
     event="<yourEventKey>"
-    onChartCreated={createdChart => { chart = createdChart }}
+    onRenderStarted={createdChart => { chart = createdChart }}
 >
 
 ...
@@ -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
+<SeatsioDesigner
+    designerKey="<yourDesignerKey>"    
+>
+```
+
+To be able to edit a chart from an embedded designer, you need to specify the chart to load:
+
+```jsx
+<SeatsioDesigner
+    designerKey="<yourDesignerKey>"
+    chartKey="<yourChartKey>"    
+>
+```
+
+
+Other parameters are supported as well. For a full list, check https://docs.seats.io/docs/embedded-designer-configuration
diff --git a/src/main/AbstractChart.js → src/main/Embeddable.js b/src/main/AbstractChart.js → src/main/Embeddable.js
@@ -2,15 +2,15 @@
 
 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();
-        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() {
@@ -43,6 +43,6 @@ export default class AbstractChart extends React.Component {
     }
 }
 
-AbstractChart.defaultProps = {
+Embeddable.defaultProps = {
     id: 'chart'
 };
diff --git a/src/main/SeatsioDesigner.js b/src/main/SeatsioDesigner.js
@@ -0,0 +1,8 @@
+import Embeddable from "./Embeddable";
+
+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
@@ -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
@@ -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/main/index.js b/src/main/index.js
@@ -1,2 +1,3 @@
 export {default as SeatsioSeatingChart} from './SeatsioSeatingChart';
-export {default as SeatsioEventManager} from './SeatsioEventManager';
+export {default as SeatsioEventManager} from './SeatsioEventManager';
+export {default as SeatsioDesigner} from './SeatsioDesigner';
diff --git a/src/test/SeatsioDesigner.test.js 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 Embeddable from "../main/Embeddable";
+
+Enzyme.configure({adapter: new Adapter()});
+
+describe("SeatsioDesigner", () => {
+
+    let seatsioMock = {
+
+        SeatingChartDesigner: class {
+
+            constructor(props) {
+                this.props = props;
+            }
+
+            render() {
+                return this;
+            }
+        }
+    };
+
+    Embeddable.prototype.loadSeatsio = () => {
+        return Promise.resolve(seatsioMock);
+    };
+
+    it('renders the designer', () => {
+        let chart = mount((
+            <SeatsioDesigner/>
+        ));
+
+        expect(chart.find('div#chart').length).toEqual(1);
+    });
+
+    it('passes parameters onto the designer', () => {
+        return new Promise(resolve => {
+            mount((
+                <SeatsioDesigner
+                    id="someID"
+                    className="someClassName"
+                    designerKey="aDesignerKey"
+                    onRenderStarted={chart => {
+                        expect(chart.props).toEqual({
+                            divId: 'someID',
+                            designerKey: 'aDesignerKey'
+                        });
+                        resolve();
+                    }}/>
+            ));
+        });
+    });
+
+});
diff --git 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);
     };
 
@@ -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
@@ -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);
     };
 
@@ -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((
                 <SeatsioSeatingChart
-                    onChartCreated={() => {
+                    onRenderStarted={() => {
                         chart.unmount();
 
                         expect(mockedDestroy.mock.calls.length).toEqual(1);
@@ -93,7 +93,7 @@ describe("SeatsioSeatingChart", () => {
         return new Promise(resolve => {
             let chartComponent = mount((
                 <SeatsioSeatingChart
-                    onChartCreated={chart => {
+                    onRenderStarted={chart => {
                         chart.state = 'DESTROYED';
                         chartComponent.unmount();