In the last section we started working on our confirm component.
So this is going to be a model that's going to pop up right in front of users face and we're specifically
calling it confirm because we're going to set this thing up to ask the user a yes or no question.
So let's continue working on this thing a little bit more.
We've already imported a bunch of stuff at the top so I think we're pretty good in that regard.
Now we just need to tell us on a whole bunch of markup in here.
Whole bunch of GSX.
So we definitely need to return some of this stuff.
If we go first we will place our modal and the mode all the way that it works.
Before I start trying to be fancy new line stuff let's just put the model by itself.
So the model itself takes some number of children components and those child components we pass into
it are what we're going to be displayed inside the motile.
So you can think of this modal as a big wrapper a big container anything we pass to it will be popped
up and displayed to the user so that in mind all makes a little bit more obvious we need to pass in
the card sections that button that text all that kind of good stuff need to be passed in as children
to the motile.
So I'm going to pass in here a view tag.
We'll see why in just a second.
Oops.
And then inside the new tag I'll place a card section
the card section will have a text tag.
This text tag will be the area where we will specify some amount of text something to ask the user an
actual question.
So that's the purpose of the text tag.
Then beneath it we're going to show our two buttons.
So we need some some text in here.
You know I don't know what's going to be to Seattle's leave it empty for right now.
Then beneath this card section I'm going to add another card section in and this one will be for showing
our buttons.
I'm going to have two buttons.
Because I want to ask the user specifically a yes or no question.
So the first one we'll be like yes I want to do or I want to accept whatever you're asking me.
And the second one will just be hardcoded to be No.
I don't want do that whatever whenever you try and ask me I buy it.
So we need to start thinking about the API for this component.
This markup is just about all we need to get something on the screen but what props do I expect to pass
this thing you know how how old functionally am I going to use this confirm component.
Well it's clear that we need to pass in some amount of text something to prompt the users ask them an
actual question.
I think they will use the same pattern we've used previously a little bit where we passed in the text
that we want to show as children.
So I remember if I said or if I open up a set of GSX tags and then pass something in between them it
will show up inside of that target component as props start children.
So in this case I want to pass some tests to confirm as like you know a little child entry.
So I will refer to it as simply children.
That means we're going to need to receive the children property out of the prop's object.
That is what we called with.
So that takes care of the text.
You know I think they're asking a question we're going to ask the user the next thing we need to think
about is how do we actually deal with the user clicking yes or no.
This one's not going to be too too bad.
So I think that a good idea here is going to be to say that when ever a button is pressed maybe we will
require the user to provide a on except an on decline callback to this component.
So we will assume that we will get a a prop called on except and on decline whenever we use the confirm.
So if the user presses the Yes button we'll call on press
and pass it on except notice that we don't have to do like this or bind or anything like that here.
We just want to call the function.
Also notice very very important.
I am not immediately invoking it by not passing the are putting the Prendes there on the end that means
we are passing a reference to the function we are not immediately invoking it we're saying hey at some
point in time you might want to call this function.
Just go ahead and take it.
So then we've got the second on press.
This will be our on decline.
So again we have now entered into a contract for the API of this component.
We are expecting to pass in some text and also and on except and on decline Propp as well.
All right there's one thing more I want to do in here before we take a break.
I want to add in some of those default properties that are modal expects.
So we just went over some of these inside the official documentation.
So it was stuff like information type transparent all that kind of good stuff.
So first we'll take care of the animation type chances are I always want to animate this thing wherever
possible.
I always want to animate stuff for my users so I'm going to by default tell it slide slide just means
slide up from the bottom the screen it'll give it a nice animation.
The next problem we need to worry about is that on request close.
So I don't really have again anything specific that I want to do when the user attempts to close this
thing.
I'm going to pass in a empty function just to says Father requirement of Android with the modal number.
Like I mentioned when we're on Android we are required to pass in the problem on request close.
So I was going to pass an empty function because I don't want to actually do anything.
Next we need to specify the prob of transparent transparent Propp means you don't want this thing to
be like partially see through.
Yeah I definitely do.
I think that it leads to a fantastic user experience when they can kind of see the content behind the
motile so they can say OK I still like things didn't just change.
Now now I have no idea what's going on.
If they can see the content behind the motile it means that they understand they're like OK I'm still
in the process of trying to delete a user here.
I know where I am basically.
Finally and this is going to be the most critical one of all.
We're going to pass in a visible flag so they're visible here.
This is the real meat and potatoes of what's going on with the modal visible here.
Is either going to be true or false.
And I bet you could guess what they what it does if we pass invisible of true.
We want the model to be displayed if we pass and false the model will go away.
It will be hidden.
Now the confirmed component itself cannot decide whether it needs to be visible.
Right we only want to show this whenever a user taps on that delete button.
So we're going to pass in a prop a visible we will specify.
It will tell this confirmed component whether or not it should be visible.
Now the last thing I forgot to do we designated the on acceptant on decline does need to be passed in
as props.
So let's do that as well.
All right who does a lot of typing.
Unfortunately we're still not quite done.
Believe it or not I know I'd love to be but not quite yet.
The last thing we're going to have to do.
We're going to take a quick break before we do this.
The motile by default has basically no styling to it.
Like really nothing is going on there.
So it's really up to us to place on some amount of styling to this thing to make sure that it looks
nice when it's presented to the user.
So the last thing we have to do is toss on a whole bunch of default styling will take care of that in
the next section.