8693cb4dw create status button #10
Conversation
src/components/StatusButton.tsx
Outdated
| } from 'react-native'; | ||
| import Svg, { Circle, Path } from 'react-native-svg'; | ||
|
|
||
| type Param = { |
src/components/StatusButton.tsx
Outdated
| onPress: (event: GestureResponderEvent) => void; | ||
| }; | ||
|
|
||
| const StatusButton = (param: Param) => { |
There was a problem hiding this comment.
param: Param => { title, status, onPress }: Props.
Dekstrukturyzacja obiektu
src/components/StatusButton.tsx
Outdated
| const styles = StyleSheet.create({ | ||
| button: { | ||
| justifyContent: 'center', | ||
| backgroundColor: '#ffffff', | ||
| width: 232, | ||
| height: 44, | ||
| borderRadius: 10, | ||
| paddingLeft: 10, | ||
| marginTop: 10, | ||
| shadowColor: '#0000001A', | ||
| shadowOffset: { width: 0, height: 1 }, | ||
| shadowOpacity: 1, | ||
| shadowRadius: 6, | ||
| }, | ||
| text: { | ||
| color: '#000000', | ||
| fontSize: 12, | ||
| paddingHorizontal: 30, | ||
| paddingVertical: 5, | ||
| position: 'absolute', | ||
| }, | ||
| }); |
There was a problem hiding this comment.
na pewno nie chcemy hard codować kolorów. Jeśli jakiś kolor nie jest zdefiniowany w pliku styles.ts, to zdefiniuj go, tak aby był dostępny globalnie. Pamiętaj o tym, że chcemy mieć jasny i ciemny motyw aplikacji, więc spraw, aby ten button był już gotowy w jednej i drugiej wersji
src/components/StatusButton.tsx
Outdated
| type Param = { | ||
| title: string; | ||
| status: number; | ||
| onPress: (event: GestureResponderEvent) => void; | ||
| }; |
There was a problem hiding this comment.
ogólnie fajnie jakby button przyjmował wszystkie propsy jakie normalnie przyjmuje komponent <Pressable />
Zrób to w taki sposób:
type Props = React.ComponentPropsWithRef<typeof Pressable> & { jakieś propsy, których pressable nie przyjmuje, a potrzebujemy je w komponencie }
App.tsx
Outdated
| @@ -1,12 +1,19 @@ | |||
| import { StatusBar } from 'expo-status-bar'; | |||
| import { StyleSheet, Text, View } from 'react-native'; | |||
| import { globalStyles } from 'style'; | |||
|
|
|||
| import StatusButton from './src/components/StatusButton'; | |||
There was a problem hiding this comment.
używajmy aliasów: @/components
There was a problem hiding this comment.
używajmy też plików reeksportujących. Zgodnie ze strukturą w readme. Plik reeksportujący to plik index.ts, w readme jest to index.tsx, ale zostanie to poprawione.
Oprócz tego możesz wrzucić ten komponent w folder /components/Button
assets/status1.svg
Outdated
There was a problem hiding this comment.
mogę się dowiedzieć po co te ikony tutaj skoro one nie są nigdzie importowane?
src/components/StatusButton.tsx
Outdated
| }; | ||
|
|
||
| const StatusButton = (param: Param) => { | ||
| const selectStatus = (property: number) => { |
There was a problem hiding this comment.
ta funkcja wygląda słabo. Poszczególny case'y można wydzielić do osobnych komponentów
src/components/StatusButton.tsx
Outdated
|
|
||
| type Param = { | ||
| title: string; | ||
| status: number; |
There was a problem hiding this comment.
nie podoba mi się to, że status jest typu number. Numer 0 nic tak naprawdę nie mówi o statusie. Docelowo to powinno być mapowane na jakiś union type
…ego + uzycie pliku reeksportujacego + przeniesienie przycisku + usniecie plikow svg + destrukturyzacja obiekotu
|
Uzywanie aliasow + style globalne + poszczegolne casy w osobych komponentach + usuniecie zbednych ikon + zmian typu statusu + destrukutuyuzacja obiektu + użycie pliku reeksportujacego |
| onPress: (event: GestureResponderEvent) => void; | ||
| }; | ||
|
|
||
| const StatusButton = (param: Props) => { |
There was a problem hiding this comment.
to niestety nie jest ani trochę hook, wrzuć to do komponentu
| </View> | ||
| ); | ||
| }; | ||
| export default AccessibleStatusButton; |
There was a problem hiding this comment.
zachowuj odstępy pomiędzy takimi rzeczami jak komponent, export, style
| borderRadius: 10, | ||
| paddingLeft: 10, | ||
| marginTop: 10, | ||
| shadowColor: '#000', |
There was a problem hiding this comment.
starajmy się nie używać hardcored colors tylko używajmy zmiennych z pliku style.cs. Co prawda nie jest on jeszcze uzupełniony zmiennymi zgodnymi z figmą, ale nie powielajmy złego podejścia
There was a problem hiding this comment.
Jak coś to wszystko jest opisane w readme
| const StatusButton = (param: Props) => { | ||
| const { themedStyles } = useTheme(); | ||
| const actualStatus: Status = 'Inaccessible'; //added temporarily until the selected status is supported | ||
| const buttonStatus: Status = param.status; |
There was a problem hiding this comment.
nie musisz przypisywać tego do zmiennej jeśli i tak wykorzystujesz to w kodzie jeden raz
|
|
||
| const StatusButton = (param: Props) => { | ||
| const { themedStyles } = useTheme(); | ||
| const actualStatus: Status = 'Inaccessible'; //added temporarily until the selected status is supported |
There was a problem hiding this comment.
nie do końca rozumiem o co tutaj chodzi osobiście
| buttonBackground: 'blue', | ||
| buttonText: 'white', | ||
| buttonActive: '#E4E4E4', |
There was a problem hiding this comment.
nie używajmy kolorów typu blue, white, zamiast tego używajmy hexa zgodnie z figmą
There was a problem hiding this comment.
Zauważ, że powielasz jeden schemat tworzenia komponentu 5 razy. Można to rozwiązać w tym przypadku następująco:
Ta część, która się powtarza może zostać wydzielona do osobnego komponentu, który przyjmuje props. Komponentem byłby text ze stylami, które byłyby zdefiniowane raz, w jednym miejscu, a do niego przekaż props text, który będzie inny w zależności od tego jaki to będzie status.
AccessibleStatusButton = () => {
.....
return {....... }
}
I to samo dla pozostałych, tylko przekażesz inny props text
There was a problem hiding this comment.
daj znać po co jest jaka paczka, bo kojarzę, że coś tam było potrzebne, ale widzę teraz, że sporo tego wyszło
Create status button
