1
- import { Dispatch , SetStateAction , useState } from "react"
1
+ import { Dispatch , SetStateAction , useCallback , useContext , useState } from "react"
2
2
import { Dimensions , Modal } from "react-native"
3
3
import { FlatList } from "react-native-gesture-handler"
4
4
import styled from "styled-components/native"
5
+ import { ContextProvider , Provider } from "../../utils/Provider"
6
+ import { alterarEmoji , emojis } from "./Service"
5
7
6
8
interface ModalDrawerProps {
7
9
aberto : boolean ,
8
10
setAberto : Dispatch < SetStateAction < boolean > >
9
11
}
10
- export const ModalDrawer = ( props : ModalDrawerProps ) => {
11
- const [ indexSelecionado , setIndexSelecionado ] = useState < number > ( - 1 ) ;
12
-
13
- const alterarEmoji = async ( emoji : number ) => {
14
- props . setAberto ( false ) ;
15
- }
16
12
17
- const removerEmoji = async ( ) => {
18
- props . setAberto ( false ) ;
19
- }
20
-
21
- const bandeiras = [ { emoji : "🇧🇷" } , { emoji : "🇨🇦" } , { emoji : "🇺🇸" } , { emoji : "🇦🇷" } , { emoji : "🇺🇾" } , { emoji : "🇲🇽" } , { emoji : "🇻🇪" } , { emoji : "🇯🇲" } ]
13
+ export const ModalDrawer = ( props : ModalDrawerProps ) => {
14
+ const { meusDados, setMeusDados } = useContext < ContextProvider > ( Provider ) ;
15
+ const [ indexSelecionado , setIndexSelecionado ] = useState ( { indexArray : - 1 , indexEmoji : - 1 } ) ;
22
16
23
17
return (
24
18
< Modal
@@ -30,37 +24,44 @@ export const ModalDrawer = (props: ModalDrawerProps) => {
30
24
< Emojis >
31
25
< TextEmojiPrincipal > Como você está se sentindo?</ TextEmojiPrincipal >
32
26
< EmojiScroll >
33
- < EmoteTextContainer >
34
- < EmoteText > Bandeiras</ EmoteText >
35
- </ EmoteTextContainer >
36
27
< EmoteContainer >
37
28
< FlatList
38
- data = { bandeiras }
39
- numColumns = { 7 }
29
+ data = { emojis }
40
30
keyExtractor = { ( item , index ) => index . toString ( ) }
41
- renderItem = { ( { item, index} ) =>
42
- < EmojiButton
43
- style = { { borderColor : ( index === indexSelecionado ) ? "white" : "#303030" } }
44
- onPress = { ( ) => setIndexSelecionado ( index ) }
45
- >
46
- < EmojiText > { item . emoji } </ EmojiText >
47
- </ EmojiButton >
31
+ renderItem = { ( props1 ) =>
32
+ < >
33
+ < EmoteTextContainer >
34
+ < EmoteText > { props1 . item . titulo } </ EmoteText >
35
+ </ EmoteTextContainer >
36
+ < FlatList
37
+ data = { props1 . item . emojis }
38
+ numColumns = { 7 }
39
+ renderItem = { ( { item, index} ) =>
40
+ < EmojiButton
41
+ style = { { borderColor : ( props1 . index === indexSelecionado . indexArray && index === indexSelecionado . indexEmoji ) ? "white" : "#303030" } }
42
+ onPress = { ( ) => setIndexSelecionado ( { indexArray : props1 . index , indexEmoji : index } ) }
43
+ >
44
+ < EmojiText > { item . emoji } </ EmojiText >
45
+ </ EmojiButton >
46
+ }
47
+ />
48
+ </ >
48
49
}
49
50
/>
50
51
</ EmoteContainer >
51
52
</ EmojiScroll >
52
53
</ Emojis >
53
54
< ModalOptions >
54
55
< Buttons >
55
- < ButtonChoice onPress = { ( ) => removerEmoji ( ) } >
56
+ < ButtonChoice onPress = { ( ) => alterarEmoji ( - 1 , - 1 , props . setAberto , meusDados , setMeusDados ) } >
56
57
< TextButtonChoice > Remover</ TextButtonChoice >
57
58
</ ButtonChoice >
58
59
</ Buttons >
59
60
< Buttons >
60
61
< ButtonChoice onPress = { ( ) => props . setAberto ( false ) } >
61
62
< TextButtonChoice > Cancelar</ TextButtonChoice >
62
63
</ ButtonChoice >
63
- < ButtonChoice onPress = { ( ) => alterarEmoji ( indexSelecionado ) } >
64
+ < ButtonChoice onPress = { ( ) => alterarEmoji ( indexSelecionado . indexArray , indexSelecionado . indexEmoji , props . setAberto , meusDados , setMeusDados ) } >
64
65
< TextButtonChoice > Ok</ TextButtonChoice >
65
66
</ ButtonChoice >
66
67
</ Buttons >
0 commit comments