Updates MDL controls to allow remote updates. Closes #65. (#66)

* Updates MDL controls to allow remote updates. Closes #65.

* Updates react ref to use callback.

* Fixes mispelling.

* Removes unnecessary @OverRide tag.

src/ui/controls/RadioListControl.tsx

@@ -26,6 +26,9 @@ import { IStringControlProps } from "./controlProps";
  */
 export class RadioListControl extends React.Component<IStringControlProps, void> {
 
+  /** Array of MDL components. */
+  radioItems: HTMLLabelElement[] = [];
+
   /** Handles the update event for this control. */
   onChange = (event: React.FormEvent<HTMLInputElement>): void => {
     this.props.updateVariable(
@@ -39,6 +42,13 @@ export class RadioListControl extends React.Component<IStringControlProps, void>
     return nextProps.variable !== this.props.variable;
   }
 
+  componentDidUpdate() {
+    const { limitedToValues, selectedValue } = this.props.variable;
+    let index = limitedToValues.indexOf(selectedValue);
+    let materialRadio = this.radioItems[index]["MaterialRadio"];
+    materialRadio.check();
+  }
+
   /** @override */
   render() {
     const {
@@ -54,7 +64,9 @@ export class RadioListControl extends React.Component<IStringControlProps, void>
         <span className={CSS.MDL_PRIMARY}>{title}</span>
         <span className={CSS.MDL_SECONDARY}>
           {limitedToValues.map((value: string, i: number) => (
-            <label className={`${CSS.RMX_RADIO_LIST_ITEM} mdl-radio mdl-js-radio mdl-js-ripple-effect`}
+            <label
+              ref={item => this.radioItems[i] = item}
+              className={`${CSS.RMX_RADIO_LIST_ITEM} mdl-radio mdl-js-radio mdl-js-ripple-effect`}
               htmlFor={`${id}-${i}`} key={value}
             >
               <input type="radio" id={`${id}-${i}`}

src/ui/controls/SwitchControl.tsx

@@ -26,6 +26,9 @@ import { IBooleanControlProps } from "./controlProps";
  */
 export class SwitchControl extends React.Component<IBooleanControlProps, void> {
 
+  /** The MDL switch component. */
+  switchControl: HTMLLabelElement;
+
   /** Handles the update event for this control. */
   onChange = (event: React.FormEvent<HTMLInputElement>): void => {
     const { selectedValue } = this.props.variable;
@@ -37,6 +40,11 @@ export class SwitchControl extends React.Component<IBooleanControlProps, void> {
     return nextProps.variable !== this.props.variable;
   }
 
+  componentDidUpdate() {
+    let materialSwitch = this.switchControl["MaterialSwitch"];
+    this.props.variable.selectedValue ? materialSwitch.on() : materialSwitch.off();
+  }
+
   /** @override */
   render() {
     const {
@@ -51,6 +59,7 @@ export class SwitchControl extends React.Component<IBooleanControlProps, void> {
         <span className={CSS.MDL_PRIMARY}>{title}</span>
         <span className={CSS.MDL_SECONDARY}>
           <label
+            ref={item => this.switchControl = item}
             className="mdl-switch mdl-js-switch mdl-js-ripple-effect"
             htmlFor={id}
           >