weechatRN

commit 2dc6a3551f996ef6bb1762761566c9528865c340
parent 1df19606ef6d7e6fe4a3c83745a19384574be2ed
Author: Matthew Horan <matt@matthoran.com>
Date:   Thu, 24 Sep 2020 21:16:23 -0400

Work around undo bug with custom TextInput

See https://github.com/facebook/react-native/issues/29572.

Diffstat:
M
src/usecase/buffers/ui/BufferContainer.tsx
 | 
5
++++-
A
src/usecase/buffers/ui/UndoTextInput.tsx
 | 
38
++++++++++++++++++++++++++++++++++++++

2 files changed, 42 insertions(+), 1 deletion(-)
diff --git a/src/usecase/buffers/ui/BufferContainer.tsx b/src/usecase/buffers/ui/BufferContainer.tsx
@@ -21,6 +21,7 @@ import { getParseArgs } from "../../../lib/helpers/parse-text-args";
 import { formatUrl } from "../../../lib/helpers/url-formatter";
 import { renderWeechatFormat } from "../../../lib/weechat/color-formatter";
 import { StoreState } from "../../../store";
+import UndoTextInput from "./UndoTextInput";
 
 interface Props {
   buffer: WeechatBuffer | null;
@@ -72,6 +73,7 @@ class BufferContainer extends React.Component<Props, State> {
       showTabButton: false
     });
   }
+
   handleOnLongPress(type, text) {
     ActionSheetIOS.showShareActionSheetWithOptions(
       {
@@ -82,6 +84,7 @@ class BufferContainer extends React.Component<Props, State> {
       () => null
     );
   }
+
   handleOnPress(type, text) {
     console.log(type, text);
     if (type === "channel") {
@@ -178,7 +181,7 @@ class BufferContainer extends React.Component<Props, State> {
           parseArgs={this.parseArgs}
         />
         <View style={styles.bottomBox}>
-          <TextInput
+          <UndoTextInput
             style={styles.inputBox}
             value={textValue}
             onChangeText={this.handleChangeText}
diff --git a/src/usecase/buffers/ui/UndoTextInput.tsx b/src/usecase/buffers/ui/UndoTextInput.tsx
@@ -0,0 +1,37 @@
+import * as React from "react";
+import { TextInput } from 'react-native';
+
+type Props = React.ComponentProps<typeof TextInput>;
+
+export default class UndoTextInput extends React.PureComponent<Props> {
+  constructor(props: Props) {
+    super(props)
+    this.value = props.value;
+  }
+
+  textInput: TextInput;
+  value: string;
+
+  componentDidUpdate() {
+    const { value } = this.props;
+    if (value !== this.value) {
+      this.textInput.setNativeProps({ text: value })
+      this.value = value;
+    }
+  }
+
+  handleChangeText = (textValue: string) => {
+    this.value = textValue;
+    this.props.onChangeText(textValue);
+  }
+
+  render() {
+    const { value, onChangeText, ...rest } = this.props;
+    return (
+        <TextInput {...rest}
+          ref={input => this.textInput = input}
+          onChangeText={this.handleChangeText}
+      />
+    );
+  }
+}
+\ No newline at end of file