1
00:00:00,910 --> 00:00:04,860
Let's take a look at how we're going to solve this problem inside of our sizable component.

2
00:00:04,870 --> 00:00:09,940
So this is our component right here, rather than just providing a with drop down to a sizable box.

3
00:00:10,090 --> 00:00:13,800
We're going to instead create a new piece of state and we're going to call it with.

4
00:00:14,680 --> 00:00:16,750
So we're going to have a width piece of state.

5
00:00:16,960 --> 00:00:20,890
This is going to keep track of whatever the width is inside the sizable box.

6
00:00:21,430 --> 00:00:25,710
We're going to initialize this piece of state to be seventy five percent of the windows in or with.

7
00:00:25,720 --> 00:00:27,930
So essentially exactly what we are doing right now.

8
00:00:28,510 --> 00:00:31,300
So let's say this gets initialized to be six hundred and fifty.

9
00:00:31,900 --> 00:00:36,640
We're then going to take this piece of state and provide it as a prop down into a sizable box.

10
00:00:37,200 --> 00:00:41,320
So that will cause this piece of state to also initialize to be six hundred and fifty.

11
00:00:42,010 --> 00:00:43,120
Now, here's the trick.

12
00:00:43,540 --> 00:00:49,660
Whenever a user revises that sizable box and this internal piece of state changes, let's say down to

13
00:00:49,750 --> 00:00:54,970
three hundred, we're going to add in a callback to be told about that change in state.

14
00:00:55,630 --> 00:01:00,610
So we're going to take that new value of width and we're going to set our piece of state to be identical.

15
00:01:02,150 --> 00:01:05,600
Then whenever we render our sizable element.

16
00:01:06,580 --> 00:01:11,080
We're going to take that with piece of state and provide it again as a prop down into sizable bucks,

17
00:01:11,470 --> 00:01:16,760
but now these two values of with are always going to be synchronized and identical so we can render

18
00:01:16,780 --> 00:01:20,200
a sizable box as often as we want, so long as we just keep on.

19
00:01:20,200 --> 00:01:23,080
Providing this with piece of state is it's always going to be the same.

20
00:01:23,080 --> 00:01:24,700
It's always going to be synchronized.

21
00:01:25,360 --> 00:01:26,720
So that's how we're going to solve this.

22
00:01:27,400 --> 00:01:30,580
Let's go back over to our editor and figure out the actual implementation.

23
00:01:31,480 --> 00:01:32,130
Back over here.

24
00:01:32,170 --> 00:01:36,460
I first want to figure out how we can get a callback function to tell us about whenever the with piece

25
00:01:36,460 --> 00:01:44,470
of state inside of the sizable box is changed or that I'm going to go down to our sizable props object

26
00:01:44,470 --> 00:01:46,390
right here in the horizontal direction.

27
00:01:46,900 --> 00:01:50,980
And I'm going to add in a on resize stop function.

28
00:01:53,050 --> 00:01:56,350
So, as you guessed, this function should be stopped, not top.

29
00:01:56,380 --> 00:01:56,830
There we go.

30
00:01:57,280 --> 00:02:02,830
So as you guessed, this function is going to be called after a user finishes resizing our little panel.

31
00:02:03,010 --> 00:02:06,790
So, in other words, whenever they stop dragging that thing right there.

32
00:02:08,020 --> 00:02:11,620
The like, that's a stop and that's a stop.

33
00:02:12,710 --> 00:02:16,730
The first argument to it is going to be an event object that we don't really care about in this case,

34
00:02:16,880 --> 00:02:19,130
but the second argument is much more interesting.

35
00:02:19,740 --> 00:02:24,320
I'm going to call it data, and we're just going to add in a quick console log of data right now.

36
00:02:25,360 --> 00:02:26,560
Then back inside the browser.

37
00:02:27,980 --> 00:02:29,540
I'm going to refresh the page.

38
00:02:32,640 --> 00:02:34,350
And then do a little drag of that thing.

39
00:02:35,300 --> 00:02:40,310
So here's that second argument, Canterlot, you'll notice that it has a size property inside of it

40
00:02:40,700 --> 00:02:46,010
and inside there is a with property that tells us what the new width is of this left hand panel over

41
00:02:46,010 --> 00:02:46,340
here.

42
00:02:46,950 --> 00:02:51,710
So we're going to add in our own piece of with state and we're going to update our with state to be

43
00:02:51,710 --> 00:02:53,420
exactly equal to that value.

44
00:02:53,480 --> 00:02:55,400
That's how we're going to synchronize these two things.

45
00:02:56,390 --> 00:03:02,360
OK, so back at the top of our file, I'm going to add in a with a piece of St..

46
00:03:05,100 --> 00:03:10,470
And I will initialize it to be a window in with times zero point seven five.

47
00:03:10,500 --> 00:03:12,060
So again, that's our starting with.

48
00:03:13,700 --> 00:03:15,710
Then down inside that callback that we just put together.

49
00:03:18,310 --> 00:03:25,480
Rather than doing a council log of data will instead set our width to be data that size with.

50
00:03:27,060 --> 00:03:32,370
And then finally on our wrist, sizable props object in the horizontal direction, rather than providing

51
00:03:32,370 --> 00:03:36,960
this hardcoded with value right there of Inter with time zero point seventy five, we're going to instead

52
00:03:36,960 --> 00:03:38,730
provide that with piece of St..

53
00:03:40,690 --> 00:03:46,000
We're in a scenario here where our key and the value are identical variable names or property and variable

54
00:03:46,000 --> 00:03:50,320
names, so we can condense that down to just be with like so and that should be it.

55
00:03:50,950 --> 00:03:52,900
So let's save this over.

56
00:03:53,370 --> 00:03:54,670
I'll do another refresh.

57
00:03:56,620 --> 00:04:03,490
And now if I start to resize this thing and then resize my browser window, I don't get that jump that

58
00:04:03,490 --> 00:04:05,130
we were getting before perfect.

59
00:04:05,950 --> 00:04:06,940
So it's definitely works.

60
00:04:07,240 --> 00:04:09,970
Now, unfortunately, there is a downside.

61
00:04:10,000 --> 00:04:14,900
It turns out that there's actually a bug inside of the wrist, sizable box library itself.

62
00:04:15,250 --> 00:04:18,579
Let me show you what the bug is and we'll just fix it up very quickly.

63
00:04:19,360 --> 00:04:25,420
So right now, if I expand out my code editor and then shrink my browser window, remember, we just

64
00:04:25,420 --> 00:04:27,220
added in some code to fix this.

65
00:04:27,680 --> 00:04:30,760
So we should be updating right now our max constraints.

66
00:04:31,120 --> 00:04:37,090
But unfortunately, when we start providing that with Propp directly to a sizable box, it no longer

67
00:04:37,090 --> 00:04:40,320
really respects those max constraint values.

68
00:04:40,840 --> 00:04:43,570
So max constraints not really respected anymore.

69
00:04:43,600 --> 00:04:47,250
They pretty much just get tossed out the window because we are providing a with Propp directly.

70
00:04:47,950 --> 00:04:50,680
This is you could argue whether this is a bug.

71
00:04:50,680 --> 00:04:55,030
In my opinion, it is a bug because there's absolutely nothing inside the documentation that says that

72
00:04:55,150 --> 00:04:58,350
max constraints are not going to be respected under certain scenarios.

73
00:04:58,660 --> 00:05:00,550
So kind of unfortunate, but it's OK.

74
00:05:00,580 --> 00:05:03,340
We can add in a little bit of code to just fix this ourselves.

75
00:05:04,060 --> 00:05:10,660
So to fix that, I'm going to go back up to where we watch for wrist sizes of the overall browser window.

76
00:05:11,290 --> 00:05:16,720
And inside of here, I'm going to take a look at the value of winter window inner with.

77
00:05:17,380 --> 00:05:19,000
We're going to compare it to our constraint.

78
00:05:19,030 --> 00:05:20,050
So I'm going to say if.

79
00:05:20,990 --> 00:05:22,910
Window inner with.

80
00:05:24,710 --> 00:05:26,690
Times zero point seventy five.

81
00:05:29,040 --> 00:05:35,070
Is less than our current with peace of states, and that means that are with peace of state is too large

82
00:05:35,070 --> 00:05:36,220
and we need to shrink it down.

83
00:05:36,720 --> 00:05:42,360
So in that scenario, I'm going to update our with peace of states to be window.

84
00:05:43,700 --> 00:05:49,820
Dinner with zero point seven five, so this is pretty much what the library is doing internally to implement

85
00:05:49,820 --> 00:05:56,090
those constraint checks, pretty much just saying, OK, if our current width is greater than this maximum

86
00:05:56,090 --> 00:06:00,200
with this is really amax right here, then we need to reduce the current width.

87
00:06:00,410 --> 00:06:04,070
So we're going to reduce the current width to seventy five percent of the entire width.

88
00:06:05,350 --> 00:06:06,520
All right, so let's say this again.

89
00:06:07,650 --> 00:06:14,760
Do another refresh, and now if I start to track down that browser window, yeah, now that thing is

90
00:06:14,760 --> 00:06:16,110
starting to resize correctly.

91
00:06:16,800 --> 00:06:17,910
OK, that looks pretty good.

92
00:06:18,840 --> 00:06:19,170
All right.

93
00:06:19,170 --> 00:06:21,580
Well, that is pretty much it for our sizable component.

94
00:06:21,600 --> 00:06:24,780
I know a lot of work goes into it to make these things work as expected.

95
00:06:25,290 --> 00:06:29,010
One thing I want to point out here is that we haven't really done anything about the vertical direction,

96
00:06:29,340 --> 00:06:34,770
so we've not really made sure that resizing our browser window shrinks that thing in the vertical direction.

97
00:06:34,980 --> 00:06:40,410
This is kind of done on purpose because a user can always scroll to kind of get down to that bottom

98
00:06:40,410 --> 00:06:40,920
extent.

99
00:06:41,160 --> 00:06:44,280
They can always just very easily scroll down and say, OK, there's my Dreger.

100
00:06:44,610 --> 00:06:49,920
So if they start to reduce the size of it in any way, no, to me, the browser window and they lose

101
00:06:49,920 --> 00:06:52,140
that bottom dragger, no problem.

102
00:06:52,140 --> 00:06:53,430
They can just scroll down to find it.

103
00:06:53,820 --> 00:06:57,780
So I'm really not as concerned about that vertical drag or any kind of these constraints in the vertical

104
00:06:57,780 --> 00:07:03,180
direction as I am about the horizontal direction, because we don't get that same kind of scroll behavior

105
00:07:03,180 --> 00:07:06,750
if we start shrinking our window down too far horizontally.

106
00:07:07,030 --> 00:07:08,400
But we do if we do it vertically.

107
00:07:08,940 --> 00:07:13,120
So I'm going to say that our sizable component is pretty much good enough right here.

108
00:07:13,590 --> 00:07:17,850
So let's take a pause right here and move on to our next feature instead of our top.