Screen responsive changes
This commit is contained in:
vipeeshpavithran
parent
303225458d
commit
81fb560898
@ -1,389 +1,535 @@
|
|||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import { Button, FormControl, FormControlLabel, FormLabel, Grid, Paper, Radio, RadioGroup, TextField } from '@mui/material';
|
import {
|
||||||
|
Button,
|
||||||
|
FormControl,
|
||||||
|
FormControlLabel,
|
||||||
|
FormLabel,
|
||||||
|
Grid,
|
||||||
|
Paper,
|
||||||
|
Radio,
|
||||||
|
RadioGroup,
|
||||||
|
TextField,
|
||||||
|
} from '@mui/material';
|
||||||
import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers';
|
import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers';
|
||||||
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
|
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
|
||||||
import { useEffect } from 'react';
|
import { useEffect } from 'react';
|
||||||
|
|
||||||
interface Patient {
|
interface Patient {
|
||||||
fullName: string;
|
fullName: string;
|
||||||
homePhone: string;
|
homePhone: string;
|
||||||
cellPhone: string;
|
cellPhone: string;
|
||||||
email: string;
|
email: string;
|
||||||
age: number | string;
|
age: number | string;
|
||||||
dateOfBirth: string;
|
dateOfBirth: string;
|
||||||
socialSecurityNumber: string;
|
socialSecurityNumber: string;
|
||||||
mailingAddress: string;
|
mailingAddress: string;
|
||||||
city: string;
|
city: string;
|
||||||
state: string;
|
state: string;
|
||||||
zipCode: string;
|
zipCode: string;
|
||||||
gender: string;
|
gender: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
handleFormSection1Data:(
|
handleFormSection1Data: (
|
||||||
fullName?: string|undefined,
|
fullName?: string | undefined,
|
||||||
homePhone?: string|undefined,
|
homePhone?: string | undefined,
|
||||||
cellPhone?: string|undefined,
|
cellPhone?: string | undefined,
|
||||||
email?: string|undefined,
|
email?: string | undefined,
|
||||||
age?: number|undefined|string,
|
age?: number | undefined | string,
|
||||||
dateOfBirth?: string|undefined,
|
dateOfBirth?: string | undefined,
|
||||||
socialSecurityNumber?: string|undefined,
|
socialSecurityNumber?: string | undefined,
|
||||||
mailingAddress?: string|undefined,
|
mailingAddress?: string | undefined,
|
||||||
city?: string|undefined,
|
city?: string | undefined,
|
||||||
state?: string|undefined,
|
state?: string | undefined,
|
||||||
zipCode?: string|undefined,
|
zipCode?: string | undefined,
|
||||||
gender?: string|undefined,
|
gender?: string | undefined
|
||||||
)=> void
|
) => void;
|
||||||
patientDataDiplay:any;
|
patientDataDiplay: any;
|
||||||
type:string;
|
type: string;
|
||||||
}
|
};
|
||||||
|
|
||||||
|
export default function PersonalSection({
|
||||||
export default function PersonalSection({handleFormSection1Data,patientDataDiplay,type}:Props){
|
handleFormSection1Data,
|
||||||
|
patientDataDiplay,
|
||||||
const [birthDateValue, setBirthDateValue] = React.useState<any>();
|
type,
|
||||||
const [patient, setPatient] = React.useState<any>({
|
}: Props) {
|
||||||
fullName: "",
|
const [birthDateValue, setBirthDateValue] = React.useState<any>();
|
||||||
fullNameError:false,
|
const [patient, setPatient] = React.useState<any>({
|
||||||
homePhone: "",
|
fullName: '',
|
||||||
cellPhone: "",
|
fullNameError: false,
|
||||||
cellPhoneError: false,
|
homePhone: '',
|
||||||
email: "",
|
cellPhone: '',
|
||||||
emailError: false,
|
cellPhoneError: false,
|
||||||
age: "",
|
email: '',
|
||||||
ageError: false,
|
emailError: false,
|
||||||
dateOfBirth: birthDateValue,
|
age: '',
|
||||||
socialSecurityNumber: "",
|
ageError: false,
|
||||||
mailingAddress:"",
|
dateOfBirth: birthDateValue,
|
||||||
mailingAddressFalse:false,
|
socialSecurityNumber: '',
|
||||||
city: "",
|
mailingAddress: '',
|
||||||
state: "",
|
mailingAddressFalse: false,
|
||||||
zipCode: "",
|
city: '',
|
||||||
gender: "male",
|
state: '',
|
||||||
});
|
zipCode: '',
|
||||||
|
gender: 'male',
|
||||||
|
});
|
||||||
useEffect(()=>{
|
|
||||||
handleFormSection1Data(
|
useEffect(() => {
|
||||||
patient.fullName,
|
handleFormSection1Data(
|
||||||
patient.homePhone,
|
patient.fullName,
|
||||||
patient.cellPhone,
|
patient.homePhone,
|
||||||
patient.email,
|
patient.cellPhone,
|
||||||
patient.age,
|
patient.email,
|
||||||
birthDateValue,
|
patient.age,
|
||||||
patient.socialSecurityNumber,
|
birthDateValue,
|
||||||
patient.mailingAddress,
|
patient.socialSecurityNumber,
|
||||||
patient.city,
|
patient.mailingAddress,
|
||||||
patient.state,
|
patient.city,
|
||||||
patient.zipCode,
|
patient.state,
|
||||||
patient.gender,
|
patient.zipCode,
|
||||||
)
|
patient.gender
|
||||||
},[patient])
|
);
|
||||||
|
}, [patient]);
|
||||||
|
|
||||||
|
return (
|
||||||
return(
|
<>
|
||||||
<>
|
<Grid container direction='row' className='section1-test-class'>
|
||||||
<Grid container direction="row" className='section1-test-class'>
|
<Grid
|
||||||
<Grid item xs={4} className='collapsable-form-style '>
|
item
|
||||||
<TextField
|
xs={2}
|
||||||
variant="outlined"
|
xl={3}
|
||||||
label="Patient's Full Name"
|
lg={4}
|
||||||
name="fullName"
|
md={6}
|
||||||
placeholder='Please enter your name'
|
sm={12}
|
||||||
value={type=='display'?patientDataDiplay.fullName:patient.fullName}
|
className='collapsable-form-style '
|
||||||
disabled={type=='display'}
|
>
|
||||||
onChange={(e)=>{
|
<TextField
|
||||||
setPatient((prevValues:any) => ({
|
variant='outlined'
|
||||||
...prevValues,
|
label="Patient's Full Name"
|
||||||
fullName: e.target.value,
|
name='fullName'
|
||||||
}));
|
placeholder='Please enter your name'
|
||||||
}}
|
value={
|
||||||
onBlur={(e) => {
|
type == 'display' ? patientDataDiplay.fullName : patient.fullName
|
||||||
if (e.target.value === "") {
|
}
|
||||||
setPatient((prevValues:any) => ({
|
disabled={type == 'display'}
|
||||||
...prevValues,
|
onChange={(e) => {
|
||||||
fullNameError: true,
|
setPatient((prevValues: any) => ({
|
||||||
}));
|
...prevValues,
|
||||||
} else {
|
fullName: e.target.value,
|
||||||
setPatient((prevValues:any) => ({
|
}));
|
||||||
...prevValues,
|
}}
|
||||||
fullNameError: false,
|
onBlur={(e) => {
|
||||||
}));
|
if (e.target.value === '') {
|
||||||
}
|
setPatient((prevValues: any) => ({
|
||||||
}}
|
...prevValues,
|
||||||
required
|
fullNameError: true,
|
||||||
error={patient.fullNameError}
|
}));
|
||||||
helperText={patient.fullNameError ? "Please enter your name" : ""}
|
} else {
|
||||||
/>
|
setPatient((prevValues: any) => ({
|
||||||
</Grid>
|
...prevValues,
|
||||||
|
fullNameError: false,
|
||||||
|
}));
|
||||||
<Grid item xs={4} className='collapsable-form-style'>
|
}
|
||||||
<TextField
|
}}
|
||||||
required
|
required
|
||||||
variant="outlined"
|
error={patient.fullNameError}
|
||||||
label="Phone Number"
|
helperText={patient.fullNameError ? 'Please enter your name' : ''}
|
||||||
name="cellPhone"
|
/>
|
||||||
type="number"
|
</Grid>
|
||||||
placeholder='Please enter your cell Phone number'
|
|
||||||
value={type=='display'?patientDataDiplay.cellPhone:patient.cellPhone}
|
<Grid
|
||||||
disabled={type=='display'}
|
item
|
||||||
onChange={(e)=>{
|
xs={2}
|
||||||
setPatient((prevValues:any) => ({
|
xl={3}
|
||||||
...prevValues,
|
lg={4}
|
||||||
cellPhone: e.target.value,
|
md={6}
|
||||||
}));
|
sm={12}
|
||||||
}}
|
className='collapsable-form-style'
|
||||||
onBlur={(e) => {
|
>
|
||||||
if (!(/^\d{10}$/.test(e.target.value))) {
|
<TextField
|
||||||
setPatient((prevValues:any) => ({
|
required
|
||||||
...prevValues,
|
variant='outlined'
|
||||||
cellPhoneError: true,
|
label='Phone Number'
|
||||||
}));
|
name='cellPhone'
|
||||||
} else {
|
type='number'
|
||||||
setPatient((prevValues:any) => ({
|
placeholder='Please enter your cell Phone number'
|
||||||
...prevValues,
|
value={
|
||||||
cellPhoneError: false,
|
type == 'display'
|
||||||
}));
|
? patientDataDiplay.cellPhone
|
||||||
}
|
: patient.cellPhone
|
||||||
}}
|
}
|
||||||
error={patient.cellPhoneError}
|
disabled={type == 'display'}
|
||||||
helperText={patient.cellPhoneError? "Please enter a valid 10-digit phone number" : ""}
|
onChange={(e) => {
|
||||||
/>
|
setPatient((prevValues: any) => ({
|
||||||
</Grid>
|
...prevValues,
|
||||||
|
cellPhone: e.target.value,
|
||||||
<Grid item xs={4} className='collapsable-form-style'>
|
}));
|
||||||
<TextField
|
}}
|
||||||
variant="outlined"
|
onBlur={(e) => {
|
||||||
label="Home Phone Number"
|
if (!/^\d{10}$/.test(e.target.value)) {
|
||||||
name="homePhone"
|
setPatient((prevValues: any) => ({
|
||||||
type='number'
|
...prevValues,
|
||||||
placeholder='Please enter your home phone'
|
cellPhoneError: true,
|
||||||
value={type=='display'?patientDataDiplay.homePhone:patient.homePhone}
|
}));
|
||||||
disabled={type=='display'}
|
} else {
|
||||||
onChange={(e)=>{
|
setPatient((prevValues: any) => ({
|
||||||
setPatient((prevValues:any) => ({
|
...prevValues,
|
||||||
...prevValues,
|
cellPhoneError: false,
|
||||||
homePhone: e.target.value,
|
}));
|
||||||
}));
|
}
|
||||||
}}
|
}}
|
||||||
// error={!(/^\d{10}$/.test(patient.homePhone))}
|
error={patient.cellPhoneError}
|
||||||
// helperText={!(/^\d{10}$/.test(patient.homePhone)) ? "Please enter a valid 10-digit phone number" : ""}
|
helperText={
|
||||||
/>
|
patient.cellPhoneError
|
||||||
</Grid>
|
? 'Please enter a valid 10-digit phone number'
|
||||||
|
: ''
|
||||||
<Grid item xs={4} className='collapsable-form-style'>
|
}
|
||||||
<TextField
|
/>
|
||||||
required
|
</Grid>
|
||||||
variant="outlined"
|
|
||||||
label="Email"
|
<Grid
|
||||||
name="email"
|
item
|
||||||
placeholder='Please enter your email'
|
xs={2}
|
||||||
value={type=='display'?patientDataDiplay.email:patient.email}
|
xl={3}
|
||||||
disabled={type=='display'}
|
lg={4}
|
||||||
onChange={(e)=>{
|
md={6}
|
||||||
setPatient((prevValues:any) => ({
|
sm={12}
|
||||||
...prevValues,
|
className='collapsable-form-style'
|
||||||
email: e.target.value,
|
>
|
||||||
}));
|
<TextField
|
||||||
}}
|
variant='outlined'
|
||||||
onBlur={(e) => {
|
label='Home Phone Number'
|
||||||
if (!(/^\S+@\S+\.\S+$/.test(e.target.value))) {
|
name='homePhone'
|
||||||
setPatient((prevValues:any) => ({
|
type='number'
|
||||||
...prevValues,
|
placeholder='Please enter your home phone'
|
||||||
emailError: true,
|
value={
|
||||||
}));
|
type == 'display'
|
||||||
} else {
|
? patientDataDiplay.homePhone
|
||||||
setPatient((prevValues:any) => ({
|
: patient.homePhone
|
||||||
...prevValues,
|
}
|
||||||
emailError: false,
|
disabled={type == 'display'}
|
||||||
}));
|
onChange={(e) => {
|
||||||
}
|
setPatient((prevValues: any) => ({
|
||||||
}}
|
...prevValues,
|
||||||
error={patient.emailError}
|
homePhone: e.target.value,
|
||||||
helperText={patient.emailError? "Please enter a valid email address" : ""}
|
}));
|
||||||
/>
|
}}
|
||||||
</Grid>
|
// error={!(/^\d{10}$/.test(patient.homePhone))}
|
||||||
<Grid item xs={4} className='collapsable-form-style'>
|
// helperText={!(/^\d{10}$/.test(patient.homePhone)) ? "Please enter a valid 10-digit phone number" : ""}
|
||||||
<TextField
|
/>
|
||||||
required
|
</Grid>
|
||||||
variant="outlined"
|
|
||||||
label="Age"
|
<Grid
|
||||||
name="age"
|
item
|
||||||
type="number"
|
xs={2}
|
||||||
placeholder='Please enter your age'
|
xl={3}
|
||||||
value={type=='display'?patientDataDiplay.age:patient.age}
|
lg={4}
|
||||||
disabled={type=='display'}
|
md={6}
|
||||||
onChange={(e)=>{
|
sm={12}
|
||||||
setPatient((prevValues:any) => ({
|
className='collapsable-form-style'
|
||||||
...prevValues,
|
>
|
||||||
age: e.target.value,
|
<TextField
|
||||||
}));
|
required
|
||||||
}}
|
variant='outlined'
|
||||||
onBlur={(e) => {
|
label='Email'
|
||||||
if (e.target.value === "") {
|
name='email'
|
||||||
setPatient((prevValues:any) => ({
|
placeholder='Please enter your email'
|
||||||
...prevValues,
|
value={type == 'display' ? patientDataDiplay.email : patient.email}
|
||||||
ageError: true,
|
disabled={type == 'display'}
|
||||||
}));
|
onChange={(e) => {
|
||||||
} else {
|
setPatient((prevValues: any) => ({
|
||||||
setPatient((prevValues:any) => ({
|
...prevValues,
|
||||||
...prevValues,
|
email: e.target.value,
|
||||||
ageError: false,
|
}));
|
||||||
}));
|
}}
|
||||||
}
|
onBlur={(e) => {
|
||||||
}}
|
if (!/^\S+@\S+\.\S+$/.test(e.target.value)) {
|
||||||
error={patient.ageError}
|
setPatient((prevValues: any) => ({
|
||||||
helperText={patient.ageError ? "Please enter your age" : ""}
|
...prevValues,
|
||||||
|
emailError: true,
|
||||||
/>
|
}));
|
||||||
</Grid>
|
} else {
|
||||||
|
setPatient((prevValues: any) => ({
|
||||||
<Grid item xs={4} className='collapsable-form-style'>
|
...prevValues,
|
||||||
<FormControl >
|
emailError: false,
|
||||||
<LocalizationProvider dateAdapter={AdapterDayjs}>
|
}));
|
||||||
<DatePicker
|
}
|
||||||
label="Date of Birth"
|
}}
|
||||||
value={type=='display'?patientDataDiplay.dateOfBirth:birthDateValue}
|
error={patient.emailError}
|
||||||
disabled={type=='display'}
|
helperText={
|
||||||
onChange={(newValue) => {
|
patient.emailError ? 'Please enter a valid email address' : ''
|
||||||
setBirthDateValue(newValue);
|
}
|
||||||
}}
|
/>
|
||||||
renderInput={(params) => <TextField variant="outlined" {...params} />}
|
</Grid>
|
||||||
/>
|
<Grid
|
||||||
</LocalizationProvider>
|
item
|
||||||
</FormControl>
|
xs={2}
|
||||||
|
xl={3}
|
||||||
</Grid>
|
lg={4}
|
||||||
|
md={6}
|
||||||
<Grid item xs={4} className='collapsable-form-style'>
|
sm={12}
|
||||||
<TextField
|
className='collapsable-form-style'
|
||||||
variant="outlined"
|
>
|
||||||
label="Social Security Number"
|
<TextField
|
||||||
name="socialSecurityNumber"
|
required
|
||||||
value={type=='display'?patientDataDiplay.socialSecurityNumber:patient.socialSecurityNumber}
|
variant='outlined'
|
||||||
disabled={type=='display'}
|
label='Age'
|
||||||
onChange={(e)=>{
|
name='age'
|
||||||
setPatient((prevValues:any) => ({
|
type='number'
|
||||||
...prevValues,
|
placeholder='Please enter your age'
|
||||||
socialSecurityNumber: e.target.value,
|
value={type == 'display' ? patientDataDiplay.age : patient.age}
|
||||||
}));
|
disabled={type == 'display'}
|
||||||
}}
|
onChange={(e) => {
|
||||||
// onBlur={formik.handleBlur}
|
setPatient((prevValues: any) => ({
|
||||||
// error={formik.touched.socialSecurityNumber && Boolean(formik.errors.socialSecurityNumber)}
|
...prevValues,
|
||||||
// helperText={formik.touched.socialSecurityNumber && formik.errors.socialSecurityNumber}
|
age: e.target.value,
|
||||||
/>
|
}));
|
||||||
</Grid>
|
}}
|
||||||
|
onBlur={(e) => {
|
||||||
<Grid item xs={4} className='collapsable-form-style'>
|
if (e.target.value === '') {
|
||||||
<TextField
|
setPatient((prevValues: any) => ({
|
||||||
required
|
...prevValues,
|
||||||
variant="outlined"
|
ageError: true,
|
||||||
label="Mailing Address"
|
}));
|
||||||
name="mailingAddress"
|
} else {
|
||||||
value={type=='display'?patientDataDiplay.mailingAddress:patient.mailingAddress}
|
setPatient((prevValues: any) => ({
|
||||||
disabled={type=='display'}
|
...prevValues,
|
||||||
onChange={(e)=>{
|
ageError: false,
|
||||||
setPatient((prevValues:any) => ({
|
}));
|
||||||
...prevValues,
|
}
|
||||||
mailingAddress: e.target.value,
|
}}
|
||||||
}));
|
error={patient.ageError}
|
||||||
}}
|
helperText={patient.ageError ? 'Please enter your age' : ''}
|
||||||
onBlur={(e) => {
|
/>
|
||||||
if (e.target.value === "") {
|
</Grid>
|
||||||
setPatient((prevValues:any) => ({
|
|
||||||
...prevValues,
|
<Grid
|
||||||
mailingAddressError: true,
|
item
|
||||||
}));
|
xs={2}
|
||||||
} else {
|
xl={3}
|
||||||
setPatient((prevValues:any) => ({
|
lg={4}
|
||||||
...prevValues,
|
md={6}
|
||||||
mailingAddressError: false,
|
sm={12}
|
||||||
}));
|
className='collapsable-form-style'
|
||||||
}
|
>
|
||||||
}}
|
<FormControl>
|
||||||
error={patient.mailingAddressError}
|
<LocalizationProvider dateAdapter={AdapterDayjs}>
|
||||||
helperText={patient.mailingAddressError? "Please enter your mailing address" : ""}
|
<DatePicker
|
||||||
/>
|
label='Date of Birth'
|
||||||
</Grid>
|
value={
|
||||||
|
type == 'display'
|
||||||
<Grid item xs={4} className='collapsable-form-style'>
|
? patientDataDiplay.dateOfBirth
|
||||||
<TextField
|
: birthDateValue
|
||||||
variant="outlined"
|
}
|
||||||
label="State"
|
disabled={type == 'display'}
|
||||||
name="state"
|
onChange={(newValue) => {
|
||||||
value={type=='display'?patientDataDiplay.state:patient.state}
|
setBirthDateValue(newValue);
|
||||||
disabled={type=='display'}
|
}}
|
||||||
onChange={(e)=>{
|
renderInput={(params) => (
|
||||||
setPatient((prevValues:any) => ({
|
<TextField variant='outlined' {...params} />
|
||||||
...prevValues,
|
)}
|
||||||
state: e.target.value,
|
/>
|
||||||
}));
|
</LocalizationProvider>
|
||||||
}}
|
</FormControl>
|
||||||
/>
|
</Grid>
|
||||||
</Grid>
|
|
||||||
|
<Grid
|
||||||
<Grid item xs={4} className='collapsable-form-style'>
|
item
|
||||||
<TextField
|
xs={2}
|
||||||
variant="outlined"
|
xl={3}
|
||||||
label="City"
|
lg={4}
|
||||||
name="city"
|
md={6}
|
||||||
value={type=='display'?patientDataDiplay.city:patient.city}
|
sm={12}
|
||||||
disabled={type=='display'}
|
className='collapsable-form-style'
|
||||||
onChange={(e)=>{
|
>
|
||||||
setPatient((prevValues:any) => ({
|
<TextField
|
||||||
...prevValues,
|
variant='outlined'
|
||||||
city: e.target.value,
|
label='Social Security Number'
|
||||||
}));
|
name='socialSecurityNumber'
|
||||||
}}
|
value={
|
||||||
/>
|
type == 'display'
|
||||||
</Grid>
|
? patientDataDiplay.socialSecurityNumber
|
||||||
|
: patient.socialSecurityNumber
|
||||||
<Grid item xs={4} className='collapsable-form-style'>
|
}
|
||||||
<TextField
|
disabled={type == 'display'}
|
||||||
variant="outlined"
|
onChange={(e) => {
|
||||||
label="Zip Code"
|
setPatient((prevValues: any) => ({
|
||||||
name="zipCode"
|
...prevValues,
|
||||||
value={type=='display'?patientDataDiplay.zipCode:patient.zipCode}
|
socialSecurityNumber: e.target.value,
|
||||||
disabled={type=='display'}
|
}));
|
||||||
onChange={(e)=>{
|
}}
|
||||||
setPatient((prevValues:any) => ({
|
// onBlur={formik.handleBlur}
|
||||||
...prevValues,
|
// error={formik.touched.socialSecurityNumber && Boolean(formik.errors.socialSecurityNumber)}
|
||||||
zipCode: e.target.value,
|
// helperText={formik.touched.socialSecurityNumber && formik.errors.socialSecurityNumber}
|
||||||
}));
|
/>
|
||||||
}}
|
</Grid>
|
||||||
// onBlur={formik.handleBlur}
|
|
||||||
// error={formik.touched.zipCode && Boolean(formik.errors.zipCode)}
|
<Grid
|
||||||
// helperText={formik.touched.zipCode && formik.errors.zipCode}
|
item
|
||||||
/>
|
xs={2}
|
||||||
</Grid>
|
xl={3}
|
||||||
|
lg={4}
|
||||||
<Grid item xs={4} className='collapsable-form-style-radioButtons'>
|
md={6}
|
||||||
<FormControl >
|
sm={12}
|
||||||
<FormLabel>Gender</FormLabel>
|
className='collapsable-form-style'
|
||||||
<RadioGroup
|
>
|
||||||
aria-labelledby="demo-radio-buttons-group-label"
|
<TextField
|
||||||
defaultValue={type=='display'?patientDataDiplay.gender:patient.gender}
|
required
|
||||||
name="radio-buttons-group"
|
variant='outlined'
|
||||||
onChange={(e)=>{
|
label='Mailing Address'
|
||||||
setPatient((prevValues:any) => ({
|
name='mailingAddress'
|
||||||
...prevValues,
|
value={
|
||||||
gender: e.target.value,
|
type == 'display'
|
||||||
}));
|
? patientDataDiplay.mailingAddress
|
||||||
}}
|
: patient.mailingAddress
|
||||||
sx={{display:'flex', flexDirection:'row'}}
|
}
|
||||||
>
|
disabled={type == 'display'}
|
||||||
<FormControlLabel
|
onChange={(e) => {
|
||||||
disabled={type=='display'}
|
setPatient((prevValues: any) => ({
|
||||||
value="male" control={<Radio />} label="Male" />
|
...prevValues,
|
||||||
<FormControlLabel
|
mailingAddress: e.target.value,
|
||||||
disabled={type=='display'}
|
}));
|
||||||
value="female" control={<Radio />} label="Female" />
|
}}
|
||||||
</RadioGroup>
|
onBlur={(e) => {
|
||||||
</FormControl>
|
if (e.target.value === '') {
|
||||||
</Grid>
|
setPatient((prevValues: any) => ({
|
||||||
</Grid>
|
...prevValues,
|
||||||
</>
|
mailingAddressError: true,
|
||||||
)
|
}));
|
||||||
|
} else {
|
||||||
|
setPatient((prevValues: any) => ({
|
||||||
|
...prevValues,
|
||||||
|
mailingAddressError: false,
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
error={patient.mailingAddressError}
|
||||||
|
helperText={
|
||||||
|
patient.mailingAddressError
|
||||||
|
? 'Please enter your mailing address'
|
||||||
|
: ''
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
<Grid
|
||||||
|
item
|
||||||
|
xs={2}
|
||||||
|
xl={3}
|
||||||
|
lg={4}
|
||||||
|
md={6}
|
||||||
|
sm={12}
|
||||||
|
className='collapsable-form-style'
|
||||||
|
>
|
||||||
|
<TextField
|
||||||
|
variant='outlined'
|
||||||
|
label='State'
|
||||||
|
name='state'
|
||||||
|
value={type == 'display' ? patientDataDiplay.state : patient.state}
|
||||||
|
disabled={type == 'display'}
|
||||||
|
onChange={(e) => {
|
||||||
|
setPatient((prevValues: any) => ({
|
||||||
|
...prevValues,
|
||||||
|
state: e.target.value,
|
||||||
|
}));
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
<Grid
|
||||||
|
item
|
||||||
|
xs={2}
|
||||||
|
xl={3}
|
||||||
|
lg={4}
|
||||||
|
md={6}
|
||||||
|
sm={12}
|
||||||
|
className='collapsable-form-style'
|
||||||
|
>
|
||||||
|
<TextField
|
||||||
|
variant='outlined'
|
||||||
|
label='City'
|
||||||
|
name='city'
|
||||||
|
value={type == 'display' ? patientDataDiplay.city : patient.city}
|
||||||
|
disabled={type == 'display'}
|
||||||
|
onChange={(e) => {
|
||||||
|
setPatient((prevValues: any) => ({
|
||||||
|
...prevValues,
|
||||||
|
city: e.target.value,
|
||||||
|
}));
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
<Grid
|
||||||
|
item
|
||||||
|
xs={2}
|
||||||
|
xl={3}
|
||||||
|
lg={4}
|
||||||
|
md={6}
|
||||||
|
sm={12}
|
||||||
|
className='collapsable-form-style'
|
||||||
|
>
|
||||||
|
<TextField
|
||||||
|
variant='outlined'
|
||||||
|
label='Zip Code'
|
||||||
|
name='zipCode'
|
||||||
|
value={
|
||||||
|
type == 'display' ? patientDataDiplay.zipCode : patient.zipCode
|
||||||
|
}
|
||||||
|
disabled={type == 'display'}
|
||||||
|
onChange={(e) => {
|
||||||
|
setPatient((prevValues: any) => ({
|
||||||
|
...prevValues,
|
||||||
|
zipCode: e.target.value,
|
||||||
|
}));
|
||||||
|
}}
|
||||||
|
// onBlur={formik.handleBlur}
|
||||||
|
// error={formik.touched.zipCode && Boolean(formik.errors.zipCode)}
|
||||||
|
// helperText={formik.touched.zipCode && formik.errors.zipCode}
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
<Grid
|
||||||
|
item
|
||||||
|
xs={2}
|
||||||
|
xl={3}
|
||||||
|
lg={4}
|
||||||
|
md={6}
|
||||||
|
sm={12}
|
||||||
|
className='collapsable-form-style-radioButtons'
|
||||||
|
>
|
||||||
|
<FormControl>
|
||||||
|
<FormLabel>Gender</FormLabel>
|
||||||
|
<RadioGroup
|
||||||
|
aria-labelledby='demo-radio-buttons-group-label'
|
||||||
|
defaultValue={
|
||||||
|
type == 'display' ? patientDataDiplay.gender : patient.gender
|
||||||
|
}
|
||||||
|
name='radio-buttons-group'
|
||||||
|
onChange={(e) => {
|
||||||
|
setPatient((prevValues: any) => ({
|
||||||
|
...prevValues,
|
||||||
|
gender: e.target.value,
|
||||||
|
}));
|
||||||
|
}}
|
||||||
|
sx={{ display: 'flex', flexDirection: 'row' }}
|
||||||
|
>
|
||||||
|
<FormControlLabel
|
||||||
|
disabled={type == 'display'}
|
||||||
|
value='male'
|
||||||
|
control={<Radio />}
|
||||||
|
label='Male'
|
||||||
|
/>
|
||||||
|
<FormControlLabel
|
||||||
|
disabled={type == 'display'}
|
||||||
|
value='female'
|
||||||
|
control={<Radio />}
|
||||||
|
label='Female'
|
||||||
|
/>
|
||||||
|
</RadioGroup>
|
||||||
|
</FormControl>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
</>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user