From ee5f427317ba123fd239b62ad05149f5456816e3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Nowecki?= <60387222+Pawel-dev5@users.noreply.github.com> Date: Fri, 13 Jun 2025 13:20:49 +0000 Subject: [PATCH] [FEATURE] Add periods to multiDot type. Add counter of events per day --- src/calendar/day/basic/index.tsx | 325 +++++++++++++------------------ 1 file changed, 135 insertions(+), 190 deletions(-) diff --git a/src/calendar/day/basic/index.tsx b/src/calendar/day/basic/index.tsx index ae251e40b..bf1c9b743 100644 --- a/src/calendar/day/basic/index.tsx +++ b/src/calendar/day/basic/index.tsx @@ -1,201 +1,146 @@ -import React, {Fragment, useCallback, useRef} from 'react'; -import {TouchableOpacity, Text, View, ViewProps} from 'react-native'; -import {xdateToData} from '../../../interface'; -import {Theme, DayState, MarkingTypes, DateData} from '../../../types'; -import Marking, {MarkingProps} from '../marking'; +import React, { Fragment, useCallback, useRef } from 'react'; +import { TouchableOpacity, Text, View } from 'react-native'; +import { xdateToData } from '../../../interface'; +import Marking from '../marking'; import styleConstructor from './style'; - - -export interface BasicDayProps extends ViewProps { - /** Theme object */ - theme?: Theme; - /** The Day's state ('selected' | 'disabled' | 'inactive' | 'today' | '') */ - state?: DayState; - /** The marking object */ - marking?: MarkingProps; - /** Date marking style ('dot' | 'multi-dot' | 'period' | 'multi-period' | 'custom'). Default = 'dot' */ - markingType?: MarkingTypes; - /** onPress callback */ - onPress?: (date?: DateData) => void; - /** onLongPress callback */ - onLongPress?: (date?: DateData) => void; - /** The date to return from press callbacks */ - date?: string; - /** Disable all touch events for disabled days (can be override with disableTouchEvent in markedDates) */ - disableAllTouchEventsForDisabledDays?: boolean; - /** Disable all touch events for inactive days (can be override with disableTouchEvent in markedDates) */ - disableAllTouchEventsForInactiveDays?: boolean; - /** Accessibility label */ - accessibilityLabel?: string; - /** Test ID */ - testID?: string; -} - -const BasicDay = (props: BasicDayProps) => { - const { - theme, - date, - onPress, - onLongPress, - markingType, - marking, - state, - disableAllTouchEventsForDisabledDays, - disableAllTouchEventsForInactiveDays, - accessibilityLabel, - children, - testID - } = props; - const dateData = date ? xdateToData(date) : undefined; - const style = useRef(styleConstructor(theme)); - - const _marking = marking || {}; - const isSelected = _marking.selected || state === 'selected'; - const isDisabled = typeof _marking.disabled !== 'undefined' ? _marking.disabled : state === 'disabled'; - const isInactive = typeof marking?.inactive !== 'undefined' ? marking.inactive : state === 'inactive'; - const isToday = typeof marking?.today !== 'undefined' ? marking.today : state === 'today'; - const isMultiDot = markingType === Marking.markings.MULTI_DOT; - const isMultiPeriod = markingType === Marking.markings.MULTI_PERIOD; - const isCustom = markingType === Marking.markings.CUSTOM; - - const shouldDisableTouchEvent = () => { - const {disableTouchEvent} = _marking; - let disableTouch = false; - - if (typeof disableTouchEvent === 'boolean') { - disableTouch = disableTouchEvent; - } else if (typeof disableAllTouchEventsForDisabledDays === 'boolean' && isDisabled) { - disableTouch = disableAllTouchEventsForDisabledDays; - } else if (typeof disableAllTouchEventsForInactiveDays === 'boolean' && isInactive) { - disableTouch = disableAllTouchEventsForInactiveDays; - } - return disableTouch; - }; - - const getContainerStyle = () => { - const {customStyles, selectedColor} = _marking; - const styles = [style.current.base]; - - if (isSelected) { - styles.push(style.current.selected); - if (selectedColor) { - styles.push({backgroundColor: selectedColor}); - } - } else if (isToday) { - styles.push(style.current.today); - } - - //Custom marking type - if (isCustom && customStyles && customStyles.container) { - if (customStyles.container.borderRadius === undefined) { - customStyles.container.borderRadius = 16; - } - styles.push(customStyles.container); - } - - return styles; - }; - - const getTextStyle = () => { - const {customStyles, selectedTextColor} = _marking; - const styles = [style.current.text]; - - if (isSelected) { - styles.push(style.current.selectedText); - if (selectedTextColor) { - styles.push({color: selectedTextColor}); - } - } else if (isDisabled) { - styles.push(style.current.disabledText); - } else if (isToday) { - styles.push(style.current.todayText); - } else if (isInactive) { - styles.push(style.current.inactiveText); +const BasicDay = (props) => { + const { theme, date, onPress, onLongPress, markingType, marking, state, disableAllTouchEventsForDisabledDays, disableAllTouchEventsForInactiveDays, accessibilityLabel, children, testID } = props; + const dateData = date ? xdateToData(date) : undefined; + const style = useRef(styleConstructor(theme)); + const _marking = marking || {}; + const isSelected = _marking.selected || state === 'selected'; + const isDisabled = typeof _marking.disabled !== 'undefined' ? _marking.disabled : state === 'disabled'; + const isInactive = typeof marking?.inactive !== 'undefined' ? marking.inactive : state === 'inactive'; + const isToday = typeof marking?.today !== 'undefined' ? marking.today : state === 'today'; + const isMultiDot = markingType === Marking.markings.MULTI_DOT; + const isMultiPeriod = markingType === Marking.markings.MULTI_PERIOD; + const isCustom = markingType === Marking.markings.CUSTOM; + const shouldDisableTouchEvent = () => { + const { disableTouchEvent } = _marking; + let disableTouch = false; + if (typeof disableTouchEvent === 'boolean') { + disableTouch = disableTouchEvent; + } + else if (typeof disableAllTouchEventsForDisabledDays === 'boolean' && isDisabled) { + disableTouch = disableAllTouchEventsForDisabledDays; + } + else if (typeof disableAllTouchEventsForInactiveDays === 'boolean' && isInactive) { + disableTouch = disableAllTouchEventsForInactiveDays; + } + return disableTouch; + }; + const getContainerStyle = () => { + const { customStyles, selectedColor, startingDate, endingDate, middleDate } = _marking; + const styles = [style.current.base]; + if (isSelected && !startingDate && !endingDate && !middleDate) { + styles.push(style.current.selected); + if (selectedColor) { + styles.push({ backgroundColor: selectedColor }); + } + } + else if (isToday && !startingDate && !endingDate && !middleDate) { + styles.push(style.current.today); + } + //Custom marking type + if (isCustom && customStyles && customStyles.container) { + if (customStyles.container.borderRadius === undefined) { + customStyles.container.borderRadius = 16; + } + styles.push(customStyles.container); + } + if (startingDate && !endingDate && !middleDate) { + styles.push({ backgroundColor: '#73C8E8', borderTopLeftRadius: 16, borderBottomLeftRadius: 16, width: 50, height: 32, }); + } + if (endingDate && !startingDate && !middleDate) { + styles.push({ backgroundColor: '#73C8E8', borderTopRightRadius: 16, borderBottomRightRadius: 16, width: 50, height: 32, }); + } + if (middleDate) { + styles.push({ backgroundColor: '#73C8E8', width: 50, height: 32, }); + } + if(startingDate && endingDate && !middleDate) { + styles.push({ backgroundColor: '#73C8E8', borderRadius: 16 }); + } + + if(isSelected && (startingDate || endingDate || middleDate)) { + if (selectedColor) { + styles.push({ backgroundColor: selectedColor }); + } + } + + return styles; + }; + const getTextStyle = () => { + const { customStyles, selectedTextColor } = _marking; + const styles = [style.current.text]; + if (isSelected) { + styles.push(style.current.selectedText); + if (selectedTextColor) { + styles.push({ color: selectedTextColor }); + } + } + else if (isDisabled) { + styles.push(style.current.disabledText); + } + else if (isToday) { + styles.push(style.current.todayText); + } + else if (isInactive) { + styles.push(style.current.inactiveText); + } + // Custom marking type + if (isCustom && customStyles && customStyles.text) { + styles.push(customStyles.text); + } + return styles; + }; + const _onPress = useCallback(() => { + onPress?.(dateData); + }, [onPress, date]); + const _onLongPress = useCallback(() => { + onLongPress?.(dateData); + }, [onLongPress, date]); + const renderMarking = () => { + const { marked, dotColor, dots, periods, startingDate, endingDate, middleDate } = _marking; + if(startingDate || endingDate || middleDate) return null; + return (); + }; + + const renderCounter =() => { + const { dots, counter, startingDate, endingDate, middleDate } = _marking; + + if(!dots || dots?.length === 0 || !counter || counter === 0 || startingDate || endingDate || middleDate) return null; + return ( + + 1 ? 8 : 10,paddingLeft:1 }}>{counter} + + ) } - - // Custom marking type - if (isCustom && customStyles && customStyles.text) { - styles.push(customStyles.text); - } - - return styles; - }; - - const _onPress = useCallback(() => { - onPress?.(dateData); - }, [onPress, date]); - - const _onLongPress = useCallback(() => { - onLongPress?.(dateData); - }, [onLongPress, date]); - - const renderMarking = () => { - const {marked, dotColor, dots, periods} = _marking; - - return ( - - ); - }; - - const renderText = () => { - return ( - + const renderText = () => { + return ( {String(children)} - - ); - }; - - const renderContent = () => { - return ( - + ); + }; + const renderContent = () => { + return ( {renderText()} {renderMarking()} - - ); - }; - - const renderContainer = () => { - const {activeOpacity} = _marking; - - return ( - + {renderCounter()} + ); + }; + const renderContainer = () => { + const { activeOpacity } = _marking; + return ( {isMultiPeriod ? renderText() : renderContent()} - - ); - }; - - const renderPeriodsContainer = () => { - return ( - + ); + }; + const renderPeriodsContainer = () => { + return ( {renderContainer()} {renderMarking()} - - ); - }; - - return isMultiPeriod ? renderPeriodsContainer() : renderContainer(); + {renderCounter()} + ); + }; + return isMultiPeriod ? renderPeriodsContainer() : renderContainer(); }; - export default BasicDay; BasicDay.displayName = 'BasicDay';