Componente import DropDownPicker from “react-native-dropdown-picker”;
import { useEffect, useState } from "react";
import {
Image,
KeyboardAvoidingView,
Platform,
ScrollView,
Text,
View,
} from "react-native";
import DropDownPicker from "react-native-dropdown-picker";
import MaskInput from "react-native-mask-input";
import { Snackbar } from "react-native-paper";
import Lista from "../../components/Lista";
import FormacaoService from "../../services/formacao";
import InstituicaoService from "../../services/instituicao";
import { theme } from "../../styles/theme";
import {
Body,
ButtonAdicionar,
ButtonAdicionarText,
ButtonProximo,
ButtonProximoText,
ContainerInput,
Header,
HeaderSubTitle,
HeaderTextInput,
HeaderTitle,
styles,
} from "./styles";
export default ProfissionalFormacao = (props) => {
const {
RectangleAzulClaro,
RectangleCinza,
RectangleAzulEscuro,
setPagina,
loading,
setLoading,
setProfissionalFormacao,
profissionalFormacao,
} = props;
const onDismissSnackBar = () => setVisibleError(false);
const [openInstituicao, setOpenInstituicao] = useState(false);
const [openFormacao, setOpenFormacao] = useState(false);
const [valueInstituicao, setValueInstituicao] = useState(null);
const [valueFormacao, setValueFormacao] = useState(null);
const [instituicoes, setInstituicoes] = useState([]);
const [formacoes, setFormacoes] = useState([]);
const [visibleError, setVisibleError] = useState(false);
const [errorMessage, setErrorMessage] = useState(
"Alguns erros foram encontrados!"
);
const [backgroundColorInput, setBackgroundColorInput] = useState({
dataConclusao: theme.colors.text50,
});
const [form, setForm] = useState({
dataConclusao: "",
});
useEffect(() => {
async function fetchData() {
const service = new InstituicaoService();
setLoading(true);
const retorno = await service.todos();
console.log(`instituicao`);
console.log(retorno);
setInstituicoes(retorno);
setLoading(false);
}
fetchData();
}, [instituicoes.length > 0]);
useEffect(() => {
async function fetchData() {
const service = new FormacaoService();
setLoading(true);
const retorno = await service.todos();
console.log(`formacao`);
console.log(retorno);
setFormacoes(retorno);
setLoading(false);
}
fetchData();
}, [formacoes.length > 0]);
const proximo = () => {
setPagina(3);
};
const adicionar = () => {
let message = "";
let hasErrors = false;
if (valueInstituicao === null) {
message = "Instituicao é obrigatório!";
hasErrors = true;
}
if (!hasErrors) {
if (valueFormacao === null) {
message = "Formacao é obrigatório!";
hasErrors = true;
}
}
if (!hasErrors) {
if (form.dataConclusao.length === 0) {
message = "Data da conclusao é obrigatório!";
hasErrors = true;
}
}
if (hasErrors) {
setErrorMessage(message);
setVisibleError(true);
} else {
profissionalFormacao.push({
dataConclusao: form.dataConclusao,
formacao: valueFormacao,
instituicao: valueInstituicao,
});
console.log(profissionalFormacao);
//setForm(null);
setValueFormacao(null);
setValueInstituicao(null);
/*setProfissionalFormacao(...profissionalFormacao, {
dataConclusao: form.dataConclusao,
formacao: valueFormacao,
instituicao: valueInstituicao,
});*/
}
};
return (
<>
<Header>
<HeaderTitle>Cadastro</HeaderTitle>
<HeaderSubTitle>
<Text>Queremos te oferecer as oportunidades mais</Text>
</HeaderSubTitle>
<HeaderSubTitle>
<Text>aderentes ao seu perfil !</Text>
</HeaderSubTitle>
</Header>
<KeyboardAvoidingView
style={{ flex: 1, flexDirection: "column", justifyContent: "center" }}
behavior={Platform.OS == "ios" ? "padding" : "height"}
enabled
keyboardVerticalOffset={50}
>
<View style={styles.containerSafe}>
<Image source={RectangleAzulEscuro} style={styles.quadradoB} />
<Image source={RectangleAzulEscuro} style={styles.quadradoB} />
<Image source={RectangleAzulClaro} style={styles.quadradoB} />
<Image source={RectangleCinza} style={styles.quadradoB} />
<Image source={RectangleCinza} style={styles.quadradoB} />
<Image source={RectangleCinza} style={styles.quadradoB} />
</View>
<ScrollView>
<Body>
<Header>
<HeaderSubTitle>Dados da sua formacao</HeaderSubTitle>
</Header>
<ContainerInput>
<DropDownPicker
style={{
borderWidth: 0,
borderColor: "#fff",
backgroundColor: "#fff",
}}
open={openInstituicao}
value={valueInstituicao}
items={instituicoes}
setOpen={setOpenInstituicao}
setValue={setValueInstituicao}
setItems={setInstituicoes}
placeholder={"Instituicoes"}
loading={loading}
searchable={true}
listMode="SCROLLVIEW"
searchWithRegionalAccents={true}
searchPlaceholder="Busque por instituicao"
schema={{
label: "nome",
value: "id",
}}
/>
</ContainerInput>
<ContainerInput>
<DropDownPicker
style={{
borderWidth: 0,
borderColor: "#fff",
backgroundColor: "#fff",
}}
open={openFormacao}
value={valueFormacao}
items={formacoes}
setOpen={setOpenFormacao}
setValue={setValueFormacao}
setItems={setFormacoes}
placeholder={"Formacao"}
loading={loading}
searchable={true}
searchWithRegionalAccents={true}
searchPlaceholder="Busque por formacao"
listMode="SCROLLVIEW"
schema={{
label: "nome",
value: "id",
}}
/>
</ContainerInput>
<ContainerInput
style={{ borderColor: backgroundColorInput?.dataConclusao }}
>
{(form.dataConclusao.length > 0 ||
backgroundColorInput?.dataConclusao ==
theme.colors.secondary) && (
<HeaderTextInput>RData da conclusao (mm/aaaa)</HeaderTextInput>
)}
<MaskInput
mask={[/\d/, /\d/, "/", /\d/, /\d/, /\d/, /\d/]}
placeholder={
form.dataConclusao.length > 0 ||
backgroundColorInput?.dataConclusao == theme.colors.secondary
? "__/____"
: "Data da conclusao (mm/aaaa)"
}
keyboardType="dataConclusao"
onFocus={() =>
setBackgroundColorInput({
...backgroundColorInput,
dataConclusao: theme.colors.secondary,
})
}
onBlur={() =>
setBackgroundColorInput({
...backgroundColorInput,
dataConclusao: theme.colors.text50,
})
}
autoCapitalize="none"
value={form?.dataConclusao}
onChangeText={(dataConclusao) =>
setForm({ ...form, dataConclusao })
}
placeholderTextColor={theme.colors.text}
color={theme.colors.text}
style={{ color: theme.colors.text }}
/>
</ContainerInput>
<ButtonProximo
onPress={() => proximo()}
style={Platform.OS == "android" ? styles.shadow : ""}
>
<ButtonProximoText>Proximo</ButtonProximoText>
</ButtonProximo>
<ButtonAdicionar
onPress={() => adicionar()}
style={Platform.OS == "android" ? styles.shadow : ""}
>
<ButtonAdicionarText>Adicionar nova formacao</ButtonAdicionarText>
</ButtonAdicionar>
{profissionalFormacao.map((l, i) => {
let formacao = "";
let instituicao = "";
instituicoes.forEach((entidade) => {
if (l.instituicao === entidade.id) {
instituicao = entidade.nome;
}
});
formacoes.forEach((entidade) => {
if (l.formacao === entidade.id) {
formacao = entidade.nome;
}
});
return (
<Lista
key={I}
titulo={instituicao}
subtitulo={formacao}
descricao={"Data da conclusao: " + l.dataConclusao}
id={l.id === null ? i : l.id}
/>
);
})}
</Body>
</ScrollView>
</KeyboardAvoidingView>
<View>
<Snackbar
visible={visibleError}
onDismiss={onDismissSnackBar}
action={{
label: "Ok",
onPress: () => {},
}}
>
{errorMessage}
</Snackbar>
</View>
</>
);
};
import { StyleSheet } from "react-native";
export const styles = StyleSheet.create({
container: {
flexDirection: "row",
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "space-between",
paddingHorizontal: 16,
paddingVertical: 10,
},
content: {
flex: 1,
marginLeft: 16,
},
title: {
fontSize: 12,
fontWeight: "bold",
color: "#6F4E37",
marginBottom: 5,
},
subtitulo: {
fontSize: 10,
color: "#000",
},
descricao: {
fontSize: 10,
color: "#000",
paddingTop: 5
},
});
So que a lista esta debaixo do outro componente.
Como ajustar ?