Stepper - Add step prop to control the increase and decrease level (#1330)

Author: Inbal-Tish

demo/src/screens/componentScreens/StepperScreen.js

@@ -42,6 +42,17 @@ export default class StepperScreen extends Component {
             onValueChange={count => this.setState({itemsCount: count})}
             initialValue={1}
           />
+
+          <View row center>
+            <Text text60 primary>Count:  </Text>
+            <Stepper
+              step={0.5}
+              min={1}
+              max={50}
+              onValueChange={count => this.setState({itemsCount: count})}
+              initialValue={1}
+            />
+          </View>
         </View>
       </ScrollView>
     );

src/components/stepper/index.js

@@ -14,6 +14,10 @@ import {PureBaseComponent} from '../../commons';
 export default class Stepper extends PureBaseComponent {
   static displayName = 'Stepper';
   static propTypes = {
+    /**
+     * The step to increase and decrease by (default is 1)
+     */
+    step: PropTypes.number,
     /**
      * Text to show next to the current number
      */
@@ -89,7 +93,7 @@ export default class Stepper extends PureBaseComponent {
         break;
     }
   };
-  
+
   generateStyles() {
     this.styles = createStyles(this.props.size);
   }
@@ -119,6 +123,18 @@ export default class Stepper extends PureBaseComponent {
     }
   }
 
+  get step() {
+    return this.props.step || 1;
+  }
+
+  decrease = () => {
+    this.updateValue(this.state.value - this.step);
+  }
+
+  increase = () => {
+    this.updateValue(this.state.value + this.step);
+  }
+
   render() {
     const {minusDisabled, plusDisabled, testID} = this.getDisabledState();
     return (
@@ -134,15 +150,15 @@ export default class Stepper extends PureBaseComponent {
             testID={`${testID}.decrease`}
             styles={this.styles}
             disabled={minusDisabled}
-            onPress={() => this.updateValue(this.state.value - 1)}
+            onPress={this.decrease}
           />
           <View style={this.styles.separator}/>
           <StepperButton
             label="+"
             testID={`${testID}.increase`}
             styles={this.styles}
             disabled={plusDisabled}
-            onPress={() => this.updateValue(this.state.value + 1)}
+            onPress={this.increase}
           />
         </View>
       </View>