added number field component

services/web/src/components/form-fields/Currency.js

@@ -1,31 +1,23 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Form, Label } from 'semantic';
+import { Label } from 'semantic';
 
 import { getCurrencySymbol } from 'utils/currency';
 
-export default class CurrencyField extends React.Component {
-  onChange = (evt, { name, value }) => {
-    value = parseInt(value);
-    this.props.onChange(evt, { name, value });
-  };
+import NumberField from './Number';
 
+export default class CurrencyField extends React.Component {
   render() {
-    let { value, cents, currency, onChange, ...rest } = this.props;
+    let { value, cents, currency, ...rest } = this.props;
     if (cents) {
       value /= 100;
     }
     return (
-      <Form.Input
-        type="number"
-        value={value}
-        labelPosition="right"
-        onChange={this.onChange}
-        {...rest}>
+      <NumberField value={value} labelPosition="right" {...rest}>
         <Label basic>{getCurrencySymbol(currency)}</Label>
         <input />
         {currency === 'USD' && <Label>.00</Label>}
-      </Form.Input>
+      </NumberField>
     );
   }
 }

services/web/src/components/form-fields/Number.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Form } from 'semantic';
+
+export default class NumberField extends React.Component {
+  onChange = (evt, { value, ...rest }) => {
+    value = parseInt(value);
+    if (isNaN(value)) {
+      value = null;
+    }
+    this.props.onChange(evt, { ...rest, value });
+  };
+
+  render() {
+    return (
+      <Form.Input {...this.props} type="number" onChange={this.onChange} />
+    );
+  }
+}

services/web/src/utils/currency.js

@@ -6,6 +6,9 @@ const SYMBOLS = {
 };
 
 export function formatUsd(val) {
+  if (!val) {
+    return '';
+  }
   return formatCurrency(val, 'USD');
 }