Complete rules page

4 files changed, 31 insertions, 28 deletions

diff --git a/frontend/src/components/fields/ButtonField.js b/frontend/src/components/fields/ButtonField.js
index f2f02fd..cc32b0f 100644
--- a/frontend/src/components/fields/ButtonField.js
+++ b/frontend/src/components/fields/ButtonField.js
@@ -6,10 +6,6 @@ const classNames = require('classnames');
 
 class ButtonField extends Component {
 
-    constructor(props) {
-        super(props);
-    }
-
     render() {
         const handler = () => {
             if (typeof this.props.onClick === "function") {
diff --git a/frontend/src/components/fields/ButtonField.scss b/frontend/src/components/fields/ButtonField.scss
index aabe80f..cfd20ff 100644
--- a/frontend/src/components/fields/ButtonField.scss
+++ b/frontend/src/components/fields/ButtonField.scss
@@ -11,7 +11,7 @@
     font-size: 0.8em;
 
     button {
-      padding: 4px 12px;
+      padding: 3px 12px;
     }
   }
 
diff --git a/frontend/src/components/fields/InputField.js b/frontend/src/components/fields/InputField.js
index 6cf967a..b790891 100644
--- a/frontend/src/components/fields/InputField.js
+++ b/frontend/src/components/fields/InputField.js
@@ -20,16 +20,17 @@ class InputField extends Component {
         const inline = this.props.inline || false;
         const name = this.props.name || null;
         const value = this.props.value || "";
+        const defaultValue = this.props.defaultValue || "";
         const type = this.props.type || "text";
         const error = this.props.error || null;
-        const defaultValue = this.props.defaultValue || null;
+
         const handler = (e) => {
-            if (this.props.onChange) {
+            if (typeof this.props.onChange === "function") {
                 if (type === "file") {
                     let file = e.target.files[0];
                     this.props.onChange(file);
                 } else if (e == null) {
-                    this.props.onChange("");
+                    this.props.onChange(defaultValue);
                 } else {
                     this.props.onChange(e.target.value);
                 }
@@ -37,7 +38,7 @@ class InputField extends Component {
         };
         let inputProps = {};
         if (type !== "file") {
-            inputProps["value"] = value || this.props.initialValue;
+            inputProps["value"] = value || defaultValue;
         }
 
         return (
@@ -52,8 +53,8 @@ class InputField extends Component {
                     <div className="field-input">
                         <div className="field-value">
                             { type === "file" && <label for={this.id} className={"file-label"}>
-                                {value.name || defaultValue}</label> }
-                            <input type={type} placeholder={defaultValue} id={this.id}
+                                {value.name || this.props.placeholder}</label> }
+                            <input type={type} placeholder={this.props.placeholder} id={this.id}
                                    aria-describedby={this.id} onChange={handler} {...inputProps} />
                         </div>
                         { type !== "file" && value !== "" &&
diff --git a/frontend/src/components/fields/extensions/NumericField.js b/frontend/src/components/fields/extensions/NumericField.js
index 8823c42..ed81ed7 100644
--- a/frontend/src/components/fields/extensions/NumericField.js
+++ b/frontend/src/components/fields/extensions/NumericField.js
@@ -11,25 +11,31 @@ class NumericField extends Component {
         };
     }
 
-    render() {
-        const handler = (value) => {
-            value = value.replace(/[^\d]/gi, '');
-            let intValue = 0;
-            if (value !== "") {
-                intValue = parseInt(value);
-            }
-            const valid =
-                (!this.props.validate || (typeof this.props.validate === "function" && this.props.validate(intValue))) &&
-                (!this.props.min || (typeof this.props.min === "number" && intValue >= this.props.min)) &&
-                (!this.props.max || (typeof this.props.max === "number" && intValue <= this.props.max));
-            this.setState({invalid: !valid});
-            if (this.props.onChange) {
-                this.props.onChange(intValue);
-            }
-        };
+    componentDidUpdate(prevProps, prevState, snapshot) {
+        if (prevProps.value !== this.props.value) {
+            this.onChange(this.props.value);
+        }
+    }
 
+    onChange = (value) => {
+        value = value.toString().replace(/[^\d]/gi, '');
+        let intValue = 0;
+        if (value !== "") {
+            intValue = parseInt(value);
+        }
+        const valid =
+            (!this.props.validate || (typeof this.props.validate === "function" && this.props.validate(intValue))) &&
+            (!this.props.min || (typeof this.props.min === "number" && intValue >= this.props.min)) &&
+            (!this.props.max || (typeof this.props.max === "number" && intValue <= this.props.max));
+        this.setState({invalid: !valid});
+        if (typeof this.props.onChange === "function") {
+            this.props.onChange(intValue);
+        }
+    };
+
+    render() {
         return (
-            <InputField {...this.props} onChange={handler} initialValue={this.props.initialValue || 0}
+            <InputField {...this.props} onChange={this.onChange} defaultValue={this.props.defaultValue || "0"}
                         invalid={this.state.invalid} />
         );
     }