1
00:00:00,660 --> 00:00:05,550
Inside of our sizable component, we need to add in some logic that takes a look at this direction,

2
00:00:05,560 --> 00:00:10,620
Propp if its value is horizontal, then we need to set up all of our props to be slightly different

3
00:00:10,620 --> 00:00:11,540
than what they are right now.

4
00:00:11,970 --> 00:00:16,860
And if the direction is vertical, then we would want to leave all these different props as they are

5
00:00:16,860 --> 00:00:17,300
right now.

6
00:00:17,940 --> 00:00:20,700
There's a variety of different ways we can write out all the logic for this.

7
00:00:20,970 --> 00:00:25,260
Let me show you one possible way that might seem like a really good idea, but get kind of tedious really

8
00:00:25,260 --> 00:00:30,900
quickly to remember right now we've got this hight property and that specifies the starting height of

9
00:00:30,900 --> 00:00:36,990
our sizable box and we want it to always be three hundred whenever we are trying to do a resize in the

10
00:00:36,990 --> 00:00:37,800
vertical direction.

11
00:00:38,220 --> 00:00:43,710
That value of three hundred right there is what gives us this kind of default height of three hundred

12
00:00:43,710 --> 00:00:44,250
pixels.

13
00:00:45,180 --> 00:00:50,550
So if we are trying to do a resize in the horizontal direction, we do not want a default height of

14
00:00:50,550 --> 00:00:51,480
three hundred anymore.

15
00:00:51,510 --> 00:00:57,000
Instead, we would want a default height of infinity, which basically means just allow all this content

16
00:00:57,000 --> 00:01:00,210
to span 100 percent height in the vertical direction.

17
00:01:00,600 --> 00:01:04,530
The long story short, we could write out a little bit of logic that looks like this, something it

18
00:01:04,530 --> 00:01:10,710
says, If direction is equal to vertical, then give us three hundred.

19
00:01:10,980 --> 00:01:13,370
Otherwise give us infinity.

20
00:01:13,920 --> 00:01:18,810
So we've got a little ternary expression on here and it has the exact same logic as what I just mentioned.

21
00:01:18,870 --> 00:01:22,080
So if direction is vertical, three hundred otherwise infinity.

22
00:01:23,250 --> 00:01:28,140
This seems like a very reasonable solution, but you'll very quickly notice that we really need to apply

23
00:01:28,140 --> 00:01:30,210
this logic for all these different props.

24
00:01:30,630 --> 00:01:36,300
If our direction is horizontal, then constraints is going to change and max constraints and with and

25
00:01:36,720 --> 00:01:37,700
handles as well.

26
00:01:38,950 --> 00:01:42,850
So adding in a ton of different ternary expressions would just get a little tedious.

27
00:01:43,420 --> 00:01:48,100
So let's take a look at a different way of specifying all these different props based upon the value

28
00:01:48,100 --> 00:01:48,840
of direction.

29
00:01:49,510 --> 00:01:51,100
So a different way that we could implement this.

30
00:01:52,050 --> 00:01:57,630
Would be to create a new variable up here with the let keyword and I'm going to call it a sizable.

31
00:02:02,160 --> 00:02:07,170
Then I'll set up an IV statement and I'll say if direction is equal to horizontal.

32
00:02:08,270 --> 00:02:12,170
Then I'm going to set sizable props to one object.

33
00:02:13,240 --> 00:02:17,800
And inside of you will add in eventually a bunch of configuration, such as the height with all that

34
00:02:17,800 --> 00:02:18,370
kind of stuff.

35
00:02:18,790 --> 00:02:24,110
Otherwise, if direction is any other value in this case, the only other value it could be is vertical.

36
00:02:24,670 --> 00:02:29,490
Then in that scenario, I want to set sizable props to some other set of props.

37
00:02:30,010 --> 00:02:34,180
And again, inside of here, we would write out some height with and all that other kind of stuff.

38
00:02:35,610 --> 00:02:41,300
Then finally, we could take this sizable, perhaps object and provide it directly to a sizable props.

39
00:02:42,200 --> 00:02:43,760
First sizable box.

40
00:02:45,050 --> 00:02:49,180
That's pretty much it if we take this approach, it just means that we don't have to write out a ton

41
00:02:49,180 --> 00:02:51,300
of different expressions and that's pretty much it.

42
00:02:51,820 --> 00:02:57,130
The last thing we might want to do is try to apply some type, checking on these objects and make sure

43
00:02:57,130 --> 00:03:01,420
that we are providing all the different required props that sizable box expects.

44
00:03:01,900 --> 00:03:07,240
So for that, we can try to apply a type annotation to this sizable props variable.

45
00:03:07,630 --> 00:03:08,500
Let me show you what I mean.

46
00:03:09,140 --> 00:03:14,380
I'm going to do a quick command click on this sizable box and I will take us city type definition file

47
00:03:14,380 --> 00:03:16,740
for reactor sizable inside of your.

48
00:03:16,770 --> 00:03:23,050
You might notice that there is a type that is being exported from this library called Sizable Box Props.

49
00:03:23,740 --> 00:03:28,630
This type right here describes all the different properties that we must provide to the sizable box

50
00:03:28,630 --> 00:03:36,220
component so we can import this type into our project and then use that to annotate the type of sizable

51
00:03:36,220 --> 00:03:36,730
props.

52
00:03:37,210 --> 00:03:41,890
And then TypeScript will have enough information to make sure that we provide all the required properties

53
00:03:41,890 --> 00:03:43,450
inside of these two objects.

54
00:03:44,200 --> 00:03:48,580
So let's start writing out the code for this, because just doing a verbal description of what we need

55
00:03:48,580 --> 00:03:50,110
to do is a little bit confusing.

56
00:03:51,640 --> 00:03:56,230
At the top of this file, I'm going to import re sizable box props.

57
00:03:57,170 --> 00:04:02,150
I'm then going to use that type to annotate the type of sizable props right here, so wrist sizable

58
00:04:02,870 --> 00:04:07,790
box props, and as soon as we add that in, we're not going to get two different air messages.

59
00:04:08,390 --> 00:04:12,680
You can hover over these and they're going to tell you, hey, if you want to define some props that

60
00:04:12,680 --> 00:04:17,720
are going to go to a sizable box component, you must provide a with and a height to.

61
00:04:17,720 --> 00:04:22,100
Now, TypeScript is doing some type checking on these objects and making sure that we are defining all

62
00:04:22,100 --> 00:04:25,100
the appropriate props, which is definitely a nice little benefit.

63
00:04:26,260 --> 00:04:31,810
OK, so now we understand our general strategy for defining these two different types of objects, let's

64
00:04:31,810 --> 00:04:33,940
start putting in some implementation in just a moment.