I want when I touch a word inside a text component get that word an handle it , for example console.log(SelectedWord)
There is react-native-selectable-text library , but this library change native copy paste function and work with longPress word in text
sample code :
import { SelectableText } from "#alentoma/react-native-selectable-text";
// Use normally, it is a drop-in replacement for react-native/Text
<SelectableText
menuItems={["Foo", "Bar"]}
/*
Called when the user taps in a item of the selection menu:
- eventType: (string) is the label
- content: (string) the selected text portion
- selectionStart: (int) is the start position of the selected text
- selectionEnd: (int) is the end position of the selected text
*/
onSelection={({ eventType, content, selectionStart, selectionEnd }) => {}}
value="I crave star damage"
/>;
how can I handle word in text with touch? not longPress and change native copy paste function
and I do not want split text to words an return many text component Because it slows down the loading of the screen very much
Related
I reformat a string to Mobile number format '(123) 456-7890' while user enter number input.
When the Text input has value like '(123) 4' and the user moves the cursor after 3.
'(123|) 4' (| => consider this as cursor) and deletes the 3 by click backspace, i reformat the string by also deleting the ') '. so it will look like this '(124'.
This formatting part works fine. only problem is the cursor moves to position '(1|24' (next to 1). expected cursor position is '(12|4'
To handle the cursor position i added the selection and onSelectionChange props to my TextInput.
<TextInput
keyboardType="number-pad"
selection= {mySelection}
onSelectionChange={handleMySelection}
value={number}
onChangeText={(text) => {formatNumber(text); }}
/>
const [mySelection, updateMySelection] = useState({start : 0, end: 0});
const handleMySelection = ({ nativeEvent: { selection, text } }) =>{
updateMySelection(selection);
}
by just adding the above selection and onSelectionChange, the cursor flickers when i enter the number faster. Especially where i add bracket, space and hyphen while formatting text. By flickers, i mean cursor position changing to previous position, not updating instantly.
Even though, i didn't add any additional functionality to handleMySelection(), this flickering occurs. when i comment the selection and onSelectionChange, cursor flickering doesn't occur and the input works smoothly.
Please suggest a solution to position the cursor at desired position without cursor flicker.
as the doc says: ellipsizemode props defines how text will be truncated. in my case, i want to show a expand button instead of ellipsis glyph, and i could expand the text to show all of them by press the button.
so i want to figure out how numberOfLines actually works in Text component in react-native. then i could archive this, anyone could help?
It will show your content in <Text> component which is fitted in those numberOfLines.
With output you are expecting or want to perform, you can use dynamic numberOfLines using state.
Just have that state variable default value of lineNumbers and change it when pressing on button or any other component.
this.state = {
lineNumbers: 2
}
This indicates your numberOfLines will be default 2, and once user press on button or read more
this.setState({lineNumbers: null})
It will show whole content.
<Text numberOfLines={this.state.lineNumbers}>
I have two editors on the screen, one read-only. What I want to do is allow the user to select content from the read-only editor and paste it into the current position of the other by clicking a button. (the logic may manipulate the text which is one reason I don't want to use the system's clipboard.)
So far I have the function that is able to paste the text like as follows. (I am using the Angular wrapper which explains the presence of the CKEditorComponent reference.
doPaste(pasteEvent: PasteEvent, editorComponent: CKEditorComponent) {
const editor = editorComponent.editorInstance;
editor.model.change(writer => {
writer.insertText(pasteEvent.text, editor.model.document.selection.getFirstPosition() );
});
}
What I can't find from the documentation is how to extract the selected text. What I have so far is:
clickPasteSelectedPlain(editorComponent: CKEditorComponent) {
const editor = editorComponent.editorInstance;
const selection = editor.model.document.selection;
console.log('clickPasteAll selection', selection);
console.log('clickPasteAll selectedcontent', editor.model.document.getSelectedContent);
}
The selection appears to change depending on what is selected in the editor's view. The getSelectedContent function is undefined. How do I get the content?
With a bit of poking around I figured out how to do this. I'll document it here on the chance that it will help someone down the road avoid the process of discovery that I went through.
On the source document I have a ckeditor element like this:
<div *ngIf="document">
<ckeditor #ckEditor
[editor]="Editor" [config]="ckconfig" [disabled]="true"
[(ngModel)]="document.text"></ckeditor>
<button mat-flat-button (click)="clickPasteSelectedPlain(ckEditor)">Paste Selected Text Plain</button>
</div>
In the component the function called on the click event is like this:
#Output() paste = new EventEmitter<PasteEvent>();
...
clickPasteSelectedPlain(editorComponent: CKEditorComponent) {
const editor = editorComponent.editorInstance;
this.paste.emit({
content: editor.model.getSelectedContent(editor.model.document.selection),
obj: this.document,
quote: false
});
}
The PasteEvent is defined as an exported interface which I will omit here to save space. The content key will refer to a DocumentFragment.
Note that I am passing the CKEditorComponent as a parameter. You could also access it via an Angular #ViewChild declaration but note that my ckeditor is inside an *ngIf structure. I think that works well in Angular 6 but in the past I have had difficulty with #ViewChild references when the target was conditionally in the DOM. This method always works but use whatever method you want.
The event fired by the emit is processed with a method that looks like this:
doPaste(pasteEvent: PasteEvent, editorComponent: CKEditorComponent) {
const editor = editorComponent.editorInstance;
editor.model.insertContent(pasteEvent.content);
}
Because the content is a DocumentFragment the paste operation will include all formatting and text attributes contained in the selected source. But that's all there is to it.
I am using Tcomb Form Native for forms and putting auto tag for placeholder in the options. However I would like to change the style for the text displayed. Is it possible to change that ?
var options = {
auto: 'placeholders',
};
<TextInput/> takes a prop of placeholderTextColor additionally the placeholder text should inherit whatever styles you put on the TextInput see the following example here: https://rnplay.org/apps/Yyfuag
Does anyone know if it is possible to have multiple icon buttons on a Sencha Touch list item that listen to different events? If so, how can I accomplish this?
For instance, say I have a list of people and there's an icon for email, phone and a map to their location for each person. I want to show 3 small icons and be able to map each icon to do 3 separate actions.
This depends on how you are creating your buttons.
If the buttons are simple HTML using itemTpl, you can just listen to the itemtap event on List and use the event argument to detect which button you pressed. You could do this via a custom attribute or even a className:
myListItemTapListener: function(list, index, target, e) {
var el = Ext.get(e.getTarget());
if (el.hasClass('map')) {
this.navigate(index);
} else if(el.hasClass('email')) {
this.email(index);
} else if(el.hasClass('phone')) {
this.phone(index);
}
}
If your buttons are actual Ext.Button's inside a component List, you can simply add a listener onto each button when you create the component. There is an example of how to do this in the DataView Guide in the Sencha Docs.
Component DataView may help you. You can see this [guide]: http://docs.sencha.com/touch/2-0/#!/guide/dataview-section-4
I have wrote a [demo]: https://github.com/hs3180/Sencha-Touch-Component-DataView
, in app/view/,
Main.js, a dataview component with useComponets true, and set defaultType to 'demo.view.Item'.
Item.js, a DataItem, the visible content of each item is a panel ( in Card.js ). I use datamap to link name in record ( within store ) to userName ( in demo.view.Card ).
Card.js, a Panel for each person. A user name title and 3 buttons.