Hồng Phúc

54 bundles
1 file3 months ago
1

import React, { useEffect, useRef, useState } fr

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508
import React, { useEffect, useRef, useState } from 'react'; import { View, Image, Text, ImageSourcePropType, GestureResponderEvent, StyleProp, ViewStyle, Keyboard, Pressable, } from 'react-native'; import { TextInput, TouchableOpacity } from 'react-native-gesture-handler'; import { v4 as uuidv4 } from 'uuid'; // import { BASE_URL } from '../../../Service/endpoint'; import images from '../../../Themes/Images'; import styles from './styles'; import CustomButton from '../../../Components/Button'; import { changeQuestionNumber, decreaseQuestionNumber, duplicateQuestion, increaseQuestionNumber, removeQuestion, updateQuestion, } from '../../../Redux/examSlice'; import { useDispatch } from 'react-redux'; import { Alert } from 'react-native'; import { fontSize } from '../../../Utils/Size'; import { Colors } from '../../../Themes'; import ModalCart from '../ModalCart/index'; import { JsxEmit } from 'typescript'; interface ICart { options: Array<any>; leftIcon: ImageSourcePropType; rightIcon?: ImageSourcePropType; onLeftPressed?: (event: GestureResponderEvent) => void; onRightPressed?: (event: GestureResponderEvent) => void; style?: StyleProp<ViewStyle>; title?: string; change: boolean; drag?: () => void; isActive: boolean; index?: number; item?: { _id: string; level: number; question_quantity: number; type: string; title: string; img_src: string; uuid: string; }; } const Cart = ({ change, title, options, onLeftPressed, onRightPressed, drag, isActive, index, item }: ICart) => { console.log(item); const [showModal, setShowModal] = useState(false); const dispatch = useDispatch(); const [onFocus, setFocus] = useState(false); const inputFocus = useRef(); useEffect(() => { Keyboard.addListener('keyboardDidHide', _keyboardDidHide); return () => { Keyboard.removeListener('keyboardDidHide', _keyboardDidHide); }; }, []); const _keyboardDidHide = () => { setFocus(false); }; const _getItem = (i: any) => { console.log(i); switch (i) { case 1: return 'Elementary'; case 2: return 'Intermediate'; case 3: return 'Advanced'; case 4: return 'All'; case 5: break; } }; function removeQuestionType() { Alert.alert( 'Bạn muốn xóa thành phần này không', '', [ { text: 'Accept', onPress: () => { const action = removeQuestion(item); dispatch(action); }, }, { text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel', }, ], { cancelable: false }, ); } function increaseQuestionNumberType() { const action = increaseQuestionNumber(item); dispatch(action); } function changeQuestionNumberType(number: number) { const action = changeQuestionNumber({ data: item, value: number }); dispatch(action); } function decreaseQuestionNumberType() { const action = decreaseQuestionNumber(item); dispatch(action); } function duplicateQuestionType() { const action = duplicateQuestion({ ...item, uuid: uuidv4() }); dispatch(action); } return ( <Pressable onLongPress={drag}> <View style={[styles.box, isActive && { backgroundColor: 'grey', opacity: 0.5 }]}> <TextInput style={{ position: 'absolute', width: 0, height: 0 }} keyboardType='numeric' autoFocus={onFocus} onChangeText={(text) => { if (isNaN(parseInt(text))) { changeQuestionNumberType(1); } else { changeQuestionNumberType(parseInt(text)); } }} ref={inputFocus} /> {change ? ( <Pressable style={styles.headerLeftIcon} onLongPress={drag}> <Image resizeMode='contain' source={images.icon_move} style={styles.icon_move} /> </Pressable> ) : ( <TouchableOpacity style={styles.headerLeftIcon} onPress={() => { duplicateQuestionType(); }} > <Image resizeMode='cover' source={images.icon_copy} style={styles.icon_copy} /> </TouchableOpacity> )} <View style={styles.middleBox}> <View style={styles.boxbox}> <Image source={{ uri: item.img_src ? `${BASE_URL}/${item.img_src}` : 'https://i.ibb.co/LYwCDpR/Hi-nh-ne-n-e-1.png', }} resizeMode='stretch' style={styles.image} /> </View> <View style={styles.row}> {item.question_quantity === null ? ( <Text style={{ fontSize: fontSize.font17 }}>{item.title}</Text> ) : ( <> {/* <DropDownPicker defaultValue={item.level} containerStyle={{ backgroundColor: DefaultTheme.colors.card, height: 40, borderRadius: 100, shadowColor: DefaultTheme.colors.text, shadowOffset: { width: 1, height: 1, }, shadowOpacity: 1, }} style={{ backgroundColor: 'transparent', borderColor: 'transparent', }} itemStyle={{ justifyContent: 'flex-start', }} dropDownStyle={{ backgroundColor: '#fafafa', borderRadius: 100 }} items={[ { label: 'Elementary', value: 1, }, { label: 'Intermediate', value: 2, }, { label: 'Advanced', value: 3, }, { label: 'All', value: 4, }, ]} onChangeItem={(value) => { console.log(value, item); const action = updateQuestion({ level: value, data: item }); dispatch(action); }} /> */} {/* // 1 function cho 4 button */} <CustomButton size={32} backgroundColor={Colors.cornFlowerBlue} tintColor={Colors.aliceBlue} text={_getItem(item?.level)} onPress={() => { setShowModal(true); }} items={[ { label: 'Elementary', value: 1, }, { label: 'Intermediate', value: 2, }, { label: 'Advanced', value: 3, }, { label: 'All', value: 4, }, ]} onPressItem={(value) => { const action = updateQuestion({ level: value, data: item }); dispatch(action); }} /> <ModalCart isVisible={showModal} item={item} onTouchOutside={() => { setShowModal(!showModal); }} onTouchOutsidebutton={() => { setShowModal(!showModal); }} /> <View style={styles.group}> <CustomButton style={styles.optionIcon} icon={images.icon_minus} iconStyle={styles.icon} onPress={() => { if (item.question_quantity > 1) { decreaseQuestionNumberType(); } else { removeQuestionType(); } }} /> <TouchableOpacity onPress={() => inputFocus.current.focus()}> <Text style={styles.number}>{item.question_quantity}</Text> </TouchableOpacity> <CustomButton style={styles.optionIcon} icon={images.icon_plus} iconStyle={styles.icon} onPress={() => { increaseQuestionNumberType(); }} /> </View> </> )} </View> </View> {change ? ( <TouchableOpacity style={styles.headerRightIcon} onPress={removeQuestionType}> <Image resizeMode='contain' source={images.icon_bin} style={styles.icon_bin} /> </TouchableOpacity> ) : ( <></> )} </View> </Pressable> ); }; export default React.memo(Cart); ////////////////////// import React, { useEffect, useState } from 'react'; import { View, Image, ImageBackground, Dimensions, Text, Animated, Easing, ActivityIndicator, GestureResponderEvent, TouchableOpacity, Modal, FlatList, } from 'react-native'; import { useTranslation } from 'react-i18next'; import { v4 as uuidv4 } from 'uuid'; import { useDispatch } from 'react-redux'; import styles from '../ModalCart/styles'; import CustomButton from '../../../Components/Button'; import images from '../../../Themes/Images'; import DefaultTheme from '../../../Themes/DefaultTheme'; import { addQuestion, updateListQuestion, updateQuestion } from '../../../Redux/examSlice'; import { BASE_URL } from '../../../Service/endpoint'; import CircularButton from '../../../Components/CircularButton/CircularButton'; import { Colors } from '../../../Themes'; import { useNavigation } from '@react-navigation/native'; interface Item { _id: string; name: string; description: string; image_url: string; semester: string; type: string; uuid: string; } interface IModalCart { isVisible?: boolean; close?: (params: GestureResponderEvent) => void; onTouchOutside?: () => void; listModalCart?: Array<Item>; item: { _id: string; name: string; description: string; image_url: string; semester: string; type: string; uuid: string; }; onTouchOutsidebutton?: () => void; } const ModalCart: React.FC<IModalCart> = ({ isVisible = false, close, onTouchOutside, onTouchOutsidebutton, listModalCart, item, }) => { const { t } = useTranslation(); const dispatch = useDispatch(); const [checktype, setChecktype] = useState(); const [disabled, setDisabled] = useState(false); const navigation = useNavigation(); const [selectedType, setSelectedType] = useState< Array<{ _id: string; level: number; question_quantity: number; type: string; title: string; image_url: string; uuid: string; }> >([item]); const [chosenCategory, setChosenCategory] = useState({}); const selected = (level: number) => { const index: number = selectedType.map((item) => item.level).indexOf(level); return index > -1 ? true : false; }; // data.uuid trong card // const onSubmit = () => { // const data: any = selectedType.map((item) => item.uuid)[0]; // console.log('data', data); // const action = updateQuestion({ // data: { // uuid: data.uuid, // level: data.level, // }, // }); // dispatch(action); // }; // kiểm tra 1 lần nhấn vào và tắt cái đang lưu. const setSelectedLevel = (level: number) => { const index: number = selectedType.map((item) => item.level).indexOf(level); if (index >= 0) { const temp = [...selectedType]; temp.splice(index, 1); setSelectedType(temp); } else if (index === -1) { setSelectedType([ // ...selectedType, { _id: item?._id, level: level, question_quantity: 1, title: item?.name, image_url: item?.image_url, type: item?.type, uuid: uuidv4(), }, ]); } }; const _renderItem = ({ item, index }: { item: Item; index: number }) => { return ( <CircularButton buttonSize={44} buttonStyle={styles.buttonStyle} key={`${item._id}${index}`} label={item.name} /> ); }; return ( <Modal animationType={'slide'} transparent={true} visible={isVisible}> <TouchableOpacity style={styles.centeredView} onPressOut={() => { onTouchOutside && onTouchOutside(); }} > <View style={styles.modalView}> <View style={styles.options}> <View style={styles.row}> <TouchableOpacity onPress={() => setSelectedLevel(1)} style={[styles.group, selected(1) && { backgroundColor: DefaultTheme.colors.primary }]} > <Text style={[styles.text, selected(1) && { color: DefaultTheme.colors.card }]}> Elementary </Text> </TouchableOpacity> <TouchableOpacity onPress={() => setSelectedLevel(2)} style={[styles.group, selected(2) && { backgroundColor: DefaultTheme.colors.primary }]} > <Text style={[styles.text, selected(2) && { color: DefaultTheme.colors.card }]}> Intermediate </Text> </TouchableOpacity> </View> <View style={styles.row}> <TouchableOpacity onPress={() => setSelectedLevel(3)} style={[styles.group, selected(3) && { backgroundColor: DefaultTheme.colors.primary }]} > <Text style={[styles.text, selected(3) && { color: DefaultTheme.colors.card }]}> Advanced </Text> </TouchableOpacity> <TouchableOpacity onPress={() => setSelectedLevel(4)} style={[styles.group, selected(4) && { backgroundColor: DefaultTheme.colors.primary }]} > <Text style={[styles.text, selected(4) && { color: DefaultTheme.colors.card }]}> {t('testTotal')} </Text> </TouchableOpacity> </View> </View> <CustomButton style={{ marginTop: 12 }} text={t('updateLevel')} tintColor={DefaultTheme.colors.background} backgroundColor={DefaultTheme.colors.primary} fontSize={20} onPress={() => { // onSubmit(); onTouchOutsidebutton && onTouchOutsidebutton(); }} /> </View> </TouchableOpacity> </Modal> ); }; export default ModalCart;