1
00:00:01,410 --> 00:00:06,300
Let's make sure that if there is only one ad sell visible on the screen, it always has an opacity of

2
00:00:06,300 --> 00:00:06,689
one point.

3
00:00:07,290 --> 00:00:11,100
Now, to implement this, we'll go back over to our sell list component.

4
00:00:11,350 --> 00:00:12,140
Here it is right here.

5
00:00:12,690 --> 00:00:17,010
The first thing I want you to realize is that inside of rendered cells, remember, we are showing a

6
00:00:17,160 --> 00:00:21,780
ton of different ad cell elements, really one ad cell for every cell that we already have.

7
00:00:22,170 --> 00:00:24,810
So right now, we're talking about the case in which we have zero cells.

8
00:00:25,110 --> 00:00:29,670
That means that we are not going to display this ad cell right here at all in the scenario that we're

9
00:00:29,670 --> 00:00:30,230
talking about.

10
00:00:30,540 --> 00:00:33,930
Instead, this is the ad cell that is actually visible on the screen.

11
00:00:34,360 --> 00:00:38,700
So it is this ad cell that is displaying this thing right here.

12
00:00:39,470 --> 00:00:43,170
So if we want to somehow customize this thing or treat it slightly differently.

13
00:00:44,090 --> 00:00:49,940
And we would add in some additional props or styling or something like that to this ad sell element,

14
00:00:50,660 --> 00:00:54,890
now that we understand where we need to probably add in some additional configuration, we need to figure

15
00:00:54,890 --> 00:00:57,150
out, well, how are we going to force this thing to be visible?

16
00:00:57,650 --> 00:00:59,570
There's a variety of different ways we could do this.

17
00:00:59,990 --> 00:01:04,160
First off, maybe one possible way it's going to very quickly show you a couple of different approaches

18
00:01:04,160 --> 00:01:06,660
and we'll come up with a solution that we like first.

19
00:01:06,800 --> 00:01:09,620
And we might do is wrap this with a div.

20
00:01:11,090 --> 00:01:14,030
And then maybe put in a class name right here.

21
00:01:15,800 --> 00:01:18,500
That will be calculated based upon how many cells we have.

22
00:01:19,040 --> 00:01:26,210
We'll say that if cells length is equal to zero, then I want to apply a class name of maybe something

23
00:01:26,210 --> 00:01:30,800
like force visible, otherwise apply an empty string.

24
00:01:31,860 --> 00:01:36,840
So if we do something like this, we could then go over to a case file, we don't have one right now

25
00:01:36,840 --> 00:01:40,380
for list, we'll just go over to sell list item or some.

26
00:01:40,380 --> 00:01:42,240
You add access very quickly.

27
00:01:43,160 --> 00:01:46,220
So inside of here, we could very add in something like horse.

28
00:01:48,280 --> 00:01:48,850
Visible.

29
00:01:50,590 --> 00:01:53,710
Add still opacity one.

30
00:01:55,200 --> 00:01:59,790
So if we save this, we'll go back over now, if we only have one cell, we're going to apply that updated

31
00:01:59,790 --> 00:02:02,310
rule that's going to give this thing always in the capacity of one.

32
00:02:02,520 --> 00:02:06,710
But as soon as we add in any cell, we now have at least one cell.

33
00:02:06,720 --> 00:02:08,729
We're no longer applying that extra class name.

34
00:02:08,880 --> 00:02:11,330
And so we are no longer forcing in opacity of 1.0.

35
00:02:11,870 --> 00:02:14,700
So obviously that's a pretty simple and straightforward solution.

36
00:02:15,040 --> 00:02:16,680
I'm going to undo those changes really quickly.

37
00:02:16,680 --> 00:02:19,380
I just want to show you one or two other possible solutions.

38
00:02:22,100 --> 00:02:23,180
It's going to remove that div.

39
00:02:24,330 --> 00:02:30,690
The second possible solution, we could add in a style prop, it will pass in directly to add sell the

40
00:02:30,690 --> 00:02:34,110
style prop could specify any arbitrary styling rules we want.

41
00:02:34,530 --> 00:02:39,130
Maybe I could put in an opacity or something like that and we could put in some conditional inside of

42
00:02:39,130 --> 00:02:44,300
here and say apply in opacity of one point zero at all times if we have zero cells.

43
00:02:44,760 --> 00:02:48,960
However, this is definitely little bit more challenging because then we need to possibly provide some

44
00:02:48,960 --> 00:02:53,100
typing for the style prop that can accept any kind of arbitrary excess property.

45
00:02:53,520 --> 00:02:56,190
So my gut says probably not a good solution.

46
00:02:57,000 --> 00:03:01,920
Maybe the last other solution we could take a look at would be to add in another prop describing whether

47
00:03:01,920 --> 00:03:04,710
or not add sell should force itself to be visible.

48
00:03:05,350 --> 00:03:07,560
Maybe we could add in something like force visible.

49
00:03:09,840 --> 00:03:18,000
And we could add in a check to see if cels dot length is equal to zero, so if there are zero cells,

50
00:03:18,330 --> 00:03:19,830
then let's force it to be visible.

51
00:03:19,830 --> 00:03:22,440
Let's provide a prop of true force visible.

52
00:03:22,890 --> 00:03:27,480
Then inside of our add seal component, we can receive that prop and then maybe just add in an additional

53
00:03:27,480 --> 00:03:29,160
class name to this root right here.

54
00:03:29,520 --> 00:03:34,380
This additional class name could force the capacity of 1.0, thereby making this thing visible at all

55
00:03:34,380 --> 00:03:34,860
times.

56
00:03:35,460 --> 00:03:37,920
So out of these three possible solutions, which one is best?

57
00:03:38,280 --> 00:03:42,870
Well, I'm going to say probably this force visible prop, because this is adding in some additional

58
00:03:42,870 --> 00:03:44,640
configuration to our add cell component.

59
00:03:44,730 --> 00:03:50,460
And we're not just relying upon some kind of tenuous extra div being placed here with some class name,

60
00:03:51,150 --> 00:03:53,080
even though that was a really easy solution.

61
00:03:53,130 --> 00:03:57,270
It's entirely possible that another engineer by come along at some point in time and say, oh, what

62
00:03:57,270 --> 00:03:58,300
does this div used for?

63
00:03:58,500 --> 00:04:02,460
Well, I don't think we really need it and they can just go and delete it without really having any

64
00:04:02,460 --> 00:04:08,010
idea that they just really kind of sabotaged our entire application whenever there is no cells visible

65
00:04:08,010 --> 00:04:09,450
on the screen up broken right now.

66
00:04:09,450 --> 00:04:10,290
But you get the point.

67
00:04:10,840 --> 00:04:13,590
So I think that adding in a force visible prop is the way to go.

68
00:04:13,990 --> 00:04:16,500
So let's make sure that we add in force visible.

69
00:04:17,010 --> 00:04:21,990
We're going to provide force visible of true if cells length is equal to zero.

70
00:04:23,760 --> 00:04:27,960
We are, of course, getting an air from this just because ADL is not expecting that prop.

71
00:04:28,670 --> 00:04:30,300
Let's go back over to our ADL file.

72
00:04:30,750 --> 00:04:31,980
I'll go up to our interface.

73
00:04:32,990 --> 00:04:36,650
I'll define a prop of force visible and have it be a boolean.

74
00:04:37,570 --> 00:04:42,940
Now, one thing I want to mention is that in ad sell up here, back inside of Swellest, we probably

75
00:04:42,940 --> 00:04:47,020
don't want to have to say horse visible of false in this scenario.

76
00:04:47,210 --> 00:04:49,990
That's just extra stuff that doesn't really gaynes a whole lot.

77
00:04:50,270 --> 00:04:52,690
So let's make force visible optional instead.

78
00:04:53,610 --> 00:04:58,740
If a user does not provide or if a developer does not provide this, we will assume that force visible

79
00:04:58,740 --> 00:05:02,670
is supposed to be false and we want to rely upon the default opacity behavior.

80
00:05:03,770 --> 00:05:09,080
So to make that prop optional, we'll go to force visible and put a question mark right there.

81
00:05:10,550 --> 00:05:13,460
Now, if you want to provide that, great, but you don't have to.

82
00:05:14,840 --> 00:05:20,620
And then going to receive that as a prop into my component, so force visible right there.

83
00:05:24,220 --> 00:05:27,900
Then on our Route Divx, I'm going to calculate the value for our class name.

84
00:05:27,940 --> 00:05:29,590
I'm going to wrap that with some curly braces.

85
00:05:30,600 --> 00:05:38,340
Within a set of tactics and then do some string interpolation, I will say, if force visible is true,

86
00:05:39,090 --> 00:05:44,420
then go ahead and add in an additional class name to this thing of how about just force visible?

87
00:05:44,730 --> 00:05:45,800
That's totally fine.

88
00:05:46,140 --> 00:05:48,660
We could come up with a better class name if you think of a better one.

89
00:05:48,690 --> 00:05:49,650
Feel free to do so.

90
00:05:51,820 --> 00:05:55,270
OK, so now let's go back over to our ad sell access file.

91
00:05:57,450 --> 00:06:05,160
I'm going to try to find an element that has a class name of add, sell and force visible to notice

92
00:06:05,160 --> 00:06:06,420
there is no space in there.

93
00:06:07,240 --> 00:06:11,850
So if we ever find an element that has both these class names, we'll give it an opacity of one point

94
00:06:11,850 --> 00:06:13,100
zero in all scenarios.

95
00:06:13,770 --> 00:06:17,390
So our selecta right here is much more specific than the Selecter up here.

96
00:06:17,730 --> 00:06:20,700
So the capacity of one is definitely going to win out.

97
00:06:22,100 --> 00:06:28,190
They're going to save that look back over and now if I delete all cells, we've only got one cell.

98
00:06:28,400 --> 00:06:32,510
And so this thing is forced to be visible, forced to have a capacity of one point eight.

99
00:06:33,550 --> 00:06:37,990
OK, let's say this looks pretty good, as soon as we add cells back in, that thing fades back out.

100
00:06:38,800 --> 00:06:41,290
Well, I think that we've got some really good behavior here.

101
00:06:41,500 --> 00:06:45,910
However, I want to mention is that we definitely need to add in a little bit of spacing, because right

102
00:06:45,910 --> 00:06:51,190
now I can't even click that or drag this vertical Cizre element right now.

103
00:06:51,190 --> 00:06:55,270
So we definitely have to add in some spacing between our cells and the ad cell thing.

104
00:06:55,660 --> 00:07:01,330
In addition, right now, whenever I even begin to mouse over that divider, I see this thing start

105
00:07:01,330 --> 00:07:02,380
to fade in right away.

106
00:07:02,680 --> 00:07:05,460
And it's just a little bit that's just a little bit distracting.

107
00:07:05,470 --> 00:07:06,520
It's not that great.

108
00:07:06,790 --> 00:07:12,520
So I think we could do a little bit better job in deciding exactly when we made this thing in the couple

109
00:07:12,600 --> 00:07:13,380
last little tweaks.

110
00:07:13,400 --> 00:07:14,670
Let's take care of these in just a moment.