|
@@ -22,6 +22,7 @@ import { ButtonVariants } from 'src/types/components';
|
|
|
import Navigation from './Navigation';
|
|
import Navigation from './Navigation';
|
|
|
import { CheckBox } from 'src/components';
|
|
import { CheckBox } from 'src/components';
|
|
|
import TransitSvg from 'assets/icons/transit.svg';
|
|
import TransitSvg from 'assets/icons/transit.svg';
|
|
|
|
|
+import Tooltip from 'react-native-walkthrough-tooltip';
|
|
|
|
|
|
|
|
export default function RangeCalendar({
|
|
export default function RangeCalendar({
|
|
|
isModalVisible,
|
|
isModalVisible,
|
|
@@ -60,6 +61,7 @@ export default function RangeCalendar({
|
|
|
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 [transit, setTransit] = useState<boolean | undefined>(undefined);
|
|
|
|
|
+ const [toolTipVisible, setToolTipVisible] = useState<boolean>(false);
|
|
|
|
|
|
|
|
const computedMinDate = externalMinDate
|
|
const computedMinDate = externalMinDate
|
|
|
? dayjs(externalMinDate)
|
|
? dayjs(externalMinDate)
|
|
@@ -301,7 +303,33 @@ export default function RangeCalendar({
|
|
|
gap: 8
|
|
gap: 8
|
|
|
}}
|
|
}}
|
|
|
>
|
|
>
|
|
|
- <TransitSvg fill={Colors.DARK_BLUE} height={24} width={24} />
|
|
|
|
|
|
|
+ <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
|
|
<CheckBox
|
|
|
onChange={(value) => setTransit(!transit)}
|
|
onChange={(value) => setTransit(!transit)}
|
|
|
value={transit}
|
|
value={transit}
|