Input component 86937xxay #2
Conversation
Ereffe
commented
Jan 12, 2024
•
Ereffe
commented
| import React, { useState } from 'react'; | ||
| import { StyleSheet, Text, TextInput, View } from 'react-native'; | ||
|
|
||
| interface CustomInputProps { |
There was a problem hiding this comment.
zamiast interface stosujmy type
| onSubmit: (text: string) => void; | ||
| } | ||
|
|
||
| const CustomInput: React.FC<CustomInputProps> = ({ |
There was a problem hiding this comment.
ogólnie są dwie opcje typowania komponentu. W zasadzie obie są okej pod warunkiem, że stosuje je każdy w aplikacji spójnie.
W tym przypadku ja proponuję taki schemat, bo po prostu sam taki używam na daily basis w pracy i się przyzwyczaiłem XD
const CustomInput = ({ ...propsy }: CustomInputProps) => ...
| import React, { useState } from 'react'; | ||
| import { StyleSheet, Text, TextInput, View } from 'react-native'; | ||
|
|
||
| interface CustomInputProps { |
There was a problem hiding this comment.
każdy wie, że ten typ jest napisany do propsów komponentu poniżej, więc nie ma potrzeby pisać CustomInputProps. Wystarczy Props :)
| onSubmit: (text: string) => void; | ||
| } | ||
|
|
||
| const CustomInput: React.FC<CustomInputProps> = ({ |
There was a problem hiding this comment.
Nazwa zamiast CustomInput to Input
| const styles = StyleSheet.create({ | ||
| container: { | ||
| marginBottom: 10, | ||
| }, | ||
| label: { | ||
| fontSize: 16, | ||
| marginBottom: 5, | ||
| fontFamily: '', | ||
| }, | ||
| input: { | ||
| borderWidth: 1, | ||
| borderColor: '#c7c4d6', | ||
| borderRadius: 10, | ||
| width: 300, | ||
| height: 40, | ||
| padding: 10, | ||
| fontSize: 16, | ||
| }, | ||
| }); |
There was a problem hiding this comment.
w projekcie można już korzystać ze stylowania zgodnie z dokumentacją. Docelowo chcemy tworzyć wersję w motywie jasnym i ciemnym i takie też inputy potrzebujemy w tym zadaniu
| <TextInput | ||
| style={styles.input} | ||
| value={text} | ||
| secureTextEntry={secureTextEntry} | ||
| onChangeText={setText} | ||
| onSubmitEditing={handleSubmit} |
There was a problem hiding this comment.
brakuje propsa defaultValue.
Ogólnie wydaje mi się, że raczej tutaj nie będzie potrzeby użycia hooka. Sprawdź czy przypadkiem metoda onSubmitEditing nie zawiera eventu jako 1 argumentu, z którego możesz wyciągnąć wartość inputa.
| import React, { useState } from 'react'; | ||
| import { StyleSheet, Text, TextInput, View } from 'react-native'; | ||
|
|
||
| interface CustomInputProps { |
There was a problem hiding this comment.
dobrą techniką tutaj byłoby przyjęcie przez propsów dokładnie takich samych typów jak komponent TextInput. W ten sposób mamy pewność, że inputowi można przekazać jego wszystkie propsy a wyglądałoby to tak:
type Props = React.ComponentsPropsWithRef<typeof TextInput> & { jakieś nasze propsy, których TextInput nie zawiera, takie jak pewnie label }
| secureTextEntry, | ||
| onSubmit, | ||
| }) => { | ||
| const [text, setText] = useState(''); |
There was a problem hiding this comment.
jeśli już byś chciał użyć useState, co w tym przypadku jest zbędne, to na przyszłość zauważ, że w takim przypadku jak tutaj mamy czasami do czynienia z inputami, które mają domyślnie wpisaną jakąś wartość. Wówczas useState powinien przyjąć tą domyślną wartość jako wartość początkową, a nie pustego stringa
|
oprócz labelki, input powinien też zawierać potencjalny error, którego na razie brakuje na figmie, ale poprosiłem o dodanie go |
