fix managed inputs

Author: jascolley

kitchen-sink/components/pages/FormsPage.tsx

@@ -11,6 +11,7 @@ const pStyle = {margin: '1em 0'};
 export interface IFormsPageState {
     birthDate: string;
     radioSelected: number;
+    name: string;
 }
 
 export class FormsPage extends React.Component<any, IFormsPageState> {
@@ -21,7 +22,8 @@ export class FormsPage extends React.Component<any, IFormsPageState> {
 
         this.state = {
             birthDate: '2014-04-30',
-            radioSelected: 1
+            radioSelected: 1,
+            name: ''
         }
 
         this.fw7 = getFramework7();
@@ -34,6 +36,20 @@ export class FormsPage extends React.Component<any, IFormsPageState> {
         });
     }
 
+    private onBirthDateChange(event, value) {
+        this.setState({
+           ...this.state,
+           birthDate: value 
+        });
+    }
+
+    private onNameChange(event) {
+        this.setState({
+            ...this.state,
+            name: event.target.value
+        });
+    }
+
     render() {
         return (
             <Page>
@@ -43,7 +59,7 @@ export class FormsPage extends React.Component<any, IFormsPageState> {
                 <List form>
                     <ListItem>
                         <FormLabel>Name</FormLabel>  
-                        <FormInput type="text" placeholder="Name" />   
+                        <FormInput type="text" placeholder="Name" onChange={this.onNameChange.bind(this)} value={this.state.name}/>   
                     </ListItem>
                     <ListItem>
                         <FormLabel>Password</FormLabel>  
@@ -63,7 +79,7 @@ export class FormsPage extends React.Component<any, IFormsPageState> {
                     </ListItem>                
                     <ListItem>
                         <FormLabel>Birth date</FormLabel>  
-                        <FormInput type="date" placeholder="Birth date" value={this.state.birthDate} />   
+                        <FormInput type="date" placeholder="Birth date" value={this.state.birthDate} onChange={this.onBirthDateChange.bind(this)} />   
                     </ListItem>
                     <ListItem>
                         <FormLabel>Date time</FormLabel>  

src/components/inputs/ManagedFormInput.tsx

@@ -1,31 +1,12 @@
 import * as React from 'react';
-
-export interface IManagedFormInputState {
-    currentValue?: string
-}
-
-export class ManagedFormInput extends React.Component<any, IManagedFormInputState> {
-    constructor(props: any) {
-        super(props);
-
-        this.state = {
-            currentValue: this.props.value || ""
-        }
-    }
-
-    render() {
-        return (
-            <input {...this.props} onChange={this.onInput.bind(this)} value={this.state.currentValue}/>
-        );
-    }
-
-    private onInput(event) {
-        if (this.props.type === "radio" || this.props.type === "checkbox") {
-            this.props.onChange();
-        } else {
-            this.setState({
-                currentValue: event.target.value
-            });
-        }
+import {SelectableInput} from './SelectableInput';
+
+export const ManagedFormInput = (props: any) => {     
+    switch(props.type.toLowerCase()) {
+        case 'checkbox':
+        case 'radio':
+            return <SelectableInput type={props.type} checked={props.checked} onChange={props.onChange} />;         
+        default: 
+            return <input type={props.type} onClick={props.onClick} onChange={props.onChange} value={props.value} placeholder={props.placeholder} />;
     }
-};
+}; 

src/components/inputs/SelectableInput.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+
+export interface ISelectableInputProps {
+    checked?: boolean
+    onChange?: () => void
+    type: string
+}
+
+export class SelectableInput extends React.Component<ISelectableInputProps, any> {
+    private element: HTMLInputElement;
+
+    private saveRef(element: HTMLInputElement) {
+        this.element = element;
+    }
+
+    public componentDidMount() {
+        this.element.checked = this.props.checked;
+        this.element.addEventListener('change', this.props.onChange);
+    }
+
+    public componentDidUpdate() {
+        setTimeout(() => {
+            if (this.element) {
+                this.element.checked = this.props.checked;
+            }
+        }, 50);
+    }
+
+    public render() {
+        return <input type={this.props.type} ref={this.saveRef.bind(this)} />;
+    }
+}