How to handle react-navigation tabbaritem click? - react-navigation

What I want is when user is not logged in click on the tabbarItem, then switch to login navigator!
So how can I handle tabbarItem click?

There is a tabBarOnPress options mentioned in react-navigation: https://reactnavigation.org/docs/en/bottom-tab-navigator.html It may help you to achieve what you need.
Update: You can also declare navigationOptions as a function like this, to get access to navigation object:
navigationOptions: ({ navigation }) => ({
tabBarOnPress: event => {
navigation.dispatch(NavigationActions...)
// event.defaultHandler(); // This is the default handler from react-navigation (go to the tab)
},
...otherOptions
})

Related

TinyMCE custom toolbar button event

I have to access to button's onClick event, something like event.target. When adding button to toolbar we have onAction handler that doesn't expose onClick event but have only isEnabled and setEnabled methods. I can access to window.event, but that is deprecated. So the code would be something like:
editor.ui.registry.addButton('button', {
text: 'Button text',
icon: 'icon',
onAction: (api:ToolbarButtonInstanceApi) => { // Here I have access to only button
//api, but I need access to event as
//well so I can use it as event.currentTarget
},
});```
How could I access to `onClick event`?
I've been researching this too as I needed to do something similar, or at least find a way of accessing the button node when it's clicked, so far I've not come up with anything that can be used inside the onAction handler, and attempting to access .this inside that arrow head function will give you the global window details. I feel there must be some way!

How to handle new tab in cypress .If sub domain is dynamic?

URL:- https://localhost:8008/
Sub domain URL: https://localhost:8008/datasearch?actionId=772675
I am not able handle new tab in cypress as cy.visit('https://localhost:8008/datasearch?actionId=772675') as action id keeps on changing after entering data and click on submit button.As subdomain opens on new tab.I need to check the assert the output that is opening in new tab.
Regards
Kushal
I assume in your case if your submit button is inside an 'a' tag, then you could do something like this. If you click the Submit button, then it will open as a new tab, so ideally you should be getting the link from the 'a' tag or submit button prior to click and pass to a const and use cy.visit()
context('Open as new tab in cypress', () => {
it('Test to open a new tab/subdomain in cypress', () => {
cy.visit('https://localhost:8008/');
cy.get('.mt-2 > .btn-primary').then(($ele)=>{ // if the button is in an '<a>' tag, you could grab something like this
const newUrl = Cypress.$($ele).attr('href');
cy.visit(newUrl);
})
})
})

Nativescript angular : handle android back button on different pages

So I use this function to handle android back button :
this._page.on(Page.loadedEvent, event => {
if (application.android) {
application.android.on(application.AndroidApplication.activityBackPressedEvent, (args:AndroidActivityBackPressedEventData) => {
args.cancel = true;
this._ngZone.run(() => {
this.router.navigate(['/parameters']);
});
});
}
})
on different pages (angular components). So on page1.ts I have navigate(['/parameters]) and on page2.ts I have console.log("test"). Problem is wherever I am in the app, pressing back button always do navigate(['/parameters]), also the console.log if i'm on the right page, but it should do console.log only.
It seems to be global, any idea how to override activityBackPressedEvent ?
activityBackPressedEvent is not specific to a page, it's global to your Activity which holds all the pages. Generally, You will not add more than one event listener to this event.
You could do something like below to handle this on page level, probably in app module / main.ts
application.android.on(application.AndroidApplication.activityBackPressedEvent,
(args: application.AndroidActivityBackPressedEventData) => {
const page = frame.topmost().currentPage;
if (page.hasListeners(application.AndroidApplication.activityBackPressedEvent)) {
args.cancel = true;
page.notify({
eventName: application.AndroidApplication.activityBackPressedEvent,
object: page
});
}
});
With above code, activityBackPressedEvent willl be triggered on every page that has a listener.
Now in your page / component in which you want to customise the behaviour you do this,
// Inject Page
constructor(private page: Page) {
this.page.on(application.AndroidApplication.activityBackPressedEvent, this.onBackButtonTap, this);
}
onBackButtonTap(data: EventData) {
this._ngZone.run(() => {
this.router.navigate(['/parameters']);
});
}
I think since you added the handle back button in the event pageLoaded that's why it does not work on other page.
The code that handle back button should be placed in the app starter. I'm using NS Vue & I place this code in my main.js. I think it could be similar in NS angular.
application.android.on(application.AndroidApplication.activityBackPressedEvent, (args:AndroidActivityBackPressedEventData) => {
args.cancel = true;
this._ngZone.run(() => {
this.router.navigate(['/parameters']);
});
});

Dismiss Ionic 4 popover from its component

I have a standard Ionic 4 page (Home) that creates a popover that uses a component (BusinessDetails) with a button that redirects to a new page (RequestTurn). However, when I click on that button, the popover is not dismissed and is renders on top of my RequestTurn page. I guess I need to manually dismiss it from the component (BusinessDetails), but I don't know how to access the instance of the popover from there, because it was created in the Home page. Is there a way to do this?
home.page.ts
presentModal(business:Business, event: Event) {
this.popoverController.create(({
component: BusinessDetailsComponent,
cssClass: "business-popover",
showBackdrop: true,
componentProps: {
business: business
}
}) as any).then(popover => popover.present()); }
business-detail.component.ts
goToRequestTurn(id: string) {
//Need to dismiss popver here (?)
this.router.navigateByUrl(`/request-turn/${id}`); }
Thanks for your help.
add private popoverController: PopoverController to the component constructor
then write a function like this and call it when you want to dismiss the modal
async DismissClick() {
await this.popoverController.dismiss();
}
I solved this problem as follows:
In parent component I have passed callback as prop to child component:
const popover = await this.popoverController.create({
component: PopoverComponent,
event: ev,
componentProps: {
onClick: () => {
popover.dismiss();
},
},
});
await popover.present();
And in PopoverComponent I have added #Input() onClick; which called when the user clicks:
...
#Input()
public onClick = () => {}
...
afterClick() {
this.onClick();
}

Global dialog implementation with vue

I am need a reusable, global dialog/modal component in my vue application. I need to be able to call it from any component and update its header text, body text and callback function once the dismiss button is pressed on the modal. I have tried importing a custom made dialog component into each component where I plan to use it and I have tried creating a global dialog where the values would be set using a mutable values in a modals vuex modal. This latter did not work because vuex will not store functions as values. I am new to vue and am not too sure how to go about this and absolutely any advice on a good way to go about it would help tremendously.
I did something like that before. The main ingredient is the handling of events through the $root because you can't relay in this scenario on the normal component communication.
// In your Global Modal
<script>
export default {
name: 'GlobalModal',
mounted () {
this.$root.$on('callGlobalModal', () => {
this.dialog = true
})
},
data: () => ({
dialog: false,
}),
}
</script>
Then call it frome anywhere using this.$root.$emit('callGlobalModal')

Resources