Fix: Allow user to provide input props

Fixes tleunen#82 There are still some components where value, id, name are handled manually.
joshq00 · Oct 17, 2015 · 2e291fb · 2e291fb
1 parent 5f61868
commit 2e291fb
Show file tree

Hide file tree

Showing 8 changed files with 17 additions and 79 deletions.
diff --git a/src/Checkbox.js b/src/Checkbox.js
@@ -4,24 +4,17 @@ import mdlUpgrade from './utils/mdlUpgrade';
 
 class Checkbox extends React.Component {
     static propTypes = {
-        checked: PropTypes.bool,
-        disabled: PropTypes.bool,
         id: PropTypes.string,
         label: PropTypes.string,
-        onChange: PropTypes.func.isRequired,
         ripple: PropTypes.bool
     }
 
     static defaultProps = {
         ripple: true
     }
 
-    _handleChange = (event) => {
-        this.props.onChange(event.target.checked);
-    }
-
     render() {
-        var { checked, disabled, id, label, ripple } = this.props;
+        var { id, label, ripple, ...inputProps } = this.props;
 
         var inputId = 'checkbox-' + (label || id).replace(/\s+/g, '');
         var classes = classNames('mdl-checkbox mdl-js-checkbox', {
@@ -34,11 +27,9 @@ class Checkbox extends React.Component {
                     type="checkbox"
                     id={inputId}
                     className="mdl-checkbox__input"
-                    checked={checked}
-                    disabled={disabled}
-                    onChange={this._handleChange}
+                    {...inputProps}
                 />
-                {this.props.label ? <span className="mdl-checkbox__label">{label}</span> : null}
+                {label ? <span className="mdl-checkbox__label">{label}</span> : null}
             </label>
         );
     }

diff --git a/src/IconToggle.js b/src/IconToggle.js
@@ -5,25 +5,18 @@ 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
     }
 
     static defaultProps = {
         ripple: true
     }
 
-    _handleChange = (event) => {
-        this.props.onChange(event.target.checked);
-    }
-
     render() {
-        var { className, checked, disabled, id, name, ripple, ...otherProps } = this.props;
+        var { className, id, name, ripple, ...inputProps } = this.props;
         var inputId = 'icon-toggle-' + id;
 
         var classes = classNames('mdl-icon-toggle mdl-js-icon-toggle', {
@@ -36,9 +29,7 @@ class IconToggle extends React.Component {
                     type="checkbox"
                     id={inputId}
                     className="mdl-icon-toggle__input"
-                    checked={checked}
-                    disabled={disabled}
-                    onChange={this._handleChange}
+                    {...inputProps}
                 />
                 <Icon className="mdl-icon-toggle__label" name={name} />
             </label>

diff --git a/src/Radio.js b/src/Radio.js
@@ -4,11 +4,8 @@ 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,
@@ -20,12 +17,8 @@ class Radio extends React.Component {
         ripple: true
     }
 
-    _handleChange = (event) => {
-        this.props.onChange(event.target.value);
-    }
-
     render() {
-        var { checked, className, disabled, name, ripple, value } = this.props;
+        var { className, name, ripple, value, ...inputProps } = this.props;
         var inputId = 'radio-' + name.replace(/\s+/g, '') + '-' + value.replace(/\s+/g, '');
 
         var classes = classNames('mdl-radio mdl-js-radio', {
@@ -40,9 +33,7 @@ class Radio extends React.Component {
                     className="mdl-radio__button"
                     name={name}
                     value={value}
-                    checked={checked}
-                    disabled={disabled}
-                    onChange={this._handleChange}
+                    {...inputProps}
                 />
                 <span className="mdl-radio__label">{this.props.children}</span>
             </label>

diff --git a/src/RadioGroup.js b/src/RadioGroup.js
@@ -12,7 +12,6 @@ class RadioGroup extends React.Component {
         }),
         container: PropTypes.string,
         name: PropTypes.string.isRequired,
-        onChange: PropTypes.func.isRequired,
         value: PropTypes.oneOfType([
             PropTypes.string,
             PropTypes.number
@@ -23,20 +22,15 @@ class RadioGroup extends React.Component {
         container: 'div'
     }
 
-    _handleChange = (value) => {
-        this.props.onChange(value);
-    }
-
     render() {
-        var { name, onChange, value, children,
+        var { 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
+                    ...otherProps
                 });
 
                 return childContainer ? React.createElement(childContainer, {}, clonedChild) : clonedChild;

diff --git a/src/Slider.js b/src/Slider.js
@@ -4,31 +4,18 @@ 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,
-        value: PropTypes.number
-    }
-
-    _handleChange = (event) => {
-        this.props.onChange(parseFloat(event.target.value));
+        className: PropTypes.string
     }
 
     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}
             />
         );

diff --git a/src/Switch.js b/src/Switch.js
@@ -4,24 +4,17 @@ import mdlUpgrade from './utils/mdlUpgrade';
 
 class Switch extends React.Component {
     static propTypes = {
-        checked: PropTypes.bool,
         className: PropTypes.string,
-        disabled: PropTypes.bool,
         id: PropTypes.string.isRequired,
-        onChange: PropTypes.func.isRequired,
         ripple: PropTypes.bool
     }
 
     static defaultProps = {
         ripple: true
     }
 
-    _handleChange = (event) => {
-        this.props.onChange(event.target.checked);
-    }
-
     render() {
-        var { checked, className, disabled, id, ripple } = this.props;
+        var { className, id, ripple } = this.props;
         var inputId = 'switch-' + id;
 
         var classes = classNames('mdl-switch mdl-js-switch', {
@@ -34,9 +27,6 @@ class Switch extends React.Component {
                     type="checkbox"
                     id={inputId}
                     className="mdl-switch__input"
-                    checked={checked}
-                    disabled={disabled}
-                    onChange={this._handleChange}
                 />
                 <span className="mdl-switch__label">{this.props.children}</span>
             </label>

diff --git a/src/Textfield.js b/src/Textfield.js
@@ -6,15 +6,13 @@ import mdlUpgrade from './utils/mdlUpgrade';
 class Textfield extends React.Component {
     static propTypes = {
         className: PropTypes.string,
-        disabled: PropTypes.bool,
         error: PropTypes.string,
         expandable: PropTypes.bool,
         expandableIcon: PropTypes.string,
         floatingLabel: PropTypes.bool,
         inputClassName: PropTypes.string,
         label: PropTypes.string.isRequired,
         maxRows: PropTypes.number,
-        onChange: PropTypes.func,
         pattern: PropTypes.string,
         required: PropTypes.bool,
         rows: PropTypes.number,
@@ -43,14 +41,10 @@ class Textfield extends React.Component {
         }
     }
 
-    _handleChange = (e) => {
-        this.props.onChange(e.target.value);
-    }
-
     render() {
         var { className, inputClassName,
               error, expandable, expandableIcon,
-              floatingLabel, label, maxRows, onChange,
+              floatingLabel, label, maxRows,
               rows, style, value, ...otherProps } = this.props;
 
         var hasRows = !!rows;
@@ -66,8 +60,6 @@ class Textfield extends React.Component {
             ...otherProps
         };
 
-        if (onChange) inputProps.onChange = this._handleChange;
-
         var input = React.createElement(inputTag, inputProps);
 
         var inputAndLabelError = [

diff --git a/src/tabs/Tabs.js b/src/tabs/Tabs.js
@@ -13,7 +13,7 @@ class Tabs extends React.Component {
             }
         }),
         className: PropTypes.string,
-        onChange: PropTypes.func.isRequired,
+        onChange: PropTypes.func,
         ripple: PropTypes.bool
     }
 
@@ -23,7 +23,9 @@ class Tabs extends React.Component {
     }
 
     _handleClickTab = (tabId) => {
-        this.props.onChange(tabId);
+        if (this.props.onChange) {
+            this.props.onChange(tabId);
+        }
     }
 
     render() {