updated code with dsc and device binding
This commit is contained in:
Abin Toppo
@@ -1,5 +1,5 @@
|
||||
import React, { useState } from 'react'
|
||||
import { Modal, View, Text, StyleSheet, TextInput, TouchableOpacity, ScrollView } from 'react-native'
|
||||
import React, { useState, useMemo } from 'react'
|
||||
import { Modal, View, StyleSheet, TextInput, TouchableOpacity, ScrollView, Platform } from 'react-native'
|
||||
import { Formik } from 'formik'
|
||||
import * as Yup from 'yup'
|
||||
import { pick } from '@react-native-documents/picker'
|
||||
@@ -7,16 +7,20 @@ import { useSelector } from 'react-redux'
|
||||
import { apiCall } from '../../../Axios/Axios'
|
||||
import { TECHNICAL_DOCUMENT_SUBMIT, TECHNICAL_VALUE_SUBMIT } from '../../../Services/ApiCall/ApiUrls'
|
||||
import { Props } from '../Type/BidType'
|
||||
import colors from '../../../Constant/Color'
|
||||
import { Loader } from '../../../Component/Index'
|
||||
import { useNavigation } from '@react-navigation/native'
|
||||
import NavigationString from '../../../Constant/NavigationString'
|
||||
import { useTheme } from '../../../Hooks/useTheme'
|
||||
import AppText from '../../../components/AppText'
|
||||
import { Upload, FileText, X } from 'lucide-react-native'
|
||||
|
||||
const TemplateFormModal: React.FC<Props> = ({ visible, template, setAllBoolean }) => {
|
||||
if (!template) return null
|
||||
|
||||
const SelectedAuction = useSelector((state: any) => state.auction.auction)
|
||||
const Navigation: any = useNavigation()
|
||||
const { colors, spacing, typography } = useTheme()
|
||||
const styles = useMemo(() => makeStyles(colors, spacing, typography), [colors, spacing, typography])
|
||||
const [loading, setLoading] = useState(false)
|
||||
const initialValues = template?.labels?.reduce((acc: any, label: any) => {
|
||||
acc[label.labelName] = ''
|
||||
@@ -65,10 +69,10 @@ const TemplateFormModal: React.FC<Props> = ({ visible, template, setAllBoolean }
|
||||
if (label.labelType === '3') {
|
||||
return (
|
||||
<View key={label.labelName} style={styles.field}>
|
||||
<Text style={styles.label}>
|
||||
<AppText variant="caption" color={colors.textSecondary} style={styles.label as any}>
|
||||
{label.labelName}
|
||||
{label.mandatory && <Text style={styles.required}> *</Text>}
|
||||
</Text>
|
||||
{label.mandatory && <AppText variant="caption" color={colors.error}> *</AppText>}
|
||||
</AppText>
|
||||
|
||||
<TouchableOpacity
|
||||
style={[
|
||||
@@ -79,18 +83,25 @@ const TemplateFormModal: React.FC<Props> = ({ visible, template, setAllBoolean }
|
||||
pickFile(label.labelName, setFieldValue)
|
||||
}
|
||||
>
|
||||
<Text
|
||||
style={[
|
||||
styles.fileText,
|
||||
value?.name && styles.fileSelected,
|
||||
]}
|
||||
>
|
||||
{value?.name || 'Upload PDF'}
|
||||
</Text>
|
||||
{value?.name ? (
|
||||
<View style={styles.fileSelectedRow}>
|
||||
<FileText size={14} color={colors.success} strokeWidth={2} />
|
||||
<AppText variant="caption" color={colors.text} bold style={{ flex: 1 } as any} numberOfLines={1}>
|
||||
{value.name}
|
||||
</AppText>
|
||||
</View>
|
||||
) : (
|
||||
<View style={styles.fileSelectedRow}>
|
||||
<Upload size={14} color={colors.textSecondary} strokeWidth={2} />
|
||||
<AppText variant="caption" color={colors.textSecondary}>
|
||||
Upload PDF
|
||||
</AppText>
|
||||
</View>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
|
||||
{showError && (
|
||||
<Text style={styles.errorText}>{error}</Text>
|
||||
<AppText variant="caption" color={colors.error} style={styles.errorText as any}>{error}</AppText>
|
||||
)}
|
||||
</View>
|
||||
)
|
||||
@@ -98,10 +109,10 @@ const TemplateFormModal: React.FC<Props> = ({ visible, template, setAllBoolean }
|
||||
|
||||
return (
|
||||
<View key={label.labelName} style={styles.field}>
|
||||
<Text style={styles.label}>
|
||||
<AppText variant="caption" color={colors.textSecondary} style={styles.label as any}>
|
||||
{label.labelName}
|
||||
{label.mandatory && <Text style={styles.required}> *</Text>}
|
||||
</Text>
|
||||
{label.mandatory && <AppText variant="caption" color={colors.error}> *</AppText>}
|
||||
</AppText>
|
||||
|
||||
<TextInput
|
||||
style={[
|
||||
@@ -109,7 +120,7 @@ const TemplateFormModal: React.FC<Props> = ({ visible, template, setAllBoolean }
|
||||
showError && styles.errorBorder,
|
||||
]}
|
||||
placeholder={`Enter ${label.labelName}`}
|
||||
placeholderTextColor="#9CA3AF"
|
||||
placeholderTextColor={colors.textSecondary}
|
||||
value={value}
|
||||
onChangeText={(text) =>
|
||||
setFieldValue(label.labelName, text)
|
||||
@@ -122,7 +133,7 @@ const TemplateFormModal: React.FC<Props> = ({ visible, template, setAllBoolean }
|
||||
/>
|
||||
|
||||
{showError && (
|
||||
<Text style={styles.errorText}>{error}</Text>
|
||||
<AppText variant="caption" color={colors.error} style={styles.errorText as any}>{error}</AppText>
|
||||
)}
|
||||
</View>
|
||||
)
|
||||
@@ -210,26 +221,26 @@ const TemplateFormModal: React.FC<Props> = ({ visible, template, setAllBoolean }
|
||||
|
||||
<View style={styles.header}>
|
||||
<View style={styles.headerLeft}>
|
||||
<Text style={styles.headerTitle}>Technical Documents</Text>
|
||||
<Text style={styles.headerSubtitle}>
|
||||
<AppText variant="h4" color={colors.text}>Technical Documents</AppText>
|
||||
<AppText variant="caption" color={colors.textSecondary}>
|
||||
Fill the form, Click save when you're done.
|
||||
</Text>
|
||||
</AppText>
|
||||
</View>
|
||||
|
||||
<TouchableOpacity onPress={onClose} style={styles.closeBtn}>
|
||||
<Text style={styles.closeText}>✕</Text>
|
||||
<X size={20} color={colors.textSecondary} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<ScrollView contentContainerStyle={styles.content}>
|
||||
|
||||
<View style={styles.card}>
|
||||
<Text style={styles.templateHeading}>Template</Text>
|
||||
<AppText variant="h3" color={colors.text} centered style={{ marginBottom: 16 } as any}>Template</AppText>
|
||||
|
||||
<View style={styles.templateBox}>
|
||||
<Text style={styles.templateName}>
|
||||
<AppText variant="bodySmall" color={colors.text} bold style={{ marginBottom: 12 } as any}>
|
||||
{template.templateName}
|
||||
</Text>
|
||||
</AppText>
|
||||
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
@@ -264,12 +275,12 @@ const TemplateFormModal: React.FC<Props> = ({ visible, template, setAllBoolean }
|
||||
{loading ? (
|
||||
<Loader
|
||||
size="small"
|
||||
color={colors.white}
|
||||
color="#fff"
|
||||
/>
|
||||
) : (
|
||||
<Text style={styles.submitText}>
|
||||
<AppText variant="button" color="#fff" bold style={styles.submitText as any}>
|
||||
Submit
|
||||
</Text>
|
||||
</AppText>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
@@ -287,129 +298,98 @@ const TemplateFormModal: React.FC<Props> = ({ visible, template, setAllBoolean }
|
||||
|
||||
export default TemplateFormModal
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
screen: {
|
||||
flex: 1,
|
||||
backgroundColor: '#F9FAFB',
|
||||
},
|
||||
header: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 14,
|
||||
backgroundColor: '#FFFFFF',
|
||||
borderBottomWidth: 1,
|
||||
borderColor: '#E5E7EB',
|
||||
},
|
||||
headerLeft: {
|
||||
flex: 1,
|
||||
},
|
||||
headerTitle: {
|
||||
fontSize: 16,
|
||||
fontWeight: '700',
|
||||
color: '#111827',
|
||||
},
|
||||
headerSubtitle: {
|
||||
fontSize: 12,
|
||||
color: '#6B7280',
|
||||
marginTop: 2,
|
||||
},
|
||||
closeBtn: {
|
||||
padding: 6,
|
||||
},
|
||||
closeText: {
|
||||
fontSize: 18,
|
||||
color: '#6B7280',
|
||||
},
|
||||
content: {
|
||||
paddingHorizontal: 16,
|
||||
},
|
||||
card: {
|
||||
backgroundColor: '#FFFFFF',
|
||||
borderColor: '#E5E7EB',
|
||||
paddingVertical: 20
|
||||
},
|
||||
templateHeading: {
|
||||
fontSize: 18,
|
||||
fontWeight: '700',
|
||||
textAlign: 'center',
|
||||
marginBottom: 16,
|
||||
color: '#111827',
|
||||
},
|
||||
|
||||
templateBox: {
|
||||
borderWidth: 1,
|
||||
borderColor: '#E5E7EB',
|
||||
borderRadius: 10,
|
||||
padding: 16,
|
||||
},
|
||||
templateName: {
|
||||
fontSize: 14,
|
||||
fontWeight: '700',
|
||||
color: '#111827',
|
||||
marginBottom: 12,
|
||||
},
|
||||
field: {
|
||||
marginBottom: 14,
|
||||
},
|
||||
label: {
|
||||
fontSize: 13,
|
||||
fontWeight: '600',
|
||||
color: '#374151',
|
||||
marginBottom: 6,
|
||||
},
|
||||
required: {
|
||||
color: '#EF4444',
|
||||
},
|
||||
input: {
|
||||
backgroundColor: '#FFFFFF',
|
||||
borderWidth: 1,
|
||||
borderColor: '#E5E7EB',
|
||||
borderRadius: 8,
|
||||
padding: 12,
|
||||
fontSize: 14,
|
||||
color: '#111827',
|
||||
},
|
||||
filePicker: {
|
||||
borderWidth: 1,
|
||||
borderColor: '#E5E7EB',
|
||||
borderRadius: 8,
|
||||
padding: 12,
|
||||
},
|
||||
fileText: {
|
||||
color: '#6B7280',
|
||||
fontSize: 14,
|
||||
},
|
||||
fileSelected: {
|
||||
color: '#111827',
|
||||
fontWeight: '600',
|
||||
},
|
||||
errorText: {
|
||||
color: '#EF4444',
|
||||
fontSize: 12,
|
||||
marginTop: 4,
|
||||
},
|
||||
errorBorder: {
|
||||
borderColor: '#EF4444',
|
||||
},
|
||||
submitRow: {
|
||||
marginTop: 20,
|
||||
alignItems: 'flex-end',
|
||||
height: 50
|
||||
},
|
||||
submitBtn: {
|
||||
backgroundColor: colors.primary,
|
||||
paddingVertical: 10,
|
||||
paddingHorizontal: 22,
|
||||
borderRadius: 8,
|
||||
minWidth: 120,
|
||||
alignItems: 'center',
|
||||
},
|
||||
submitText: {
|
||||
color: '#FFFFFF',
|
||||
fontWeight: '700',
|
||||
fontSize: 14,
|
||||
},
|
||||
})
|
||||
|
||||
const makeStyles = (colors: any, spacing: any, typography: any) =>
|
||||
StyleSheet.create({
|
||||
screen: {
|
||||
flex: 1,
|
||||
backgroundColor: colors.background,
|
||||
},
|
||||
header: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 14,
|
||||
backgroundColor: colors.surface,
|
||||
borderBottomWidth: 1,
|
||||
borderColor: colors.border,
|
||||
},
|
||||
headerLeft: {
|
||||
flex: 1,
|
||||
},
|
||||
closeBtn: {
|
||||
padding: 8,
|
||||
backgroundColor: colors.overlay,
|
||||
borderRadius: 10,
|
||||
},
|
||||
content: {
|
||||
paddingHorizontal: 16,
|
||||
},
|
||||
card: {
|
||||
backgroundColor: colors.surface,
|
||||
borderRadius: 18,
|
||||
marginTop: spacing.m,
|
||||
padding: spacing.m,
|
||||
...Platform.select({
|
||||
ios: { shadowColor: '#000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.06, shadowRadius: 12 },
|
||||
android: { elevation: 3 },
|
||||
}),
|
||||
},
|
||||
templateBox: {
|
||||
borderWidth: 1,
|
||||
borderColor: colors.border,
|
||||
borderRadius: 14,
|
||||
padding: 16,
|
||||
},
|
||||
field: {
|
||||
marginBottom: 14,
|
||||
},
|
||||
label: {
|
||||
letterSpacing: 0.5,
|
||||
textTransform: 'uppercase',
|
||||
marginBottom: 6,
|
||||
} as any,
|
||||
input: {
|
||||
backgroundColor: colors.background,
|
||||
borderWidth: 1.2,
|
||||
borderColor: colors.border,
|
||||
borderRadius: 12,
|
||||
padding: 12,
|
||||
fontSize: 14,
|
||||
color: colors.text,
|
||||
},
|
||||
filePicker: {
|
||||
borderWidth: 1.2,
|
||||
borderColor: colors.border,
|
||||
backgroundColor: colors.background,
|
||||
borderRadius: 12,
|
||||
padding: 12,
|
||||
},
|
||||
fileSelectedRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
},
|
||||
errorText: {
|
||||
marginTop: 4,
|
||||
} as any,
|
||||
errorBorder: {
|
||||
borderColor: colors.error,
|
||||
},
|
||||
submitRow: {
|
||||
marginTop: 20,
|
||||
alignItems: 'flex-end',
|
||||
height: 50,
|
||||
},
|
||||
submitBtn: {
|
||||
backgroundColor: colors.primary,
|
||||
paddingVertical: 12,
|
||||
paddingHorizontal: 24,
|
||||
borderRadius: 14,
|
||||
minWidth: 120,
|
||||
alignItems: 'center',
|
||||
},
|
||||
submitText: {
|
||||
letterSpacing: 0.5,
|
||||
} as any,
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user