@navinc/base-react-components/cjs/form-elements/address-autocomplete.js

Nav's Pattern Library

"use strict";
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;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.AddressAutocomplete = exports.defaultInputOptions = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const styled_components_1 = __importDefault(require("styled-components"));
const address_input_1 = require("./address-input");
const input_1 = require("../input");
const state_select_1 = require("./state-select");
const zip_code_input_1 = require("./zip-code-input");
const copy_1 = require("../copy");
const formik_1 = require("formik");
const shared_1 = require("./shared");
const isRequiredValidator = (label, isRequired) => (value) => {
    if (isRequired && !value) {
        return [`${label} is required`];
    }
};
const StyledFieldset = (0, styled_components_1.default)(shared_1.Fieldset).withConfig({ displayName: "brc-sc-StyledFieldset", componentId: "brc-sc-1357yq7" }) `
  display: grid;
  grid-column-gap: 16px;
  grid-template-columns: 1fr 1fr;
`;
const InputField = ({ label, name, isRequired = false, disabled = false, placeholder, mergedInputOptions, className, isPrivate, }) => {
    const validator = (0, react_1.useMemo)(() => isRequiredValidator(label, isRequired), [label, isRequired]);
    const { setFieldValue } = (0, formik_1.useFormikContext)();
    const [field, meta] = (0, formik_1.useField)({ name, validate: validator });
    const { onBlur, onChange, value } = field;
    if (mergedInputOptions) {
        return ((0, jsx_runtime_1.jsx)(address_input_1.AddressInput, { hasSpaceForErrors: true, label: label, name: name, placeholder: placeholder, onBlur: onBlur, onChange: onChange, value: value, onAddressSelected: ({ street1, city, state, zip, country }) => {
                setFieldValue(mergedInputOptions.street1.name, street1);
                setFieldValue(mergedInputOptions.city.name, city);
                setFieldValue(mergedInputOptions.state.name, state);
                setFieldValue(mergedInputOptions.zip.name, zip);
                setFieldValue(mergedInputOptions.country.name, country);
            }, isInvalid: meta.touched && !!meta.error, errors: meta.touched && meta.error ? [meta.error] : undefined, className: className, isPrivate: isPrivate }));
    }
    return ((0, jsx_runtime_1.jsx)(input_1.Input, { hasSpaceForErrors: true, label: label, name: name, placeholder: placeholder, onBlur: onBlur, onChange: onChange, value: value, isInvalid: meta.touched && !!meta.error, errors: meta.touched && meta.error ? [meta.error] : undefined, disabled: disabled, className: className, isPrivate: isPrivate }));
};
const StyledInput = (0, styled_components_1.default)(InputField).withConfig({ displayName: "brc-sc-StyledInput", componentId: "brc-sc-cpj7hv" }) `
  grid-column: 1 / 3;
`;
const StyledState = (0, styled_components_1.default)(state_select_1.StateSelect).withConfig({ displayName: "brc-sc-StyledState", componentId: "brc-sc-l22xj2" }) `
  grid-column: 1 / 3;

  @media (${({ theme }) => theme.forLargerThanPhone}) {
    grid-column: 1;
  }
`;
const StyledZip = (0, styled_components_1.default)(zip_code_input_1.ZipCodeInput).withConfig({ displayName: "brc-sc-StyledZip", componentId: "brc-sc-kpis99" }) `
  grid-column: 1 / 3;

  @media (${({ theme }) => theme.forLargerThanPhone}) {
    grid-column: 2;
  }
`;
exports.defaultInputOptions = {
    street1: {
        name: 'street1',
        label: 'Street',
        placeholder: '',
    },
    street2: {
        name: 'street2',
        label: 'Apartment, Unit, Suite, or Floor # (Optional)',
        placeholder: '',
    },
    city: {
        name: 'city',
        label: 'City',
        placeholder: '',
    },
    state: {
        name: 'state',
        label: 'State',
        placeholder: '',
    },
    zip: {
        name: 'zip',
        label: 'Zip Code',
        placeholder: '',
    },
    country: {
        name: 'country',
        label: 'Country',
        placeholder: '',
    },
};
const _AddressAutocomplete = (_a) => {
    var { groupLabel = 'Address', withTerritories = false, withCountry = false, stateFormat = 'long', className, addressInputs, hideLegend, isPrivate = true } = _a, rest = __rest(_a, ["groupLabel", "withTerritories", "withCountry", "stateFormat", "className", "addressInputs", "hideLegend", "isPrivate"]);
    const mergedInputOptions = Object.assign(Object.assign({}, exports.defaultInputOptions), addressInputs);
    const LegendComponent = hideLegend ? shared_1.HiddenLegend : shared_1.Legend;
    return ((0, jsx_runtime_1.jsxs)(StyledFieldset, Object.assign({ "data-testid": "address-autocomplete", className: className }, rest, { children: [(0, jsx_runtime_1.jsx)(LegendComponent, { children: (0, jsx_runtime_1.jsx)(copy_1.Copy, { bold: true, children: groupLabel }) }), (0, jsx_runtime_1.jsx)(StyledInput, { label: mergedInputOptions.street1.label, name: mergedInputOptions.street1.name, placeholder: mergedInputOptions.street1.placeholder, mergedInputOptions: mergedInputOptions, isRequired: true, isPrivate: isPrivate }), (0, jsx_runtime_1.jsx)(StyledInput, { label: mergedInputOptions.street2.label, name: mergedInputOptions.street2.name, placeholder: mergedInputOptions.street2.placeholder, isPrivate: isPrivate }), (0, jsx_runtime_1.jsx)(StyledInput, { label: mergedInputOptions.city.label, name: mergedInputOptions.city.name, placeholder: mergedInputOptions.city.placeholder, isRequired: true, isPrivate: isPrivate }), withCountry && ((0, jsx_runtime_1.jsx)(StyledInput, { disabled: true, label: mergedInputOptions.country.label, name: mergedInputOptions.country.name, placeholder: mergedInputOptions.country.placeholder })), (0, jsx_runtime_1.jsx)(StyledState, { label: mergedInputOptions.state.label, withTerritories: withTerritories, format: stateFormat, name: mergedInputOptions.state.name, placeholder: mergedInputOptions.state.placeholder, isPrivate: isPrivate, isRequired: true }), (0, jsx_runtime_1.jsx)(StyledZip, { label: mergedInputOptions.zip.label, name: mergedInputOptions.zip.name, placeholder: mergedInputOptions.zip.placeholder, isPrivate: isPrivate, isRequired: true })] })));
};
exports.AddressAutocomplete = (0, styled_components_1.default)(_AddressAutocomplete).withConfig({ displayName: "brc-sc-AddressAutocomplete", componentId: "brc-sc-1hcgpjd" }) ``;
//# sourceMappingURL=address-autocomplete.js.map