Initial commit of component render classes.

src/ui/controls/ColorSwatchControl.tsx

@@ -15,8 +15,8 @@
  */
 
 import * as React from "react";
+import { ColorControlInterface } from "./controlInterfaces";
 import { ColorVariable } from "../../core/variables/ColorVariable";
-import { ControlInterface } from "./ControlInterface";
 import { CSS, VariableType } from "../../lib/Constants";
 
 /**
@@ -30,20 +30,17 @@ interface ColorSwatchProps {
 }
 
 /**
- * A single color swatch displayed within the `ColorSwatchControl`.
- * @class
- * @extends React.Component
+ * Returns a single color swatch displayed within the `ColorSwatchControl`.
+ * @param {ColorSwatchProps} props The color swath properties.
  */
-class ColorSwatch extends React.Component<ColorSwatchProps, void>  {
-  render() {
-    const { color, isSelected, onClick } = this.props;
-    return (
-      <div className={CSS.RMX_COLOR_SWATCH_ITEM} style={{backgroundColor: color}}
-        value={color} onClick={onClick}>
-        {isSelected ? <i className="material-icons">check</i> : ""}
-      </div>
-    );
-  }
+function ColorSwatch(props: ColorSwatchProps) {
+  const { color, isSelected, onClick } = props;
+  return (
+    <div className={CSS.RMX_COLOR_SWATCH_ITEM} style={{backgroundColor: color}}
+     value={color} onClick={onClick}>
+     {isSelected ? <i className="material-icons">check</i> : ""}
+   </div>
+ );
 }
 
 /**
@@ -52,7 +49,7 @@ class ColorSwatch extends React.Component<ColorSwatchProps, void>  {
  * @class
  * @extends React.Component
  */
-export class ColorSwatchControl extends React.Component<ControlInterface, ControlInterface> {
+export class ColorSwatchControl extends React.Component<ColorControlInterface, ColorControlInterface> {
   state = {
     variable: this.props.variable,
   };
@@ -63,7 +60,7 @@ export class ColorSwatchControl extends React.Component<ControlInterface, Contro
     const {
       possibleValues,
       selectedValue
-    } = this.state.variable as ColorVariable;
+    } = this.state.variable;
 
     if (possibleValues.indexOf(selectedValue) === -1) {
       possibleValues.push(selectedValue);
@@ -87,7 +84,7 @@ export class ColorSwatchControl extends React.Component<ControlInterface, Contro
       title,
       possibleValues,
       selectedValue
-    } = this.state.variable as ColorVariable;
+    } = this.state.variable;
 
     return (
       <div className={`${CSS.RMX_COLOR_SWATCH} ${CSS.MDL_LIST_ITEM} ${CSS.MDL_TWO_LINE}`}>

src/ui/controls/DropdownControl.tsx

@@ -15,16 +15,16 @@
  */
 
 import * as React from "react";
-import { ControlInterface } from "./ControlInterface";
 import { CSS } from "../../lib/Constants";
+import { StringControlInterface } from "./controlInterfaces";
 import { StringVariable } from "../../core/variables/StringVariable";
 
 /**
  * A dropdown control.
  * @class
  * @extends React.Component
  */
-export class DropdownControl extends React.Component<ControlInterface, ControlInterface> {
+export class DropdownControl extends React.Component<StringControlInterface, StringControlInterface> {
   state = {
     variable: this.props.variable,
   };
@@ -35,7 +35,7 @@ export class DropdownControl extends React.Component<ControlInterface, ControlIn
     const {
       possibleValues,
       selectedValue
-    } = this.state.variable as StringVariable;
+    } = this.state.variable;
 
     if (possibleValues.indexOf(selectedValue) === -1) {
       possibleValues.push(selectedValue);
@@ -60,7 +60,7 @@ export class DropdownControl extends React.Component<ControlInterface, ControlIn
       key,
       possibleValues,
       selectedValue
-    } = this.state.variable as StringVariable;
+    } = this.state.variable;
     const id = `${CSS.RMX_DROPDOWN}-${key}`;
 
     return (

src/ui/controls/RadioListControl.tsx

@@ -15,16 +15,16 @@
  */
 
 import * as React from "react";
-import { ControlInterface } from "./ControlInterface";
 import { CSS, VariableType } from "../../lib/Constants";
+import { StringControlInterface } from "./controlInterfaces";
 import { StringVariable } from "../../core/variables/StringVariable";
 
 /**
  * A radio list control.
  * @class
  * @extends React.Component
  */
-export class RadioListControl extends React.Component<ControlInterface, ControlInterface> {
+export class RadioListControl extends React.Component<StringControlInterface, StringControlInterface> {
   state = {
     variable: this.props.variable,
   };
@@ -35,7 +35,7 @@ export class RadioListControl extends React.Component<ControlInterface, ControlI
     const {
       possibleValues,
       selectedValue
-    } = this.state.variable as StringVariable;
+    } = this.state.variable;
 
     if (possibleValues.indexOf(selectedValue) === -1) {
       possibleValues.push(selectedValue);
@@ -60,7 +60,7 @@ export class RadioListControl extends React.Component<ControlInterface, ControlI
       key,
       possibleValues,
       selectedValue
-    } = this.state.variable as StringVariable;
+    } = this.state.variable;
     const id = `${CSS.RMX_RADIO_LIST_ITEM}-${key}`;
 
     return (

src/ui/controls/SliderControl.tsx

@@ -15,16 +15,16 @@
  */
 
 import * as React from "react";
-import { ControlInterface } from "./ControlInterface";
 import { CSS, VariableType } from "../../lib/Constants";
+import { RangeControlInterface } from "./controlInterfaces";
 import { RangeVariable } from "../../core/variables/RangeVariable";
 
 /**
  * A slider control.
  * @class
  * @extends React.Component
  */
-export class SliderControl extends React.Component<ControlInterface, ControlInterface> {
+export class SliderControl extends React.Component<RangeControlInterface, RangeControlInterface> {
   state = {
     variable: this.props.variable,
   };
@@ -48,7 +48,7 @@ export class SliderControl extends React.Component<ControlInterface, ControlInte
       minValue,
       maxValue,
       increment,
-    } = this.state.variable as RangeVariable;
+    } = this.state.variable;
     const id = `${CSS.RMX_SLIDER}-${key}`;
 
     return (

src/ui/controls/SwitchControl.tsx

@@ -15,15 +15,15 @@
  */
 
 import * as React from "react";
-import { ControlInterface } from "./ControlInterface";
+import { BooleanControlInterface } from "./controlInterfaces";
 import { CSS } from "../../lib/Constants";
 
 /**
  * A switch control.
  * @class
  * @extends React.Component
  */
-export class SwitchControl extends React.Component<ControlInterface, ControlInterface> {
+export class SwitchControl extends React.Component<BooleanControlInterface, BooleanControlInterface> {
   state = {
     variable: this.props.variable,
   };

src/ui/controls/TextFieldControl.tsx

@@ -15,16 +15,16 @@
  */
 
 import * as React from "react";
-import { ControlInterface } from "./ControlInterface";
 import { CSS, VariableType } from "../../lib/Constants";
+import { StringControlInterface } from "./controlInterfaces";
 import { StringVariable } from "../../core/variables/StringVariable";
 
 /**
  * A textfield control.
  * @class
  * @extends React.Component
  */
-export class TextFieldControl extends React.Component<ControlInterface, ControlInterface> {
+export class TextFieldControl extends React.Component<StringControlInterface, StringControlInterface> {
   state = {
     variable: this.props.variable,
   };
@@ -46,7 +46,7 @@ export class TextFieldControl extends React.Component<ControlInterface, ControlI
       key,
       dataType,
       selectedValue
-    } = this.state.variable as StringVariable;
+    } = this.state.variable;
     const id = `${CSS.RMX_TEXTFIELD}-${key}`;
     const isNumber: boolean = dataType === VariableType.NUMBER;
     const pattern = isNumber ? "-?[0-9]*(\.[0-9]+)?" : ".*";

src/ui/controls/controlInterfaces.tsx

@@ -0,0 +1,80 @@
+/** @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 { BooleanVariable } from "../../core/variables/BooleanVariable";
+import { ColorVariable } from "../../core/variables/ColorVariable";
+import { NumberVariable } from "../../core/variables/NumberVariable";
+import { RangeVariable } from "../../core/variables/RangeVariable";
+import { StringVariable } from "../../core/variables/StringVariable";
+import { Variable } from "../../core/variables/Variable";
+
+/**
+ * Interface for variable controls properties and state.
+ * @interface
+ */
+interface ControlInterface {
+  variable: Variable;
+}
+
+/**
+ * Interface for the properties and state of a control that implements a
+ * Boolean variable.
+ * @interface
+ * @extends ControlInterface
+ */
+export interface BooleanControlInterface extends ControlInterface {
+  variable: BooleanVariable;
+}
+
+/**
+ * Interface for the properties and state of a control that implements a
+ * Color variable.
+ * @interface
+ * @extends ControlInterface
+ */
+export interface ColorControlInterface extends ControlInterface {
+  variable: ColorVariable;
+}
+
+/**
+ * Interface for the properties and state of a control that implements a
+ * Number variable.
+ * @interface
+ * @extends ControlInterface
+ */
+export interface NumberControlInterface extends ControlInterface {
+  variable: NumberVariable;
+}
+
+/**
+ * Interface for the properties and state of a control that implements a
+ * Range variable.
+ * @interface
+ * @extends ControlInterface
+ */
+export interface RangeControlInterface extends ControlInterface {
+  variable: RangeVariable;
+}
+
+/**
+ * Interface for the properties and state of a control that implements a
+ * String variable.
+ * @interface
+ * @extends ControlInterface
+ */
+export interface StringControlInterface extends ControlInterface {
+  variable: StringVariable;
+}

src/ui/overlay/Overlay.tsx

@@ -58,7 +58,7 @@ export class Overlay extends React.Component<OverlayVariables, OverlayVariables>
       case VariableType.STRING:
         if (!variable["possibleValues"]) {
           Control = TextFieldControl;
-        } else if (variable["possibleValues"].length <= 2) {
+        } else if (variable["possibleValues"].length === 2) {
           Control = RadioListControl;
         } else {
           Control = DropdownControl;