weechatRN

commit c9ad9334d8a50da5fe0ae4eaf29638fb33829168
parent 4bc35b3a7b277a30cd0018fbf527a4516dfaa352
Author: Johan Lindskogen <johan.lindskogen@gmail.com>
Date:   Sun,  1 Apr 2018 16:46:06 +0200

Use KeyboardAvoidingView

Diffstat:
M
src/usecase/buffers/ui/Buffer.tsx
 | 
52
+++-------------------------------------------------
M
src/usecase/buffers/ui/BufferContainer.tsx
 | 
48
+++++++-----------------------------------------

2 files changed, 10 insertions(+), 90 deletions(-)
diff --git a/src/usecase/buffers/ui/Buffer.tsx b/src/usecase/buffers/ui/Buffer.tsx
@@ -1,23 +1,11 @@
 import * as React from "react";
-import {
-  StyleSheet,
-  Animated,
-  Keyboard,
-  FlatList,
-  View,
-  EmitterSubscription
-} from "react-native";
+import { StyleSheet, Animated, Keyboard, FlatList, View } from "react-native";
 import { connect } from "react-redux";
 import * as _ from "lodash";
 
-import AppleEasing from "react-apple-easing";
-
 import BufferLine from "./BufferLine";
 import { StoreState } from "../../../store";
 
-//const easingFunction = Easing.bezier(0.55, 0.085, 0.68, 0.53);
-const easingFunction = AppleEasing.easeIn;
-
 interface Props {
   lines: WeechatLine[];
   onLongPress: () => any;
@@ -25,47 +13,13 @@ interface Props {
   bufferId: string;
 }
 
-interface State {
-  keyboardOffset: Animated.Value;
-}
-
-class Buffer extends React.Component<Props, State> {
-  cancelKeyboardWillShow: EmitterSubscription;
-  cancelKeyboardWillHide: EmitterSubscription;
-
-  state: State = {
-    keyboardOffset: new Animated.Value(0)
-  };
-
-  componentDidMount() {
-    this.cancelKeyboardWillShow = Keyboard.addListener("keyboardWillShow", e =>
-      this._keyboardWillShow(e)
-    );
-    this.cancelKeyboardWillHide = Keyboard.addListener("keyboardWillHide", e =>
-      this._keyboardWillHide(e)
-    );
-  }
-  _keyboardWillShow(e) {
-    console.log(e);
-    Animated.timing(this.state.keyboardOffset, {
-      toValue: e.endCoordinates.height,
-      duration: e.duration,
-      easing: easingFunction
-    }).start();
-  }
-  _keyboardWillHide(e) {
-    Animated.timing(this.state.keyboardOffset, {
-      toValue: 0,
-      duration: e.duration,
-      easing: easingFunction
-    }).start();
-  }
+class Buffer extends React.Component<Props> {
   render() {
     const { lines, onLongPress, parseArgs } = this.props;
     return (
       <FlatList
         data={lines.filter(
-          line => !line.tags_array.includes("irc_smart_filter")
+          line => !_.includes(line.tags_array, "irc_smart_filter")
         )}
         inverted
         keyboardDismissMode="interactive"
diff --git a/src/usecase/buffers/ui/BufferContainer.tsx b/src/usecase/buffers/ui/BufferContainer.tsx
@@ -4,6 +4,7 @@ import {
   AlertIOS,
   LinkingIOS,
   ActionSheetIOS,
+  KeyboardAvoidingView,
   Animated,
   Keyboard,
   TextInput,
@@ -11,7 +12,6 @@ import {
   View,
   EmitterSubscription
 } from "react-native";
-import AppleEasing from "react-apple-easing";
 
 import { connect } from "react-redux";
 
@@ -22,55 +22,25 @@ import Buffer from "./Buffer";
 import { getParseArgs } from "../../../lib/helpers/parse-text-args";
 import { formatUrl } from "../../../lib/helpers/url-formatter";
 
-const easingFunction = Easing.bezier(0.55, 0.085, 0.68, 0.53);
-//const easingFunction = AppleEasing.easeIn;
-
 interface Props {
   bufferId: string;
+  fetchLinesForBuffer: (string) => void;
 }
 
 interface State {
-  keyboardOffset: Animated.Value;
   inputWidth: Animated.Value;
 }
 
 export default class BufferContainer extends React.Component<Props, State> {
-  cancelKeyboardWillShow: EmitterSubscription;
-  cancelKeyboardWillHide: EmitterSubscription;
-
   state = {
-    keyboardOffset: new Animated.Value(0),
     inputWidth: new Animated.Value(350)
   };
 
-  componentDidMount() {
-    this.cancelKeyboardWillShow = Keyboard.addListener("keyboardWillShow", e =>
-      this._keyboardWillShow(e)
-    );
-    this.cancelKeyboardWillHide = Keyboard.addListener("keyboardWillHide", e =>
-      this._keyboardWillHide(e)
-    );
-  }
-  _keyboardWillShow(e) {
-    console.log(e);
-    Animated.timing(this.state.keyboardOffset, {
-      toValue: e.endCoordinates.height,
-      duration: e.duration,
-      easing: easingFunction
-    }).start();
-  }
-  _keyboardWillHide(e) {
-    Animated.timing(this.state.keyboardOffset, {
-      toValue: 0,
-      duration: e.duration,
-      easing: easingFunction
-    }).start();
-  }
   handleOnFocus() {
     Animated.timing(this.state.inputWidth, {
       toValue: 310,
       duration: 250,
-      easing: easingFunction
+      easing: Easing.inOut(Easing.ease)
     }).start();
   }
   handleOnBlur() {
@@ -106,9 +76,7 @@ export default class BufferContainer extends React.Component<Props, State> {
     }
 
     return (
-      <Animated.View
-        style={[styles.container, { marginBottom: this.state.keyboardOffset }]}
-      >
+      <KeyboardAvoidingView style={styles.container} behavior="padding">
         <Buffer
           bufferId={bufferId}
           onLongPress={line => null}
@@ -127,13 +95,11 @@ export default class BufferContainer extends React.Component<Props, State> {
             />
           </Animated.View>
         </View>
-      </Animated.View>
+      </KeyboardAvoidingView>
     );
   }
 }
 
-const light = false;
-
 const styles = StyleSheet.create({
   topbar: {
     height: 20,
@@ -148,7 +114,7 @@ const styles = StyleSheet.create({
   },
   container: {
     flex: 1,
-    backgroundColor: light ? "#fff" : "#222"
+    backgroundColor: "#222"
   },
   main: {
     paddingVertical: 20
@@ -157,7 +123,7 @@ const styles = StyleSheet.create({
     height: 40,
     paddingHorizontal: 10,
     justifyContent: "center",
-    backgroundColor: "#aaa"
+    backgroundColor: "#333"
   },
   inputBox: {
     height: 25,