Refactor component to be more functional

Author: davidchin

.eslintrc

@@ -11,8 +11,9 @@ rules:
   semi:
     - 2
     - always
-  react/no-did-update-set-state:
-    - 0
+  react/jsx-boolean-value:
+    - 2
+    - always
   react/sort-comp:
     - 2
     - order

README.md

@@ -77,7 +77,7 @@ disabled                |boolean                  |Disabled or not
 maxValue                |number                   |Maximum value it can accept
 minValue                |number                   |Minimum value it can accept
 name                    |string                   |Name of `form` input
-onChange                |Function                 |`onChange` callback
+onChange                |Function                 |`onChange` callback (required)
 step                    |number                   |Increment/decrement value
 value                   |number                   |Current value
 values                  |Object                   |Current range of values

example/js/App.js

@@ -7,26 +7,46 @@ class App extends React.Component {
 
     this.state = {
       value: 5,
+      value2: null,
+      value3: 10,
       values: {
         min: 5,
         max: 10,
       },
+      values2: {
+        min: null,
+        max: null,
+      }
     };
   }
 
   handleValuesChange(component, values) {
-    console.log(values);
-
     this.setState({
       values: values,
     });
   }
 
+  handleValues2Change(component, values) {
+    this.setState({
+      values2: values,
+    });
+  }
+
   handleValueChange(component, value) {
-    console.log(value);
+    this.setState({
+      value: value || 0,
+    });
+  }
+
+  handleValue2Change(component, value) {
+    this.setState({
+      value2: value || 0,
+    });
+  }
 
+  handleValue3Change(component, value) {
     this.setState({
-      value: value,
+      value3: value || 0,
     });
   }
 
@@ -42,34 +62,39 @@ class App extends React.Component {
         <InputRange
           maxValue={20}
           minValue={0}
-          values={this.state.values}
-          onChange={this.handleValuesChange.bind(this)}
+          value={this.state.value}
+          onChange={this.handleValueChange.bind(this)}
         />
 
         <InputRange
           maxValue={20}
           minValue={0}
-          defaultValues={defaultValues}
+          values={this.state.values}
+          onChange={this.handleValuesChange.bind(this)}
         />
 
         <InputRange
           maxValue={20}
           minValue={0}
-          value={this.state.value}
-          onChange={this.handleValueChange.bind(this)}
+          value={this.state.value2}
+          defaultValue={defaultValue}
+          onChange={this.handleValue2Change.bind(this)}
         />
 
         <InputRange
           maxValue={20}
           minValue={0}
-          defaultValue={defaultValue}
+          values={this.state.values2}
+          defaultValues={defaultValues}
+          onChange={this.handleValues2Change.bind(this)}
         />
 
         <InputRange
           maxValue={20}
           minValue={0}
           disabled={true}
-          defaultValue={defaultValue}
+          value={this.state.value3}
+          onChange={this.handleValue3Change.bind(this)}
         />
       </form>
     );