Week 5 (Button && Inputs)

App.tsx

@@ -1,10 +1,18 @@
+import React from "react";
 import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
+import Buttons from './components/Buttons';
+import CustomInput from './components/Input';
+import WelcomeForm from "./components/WelcomeForm";
+import BoxForm from "./components/BoxForm";
 
 export default function App() {
   return (
     <View style={styles.container}>
-      <Text>Open up App.tsx to start working on your app!</Text>
+      {/*<Buttons />*/}
+      {/*<CustomInput />*/}
+      {/*<WelcomeForm />*/}
+      <BoxForm />
       <StatusBar style="auto" />
     </View>
   );

components/BoxForm/BoxForm.tsx

@@ -0,0 +1,75 @@
+import React, {useState} from 'react';
+import { View, Text, StyleSheet, TextInput, Button } from 'react-native';
+
+type TBox = { width?: number, height?: number, color?: string };
+const defaultBox = [
+  {
+    color: 'red',
+  },
+  {
+    color: 'blue',
+  },
+]
+
+const BoxForm = () => {
+  const [height, setHeight] = useState<string>('');
+  const [width, setWidth] = useState<string>('');
+  const [color, setColor] = useState<string>('');
+  const [boxArray, setBoxArray] = useState<TBox[]>(defaultBox);
+
+  const onSubmit = () => {
+    const newBox = {
+      height: height ? Number.parseInt(height) : undefined,
+      width:  width ? Number.parseInt(width) : undefined,
+      color: color ? color.toLocaleLowerCase() : undefined,
+    };
+    setBoxArray([...boxArray, newBox])
+  };
+
+  return (
+    <View style={{ flex: 1, justifyContent: 'center'}} >
+      {boxArray.map(({ color, width, height }, i) =>
+        <Box key={i} height={height} width={width} color={color} />
+      )}
+
+      <View style={styles.form}>
+        <TextInput placeholder="width" style={styles.inputStyles} onChangeText={setWidth} />
+        <TextInput placeholder="height" style={styles.inputStyles} onChangeText={setHeight} />
+        <TextInput placeholder="color" style={styles.inputStyles} onChangeText={setColor} />
+      </View>
+      <Button onPress={onSubmit} title="Add" />
+    </View>
+  );
+}
+
+export default BoxForm;
+
+export const Box = ({ width = 100, height = 100, color = 'red' }: TBox) => (
+  <View style={{ width: width, height: height, backgroundColor: color}} />
+);
+
+const styles = StyleSheet.create({
+  inputStyles: {
+    borderWidth: 1,
+    height: 40,
+    borderColor: '#2287eb',
+    borderRadius: 3,
+    marginRight: 8,
+    marginTop: 16,
+    paddingHorizontal: 12,
+    width: 100,
+  },
+  text: {
+    marginTop: 16,
+    color: 'red',
+  },
+  searchForm: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  form: {
+    flexDirection: 'row',
+    alignItems: 'center',
+
+  }
+});

components/BoxForm/index.ts

@@ -0,0 +1 @@
+export { default } from './BoxForm';

components/Buttons/Buttons.tsx

@@ -0,0 +1,21 @@
+import React, {useState} from 'react';
+import {Button} from "react-native";
+
+const Buttons = () => {
+  const [clickCount, setClickCount] = useState(0);
+  return (
+    <>
+      <Button
+        title="Click!"
+        onPress={() => setClickCount(clickCount + 1)}
+        disabled={clickCount >= 3}
+      />
+      <Button
+        title="Reset"
+        onPress={() => setClickCount(0)}
+      />
+    </>
+  )
+};
+
+export default Buttons;

components/Buttons/index.ts

@@ -0,0 +1 @@
+export { default } from './Buttons';

components/Input/CustomInput.tsx

@@ -0,0 +1,42 @@
+import React, {useState} from 'react';
+import {Button, Text, TextInput, StyleSheet} from "react-native";
+
+const CustomInput = () => {
+  const [value, setValue] = useState<string>("");
+  const [submitValue, setSubmitValue] = useState<string>("");
+  const [currentValue, setCurrentValue] = useState<string>("");
+
+  const onSubmit = () => setSubmitValue(currentValue);
+
+  return (
+    <>
+      <Text style={styles.text}> {value} </Text>
+      <TextInput style={styles.inputStyles} onChangeText={setValue} />
+
+      <Text style={styles.text}> {submitValue} </Text>
+      <TextInput style={styles.inputStyles} onChangeText={setCurrentValue} />
+      <Button onPress={onSubmit} title="submit" />
+    </>
+  )
+};
+
+const styles = StyleSheet.create({
+  inputStyles: {
+    borderWidth: 1,
+    height: 40,
+    borderColor: '#2287eb',
+    borderRadius: 3,
+    width: '75%',
+    marginRight: 8,
+    paddingHorizontal: 12,
+  },
+  text: {
+    marginVertical: 16,
+  },
+  searchForm: {
+    flexDirection: 'row',
+    alignItems: "center",
+  },
+});
+
+export default CustomInput;

components/Input/index.ts

@@ -0,0 +1 @@
+export { default } from './CustomInput';

components/WelcomeForm/WelcomeForm.tsx

@@ -0,0 +1,54 @@
+import React, { useState } from 'react';
+import { Button, Text, TextInput, StyleSheet } from 'react-native';
+
+const WelcomeForm = () => {
+  const [password, setPassword] = useState<string>("");
+  const [login, setLogin] = useState<string>("");
+  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
+  const [error, setError] = useState<string>("");
+
+  const onSubmit = () => {
+    if (!password || !login) {
+      setError("Fill in all fields please");
+      return;
+    };
+    setIsSubmitting(true);
+  };
+
+  return (
+    <>
+      {isSubmitting ? <Text> Welcome! </Text> : (
+        <>
+          <Text> Sign In </Text>
+          <TextInput placeholder="Login" style={styles.inputStyles} onChangeText={setLogin} />
+          <TextInput secureTextEntry={true}  placeholder="Password" style={styles.inputStyles} onChangeText={setPassword} />
+          {error && <Text style={styles.text}> {error} </Text>}
+          <Button onPress={onSubmit} title="submit" />
+        </>
+      )}
+    </>
+  )
+};
+
+const styles = StyleSheet.create({
+  inputStyles: {
+    borderWidth: 1,
+    height: 40,
+    borderColor: '#2287eb',
+    borderRadius: 3,
+    width: '75%',
+    marginRight: 8,
+    marginTop: 16,
+    paddingHorizontal: 12,
+  },
+  text: {
+    marginTop: 16,
+    color: 'red',
+  },
+  searchForm: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+});
+
+export default WelcomeForm;

components/WelcomeForm/index.ts

@@ -0,0 +1 @@
+export { default } from './WelcomeForm';