File size: 2,678 Bytes
d4fe36e | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 | import React from 'react';
import {
ModalContent,
ModalFooter,
ModalHeader,
ModalBody,
ModalOverlay,
} from './style';
import { useForm } from '../../hooks/useForm';
import MaskedInput from 'react-text-mask';
import createNumberMask from 'text-mask-addons/dist/createNumberMask';
import { handleTransaction } from '../../utils/api';
import { replaceCommaWithDot } from '../../utils/informationFormatters';
const defaultMaskOptions = {
prefix: 'R$',
suffix: '',
includeThousandsSeparator: true,
thousandsSeparatorSymbol: '.',
allowDecimal: true,
decimalSymbol: ',',
decimalLimit: 2,
integerLimit: 7,
allowNegative: false,
allowLeadingZeroes: false,
};
const CurrencyInput = ({ maskOptions, ...inputProps }) => {
const currencyMask = createNumberMask({
...defaultMaskOptions,
...maskOptions,
});
return <MaskedInput mask={currencyMask} {...inputProps} />;
};
CurrencyInput.defaultProps = {
inputMode: 'numeric',
maskOptions: {},
};
function Modal(props) {
const [form, handleFormChange, resetForm] = useForm({
amount: undefined,
category: null,
});
if (!props.show) {
return null;
}
const handleTransactionFormSubmit = async (event) => {
event.preventDefault();
const formattedAmount = replaceCommaWithDot(form.amount).replace('R$', '');
const transaction = {
amount: +formattedAmount,
category: form.category,
user_id: props.userId,
};
await handleTransaction(transaction);
window.location.reload(false);
};
return (
<ModalOverlay onClick={props.onClose}>
<ModalContent onClick={(e) => e.stopPropagation()}>
<ModalHeader>
<h3>Realizar transação</h3>
</ModalHeader>
<ModalBody>
<form onSubmit={handleTransactionFormSubmit}>
<label>Valor da transação: </label>
<CurrencyInput
onChange={handleFormChange}
value={form.amount}
required
name="amount"
/>
<label htmlFor="category">Tipo de transação</label>
<select name="category" onChange={handleFormChange} required>
<option value={null}></option>
<option value="withdrawl">Retirada</option>
<option value="payment">Pagamento</option>
<option value="deposit">Depósito</option>
</select>
<button type="submit">Salvar transação</button>
</form>
</ModalBody>
<ModalFooter>
<button onClick={props.onClose}>Fechar</button>
</ModalFooter>
</ModalContent>
</ModalOverlay>
);
}
export default Modal;
|