Add currency mask

okcodes · Oct 16, 2020 · 5666bd4 · 5666bd4
1 parent 42b716b
commit 5666bd4
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 11 deletions.
diff --git a/package.json b/package.json
@@ -42,9 +42,12 @@
     "@material-ui/lab": "^4.0.0-alpha.56",
     "@material-ui/pickers": "^3.2.10",
     "@material-ui/styles": "^4.10.0",
+    "@types/accounting": "^0.4.1",
     "@types/crypto-js": "^3.1.46",
     "@types/react-router-dom": "^5.1.3",
     "@types/react-swipeable-views": "^0.13.0",
+    "@types/react-text-mask": "^5.4.6",
+    "accounting": "^0.4.1",
     "aws-amplify": "^2.2.2",
     "aws-amplify-react": "^3.1.3",
     "chart.js": "^2.9.3",
@@ -59,6 +62,7 @@
     "react-animate-height": "^2.0.21",
     "react-chartjs-2": "^2.8.0",
     "react-dom": "^16.12.0",
+    "react-number-format": "^4.4.1",
     "react-perfect-scrollbar": "^1.5.3",
     "react-router-dom": "^5.1.2",
     "react-swipeable-views": "^0.13.9",

diff --git a/src/components/common/NumberFormatCusrom.tsx b/src/components/common/NumberFormatCusrom.tsx
@@ -0,0 +1,31 @@
+import NumberFormat from "react-number-format";
+import React from 'react';
+
+interface NumberFormatCustomProps {
+    inputRef: (instance: NumberFormat | null) => void;
+    onChange: (event: { target: { name: string; value: string } }) => void;
+    name: string;
+}
+
+export const NumberFormatCustom = (props: NumberFormatCustomProps) => {
+    const {inputRef, onChange, ...other} = props;
+
+    return (
+        <NumberFormat
+            {...other}
+            getInputRef={inputRef}
+            onValueChange={values => {
+                onChange({
+                    target: {
+                        name: props.name,
+                        value: values.value,
+                    },
+                });
+            }}
+            thousandSeparator
+            isNumericString
+            prefix="$"
+            inputMode="decimal"
+        />
+    );
+}
diff --git a/src/views/FlowOperationList/components/FlowOperationFormDialog.tsx b/src/views/FlowOperationList/components/FlowOperationFormDialog.tsx
@@ -17,8 +17,9 @@ import InputLabel from '@material-ui/core/InputLabel';
 import MenuItem from '@material-ui/core/MenuItem';
 import FormControl from '@material-ui/core/FormControl';
 import Select from '@material-ui/core/Select';
-import {ToggleFlowType} from "../../../components/ToggleFlowType";
 import {Transition} from "../../../components/common/Transition";
+import accounting from 'accounting';
+import {NumberFormatCustom} from '../../../components/common/NumberFormatCusrom';
 
 const useStyles = makeStyles((theme: Theme) =>
     createStyles({
@@ -38,22 +39,29 @@ type Props = {
 
 export const FlowOperationFormDialog = ({open, handleClose, dropDownDataForCashAccounts, model}: Props) => {
 
-    const [dirty, setDirty] = React.useState(model);
+    const [dirty, setDirty] = React.useState(model as Omit<FlowOperationModel, "amount">);
+    const [amount, setAmount] = React.useState(`${model.amount}`);
+
+    const amountAsNumber = () => accounting.unformat(amount, '.');
 
     React.useEffect(() => {
         setDirty(model);
     }, [model]);
 
+    React.useEffect(() => {
+        setAmount(`${model.amount}`);
+    }, [model.amount]);
+
     const onTextFieldChange = (value: string, key: keyof FlowOperationModel) => {
         setDirty({...dirty, [key]: value});
     };
 
-    const onNumericFieldChange = (value: number, key: keyof FlowOperationModel) => {
-        setDirty({...dirty, [key]: value});
+    const onAmountChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setAmount(event.target.value);
     };
 
     const isDirty = () => {
-        if (model.amount !== dirty.amount) return true;
+        if (model.amount !== amountAsNumber()) return true;
         if (model.dateIssued !== dirty.dateIssued) return true;
         if (model.description !== dirty.description) return true;
         if (model.bankNote !== dirty.bankNote) return true;
@@ -68,7 +76,7 @@ export const FlowOperationFormDialog = ({open, handleClose, dropDownDataForCashA
             if (dirty.id) {
                 const input: UpdateFlowOperationInput = {
                     id: dirty.id,
-                    amount: dirty.amount,
+                    amount: amountAsNumber(),
                     dateIssued: moment(dirty.dateIssued).utc().format(),
                     description: dirty.description,
                     bankNote: dirty.bankNote || '-',
@@ -80,7 +88,7 @@ export const FlowOperationFormDialog = ({open, handleClose, dropDownDataForCashA
                 showAlert({message: 'Flow operation updated', severity: 'success'});
             } else {
                 const input: CreateFlowOperationInput = {
-                    amount: dirty.amount,
+                    amount: amountAsNumber(),
                     dateIssued: moment(dirty.dateIssued).utc().format(),
                     description: dirty.description,
                     bankNote: dirty.bankNote || '-',
@@ -99,6 +107,7 @@ export const FlowOperationFormDialog = ({open, handleClose, dropDownDataForCashA
 
     const classes = useStyles();
 
+    console.log('%c Amount', 'background: white; color: black', {amount, 'model.amount': model.amount});
     return (
         <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title"
                 TransitionComponent={Transition}>
@@ -122,10 +131,13 @@ export const FlowOperationFormDialog = ({open, handleClose, dropDownDataForCashA
                     autoFocus
                     margin="dense"
                     label="Amount"
-                    type="number"
+                    type="text"
                     fullWidth
-                    value={dirty.amount}
-                    onChange={e => onNumericFieldChange(+e.target.value, 'amount')}
+                    value={amount}
+                    onChange={onAmountChange}
+                    InputProps={{
+                        inputComponent: NumberFormatCustom as any,
+                    }}
                 />
                 <TextField
                     margin="dense"
@@ -135,7 +147,7 @@ export const FlowOperationFormDialog = ({open, handleClose, dropDownDataForCashA
                     value={dirty.description}
                     onChange={e => onTextFieldChange(e.target.value, 'description')}
                 />
-                <ToggleFlowType amount={dirty.amount} onChange={amount => setDirty({...dirty, amount})}/>
+                {/*<ToggleFlowType amount={amountAsNumber()} onChange={amount => setDirty({...dirty, amount})}/>*/}
                 <TextField
                     margin="dense"
                     label="Note"

diff --git a/yarn.lock b/yarn.lock
@@ -1693,6 +1693,11 @@
   resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-8.1.3.tgz#f1d803da6fafa6c6b89392f3b8da9ae2df1a419d"
   integrity sha512-l8IX2Zs6cLZgwJNmBJaJT2yvstwiNi8kKyO+USrZWJV6DSyUlrWfgWSSic8YLiOHLWUNRLJBOPN43nxTKHXKfg==
 
+"@types/accounting@^0.4.1":
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/@types/accounting/-/accounting-0.4.1.tgz#865d9f5694fd7c438fba34eb4bc82eec6f34cdd5"
+  integrity sha512-qIN2yvRFvTtUtzG3bs7NKnsqHCPwRIIZMvBNWxiyF4LfOBMhwbwmsefqOt1T7KfkvCgOOxWYVqvlnKKZARSHgg==
+
 "@types/babel__core@^7.1.0":
   version "7.1.7"
   resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.7.tgz#1dacad8840364a57c98d0dd4855c6dd3752c6b89"
@@ -1856,6 +1861,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-text-mask@^5.4.6":
+  version "5.4.6"
+  resolved "https://registry.yarnpkg.com/@types/react-text-mask/-/react-text-mask-5.4.6.tgz#3a81e9de472beb939038e78cb16d737ae94ba14a"
+  integrity sha512-0KkER9oXZY/v1x8aoMTHwANlWnKT5tnmV7Zz+g81gBvcHRtcIHotcpY4KgWRwx0T5JMcsYmEh7wGOz0lwdONew==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-transition-group@^4.2.0":
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.0.tgz#882839db465df1320e4753e6e9f70ca7e9b4d46d"
@@ -2144,6 +2156,11 @@ accepts@~1.3.4, accepts@~1.3.5, accepts@~1.3.7:
     mime-types "~2.1.24"
     negotiator "0.6.2"
 
+accounting@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/accounting/-/accounting-0.4.1.tgz#87dd4103eff7f4460f1e186f5c677ed6cf566883"
+  integrity sha1-h91BA+/39EYPHhhvXGd+1s9WaIM=
+
 acorn-globals@^4.1.0, acorn-globals@^4.3.0:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-4.3.4.tgz#9fa1926addc11c97308c4e66d7add0d40c3272e7"
@@ -9371,6 +9388,13 @@ react-is@^16.12.0, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.0, react-i
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-number-format@^4.4.1:
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/react-number-format/-/react-number-format-4.4.1.tgz#d5614dd25edfc21ed48b97356213440081437a94"
+  integrity sha512-ZGFMXZ0U7DcmQ3bSZY3FULOA1mfqreT9NIMYZNoa/ouiSgiTQiYA95Uj2KN8ge6BRr+ghA5vraozqWqsHZQw3Q==
+  dependencies:
+    prop-types "^15.7.2"
+
 react-perfect-scrollbar@^1.5.3:
   version "1.5.8"
   resolved "https://registry.yarnpkg.com/react-perfect-scrollbar/-/react-perfect-scrollbar-1.5.8.tgz#380959387a325c5c9d0268afc08b3f73ed5b3078"