React: Tworzenie modala

0:00Cześć! Na koniec ostatniej lekcji powierzyłem Ci zadanie poprawienia wyglądu naszego

0:04header'a. Jestem ciekaw, jak Ci poszło, ale jeśli nie masz ochoty tego robić, to

0:08zawsze możesz znaleźć gotowy kod na branch'u 04.6. Ja

0:12też zrobiłem swoją robotę. Zrobiłem tutaj większy logo, większy

0:16trochę button i zmniejszyłem delikatnie fonty w naszej nawigacji. Teraz wszystko

0:20wygląda prawie identycznie, jak naszym headerze na design'ach. A skoro już

0:24przy design'ach jesteśmy, to w tej lekcji przejdziemy do kolejnego etapu tworzenia naszej

0:28aplikacji, czyli do stworzenia modala. Modal będzie pojawiał się po kliknięciu

0:32na button new item, a będzie zamykać się, jeśli klikniemy na

0:36krzyżyk albo na button add new item. Jak widzisz, formularz

0:41już jest gotowy, więc nie będziemy mieć tutaj za dużo pracy. Jedyne, co musimy zrobić to renderowanie

0:45warunkowe. Jeśli zaznaczymy odpowiednią opcję. Jeśli to będzie Twitter, to

0:49będzie to wyglądać tak, jak teraz. Jeśli artykuł, to nie będziemy podawać, na przykład, obrazka,

0:53a jeśli notatka, to będzie to tylko tytuł i description. Na

0:58potrzeby tego kursu możemy ustalić, że żeby praca szła nam trochę szybciej, nie

1:02będziemy implementować tutaj takiej opcji, że jak klikniemy sobie poza ten modal, to będzie

1:06on się zamykał. Wystarczy, że będziemy klikać na krzyżyk albo na ten button. Wtedy

1:11on się zamknie. Nie będziemy też tworzyć żadnych animacji, ani przejść. Chcemy, żeby sprawy

1:15były jak najprostsze, żeby tylko wytłumaczyć główne koncepty, główne

1:19założenia tego wszystkiego. Tak więc teraz nie przedłużając, przechodzimy

1:23do dalszej pracy. Pierwsze, co chcemy zrobić, to oczywiście stworzyć

1:28komponent modala, do którego później wrzucimy nasz formularz, więc teraz w

1:32folderze components stworzymy sobie folder modal. Wewnętrz niego

1:40modal.js i od

1:44razu też, model.module.scss. Jak

1:53zawsze, importujemy React'a. Importujemy też od razu style. Stworzymy

2:04sobie bardzo prosty komponent, na razie. Wyeksportujemy

2:12go. Tutaj, w tym miejscu od razu nadamy className, zgodnie

2:16z konwencją nazwiemy go, jak zwykle, wrapper. Wrócimy

2:26do naszego widoku root'owego. Zaimportujemy

2:32nasz modal w tym miejscu i wrzucimy

2:42go poza switch'a, czyli poza komponentem Switch. Wpisujemy, po prostu,

2:46modal. Okej i jak zwykle mam jakiś błąd. Pewnie zrobiłem

2:51literówkę. Sprawdźmy, tak

2:55nazwałem komponent Modaj. To nam

3:01działa, teraz ostylujemy sobie szybko naszego modala, ale chcę

3:10żeby był idealnie na środku. Dodatkowo,

3:19damy mu, powiedzmy, że 60, szerokości

3:23ekranu i jakieś 70

3:27jego wysokości. Kolor

3:34damy biały, jako tło i do tego dodamy taki fajny box-shadow. Powiedzmy, że

3:40to będzie 10 pikseli, 40 pikseli. Delikatnie

3:46go cofniemy. Sprawdźmy, jak

3:52to będzie wyglądać. Ta

3:56czwarta wartość w box-shadow, to jest taki protip - pozwala nam na osadzenie

4:01tego cienia, jakby troszkę w głąb bardziej, dzięki temu

4:05te nasze boczne cienie nie są takie płaskie. Teraz

4:10wyglądają one tragicznie. W ten sposób wygląda to dużo lepiej. I

4:15jeszcze jedna kluczowa

4:19tutaj wartość, żeby to w ogóle było w miejscu, w którym chcemy żeby było,

4:23position: fixed i teraz nasz modal znajduje się idealnie na

4:27środku ekranu, więc teraz nasz testowy Hello World zastąpimy

4:32sobie zaimportowany formularzem i zobaczymy,

4:36jak to będzie wyglądać. Okej,

4:41już teraz widzimy, że nasz formularz musi mieć trochę mniejszy margin, więc zaraz

4:45do tego przejdziemy. Tutaj zrobimy 100% - zobaczymy jak to będzie

4:49wyglądać i ten margines z dołu

4:54możemy zdjąć. Wystarczy 50. Porównajmy to

4:58z naszym design'em. Tutaj mamy wszystko wyrównanie do lewej już, więc sprawdźmy,

5:05jaka tu jest struktura, czyli w naszym wrapperze rzeczy

5:10powinny się zaczynać od flex-start. Może zróbmy tak, że wywalimy

5:15tutaj ten margines, a wrzucimy go do naszego modala. W

5:19ten sposób, będzie łatwiej odgadnąć,

5:24który komponent jest odpowiedzialny za rozłożenie poszczególnych komponentów wewnętrznego. Więc

5:29tutaj damy padding: 50 pikseli z każdej strony, powinno być

5:33okej. W naszym projekcie, to boczne są

5:38trochę większe, spróbujemy zatem dodać tutaj 80 i tutaj

5:42widzimy, że jeszcze można by trochę ten button opuścić, on jest delikatnie za wysoko

5:46w stosunku do tego, co mamy tutaj

5:50na design'ach, więc teraz otworzymy sobie formularz i z racji że wiemy, że w tym formie

5:54jest tylko jeden button, to możemy zrobić coś, po prostu, takiego. Wtedy

6:03wiem, że ta reguła jest specyficzna, tylko wyłącznie dla tego button'a, który znajduje

6:07tutaj wewnątrz. Okej i mamy taką dobrą bazę, dobrą podstawę do tego, żeby

6:11tworzyć dalszą część tego modala. W następnej lekcji zajmiemy się otwieraniem i zamykaniem

6:15modala, a także dodawaniem button'a, który pozwoli zamknąć

6:20właśnie, tym krzyżykiem, który mamy tutaj, na naszych design'ach. Dodatkowo, zajmujemy

6:24się też tworzeniem tych radio button'ów, które pozwolą nam na wybranie odpowiedniej

6:28opcji, w zależności od tego, jaką notatkę będziemy chcieli dodać do naszej aplikacji,

6:32ale to wszystko już następnej lekcji.