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 | 5x 83x 83x 83x 166x 166x 166x 24x | import { Pressable, Text, View } from "react-native";
import { TIME_SLOT_OPTIONS } from "./constants";
import { useStyles } from "./styles";
import type { DatePickerTimeSlot } from "./types";
type DatePickerStyles = ReturnType<typeof useStyles>;
interface DatePickerTimeOffSlotState {
disabled: boolean;
value: DatePickerTimeSlot;
isOptionDisabled: (slot: DatePickerTimeSlot) => boolean;
onSelect: (slot: DatePickerTimeSlot) => void;
}
interface DatePickerTimeOffSummary {
dateText: string;
valueText: string;
}
interface DatePickerTimeOffSectionProps {
slotState: DatePickerTimeOffSlotState;
summary: DatePickerTimeOffSummary;
styles: DatePickerStyles;
isShowHalfDay?: boolean;
}
export const DatePickerTimeOffSection = ({
slotState,
summary,
styles,
isShowHalfDay = true,
}: DatePickerTimeOffSectionProps) => {
const { disabled, value, isOptionDisabled, onSelect } = slotState;
const { dateText, valueText } = summary;
return (
<>
<View style={styles.divider} />
<View style={styles.slotContainer}>
{isShowHalfDay &&
TIME_SLOT_OPTIONS.map((slotOption) => {
const isActive = value === slotOption.value;
const isDisabledSlot = disabled || isOptionDisabled(slotOption.value);
return (
<Pressable
key={slotOption.value}
style={[
styles.slotButton,
isActive && !isDisabledSlot && styles.slotButtonActive,
isDisabledSlot && styles.slotButtonDisabled,
]}
onPress={() => onSelect(slotOption.value)}
disabled={isDisabledSlot}
testID={`time-slot-${slotOption.value}`}
>
<Text
style={[
styles.slotText,
isActive && !isDisabledSlot && styles.slotTextActive,
isDisabledSlot && styles.slotTextDisabled,
]}
>
{slotOption.label}
</Text>
</Pressable>
);
})}
</View>
{isShowHalfDay && <View style={styles.divider} />}
<View style={styles.summaryContainer}>
<Text style={styles.summaryDate} numberOfLines={1} testID="calendar-date-infor">
{dateText}
</Text>
{isShowHalfDay && (
<Text style={styles.summaryDaysOff} testID="calendar-date-range-infor">
{valueText}
</Text>
)}
</View>
</>
);
};
|