Initial commit of component render classes.

src/ui/DOMController.tsx

@@ -14,17 +14,11 @@
  *  under the License.
  */
 
-import "./overlay/styles.less";
 import * as React from "react";
-import * as ReactDOM from "react-dom";
 import { KeyCode, KeyEvent, CSS } from "../lib/Constants";
 import { Messaging } from "../lib/Messaging";
 import { Overlay } from "./overlay/Overlay";
-import { Variable, VariableCallback } from "../core/variables/Variable";
-import { remixer } from "../core/Remixer";
-
-import * as update from "immutability-helper";
-// import { newContext } from "immutability-helper";
+import { Variable } from "../core/variables/Variable";
 
 /**
  * Interface for the properties assigned to the DOMController component.
@@ -33,6 +27,7 @@ import * as update from "immutability-helper";
 interface ControllerProps {
   wrapperElement: HTMLElement;
   variables: Array<Variable>;
+  updateVariable(variable: Variable, selectedValue: any): void;
 }
 
 /**
@@ -86,25 +81,6 @@ export class DOMController extends React.Component<ControllerProps, void> {
     this.props.wrapperElement.classList.toggle(CSS.RMX_VISIBLE);
   }
 
-  /**
-   * Handles all control updates by setting a new selected value for the
-   * variable.
-   *
-   * To maintain immutability for React, lets first clone the variable,
-   * update its selected value, then set it back to the variables array.
-   * Doing so allows each control to handle its own `shouldComponentUpdate`
-   * method to determine if it should be re-rendered.
-   *
-   * @param {Variable} variable The variable to update.
-   * @param {any} selectedValue The new selected value.
-   */
-  updateVariable = (variable: Variable, selectedValue: any): void => {
-    const index = variables.indexOf(variable);
-    let clonedVariable = variable.clone();
-    clonedVariable.selectedValue = selectedValue;
-    variables[index] = clonedVariable;
-  }
-
   /** @override */
   render() {
     return (
@@ -115,31 +91,10 @@ export class DOMController extends React.Component<ControllerProps, void> {
         <div className="mdl-card__supporting-text mdl-card__actions mdl-card--border">
           <Overlay
             variables={this.props.variables}
-            updateVariable={this.updateVariable}
+            updateVariable={this.props.updateVariable}
           />
         </div>
       </div>
     );
   }
 }
-
-let variables = remixer.attachedInstance.variablesArray;
-const overlayWrapper = document.getElementById(CSS.RMX_OVERLAY_WRAPPER);
-
-/** Renders the DOMController component to the overlay wrapper element. */
-function redraw(): void {
-  ReactDOM.render(
-    <DOMController
-      wrapperElement={overlayWrapper}
-      variables={variables}
-    />,
-    overlayWrapper
-  );
-}
-
-// Add `redraw()` as a callback when selected value changes on a variable.
-variables.forEach(variable => {
-  variable.addCallback(redraw);
-});
-
-redraw();

src/ui/render.tsx

@@ -0,0 +1,64 @@
+/** @license
+ *  Copyright 2016 Google Inc. All Rights Reserved.
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ *  use this file except in compliance with the License. You may obtain a copy
+ *  of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ *  WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ *  License for the specific language governing permissions and limitations
+ *  under the License.
+ */
+
+import "./overlay/styles.less";
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { CSS } from "../lib/Constants";
+import { Variable } from "../core/variables/Variable";
+import { DOMController } from "./DOMController";
+import { remixer } from "../core/Remixer";
+
+/**
+ * Handles all control updates by setting a new selected value for the
+ * variable.
+ *
+ * To maintain immutability for React, lets first clone the variable,
+ * update its selected value, then set it back to the variables array.
+ * Doing so allows each control to handle its own `shouldComponentUpdate`
+ * method to determine if it should be re-rendered.
+ *
+ * @param {Variable} variable The variable to update.
+ * @param {any} selectedValue The new selected value.
+ */
+function updateVariable(variable: Variable, selectedValue: any): void {
+  const index = variables.indexOf(variable);
+  let clonedVariable = variable.clone();
+  clonedVariable.selectedValue = selectedValue;
+  variables[index] = clonedVariable;
+}
+
+let variables = remixer.attachedInstance.variablesArray;
+const overlayWrapper = document.getElementById(CSS.RMX_OVERLAY_WRAPPER);
+
+/** Renders the DOMController component to the overlay wrapper element. */
+function redraw(): void {
+  ReactDOM.render(
+    <DOMController
+      wrapperElement={overlayWrapper}
+      variables={variables}
+      updateVariable={updateVariable}
+    />,
+    overlayWrapper
+  );
+}
+
+// Add `redraw()` as a callback when selected value changes on a variable.
+variables.forEach(variable => {
+  variable.addCallback(redraw);
+});
+
+redraw();

webpack.config.js

@@ -1,7 +1,7 @@
 module.exports = {
   entry: {
     remixer: './src/core/Remixer.ts',
-    overlay: './src/ui/DOMController.tsx'
+    overlay: './src/ui/render.tsx'
   },
 
   output: {