145 lines
4.0 KiB
TypeScript
145 lines
4.0 KiB
TypeScript
import { useTheme } from '@/components/ThemeContext';
|
|
import CategorySelection from '@/components/ui/IndustrySelection';
|
|
import { XIcon } from 'lucide-react-native';
|
|
import React, { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { FlatList, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
|
|
import { Toast } from 'toastify-react-native';
|
|
|
|
type StepProps = {
|
|
formData: any;
|
|
updateForm: (key: string, value: any) => void;
|
|
};
|
|
|
|
const StepTwo = forwardRef(({ formData, updateForm }: StepProps, ref) => {
|
|
const [selectedCategories, setSelectedCategories] = useState<any[]>(formData.category || []);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const { isDark } = useTheme();
|
|
const { t } = useTranslation();
|
|
|
|
const theme = {
|
|
text: isDark ? '#f8fafc' : '#0f172a',
|
|
tabBg: isDark ? '#1e293b' : '#f1f5f9',
|
|
tabText: isDark ? '#ffffff' : '#1e293b',
|
|
deleteBg: isDark ? '#394e73' : '#cbd5e1',
|
|
deleteIcon: isDark ? '#f8fafc' : '#475569',
|
|
error: '#ef4444',
|
|
shadow: isDark ? '#000' : '#64748b',
|
|
};
|
|
|
|
// FormData-ni yangilash
|
|
useEffect(() => {
|
|
updateForm('category', selectedCategories);
|
|
if (selectedCategories.length > 0) setError(null);
|
|
}, [selectedCategories]);
|
|
|
|
// Validatsiya
|
|
const validate = () => {
|
|
if (selectedCategories.length === 0) {
|
|
setError('Iltimos, kompaniyalarni tanlang');
|
|
Toast.info(t('Iltimos, kompaniyalarni tanlang'));
|
|
return false;
|
|
}
|
|
return true;
|
|
};
|
|
|
|
useImperativeHandle(ref, () => ({
|
|
validate,
|
|
}));
|
|
|
|
// O'chirish funksiyasi
|
|
const removeCategory = (id: string | number) => {
|
|
setSelectedCategories((prev) => prev.filter((c) => c.id !== id));
|
|
};
|
|
|
|
// SearchTabs uchun render funksiyasi
|
|
const renderTab = ({ item }: { item: any }) => (
|
|
<View style={[styles.tabWrapper, { backgroundColor: theme.tabBg, shadowColor: theme.shadow }]}>
|
|
<Text
|
|
style={[styles.tabText, { color: theme.tabText }]}
|
|
numberOfLines={1}
|
|
ellipsizeMode="tail"
|
|
>
|
|
{item.name}
|
|
</Text>
|
|
<TouchableOpacity
|
|
onPress={() => removeCategory(item.id)}
|
|
style={[styles.deleteTab, { backgroundColor: theme.deleteBg }]}
|
|
>
|
|
<XIcon size={15} color={theme.deleteIcon} />
|
|
</TouchableOpacity>
|
|
</View>
|
|
);
|
|
|
|
return (
|
|
<View style={[styles.container]}>
|
|
{/* Tanlangan kategoriya tablari */}
|
|
{selectedCategories.length > 0 && (
|
|
<>
|
|
<Text style={[styles.label, { color: theme.text }]}>{t('Tanlangan sohalar')}:</Text>
|
|
<FlatList
|
|
data={selectedCategories}
|
|
renderItem={renderTab}
|
|
keyExtractor={(item) => item.id.toString()}
|
|
horizontal
|
|
showsHorizontalScrollIndicator={false}
|
|
contentContainerStyle={styles.tabsContainer}
|
|
ItemSeparatorComponent={() => <View style={{ width: 8 }} />}
|
|
/>
|
|
</>
|
|
)}
|
|
|
|
{/* Kategoriya tanlash */}
|
|
<Text style={[styles.label, { color: theme.text }]}>{t("Sohalar ro'yxati")}:</Text>
|
|
<CategorySelection
|
|
selectedCategories={selectedCategories}
|
|
setSelectedCategories={setSelectedCategories}
|
|
/>
|
|
</View>
|
|
);
|
|
});
|
|
|
|
export default StepTwo;
|
|
|
|
const styles = StyleSheet.create({
|
|
container: { flexGrow: 1 },
|
|
label: {
|
|
fontSize: 16,
|
|
marginBottom: 5,
|
|
fontWeight: '600',
|
|
},
|
|
error: {
|
|
marginTop: 10,
|
|
fontWeight: '600',
|
|
fontSize: 14,
|
|
},
|
|
tabsContainer: {
|
|
marginBottom: 16,
|
|
paddingVertical: 4,
|
|
},
|
|
tabWrapper: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
paddingVertical: 8,
|
|
paddingHorizontal: 12,
|
|
borderRadius: 20,
|
|
shadowOffset: { width: 0, height: 2 },
|
|
shadowOpacity: 0.2,
|
|
shadowRadius: 3,
|
|
elevation: 3,
|
|
},
|
|
tabText: {
|
|
fontSize: 14,
|
|
fontWeight: '600',
|
|
marginRight: 6,
|
|
maxWidth: 200,
|
|
flexShrink: 1,
|
|
},
|
|
deleteTab: {
|
|
padding: 4,
|
|
borderRadius: 12,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
},
|
|
});
|