feature : Puschases & Sales / fix : tasks

client/src/components/MoneyInputGroup.js

@@ -1,5 +1,5 @@
-import React, {useState, useMemo, useEffect, useCallback} from 'react';
-import {InputGroup} from '@blueprintjs/core';
+import React, { useState, useMemo, useEffect, useCallback } from 'react';
+import { InputGroup } from '@blueprintjs/core';
 
 const joinIntegerAndDecimal = (integer, decimal, separator) => {
   let output = `${integer}`;
@@ -16,13 +16,13 @@ const hasSeparator = (input, separator) => {
 };
 
 const addThousandSeparator = (integer, separator) => {
-  return integer.replace(/(\d)(?=(?:\d{3})+\b)/gm, `$1${separator}`)
+  return integer.replace(/(\d)(?=(?:\d{3})+\b)/gm, `$1${separator}`);
 };
 
 const toString = (number) => `${number}`;
 
 const onlyNumbers = (input) => {
-  return toString(input).replace(/\D+/g, '') || '0'
+  return toString(input).replace(/\D+/g, '') || '0';
 };
 
 const formatter = (value, options) => {
@@ -31,11 +31,19 @@ const formatter = (value, options) => {
   const parts = toString(input).split(options.decimal);
   const integer = parseInt(onlyNumbers(parts[0]), 10);
   const decimal = parts[1] ? onlyNumbers(parts[1]) : null;
-  const integerThousand = addThousandSeparator(toString(integer), options.thousands);
+  const integerThousand = addThousandSeparator(
+    toString(integer),
+    options.thousands,
+  );
   const separator = hasSeparator(input, options.decimal)
-    ? options.decimal : false;
+    ? options.decimal
+    : false;
 
-  return `${navigate}${options.prefix}${joinIntegerAndDecimal(integerThousand, decimal, separator)}${options.suffix}`;
+  return `${navigate}${options.prefix}${joinIntegerAndDecimal(
+    integerThousand,
+    decimal,
+    separator,
+  )}${options.suffix}`;
 };
 
 const unformatter = (input, options) => {
@@ -44,12 +52,12 @@ const unformatter = (input, options) => {
   const integer = parseInt(onlyNumbers(parts[0]), 10);
   const decimal = parts[1] ? onlyNumbers(parts[1]) : null;
   const separator = hasSeparator(input, options.decimal)
-    ? options.decimal : false;
+    ? options.decimal
+    : false;
 
   return `${navigate}${joinIntegerAndDecimal(integer, decimal, separator)}`;
 };
 
-
 export default function MoneyFieldGroup({
   value,
   prefix = '',
@@ -59,32 +67,43 @@ export default function MoneyFieldGroup({
   precision = 2,
   inputGroupProps,
   onChange,
+  disabled = false,
 }) {
   const [state, setState] = useState(value);
 
-  const options = useMemo(() => ({
-    prefix, suffix, thousands, decimal, precision,
-  }), [
-    prefix, suffix, thousands, decimal, precision,
-  ]);
+  const options = useMemo(
+    () => ({
+      prefix,
+      suffix,
+      thousands,
+      decimal,
+      precision,
+    }),
+    [prefix, suffix, thousands, decimal, precision],
+  );
 
-  const handleChange = useCallback((event) => {
-    const formatted = formatter(event.target.value, options);
-    const value = unformatter(event.target.value, options);
+  const handleChange = useCallback(
+    (event) => {
+      const formatted = formatter(event.target.value, options);
+      const value = unformatter(event.target.value, options);
 
-    setState(formatted);
-    onChange && onChange(event, value);
-  }, [onChange, options]);
+      setState(formatted);
+      onChange && onChange(event, value);
+    },
+    [onChange, options],
+  );
 
   useEffect(() => {
     const formatted = formatter(value, options);
-    setState(formatted)
+    setState(formatted);
   }, [value, options, setState]);
 
   return (
-   <InputGroup
+    <InputGroup
       value={state}
       onChange={handleChange}
-      {...inputGroupProps} />
+      {...inputGroupProps}
+      disabled={disabled}
+    />
   );
-}
+}