@navinc/base-react-components
Version:
Nav's Pattern Library
63 lines • 3.77 kB
JavaScript
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 { createProxyWithOverrides, toUsdMoney, toUsdMoneyWithCents, dollarsToCents, toNumber, centsToDollars, } from '@navinc/utils';
import { forwardRef, useRef, useState } from 'react';
import { BaseStringInput } from '../base-string-input/base-string-input.js';
export const toUSDCents = (valueAsCents) => valueAsCents;
const invalidCharacterReg = /[^0-9,-.$]/g;
const withCentsReg = /^([$-]*[0-9,]*(\.[0-9]{0,2})?).*$/;
const withoutCentsReg = /^([$-]*[0-9,]*).*$/;
const dollarReg = /\$/g;
export const BaseUSDInput = forwardRef((_a, ref) => {
var { value: incomingValue, onChange, onBlur, withCents } = _a, props = __rest(_a, ["value", "onChange", "onBlur", "withCents"]);
const incomingValueRef = useRef(undefined);
const valueRef = useRef(undefined);
const internalValueRef = useRef(undefined);
const [_, triggerRender] = useState({});
const toUsdMoneyFunction = withCents ? toUsdMoneyWithCents : toUsdMoney;
const moneyGroupReg = withCents ? withCentsReg : withoutCentsReg;
if (incomingValue !== incomingValueRef.current && valueRef.current !== incomingValue) {
valueRef.current = incomingValue;
internalValueRef.current =
incomingValue === undefined ? undefined : toUsdMoneyFunction(centsToDollars(incomingValue));
}
incomingValueRef.current = incomingValue;
return (_jsx(BaseStringInput, Object.assign({ ref: ref, inputMode: "numeric", value: internalValueRef.current, onChange: (e) => {
const outValue = e.target.value.replace(invalidCharacterReg, '');
const updatedEvent = e;
// when no content is in the value, emit value as undefined
if (outValue === '' || outValue === '$') {
internalValueRef.current = outValue;
valueRef.current = undefined;
updatedEvent.target = createProxyWithOverrides(updatedEvent.target, { value: undefined });
triggerRender({}); // to update the input value
onChange === null || onChange === void 0 ? void 0 : onChange(updatedEvent);
return;
}
const onlyMoneyGroupValue = outValue.replace(moneyGroupReg, '$1');
const displayValue = toUsdMoneyFunction(onlyMoneyGroupValue.replace(dollarReg, ''));
internalValueRef.current = onlyMoneyGroupValue;
triggerRender({}); // to update the input value
const numberValue = displayValue === '' ? undefined : dollarsToCents(toNumber(displayValue) || 0);
valueRef.current = numberValue;
updatedEvent.target = createProxyWithOverrides(updatedEvent.target, { value: numberValue });
onChange === null || onChange === void 0 ? void 0 : onChange(updatedEvent);
}, onBlur: (e) => {
// in the case of an incomplete value (like "-"), fix to formatted value on blur
internalValueRef.current =
valueRef.current === undefined ? undefined : toUsdMoneyFunction(centsToDollars(valueRef.current));
triggerRender({}); // to update the input value
onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
} }, props)));
});
//# sourceMappingURL=base-usd-input.js.map