glide-design-system
Version:
Glide design system is an open-source React component library. It offers numerous benefits that make them essential tools for design and development teams.
367 lines (352 loc) • 11.5 kB
JavaScript
import React, { useState, useRef, useEffect } from "react";
import classes from "./Address.module.css";
const Address = ({
onChange,
address,
style,
width,
height,
labels,
placeHolders,
containerStyle,
label,
required,
disabled,
...props
}) => {
const line1Ref = useRef();
const line2Ref = useRef();
const cityRef = useRef();
const stateRef = useRef();
const postelRef = useRef();
const [isLine1Focused, setIsLine1Focused] = useState(false);
const [isLine2Focused, setIsLine2Focused] = useState(false);
const [cityFocused, setIsCityFocused] = useState(false);
const [postelFocused, setIsPostelFocused] = useState(false);
const [stateFocused, setIsStateFocused] = useState(false);
const [fullAddress, setFullAddress] = useState(address ? address : "");
const [line1, setLine1] = useState(
address?.addressLine1 ? address?.addressLine1 : ""
);
const [line2, setLine2] = useState(
address?.addressLine2 ? address?.addressLine2 : ""
);
const [city, setCity] = useState(address?.city ? address?.city : "");
const [postalCode, setPostalCode] = useState(
address?.postalCode ? address?.postalCode : ""
);
const [state, setState] = useState(address?.state ? address?.state : "");
const handleFocusLine1 = () => {
setIsLine1Focused(true);
};
const handleFocusLine2 = () => {
setIsLine2Focused(true);
};
const handleFocusCity = () => {
setIsCityFocused(true);
};
const handleFocusPostal = () => {
setIsPostelFocused(true);
};
const handleFocusState = () => {
setIsStateFocused(true);
};
const handleKeyPress = (event) => {
if ((event.which < 48 || event.which > 57) && event.which !== 8) {
event.preventDefault();
}
};
const handleLine1Change = (e) => {
setLine1(e.target.value);
getAllValues(e?.target?.value, line2, city, postalCode, state);
};
const handleLine2Change = (e) => {
setLine2(e.target.value);
getAllValues(line1, e?.target?.value, city, postalCode, state);
};
const handleCityChange = (e) => {
setCity(e.target.value);
getAllValues(line1, line2, e?.target?.value, postalCode, state);
};
const handleLPostalCodeChange = (e) => {
setPostalCode(e.target.value);
getAllValues(line1, line2, city, e?.target?.value, state);
};
const handleStateChange = (e) => {
setState(e.target.value);
getAllValues(line1, line2, city, postalCode, e?.target?.value);
};
const getAllValues = (
addressline1,
addressline2,
city,
state,
postalCode
) => {
const data = {
addressline1: addressline1 ? addressline1 : "",
addressline2: addressline2 ? addressline2 : "",
city: city ? city : "",
postalCode: postalCode ? postalCode : "",
state: state ? state : "",
};
const fullAddress = data;
if (
data?.addressline1 === "" &&
data?.addressline2 === "" &&
data?.city === "" &&
data?.postalCode === "" &&
data?.state === "" &&
address === null
) {
onChange(null);
} else {
onChange(data);
}
};
const combinedStyle = {
width: width ? width : "350px",
height: height ? height : "40px",
backgroundColor: disabled ? "#f5f5f5" : "",
...style,
};
const containerStyles = {
...containerStyle,
};
useEffect(() => {
const handleClickOutside = (event) => {
if (line1Ref.current && !line1Ref.current.contains(event.target)) {
setIsLine1Focused(false);
}
if (line2Ref.current && !line2Ref.current.contains(event.target)) {
setIsLine2Focused(false);
}
if (cityRef.current && !cityRef.current.contains(event.target)) {
setIsCityFocused(false);
}
if (postelRef.current && !postelRef.current.contains(event.target)) {
setIsPostelFocused(false);
}
if (stateRef.current && !stateRef.current.contains(event.target)) {
setIsStateFocused(false);
}
};
document.addEventListener("mousedown", handleClickOutside);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, []);
useEffect(() => {
if (address) {
setLine1(fullAddress?.addressLine1);
setLine2(fullAddress?.addressLine2);
setCity(fullAddress?.city);
setState(fullAddress?.state);
setPostalCode(fullAddress?.postalCode);
getAllValues(
fullAddress?.addressLine1 ? fullAddress?.addressLine1 : "",
fullAddress?.addressLine2 ? fullAddress?.addressLine2 : "",
fullAddress?.city ? fullAddress?.city : "",
fullAddress?.state ? fullAddress?.state : "",
fullAddress?.postalCode ? fullAddress?.postalCode : ""
);
} else if (address === null) {
getAllValues(null);
}
}, [fullAddress]);
return (
<div>
<p className={classes.headers2}>
{label ? label : "Address"}
{required && <span className={classes.required}>*</span>}
</p>
<div className={classes.parentContainer}>
<div style={containerStyles} className={classes.fledContainer}>
<div
ref={line1Ref}
style={{
width: width
? width
: combinedStyle?.width
? combinedStyle?.width
: "350px",
}}>
<p className={classes.headers}>
{labels?.addressLine1 ? labels?.addressLine1 : "Address Line1"}
</p>
<div
style={combinedStyle}
onFocus={handleFocusLine1}
className={`${classes.inputFieldContainer} ${
isLine1Focused && classes.focused
}`}>
<input
disabled={disabled}
style={{ backgroundColor: disabled ? "#f5f5f5" : "" }}
className={classes.inputField}
placeholder={
placeHolders?.addressLine1Placeholder
? placeHolders?.addressLine1Placeholder
: ""
}
onFocus={(e) => (e.target.style.border = "none")}
onBlur={(e) => (e.target.style.borderBottom = "none")}
type="text"
onChange={handleLine1Change}
value={line1}
{...props}
/>
</div>
</div>
<div
ref={line2Ref}
style={{
width: width
? width
: combinedStyle?.width
? combinedStyle?.width
: "350px",
}}>
<p className={classes.headers}>
{labels?.addressLine2 ? labels?.addressLine2 : "Address Line2"}
</p>
<div
style={combinedStyle}
onFocus={handleFocusLine2}
className={`${classes.inputFieldContainer} ${
isLine2Focused && classes.focused
}`}>
<input
disabled={disabled}
style={{ backgroundColor: disabled ? "#f5f5f5" : "" }}
className={classes.inputField}
placeholder={
placeHolders?.addressLine2Placeholder
? placeHolders?.addressLine2Placeholder
: ""
}
onFocus={(e) => (e.target.style.border = "none")}
onBlur={(e) => (e.target.style.borderBottom = "none")}
type="text"
onChange={handleLine2Change}
value={line2}
{...props}
/>
</div>
</div>
</div>
<div style={containerStyles} className={classes.fledContainer}>
<div
ref={cityRef}
style={{
width: width
? width
: combinedStyle?.width
? combinedStyle?.width
: "350px",
}}>
<p className={classes.headers}>
{labels?.city ? labels?.city : "City"}
</p>
<div
style={combinedStyle}
onFocus={handleFocusCity}
className={`${classes.inputFieldContainer} ${
cityFocused && classes.focused
}`}>
<input
style={{ backgroundColor: disabled ? "#f5f5f5" : "" }}
className={classes.inputField}
placeholder={
placeHolders?.cityPlaceholder
? placeHolders.cityPlaceholder
: ""
}
disabled={disabled}
onFocus={(e) => (e.target.style.border = "none")}
onBlur={(e) => (e.target.style.borderBottom = "none")}
type="text"
onChange={handleCityChange}
value={city}
/>
</div>
</div>
<div
ref={stateRef}
style={{
width: width
? width
: combinedStyle?.width
? combinedStyle?.width
: "350px",
}}>
<p className={classes.headers}>
{labels?.state ? labels?.state : "State"}
</p>
<div
style={combinedStyle}
onFocus={handleFocusState}
className={`${classes.inputFieldContainer} ${
stateFocused && classes.focused
}`}>
<input
style={{ backgroundColor: disabled ? "#f5f5f5" : "" }}
className={classes.inputField}
placeholder={
placeHolders?.statePlaceholder
? placeHolders.statePlaceholder
: ""
}
disabled={disabled}
onFocus={(e) => (e.target.style.border = "none")}
onBlur={(e) => (e.target.style.borderBottom = "none")}
type="text"
onChange={handleStateChange}
value={state}
{...props}
/>
</div>
</div>
</div>
<div
ref={postelRef}
style={{
width: width
? width
: combinedStyle?.width
? combinedStyle?.width
: "350px",
}}>
<p className={classes.headers}>
{labels?.postalCode ? labels?.postalCode : "Postal Code"}
</p>
<div
style={combinedStyle}
onFocus={handleFocusPostal}
className={`${classes.inputFieldContainer} ${
postelFocused && classes.focused
}`}>
<input
style={{ backgroundColor: disabled ? "#f5f5f5" : "" }}
className={classes.inputField}
placeholder={
placeHolders?.postalCodePlaceholder
? placeHolders?.postalCodePlaceholder
: ""
}
disabled={disabled}
onKeyDown={handleKeyPress}
onFocus={(e) => (e.target.style.border = "none")}
onBlur={(e) => (e.target.style.borderBottom = "none")}
type="text"
onChange={handleLPostalCodeChange}
value={postalCode}
{...props}
/>
</div>
</div>
</div>
</div>
);
};
export default Address;