Support a callback function to detect text changes
reggie3 opened this issue · comments
Is your feature request related to a problem? Please describe.
It would be useful to detect changes in the text content of the box.
Describe the solution you'd like
I propose adding an onChangeText prop that would receive the text contents of the control when those contents change
Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.
It would be accessed like this:
<DragTextEditor
...
onChangeText={(text: string) => console.log(text)}
/>
It would require the following code to be added to DragTextEditor.js
:
componentDidUpdate(prevProps, prevState){
if(this.state.text !== prevState.text){
if(this.props.onChangeText){
this.props.onChangeText(this.state.text);
}
}
}
Additional context
I can submit a PR if this works for you @eneskarpuz
Thanks @reggie3. I agree, it would be useful. I'm waiting for your PR to merge but you'd better check these before you submit a PR;
1- I'm not sure about using type annotations like (text: string)
.
onChangeText={(text) => console.log(text)}
isn't it better ?
2- You can add your Callback Function to onText
function on DragTextEditor.js like;
onText=(text)=>{
...
const {
onChangeText,
} = this.props;
if ( text && onChangeText ){
onChangeText(text);
}
}
Sorry about the string annotation, I copied and pasted the code sample from a typescript file.
It makes sense to use the functionality you already have to implement the callback. I'll submit a PR based on what you said above.
@eneskarpuz How about this:
onText = (text) => {
this.setState({ text }, () => {
if (text && this.props.onChangeText) {
this.props.onChangeText(this.state.text);
}
});
};
This way, the data sent back from the callback is in sync with what is in the component state.
Thanks @reggie3! Looks like a good idea. I think it'd be better to talk this on a PR.
Closing since this feature has been merged.