Let's make sure that if there is only one ad sell visible on the screen, it always has an opacity of
one point.
Now, to implement this, we'll go back over to our sell list component.
Here it is right here.
The first thing I want you to realize is that inside of rendered cells, remember, we are showing a
ton of different ad cell elements, really one ad cell for every cell that we already have.
So right now, we're talking about the case in which we have zero cells.
That means that we are not going to display this ad cell right here at all in the scenario that we're
talking about.
Instead, this is the ad cell that is actually visible on the screen.
So it is this ad cell that is displaying this thing right here.
So if we want to somehow customize this thing or treat it slightly differently.
And we would add in some additional props or styling or something like that to this ad sell element,
now that we understand where we need to probably add in some additional configuration, we need to figure
out, well, how are we going to force this thing to be visible?
There's a variety of different ways we could do this.
First off, maybe one possible way it's going to very quickly show you a couple of different approaches
and we'll come up with a solution that we like first.
And we might do is wrap this with a div.
And then maybe put in a class name right here.
That will be calculated based upon how many cells we have.
We'll say that if cells length is equal to zero, then I want to apply a class name of maybe something
like force visible, otherwise apply an empty string.
So if we do something like this, we could then go over to a case file, we don't have one right now
for list, we'll just go over to sell list item or some.
You add access very quickly.
So inside of here, we could very add in something like horse.
Visible.
Add still opacity one.
So if we save this, we'll go back over now, if we only have one cell, we're going to apply that updated
rule that's going to give this thing always in the capacity of one.
But as soon as we add in any cell, we now have at least one cell.
We're no longer applying that extra class name.
And so we are no longer forcing in opacity of 1.0.
So obviously that's a pretty simple and straightforward solution.
I'm going to undo those changes really quickly.
I just want to show you one or two other possible solutions.
It's going to remove that div.
The second possible solution, we could add in a style prop, it will pass in directly to add sell the
style prop could specify any arbitrary styling rules we want.
Maybe I could put in an opacity or something like that and we could put in some conditional inside of
here and say apply in opacity of one point zero at all times if we have zero cells.
However, this is definitely little bit more challenging because then we need to possibly provide some
typing for the style prop that can accept any kind of arbitrary excess property.
So my gut says probably not a good solution.
Maybe the last other solution we could take a look at would be to add in another prop describing whether
or not add sell should force itself to be visible.
Maybe we could add in something like force visible.
And we could add in a check to see if cels dot length is equal to zero, so if there are zero cells,
then let's force it to be visible.
Let's provide a prop of true force visible.
Then inside of our add seal component, we can receive that prop and then maybe just add in an additional
class name to this root right here.
This additional class name could force the capacity of 1.0, thereby making this thing visible at all
times.
So out of these three possible solutions, which one is best?
Well, I'm going to say probably this force visible prop, because this is adding in some additional
configuration to our add cell component.
And we're not just relying upon some kind of tenuous extra div being placed here with some class name,
even though that was a really easy solution.
It's entirely possible that another engineer by come along at some point in time and say, oh, what
does this div used for?
Well, I don't think we really need it and they can just go and delete it without really having any
idea that they just really kind of sabotaged our entire application whenever there is no cells visible
on the screen up broken right now.
But you get the point.
So I think that adding in a force visible prop is the way to go.
So let's make sure that we add in force visible.
We're going to provide force visible of true if cells length is equal to zero.
We are, of course, getting an air from this just because ADL is not expecting that prop.
Let's go back over to our ADL file.
I'll go up to our interface.
I'll define a prop of force visible and have it be a boolean.
Now, one thing I want to mention is that in ad sell up here, back inside of Swellest, we probably
don't want to have to say horse visible of false in this scenario.
That's just extra stuff that doesn't really gaynes a whole lot.
So let's make force visible optional instead.
If a user does not provide or if a developer does not provide this, we will assume that force visible
is supposed to be false and we want to rely upon the default opacity behavior.
So to make that prop optional, we'll go to force visible and put a question mark right there.
Now, if you want to provide that, great, but you don't have to.
And then going to receive that as a prop into my component, so force visible right there.
Then on our Route Divx, I'm going to calculate the value for our class name.
I'm going to wrap that with some curly braces.
Within a set of tactics and then do some string interpolation, I will say, if force visible is true,
then go ahead and add in an additional class name to this thing of how about just force visible?
That's totally fine.
We could come up with a better class name if you think of a better one.
Feel free to do so.
OK, so now let's go back over to our ad sell access file.
I'm going to try to find an element that has a class name of add, sell and force visible to notice
there is no space in there.
So if we ever find an element that has both these class names, we'll give it an opacity of one point
zero in all scenarios.
So our selecta right here is much more specific than the Selecter up here.
So the capacity of one is definitely going to win out.
They're going to save that look back over and now if I delete all cells, we've only got one cell.
And so this thing is forced to be visible, forced to have a capacity of one point eight.
OK, let's say this looks pretty good, as soon as we add cells back in, that thing fades back out.
Well, I think that we've got some really good behavior here.
However, I want to mention is that we definitely need to add in a little bit of spacing, because right
now I can't even click that or drag this vertical Cizre element right now.
So we definitely have to add in some spacing between our cells and the ad cell thing.
In addition, right now, whenever I even begin to mouse over that divider, I see this thing start
to fade in right away.
And it's just a little bit that's just a little bit distracting.
It's not that great.
So I think we could do a little bit better job in deciding exactly when we made this thing in the couple
last little tweaks.
Let's take care of these in just a moment.