React Native komponenty: lista i kalendarze

2 komponenty na React Native.

1. Lista "koło"

--------------------------

Listopad

Grudzień

Styczeń

Luty

Marzec

--------------------------

Props:

• items: string[] | {value,label}[]
  ["Styczeń", ..., "Grudzień"] | [{value: "0" label: "Styczeń"}, ..., {value: "11" label: "Grudzień"}]
• loop: boolean
• strings: number – zawsze przekształcane do liczby nieparzystej (na przykład, 4 → 5), aby wybrany wiersz znajdował się na środku
• selected: string | value
• disable: string[] | value[] – Mogę odnosić się do elementów zarówno po etykiecie, jak i po wartości, więc oba warianty powinny działać.

Events: 

• onChange zwraca wybrany string | value

Bez efektu 3D, płaski. Z inercją, jeśli przesunięto. Dobry przykład - wybór czasu na budziku w Androidzie.

Projekt, oczywiście, konfigurowalny. Zmiana czcionek, odstępów itp. nie powinna łamać komponentu

2. Dwa kalendarze, zbudowane na podstawie tego koła

1. Zwykły kalendarz, który wprowadza/wyprowadza daty w formacie „dd-mm-rrrr”.

2. Kalendarz żydowski z identycznym interfejsem zewnętrznym „dd-mm-rrrr”, ale wewnętrznie używający żydowskiego systemu dat. Aby poznać liczbę dni w miesiącu w roku, użyj biblioteki „hebcal”.

Co oczekuję otrzymać

• Wielokrotnego użytku, dobrze typowane komponenty React Native (preferowane TypeScript)

• Czysty, skomentowany kod źródłowy bez zewnętrznych modułów natywnych, poza standardowymi bibliotekami React Native i bibliotekami dat od społeczności (np. moment-hijri, date-fns i podobne)

• Szybki ekran demonstracyjny, pokazujący koło osobno i każdy kalendarz w akcji

• Podstawowy plik README z opisem właściwości, oczekiwanych formatów i przykładem importu

Integruję komponenty w istniejącej aplikacji, więc jasność i łatwość utrzymania odgrywają kluczową rolę.

Oto przykłady wyglądu: