OQuódigoe o seguinte，QuériaUsar Flatlist aoinvésde listView 从“反应”中导入React，{组件} 从'react-redux'导入{connect}; 从'react-native'导入{文本，视图，TouchableOpacity，StyleSheet，FlatList，警报，平台，ListView} 从“瞬间”导入瞬间； 导入'moment / locale / pt-br'; 从'react-native-vector-icons / FontAwesome'导入图标 从“ ../store/actions/ListaTarefasConcluidas”导入{tarefasUsuarioFetchConcluidas}； 从'../store/actions/TarefasConcluidasAction'导入{ExcluirTarefaConcluida，reiniciarTarefa}; 从'lodash'导入_； 从“ ../store/actions/Tarefas”导入{modificaUID}； 从'./ModalExcluirTarefaConcluida'导入ModalExcluirTarefaConcluida;
class TarefasConcluidas extends Component {
componentWillMount() {
this.props.tarefasUsuarioFetchConcluidas();
this.criaFonteDeDados( this.props.tarefas )
// this.setState({ showAddTask: false })
}
componentWillReceiveProps(nextProps){
this.criaFonteDeDados(nextProps.tarefas)
}
criaFonteDeDados( tarefas ){
const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 })
this.fonteDeDados = ds.cloneWithRows(tarefas)
}
state = {
showExcTask: false
}
fechamodal = () => {
this.setState({ showExcTask: false})
}
_excluirTarefaConcluida (uid) {
const IdTarefa = uid;
this.props.ExcluirTarefaConcluida({IdTarefa});
}
atualizaId(id){
this.props.idTarefa = this.props.modificaUID(id)
}
obsTarefa(tarefas){
if(tarefas.trim()){
return(
<Text style={styles.obs}>{tarefas}</Text>
)
}else{
return(
<Text style={styles.obs}>Sem observações...</Text>
)
}
}
_reiniciaTarefa (idTarefa, dataInicio, desc, grau, user, obs, dias, horas, minutos, segundos, priori) {
const uid = idTarefa;
const dataInicioTarefa = dataInicio;
const descricao = desc;
const grauDaTarefa = grau;
const nomeUsuario = user;
const observacoes = obs;
const qtdDias = dias;
const qtdHoras = horas;
const qtdMinutos = minutos;
const qtdSegundos = segundos;
const tarefaPrioritaria = priori;
this.props.reiniciarTarefa({uid, dataInicioTarefa, descricao, grauDaTarefa, nomeUsuario, observacoes, qtdDias, qtdHoras, qtdMinutos, qtdSegundos, tarefaPrioritaria})
}
tempoGasto(qtdDias, qtdHoras,qtdMinutos, qtdSegundos){
if(qtdDias == '0' && qtdHoras== '0' && qtdMinutos== '0' && qtdSegundos != '0'){
return(
<Text style={{ color: '#555', fontSize: 14, marginLeft: 10, marginBottom: 5, marginBottom: 5}}>Tempo gasto: {qtdSegundos} segundos.</Text>
)
}else if(qtdDias== '0' && qtdHoras== '0' && qtdMinutos != '0'){
return(
<Text style={{ color: '#555', fontSize: 14, marginLeft: 10, marginBottom: 5, marginBottom: 5}}>Tempo gasto: {qtdMinutos} minutos e {qtdSegundos} segundos.</Text>
)
}else if(qtdDias== '0' && qtdHoras != '0'){
return(
<Text style={{ color: '#555', fontSize: 14, marginLeft: 10, marginBottom: 5, marginBottom: 5}}>Tempo gasto: {qtdHoras} horas, {qtdMinutos} minutos e {qtdSegundos} segundos.</Text>
)
}else if(qtdDias !='0'){
return(
<Text style={{ color: '#555', fontSize: 14, marginLeft: 10, marginBottom: 5, marginBottom: 5}}>Tempo gasto: {qtdDias} dias, {qtdHoras} horas, {qtdMinutos} minutos e {qtdSegundos} segundos.</Text>
)
}
}
renderRow(tarefas){
if(tarefas.tarefaPrioritaria == 'Não'){
return (
<View style={{ marginTop: 2}}>
<View style={styles.container2}>
<View style={styles.mantem}>
<Text style={styles.desc}>{tarefas.descricao}</Text>
<Text style={styles.obs}>{this.obsTarefa(tarefas.observacoes)}</Text>
<Text style={styles.inicio}>Iniciada em: {moment(tarefas.dataInicioTarefa).locale('pt-br').format('ddd, D [de] MMMM HH:mm')} </Text>
<Text style={styles.inicio}>Finalizada em: {moment(tarefas.dataTerminoTarefa).locale('pt-br').format('ddd, D [de] MMMM HH:mm')}</Text>
{this.tempoGasto(tarefas.qtdDias,tarefas.qtdHoras, tarefas.qtdMinutos, tarefas.qtdSegundos)}
</View>
<View style={ { marginRight: 10}}>
<TouchableOpacity style={styles.manter} onPress={() => this._reiniciaTarefa(tarefas.uid,
tarefas.dataInicioTarefa,
tarefas.descricao,
tarefas.grauDaTarefa,
tarefas.nomeUsuario,
tarefas.observacoes,
tarefas.qtdDias,
tarefas.qtdHoras,
tarefas.qtdMinutos,
tarefas.qtdSegundos,
tarefas.tarefaPrioritaria)}>
<Icon name='undo' size={25} color='green'/>
<Text style={ { marginTop: 3, marginLeft: 2}}>Reiniciar</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.manter2} onPress={() => { this.setState({ showExcTask: true }), this.atualizaId(tarefas.uid)}}>
<Icon name='trash' size={25} color='red'/>
<Text style={ { marginTop: 5, marginLeft: 2}}>Excluir</Text>
</TouchableOpacity>
</View>
</View>
</View>
)
}else{
return (
<View style={{ marginTop: 2}}>
<Text style={styles.tarefaPri}>Tarefa prioritária.</Text>
<View style={styles.container2}>
<View style={styles.mantem}>
<Text style={styles.desc}>{tarefas.descricao}</Text>
<Text style={styles.obs}>{this.obsTarefa(tarefas.observacoes)}</Text>
<Text style={styles.inicio}>Iniciada em: {moment(tarefas.dataInicioTarefa).locale('pt-br').format('ddd, D [de] MMMM HH:mm')} </Text>
<Text style={styles.inicio}>Finalizada em: {moment(tarefas.dataTerminoTarefa).locale('pt-br').format('ddd, D [de] MMMM HH:mm')}</Text>
{this.tempoGasto(tarefas.qtdDias,tarefas.qtdHoras, tarefas.qtdMinutos, tarefas.qtdSegundos)}
</View>
<View style={ { marginRight: 10}}>
<TouchableOpacity style={styles.manter} onPress={() => this._reiniciaTarefa(tarefas.uid,
tarefas.dataInicioTarefa,
tarefas.descricao,
tarefas.grauDaTarefa,
tarefas.nomeUsuario,
tarefas.observacoes,
tarefas.qtdDias,
tarefas.qtdHoras,
tarefas.qtdMinutos,
tarefas.qtdSegundos,
tarefas.tarefaPrioritaria)}>
<Icon name='undo' size={25} color='green'/>
<Text style={ { marginTop: 3, marginLeft: 2}}>Reiniciar</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.manter2} onPress={() => { this.setState({ showExcTask: true }), this.atualizaId(tarefas.uid)}}>
<Icon name='trash' size={25} color='red'/>
<Text style={ { marginTop: 5, marginLeft: 2}}>Excluir</Text>
</TouchableOpacity>
</View>
</View>
</View>
)
}
}
render() {
//const options = { email: this.props.email}
return (
<View style = {styles.container}>
<ModalExcluirTarefaConcluida isVisible={this.state.showExcTask}
onSave={this.fechamodal}
onCancel={() => this.setState({showExcTask: false})} />
<View style = {styles.background}>
<View style = {styles.botaoMenu}>
<TouchableOpacity onPress={() => this.props.navigation.openDrawer()}>
<Icon name='bars' size={25} color='white'/>
</TouchableOpacity>
</View>
<View style={styles.titleBar}>
<Text style={styles.title}>Tarefas Concluidas.</Text>
<Text style={styles.subtitle}>
{moment().locale('pt-br').format('ddd, D [de] MMMM HH:mm')}
</Text>
</View>
</View>
<View style={styles.taskContainer}>
<ListView
dataSource = {this.fonteDeDados}
renderRow = {data => this.renderRow(data)}
enableEmptySections={true}
/>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
tarefaPri: {
textAlign: 'center',
fontSize: 18,
color: '#FF6347',
marginTop: 4
},
background: {
flex: 2.5,
//width: '100%',
backgroundColor: '#084d6e'
},
manter: {
marginTop: 30,
flexDirection: 'row'
},
manter2: {
flexDirection: 'row',
marginTop: 5,
marginBottom: 5
},
container2: {
flexDirection: 'row',
borderBottomWidth: 1,
borderColor: '#AAA',
justifyContent: 'space-between',
},
titleBar: {
flex: 1,
justifyContent: 'flex-end'
},
title: {
color: "#FFF",
fontSize: 30,
marginLeft: 20,
marginBottom: 10,
marginTop: 40
},
subtitle: {
color: "#FFF",
fontSize: 20,
marginLeft: 22,
marginBottom: 30
},
taskContainer: {
flex: 5,
},
botaoMenu: {
marginLeft: 20,
marginTop: 10
},
desc: {
color: '#555',
fontSize: 20,
marginLeft: 10
},
obs: {
color: '#555',
fontSize: 16,
marginLeft: 10
},
inicio: {
color: '#555',
fontSize: 14,
marginLeft: 10
},
button: {
backgroundColor: '#080',
marginTop: 5,
padding: 5,
color: '#fff',
},
btnExcluir: {
backgroundColor: '#ff4040',
marginTop: 5,
padding: 5,
color: '#fff',
},
mantem: {
width: '75%',
},
})
const mapStateToProps = state => {
const tarefas = _.map(state.ListaTarefasConcluidasReducer, (val, uid) => {
return { ...val, uid }
})
return{
idTarefa: state.tarefasReducer.uid,
tarefas: tarefas.reverse()
}
}
export default connect(mapStateToProps, {tarefasUsuarioFetchConcluidas, ExcluirTarefaConcluida,reiniciarTarefa, modificaUID})(TarefasConcluidas)
//export default Inicio