zoriya/react-native-web
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-web.git synced 2026-08-15 18:45:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

[add] TextInput support for "onContentSizeChange"

Browse Source 
Fix #793
Close #1226
This commit is contained in:
Alec Winograd
2019-03-11 14:14:13 -07:00
committed by Nicolas Gallagher
parent 3d3ea9aeed
commit 67979b7282
3 changed files with 33 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+1 -1
View File
@@ -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)). |
packages/react-native-web/src/exports/TextInput/index.js
Vendored
+26
View File
@@ -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();
}
};
}
packages/website/storybook/1-components/TextInput/TextInputScreen.js
+6
View File
@@ -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"