feat: NumberField renders as text if readonly is true

bcgov · Apr 13, 2020 · 83d5e7b · 83d5e7b
1 parent 57eb105
commit 83d5e7b
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 10 deletions.
diff --git a/app/containers/Forms/EmissionGasFields.tsx b/app/containers/Forms/EmissionGasFields.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
-import {FieldProps, IdSchema} from 'react-jsonschema-form';
+import {FieldProps} from 'react-jsonschema-form';
 import {Form, Col} from 'react-bootstrap';
 import {JSONSchema6} from 'json-schema';
-import NumberFormat from 'react-number-format';
 import ErrorList from 'components/Forms/ErrorList';
 
 const EmissionGasFields: React.FunctionComponent<FieldProps> = ({
@@ -19,7 +18,10 @@ const EmissionGasFields: React.FunctionComponent<FieldProps> = ({
   uiSchema
 }) => {
   const {
-    properties: {annualEmission: annualEmissionSchema}
+    properties: {
+      annualEmission: annualEmissionSchema,
+      annualCO2e: annualCO2eSchema
+    }
   } = schema as {properties: Record<string, JSONSchema6>};
 
   const {
@@ -89,11 +91,37 @@ const EmissionGasFields: React.FunctionComponent<FieldProps> = ({
           </ul>
         </Col>
         <Col md={3} style={{textAlign: 'center'}}>
-          <NumberFormat
-            thousandSeparator
-            displayType="text"
-            value={formData.annualCO2e}
-          />
+          <FieldTemplate
+            hidden={false}
+            id="emissions.annualCO2e"
+            classNames="form-group field field-number"
+            label={null}
+            schema={annualEmissionSchema}
+            uiSchema={uiSchema}
+            formContext={formContext}
+            errors={
+              <ErrorList errors={errorSchema?.annualCO2e?.__errors as any} />
+            }
+          >
+            <registry.fields.NumberField
+              required
+              readonly
+              schema={annualCO2eSchema}
+              uiSchema={uiSchema}
+              formData={formData.annualCO2e}
+              autofocus={autofocus}
+              idSchema={idSchema.annualCO2e}
+              registry={registry}
+              errorSchema={errorSchema?.annualCO2e}
+              formContext={formContext}
+              disabled={disabled}
+              name="annualCO2e"
+              onBlur={null}
+              onChange={() => {
+                throw new Error('Annual CO2e should not be edited directly');
+              }}
+            />
+          </FieldTemplate>
         </Col>
       </Form.Row>
       <style jsx>{`

diff --git a/app/containers/Forms/NumberField.tsx b/app/containers/Forms/NumberField.tsx
@@ -56,6 +56,19 @@ const NumberField: React.FunctionComponent<FieldProps> = ({
     schema.minimum < 0 ||
     schema.exclusiveMinimum < 0;
 
+  if (readonly) {
+    return (
+      <NumberFormat
+        thousandSeparator={!uiSchema?.['ui:no-seperator']}
+        id={idSchema.$id}
+        disabled={disabled}
+        decimalScale={4}
+        value={formData}
+        displayType="text"
+      />
+    );
+  }
+
   return (
     <NumberFormat
       thousandSeparator={!uiSchema?.['ui:no-seperator']}
@@ -64,6 +77,7 @@ const NumberField: React.FunctionComponent<FieldProps> = ({
       className="form-control"
       allowNegative={allowNegative}
       decimalScale={4}
+      defaultValue={(schema as any).defaultValue}
       value={formData}
       onValueChange={({floatValue}) => onChange(floatValue)}
     />

diff --git a/schema/data/prod/form_json/emission.json b/schema/data/prod/form_json/emission.json
@@ -38,7 +38,8 @@
           "annualEmission": {
             "title": "Tonnes (CO2)",
             "type": "number",
-            "defaultValue": 0
+            "defaultValue": 0,
+            "minimum": 0
           },
           "gwp": {
             "title": "GWP",
@@ -52,7 +53,8 @@
           "gasDescription": {
             "type": "string"
           }
-        }
+        },
+        "required": ["gasType", "annualEmission", "gwp", "annualCO2e"]
       }
     }
   },