react-native-time-date-picker
Version:
Easy to use time and date picker with lots of options for React Native.
62 lines • 2.44 kB
JavaScript
import React, { useState, useMemo } from "react";
import { View, Text } from "react-native";
import moment from "moment";
import RNBounceable from "@freakycoder/react-native-bounceable";
import { styles } from "./Days.style";
import { defaultOptions, useCalendar } from "../../TimeDatePicker";
const Days = () => {
const { state, utils, options = defaultOptions, onDateChange, } = useCalendar();
const [mainState, setMainState] = state;
const [itemSize, setItemSize] = useState(0);
const style = styles(options);
// @ts-ignore
// eslint-disable-next-line react-hooks/exhaustive-deps
const days = useMemo(() => utils.getMonthDays(mainState.activeDate));
const onSelectDay = (date) => {
setMainState({
type: "set",
selectedDate: date,
});
onDateChange?.(date);
};
// @ts-ignore
const changeItemHeight = ({ nativeEvent }) => {
const { width } = nativeEvent.layout;
!itemSize && setItemSize(width / 7 - 0.5);
};
return (<View style={[style.container, { flexDirection: "row" }]} onLayout={changeItemHeight}>
{days.map((day, index) => {
let isSameDay = false;
let isToday = false;
const today = moment().valueOf();
if (day?.date) {
isSameDay = moment(mainState.selectedDate).isSame(day.date, "day");
isToday = moment(today).isSame(day.date, "day");
}
return (<View key={index} style={{
width: itemSize,
height: itemSize,
}}>
{day && (<RNBounceable style={[
style.dayItem,
{
borderRadius: itemSize / 2,
},
options.daysStyle,
isToday && style.dayTodayItem,
isSameDay && style.dayItemSelected,
]} onPress={() => !day.disabled && onSelectDay(day.date)}>
<Text style={[
style.dayText,
isSameDay && style.dayTextSelected,
day.disabled && style.dayTextDisabled,
]}>
{day.dayString}
</Text>
</RNBounceable>)}
</View>);
})}
</View>);
};
export { Days };
//# sourceMappingURL=Days.js.map