Infra/keyboard input view refactor 3 (#664)

* Remove two exports

* Change from TouchableOpacity to Button

* CustomKeyboardView into two files (iOS and Android)

* TextInputKeyboardManager into two files (iOS and Android)

(cherry picked from commit 1b4aa99)

* Remove logger

(cherry picked from commit b5385c8)

* Refactor - move keyboard related import under Keyboard

* Move docs to correct location

(cherry picked from commit cfbc9c1)

* Refactor - bind into ->

(cherry picked from commit 760812f)

* onToggleExpandedKeyboard is iOS only

(cherry picked from commit 4bc5cfc)

* Refactor KeyboardView

* KeyboardInputViewScreen refactor some styles etc

(cherry picked from commit eee22fc)

* onToggleExpandedKeyboard is iOS only (part 2)

(cherry picked from commit 95631b8)

* KeyboardTrackingViewScreen refactor some styles etc

(cherry picked from commit 63b2312)

* Remove duplicated code

(cherry picked from commit cdc3cee)

* Mostly prettify

(cherry picked from commit 07b975b)

* Remove unused import

(cherry picked from commit 31a8097)

* Fix broken screen links (and remove guidelines references)

(cherry picked from commit a45a0fb)

* Remove unused import

(cherry picked from commit 982ea01)

* Add documentation for KeyboardAwareInsetsView

(cherry picked from commit 6f3bfe6)

* Refactor (this.props)

(cherry picked from commit fc110bf)

* Refactor (this.state)

(cherry picked from commit 41f7f8d)

* Add most of the docs

(cherry picked from commit 47bc86d)

* Remove navigation for android

(cherry picked from commit 8fc87e2)

* Add example for onRequestShowKeyboard and requestShowKeyboard

(cherry picked from commit adf3a71)

* Remove usage of toggleExpandedKeyboard and prettify

(cherry picked from commit 56c1232)

* Complete docs

(cherry picked from commit ded2e11)

* Fix some docs

(cherry picked from commit f2402fa)

* Move iOS scroll behaviour to JS enum (from native module)

(cherry picked from commit 7a219d4)

Author: M-i-k-e-l

demo/src/screens/componentScreens/TextFieldScreen/InputsScreen.js

@@ -10,9 +10,9 @@ import {
   TextArea,
   Modal,
   Button,
-  KeyboardAwareInsetsView
+  Keyboard
 } from 'react-native-ui-lib'; //eslint-disable-line
-
+const KeyboardAwareInsetsView = Keyboard.KeyboardAwareInsetsView;
 
 const richText = require('../../../assets/icons/richText.png');
 const dropDown = require('../../../assets/icons/chevronDown.png');

demo/src/screens/nativeComponentScreens/KeyboardTrackingViewScreen.js

@@ -1,16 +1,16 @@
 import React, {PureComponent} from 'react';
 import {ScrollView, StyleSheet} from 'react-native';
 import {
+  Keyboard,
   Text,
   View,
-  KeyboardTrackingView,
   TextField,
   Image,
   Colors,
-  Spacings,
   Switch,
   Constants
 } from 'react-native-ui-lib';
+const KeyboardTrackingView = Keyboard.KeyboardTrackingView;
 
 const URIs = [
   {
@@ -41,7 +41,7 @@ export default class KeyboardTrackingViewScreen extends PureComponent {
     const {trackInteractive} = this.state;
 
     return (
-      <View style={styles.container}>
+      <View flex bg-dark80>
         <ScrollView
           contentContainerStyle={styles.scrollContainer}
           keyboardDismissMode={trackInteractive ? 'interactive' : 'none'}
@@ -58,7 +58,7 @@ export default class KeyboardTrackingViewScreen extends PureComponent {
           ))}
         </ScrollView>
         <KeyboardTrackingView style={styles.trackingToolbarContainer} trackInteractive={trackInteractive}>
-          <View centerV style={styles.inputContainer}>
+          <View centerV bg-white paddingH-s5 paddingV-s2>
             <TextField text70 placeholder={'Message'} floatingPlaceholder floatOnFocus/>
           </View>
         </KeyboardTrackingView>
@@ -68,10 +68,6 @@ export default class KeyboardTrackingViewScreen extends PureComponent {
 }
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: Colors.dark80
-  },
   scrollContainer: {
     paddingHorizontal: Spacings.s5
   },
@@ -85,10 +81,5 @@ const styles = StyleSheet.create({
     width: '100%',
     borderWidth: 1,
     borderColor: Colors.dark60
-  },
-  inputContainer: {
-    paddingHorizontal: Spacings.s5,
-    paddingVertical: Spacings.s2,
-    backgroundColor: Colors.white
   }
 });

demo/src/screens/nativeComponentScreens/keyboardInput/KeyboardInputViewScreen.js

@@ -1,74 +1,57 @@
 import React, {PureComponent} from 'react';
 import {ScrollView, StyleSheet, TextInput} from 'react-native';
-import {
-  KeyboardAccessoryView,
-  KeyboardUtils,
-  TouchableOpacity,
-  Text,
-  View,
-  KeyboardTrackingView,
-  TextField,
-  Image,
-  Colors,
-  Spacings,
-  Switch,
-  Constants,
-  Typography
-} from 'react-native-ui-lib';
-
-// import './demoKeyboards';
+import {Keyboard, Text, View, Colors, Spacings, Constants, Typography, Button} from 'react-native-ui-lib';
+const KeyboardAccessoryView = Keyboard.KeyboardAccessoryView;
+const KeyboardUtils = Keyboard.KeyboardUtils;
+
+import './demoKeyboards';
+const KeyboardRegistry = Keyboard.KeyboardRegistry;
 
 const TrackInteractive = true;
 
 export default class KeyboardInputViewScreen extends PureComponent {
-  constructor(props) {
-    super(props);
-    this.keyboardAccessoryViewContent = this.keyboardAccessoryViewContent.bind(this);
-    this.onKeyboardItemSelected = this.onKeyboardItemSelected.bind(this);
-    this.resetKeyboardView = this.resetKeyboardView.bind(this);
-    this.onKeyboardResigned = this.onKeyboardResigned.bind(this);
-
-    this.state = {
-      customKeyboard: {
-        component: undefined,
-        initialProps: undefined
-      },
-      receivedKeyboardData: undefined
-    };
-  }
+  state = {
+    customKeyboard: {
+      component: undefined,
+      initialProps: undefined
+    },
+    receivedKeyboardData: undefined
+  };
 
-  onKeyboardItemSelected(keyboardId, params) {
+  onKeyboardItemSelected = (keyboardId, params) => {
     const receivedKeyboardData = `onItemSelected from "${keyboardId}"\nreceived params: ${JSON.stringify(params)}`;
     this.setState({receivedKeyboardData});
-  }
+  };
 
-  onKeyboardResigned() {
+  onKeyboardResigned = () => {
     this.resetKeyboardView();
-  }
+  };
 
   getToolbarButtons() {
-    return [
-      {
-        text: 'show1',
-        testID: 'show1',
-        onPress: () => this.showKeyboardView('KeyboardView', 'FIRST - 1 (passed prop)')
-      },
-      {
-        text: 'show2',
-        testID: 'show2',
-        onPress: () => this.showKeyboardView('AnotherKeyboardView', 'SECOND - 2 (passed prop)')
-      },
-      {
-        text: 'reset',
-        testID: 'reset',
-        onPress: () => this.resetKeyboardView()
-      }
-    ];
+    const keyboards = KeyboardRegistry.getAllKeyboards();
+    const buttons = [];
+    for (let index = 0; index < keyboards.length; ++index) {
+      const string = `Show KB ${index + 1}`;
+      const title = `Title ${index + 1} (passed prop)`;
+      buttons.push({
+        text: string,
+        testID: string,
+        onPress: () => this.showKeyboardView(keyboards[index].id, title)
+      });
+    }
+
+    buttons.push({
+      text: 'reset',
+      testID: 'reset',
+      onPress: () => this.resetKeyboardView()
+    });
+
+    return buttons;
   }
 
-  resetKeyboardView() {
+  resetKeyboardView = () => {
     this.setState({customKeyboard: {}});
-  }
+  };
 
   showKeyboardView(component, title) {
     this.setState({
@@ -79,10 +62,16 @@ export default class KeyboardInputViewScreen extends PureComponent {
     });
   }
 
-  keyboardAccessoryViewContent() {
+  onHeightChanged = keyboardAccessoryViewHeight => {
+    if (Constants.isIOS) {
+      this.setState({keyboardAccessoryViewHeight});
+    }
+  };
+
+  keyboardAccessoryViewContent = () => {
     return (
       <View style={styles.keyboardContainer}>
-        <View style={styles.inputContainer}>
+        <View row padding-s5>
           <TextInput
             maxHeight={200}
             style={styles.textInput}
@@ -93,84 +82,82 @@ export default class KeyboardInputViewScreen extends PureComponent {
             underlineColorAndroid="transparent"
             onFocus={this.resetKeyboardView}
           />
-          <TouchableOpacity style={styles.closeButton} onPress={KeyboardUtils.dismiss}>
-            <Text>Close</Text>
-          </TouchableOpacity>
+          <Button label="Close" link onPress={KeyboardUtils.dismiss} style={styles.button}/>
         </View>
 
-        <View style={styles.keyboardModesContainer}>
+        <View row>
           {this.getToolbarButtons().map((button, index) => (
-            <TouchableOpacity onPress={button.onPress} style={styles.modeButton} key={index} testID={button.testID}>
-              <Text>{button.text}</Text>
-            </TouchableOpacity>
+            <Button label={button.text} link onPress={button.onPress} key={index} style={styles.button}/>
           ))}
         </View>
       </View>
     );
-  }
+  };
+
+  requestShowKeyboard = () => {
+    KeyboardRegistry.requestShowKeyboard('KeyboardView1');
+  };
+
+  onRequestShowKeyboard = componentID => {
+    this.setState({
+      customKeyboard: {
+        component: componentID,
+        initialProps: {title: 'Keyboard 1 opened by button'}
+      }
+    });
+  };
 
   render() {
+    const {message} = this.props;
+    const {receivedKeyboardData, customKeyboard} = this.state;
+
     return (
-      <View style={styles.container}>
+      <View flex bg-dark80>
         <ScrollView
           contentContainerStyle={styles.scrollContainer}
           keyboardDismissMode={TrackInteractive ? 'interactive' : 'none'}
         >
           <Text text40 dark10 marginV-20 center>
-            {this.props.message || 'Keyboards example'}
+            {message || 'Keyboards example'}
           </Text>
-          <Text testID={'demo-message'}>{this.state.receivedKeyboardData}</Text>
+          <Text testID={'demo-message'}>{receivedKeyboardData}</Text>
+          <Button label={'Open keyboard #1'} link onPress={this.requestShowKeyboard} style={styles.button}/>
         </ScrollView>
 
         <KeyboardAccessoryView
           renderContent={this.keyboardAccessoryViewContent}
-          onHeightChanged={Constants.isIOS ? height => this.setState({keyboardAccessoryViewHeight: height}) : undefined}
+          onHeightChanged={this.onHeightChanged}
           trackInteractive={TrackInteractive}
           kbInputRef={this.textInputRef}
-          kbComponent={this.state.customKeyboard.component}
-          kbInitialProps={this.state.customKeyboard.initialProps}
+          kbComponent={customKeyboard.component}
+          kbInitialProps={customKeyboard.initialProps}
           onItemSelected={this.onKeyboardItemSelected}
           onKeyboardResigned={this.onKeyboardResigned}
           revealKeyboardInteractive
+          onRequestShowKeyboard={this.onRequestShowKeyboard}
         />
       </View>
     );
   }
 }
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: Colors.dark80
-  },
   scrollContainer: {
     paddingHorizontal: Spacings.s5,
     flex: 1,
     justifyContent: 'center'
   },
-  inputContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    padding: Spacings.s5
-  },
   textInput: {
     flex: 1,
     padding: Spacings.s2,
     ...Typography.text70
   },
-  closeButton: {
+  button: {
     padding: Spacings.s2
   },
   keyboardContainer: {
     backgroundColor: Colors.white,
     borderWidth: 1,
     borderColor: Colors.dark60
-  },
-  keyboardModesContainer: {
-    flexDirection: 'row'
-  },
-  modeButton: {
-    padding: 5
   }
 });

demo/src/screens/nativeComponentScreens/keyboardInput/KeyboardView.js

@@ -1,43 +1,24 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-import {ScrollView, StyleSheet} from 'react-native';
-import {KeyboardRegistry, Text, TouchableOpacity} from 'react-native-ui-lib';
+import {View, Text, TouchableOpacity} from 'react-native-ui-lib';
 
 export default class KeyboardView extends Component {
   static propTypes = {
-    title: PropTypes.string
+    title: PropTypes.string,
+    backgroundColor: PropTypes.string,
+    onPress: PropTypes.func
   };
 
-  onButtonPress() {
-    KeyboardRegistry.onItemSelected('KeyboardView', {
-      message: 'item selected from KeyboardView'
-    });
-  }
-
   render() {
+    const {title, backgroundColor, onPress} = this.props;
+
     return (
-      <ScrollView contentContainerStyle={[styles.keyboardContainer, {backgroundColor: 'purple'}]}>
-        <Text style={{color: 'white'}}>HELOOOO!!!</Text>
-        <Text style={{color: 'white'}}>{this.props.title}</Text>
-        <TouchableOpacity
-          testID={'click-me'}
-          style={{padding: 20, marginTop: 30, backgroundColor: 'white'}}
-          onPress={() => this.onButtonPress()}
-        >
+      <View flex center style={backgroundColor && {backgroundColor}}>
+        <Text white>{title}</Text>
+        <TouchableOpacity testID={'click-me'} padding-20 marginT-30 bg-white onPress={onPress}>
           <Text>Click Me!</Text>
         </TouchableOpacity>
-      </ScrollView>
+      </View>
     );
   }
 }
-
-const styles = StyleSheet.create({
-  keyboardContainer: {
-    flex: 1,
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'center'
-  }
-});
-
-KeyboardRegistry.registerKeyboard('KeyboardView', () => KeyboardView); // TODO: