|
@@ -1,5 +1,5 @@
|
|
|
import React, { useEffect, useState } from 'react';
|
|
import React, { useEffect, useState } from 'react';
|
|
|
-import { TouchableOpacity, View, Text } from 'react-native';
|
|
|
|
|
|
|
+import { View } from 'react-native';
|
|
|
import { Modal } from '../../Modal';
|
|
import { Modal } from '../../Modal';
|
|
|
import DateTimePicker, { DateType } from 'react-native-ui-datepicker';
|
|
import DateTimePicker, { DateType } from 'react-native-ui-datepicker';
|
|
|
import dayjs from 'dayjs';
|
|
import dayjs from 'dayjs';
|
|
@@ -20,9 +20,6 @@ import { Colors } from '../../../theme';
|
|
|
import { Button } from 'src/components/Button';
|
|
import { Button } from 'src/components/Button';
|
|
|
import { ButtonVariants } from 'src/types/components';
|
|
import { ButtonVariants } from 'src/types/components';
|
|
|
import Navigation from './Navigation';
|
|
import Navigation from './Navigation';
|
|
|
-import { CheckBox } from 'src/components';
|
|
|
|
|
-import TransitSvg from 'assets/icons/transit.svg';
|
|
|
|
|
-import Tooltip from 'react-native-walkthrough-tooltip';
|
|
|
|
|
|
|
|
|
|
export default function RangeCalendar({
|
|
export default function RangeCalendar({
|
|
|
isModalVisible,
|
|
isModalVisible,
|
|
@@ -35,12 +32,10 @@ export default function RangeCalendar({
|
|
|
minDate: externalMinDate,
|
|
minDate: externalMinDate,
|
|
|
maxDate: externalMaxDate,
|
|
maxDate: externalMaxDate,
|
|
|
initialStartDate,
|
|
initialStartDate,
|
|
|
- initialEndDate,
|
|
|
|
|
- withTransit = false,
|
|
|
|
|
- isTransit = false
|
|
|
|
|
|
|
+ initialEndDate
|
|
|
}: {
|
|
}: {
|
|
|
isModalVisible: boolean;
|
|
isModalVisible: boolean;
|
|
|
- closeModal: (startDate?: string | null, endDate?: string | null, transit?: boolean) => void;
|
|
|
|
|
|
|
+ closeModal: (startDate?: string | null, endDate?: string | null) => void;
|
|
|
allowRangeSelection?: boolean;
|
|
allowRangeSelection?: boolean;
|
|
|
disableFutureDates?: boolean;
|
|
disableFutureDates?: boolean;
|
|
|
disablePastDates?: boolean;
|
|
disablePastDates?: boolean;
|
|
@@ -50,8 +45,6 @@ export default function RangeCalendar({
|
|
|
maxDate?: string | Date | dayjs.Dayjs;
|
|
maxDate?: string | Date | dayjs.Dayjs;
|
|
|
initialStartDate?: string | null;
|
|
initialStartDate?: string | null;
|
|
|
initialEndDate?: string | null;
|
|
initialEndDate?: string | null;
|
|
|
- withTransit?: boolean;
|
|
|
|
|
- isTransit?: boolean;
|
|
|
|
|
}) {
|
|
}) {
|
|
|
const [selectedStartDate, setSelectedStartDate] = useState<string | null>(null);
|
|
const [selectedStartDate, setSelectedStartDate] = useState<string | null>(null);
|
|
|
const [selectedEndDate, setSelectedEndDate] = useState<string | null>(null);
|
|
const [selectedEndDate, setSelectedEndDate] = useState<string | null>(null);
|
|
@@ -60,7 +53,6 @@ export default function RangeCalendar({
|
|
|
const [endDate, setEndDate] = useState<DateType>(undefined);
|
|
const [endDate, setEndDate] = useState<DateType>(undefined);
|
|
|
const [currentMonth, setCurrentMonth] = useState<number | undefined>(undefined);
|
|
const [currentMonth, setCurrentMonth] = useState<number | undefined>(undefined);
|
|
|
const [currentYear, setCurrentYear] = useState<number | undefined>(undefined);
|
|
const [currentYear, setCurrentYear] = useState<number | undefined>(undefined);
|
|
|
- const [transit, setTransit] = useState<boolean | undefined>(undefined);
|
|
|
|
|
const [toolTipVisible, setToolTipVisible] = useState<boolean>(false);
|
|
const [toolTipVisible, setToolTipVisible] = useState<boolean>(false);
|
|
|
|
|
|
|
|
const computedMinDate = externalMinDate
|
|
const computedMinDate = externalMinDate
|
|
@@ -88,9 +80,6 @@ export default function RangeCalendar({
|
|
|
setSelectedEndDate(initialEndDate);
|
|
setSelectedEndDate(initialEndDate);
|
|
|
setEndDate(dayjs(initialEndDate));
|
|
setEndDate(dayjs(initialEndDate));
|
|
|
}
|
|
}
|
|
|
- if (withTransit) {
|
|
|
|
|
- setTransit(isTransit);
|
|
|
|
|
- }
|
|
|
|
|
} else if (selectedDate) {
|
|
} else if (selectedDate) {
|
|
|
const dateObj = dayjs(selectedDate);
|
|
const dateObj = dayjs(selectedDate);
|
|
|
setSelectedStartDate(selectedDate);
|
|
setSelectedStartDate(selectedDate);
|
|
@@ -155,7 +144,7 @@ export default function RangeCalendar({
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
const handleClose = () => {
|
|
const handleClose = () => {
|
|
|
- closeModal(selectedStartDate, selectedEndDate, transit);
|
|
|
|
|
|
|
+ closeModal(selectedStartDate, selectedEndDate);
|
|
|
setSelectedStartDate(null);
|
|
setSelectedStartDate(null);
|
|
|
setSelectedEndDate(null);
|
|
setSelectedEndDate(null);
|
|
|
setStartDate(undefined);
|
|
setStartDate(undefined);
|
|
@@ -293,50 +282,6 @@ export default function RangeCalendar({
|
|
|
/>
|
|
/>
|
|
|
</View>
|
|
</View>
|
|
|
<View style={styles.modalFooter}>
|
|
<View style={styles.modalFooter}>
|
|
|
- {withTransit ? (
|
|
|
|
|
- <TouchableOpacity
|
|
|
|
|
- onPress={() => setTransit(!transit)}
|
|
|
|
|
- hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
|
|
|
|
|
- style={{
|
|
|
|
|
- flexDirection: 'row',
|
|
|
|
|
- paddingBottom: 16,
|
|
|
|
|
- gap: 8
|
|
|
|
|
- }}
|
|
|
|
|
- >
|
|
|
|
|
- <Tooltip
|
|
|
|
|
- isVisible={toolTipVisible}
|
|
|
|
|
- content={
|
|
|
|
|
- <Text
|
|
|
|
|
- style={{
|
|
|
|
|
- fontSize: 12,
|
|
|
|
|
- color: Colors.DARK_BLUE,
|
|
|
|
|
- fontStyle: 'italic',
|
|
|
|
|
- fontWeight: '600'
|
|
|
|
|
- }}
|
|
|
|
|
- >
|
|
|
|
|
- Transit
|
|
|
|
|
- </Text>
|
|
|
|
|
- }
|
|
|
|
|
- contentStyle={{ backgroundColor: Colors.WHITE }}
|
|
|
|
|
- placement="top"
|
|
|
|
|
- onClose={() => setToolTipVisible(false)}
|
|
|
|
|
- backgroundColor="transparent"
|
|
|
|
|
- allowChildInteraction={false}
|
|
|
|
|
- >
|
|
|
|
|
- <TouchableOpacity
|
|
|
|
|
- onPress={() => setToolTipVisible(true)}
|
|
|
|
|
- hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
|
|
|
|
|
- >
|
|
|
|
|
- <TransitSvg fill={Colors.DARK_BLUE} height={24} width={24} />
|
|
|
|
|
- </TouchableOpacity>
|
|
|
|
|
- </Tooltip>
|
|
|
|
|
- <CheckBox
|
|
|
|
|
- onChange={(value) => setTransit(!transit)}
|
|
|
|
|
- value={transit}
|
|
|
|
|
- color={Colors.DARK_BLUE}
|
|
|
|
|
- />
|
|
|
|
|
- </TouchableOpacity>
|
|
|
|
|
- ) : null}
|
|
|
|
|
<Button
|
|
<Button
|
|
|
children="Done"
|
|
children="Done"
|
|
|
onPress={handleClose}
|
|
onPress={handleClose}
|