@navinc/base-react-components/dist/form-elements/zip-code-input.js

Nav's Pattern Library

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 { useMemo, useEffect, useCallback } from 'react';
import { Input } from '../input.js';
import { useField } from 'formik';
import { styled } from 'styled-components';
import { inputPattern } from '@navinc/utils';
const createZipCodeValidator = ({ isRequired = false, label = 'Zip', requiredErrorMessage = '', minLengthErrorMessage = 'We need your 5-digit zip code', nineDigitLengthErrorMessage = 'We need your 5-digit or 9-digit zip code', } = {}) => (zip) => {
    if (isRequired && !zip) {
        return requiredErrorMessage ? [requiredErrorMessage] : [`${label} is required`];
    }
    if (zip && zip.length < 5) {
        return [minLengthErrorMessage];
    }
    if (zip && zip.length > 5 && zip.length < 10) {
        return [nineDigitLengthErrorMessage];
    }
};
const UnstyledZipCodeInput = (_a) => {
    var { name, label, onBlur, onChange, invalidOnTouched = true, isRequired, requiredErrorMessage, minLengthErrorMessage, nineDigitLengthErrorMessage, restrictToFiveDigits } = _a, props = __rest(_a, ["name", "label", "onBlur", "onChange", "invalidOnTouched", "isRequired", "requiredErrorMessage", "minLengthErrorMessage", "nineDigitLengthErrorMessage", "restrictToFiveDigits"]);
    const memoizedValidateZipCode = useMemo(() => createZipCodeValidator({
        isRequired,
        label,
        requiredErrorMessage,
        minLengthErrorMessage,
        nineDigitLengthErrorMessage,
    }), [isRequired, label, requiredErrorMessage, minLengthErrorMessage, nineDigitLengthErrorMessage]);
    const [field, meta, { setValue }] = useField({ name, validate: memoizedValidateZipCode });
    const pattern = restrictToFiveDigits ? '99999' : '99999-9999';
    const convertToPattern = useCallback((value) => inputPattern(value !== null && value !== void 0 ? value : '', pattern), [pattern]);
    useEffect(() => {
        const converted = convertToPattern(field.value);
        if (converted !== field.value) {
            // Ensure initial value stored in parent form is formatted correctly
            setValue(converted);
        }
    }, [convertToPattern, field.value, setValue]);
    return (_jsx(Input, Object.assign({ type: "text", inputMode: "numeric", name: name, label: label, value: convertToPattern(field.value), onChange: (e) => {
            setValue(convertToPattern(e.target));
            if (onChange) {
                onChange(e);
            }
        }, onBlur: (e) => {
            field.onBlur(e);
            if (onBlur) {
                onBlur(e);
            }
        }, errors: !invalidOnTouched || meta.touched ? meta.error : undefined, isInvalid: (!invalidOnTouched || meta.touched) && !!meta.error, hasSpaceForErrors: true }, props)));
};
/**
 * @deprecated This component is deprecated and will be removed in a future release. Avoid using it in new code.
 */
export const ZipCodeInput = styled(UnstyledZipCodeInput).withConfig({ displayName: "brc-sc-ZipCodeInput", componentId: "brc-sc-10nvs2v" }) ``;
//# sourceMappingURL=zip-code-input.js.map