react-native-tx-modern-datetimepicker/src/datePicker/components/Days.js

Fix bugs and improve for lib: HosseinShabani/react-native-modern-datepicker. A customizable calendar, time & month picker for React Native

import React, { useState, useMemo } from 'react'
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native'

import { useCalendar } from '../DatePicker'

const Days = () => {
	const { options, state, utils, onDateChange } = useCalendar()
	const [mainState, setMainState] = state
	const [itemSize, setItemSize] = useState(0)
	const style = styles(options)
	const days = useMemo(() => utils.getMonthDays(mainState.activeDate))

	const onSelectDay = (date) => {
		let arr = (mainState.selectedDate ?? '').split(' ')
		arr[0] = (date ?? '').split(' ')[0]
		let newDate = arr.join(' ')
		setMainState({
			type: 'set',
			selectedDate: newDate,
		})
		onDateChange(utils.getFormated(utils.getDate(date), 'dateFormat'))
	}

	const changeItemHeight = ({ nativeEvent }) => {
		const { width } = nativeEvent.layout
		!itemSize && setItemSize((width / 7).toFixed(2) * 1 - 0.5)
	}

	return (
		<View style={[style.container, utils.flexDirection]} onLayout={changeItemHeight}>
			{days.map((day, n) => (
				<View
					key={n}
					style={{
						width: itemSize,
						height: itemSize,
					}}
				>
					{day && (
						<TouchableOpacity
							style={[
								style.dayItem,
								{
									borderRadius: itemSize / 2,
								},
								utils.compareDate(mainState.selectedDate, day.date) && style.dayItemSelected,
							]}
							onPress={() => !day.disabled && onSelectDay(day.date)}
							activeOpacity={0.8}
						>
							<Text
								style={[
									style.dayText,
									day.isToday && style.dayToday,
									utils.compareDate(mainState.selectedDate, day.date) && style.dayTextSelected,
									day.disabled && style.dayTextDisabled,
								]}
							>
								{day.dayString}
							</Text>
						</TouchableOpacity>
					)}
				</View>
			))}
		</View>
	)
}

const styles = (theme) =>
	StyleSheet.create({
		container: {
			width: '100%',
			height: '100%',
			flexWrap: 'wrap',
		},
		dayItem: {
			flex: 1,
			justifyContent: 'center',
			alignItems: 'center',
			margin: 3,
			...theme.viewDayItemStyle,
		},
		dayItemSelected: {
			backgroundColor: theme.mainColor,
			...theme.viewDayItemSelectedStyle,
		},
		dayText: {
			fontFamily: theme.defaultFont,
			fontSize: theme.textFontSize,
			color: theme.textDefaultColor,
			textAlign: 'center',
			width: '100%',
			...theme.textDayStyle,
		},
		dayTextSelected: {
			color: theme.selectedTextColor,
			fontFamily: theme.headerFont,
			...theme.textDaySelectedStyle,
		},
		dayToday: {
			color: theme.mainColor,
			...theme.textTodayStyle,
		},
		dayTextDisabled: {
			opacity: 0.2,
		},
	})

export { Days }