[add] TextInput support for "onContentSizeChange"

Fix #793 Close #1226
necolas · Mar 11, 2019 · 67979b7 · 67979b7
1 parent 3d3ea9a
commit 67979b7
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -147,7 +147,7 @@ React Native v0.55
 | SwipeableListView        | ✓      |  |
 | Switch                   | ✓      |  |
 | Text                     | ✓      | Missing `onLongPress` ([#1011](https://github.com/necolas/react-native-web/issues/1011)) and `numberOfLines` ([#13](https://github.com/necolas/react-native-web/issues/13)) support. |
-| TextInput                | ✓      | Missing `onContentSizeChange` ([#793](https://github.com/necolas/react-native-web/issues/793)), rich text features ([#1023](https://github.com/necolas/react-native-web/issues/1023)), and auto-expanding behaviour ([#795](https://github.com/necolas/react-native-web/issues/795)). |
+| TextInput                | ✓      | Missing rich text features ([#1023](https://github.com/necolas/react-native-web/issues/1023)), and auto-expanding behaviour ([#795](https://github.com/necolas/react-native-web/issues/795)). |
 | Touchable                | ✓      | Includes additional support for mouse and keyboard interactions. |
 | TouchableHighlight       | ✓      |  |
 | TouchableNativeFeedback  | ✘      | Not started ([#1024](https://github.com/necolas/react-native-web/issues/1024)). |

diff --git a/packages/react-native-web/src/exports/TextInput/index.js b/packages/react-native-web/src/exports/TextInput/index.js
@@ -68,6 +68,8 @@ const setSelection = (node, selection) => {
 
 class TextInput extends Component<*> {
   _node: HTMLInputElement;
+  _nodeHeight: number;
+  _nodeWidth: number;
 
   static displayName = 'TextInput';
 
@@ -288,9 +290,30 @@ class TextInput extends Component<*> {
     }
   };
 
+  _handleContentSizeChange = () => {
+    const { onContentSizeChange, multiline } = this.props;
+    if (multiline && onContentSizeChange) {
+      const newHeight = this._node.scrollHeight;
+      const newWidth = this._node.scrollWidth;
+      if (newHeight !== this._nodeHeight || newWidth !== this._nodeWidth) {
+        this._nodeHeight = newHeight;
+        this._nodeWidth = newWidth;
+        onContentSizeChange({
+          nativeEvent: {
+            contentSize: {
+              height: this._nodeHeight,
+              width: this._nodeWidth
+            }
+          }
+        });
+      }
+    }
+  };
+
   _handleChange = e => {
     const { onChange, onChangeText } = this.props;
     const { text } = e.nativeEvent;
+    this._handleContentSizeChange();
     if (onChange) {
       onChange(e);
     }
@@ -389,6 +412,9 @@ class TextInput extends Component<*> {
 
   _setNode = component => {
     this._node = findNodeHandle(component);
+    if (this._node) {
+      this._handleContentSizeChange();
+    }
   };
 }
 

diff --git a/packages/website/storybook/1-components/TextInput/TextInputScreen.js b/packages/website/storybook/1-components/TextInput/TextInputScreen.js
@@ -206,6 +206,12 @@ const TextInputScreen = () => (
         description="Callback that is called when the text input's text changes. The text is passed as an argument to the callback handler."
       />
 
+      <DocItem
+        name="onContentSizeChange"
+        typeInfo="?function"
+        description="Callback that is called when the text input's content size changes. This will be called with { nativeEvent: { contentSize: { width, height } } }. Only called for multiline text inputs."
+      />
+
       <DocItem
         name="onFocus"
         typeInfo="?function"