104 lines
3.7 KiB
JavaScript
104 lines
3.7 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',
|
|
},
|
|
});
|