figbertmath

commit 4feddc67fd9aced662be3ac47fa8869ceceefbeb
parent b7ad8ca2fce76a46feaac12785e156b447134633
Author: therealFIGBERT <figbertwelner@gmail.com>
Date:   Fri, 22 Nov 2019 18:25:40 -0800

Separate BasicPad into calcPads.js, move inline background style into class

Diffstat:
M
src/components/App.css
 | 
1
+
M
src/components/App.js
 | 
2
+-
M
src/components/calcButton.js
 | 
48
+++++++++++-------------------------------------
A
src/components/calcPads.js
 | 
16
++++++++++++++++

4 files changed, 29 insertions(+), 38 deletions(-)
diff --git a/src/components/App.css b/src/components/App.css
@@ -18,6 +18,7 @@
 
 .calc__pad {
     height: 75vh;
+    background-color: #1d1d1d;
     display: flex;
     flex-direction: column;
     flex-wrap: wrap;
diff --git a/src/components/App.js b/src/components/App.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import './App.css';
 import { CalcOut } from "./calcOut";
-import { BasicPad } from "./calcButton";
+import { BasicPad } from "./calcPads";
 
 export class App extends React.Component {
   constructor(props) {
diff --git a/src/components/calcButton.js b/src/components/calcButton.js
@@ -1,8 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import './App.css'
 
-export class CalcButton extends React.Component {
+class CalcButton extends React.Component {
     buttonFlex = {
         display: 'flex',
         flexDirection: 'column',
@@ -19,46 +18,20 @@ export class CalcButton extends React.Component {
     }
 }
 CalcButton.propTypes = {
-    value: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.number
-    ]).isRequired
+    value: PropTypes.string.isRequired
 };
 
-export class BasicPad extends React.Component {
+export class CalcButtonRow extends React.Component {
     render() {
         return (
-            <div className='calc calc__pad' style={{background: '#1d1d1d'}}>
-                <div className='calc calc__row'>
-                    <CalcButton value={'AC'} />
-                    <CalcButton value={'±'} />
-                    <CalcButton value={'%'} />
-                    <CalcButton value={'÷'} />
-                </div>
-                <div className='calc calc__row'>
-                    <CalcButton value={'7'} />
-                    <CalcButton value={'8'} />
-                    <CalcButton value={'9'} />
-                    <CalcButton value={'×'} />
-                </div>
-                <div className='calc calc__row'>
-                    <CalcButton value={'4'} />
-                    <CalcButton value={'5'} />
-                    <CalcButton value={'6'} />
-                    <CalcButton value={'–'} />
-                </div>
-                <div className='calc calc__row'>
-                    <CalcButton value={'1'} />
-                    <CalcButton value={'2'} />
-                    <CalcButton value={'3'} />
-                    <CalcButton value={'+'} />
-                </div>
-                <div className='calc calc__row'>
-                    <CalcButton style={{flexGrow: 2}} value={'0'} />
-                    <CalcButton value={'.'} />
-                    <CalcButton value={'='} />
-                </div>
+            <div className='calc calc__row'>
+                {this.props.buttonValues.map(function (value, index, _) {
+                    return <CalcButton idx={index} value={value} />;
+                })}
             </div>
         );
     }
 }
+CalcButtonRow.propTypes = {
+    buttonValues: PropTypes.arrayOf(PropTypes.string).isRequired
+};
+\ No newline at end of file
diff --git a/src/components/calcPads.js b/src/components/calcPads.js
@@ -0,0 +1,15 @@
+import React from "react";
+import { CalcButtonRow } from "./calcButton";
+
+export class BasicPad extends React.Component {
+    render() {
+        return (
+            <div className='calc calc__pad'>
+                <CalcButtonRow buttonValues={['AC', '±', '%', '÷']} />
+                <CalcButtonRow buttonValues={['4', '5', '6', '–']} />
+                <CalcButtonRow buttonValues={['1', '2', '3', '+']} />
+                <CalcButtonRow buttonValues={['0', '.', '=']} />
+            </div>
+        );
+    }
+}
+\ No newline at end of file