Returning numbers to TextInput - component settings

LordWeli · Apr 2, 2021 · bf5f026 · bf5f026
1 parent be4ba00
commit bf5f026
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 24 deletions.
diff --git a/src/components/Body.js b/src/components/Body.js
@@ -1,13 +1,19 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { StyleSheet, View, TextInput } from 'react-native';
 import CommandButtons from './buttons/ButtonsBody'
 
 export default function() {
+ const [numbers, setNumbers] = useState(0);
+
+ const updateSetNumbers = (value) => {
+ setNumbers(value)
+ }
+
  return (
  <View style={styles.container}>
  <View style={styles.areaContainer}>
- <TextInput editable={false} style={styles.textArea}/>
- <CommandButtons/>
+ <TextInput editable={false} style={styles.textArea} textAlign='right' value={numbers}/>
+ <CommandButtons updateState={updateSetNumbers}/>
  </View>
  </View>
  );
@@ -20,6 +26,7 @@ const styles = StyleSheet.create({
  height: '100%',
  alignItems: 'center',
  justifyContent: 'center',
+ flex: 1
  },
  areaContainer: {
  width: '90%',
@@ -29,6 +36,7 @@ const styles = StyleSheet.create({
  borderColor: '#b7b7b7',
  borderWidth: 1,
  width: '100%',
- height: 200
- },
+ height: 200,
+ fontSize: 45
+ }
 });
diff --git a/src/components/buttons/ButtonsBody.js b/src/components/buttons/ButtonsBody.js
@@ -2,40 +2,35 @@ import React from 'react';
 import { View, StyleSheet } from 'react-native';
 import CommandButton from './CommandButton';
 
-export default function() {
+export default function(props) {
  const button_text = [
  {
- line: ['C', '%', '*', '←'],
- method: 'getButtonText()'
+ line: ['C', '%', '*', '←']
  },
  {
- line: ['7', '8', '9', '/'],
- method: 'getButtonText()'
+ line: ['7', '8', '9', '/']
  },
  {
- line: ['4', '5', '6', '-'],
- method: 'getButtonText()'
+ line: ['4', '5', '6', '-']
  },
  {
- line: ['1', '2', '3', '+'],
- method: 'getButtonText()'
+ line: ['1', '2', '3', '+']
  },
  {
- line: ['≠', '0', '.', '='],
- method: 'getButtonText()'
+ line: ['≠', '0', '.', '=']
  }
  ]
 
  return (
  <View style={styles.marginAreaButton}>
  {
- button_text.map((titles) => {
+ button_text.map((titles, titles_index) => {
  return (
- <View style={styles.buttonAreaContainer}>
+ <View style={styles.buttonAreaContainer} key={titles_index}>
  {
- titles.line.map((text) => {
+ titles.line.map((text, text_index) => {
  return (
- <CommandButton valueButton={text} method={titles.method}/>
+ <CommandButton valueButton={text} key={text_index} updateNumber={props.updateState}/>
  )
  })
  }

diff --git a/src/components/buttons/CommandButton.js b/src/components/buttons/CommandButton.js
@@ -18,16 +18,16 @@ export default function(props) {
  }
 
  const getNumber = (value) => {
- console.log('Number')
+ props.updateNumber(value)
  }
 
  const getOperator = (value) => {
- console.log('Operator')
+ props.updateNumber(value)
  }
 
  return (
- <TouchableOpacity style={styles.buttonStyle} onPress={getButtonText(props.valueButton)}>
- <Text style={styles.textButton}>{props.valueButton}</Text>
+ <TouchableOpacity style={styles.buttonStyle} onPress={() => getButtonText(props.valueButton)}>
+ <Text style={styles.textButton}> {props.valueButton} </Text>
  </TouchableOpacity>
  )
 }