figbertmath

commit 908be298e2c0beb1cfe05776cbc84da6f232236b
parent b5c357a6039d9851d0de69eb83c67a2cea67350b
Author: therealFIGBERT <figbertwelner@gmail.com>
Date:   Mon,  2 Dec 2019 20:51:56 -0800

Fix display error for multi-line outputs

Previous versions of figbertMath used \n to create new lines, which does not work in HTML. This fix allows arrays to be submitted as output, which will then be split up with <br /> tags to create the desired multi-line effect.

Diffstat:
M
src/components/highLevel/polygonAngle.js
 | 
2
+-
M
src/components/lowLevel/calcOut/index.js
 | 
32
++++++++++++++++++++++++++------

2 files changed, 27 insertions(+), 7 deletions(-)
diff --git a/src/components/highLevel/polygonAngle.js b/src/components/highLevel/polygonAngle.js
@@ -63,7 +63,7 @@ export class PolygonAngle extends React.Component {
                     eachExterior = '~' + Math.round(eachExterior);
                 }
                 this.setState({
-                    output: 'Total Interior: ' + totalInterior + '°\nEach Interior: ' + eachInterior + '°\nEach Exterior: ' + eachExterior + '°'
+                    output: ['Total Interior: ' + totalInterior + '°', 'Each Interior: ' + eachInterior + '°', 'Each Exterior: ' + eachExterior + '°']
                 })
             } else {
                 this.setState({
diff --git a/src/components/lowLevel/calcOut/index.js b/src/components/lowLevel/calcOut/index.js
@@ -18,17 +18,37 @@ export class CalcOut extends React.Component {
                 </div>
             );
         } else {
-            return (
-                <div className={styles.out}>
-                    <span className={styles.h2}>{this.props.output}</span>
-                </div>
-            );
+            if (typeof this.props.output !== 'object') {
+                return (
+                    <div className={styles.out}>
+                        <span className={styles.h2}>{this.props.output}</span>
+                    </div>
+                );
+            } else {
+                let outputBreaks = [];
+                for (let i = 0; i < this.props.output.length; i++) {
+                    if (i + 1 === this.props.output.length) {
+                        outputBreaks.push(this.props.output[i])
+                    } else {
+                        outputBreaks.push(this.props.output[i], <br />)
+                    }
+                }
+                return (
+                    <div className={styles.out}>
+                        <span className={styles.h2}>{outputBreaks}</span>
+                    </div>
+                );
+            }
         }
     }
 }
 
 CalcOut.propTypes = {
     mode: PropTypes.string.isRequired,
-    output: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    output: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.number,
+        PropTypes.array
+    ]),
     input: PropTypes.string
 };
 \ No newline at end of file