@navinc/base-react-components
Version:
Nav's Pattern Library
111 lines (109 loc) • 6.65 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, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo } from 'react';
import { styled } from 'styled-components';
import { AddressInput } from './address-input.js';
import { Input } from '../input.js';
import { StateSelect } from './state-select.js';
import { ZipCodeInput } from './zip-code-input.js';
import { Copy } from '../copy.js';
import { useField, useFormikContext } from 'formik';
import { Fieldset, HiddenLegend, Legend } from './shared.js';
const isRequiredValidator = (label, isRequired) => (value) => {
if (isRequired && !value) {
return [`${label} is required`];
}
};
const StyledFieldset = styled(Fieldset).withConfig({ displayName: "brc-sc-StyledFieldset", componentId: "brc-sc-toemuy" }) `
display: grid;
grid-column-gap: 16px;
grid-template-columns: 1fr 1fr;
`;
const InputField = ({ label, name, isRequired = false, disabled = false, placeholder, mergedInputOptions, className, isPrivate, hasSpaceForErrors = true, }) => {
const validator = useMemo(() => isRequiredValidator(label, isRequired), [label, isRequired]);
const { setFieldValue } = useFormikContext();
const [field, meta] = useField({ name, validate: validator });
const { onBlur, onChange, value } = field;
if (mergedInputOptions) {
return (_jsx(AddressInput, { hasSpaceForErrors: hasSpaceForErrors, 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 (_jsx(Input, { hasSpaceForErrors: hasSpaceForErrors, 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 = styled(InputField).withConfig({ displayName: "brc-sc-StyledInput", componentId: "brc-sc-c1xkml" }) `
grid-column: 1 / 3;
`;
const StyledState = styled(StateSelect).withConfig({ displayName: "brc-sc-StyledState", componentId: "brc-sc-16p7kbu" }) `
grid-column: 1 / 3;
@media (${({ theme }) => theme.forLargerThanPhone}) {
grid-column: 1;
}
`;
const StyledZip = styled(ZipCodeInput).withConfig({ displayName: "brc-sc-StyledZip", componentId: "brc-sc-11vpzar" }) `
grid-column: 1 / 3;
@media (${({ theme }) => theme.forLargerThanPhone}) {
grid-column: 2;
}
`;
export const 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 = true, 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({}, defaultInputOptions), addressInputs);
const LegendComponent = hideLegend ? HiddenLegend : Legend;
return (_jsxs(StyledFieldset, Object.assign({ "data-testid": "address-autocomplete", className: className }, rest, { children: [_jsx(LegendComponent, { children: _jsx(Copy, { children: groupLabel }) }), _jsx(StyledInput, { label: mergedInputOptions.street1.label, name: mergedInputOptions.street1.name, placeholder: mergedInputOptions.street1.placeholder, mergedInputOptions: mergedInputOptions, isRequired: true, isPrivate: isPrivate }), _jsx(StyledInput, { label: mergedInputOptions.street2.label, name: mergedInputOptions.street2.name, placeholder: mergedInputOptions.street2.placeholder, isPrivate: isPrivate }), _jsx(StyledInput, { label: mergedInputOptions.city.label, name: mergedInputOptions.city.name, placeholder: mergedInputOptions.city.placeholder, isRequired: true, isPrivate: isPrivate }), _jsx(StyledState, { label: mergedInputOptions.state.label, withTerritories: withTerritories, format: stateFormat, name: mergedInputOptions.state.name, placeholder: mergedInputOptions.state.placeholder, isPrivate: isPrivate, isRequired: true }), _jsx(StyledZip, { label: mergedInputOptions.zip.label, name: mergedInputOptions.zip.name, placeholder: mergedInputOptions.zip.placeholder, isPrivate: isPrivate, isRequired: true }), withCountry && (_jsx(StyledInput, { disabled: true, label: mergedInputOptions.country.label, name: mergedInputOptions.country.name, placeholder: mergedInputOptions.country.placeholder, hasSpaceForErrors: false }))] })));
};
/**
* This takes the `AddressInput` and spreads it out to an expanded address form with individual inputs for "city", "state", "zip", etc.
*
* Some inputs have default validation that you will need to override if you do not want it.
*
* @deprecated This component is deprecated and will be removed in a future release. Avoid using it in new code.
*/
export const AddressAutocomplete = styled(_AddressAutocomplete).withConfig({ displayName: "brc-sc-AddressAutocomplete", componentId: "brc-sc-dzq7qp" }) ``;
//# sourceMappingURL=address-autocomplete.js.map