Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 | 1x 8x 8x 8x 8x 8x 8x 8x | import React, { memo, useMemo } from 'react';
import { Pressable, ScrollView } from 'react-native';
import { ChooseDateShell } from '@repo/ui/components/ChooseDateShell';
import {
DATE_PICKER_MODE,
DATE_PICKER_MODE_TYPE,
DatePicker,
} from '@repo/ui/components/DatePicker';
import { QuickSelect } from '@repo/ui/components/QuickSelect';
import { MoreIcon } from '@repo/ui/icons/More';
import { makeStyles } from '@repo/ui/themes/makeStyles';
import { useTheme } from '@repo/ui/themes/ThemeContext';
import { DateInfo } from '@/components/DateInfo';
import { useChooseDate } from './hooks/useChooseDate';
const ChooseDate = () => {
const styles = useStyles();
const { theme } = useTheme();
const {
state: {
isOpenDatePicker,
selectedValue,
quickSelectValue,
quickSelectOptions,
datePickerValue,
datePickerTimeSlot,
datePickerRangeStartTimeSlot,
datePickerRangeEndTimeSlot,
datePickerActiveRangeSelection,
summaryDateText,
summaryValueText,
},
calendar: { disabledDates },
actions: {
toggleDatePicker,
handleChangeQuickSelect,
handleSelectDate,
handleConfirm,
},
} = useChooseDate();
const datePickerRange = useMemo(
() => ({
startDate: datePickerValue.startDate,
endDate: datePickerValue.endDate,
}),
[datePickerValue.startDate, datePickerValue.endDate],
);
return (
<>
<ScrollView
style={styles.container}
contentContainerStyle={styles.contentContainer}
>
<DateInfo
summaryDateText={summaryDateText}
summaryValueText={summaryValueText}
/>
<QuickSelect
options={quickSelectOptions}
value={quickSelectValue}
onChange={handleChangeQuickSelect}
testID="choose-date-quick-select"
/>
<Pressable
onPress={toggleDatePicker}
style={styles.moreIcon}
accessibilityRole="button"
testID="more-btn"
>
<MoreIcon color={theme.colors.icon.brand} />
</Pressable>
</ScrollView>
<ChooseDateShell
isOpen={isOpenDatePicker}
onClose={toggleDatePicker}
onConfirm={handleConfirm}
isConfirmDisabled={
!datePickerValue.startDate || !datePickerValue.endDate
}
headerTitle="TIME OFF"
headerDescription="I have scheduled time off"
headerImage={theme.assets.timeOffMascot}
>
<DatePicker
key={`${isOpenDatePicker}-${(selectedValue || datePickerValue).startDate?.getTime()}-${(selectedValue || datePickerValue).endDate?.getTime()}-${(selectedValue || datePickerValue).timeSlot}`}
mode={DATE_PICKER_MODE.RANGE}
modeType={DATE_PICKER_MODE_TYPE.DATE_WITH_TIME_OFF}
range={datePickerRange}
rangeStartTimeSlot={datePickerRangeStartTimeSlot}
rangeEndTimeSlot={datePickerRangeEndTimeSlot}
activeRangeSelection={datePickerActiveRangeSelection}
timeSlot={datePickerTimeSlot || undefined}
textForTimeSlot="off"
disabledDates={disabledDates}
onConfirm={handleSelectDate}
/>
</ChooseDateShell>
</>
);
};
const useStyles = makeStyles(theme => ({
container: {
flex: 1,
backgroundColor: theme.colors.background.pageMuted,
},
contentContainer: {
paddingHorizontal: theme.metrics.spacing[4],
gap: theme.metrics.spacing[6],
paddingTop: theme.metrics.spacing[4],
paddingBottom: theme.metrics.spacing[6],
},
moreIcon: {
borderRadius: theme.metrics.borderRadius.pill,
width: theme.metrics.spacing[15],
height: theme.metrics.spacing[15],
},
}));
export default memo(ChooseDate);
|