Addition of function to differentiate types of buttons

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

Hide file tree

Showing 2 changed files with 63 additions and 32 deletions.
diff --git a/src/components/buttons/ButtonsBody.js b/src/components/buttons/ButtonsBody.js
@@ -3,38 +3,46 @@ import { View, StyleSheet } from 'react-native';
 import CommandButton from './CommandButton';
 
 export default function() {
+ const button_text = [
+ {
+ line: ['C', '%', '*', '←'],
+ method: 'getButtonText()'
+ },
+ {
+ line: ['7', '8', '9', '/'],
+ method: 'getButtonText()'
+ },
+ {
+ line: ['4', '5', '6', '-'],
+ method: 'getButtonText()'
+ },
+ {
+ line: ['1', '2', '3', '+'],
+ method: 'getButtonText()'
+ },
+ {
+ line: ['≠', '0', '.', '='],
+ method: 'getButtonText()'
+ }
+ ]
+
  return (
  <View style={styles.marginAreaButton}>
- <View style={styles.buttonAreaContainer}>
- <CommandButton valueNumber={'C'}/>
- <CommandButton valueNumber={'%'}/>
- <CommandButton valueNumber={'*'}/>
- <CommandButton valueNumber={'←'}/>
- </View>
- <View style={styles.buttonAreaContainer}>
- <CommandButton valueNumber={7}/>
- <CommandButton valueNumber={8}/>
- <CommandButton valueNumber={9}/>
- <CommandButton valueNumber={'/'}/>
- </View>
- <View style={styles.buttonAreaContainer}>
- <CommandButton valueNumber={4}/>
- <CommandButton valueNumber={5}/>
- <CommandButton valueNumber={6}/>
- <CommandButton valueNumber={'-'}/>
- </View>
- <View style={styles.buttonAreaContainer}>
- <CommandButton valueNumber={1}/>
- <CommandButton valueNumber={2}/>
- <CommandButton valueNumber={3}/>
- <CommandButton valueNumber={'+'}/>
- </View>
- <View style={styles.buttonAreaContainer}>
- <CommandButton valueNumber={'≠'}/>
- <CommandButton valueNumber={0}/>
- <CommandButton valueNumber={'.'}/>
- <CommandButton valueNumber={'='}/>
- </View>
+ {
+ button_text.map((titles) => {
+ return (
+ <View style={styles.buttonAreaContainer}>
+ {
+ titles.line.map((text) => {
+ return (
+ <CommandButton valueButton={text} method={titles.method}/>
+ )
+ })
+ }
+ </View>
+ )
+ })
+ }
  </View>
  );
 }

diff --git a/src/components/buttons/CommandButton.js b/src/components/buttons/CommandButton.js
@@ -2,9 +2,32 @@ import React from 'react';
 import { StyleSheet, TouchableOpacity, Text } from 'react-native';
 
 export default function(props) {
+ const operators = ['C', '%', '*', '←', '/', '-', '+', '.', '=', '≠']
+
+ const getButtonText = (value) => {
+ if(checkIsOperator(value)) { getOperator(value) }
+ if(checkIsNumeric(value)) { getNumber(value) }
+ }
+
+ const checkIsOperator = (value) => {
+ return operators.includes(value)
+ }
+
+ const checkIsNumeric = (value) => {
+ return /^-?\d+$/.test(value)
+ }
+
+ const getNumber = (value) => {
+ console.log('Number')
+ }
+
+ const getOperator = (value) => {
+ console.log('Operator')
+ }
+
  return (
- <TouchableOpacity style={styles.buttonStyle}>
- <Text style={styles.textButton}>{props.valueNumber}</Text>
+ <TouchableOpacity style={styles.buttonStyle} onPress={getButtonText(props.valueButton)}>
+ <Text style={styles.textButton}>{props.valueButton}</Text>
  </TouchableOpacity>
  )
 }