improve radio component, make value a required property since that's …

…the reliable thing to get on a onChange event (see facebook/react#1471)
fczuardi · Mar 30, 2015 · df03bb9 · df03bb9
1 parent b43a0b6
commit df03bb9
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 30 deletions.
diff --git a/app.js b/app.js
@@ -45,8 +45,8 @@ render(
                         checked: true,
                         isItem: true,
                         onChange: function(event){
-                            console.log(event.target.checked);
-                        }
+                            console.log(event.target.value, event.target.checked);
+                                }
                     },
                     'With label'
                     )
@@ -55,7 +55,7 @@ render(
                     create(Switch, {
                         id: 'switch-0',
                         onChange: function(event){
-                            console.log(event.target.checked);
+                            console.log(event.target.value, event.target.checked);
                         }
                     })
                 ),
@@ -65,25 +65,42 @@ render(
                         id: 'switch-1',
                         styles: {div: {float: 'left'}},
                         onChange: function(event){
-                            console.log(event.target.checked);
+                            console.log(event.target.value, event.target.checked);
                         }
                     })
                 )
             ),
             create(MnmoList, null,
                 create(MnmoLI, null,
                     create(MnmoRadioButton, {
-                        isItem: true, id: 'mnmo-radio-1', name: 'menu-radio-group'
+                        isItem: true, 
+                        id: 'mnmo-radio-1', 
+                        onChange: function(event){
+                            console.log(event.target.value);
+                        },
+                        value: 'itema',
+                        name: 'menu-radio-groupt'
                     }, 'Item A')
                 ),
                 create(MnmoLI, null,
                     create(MnmoRadioButton, {
-                        isItem: true, id: 'mnmo-radio-2', checked: true, name: 'menu-radio-group'
+                        isItem: true, id: 'mnmo-radio-2', checked: true, 
+                        name: 'menu-radio-group',
+                        value: 'itemb',
+                        onChange: function(event){
+                            console.log(event.target.value);
+                        },
                     }, 'Item B')
                 ),
                 create(MnmoLI, null,
                     create(MnmoRadioButton, {
-                        isItem: true, id: 'mnmo-radio-3', name: 'menu-radio-group'
+                        isItem: true, 
+                        id: 'mnmo-radio-3', 
+                        value: 'itemc',
+                        name: 'menu-radio-group',
+                        onChange: function(event){
+                            console.log(event.target.value);
+                        },
                     }, 'Item C')
                 )
             ),
@@ -129,20 +146,23 @@ render(
                         name: 'group-0', 
                         id: 'radio-mnmo-1',
                         isBox: true,
-                        onChange: function(){console.log('foo');}
+                        value: 8,
+                        onChange: function(event){console.log('foo', event.target.value);}
                     }, '8'),
                     create(MnmoRadioButton, {
                         name: 'group-0', 
                         id: 'radio-mnmo-2',
                         checked: true,
                         isBox: true,
-                        onChange: function(){console.log('foo');}
+                        value: 4,
+                        onChange: function(event){console.log('foo', event.target.value);}
                     }, '4'),
                     create(MnmoRadioButton, {
                         name: 'group-0', 
                         id: 'radio-mnmo-3',
                         isBox: true,
-                        onChange: function(){console.log('foo');}
+                        value: 35,
+                        onChange: function(event){console.log('foo', event.target.value);}
                     }, '35')
                 )
             ),
@@ -156,36 +176,40 @@ render(
             //------------------------------------------------------------------
             create(Drawer, null,
                 create(List, null,
-                    create(LI,{type: 'link', href: '#'}, 'Item A'),
-                    create(LI,{type: 'link', href: '#'}, 'Item B'),
-                    create(LI,{type: 'link', href: '#'}, 'Item C')
-                ),
-                create(List, null,
-                    create(LI,{type: 'radio', id: 'radio-1', name: 'menu-radio-group'}, 'Item A'),
-                    create(LI,{type: 'radio', id: 'radio-2', name: 'menu-radio-group', checked: true}, 'Item B'),
-                    create(LI,{type: 'radio', id: 'radio-3', name: 'menu-radio-group'}, 'Item C')
-                ),
-                create(List, null,
-                    create(LI,{type: 'checkbox', id: 'menu-check-1'}, 'Item A'),
-                    create(LI,{type: 'checkbox', id: 'menu-check-2', checked: true}, 'Item B'),
-                    create(LI,{type: 'checkbox', id: 'menu-check-3'}, 'Item C'),
-                    create(LI,{type: 'checkbox', id: 'menu-check-4', checked: false}, 'Item D')
+                    create(LI, null,
+                        create(Checkbox, {
+                            id: 'menu-check-1'
+                        }, 'Item A')
+                    ),
+                    create(MnmoLI, null,
+                        create(Checkbox, {
+                            id: 'menu-check-2', checked: true
+                        }, 'Item B')
+                    ),
+                    create(MnmoLI, null,
+                        create(Checkbox, {
+                            id: 'menu-check-3'
+                        }, 'Item C')
+                    )
                 )
             ),
             create(FieldSet, {styles: {fieldset: { borderColor: '#0bb' }}},
                 create(RadioButton, {
                     name: 'group-1', 
                     id: 'radio-1',
+                    value: 'A',
                     onChange: function(){console.log('foo');}
                 }, 'A'),
                 create(RadioButton, {
                     name: 'group-1', 
                     id: 'radio-2',
+                    value: 'B',
                     onChange: function(){console.log('foo');}
                 }, 'B'),
                 create(RadioButton, {
                     name: 'group-1', 
                     id: 'radio-3',
+                    value: 'C',
                     onChange: function(){console.log('foo');}
                 }, 'C'),
                 create(Select, {name: 'foobarSelector'},

diff --git a/lib/radio.js b/lib/radio.js
@@ -24,9 +24,19 @@
  *
  * @module mnmo-components/radio
  */
+import {PropTypes} from 'react';
 import template from './templates/radio.jsx';
 import merge from 'lodash/object/merge';
 
+var propTypes = {
+    id: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+    value: PropTypes.node.isRequired,
+    checked: PropTypes.bool,
+    onChange: PropTypes.func,
+    styles: PropTypes.object
+};
+
 var defaultProps = {
     checked: false,
     styles: {div: {}, input: {}, label: {}}
@@ -49,6 +59,7 @@ class RadioButton {
     }
 }
 
+RadioButton.propTypes = propTypes;
 RadioButton.defaultProps = defaultProps;
 
 export default RadioButton;
diff --git a/lib/templates/checkbox.jsx b/lib/templates/checkbox.jsx
@@ -14,12 +14,14 @@ import React from 'react';
 export default (p) => {
     return (
 <div className={p.className} style={p.styles.div}>
-    <input type="checkbox"
+    <input 
+        type="checkbox"
         name={p.name}
+        id={p.id}
         checked={p.checked}
+        value={p.value}
         disabled={p.disabled}
         onChange={p.onChange}
-        id={p.id}
         style={p.styles.input}
     />
     <label 

diff --git a/lib/templates/radio.jsx b/lib/templates/radio.jsx
@@ -12,12 +12,12 @@ export default (p) =>
         type="radio" 
         name={p.name}
         id={p.id}
-        key={p.key}
-        value={p.value}
         checked={p.checked}
         disabled={p.disabled}
-        style={p.styles.input}
+        value={p.value}
         onChange={p.onChange}
+        style={p.styles.input}
+        data-checked={p.checked}
     />
     <label 
         htmlFor={p.id}

diff --git a/lib/themes/mnmo/switch.js b/lib/themes/mnmo/switch.js
@@ -27,7 +27,7 @@ class MnmoSwitch extends Checkbox {
         Children.forEach(newProps.children, function(child){
             newChildren.push(child);
         });
-        newChildren.push(DOM.div( {style: newProps.styles.outerDiv},
+        newChildren.push(DOM.div( {key: 'o', style: newProps.styles.outerDiv},
             DOM.div( {style: newProps.styles.innerDiv})
         ));
         newProps.children  = newChildren;