You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
loop/react-native/src/components/ListHabits/HabitListHeader.js

98 lines
2.4 KiB

/*
* Copyright (C) 2016-2019 Álinson Santos Xavier <isoron@gmail.com>
* Copyright (C) 2019 Javier Artiles
*
* This file is part of Loop Habit Tracker.
*
* Loop Habit Tracker is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by the
* Free Software Foundation, either version 3 of the License, or (at your
* option) any later version.
*
* Loop Habit Tracker is distributed in the hope that it will be useful, but
* WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
* or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
* more details.
*
* You should have received a copy of the GNU General Public License along
* with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import React from 'react';
import { View, StyleSheet, Text } from 'react-native';
import { Colors } from '../../helpers/Colors';
const styles = StyleSheet.create({
container: {
height: 55,
paddingRight: 1,
backgroundColor: Colors.headerBackground,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'flex-end',
elevation: 4,
borderBottomColor: Colors.headerBorderColor,
borderBottomWidth: StyleSheet.hairlineWidth,
},
column: {
width: 55,
alignItems: 'center',
},
text: {
color: Colors.headerTextColor,
fontWeight: 'bold',
},
dayName: {
fontSize: 12,
},
dayNumber: {
fontSize: 12,
},
});
export default class HabitListHeader extends React.Component {
static renderColumn(dayName, dayNumber) {
return (
<View
key={dayNumber}
style={styles.column}
>
<Text style={[styles.text, styles.dayName]}>
{dayName.toUpperCase()}
</Text>
<Text style={[styles.text, styles.dayNumber]}>
{dayNumber}
</Text>
</View>
);
}
static renderColumns() {
return [
{
dayName: 'Sat',
dayNumber: '5',
},
{
dayName: 'Fri',
dayNumber: '4',
},
{
dayName: 'Thu',
dayNumber: '3',
},
].map((day) => {
const { dayName, dayNumber } = day;
return HabitListHeader.renderColumn(dayName, dayNumber);
});
}
render() {
return (
<View style={styles.container}>
{HabitListHeader.renderColumns()}
</View>
);
}
}