Add new type for Stepper component - floating (#3247)

* Add new type for Stepper component - floating

* Add example to a floating stepper on top of an image

Author: ethanshar

demo/src/screens/componentScreens/StepperScreen.tsx

@@ -1,9 +1,15 @@
 import React, {Component} from 'react';
-import {View, Text, Stepper} from 'react-native-ui-lib'; //eslint-disable-line
+import {ScrollView} from 'react-native';
+import {View, Text, Stepper, type StepperType, Image} from 'react-native-ui-lib'; //eslint-disable-line
+import {renderMultipleSegmentOptions} from '../ExampleScreenPresenter';
+
+const IMAGE_URL =
+  'https://images.pexels.com/photos/2529148/pexels-photo-2529148.jpeg?auto=compress&cs=tinysrgb&w=600&&dpr=1';
 
 export default class StepperScreen extends Component {
   state = {
-    stepperValue: 1
+    stepperValue: 1,
+    stepperType: 'default' as StepperType
   };
 
   stepperProps = {
@@ -17,73 +23,96 @@ export default class StepperScreen extends Component {
   };
 
   render() {
-    const {stepperValue} = this.state;
+    const {stepperValue, stepperType} = this.state;
 
     return (
-      <View padding-page>
-        <Text text40 $textDefault marginB-20>
-          Stepper
-        </Text>
+      <ScrollView>
+        <View padding-page>
+          <Text text40 $textDefault>
+            Stepper
+          </Text>
 
-        <View centerV>
-          <View row spread centerV>
-            <Text text70 $textDefault>
-              Default
-            </Text>
-            <Stepper/>
-          </View>
+          {renderMultipleSegmentOptions.call(this, 'Stepper Type', 'stepperType', [
+            {label: 'Default', value: 'default'},
+            {label: 'Floating', value: 'floating'}
+          ])}
 
-          <View row spread centerV marginT-30>
-            <Text text70 $textDefault>
-              Disabled
-            </Text>
-            <Stepper disabled/>
-          </View>
-
-          <View row spread marginT-30>
-            <Text text70 $textDefault>
-              Step (0.5)
-            </Text>
-            <Stepper step={0.5}/>
-          </View>
-
-          <View row spread marginT-30>
-            <Text text70 $textDefault>
-              Small
-            </Text>
-            <Stepper small/>
-          </View>
-
-          <View marginT-30>
+          <View centerV marginT-s3>
             <View row spread centerV>
               <Text text70 $textDefault>
-                Custom
+                Default
               </Text>
-              <Stepper
-                onValueChange={this.onValueChange}
-                maxValue={this.stepperProps.maxValue}
-                minValue={this.stepperProps.minValue}
-                value={stepperValue}
-                testID={'Stepper1'}
-              />
+              <Stepper type={stepperType}/>
             </View>
-            <View padding-5>
-              <Text text80M $textDefault>
-                Stepper value: {stepperValue}
-              </Text>
-              <Text $textDefault marginT-3>
-                Initial value: {this.stepperProps.value}
+
+            <View row spread centerV marginT-30>
+              <Text text70 $textDefault>
+                Disabled
               </Text>
-              <Text $textDefault marginT-3>
-                Min value: {this.stepperProps.minValue}
+              <Stepper disabled type={stepperType}/>
+            </View>
+
+            <View row spread marginT-30>
+              <Text text70 $textDefault>
+                Step (0.5)
               </Text>
-              <Text $textDefault marginT-3>
-                Max value: {this.stepperProps.maxValue}
+              <Stepper step={0.5} type={stepperType}/>
+            </View>
+
+            <View row spread marginT-30>
+              <Text text70 $textDefault>
+                Small
               </Text>
+              <Stepper small type={stepperType}/>
+            </View>
+
+            <View marginT-30>
+              <View row spread centerV>
+                <Text text70 $textDefault>
+                  Custom
+                </Text>
+                <Stepper
+                  type={stepperType}
+                  onValueChange={this.onValueChange}
+                  maxValue={this.stepperProps.maxValue}
+                  minValue={this.stepperProps.minValue}
+                  value={stepperValue}
+                  testID={'Stepper1'}
+                />
+              </View>
+              <View padding-5>
+                <Text text80M $textDefault>
+                  Stepper value: {stepperValue}
+                </Text>
+                <Text $textDefault marginT-3>
+                  Initial value: {this.stepperProps.value}
+                </Text>
+                <Text $textDefault marginT-3>
+                  Min value: {this.stepperProps.minValue}
+                </Text>
+                <Text $textDefault marginT-3>
+                  Max value: {this.stepperProps.maxValue}
+                </Text>
+              </View>
             </View>
           </View>
+
+          <View marginT-s5 centerH>
+            <Text text70BO marginB-s2>
+              Floating Stepper
+            </Text>
+            <Image
+              source={{uri: IMAGE_URL}}
+              style={{width: 200, height: 200, borderRadius: 8, overflow: 'hidden'}}
+              customOverlayContent={
+                <View style={{position: 'absolute', top: 8, right: 8}}>
+                  <Stepper type="floating"/>
+                </View>
+              }
+            />
+          </View>
         </View>
-      </View>
+      </ScrollView>
     );
   }
 }