Refactor widgets

src/web/components/widget-manager/WidgetManager.jsx

@@ -1,6 +1,5 @@
 import _ from 'lodash';
 import React from 'react';
-import ReactDOM from 'react-dom';
 import { Button, Modal } from 'react-bootstrap';
 import i18n from '../../lib/i18n';
 import store from '../../store';

src/web/components/widgets/axes/index.jsx

@@ -7,8 +7,12 @@ import './index.styl';
 
 class AxesWidget extends React.Component {
     static propTypes = {
-        onDelete: React.PropTypes.func.isRequired
+        onDelete: React.PropTypes.func
     };
+    static defaultProps = {
+        onDelete: () => {}
+    };
+
     state = {
         isCollapsed: false,
         isFullscreen: false

src/web/components/widgets/connection/index.jsx

@@ -6,9 +6,6 @@ import Connection from './Connection';
 import './index.styl';
 
 class ConnectionWidget extends React.Component {
-    static propTypes = {
-        onDelete: React.PropTypes.func.isRequired
-    };
     state = {
         isCollapsed: false,
         isFullscreen: false

src/web/components/widgets/console/index.jsx

@@ -7,8 +7,12 @@ import './index.styl';
 
 class ConsoleWidget extends React.Component {
     static propTypes = {
-        onDelete: React.PropTypes.func.isRequired
+        onDelete: React.PropTypes.func
     };
+    static defaultProps = {
+        onDelete: () => {}
+    };
+
     state = {
         isCollapsed: false,
         isFullscreen: false

src/web/components/widgets/gcode/index.jsx

@@ -7,8 +7,12 @@ import './index.styl';
 
 class GCodeWidget extends React.Component {
     static propTypes = {
-        onDelete: React.PropTypes.func.isRequired
+        onDelete: React.PropTypes.func
     };
+    static defaultProps = {
+        onDelete: () => {}
+    };
+
     state = {
         isCollapsed: false,
         isFullscreen: false

src/web/components/widgets/grbl/index.jsx

@@ -7,8 +7,12 @@ import './index.styl';
 
 class GrblWidget extends React.Component {
     static propTypes = {
-        onDelete: React.PropTypes.func.isRequired
+        onDelete: React.PropTypes.func
     };
+    static defaultProps = {
+        onDelete: () => {}
+    };
+
     state = {
         isCollapsed: false,
         isFullscreen: false

src/web/components/widgets/index.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import AxesWidget from './axes';
+import ConnectionWidget from './connection';
+import ConsoleWidget from './console';
+import GCodeWidget from './gcode';
+import GrblWidget from './grbl';
+import ProbeWidget from './probe';
+import SpindleWidget from './spindle';
+import VisualizerWidget from './visualizer';
+import WebcamWidget from './webcam';
+
+const Widget = (props) => {
+    const { widgetid, ...others } = props;
+    const widget = {
+        'axes': () => <AxesWidget data-widgetid={widgetid} {...others} />,
+        'connection': () => <ConnectionWidget data-widgetid={widgetid} {...others} />,
+        'console': () => <ConsoleWidget data-widgetid={widgetid} {...others} />,
+        'gcode': () => <GCodeWidget data-widgetid={widgetid} {...others} />,
+        'grbl': () => <GrblWidget data-widgetid={widgetid} {...others} />,
+        'probe': () => <ProbeWidget data-widgetid={widgetid} {...others} />,
+        'spindle': () => <SpindleWidget data-widgetid={widgetid} {...others} />,
+        'visualizer': () => <VisualizerWidget data-widgetid={widgetid} {...others} />,
+        'webcam': () => <WebcamWidget data-widgetid={widgetid} {...others} />
+    }[widgetid];
+
+    return widget ? widget() : null;
+};
+
+export default Widget;

src/web/components/widgets/probe/index.jsx

@@ -7,8 +7,12 @@ import './index.styl';
 
 class ProbeWidget extends React.Component {
     static propTypes = {
-        onDelete: React.PropTypes.func.isRequired
+        onDelete: React.PropTypes.func
     };
+    static defaultProps = {
+        onDelete: () => {}
+    };
+
     state = {
         isCollapsed: false,
         isFullscreen: false

src/web/components/widgets/spindle/index.jsx

@@ -7,8 +7,12 @@ import './index.styl';
 
 class SpindleWidget extends React.Component {
     static propTypes = {
-        onDelete: React.PropTypes.func.isRequired
+        onDelete: React.PropTypes.func
     };
+    static defaultProps = {
+        onDelete: () => {}
+    };
+
     state = {
         isCollapsed: false,
         isFullscreen: false

src/web/components/widgets/webcam/index.jsx

@@ -8,8 +8,12 @@ import './index.styl';
 
 class WebcamWidget extends React.Component {
     static propTypes = {
-        onDelete: React.PropTypes.func.isRequired
+        onDelete: React.PropTypes.func
     };
+    static defaultProps = {
+        onDelete: () => {}
+    };
+
     state = {
         disabled: store.get('widgets.webcam.disabled'),
         isCollapsed: false,

src/web/components/workspace/DefaultWidgets.jsx

@@ -2,7 +2,7 @@ import _ from 'lodash';
 import pubsub from 'pubsub-js';
 import React from 'react';
 import store from '../../store';
-import Widget from './Widget';
+import Widget from '../widgets';
 
 class DefaultWidgets extends React.Component {
     state = {
@@ -17,10 +17,10 @@ class DefaultWidgets extends React.Component {
         pubsub.publish('resize'); // Also see "widgets/visualizer.jsx"
     }
     render() {
-        const widgets = _.map(this.state.widgets, (widgetId) => (
+        const widgets = _.map(this.state.widgets, (widgetid) => (
             <Widget
-                key={widgetId}
-                data-widgetid={widgetId}
+                key={widgetid}
+                widgetid={widgetid}
             />
         ));
 

src/web/components/workspace/PrimaryWidgets.jsx

@@ -3,7 +3,7 @@ import pubsub from 'pubsub-js';
 import React from 'react';
 import Sortable from 'react-sortablejs';
 import store from '../../store';
-import Widget from './Widget';
+import Widget from '../widgets';
 
 const sortableOptions = {
     model: 'widgets',
@@ -16,7 +16,8 @@ const sortableOptions = {
     dataIdAttr: 'data-widgetid'
 };
 
-class PrimaryWidgets extends React.Component {
+@Sortable(sortableOptions)
+export default class PrimaryWidgets extends React.Component {
     static propTypes = {
         onDelete: React.PropTypes.func.isRequired
     };
@@ -55,20 +56,20 @@ class PrimaryWidgets extends React.Component {
         });
         this.pubsubTokens = [];
     }
-    handleDeleteWidget(widgetId) {
+    handleDeleteWidget(widgetid) {
         let widgets = _.slice(this.state.widgets);
-        _.remove(widgets, (n) => (n === widgetId));
+        _.remove(widgets, (n) => (n === widgetid));
         this.setState({ widgets: widgets });
 
         this.props.onDelete();
     }
     render() {
-        const widgets = _.map(this.state.widgets, (widgetId) => (
+        const widgets = _.map(this.state.widgets, (widgetid) => (
             <Widget
-                key={widgetId}
-                data-widgetid={widgetId}
+                widgetid={widgetid}
+                key={widgetid}
                 onDelete={() => {
-                    this.handleDeleteWidget(widgetId);
+                    this.handleDeleteWidget(widgetid);
                 }}
             />
         ));
@@ -78,5 +79,3 @@ class PrimaryWidgets extends React.Component {
         );
     }
 }
-
-export default Sortable(PrimaryWidgets, sortableOptions);