Stepper new design (#1547)

* Stepper - new component design and API

* types

* export types

* fix parameter

* fix typings exports

* fix imports

* removing unused imports

* fix imports

Author: Inbal-Tish

demo/src/screens/componentScreens/StepperScreen.js

@@ -0,0 +1,70 @@
+import React, {Component} from 'react';
+import {View, Text, Stepper} from 'react-native-ui-lib'; //eslint-disable-line
+
+
+export default class StepperScreen extends Component {
+  state = {
+    stepperValue: 1
+  };
+
+  stepperProps = {
+    minValue: 0,
+    maxValue: 3,
+    value: 1
+  };
+
+  onValueChange = (value: number, _?: string) => {
+    this.setState({stepperValue: value});
+  };
+
+  render() {
+    const {stepperValue} = this.state;
+
+    return (
+      <View padding-page>
+        <Text text40 marginB-20>Stepper</Text>
+
+        <View centerV>
+          <View row spread centerV>
+            <Text text70>Default</Text>
+            <Stepper/>
+          </View>
+
+          <View row spread centerV marginT-30>
+            <Text text70>Disabled</Text>
+            <Stepper disabled/>
+          </View>
+
+          <View row spread marginT-30>
+            <Text text70>Step (0.5)</Text>
+            <Stepper step={0.5}/>
+          </View>
+
+          <View row spread marginT-30>
+            <Text text70>Small</Text>
+            <Stepper small/>
+          </View>
+
+          <View marginT-30>
+            <View row spread centerV>
+              <Text text70>Custom</Text>
+              <Stepper
+                onValueChange={this.onValueChange}
+                maxValue={this.stepperProps.maxValue}
+                minValue={this.stepperProps.minValue}
+                value={stepperValue}
+                testID={'Stepper1'}
+              />
+            </View>
+            <View padding-5>
+              <Text text80M>Stepper value: {stepperValue}</Text>
+              <Text marginT-3>Initial value: {this.stepperProps.value}</Text>
+              <Text marginT-3>Min value: {this.stepperProps.minValue}</Text>
+              <Text marginT-3>Max value: {this.stepperProps.maxValue}</Text>
+            </View>
+          </View>
+        </View>
+      </View>
+    );
+  }
+}

demo/src/screens/componentScreens/StepperScreen.tsx

@@ -35,6 +35,7 @@ export {default as View, ViewProps} from './src/components/view';
 export {default as Text, TextProps} from './src/components/text';
 export {default as TouchableOpacity, TouchableOpacityProps} from './src/components/touchableOpacity';
 export {default as Button, ButtonSize, ButtonProps} from './src/components/button';
+export {default as Stepper, StepperProps} from './src/components/stepper';
 export {default as Checkbox, CheckboxProps} from './src/components/checkbox';
 export {default as Chip, ChipProps} from './src/components/chip';
 export {default as ColorPicker, ColorPickerProps} from './src/components/colorPicker';
@@ -92,7 +93,6 @@ export {
   MaskedInput,
   ProgressBar,
   ColorSliderGroup,
-  Stepper,
   ChipsInput,
   SharedTransition,
   Toast,

generatedTypes/index.d.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+interface Props {
+    /**
+     * Initial value of the Stepper.
+     */
+    value?: number;
+    /**
+     * Minimum value.
+     */
+    minValue?: number;
+    /**
+     * Maximum value.
+     */
+    maxValue?: number;
+    /**
+     * The step to increase and decrease by (default is 1)
+     */
+    step?: number;
+    /**
+     * On value change callback function
+     */
+    onValueChange?: (value: number, testID?: string) => void;
+    /**
+     * disables interaction with the stepper
+     */
+    disabled?: boolean;
+    /**
+     * Renders a small sized Stepper
+     */
+    small?: boolean;
+    /**
+     * Component accessibility label
+     */
+    accessibilityLabel?: string;
+    /**
+     * Test id for component
+     */
+    testID?: string;
+}
+export declare type StepperProps = Props;
+declare const _default: React.ComponentClass<Props & {
+    useCustomTheme?: boolean | undefined;
+}, any>;
+export default _default;