Merge branch 'master' into infra/typescript-page-control

* master:
  Fix missed issue with migrating Picker API - PickerItem needs to retrieve the correct value format
  Add Slider testID (#999)
  Remove declaration of ref type on TouchableOpacity
  convert three digit hex to six (#976)
  Fix/text field right icon alignment (#997)
  migrate Switch to TS (#991)
  Move from KeyboardAwareListView to KeyboardAwareFlatList (#960)
  Update constants typings
  migrate ActionBar to TS (#987)
  Do not notify the user onPageChange for the fake page (fix autoscroll on Android bug) (#994)
  Add progress type for ProgressBarProps (#996)
  Fix generated JS files to include propTypes (#995)

# Conflicts:
#	generatedTypes/components/touchableOpacity/index.d.ts

Author: M-i-k-e-l

demo/src/screens/componentScreens/ActionBarScreen.js renamed to demo/src/screens/componentScreens/ActionBarScreen.tsx

@@ -8,7 +8,6 @@ import tags from '../../assets/icons/tags.png';
 import collections from '../../assets/icons/collections.png';
 import richText from '../../assets/icons/richText.png';
 
-
 export default class ActionBarScreen extends Component {
 
   constructor(props) {

demo/src/screens/componentScreens/KeyboardAwareScrollViewScreen.js

@@ -1,204 +1,164 @@
+import _ from 'lodash';
 import React, {Component} from 'react';
-import {StyleSheet, TouchableHighlight, RecyclerViewBackedScrollView} from 'react-native';
+import {StyleSheet} from 'react-native';
 import {
-  Button,
   Colors,
   KeyboardAwareScrollView,
-  KeyboardAwareListView,
+  KeyboardAwareFlatList,
   TextField,
   Text,
   Typography,
   View
 } from 'react-native-ui-lib';
+import {renderBooleanOption} from '../ExampleScreenPresenter';
 
-const LOREM_IPSUM =
-  'Lorem ipsum dolor sit amet, ius ad pertinax oportere accommodare, an vix civibus corrumpit referrentur. Te nam case ludus inciderint, te mea facilisi adipiscing. Sea id integre luptatum. In tota sale consequuntur nec. Erat ocurreret mei ei. Eu paulo sapientem vulputate est, vel an accusam intellegam interesset. Nam eu stet pericula reprimique, ea vim illud modus, putant invidunt reprehendunt ne qui.';
-const hashCode = function (str) {
-  let hash = 15;
-  for (let ii = str.length - 1; ii >= 0; ii--) {
-    // eslint-disable-next-line no-bitwise
-    hash = (hash << 5) - hash + str.charCodeAt(ii);
+const data = [
+  {
+    placeholder: 'First Name',
+    ref: '_firstNameTI',
+    nextRef: '_lastNameTI'
+  },
+  {
+    placeholder: 'Last Name',
+    ref: '_lastNameTI',
+    nextRef: '_countryTI'
+  },
+  {
+    placeholder: 'Country',
+    ref: '_countryTI',
+    nextRef: '_stateTI'
+  },
+  {
+    placeholder: 'State',
+    ref: '_stateTI',
+    nextRef: '_addrTI'
+  },
+  {
+    placeholder: 'Address',
+    ref: '_addrTI',
+    nextRef: '_emailTI'
+  },
+  {
+    placeholder: 'Email',
+    keyboardType: 'email-address',
+    ref: '_emailTI',
+    nextRef: '_msgTI'
+  },
+  {
+    placeholder: 'Message',
+    ref: '_msgTI',
+    nextRef: '_notesTI'
+  },
+  {
+    placeholder: 'Notes',
+    ref: '_notesTI'
   }
-  return hash;
-};
+];
 
 export default class KeyboardAwareScrollViewScreen extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      listToggle: false,
-      data: {}
+      isFlatList: false
     };
   }
 
-  _genRows(pressData) {
-    const dataBlob = [];
-    for (let ii = 0; ii < 10; ii++) {
-      const pressedText = pressData[ii] ? ' (pressed)' : '';
-      dataBlob.push('Row ' + ii + pressedText);
-    }
-    return dataBlob;
-  }
-
-  _renderRow(rowData, sectionID, rowID) {
-    const rowHash = Math.abs(hashCode(rowData));
+  renderItem = (data) => {
+    const {isFlatList} = this.state;
+    const item = isFlatList ? data.item : data;
+    const {placeholder, ref, nextRef, keyboardType} = item;
+    const returnKeyType = nextRef ? 'next' : 'go';
+    const onSubmitEditing = nextRef ? () => this[nextRef].focus() : undefined;
     return (
-      <TouchableHighlight>
-        <View>
-          <View style={styles.row}>
-            <Text style={styles.text}>{rowData + ' - ' + LOREM_IPSUM.substr(0, (rowHash % 301) + 10)}</Text>
-          </View>
-          <View style={{backgroundColor: Colors.white}}>
-            <TextField style={[styles.text, {borderWidth: 0.5}]} placeholder={'Text goes here'}/>
-          </View>
-        </View>
-      </TouchableHighlight>
+      <TextField
+        key={placeholder}
+        text70R
+        placeholder={placeholder}
+        ref={(r) => {
+          this[ref] = r;
+        }}
+        returnKeyType={returnKeyType}
+        keyboardType={keyboardType}
+        onSubmitEditing={onSubmitEditing}
+      />
     );
-  }
+  };
+
+  keyExtractor = (item) => item.placeholder;
 
-  _renderBodyButton(bodyHeaderTitle) {
+  renderKeyboardAwareFlatList() {
     return (
-      <Button
-        text80
-        link
-        label={bodyHeaderTitle}
-        labelStyle={{color: Colors.black}}
-        onPress={() => this.setState({listToggle: !this.state.listToggle})}
-        style={styles.topButton}
+      <KeyboardAwareFlatList
+        showsVerticalScrollIndicator={false}
+        keyboardDismissMode="interactive"
+        keyboardShouldPersistTaps="always"
+        data={data}
+        contentContainerStyle={{paddingTop: 20}}
+        keyExtractor={this.keyExtractor}
+        renderItem={this.renderItem}
+        getTextInputRefs={() => {
+          return [
+            this._firstNameTI,
+            this._lastNameTI,
+            this._countryTI,
+            this._stateTI,
+            this._addrTI,
+            this._emailTI,
+            this._msgTI,
+            this._notesTI
+          ];
+        }}
       />
     );
   }
 
-  _renderKeyboardAwareListView() {
+  renderKeyboardAwareScrollView() {
     return (
-      <View style={styles.container}>
-        {this._renderBodyButton('Switch to ScrollView')}
-        <KeyboardAwareListView
-          keyboardDismissMode="interactive"
-          keyboardShouldPersistTaps="always"
-          dataSource={this.state.data}
-          renderRow={this._renderRow}
-          renderScrollComponent={props => <RecyclerViewBackedScrollView {...props}/>}
-          renderSeparator={(sectionID, rowID) => <View key={`${sectionID}-${rowID}`} style={styles.separator}/>}
-        />
-      </View>
+      <KeyboardAwareScrollView
+        showsVerticalScrollIndicator={false}
+        keyboardDismissMode="interactive"
+        keyboardShouldPersistTaps="always"
+        getTextInputRefs={() => {
+          return [
+            this._firstNameTI,
+            this._lastNameTI,
+            this._countryTI,
+            this._stateTI,
+            this._addrTI,
+            this._emailTI,
+            this._msgTI,
+            this._notesTI
+          ];
+        }}
+      >
+        {_.map(data, (item) => this.renderItem(item))}
+      </KeyboardAwareScrollView>
     );
   }
 
-  _renderKeyboardAwareScrollView() {
+  render() {
+    const {isFlatList} = this.state;
+    const switchText = `${
+      isFlatList ? 'KeyboardAwareFlatList' : 'KeyboardAwareScrollView'
+    }`;
     return (
       <View style={styles.container}>
         <Text text65 marginB-20>
-          KeyboardAwareScrollView
+          KeyboardAware example form
         </Text>
-        <Text text65R style={{marginBottom: 10}}>Example Form</Text>
-
-        {this.state.listToggle && this._renderBodyButton('Switch to ListView')}
-        <KeyboardAwareScrollView
-          showsVerticalScrollIndicator={false}
-          keyboardDismissMode="interactive"
-          keyboardShouldPersistTaps="always"
-          getTextInputRefs={() => {
-            return [
-              this._firstNameTI,
-              this._lastNameTI,
-              this._countryTI,
-              this._stateTI,
-              this._addrTI,
-              this._emailTI,
-              this._msgTI,
-              this._notesTI
-            ];
-          }}
-        >
-          <TextField
-            style={styles.TextField}
-            placeholder={'First Name'}
-            ref={r => {
-              this._firstNameTI = r;
-            }}
-            returnKeyType={'next'}
-            onSubmitEditing={event => this._lastNameTI.focus()}
-          />
-          <TextField
-            style={styles.TextField}
-            placeholder={'Last Name'}
-            ref={r => {
-              this._lastNameTI = r;
-            }}
-            returnKeyType={'next'}
-            onSubmitEditing={event => this._countryTI.focus()}
-          />
-          <TextField
-            style={styles.TextField}
-            placeholder={'Country'}
-            ref={r => {
-              this._countryTI = r;
-            }}
-            returnKeyType={'next'}
-            onSubmitEditing={event => this._stateTI.focus()}
-          />
-          <TextField
-            style={styles.TextField}
-            placeholder={'State'}
-            ref={r => {
-              this._stateTI = r;
-            }}
-            returnKeyType={'next'}
-            onSubmitEditing={event => this._addrTI.focus()}
-          />
-          <TextField
-            style={styles.TextField}
-            placeholder={'Address'}
-            ref={r => {
-              this._addrTI = r;
-            }}
-            returnKeyType={'next'}
-            onSubmitEditing={event => this._emailTI.focus()}
-          />
-          <TextField
-            style={styles.TextField}
-            keyboardType="email-address"
-            placeholder={'Email'}
-            ref={r => {
-              this._emailTI = r;
-            }}
-            returnKeyType={'next'}
-            onSubmitEditing={event => this._msgTI.focus()}
-          />
-          <TextField
-            style={styles.TextField}
-            placeholder={'Message'}
-            ref={r => {
-              this._msgTI = r;
-            }}
-            returnKeyType={'next'}
-            onSubmitEditing={event => this._notesTI.focus()}
-          />
-          <TextField
-            style={styles.TextField}
-            placeholder={'Notes'}
-            ref={r => {
-              this._notesTI = r;
-            }}
-            returnKeyType={'go'}
-          />
-        </KeyboardAwareScrollView>
+        {renderBooleanOption.call(this, switchText, 'isFlatList')}
+        <View height={40}/>
+        {isFlatList
+          ? this.renderKeyboardAwareFlatList()
+          : this.renderKeyboardAwareScrollView()}
       </View>
     );
   }
-
-  render() {
-    if (this.state.listToggle) {
-      return this._renderKeyboardAwareListView();
-    } else {
-      return this._renderKeyboardAwareScrollView();
-    }
-  }
 }
 
 const styles = StyleSheet.create({
   container: {
+    flex: 1,
     padding: 20
   },
   TextField: {

demo/src/screens/componentScreens/SwitchScreen.js renamed to demo/src/screens/componentScreens/SwitchScreen.tsx

@@ -15,20 +15,20 @@ class SwitchScreen extends Component {
     return (
       <View flex bottom padding-20>
         <View flex center>
-          <Switch testID="switch" value={this.state.value1} onValueChange={value1 => this.setState({value1})} style={{marginBottom: 20}}/>
+          <Switch testID="switch" value={this.state.value1} onValueChange={(value1: boolean) => this.setState({value1})} style={{marginBottom: 20}}/>
           <Switch
             onColor={Colors.purple30}
             offColor={Colors.purple60}
             value={this.state.value2}
-            onValueChange={value2 => this.setState({value2})}
+            onValueChange={(value2: boolean) => this.setState({value2})}
             style={{marginBottom: 20}}
           />
           <Switch
             width={80}
             height={38}
             thumbSize={34}
             value={this.state.value3}
-            onValueChange={value3 => this.setState({value3})}
+            onValueChange={(value3: boolean) => this.setState({value3})}
             style={{marginBottom: 20}}
           />
           <Switch
@@ -39,21 +39,21 @@ class SwitchScreen extends Component {
             offColor={Colors.dark60}
             thumbColor={Colors.dark10}
             value={this.state.value4}
-            onValueChange={value4 => this.setState({value4})}
+            onValueChange={(value4: boolean) => this.setState({value4})}
             style={{marginBottom: 20}}
           />
           <View row marginB-20>
             <Text text70 centerV>Disabled: </Text>
             <Switch
               disabled
               value={this.state.value5}
-              onValueChange={value5 => this.setState({value5})}
+              onValueChange={(value5: boolean) => this.setState({value5})}
               style={{marginRight: 10}}
             />
             <Switch
               disabled
               value={!this.state.value5}
-              onValueChange={value5 => this.setState({value5})}
+              onValueChange={(value5: boolean) => this.setState({value5})}
             />
           </View>
         </View>