I am building a ride sharing app to learn react-native. In order to publish a new Ride, I have a Modal which renders conditionaly on the step state and each step has a diferente UI. Like:
let screen;
if (step===1){
ecraStep=<Screen1/>
} if (step===2){
ecraStep=<Screen2/>
} ...
On step=1 (which is the initial value) I want the callBack button to close the Modal and whenever step>1 I want it to call the following function:
function togglePreviousStep() {
setStep(step-1);
};
Which is essentially going back to the last rendered screen. I have tried it by writting this inside the Modal function component:
useFocusEffect(
React.useCallback(() => {
const onBackPress = () => {
if (step>1) {
togglePreviousStep();
return true;
} else if (step===1) {
props.closeModal();
return false;
}
};
BackHandler.addEventListener('hardwareBackPress', onBackPress);
return () =>
BackHandler.removeEventListener('hardwareBackPress', onBackPress);
}, [step, togglePreviousStep])
);
However, no matter the step state, whenever I press the backButton it closes the Modal. I don't understand what I am doing wrong.
EDITED
I implemented the Modal from react-native-modal. I used the prop onBackButtonPress like this:
<Modal
onBackButtonPress={props.onBackButtonPress}
visible={showModal}
//...
>
<NewRidesModal
//...
/>
</Modal>
And inside the Modal Screen I wrote:
if (step===1) {
onBackPressButton=(() => props.closeModal());
} else if (step>1){
onBackPressButton=(() => togglePreviousStep())
}
However, it still closes the modal when I press the android back button...
The onBackBackButtonPress is actually deprecated or removed.
Later on, I read a bit more about the modal documents on https://reactnative.dev/docs/modal#onrequestclose and I found out that:
The onRequestClose callback is called when the user taps the hardware
back button on Android or the menu button on Apple TV.
I should have investigated this before making this question. All I needed can be done with the onRequestClose prop like the following:
<Modal
onRequestClose={() => {
if (step===1) {
toggleModal();
} else if (step>1 && step<8){
togglePreviousStep();
}
}}
>
//...
</Modal>
This should work. If not put all your code involved because the split piece of them is hard to connect what are you doing.
<Modal
onBackButtonPress={() => {
if (step===1) {
props.closeModal();
} else if (step>1){
togglePreviousStep()
}
}}
visible={showModal}
//...
>
<NewRidesModal
//...
/>
</Modal>
Related
In my simple ToDo app i am using useQuery() to fetch ToDo's from the server as well as useMutation() to create, update and delete ToDo's. When a mutation is successful, i invalidate the query so it gets refetched.
If i press the delete button of a ToDo item, i want the corresponding button to show a loading spinner until the mutation is done and the new ToDo's have been fetched. For that purpose i am using the useIsFetching() hook in my components, which works fine. However, here is the problem:
If i now execute a mutation, every button (meaning the "Delete" button as well as the "Submit" and "Save changes" button to post or update a ToDo) will show the loading spinner instead of just the one that i pressed. This makes sense since they all depend on the same value of useIsFetching(). I need a way to figure out which mutation led to the refetching of the query so i can conditionally render the loading spinner for the appropriate button. This seems to be a very common problem for me yet i cannot find a (not overcomplicated) solution for it. Is there something i'm missing?
The solution Ahmed Sbai said above is good (you can use state instead of local variables), and here is another approach for you.
You can check condition based on isLoading in the object returned from useMutation().
Updated: As written in this TkDodo's blog, the "magic" is here:
If you want your mutation to stay in loading state while your related queries update, you have to return the result of invalidateQueries() from the callback.
Therefore, you won't need to use the useIsFetching() hook, too.
function App() {
const addMutation = useMutation({
mutationFn: (newTodo) => {
return axios.post('/todos', newTodo)
},
onSuccess: () => {
return queryClient.invalidateQueries({
queryKey: ['todos'],
})
}
})
const updateMutation = useMutation({
mutationFn: (id, data) => {
return axios.patch(`/todos/${id}`, data)
},
onSuccess: () => {
return queryClient.invalidateQueries({
queryKey: ['todos'],
})
}
})
const deleteMutation = useMutation({
mutationFn: (id) => {
return axios.delete(`/todos/${id}`)
},
onSuccess: () => {
return queryClient.invalidateQueries({
queryKey: ['todos'],
})
}
})
return (
<div>
{/* ... */}
<button
onClick={() => addMutation.mutate(...)}
loading={addMutation.isLoading}
>
Submit
</button>
<button
onClick={() => updateMutation.mutate(...)}
loading={updateMutation.isLoading}
>
Save changes
</button>
<button
onClick={() => deleteMutation.mutate(...)}
loading={deleteMutation.isLoading}
>
Delete
</button>
</div>
)
}
If you want any further information, please read more in Docs.
You can simply create a variable var loadingType = 0 and update its value each time the user click on a button for example if the delete button is clicked then loadingType = 1 if update button loadingType = 2, etc. Then based on the value of loadingType you know which loading spinner you have to use.
I'm trying to safely remove a DOM node from a component made whit StencilJS.
I've put the removing code in a public method - It's what I need.
But, depending on which moment this method is called, I have a problem. If it is called too early, it don't have the DOM node reference yet - it's undefined.
The code below shows the component code (using StencilJS) and the HTML page.
Calling alert.dismiss() in page script is problematic. Calling the same method clicking the button works fine.
There is a safe way to do this remove()? Do StencilJS provide some resource, something I should test or I should wait?
import {
Component,
Element,
h,
Method
} from '#stencil/core';
#Component({
tag: 'my-alert',
scoped: true
})
export class Alert {
// Reference to dismiss button
dismissButton: HTMLButtonElement;
/**
* StencilJS lifecycle methods
*/
componentDidLoad() {
// Dismiss button click handler
this.dismissButton.addEventListener('click', () => this.dismiss());
}
// If this method is called from "click" event (handler above), everything is ok.
// If it is called from a script executed on the page, this.dismissButton may be undefined.
#Method()
async dismiss() {
// Remove button from DOM
// ** But this.dismissButton is undefined before `render` **
this.dismissButton.remove();
}
render() {
return (
<div>
<slot/>
<button ref={el => this.dismissButton = el as HTMLButtonElement} >
Dismiss
</button>
</div>
);
}
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>App</title>
</head>
<body>
<my-alert>Can be dismissed.</my-alert>
<script type="module">
import { defineCustomElements } from './node_modules/my-alert/alert.js';
defineCustomElements();
(async () => {
await customElements.whenDefined('my-alert');
let alert = document.querySelector('my-alert');
// ** Throw an error, because `this.dismissButton`
// is undefined at this moment.
await alert.dismiss();
})();
</script>
</body>
</html>
There are multiple ways to delete DOM nodes in Stencil.
The simplest is to just call remove() on the element, like any other element:
document.querySelector('my-alert').remove();
Another would be to have a parent container that manages the my-alert message(s). This is especially useful for things like notifications.
#Component({...})
class MyAlertManager {
#Prop({ mutable: true }) alerts = ['alert 1'];
removeAlert(alert: string) {
const index = this.alerts.indexOf(alert);
this.alerts = [
...this.alerts.slice(0, index),
...this.alerts.slice(index + 1, 0),
];
}
render() {
return (
<Host>
{this.alerts.map(alert => <my-alert text={alert} />)}
</Host>
);
}
}
There are other options and which one to choose will depend on the exact use case.
Update
In your specific case I would just render the dismiss button conditionally:
export class Alert {
#State() shouldRenderDismissButton = true;
#Method()
async dismiss() {
this.shouldRenderDismissButton = false;
}
render() {
return (
<div>
<slot/>
{this.shouldRenderDismissButton && <button onClick={() => this.dismiss()}>
Dismiss
</button>
</div>
);
}
}
Generally I would not recommend manually manipulating the DOM in Stencil components directly since that could lead to problems with the next renders since the virtual DOM is out of sync with the real DOM.
And if you really need to wait for the component to render you can use a Promise:
class Alert {
loadPromiseResolve;
loadPromise = new Promise(resolve => this.loadPromiseResolve = resolve);
#Method()
async dismiss() {
// Wait for load
await this.loadPromise;
// Remove button from DOM
this.dismissButton.remove();
}
componentDidLoad() {
this.loadPromiseResolve();
}
}
I previously asked a question about waiting for the next render which would make this a bit cleaner but I don't think it's easily possible at the moment. I might create a feature request for this in the future.
How can I prevent ionic keyboard from hiding when I press a specific button in my Ionic 1 app?
This solution doesn't work for me, the keyboard remains open wherever I click.
A possible solution can be found here (the same link sent by Sahil Dhir). I also had this problem and this solution worked for me.
The directive is:
angular.module('msgr').directive('isFocused', function($timeout) {
return {
scope: { trigger: '#isFocused' },
link: function(scope, element) {
scope.$watch('trigger', function(value) {
if(value === "true") {
$timeout(function() {
element[0].focus();
element.on('blur', function() {
element[0].focus();
});
});
}
});
}
};
});
Its usage is:
<input type="text" is-focused="true">
What it basically does is to watch the focus of the input and whenever the input loses focus (when you press a button on the screen outside the keyboard, for example) it rapidly assigns the focus back to it. So the keyboard doesn't have time to hide.
Hope it works for you too!
I have created a Button with the Tiny Method addButton().
How is it possible to toggle the State of the Button ?
In my first simple case I have a Button with Fullscreen
(Different Functionality than the built-in function)
and want to hide it after getting the Fullscreen State
and replace it with an "End Fullscreen" Button.
But I have not found the right way to show or hide them.
I know that the button will get an ID, but I dont know which one ...
If you add the button with:
editor.addButton('customFullscreen', {
tooltip: 'Fullscreen',
shortcut: 'Ctrl+Alt+F',
onClick: toggleCustomFullscreen,
onPostRender: function() {
var self = this;
editor.on('CustomFullscreenStateChanged', function(e) {
if (e.state) {
self.name('Close fullscreen');
//self.active(e.state); // uncomment for "pressed" look
} else {
self.name('Fullscreen');
}
});
}
});
and handle the event with
var customFullscreenState = false;
function toggleFullscreen() {
customFullscreenState = !customFullscreenState;
if (customFullscreenState) {
// do something, we are active
} else {
// do something else, we're unactive
}
editor.fire('CustomFullscreenStateChanged', {state: fullscreenState});
}
You should be able to have it look like wo different button and do two different things depending on state, but it will still just be one button that changes action and text.
I have a multipage form with #p1,#p2,#p3. Once I submit the form, and when I try to click back browser button, it should go to #p1 with empty form fields. it is possible wiith Jquery Mobile?
I would override the backbutton and check for which page is the active page then based on the page do whatever house cleaning you need...
I submitted an example to another question really similar to this:
BackButton Handler
Where I have Options, Popup and HomePage you might just need P3 and when the activePage is equal to P3 clear your form and show P1.
function pageinit() {
document.addEventListener("deviceready", deviceInfo, true);
}
function deviceInfo() {
document.addEventListener("backbutton", onBackButton, true);
}
function onBackButton(e) {
try{
var activePage = $.mobile.activePage.attr('id');
if(activePage == 'P3'){
clearForm(); // <-- Calls your function to clear the form...
window.location.href='index.html#P1';
} else if(activePage == 'P1'){
function checkButtonSelection(iValue){
if (iValue == 2){
navigator.app.exitApp();
}
}
e.preventDefault();
navigator.notification.confirm(
"Are you sure you want to EXIT the program?",
checkButtonSelection,
'EXIT APP:',
'Cancel,OK');
} else {
navigator.app.backHistory();
}
} catch(e){ console.log('Exception: '+e,3); }
}