React: Podawanie ikony jako props

16.8.x

0:00Cześć, w tej lekcji mamy do omówienia ciekawy przypadek, ponieważ musimy stworzyć komponent,

0:04który jest button'em z ikoną wewnątrz i zrobimy to nieco inaczej niż zrobilibyśmy

0:09to w takim czystym CSS'ie, dlatego będzie to bardzo ciekawe i taki właśnie fajny

0:13przypadek, jak można to rozwiązać przy korzystaniu ze styled-components,

0:17żeby było nam łatwiej to w tej lekcji podzielimy sobie ekran. W ten sposób

0:21będę mógł podglądać co tutaj się dzieje. Jak

0:28wyglądają dokładnie te button'y. Mamy tutaj komponent

0:32button icon, który już jest przygotowany i mamy też nowe pliki z

0:37ikonami. Przeniosłem je wszystkie do folderu items i teraz to co możemy

0:41zrobić tutaj, to taki mały eksperyment, ponieważ chciałbym żeby ikona

0:45była podawana jako props do tego button'a, czyli będziemy mieć zwykły

0:49styled-component, zaimportujemy sobie style, stworzymy

0:54sobie const'a button icon, który

0:58będzie oczywiście button'em, wyeksportujemy

1:06go i teraz tylko tak na szybko go sobie ostylujemy on ma 67

1:11wysokości i szerokości,

1:15border radius ustawimy na 20, tło

1:20naszego button'a jest przezroczyste chyba, że jest aktywny, wtedy staje

1:24się białe, więc musimy zrobić te dwie rzeczy. Na

1:29razie zajmiemy się tylko tym obrazkiem, czyli ikoną naszą. Ona będzie w URL

1:34i tutaj będziemy podawać to jak na przykład props'a

1:38item, wtedy jeśli ten item zostanie podany

1:42to zostanie właśnie przedstawiony w tym obrazku. Oczywiście jeszcze musimy ustawić no-repeat

1:48position i

1:52myślę, że tak na oko to będzie gdzieś 40% musimy

1:56jeszcze wywalić border, ponieważ włączy nam się ten domyślny, okej i

2:01teraz stwórzmy sobie dla naszego button icon story, żebyśmy

2:06mogli podglądać jak to wygląda. Oczywiście

2:11zawartość naszego button'a wywalamy, zamykamy tylko, ponieważ nasz

2:15button nie ma żadnego tekstu i spróbujmy sobie teraz zaimportować

2:19tutaj jakąś ikonę, na przykład bulb, czyli

2:24żarówka, bulb icon i teraz

2:29to, co chcemy zrobić to chcemy podać te ikonę jako props do naszego styled-component'u.

2:34Nasz storybook działa,

2:38teraz sprawdzimy czy on to zbudował. Okej,

2:46mamy tutaj komponent button icon i faktycznie mamy

2:50naszą żarówę. Teraz co możemy zrobić żeby zasymulować takie

2:55żółte tło. No bo jeśli nasz storybook ma służyć jako taka dokumentacja i mamy

2:59sobie podglądać to jak nasze komponenty się zachowują w środowisku

3:03zbliżonym do tego, które znajdziemy w aplikacji, a jednak trochę odseparowanym. No to akurat

3:08w przypadku tego button'a, który ma białe tło musimy dodać żółte

3:12tło dla naszego background'u, żeby po prostu widzieć, że ten button jest aktywny

3:16albo nieaktywny inaczej tego nie zobaczymy, więc to co możemy

3:20zrobić to na przykład stworzyć sobie tutaj taki wrapper, który będzie

3:24po prostu miał żółte tło i z racji, że używamy tutaj zwykłego JSX'a

3:29w naszych stories, to możemy zaimportować też style w

3:33to miejsce i stworzyć sobie zwykły styled-component, który

3:37na przykład nazwiemy yellow background. Sprawimy, żeby

3:41ten button, który będzie wyświetlany w nim był na środku. Okej,

3:49a przy okazji dodamy sobie jeszcze pozostałe ikony, które nam zostały tutaj

3:53w naszym folderze. Okej

4:02skoro zaimportowaliśmy wszystkie to teraz możemy sobie dodać po

4:06kolei. Okej,

4:35mamy już nasze ikony stworzone w naszych stories. Podejrzymy sobie

4:39tylko czy one faktycznie się pojawiają, wszystko się zgadza i teraz

4:44co możemy zrobić z tym żółtym tłem, oczywiście

4:48moglibyśmy zrobić coś takiego, że przed każdym naszym story

4:52wrzucamy yellow background w

4:56taki sposób, teraz jak sobie wejdziemy do pierwszego, ach nie

5:08dodałem koloru. Okej to

5:13teraz nasza ikona faktycznie wygląda tak jak w naszych design'ach tylko, że

5:17problem polega na tym, że teraz przed każdym

5:21story musiałbym dodawać i zamykać ten

5:25background, czyli mielibyśmy pięć razy to samo i na szczęście już

5:30raz to wykorzystałem w naszym config'u, tutaj w storybook'u. Możemy

5:35zaimportować sobie addDecorator, który przyjmuje jako parametr story, oplata to story

5:41w co tam chcemy i wrzucamy to story tutaj w taki sposób, więc

5:45teraz zrobimy to samo tutaj w praktyce. To sobie na razie trochę odsuniemy

5:49i musimy tutaj wykorzystać właśnie tę metodę addDecorator i on

5:56działa w taki sposób, że wykonuje to co chcemy przed każdym story. Musimy

6:00tutaj podać story i tu

6:10niech nam zwróci coś takiego i teraz jeśli

6:15to dobrze zrobiłem to przed każdym naszym story właśnie zostanie dodany

6:19to yellow background i teraz każdy story z automatu będzie już miał to

6:24żółte tło i tak się właśnie stało. Super

6:28teraz przejdźmy sobie jeszcze na chwilę do naszego komponentu, to

6:33na razie możemy sobie zamknąć teraz podzielimy ekran z naszą przeglądarką, ponieważ

6:38w naszych design'ach jest tak, że jeśli button jest nieaktywny to ma przezroczyste tło. Tu

6:47możemy zrobić coś takiego i teraz w momencie kiedy nasz

6:51baton jest aktywny dopiero wtedy dostanie tło białe. W

6:56naszym przypadku możemy zrobić to w ten

7:00sposób, że podamy po prostu props'a Active, jeśli

7:04Active będzie, wtedy podajemy White,

7:08a jeśli Active jest

7:12false wtedy podajemy transparent i teraz jeśli sobie przejdziemy

7:17do naszego story i stworzymy na

7:21przykład Active, dodamy tutaj po prostu

7:25props'a Active, to

7:29widzimy, że białe tło się pojawia. Okej, to na tej lekcji przygotowaliśmy

7:33sobie fajny, prosty komponencik button icon, który przyjmuje icon

7:38jako props'a i zmienia kolor tła kiedy podajemy mu props'a Active.