104 lines
3.2 KiB
JavaScript
104 lines
3.2 KiB
JavaScript
|
import React, { Component,PureComponent } from 'react';
|
||
|
|
import PropTypes from 'prop-types';
|
||
|
|
import {StyleSheet,Text,View,FlatList} from 'react-native';
|
||
|
|
import {responsiveFontSize,responsiveWidth,responsiveHeight} from 'react-native-responsive-dimensions';
|
||
|
|
|
||
|
|
export class DrawerItem extends React.PureComponent{
|
||
|
|
|
||
|
|
render(){
|
||
|
|
return (
|
||
|
|
<View style={style.content}>
|
||
|
|
<Text style={style.title}>{this.props.title}</Text>
|
||
|
|
<Text style={style.description}>{this.props.description}</Text>
|
||
|
|
<View style={style.timeContent}>
|
||
|
|
<Text style={style.time}>{this.props.time}</Text>
|
||
|
|
</View>
|
||
|
|
<View style={style.bottomSeparator}/>
|
||
|
|
</View>
|
||
|
|
)
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
export class DrawerListItem extends PureComponent{
|
||
|
|
state = {selected: (new Map(): Map<string, boolean>)};
|
||
|
|
|
||
|
|
_keyExtractor = (item, index) => item.id;
|
||
|
|
|
||
|
|
_onPressItem = (id: string) => {
|
||
|
|
this.setState((state) => {
|
||
|
|
const selected = new Map(state.selected);
|
||
|
|
selected.set(id, !selected.get(id)); // toggle
|
||
|
|
return {selected};
|
||
|
|
});
|
||
|
|
};
|
||
|
|
_renderItem = ({item}) => (
|
||
|
|
<HistoryItem
|
||
|
|
title={item.title}
|
||
|
|
description={item.description}
|
||
|
|
time={item.time}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
|
||
|
|
render() {
|
||
|
|
return (
|
||
|
|
<FlatList
|
||
|
|
data={[{title:'titre de la demande',description:'test description de la demande',time:'Hier'},
|
||
|
|
{title:'titre de la demande',description:'test description de la demande',time:'Hier'},
|
||
|
|
{title:'titre de la demande',description:'test description de la demande',time:'Hier'},
|
||
|
|
{title:'titre de la demande',description:'test description de la demande',time:'Hier'},
|
||
|
|
{title:'titre de la demande',description:'test description de la demande',time:'Hier'},
|
||
|
|
{title:'titre de la demande',description:'test description de la demande',time:'Hier'},
|
||
|
|
{title:'titre de la demande',description:'test description de la demande',time:'Hier'},
|
||
|
|
{title:'titre de la demande',description:'test description de la demande',time:'Hier'},
|
||
|
|
{title:'titre de la demande',description:'test description de la demande',time:'Hier'},
|
||
|
|
{title:'titre de la demande',description:'test description de la demande',time:'Hier'},
|
||
|
|
]}
|
||
|
|
extraData={this.state}
|
||
|
|
keyExtractor={this._keyExtractor}
|
||
|
|
renderItem={this._renderItem}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const style=StyleSheet.create({
|
||
|
|
content:{
|
||
|
|
width:responsiveWidth(100),
|
||
|
|
height:responsiveHeight(12),
|
||
|
|
borderBottomColor: '#FFFFFF',
|
||
|
|
flex:1,
|
||
|
|
flexDirection: 'column',
|
||
|
|
paddingLeft: 10,
|
||
|
|
paddingTop: 10,
|
||
|
|
|
||
|
|
},
|
||
|
|
bottomSeparator:{
|
||
|
|
width:responsiveWidth(80),
|
||
|
|
height:1,
|
||
|
|
justifyContent:'center',
|
||
|
|
alignSelf: 'center',
|
||
|
|
|
||
|
|
backgroundColor:'#4f5b62',
|
||
|
|
},
|
||
|
|
title:{
|
||
|
|
color:'#000',
|
||
|
|
fontSize:responsiveFontSize(2.2)
|
||
|
|
},
|
||
|
|
description:{
|
||
|
|
fontSize:responsiveFontSize(1.8),
|
||
|
|
color:'#4f5b62',
|
||
|
|
|
||
|
|
},
|
||
|
|
timeContent:{
|
||
|
|
justifyContent:'flex-end',
|
||
|
|
flex:1,
|
||
|
|
alignItems: 'flex-end',
|
||
|
|
},
|
||
|
|
time:{
|
||
|
|
fontWeight: 'bold',
|
||
|
|
marginRight: 20,
|
||
|
|
marginBottom: 10,
|
||
|
|
color:'#263238',
|
||
|
|
},
|
||
|
|
});
|