Fix: Allow user to provide input props

Fixes #82 There are still some components where value, id, name are handled manually.
tleunen · Oct 19, 2015 · fbac478 · fbac478
1 parent af2d7bb
commit fbac478
Show file tree

Hide file tree

Showing 11 changed files with 122 additions and 169 deletions.
diff --git a/demo/slider/slider.js b/demo/slider/slider.js
@@ -3,9 +3,9 @@ import ReactDOM from 'react-dom';
 import Slider from '../../src/Slider';
 
 function linkToState(target, property) {
-    return value => {
+    return event => {
         target.setState({
-            [property]: value
+            [property]: event.target.value
         });
     };
 }

diff --git a/demo/textfield/textfield.js b/demo/textfield/textfield.js
@@ -3,9 +3,9 @@ import ReactDOM from 'react-dom';
 import Textfield from '../../src/Textfield';
 
 function linkToState(target, property) {
-    return value => {
+    return event => {
         target.setState({
-            [property]: value
+            [property]: event.target.value
         });
     };
 }

diff --git a/demo/toggle/toggle.js b/demo/toggle/toggle.js
@@ -6,18 +6,17 @@ import Radio from '../../src/Radio';
 import IconToggle from '../../src/IconToggle';
 import Switch from '../../src/Switch';
 
-function linkToState(target, property) {
-    return value => {
+function linkValueToState(target, property) {
+    return event => {
         target.setState({
-            [property]: value
+            [property]: event.target.value
         });
     };
 }
-
-function linkToChechedState(target, property) {
-    return e => {
+function linkCheckedToState(target, property) {
+    return event => {
         target.setState({
-            [property]: e.target.checked
+            [property]: event.target.checked
         });
     };
 }
@@ -29,6 +28,7 @@ class Demo extends React.Component {
             checkbox1: true,
             checkbox2: false,
             radio: 'opt1',
+            radio2: 'opt2',
             icon1: true,
             icon2: false,
             switch1: true,
@@ -40,28 +40,28 @@ class Demo extends React.Component {
         return (
             <div>
                 <p>Checkbox</p>
-                <Checkbox label="With ripple" ripple checked={this.state.checkbox1} onChange={linkToChechedState(this, 'checkbox1')} />
-                <Checkbox label="Without ripple" checked={this.state.checkbox2} onChange={linkToChechedState(this, 'checkbox2')} />
+                <Checkbox label="With ripple" ripple checked={this.state.checkbox1} onChange={linkCheckedToState(this, 'checkbox1')} />
+                <Checkbox label="Without ripple" checked={this.state.checkbox2} onChange={linkCheckedToState(this, 'checkbox2')} />
 
                 <p>Radio Button</p>
-                <RadioGroup name="demo" value={this.state.radio} onChange={linkToState(this, 'radio')}>
-                    <Radio value="opt1">Option 1</Radio>
-                    <Radio value="opt2">Option 2</Radio>
+                <RadioGroup name="demo" value={this.state.radio} onChange={linkValueToState(this, 'radio')}>
+                    <Radio value="opt1" ripple>Ripple option</Radio>
+                    <Radio value="opt2">Other option</Radio>
                 </RadioGroup>
 
                 <p>Radio Button with custom containers</p>
-                <RadioGroup container="ul" childContainer="li" name="demo2" value={this.state.radio} onChange={linkToState(this, 'radio')}>
-                    <Radio value="opt1">Option 1</Radio>
-                    <Radio value="opt2">Option 2</Radio>
+                <RadioGroup container="ul" childContainer="li" name="demo2" value={this.state.radio2} onChange={linkValueToState(this, 'radio2')}>
+                    <Radio value="opt1" ripple>Ripple option</Radio>
+                    <Radio value="opt2">Other option</Radio>
                 </RadioGroup>
 
                 <p>Icon toggle</p>
-                <IconToggle id="bold" name="format_bold" checked={this.state.icon1} onChange={linkToState(this, 'icon1')} />
-                <IconToggle id="italic" name="format_italic" checked={this.state.icon2} onChange={linkToState(this, 'icon2')} />
+                <IconToggle ripple id="bold" name="format_bold" checked={this.state.icon1} onChange={linkCheckedToState(this, 'icon1')} />
+                <IconToggle id="italic" name="format_italic" checked={this.state.icon2} onChange={linkCheckedToState(this, 'icon2')} />
 
                 <p>Switch</p>
-                <Switch id="switch1" checked={this.state.switch1} onChange={linkToState(this, 'switch1')}>Enable this</Switch>
-                <Switch id="switch2" checked={this.state.switch2} onChange={linkToState(this, 'switch2')}>Enable that</Switch>
+                <Switch ripple id="switch1" checked={this.state.switch1} onChange={linkCheckedToState(this, 'switch1')}>Ripple switch</Switch>
+                <Switch id="switch2" checked={this.state.switch2} onChange={linkCheckedToState(this, 'switch2')}>Switch</Switch>
             </div>
         );
     }

diff --git a/src/Checkbox.js b/src/Checkbox.js
@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import mdlUpgrade from './utils/mdlUpgrade';
 
 var Checkbox = (props) => {
-    var { checked, disabled, label, ripple, onChange } = props;
+    var { label, ripple, ...inputProps } = props;
 
     var classes = classNames('mdl-checkbox mdl-js-checkbox', {
         'mdl-js-ripple-effect': ripple
@@ -14,9 +14,7 @@ var Checkbox = (props) => {
             <input
                 type="checkbox"
                 className="mdl-checkbox__input"
-                checked={checked}
-                disabled={disabled}
-                onChange={onChange}
+                { ...inputProps }
             />
             {label && <span className="mdl-checkbox__label">{label}</span>}
         </label>
@@ -27,7 +25,7 @@ Checkbox.propTypes = {
     checked: PropTypes.bool,
     disabled: PropTypes.bool,
     label: PropTypes.string,
-    onChange: PropTypes.func.isRequired,
+    onChange: PropTypes.func,
     ripple: PropTypes.bool
 };
 

diff --git a/src/IconToggle.js b/src/IconToggle.js
@@ -3,43 +3,34 @@ import classNames from 'classnames';
 import Icon from './Icon';
 import mdlUpgrade from './utils/mdlUpgrade';
 
-class IconToggle extends React.Component {
-    static propTypes = {
-        checked: PropTypes.bool,
-        className: PropTypes.string,
-        disabled: PropTypes.bool,
-        id: PropTypes.string.isRequired,
-        name: PropTypes.string.isRequired,
-        onChange: PropTypes.func.isRequired,
-        ripple: PropTypes.bool
-    }
+function IconToggle( props ) {
+    var { className, id, name, ripple, ...inputProps } = props;
+    var inputId = 'icon-toggle-' + id;
 
-    _handleChange = (event) => {
-        this.props.onChange(event.target.checked);
-    }
+    var classes = classNames('mdl-icon-toggle mdl-js-icon-toggle', {
+        'mdl-js-ripple-effect': ripple
+    }, className);
 
-    render() {
-        var { className, checked, disabled, id, name, ripple, ...otherProps } = this.props;
-        var inputId = 'icon-toggle-' + id;
-
-        var classes = classNames('mdl-icon-toggle mdl-js-icon-toggle', {
-            'mdl-js-ripple-effect': ripple
-        }, className);
-
-        return (
-            <label className={classes} htmlFor={inputId}>
-                <input
-                    type="checkbox"
-                    id={inputId}
-                    className="mdl-icon-toggle__input"
-                    checked={checked}
-                    disabled={disabled}
-                    onChange={this._handleChange}
-                />
-                <Icon className="mdl-icon-toggle__label" name={name} />
-            </label>
-        );
-    }
+    return (
+        <label className={classes} htmlFor={inputId}>
+            <input
+                type="checkbox"
+                id={inputId}
+                className="mdl-icon-toggle__input"
+                { ...inputProps }
+            />
+            <Icon className="mdl-icon-toggle__label" name={name} />
+        </label>
+    );
 }
+IconToggle.propTypes = {
+    checked: PropTypes.bool,
+    className: PropTypes.string,
+    disabled: PropTypes.bool,
+    id: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+    onChange: PropTypes.func,
+    ripple: PropTypes.bool
+};
 
 export default mdlUpgrade(IconToggle);
diff --git a/src/Radio.js b/src/Radio.js
@@ -2,48 +2,39 @@ import React, { PropTypes } from 'react';
 import classNames from 'classnames';
 import mdlUpgrade from './utils/mdlUpgrade';
 
-class Radio extends React.Component {
-    static propTypes = {
-        checked: PropTypes.bool,
-        className: PropTypes.string,
-        disabled: PropTypes.bool,
-        name: PropTypes.string,
-        onChange: PropTypes.func,
-        ripple: PropTypes.bool,
-        value: PropTypes.oneOfType([
-            PropTypes.string,
-            PropTypes.number
-        ]).isRequired
-    }
+function Radio( props ) {
+    var { children, className, name, ripple, value, ...inputProps } = props;
+    var inputId = 'radio-' + name.replace(/\s+/g, '') + '-' + value.replace(/\s+/g, '');
 
-    _handleChange = (event) => {
-        this.props.onChange(event.target.value);
-    }
+    var classes = classNames('mdl-radio mdl-js-radio', {
+        'mdl-js-ripple-effect': ripple
+    }, className);
 
-    render() {
-        var { checked, className, disabled, name, ripple, value } = this.props;
-        var inputId = 'radio-' + name.replace(/\s+/g, '') + '-' + value.replace(/\s+/g, '');
-
-        var classes = classNames('mdl-radio mdl-js-radio', {
-            'mdl-js-ripple-effect': ripple
-        }, className);
-
-        return (
-            <label className={classes} htmlFor={inputId}>
-                <input
-                    type="radio"
-                    id={inputId}
-                    className="mdl-radio__button"
-                    name={name}
-                    value={value}
-                    checked={checked}
-                    disabled={disabled}
-                    onChange={this._handleChange}
-                />
-                <span className="mdl-radio__label">{this.props.children}</span>
-            </label>
-        );
-    }
+    return (
+        <label className={classes} htmlFor={inputId}>
+            <input
+                type="radio"
+                id={inputId}
+                className="mdl-radio__button"
+                value={value}
+                name={name}
+                { ...inputProps }
+            />
+            <span className="mdl-radio__label">{children}</span>
+        </label>
+    );
 }
+Radio.propTypes = {
+    checked: PropTypes.bool,
+    className: PropTypes.string,
+    disabled: PropTypes.bool,
+    name: PropTypes.string,
+    onChange: PropTypes.func,
+    ripple: PropTypes.bool,
+    value: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.number
+    ]).isRequired
+};
 
 export default mdlUpgrade(Radio);
diff --git a/src/RadioGroup.js b/src/RadioGroup.js
@@ -12,7 +12,7 @@ class RadioGroup extends React.Component {
         }),
         container: PropTypes.string,
         name: PropTypes.string.isRequired,
-        onChange: PropTypes.func.isRequired,
+        onChange: PropTypes.func,
         value: PropTypes.oneOfType([
             PropTypes.string,
             PropTypes.number
@@ -23,20 +23,16 @@ class RadioGroup extends React.Component {
         container: 'div'
     }
 
-    _handleChange = (value) => {
-        this.props.onChange(value);
-    }
-
     render() {
-        var { name, onChange, value, children,
+        var { name, value, children,
             container, childContainer, ...otherProps} = this.props;
 
         return React.createElement(container, otherProps,
             React.Children.map(children, child => {
                 var clonedChild = React.cloneElement(child, {
-                    name: name,
                     checked: child.props.value === value,
-                    onChange: this._handleChange
+                    name,
+                    ...otherProps
                 });
 
                 return childContainer ? React.createElement(childContainer, {}, clonedChild) : clonedChild;

diff --git a/src/Slider.js b/src/Slider.js
@@ -5,30 +5,21 @@ import mdlUpgrade from './utils/mdlUpgrade';
 class Slider extends React.Component {
     static propTypes = {
         className: PropTypes.string,
-        max: PropTypes.number.isRequired,
-        min: PropTypes.number.isRequired,
-        onChange: PropTypes.func.isRequired,
+        max: PropTypes.number,
+        min: PropTypes.number,
+        onChange: PropTypes.func,
         value: PropTypes.number
     }
 
-    _handleChange = (event) => {
-        this.props.onChange(parseFloat(event.target.value));
-    }
-
     render() {
-        var { className, max, min, onChange, value, ...otherProps } = this.props;
+        var { className, ...otherProps } = this.props;
 
         var classes = classNames('mdl-slider mdl-js-slider', className);
 
         return (
             <input
                 className={classes}
                 type="range"
-                min={min}
-                max={max}
-                value={value}
-                tabIndex="0"
-                onChange={this._handleChange}
                 {...otherProps}
             />
         );