Skip to content

A
anawork-mobile-v2
Commit f200630d authored by dungtnguyen's avatar dungtnguyen
Browse files
Options

fix onClick calendar

parent 6a8e5bdb
Hide whitespace changes
Inline Side-by-side
Showing with 162 additions and 326 deletions
src/screens/home/modals/BirthdayModals.js
View file @ f200630d
import React, {memo, useCallback, useMemo, useRef} from 'react'; import React, {memo} from 'react';
import { import {
Image, Image,
Modal, Modal,
...@@ -8,344 +8,180 @@ import { ...@@ -8,344 +8,180 @@ import {
View, View,
} from 'react-native'; } from 'react-native';
import FastImage from 'react-native-fast-image'; import FastImage from 'react-native-fast-image';
import AppText from '../../../components/AppText';
import ButtonComponent from '../../../components/ButtonComponent'; import ButtonComponent from '../../../components/ButtonComponent';
import config from '../../../config';
import commonStyles from '../../../styles/commonStyles';
import {IMAGES, IconProfile} from '../../../values/images'; import {IMAGES, IconProfile} from '../../../values/images';
import styles from '../style'; import styles from '../style';
import AppText from '../../../components/AppText';
import config from '../../../config';
import BottomSheet from '@gorhom/bottom-sheet';
import {GestureHandlerRootView} from 'react-native-gesture-handler';
const BirthdayModal = React.memo( const BirthdayModal = React.memo(
({ props => {
modalVisible, const {
handleCloseDesBirthday, modalVisible,
openModalWishBirthday, handleCloseDesBirthday,
addMoreImgFromGallery, openModalWishBirthday,
closeModalWishBirthday, addMoreImgFromGallery,
closeModalHappyBirthday, closeModalWishBirthday,
}) => { closeModalHappyBirthday,
const bottomSheetRef = useRef(null); } = props;
const snapPoints = useMemo(() => ['25%', '50%', '90%'], []);
return ( return (
// <Modal <Modal
// animationType="slide" style={commonStyles.baseShadow}
// transparent={true} animationType="slide"
// visible={modalVisible.isVisible}> transparent={true}
// <View visible={modalVisible.isVisible}>
// style={{flex: 1, justifyContent: 'flex-end'}} <View
// //activeOpacity={0} style={{flex: 1, justifyContent: 'flex-end'}}
// //onPress={handleCloseDesBirthday} //activeOpacity={0}
// > //onPress={handleCloseDesBirthday}
// <View style={styles.contentContainer}> >
// <ScrollView> <View style={styles.contentContainer}>
// <ButtonComponent <ScrollView>
// iconSource={IconProfile.IcCloseBlack} <ButtonComponent
// styleIcon={{width: 20, height: 20}} iconSource={IconProfile.IcCloseBlack}
// style={{ styleIcon={{width: 20, height: 20}}
// alignSelf: 'flex-end', style={{
// marginRight: 10, alignSelf: 'flex-end',
// marginTop: 10, marginRight: 10,
// }} marginTop: 10,
// onPress={handleCloseDesBirthday} }}
// /> onPress={handleCloseDesBirthday}
// <AppText />
// style={{color: 'black', fontWeight: 'bold', fontSize: 14}}> <AppText
// {`Ngày ${modalVisible?.day?.day} tháng ${modalVisible?.day?.month} năm ${modalVisible?.day?.year} 🎉`} style={{color: 'black', fontWeight: 'bold', fontSize: 14}}>
// </AppText> {`Ngày ${modalVisible?.day?.day} tháng ${modalVisible?.day?.month} năm ${modalVisible?.day?.year} 🎉`}
// {modalVisible?.birthdayArr?.map((item, index) => ( </AppText>
// <View {modalVisible?.birthdayArr?.map((item, index) => (
// key={index} <View
// style={[ key={index}
// styles.viewHappyBirthday, style={[
// modalVisible?.managerOpenWish[index].enable styles.viewHappyBirthday,
// ? styles.openViewHappyBirthday modalVisible?.managerOpenWish[index].enable
// : styles.closeViewHappyBirthday, ? styles.openViewHappyBirthday
// ]}> : styles.closeViewHappyBirthday,
// <View ]}>
// style={{
// flexDirection: 'row',
// justifyContent: 'space-between',
// }}>
// <View style={{flexDirection: 'row'}}>
// <Image
// source={
// item.avatar
// ? {
// uri: config.imageEndPoint + item.avatar,
// }
// : IMAGES.IcAvatarDefault
// }
// style={{width: 40, height: 40}}
// />
// <View style={{paddingLeft: 10}}>
// <AppText
// style={
// styles.txtTitle
// }>{`${item.first_name} ${item.middle_name} ${item.last_name}`}</AppText>
// <AppText>{item.position}</AppText>
// </View>
// </View>
// {!modalVisible?.managerOpenWish[index].enable && (
// <View
// style={{
// justifyContent: 'center',
// alignItems: 'center',
// }}>
// <TouchableOpacity
// onPress={() => openModalWishBirthday(index)}
// style={styles.btnOpenHappyBirthday}>
// <Image
// source={IMAGES.IcOutlineSend}
// style={{width: 10, height: 10}}
// />
// </TouchableOpacity>
// </View>
// )}
// </View>
// {modalVisible?.managerOpenWish[index].enable && (
// <View>
// <View style={{marginTop: 10}}>
// <TextInput
// multiline
// numberOfLines={3}
// placeholder={'Vui lòng nhập lời chúc tại đây'}
// style={{borderWidth: 0.2}}
// />
// {/** suggest wish */}
// <View>
// <ButtonComponent
// style={styles.btnSuggest}
// text={'Chúc bà sinh nhật dui dẻ nha 🌺'}
// textStyle={{color: 'white'}}
// />
// <ButtonComponent
// style={styles.btnSuggest}
// text={'Tuổi mới sinh đẹp nhaaaa 🌺💃'}
// textStyle={{color: 'white'}}
// />
// </View>
// <View style={{flexDirection: 'row'}}>
// {item?.imgArr &&
// item?.imgArr.map((el, position) => {
// return (
// <View key={position} style={{marginRight: 10}}>
// <FastImage
// source={{
// uri: el.uri,
// }}
// style={{
// width: 60,
// height: 60,
// marginTop: 10,
// }}
// />
// </View>
// );
// })}
// {!item.imgArr && (
// <View style={styles.viewAddMoreImg}>
// <ButtonComponent
// iconSource={IMAGES.IcAddMoreImg}
// styleIcon={{height: 25, width: 25}}
// onPress={() => addMoreImgFromGallery(index)}
// />
// </View>
// )}
// </View>
// </View>
// <View
// style={{
// flexDirection: 'row',
// justifyContent: 'space-between',
// marginTop: 10,
// }}>
// <TouchableOpacity
// onPress={() => closeModalWishBirthday(index)}
// style={{alignSelf: 'flex-end'}}>
// <AppText style={{color: 'blue', fontWeight: '600'}}>
// {' '}
// Hủy{' '}
// </AppText>
// </TouchableOpacity>
// <TouchableOpacity
// onPress={() => closeModalHappyBirthday(index)}
// style={{alignSelf: 'flex-end'}}>
// <AppText style={{color: 'blue', fontWeight: '600'}}>
// Gửi
// </AppText>
// </TouchableOpacity>
// </View>
// </View>
// )}
// </View>
// ))}
// </ScrollView>
// </View>
// </View>
// </Modal>
<GestureHandlerRootView>
<BottomSheet
ref={bottomSheetRef}
index={1}
snapPoints={snapPoints}
animateOnMount={true}
enableDynamicSizing={false}>
<View
style={{flex: 1, justifyContent: 'flex-end'}}
//activeOpacity={0}
//onPress={handleCloseDesBirthday}
>
<View style={styles.contentContainer}>
<ScrollView>
<ButtonComponent
iconSource={IconProfile.IcCloseBlack}
styleIcon={{width: 20, height: 20}}
style={{
alignSelf: 'flex-end',
marginRight: 10,
marginTop: 10,
}}
onPress={handleCloseDesBirthday}
/>
<AppText
style={{color: 'black', fontWeight: 'bold', fontSize: 14}}>
{`Ngày ${modalVisible?.day?.day} tháng ${modalVisible?.day?.month} năm ${modalVisible?.day?.year} 🎉`}
</AppText>
{modalVisible?.birthdayArr?.map((item, index) => (
<View <View
key={index} style={{
style={[ flexDirection: 'row',
styles.viewHappyBirthday, justifyContent: 'space-between',
modalVisible?.managerOpenWish[index].enable }}>
? styles.openViewHappyBirthday <View style={{flexDirection: 'row'}}>
: styles.closeViewHappyBirthday, <Image
]}> source={
<View item.avatar
style={{ ? {
flexDirection: 'row', uri: config.imageEndPoint + item.avatar,
justifyContent: 'space-between', }
}}> : IMAGES.IcAvatarDefault
<View style={{flexDirection: 'row'}}> }
<Image style={{width: 40, height: 40, borderRadius: 5}}
source={ />
item.avatar <View style={{paddingLeft: 10}}>
? { <AppText
uri: config.imageEndPoint + item.avatar, style={
} styles.txtTitle
: IMAGES.IcAvatarDefault }>{`${item.first_name} ${item.middle_name} ${item.last_name}`}</AppText>
} <AppText>{item.position}</AppText>
style={{width: 40, height: 40}}
/>
<View style={{paddingLeft: 10}}>
<AppText
style={
styles.txtTitle
}>{`${item.first_name} ${item.middle_name} ${item.last_name}`}</AppText>
<AppText>{item.position}</AppText>
</View>
</View> </View>
{!modalVisible?.managerOpenWish[index].enable && (
<View
style={{
justifyContent: 'center',
alignItems: 'center',
}}>
<TouchableOpacity
onPress={() => openModalWishBirthday(index)}
style={styles.btnOpenHappyBirthday}>
<Image
source={IMAGES.IcOutlineSend}
style={{width: 10, height: 10}}
/>
</TouchableOpacity>
</View>
)}
</View> </View>
{modalVisible?.managerOpenWish[index].enable && ( {/* {!modalVisible?.managerOpenWish[index].enable && (
<View> <View
<View style={{marginTop: 10}}> style={{
<TextInput justifyContent: 'center',
multiline alignItems: 'center',
numberOfLines={3} }}>
placeholder={'Vui lòng nhập lời chúc tại đây'} <TouchableOpacity
style={{borderWidth: 0.2}} onPress={() => openModalWishBirthday(index)}
style={styles.btnOpenHappyBirthday}>
<Image
source={IMAGES.IcOutlineSend}
style={{width: 10, height: 10}}
/>
</TouchableOpacity>
</View>
)} */}
</View>
{modalVisible?.managerOpenWish[index].enable && (
<View>
<View style={{marginTop: 10}}>
<TextInput
multiline
numberOfLines={3}
placeholder={'Vui lòng nhập lời chúc tại đây'}
style={{borderWidth: 0.2}}
/>
{/** suggest wish */}
<View>
<ButtonComponent
style={styles.btnSuggest}
text={'Chúc bà sinh nhật dui dẻ nha 🌺'}
textStyle={{color: 'white'}}
/>
<ButtonComponent
style={styles.btnSuggest}
text={'Tuổi mới sinh đẹp nhaaaa 🌺💃'}
textStyle={{color: 'white'}}
/> />
{/** suggest wish */}
<View>
<ButtonComponent
style={styles.btnSuggest}
text={'Chúc bà sinh nhật dui dẻ nha 🌺'}
textStyle={{color: 'white'}}
/>
<ButtonComponent
style={styles.btnSuggest}
text={'Tuổi mới sinh đẹp nhaaaa 🌺💃'}
textStyle={{color: 'white'}}
/>
</View>
<View style={{flexDirection: 'row'}}>
{item?.imgArr &&
item?.imgArr.map((el, position) => {
return (
<View
key={position}
style={{marginRight: 10}}>
<FastImage
source={{
uri: el.uri,
}}
style={{
width: 60,
height: 60,
marginTop: 10,
}}
/>
</View>
);
})}
{!item.imgArr && (
<View style={styles.viewAddMoreImg}>
<ButtonComponent
iconSource={IMAGES.IcAddMoreImg}
styleIcon={{height: 25, width: 25}}
onPress={() => addMoreImgFromGallery(index)}
/>
</View>
)}
</View>
</View> </View>
<View <View style={{flexDirection: 'row'}}>
style={{ {item?.imgArr &&
flexDirection: 'row', item?.imgArr.map((el, position) => {
justifyContent: 'space-between', return (
marginTop: 10, <View key={position} style={{marginRight: 10}}>
}}> <FastImage
<TouchableOpacity source={{
onPress={() => closeModalWishBirthday(index)} uri: el.uri,
style={{alignSelf: 'flex-end'}}> }}
<AppText style={{color: 'blue', fontWeight: '600'}}> style={{
{' '} width: 60,
Hủy{' '} height: 60,
</AppText> marginTop: 10,
</TouchableOpacity> }}
<TouchableOpacity />
onPress={() => closeModalHappyBirthday(index)} </View>
style={{alignSelf: 'flex-end'}}> );
<AppText style={{color: 'blue', fontWeight: '600'}}> })}
Gửi {!item.imgArr && (
</AppText> <View style={styles.viewAddMoreImg}>
</TouchableOpacity> <ButtonComponent
iconSource={IMAGES.IcAddMoreImg}
styleIcon={{height: 25, width: 25}}
onPress={() => addMoreImgFromGallery(index)}
/>
</View>
)}
</View> </View>
</View> </View>
)} <View
</View> style={{
))} flexDirection: 'row',
</ScrollView> justifyContent: 'space-between',
</View> marginTop: 10,
}}>
<TouchableOpacity
onPress={() => closeModalWishBirthday(index)}
style={{alignSelf: 'flex-end'}}>
<AppText style={{color: 'blue', fontWeight: '600'}}>
{' '}
Hủy{' '}
</AppText>
</TouchableOpacity>
<TouchableOpacity
onPress={() => closeModalHappyBirthday(index)}
style={{alignSelf: 'flex-end'}}>
<AppText style={{color: 'blue', fontWeight: '600'}}>
Gửi
</AppText>
</TouchableOpacity>
</View>
</View>
)}
</View>
))}
</ScrollView>
</View> </View>
</BottomSheet> </View>
</GestureHandlerRootView> </Modal>
); );
}, },
function areEqual(prevProps, nextProps) { function areEqual(prevProps, nextProps) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment