forked from vergnet/application-amicale
136 lines
3.7 KiB
TypeScript
136 lines
3.7 KiB
TypeScript
/*
|
|
* Copyright (c) 2019 - 2020 Arnaud Vergnet.
|
|
*
|
|
* This file is part of Campus INSAT.
|
|
*
|
|
* Campus INSAT 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.
|
|
*
|
|
* Campus INSAT 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 Campus INSAT. If not, see <https://www.gnu.org/licenses/>.
|
|
*/
|
|
|
|
import * as React from 'react';
|
|
import {Avatar, List, useTheme} from 'react-native-paper';
|
|
import i18n from 'i18n-js';
|
|
import {StackNavigationProp} from '@react-navigation/stack';
|
|
import type {DeviceType} from '../../../screens/Amicale/Equipment/EquipmentListScreen';
|
|
import {
|
|
getFirstEquipmentAvailability,
|
|
getRelativeDateString,
|
|
isEquipmentAvailable,
|
|
} from '../../../utils/EquipmentBooking';
|
|
|
|
type PropsType = {
|
|
navigation: StackNavigationProp<any>;
|
|
userDeviceRentDates: [string, string];
|
|
item: DeviceType;
|
|
height: number;
|
|
};
|
|
|
|
function EquipmentListItem(props: PropsType) {
|
|
const theme = useTheme();
|
|
const {item, userDeviceRentDates, navigation, height} = props;
|
|
const isRented = userDeviceRentDates != null;
|
|
const isAvailable = isEquipmentAvailable(item);
|
|
const firstAvailability = getFirstEquipmentAvailability(item);
|
|
|
|
let onPress;
|
|
if (isRented) {
|
|
onPress = () => {
|
|
navigation.navigate('equipment-confirm', {
|
|
item,
|
|
dates: userDeviceRentDates,
|
|
});
|
|
};
|
|
} else {
|
|
onPress = () => {
|
|
navigation.navigate('equipment-rent', {item});
|
|
};
|
|
}
|
|
|
|
let description;
|
|
if (isRented) {
|
|
const start = new Date(userDeviceRentDates[0]);
|
|
const end = new Date(userDeviceRentDates[1]);
|
|
if (start.getTime() !== end.getTime()) {
|
|
description = i18n.t('screens.equipment.bookingPeriod', {
|
|
begin: getRelativeDateString(start),
|
|
end: getRelativeDateString(end),
|
|
});
|
|
} else {
|
|
description = i18n.t('screens.equipment.bookingDay', {
|
|
date: getRelativeDateString(start),
|
|
});
|
|
}
|
|
} else if (isAvailable) {
|
|
description = i18n.t('screens.equipment.bail', {cost: item.caution});
|
|
} else {
|
|
description = i18n.t('screens.equipment.available', {
|
|
date: getRelativeDateString(firstAvailability),
|
|
});
|
|
}
|
|
|
|
let icon: string;
|
|
if (isRented) {
|
|
icon = 'bookmark-check';
|
|
} else if (isAvailable) {
|
|
icon = 'check-circle-outline';
|
|
} else {
|
|
icon = 'update';
|
|
}
|
|
|
|
let color: string;
|
|
if (isRented) {
|
|
color = theme.colors.warning;
|
|
} else if (isAvailable) {
|
|
color = theme.colors.success;
|
|
} else {
|
|
color = theme.colors.primary;
|
|
}
|
|
|
|
return (
|
|
<List.Item
|
|
title={item.name}
|
|
description={description}
|
|
onPress={onPress}
|
|
left={() => (
|
|
<Avatar.Icon
|
|
style={{
|
|
backgroundColor: 'transparent',
|
|
}}
|
|
icon={icon}
|
|
color={color}
|
|
/>
|
|
)}
|
|
right={() => (
|
|
<Avatar.Icon
|
|
style={{
|
|
marginTop: 'auto',
|
|
marginBottom: 'auto',
|
|
backgroundColor: 'transparent',
|
|
}}
|
|
size={48}
|
|
icon="chevron-right"
|
|
/>
|
|
)}
|
|
style={{
|
|
height,
|
|
justifyContent: 'center',
|
|
}}
|
|
/>
|
|
);
|
|
}
|
|
|
|
const areEqual = (prevProps: PropsType, nextProps: PropsType): boolean => {
|
|
return nextProps.userDeviceRentDates !== prevProps.userDeviceRentDates;
|
|
};
|
|
|
|
export default React.memo(EquipmentListItem, areEqual);
|