123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115 |
- // @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));
|