Refactor KeyboardView

Author: M-i-k-e-l

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

@@ -1,3 +1,4 @@
+import _ from 'lodash';
 import React, {PureComponent} from 'react';
 import {ScrollView, StyleSheet, TextInput} from 'react-native';
 import {
@@ -18,6 +19,7 @@ const KeyboardAccessoryView = Keyboard.KeyboardAccessoryView;
 const KeyboardUtils = Keyboard.KeyboardUtils;
 
 import './demoKeyboards';
+const KeyboardRegistry = Keyboard.KeyboardRegistry;
 
 const TrackInteractive = true;
 
@@ -40,23 +42,25 @@ export default class KeyboardInputViewScreen extends PureComponent {
   };
 
   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 = () => {

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

@@ -1,44 +1,24 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-import {ScrollView, StyleSheet} from 'react-native';
-import {Keyboard, Text, TouchableOpacity} from 'react-native-ui-lib';
-const KeyboardRegistry = Keyboard.KeyboardRegistry;
+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:

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

@@ -1,71 +1,52 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-import {ScrollView, StyleSheet} from 'react-native';
-import {Keyboard, Text, TouchableOpacity} from 'react-native-ui-lib';
+import {Keyboard, Colors} from 'react-native-ui-lib';
 const KeyboardRegistry = Keyboard.KeyboardRegistry;
+import KeyboardView from './KeyboardView';
 
-class KeyboardView extends Component {
+class KeyboardView1 extends Component {
   static propTypes = {
     title: PropTypes.string
   };
 
   onButtonPress() {
-    KeyboardRegistry.onItemSelected('KeyboardView', {
+    KeyboardRegistry.onItemSelected('KeyboardView1', {
       message: 'item selected from KeyboardView'
     });
   }
 
   render() {
+    const {title} = 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()}
-        >
-          <Text>Click Me!</Text>
-        </TouchableOpacity>
-      </ScrollView>
+      <KeyboardView
+        title={title}
+        backgroundColor={Colors.violet10}
+        onPress={this.onButtonPress}
+      />
     );
   }
 }
 
-class AnotherKeyboardView extends Component {
+class KeyboardView2 extends Component {
   static propTypes = {
     title: PropTypes.string
   };
 
   onButtonPress() {
-    KeyboardRegistry.toggleExpandedKeyboard('AnotherKeyboardView');
+    KeyboardRegistry.toggleExpandedKeyboard('KeyboardView2');
   }
 
   render() {
+    const {title} = this.props;
     return (
-      <ScrollView contentContainerStyle={[styles.keyboardContainer, {backgroundColor: 'orange'}]}>
-        <Text>*** ANOTHER ONE ***</Text>
-        <Text>{this.props.title}</Text>
-        <TouchableOpacity
-          testID={'toggle-fs'}
-          style={{padding: 20, marginTop: 30, backgroundColor: 'white'}}
-          onPress={() => this.onButtonPress()}
-        >
-          <Text>Toggle Full-Screen!</Text>
-        </TouchableOpacity>
-      </ScrollView>
+      <KeyboardView
+        title={title}
+        backgroundColor={Colors.yellow20}
+        onPress={this.onButtonPress}
+      />
     );
   }
 }
 
-const styles = StyleSheet.create({
-  keyboardContainer: {
-    flex: 1,
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'center'
-  }
-});
-
-KeyboardRegistry.registerKeyboard('KeyboardView', () => KeyboardView);
-KeyboardRegistry.registerKeyboard('AnotherKeyboardView', () => AnotherKeyboardView);
+KeyboardRegistry.registerKeyboard('KeyboardView1', () => KeyboardView1);
+KeyboardRegistry.registerKeyboard('KeyboardView2', () => KeyboardView2);