forked from vergnet/application-amicale
115 lines
4.6 KiB
JavaScript
115 lines
4.6 KiB
JavaScript
// @flow
|
|
|
|
import * as React from 'react';
|
|
import {Button, Caption, Card, Headline, Paragraph, withTheme} from 'react-native-paper';
|
|
import {Collapsible} from "react-navigation-collapsible";
|
|
import {withCollapsible} from "../../../utils/withCollapsible";
|
|
import {StackNavigationProp} from "@react-navigation/stack";
|
|
import type {CustomTheme} from "../../../managers/ThemeManager";
|
|
import type {Device} from "./EquipmentListScreen";
|
|
import {Animated, View} from "react-native";
|
|
import i18n from "i18n-js";
|
|
import {getRelativeDateString} from "../../../utils/EquipmentBooking";
|
|
|
|
type Props = {
|
|
navigation: StackNavigationProp,
|
|
route: {
|
|
params?: {
|
|
item?: Device,
|
|
dates: [string, string]
|
|
},
|
|
},
|
|
theme: CustomTheme,
|
|
collapsibleStack: Collapsible,
|
|
}
|
|
|
|
|
|
class EquipmentConfirmScreen extends React.Component<Props> {
|
|
|
|
item: Device | null;
|
|
dates: [string, string] | null;
|
|
|
|
constructor(props: Props) {
|
|
super(props);
|
|
if (this.props.route.params != null) {
|
|
if (this.props.route.params.item != null)
|
|
this.item = this.props.route.params.item;
|
|
else
|
|
this.item = null;
|
|
if (this.props.route.params.dates != null)
|
|
this.dates = this.props.route.params.dates;
|
|
else
|
|
this.dates = null;
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const {containerPaddingTop, scrollIndicatorInsetTop, onScroll} = this.props.collapsibleStack;
|
|
const item = this.item;
|
|
const dates = this.dates;
|
|
if (item != null && dates != null) {
|
|
const start = new Date(dates[0]);
|
|
const end = new Date(dates[1]);
|
|
return (
|
|
<Animated.ScrollView
|
|
// Animations
|
|
onScroll={onScroll}
|
|
contentContainerStyle={{
|
|
paddingTop: containerPaddingTop,
|
|
minHeight: '100%'
|
|
}}
|
|
scrollIndicatorInsets={{top: scrollIndicatorInsetTop}}>
|
|
<Card style={{margin: 5}}>
|
|
<Card.Content>
|
|
<View style={{flex: 1}}>
|
|
<View style={{
|
|
marginLeft: "auto",
|
|
marginRight: "auto",
|
|
flexDirection: "row",
|
|
flexWrap: "wrap",
|
|
}}>
|
|
<Headline style={{textAlign: "center"}}>
|
|
{item.name}
|
|
</Headline>
|
|
<Caption style={{
|
|
textAlign: "center",
|
|
lineHeight: 35,
|
|
marginLeft: 10,
|
|
}}>
|
|
({i18n.t('screens.equipment.bail', {cost: item.caution})})
|
|
</Caption>
|
|
</View>
|
|
</View>
|
|
<Button
|
|
icon={"check-circle-outline"}
|
|
color={this.props.theme.colors.success}
|
|
mode="text"
|
|
>
|
|
{
|
|
start == null
|
|
? i18n.t('screens.equipment.booking')
|
|
: end != null && start.getTime() !== end.getTime()
|
|
? i18n.t('screens.equipment.bookingPeriod', {
|
|
begin: getRelativeDateString(start),
|
|
end: getRelativeDateString(end)
|
|
})
|
|
: i18n.t('screens.equipment.bookingDay', {
|
|
date: getRelativeDateString(start)
|
|
})
|
|
}
|
|
</Button>
|
|
<Paragraph style={{textAlign: "center"}}>
|
|
{i18n.t("screens.equipment.bookingConfirmedMessage")}
|
|
</Paragraph>
|
|
</Card.Content>
|
|
</Card>
|
|
</Animated.ScrollView>
|
|
);
|
|
} else
|
|
return null;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
export default withCollapsible(withTheme(EquipmentConfirmScreen));
|