UNPKG

@navinc/base-react-components

Version:
46 lines 2.32 kB
var __rest = (this && this.__rest) || function (s, e) { var t = {}; for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p]; if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]]; } return t; }; import { jsx as _jsx } from "react/jsx-runtime"; import { useEffect, useRef } from 'react'; import Input from '../input.js'; import { useField } from 'formik'; import { toUsdMoney, toNumber, dollarsToCents, centsToDollars } from '@navinc/utils'; const negativeNumberRegExp = /^(\$ )?0?-0?$/; const { abs, trunc } = Math; const UsdInput = (_a) => { var { name, onBlur, onChange, invalidOnTouched = true, allowNegatives = false } = _a, props = __rest(_a, ["name", "onBlur", "onChange", "invalidOnTouched", "allowNegatives"]); const isNegativeRef = useRef(false); const [field, meta, { setValue }] = useField({ name }); const toNumberOrZero = (input) => { const number = toNumber(input) || 0; return trunc(allowNegatives ? number : abs(number)); }; useEffect(() => { // Ensure initial value stored in parent form is a number setValue(toNumberOrZero(field.value)); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); const value = allowNegatives && isNegativeRef.current && field.value === 0 ? '$ -' : toUsdMoney(centsToDollars(field.value)); return (_jsx(Input, Object.assign({ type: "text", name: name, value: value, onChange: (e) => { const { target } = e; const { value } = target; isNegativeRef.current = negativeNumberRegExp.test(value); setValue(dollarsToCents(toNumberOrZero(value))); onChange && onChange(e); }, onBlur: (e) => { isNegativeRef.current = false; field.onBlur(e); onBlur && onBlur(e); }, errors: (!invalidOnTouched || meta.touched) && meta.error, isInvalid: (!invalidOnTouched || meta.touched) && !!meta.error, hasSpaceForErrors: true }, props))); }; export default UsdInput; //# sourceMappingURL=usd-input.js.map