Support selectable={true} property on Text fields on Android.
Summary: Explain the **motivation** for making this change. What existing problem does the pull request solve? This adds support for a text field that the user can click-and-drag to select text (which can then be copied using the native selected-text-hover-widget). I'd love to add this to iOS too, but iOS appears to draw glyphs directly to the screen for its <Text> widget (versus using UITextField), so it might be too difficult to support there. But at least I can support my Android users with this change. Let me know if/what kind of "demonstrate the code is solid" you would like for this. A screenshot of selected text with this property set? Closes https://github.com/facebook/react-native/pull/8028 Differential Revision: D3474196 Pulled By: bestander fbshipit-source-id: 8d3656681265a0e6229bfa13ff2ae021e894d3cd
This commit is contained in:
parent
590f90fe2e
commit
6cd712713b
|
@ -378,6 +378,11 @@ var TextExample = React.createClass({
|
||||||
No maximum lines specified no matter now much I write here. If I keep writing it{"'"}ll just keep going and going
|
No maximum lines specified no matter now much I write here. If I keep writing it{"'"}ll just keep going and going
|
||||||
</Text>
|
</Text>
|
||||||
</UIExplorerBlock>
|
</UIExplorerBlock>
|
||||||
|
<UIExplorerBlock title="selectable attribute">
|
||||||
|
<Text selectable={true}>
|
||||||
|
This text is selectable if you click-and-hold, and will offer the native Android selection menus.
|
||||||
|
</Text>
|
||||||
|
</UIExplorerBlock>
|
||||||
<UIExplorerBlock title="Inline images">
|
<UIExplorerBlock title="Inline images">
|
||||||
<Text>
|
<Text>
|
||||||
This text contains an inline image <Image source={require('./flux.png')}/>. Neat, huh?
|
This text contains an inline image <Image source={require('./flux.png')}/>. Neat, huh?
|
||||||
|
|
|
@ -31,6 +31,7 @@ const viewConfig = {
|
||||||
numberOfLines: true,
|
numberOfLines: true,
|
||||||
lineBreakMode: true,
|
lineBreakMode: true,
|
||||||
allowFontScaling: true,
|
allowFontScaling: true,
|
||||||
|
selectable: true,
|
||||||
}),
|
}),
|
||||||
uiViewClassName: 'RCTText',
|
uiViewClassName: 'RCTText',
|
||||||
};
|
};
|
||||||
|
@ -95,6 +96,11 @@ const Text = React.createClass({
|
||||||
* This function is called on long press.
|
* This function is called on long press.
|
||||||
*/
|
*/
|
||||||
onLongPress: React.PropTypes.func,
|
onLongPress: React.PropTypes.func,
|
||||||
|
/**
|
||||||
|
* Lets the user select text, to use the native copy and paste functionality.
|
||||||
|
* @platform android
|
||||||
|
*/
|
||||||
|
selectable: React.PropTypes.bool,
|
||||||
/**
|
/**
|
||||||
* When true, no visual change is made when text is pressed down. By
|
* When true, no visual change is made when text is pressed down. By
|
||||||
* default, a gray oval highlights the text on press down.
|
* default, a gray oval highlights the text on press down.
|
||||||
|
|
|
@ -112,6 +112,11 @@ public class ReactTextViewManager extends BaseViewManager<ReactTextView, ReactTe
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ReactProp(name = "selectable")
|
||||||
|
public void setSelectable(ReactTextView view, boolean isSelectable) {
|
||||||
|
view.setTextIsSelectable(isSelectable);
|
||||||
|
}
|
||||||
|
|
||||||
@Override
|
@Override
|
||||||
public void updateExtraData(ReactTextView view, Object extraData) {
|
public void updateExtraData(ReactTextView view, Object extraData) {
|
||||||
ReactTextUpdate update = (ReactTextUpdate) extraData;
|
ReactTextUpdate update = (ReactTextUpdate) extraData;
|
||||||
|
|
Loading…
Reference in New Issue