Add Collapsible Sections

This commit is contained in:
abhay-raizada
2024-08-12 13:28:54 +05:30
parent 4de8f3112f
commit 26e9a80275
5 changed files with 1408 additions and 1269 deletions

View File

@@ -27,51 +27,49 @@ export const PatientForm: React.FC<PatientFormProps> = ({
};
return (
<Section title="Patient">
<View>
<View>
<View>
<Text style={TextTheme}>Name</Text>
<TextInput
style={styles.input}
placeholder="Enter Patients Name"
value={form.name}
placeholderTextColor="white"
onChangeText={(text: string) => handleTextChange('name', text)}
/>
</View>
<View>
<Text style={TextTheme}>Date of Birth</Text>
{form.date_of_birth ? (
<View>
<Text style={TextTheme}>{form.date_of_birth}</Text>
<Button
onPress={() => {
setOpenDate(true);
}}
title="Edit"
/>
</View>
) : (
<Text style={TextTheme}>Name</Text>
<TextInput
style={styles.input}
placeholder="Enter Patients Name"
value={form.name}
placeholderTextColor="white"
onChangeText={(text: string) => handleTextChange('name', text)}
/>
</View>
<View>
<Text style={TextTheme}>Date of Birth</Text>
{form.date_of_birth ? (
<View>
<Text style={TextTheme}>{form.date_of_birth}</Text>
<Button
onPress={() => {
setOpenDate(true);
}}
title="Pick a date"
title="Edit"
/>
)}
<DatePicker
modal
mode={'date'}
open={openDate}
date={new Date(form.date_of_birth || '01-01-1999')}
onCancel={() => setOpenDate(false)}
onConfirm={(date: Date) => {
handleTextChange('date_of_birth', date.toDateString());
setOpenDate(false);
</View>
) : (
<Button
onPress={() => {
setOpenDate(true);
}}
title="Pick a date"
/>
</View>
)}
<DatePicker
modal
mode={'date'}
open={openDate}
date={new Date(form.date_of_birth || '01-01-1999')}
onCancel={() => setOpenDate(false)}
onConfirm={(date: Date) => {
handleTextChange('date_of_birth', date.toDateString());
setOpenDate(false);
}}
/>
</View>
</Section>
</View>
);
};

View File

@@ -196,6 +196,7 @@ export const PrescriptionCreator = () => {
<View
style={{
backgroundColor: Colors.black,
minHeight: Dimensions.get('window').height,
}}>
<Image
style={{
@@ -234,19 +235,17 @@ export const PrescriptionCreator = () => {
<Section title="Prescription">
<View style={{display: 'flex', flexDirection: 'column', width: '100%'}}>
<PatientForm nestedFormCallback={nestedFormCallback} />
<AddressForm nestedFormCallback={nestedFormCallback} />
<MedicineForm nestedFormCallback={nestedFormCallback} />
<Section title="Patient" collapsible={true}>
{' '}
<PatientForm nestedFormCallback={nestedFormCallback} />
</Section>
<Section title="Address" collapsible={true}>
<AddressForm nestedFormCallback={nestedFormCallback} />
</Section>
<Section title="Medicine" collapsible={true}>
<MedicineForm nestedFormCallback={nestedFormCallback} />
</Section>
<Button onPress={handleButtonPress} title="Create Rx" />
{/* <Text
style={[
{
color: Colors.light,
},
]}>
{' '}
</Text>
</Button> */}
</View>
</Section>
<ImportNsec