Using input masks to help guide the users on what type of values to i…

…nput.
ryanwiemer · Jun 13, 2017 · 0208a0c · 0208a0c
1 parent 144cd14
commit 0208a0c
Showing 1 changed file with 8 additions and 11 deletions.
diff --git a/src/components/Calculator.js b/src/components/Calculator.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import MaskedTextInput from 'react-text-mask';
-import { createNumberMask } from 'text-mask-addons';
+import createNumberMask from 'text-mask-addons/dist/createNumberMask';
 
 class Calculator extends Component {
   constructor() {
@@ -30,14 +30,6 @@ class Calculator extends Component {
    });
   }
 
-  // Settings for the input masks via react-text-mask and text-mask-addons
-  maskSettings = () => {
-    const numberMask = createNumberMask({
-      decimalSymbol: '.',
-      allowDecimal: true
-    });
-  }
-
   // Calculator Logic
   calibrationEquation = (a,b) => {
     const equationResult = a / b;
@@ -102,7 +94,7 @@ class Calculator extends Component {
       <div className="calculator">
           <div className="input-container">
             <MaskedTextInput
-              mask={[/[0-9]/,/[0-9]/,/[0-9]/,/[0-9]/]}
+              mask={[/[1-9]/, /[0-9]/, /[0-9]/]}
               guide={false}
               className="input input--blood"
               name="blood"
@@ -112,7 +104,12 @@ class Calculator extends Component {
               onChange={(event) => this.setState({ blood: event.target.value })}
             />
             <MaskedTextInput
-              mask={[/[0-9]/,/[0-9]/,/[0-9]/,/[0-9]/]}
+              mask={createNumberMask({
+                decimalSymbol: '.',
+                allowDecimal: true,
+                suffix: '',
+                prefix: '',
+              })}
               guide={false}
               className="input input--isig"
               name="isig"