From a5d22a736d374b6ec83ff24faa8a29ba2dfbabf9 Mon Sep 17 00:00:00 2001 From: Ereffe <{ID}+{username}@users.noreply.github.com> Date: Sat, 13 Jan 2024 00:52:40 +0100 Subject: [PATCH 1/8] Added input component --- src/components/CustomInput.tsx | 55 ++++++++++++++++++++++++++++++++++ 1 file changed, 55 insertions(+) create mode 100644 src/components/CustomInput.tsx diff --git a/src/components/CustomInput.tsx b/src/components/CustomInput.tsx new file mode 100644 index 0000000..ed79488 --- /dev/null +++ b/src/components/CustomInput.tsx @@ -0,0 +1,55 @@ +import React, { useState } from 'react'; +import { StyleSheet, Text, TextInput, View } from 'react-native'; + +interface CustomInputProps { + label: string; + secureTextEntry?: boolean; + onSubmit: (text: string) => void; +} + +const CustomInput: React.FC = ({ + label, + secureTextEntry, + onSubmit, +}) => { + const [text, setText] = useState(''); + + const handleSubmit = () => { + onSubmit(text); + }; + + return ( + + {label} + + + ); +}; + +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, + }, +}); + +export default CustomInput; From bf1fa9ba7ebfe6637e4c64f6126a0d7aeb185e38 Mon Sep 17 00:00:00 2001 From: Kacper Mirocha <74498395+Ereffe@users.noreply.github.com> Date: Mon, 11 Mar 2024 15:40:48 +0100 Subject: [PATCH 2/8] Added theme compatibility --- src/components/Input/Input.tsx | 53 ++++++++++++++++++++++++++++++++++ style.ts | 6 ++++ 2 files changed, 59 insertions(+) create mode 100644 src/components/Input/Input.tsx diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx new file mode 100644 index 0000000..0c14069 --- /dev/null +++ b/src/components/Input/Input.tsx @@ -0,0 +1,53 @@ +import React from 'react'; +import { StyleSheet, Text, TextInput, View } from 'react-native'; + +import { useTheme } from '@/hooks'; + +type Props = React.ComponentPropsWithRef & { + label: string; + secureTextEntry?: boolean; + onSubmit: (text: string) => void; +}; + +const Input = ({ ...props }: Props) => { + const { themedStyles } = useTheme(); + return ( + + + {props.label} + + props.onSubmit(value.nativeEvent.text)} + /> + + ); +}; + +const styles = StyleSheet.create({ + container: { + marginBottom: 10, + }, + label: { + fontSize: 16, + marginBottom: 5, + fontFamily: '', + }, + input: { + borderWidth: 1, + borderRadius: 10, + width: 300, + height: 40, + padding: 10, + fontSize: 16, + }, +}); + +export default Input; diff --git a/style.ts b/style.ts index c79ba8c..1a27095 100644 --- a/style.ts +++ b/style.ts @@ -16,8 +16,14 @@ export const globalStyles = StyleSheet.create({ export const darkColors = { primary: 'blue', + inputBackground: '#2d2d2d', + text: 'white', + inputBorder: '#c7c4d6', }; export const lightColors = { primary: 'green', + inputBackground: '#f0f0f0', + Text: 'black', + inputBorder: '#c7c4d6', }; From 3ade2989c533c50915ce2edd8af6f378012354f5 Mon Sep 17 00:00:00 2001 From: Kacper Mirocha <74498395+Ereffe@users.noreply.github.com> Date: Tue, 12 Mar 2024 09:01:09 +0100 Subject: [PATCH 3/8] Deleted old version of component --- src/components/CustomInput.tsx | 55 ---------------------------------- 1 file changed, 55 deletions(-) delete mode 100644 src/components/CustomInput.tsx diff --git a/src/components/CustomInput.tsx b/src/components/CustomInput.tsx deleted file mode 100644 index ed79488..0000000 --- a/src/components/CustomInput.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import React, { useState } from 'react'; -import { StyleSheet, Text, TextInput, View } from 'react-native'; - -interface CustomInputProps { - label: string; - secureTextEntry?: boolean; - onSubmit: (text: string) => void; -} - -const CustomInput: React.FC = ({ - label, - secureTextEntry, - onSubmit, -}) => { - const [text, setText] = useState(''); - - const handleSubmit = () => { - onSubmit(text); - }; - - return ( - - {label} - - - ); -}; - -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, - }, -}); - -export default CustomInput; From bd5bacaec5caa5fbf56929543941e04c31fe55fd Mon Sep 17 00:00:00 2001 From: Kacper Mirocha <74498395+Ereffe@users.noreply.github.com> Date: Tue, 12 Mar 2024 09:21:45 +0100 Subject: [PATCH 4/8] added component to component screen (colors will be adjusted in future) --- src/components/Input/Input.tsx | 4 ++-- src/components/Input/index.ts | 1 + src/screens/Components.tsx | 6 ++++++ 3 files changed, 9 insertions(+), 2 deletions(-) create mode 100644 src/components/Input/index.ts diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx index 0c14069..cc3da98 100644 --- a/src/components/Input/Input.tsx +++ b/src/components/Input/Input.tsx @@ -20,7 +20,7 @@ const Input = ({ ...props }: Props) => { style={{ ...styles.input, backgroundColor: themedStyles.inputBackground, - color: themedStyles.lightText, + color: themedStyles.text, borderColor: themedStyles.inputBorder, }} defaultValue="" @@ -41,7 +41,7 @@ const styles = StyleSheet.create({ fontFamily: '', }, input: { - borderWidth: 1, + borderWidth: 2.3, borderRadius: 10, width: 300, height: 40, diff --git a/src/components/Input/index.ts b/src/components/Input/index.ts new file mode 100644 index 0000000..b4d3864 --- /dev/null +++ b/src/components/Input/index.ts @@ -0,0 +1 @@ +export { default as Input } from './Input'; diff --git a/src/screens/Components.tsx b/src/screens/Components.tsx index 3372bb3..b9eb02c 100644 --- a/src/screens/Components.tsx +++ b/src/screens/Components.tsx @@ -3,6 +3,7 @@ import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; import { globalStyles } from 'style'; +import { Input } from '@/components/Input'; import { SwitchTheme } from '@/components'; import { PrimaryButton } from '@/components/Button'; import { RootStackParamList } from '@/types/param'; @@ -13,6 +14,11 @@ const Home = ({ navigation }: Props) => { return ( Components screen + console.log(text)} + > navigation.navigate('Home')} From d26e98cdc2e60365d5a75143b032afe80c4cce5a Mon Sep 17 00:00:00 2001 From: Kacper Mirocha <74498395+Ereffe@users.noreply.github.com> Date: Tue, 12 Mar 2024 09:42:54 +0100 Subject: [PATCH 5/8] Fixed ESLint warnings --- src/screens/Components.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/screens/Components.tsx b/src/screens/Components.tsx index b9eb02c..8eeee48 100644 --- a/src/screens/Components.tsx +++ b/src/screens/Components.tsx @@ -3,9 +3,9 @@ import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; import { globalStyles } from 'style'; -import { Input } from '@/components/Input'; import { SwitchTheme } from '@/components'; import { PrimaryButton } from '@/components/Button'; +import { Input } from '@/components/Input'; import { RootStackParamList } from '@/types/param'; type Props = NativeStackScreenProps; @@ -18,7 +18,7 @@ const Home = ({ navigation }: Props) => { label="Email" placeholder="Enter your email" onSubmit={(text) => console.log(text)} - > + /> navigation.navigate('Home')} From 5f48b46569cb64a4ad87526128b103e9c5a28ffa Mon Sep 17 00:00:00 2001 From: Kacper Mirocha <74498395+Ereffe@users.noreply.github.com> Date: Thu, 21 Mar 2024 21:33:27 +0100 Subject: [PATCH 6/8] Changed name of the component to TextInput --- src/components/Input/index.ts | 1 - .../{Input/Input.tsx => TextInput/TextInput.tsx} | 16 ++++++++++------ src/components/TextInput/index.ts | 1 + src/screens/Components.tsx | 4 ++-- 4 files changed, 13 insertions(+), 9 deletions(-) delete mode 100644 src/components/Input/index.ts rename src/components/{Input/Input.tsx => TextInput/TextInput.tsx} (79%) create mode 100644 src/components/TextInput/index.ts diff --git a/src/components/Input/index.ts b/src/components/Input/index.ts deleted file mode 100644 index b4d3864..0000000 --- a/src/components/Input/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as Input } from './Input'; diff --git a/src/components/Input/Input.tsx b/src/components/TextInput/TextInput.tsx similarity index 79% rename from src/components/Input/Input.tsx rename to src/components/TextInput/TextInput.tsx index cc3da98..ad0fd6a 100644 --- a/src/components/Input/Input.tsx +++ b/src/components/TextInput/TextInput.tsx @@ -1,29 +1,33 @@ import React from 'react'; -import { StyleSheet, Text, TextInput, View } from 'react-native'; +import { + StyleSheet, + Text, + TextInput as ReactTextInput, + View, +} from 'react-native'; import { useTheme } from '@/hooks'; -type Props = React.ComponentPropsWithRef & { +type Props = React.ComponentPropsWithRef & { label: string; secureTextEntry?: boolean; onSubmit: (text: string) => void; }; -const Input = ({ ...props }: Props) => { +const TextInput = ({ ...props }: Props) => { const { themedStyles } = useTheme(); return ( {props.label} - props.onSubmit(value.nativeEvent.text)} /> @@ -50,4 +54,4 @@ const styles = StyleSheet.create({ }, }); -export default Input; +export default TextInput; diff --git a/src/components/TextInput/index.ts b/src/components/TextInput/index.ts new file mode 100644 index 0000000..137a144 --- /dev/null +++ b/src/components/TextInput/index.ts @@ -0,0 +1 @@ +export { default as TextInput } from './TextInput'; diff --git a/src/screens/Components.tsx b/src/screens/Components.tsx index 8eeee48..bb81de8 100644 --- a/src/screens/Components.tsx +++ b/src/screens/Components.tsx @@ -5,7 +5,7 @@ import { globalStyles } from 'style'; import { SwitchTheme } from '@/components'; import { PrimaryButton } from '@/components/Button'; -import { Input } from '@/components/Input'; +import { TextInput } from '@/components/TextInput'; import { RootStackParamList } from '@/types/param'; type Props = NativeStackScreenProps; @@ -14,7 +14,7 @@ const Home = ({ navigation }: Props) => { return ( Components screen - console.log(text)} From 91a7ab0bd9bc2fe35302e7fe6420dfde2ce0a60c Mon Sep 17 00:00:00 2001 From: Kacper Mirocha <74498395+Ereffe@users.noreply.github.com> Date: Mon, 8 Apr 2024 10:26:31 +0200 Subject: [PATCH 7/8] Added requested changes (destructuration) --- src/components/TextInput/TextInput.tsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/components/TextInput/TextInput.tsx b/src/components/TextInput/TextInput.tsx index ad0fd6a..6e780a6 100644 --- a/src/components/TextInput/TextInput.tsx +++ b/src/components/TextInput/TextInput.tsx @@ -14,13 +14,11 @@ type Props = React.ComponentPropsWithRef & { onSubmit: (text: string) => void; }; -const TextInput = ({ ...props }: Props) => { +const TextInput = ({ label, secureTextEntry, onSubmit }: Props) => { const { themedStyles } = useTheme(); return ( - - {props.label} - + {label} { color: themedStyles.text, borderColor: themedStyles.inputBorder, }} - secureTextEntry={props.secureTextEntry} - onSubmitEditing={(value) => props.onSubmit(value.nativeEvent.text)} + secureTextEntry={secureTextEntry} + onSubmitEditing={(value) => onSubmit(value.nativeEvent.text)} /> ); From 337f7aa5d53457ceba9d6f9954032e6c6c1b0a26 Mon Sep 17 00:00:00 2001 From: Ereffe Date: Tue, 9 Apr 2024 20:13:59 +0200 Subject: [PATCH 8/8] Fixed ESLint errors --- src/screens/Components.tsx | 3 +-- style.ts | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/screens/Components.tsx b/src/screens/Components.tsx index 07c727f..8871d1e 100644 --- a/src/screens/Components.tsx +++ b/src/screens/Components.tsx @@ -5,8 +5,8 @@ import { StyleSheet, Text, View } from 'react-native'; import { globalStyles } from 'style'; import { PrimaryButton } from '@/components/Button'; -import { TextInput } from '@/components/TextInput'; import { ConversationTile } from '@/components/ConversationTile'; +import { TextInput } from '@/components/TextInput'; import { SwitchTheme } from '@/components/Theme'; import { RootStackParamList } from '@/types/param'; @@ -17,7 +17,6 @@ const Home = ({ navigation }: Props) => { return ( - Components screen {t('Hello')}