From 2b949632e810a269d10008f91f5fb54e6297bcd3 Mon Sep 17 00:00:00 2001 From: Saad Awan <71684740+saadlatif75@users.noreply.github.com> Date: Mon, 28 Aug 2023 21:47:01 +0500 Subject: [PATCH 1/5] Range Selection with Multiple Dot --- CalendarPicker/Day.js | 70 ++++++++++++++++--- CalendarPicker/DaysGridView.js | 39 ++++++----- .../__tests__/CalendarPicker-test.js | 1 + CalendarPicker/index.js | 28 ++++++-- CalendarPicker/makeStyles.js | 47 +++++++------ 5 files changed, 133 insertions(+), 52 deletions(-) diff --git a/CalendarPicker/Day.js b/CalendarPicker/Day.js index f79b6183..767d360e 100644 --- a/CalendarPicker/Day.js +++ b/CalendarPicker/Day.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useEffect, useState } from 'react'; import { View, Text, @@ -7,7 +7,8 @@ import { import PropTypes from 'prop-types'; import moment from 'moment'; -export default function Day(props) { + function Day(props) { + const [CurrentMonthDays, setCurrentMonthDays] = useState([]) const { day, month, @@ -35,12 +36,29 @@ export default function Day(props) { disabledDatesTextStyle, minRangeDuration, maxRangeDuration, - enableDateChange + enableDateChange, + dotsData, + monthDays, + monthDates } = props; + const thisDay = moment({year, month, day, hour: 12 }); +useEffect(() => { + function getDatesArrayForCurrentMonth() { + const daysInMonth = moment({ year: year, month: month }).daysInMonth(); + const datesArray = []; + + for (let day = 1; day <= daysInMonth; day++) { + datesArray.push(moment({ year: year, month: month, day })); + } + monthDates && monthDates(datesArray) + return datesArray; + } - const thisDay = moment({year, month, day, hour: 12 }); - const today = moment(); + getDatesArrayForCurrentMonth() +}, []) +// monthDays(CurrentMonthDays) + const today = moment(); let dateOutOfRange; let computedSelectedDayStyle = styles.dayButton; // may be overridden depending on state let selectedDayTextStyle = {}; @@ -101,8 +119,9 @@ export default function Day(props) { dateRangeLessThanMin = true; } } +const matchingDots = dotsData?.filter(dot => dot.day === day && dot.month === month && dot.year === year); - dateOutOfRange = dateIsAfterMax || dateIsBeforeMin || dateIsDisabled || dateRangeLessThanMin || dateRangeGreaterThanMax; +dateOutOfRange = dateIsAfterMax || dateIsBeforeMin || dateIsDisabled || dateRangeLessThanMin || dateRangeGreaterThanMax; let isThisDaySameAsSelectedStart = thisDay.isSame(selectedStartDate, 'day'); let isThisDaySameAsSelectedEnd = thisDay.isSame(selectedEndDate, 'day'); @@ -180,7 +199,6 @@ export default function Day(props) { overrideOutOfRangeTextStyle = selectedRangeStartTextStyle; } } - if (dateOutOfRange) { // start or end date selected, and this date outside of range. return ( @@ -192,7 +210,15 @@ export default function Day(props) { ]}> { day } - + + + {matchingDots?.length > 0 && ( + + {matchingDots[0].colors.slice(0, matchingDots[0].value).map((color, index) => ( + + ))} + + )} ); } else { @@ -205,11 +231,23 @@ export default function Day(props) { { day } + + {matchingDots?.length > 0 && ( + + {matchingDots[0].colors.slice(0, matchingDots[0].value).map((color, index) => ( + + ))} + + )} + + {/* {saad} */} + ); } } + else { // dateOutOfRange = true, and no selected start or end date. const custom = getCustomDateStyle({customDatesStyles, date: thisDay}); // Allow customDatesStyles to override disabled dates if allowDisabled set @@ -225,6 +263,17 @@ export default function Day(props) { { day } + {matchingDots?.length > 0 && ( + + {matchingDots[0].colors.slice(0, matchingDots[0].value).map((color, index) => ( + + ))} + + )} + + + + {/* { saad} */} ); } @@ -245,8 +294,12 @@ function getCustomDateStyle({customDatesStyles, date}) { return {}; } + Day.defaultProps = { customDatesStyles: [], + dotsData : [], + monthDates:(item)=>{console.log("item===")} + }; Day.propTypes = { @@ -257,3 +310,4 @@ Day.propTypes = { minRangeDuration: PropTypes.oneOfType([PropTypes.array, PropTypes.number]), maxRangeDuration: PropTypes.oneOfType([PropTypes.array, PropTypes.number]), }; +export default (Day) diff --git a/CalendarPicker/DaysGridView.js b/CalendarPicker/DaysGridView.js index 7222334a..1ff614a4 100644 --- a/CalendarPicker/DaysGridView.js +++ b/CalendarPicker/DaysGridView.js @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import { View } from 'react-native'; +import { Text, View } from 'react-native'; import PropTypes from 'prop-types'; import { stylePropType } from './localPropTypes'; import Day from './Day'; @@ -86,7 +86,7 @@ export default class DaysGridView extends Component { !Utils.compareDates(selectedEndDate, prevSelEnd, 'day'); // Check that selected date(s) match this month. if (isSelectedDiff && ( - Utils.compareDates(selectedStartDate, firstDayOfMonth, 'month') || + Utils.compareDates(selectedStartDate, firstDayOfMonth, 'month') || Utils.compareDates(selectedEndDate, firstDayOfMonth, 'month') || Utils.compareDates(prevSelStart, firstDayOfMonth, 'month') || Utils.compareDates(prevSelEnd, firstDayOfMonth, 'month') )) @@ -121,21 +121,26 @@ export default class DaysGridView extends Component { } } } - - renderDayInCurrentMonth(day) { - return ({ + + renderDayInCurrentMonth(day) { + return { day, month: this.props.month, component: ( - + + + + ), - }); + }; + + } - + renderEmptyDay(key) { return ({ component: ( @@ -227,16 +232,15 @@ export default class DaysGridView extends Component { const { daysGrid } = this.state; const renderedDaysGrid = daysGrid.map((weekRow, i) => ( - { weekRow.map(day => day.component ) } + {weekRow.map(day => day.component)} )); - + return ( - { renderedDaysGrid } + {renderedDaysGrid} - ); - } + );} } DaysGridView.propTypes = { @@ -268,4 +272,5 @@ DaysGridView.propTypes = { disabledDatesTextStyle: stylePropType, minRangeDuration: PropTypes.oneOfType([PropTypes.array, PropTypes.number]), maxRangeDuration: PropTypes.oneOfType([PropTypes.array, PropTypes.number]), + }; diff --git a/CalendarPicker/__tests__/CalendarPicker-test.js b/CalendarPicker/__tests__/CalendarPicker-test.js index 4a30e31b..849a59cd 100644 --- a/CalendarPicker/__tests__/CalendarPicker-test.js +++ b/CalendarPicker/__tests__/CalendarPicker-test.js @@ -28,6 +28,7 @@ describe('CalendarPicker', function() { selectedDayColor="#7300e6" selectedDayTextColor="#FFFFFF" onDateChange={() => {}} + /> ).toJSON(); expect(CalendarPicker).toBeTruthy(); diff --git a/CalendarPicker/index.js b/CalendarPicker/index.js index 0d30414a..5961cc73 100644 --- a/CalendarPicker/index.js +++ b/CalendarPicker/index.js @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import { View, Dimensions } from 'react-native'; +import { View, Dimensions, Text } from 'react-native'; import { makeStyles } from './makeStyles'; import { Utils } from './Utils'; import HeaderControls from './HeaderControls'; @@ -220,7 +220,6 @@ export default class CalendarPicker extends Component { } return {minRangeDuration, maxRangeDuration}; } - handleOnPressDay = ({year, month, day}) => { const { selectedStartDate: prevSelectedStartDate, @@ -437,20 +436,28 @@ export default class CalendarPicker extends Component { } monthsList.push(month); } - return { + monthsList, initialScrollerIndex, }; } - + + renderMonth(props) { return ( - + + ); } render() { + const { currentView, currentMonth, @@ -489,10 +496,12 @@ export default class CalendarPicker extends Component { onMonthChange, scrollable, horizontal, + } = this.props; - let content; - switch (currentView) { + switch (currentView) + + { case 'months': content = ( + + { scrollable ? this.scroller = scroller} @@ -584,7 +595,10 @@ export default class CalendarPicker extends Component { updateMonthYear={this.updateMonthYear} onMonthChange={onMonthChange} horizontal={horizontal} + + /> + : this.renderMonth(renderMonthParams) } diff --git a/CalendarPicker/makeStyles.js b/CalendarPicker/makeStyles.js index 50b6bce5..f74c52c4 100644 --- a/CalendarPicker/makeStyles.js +++ b/CalendarPicker/makeStyles.js @@ -1,11 +1,13 @@ +import { color } from "react-native-reanimated"; + /** * Calendar Picker Component * * Copyright 2016 Yahoo Inc. * Licensed under the terms of the MIT license. See LICENSE file in the project root for terms. */ -const DEFAULT_SELECTED_BACKGROUND_COLOR = '#5ce600'; -const DEFAULT_SELECTED_TEXT_COLOR = '#000000'; +const DEFAULT_SELECTED_BACKGROUND_COLOR = '#000666'; +const DEFAULT_SELECTED_TEXT_COLOR = 'pink'; const DEFAULT_TODAY_BACKGROUND_COLOR = '#CCCCCC'; function getBorderRadiusByShape(scaler, dayShape) { @@ -43,7 +45,7 @@ export function makeStyles(params) { dayButton: { width: 30*scaler, height: 30*scaler, - borderRadius: getBorderRadiusByShape(scaler, dayShape), + // borderRadius: getBorderRadiusByShape(scaler, dayShape), alignSelf: 'center', justifyContent: 'center' }, @@ -60,8 +62,8 @@ export function makeStyles(params) { dayLabelsWrapper: { flexDirection: 'row', - borderBottomWidth: 1, - borderTopWidth: 1, + // borderBottomWidth: 1, + // borderTopWidth: 1, paddingTop: 10*scaler, paddingBottom: 10*scaler, alignSelf: 'center', @@ -69,23 +71,23 @@ export function makeStyles(params) { backgroundColor: 'rgba(0,0,0,0.0)', borderColor: 'rgba(0,0,0,0.2)' }, - daysWrapper: { alignSelf: 'center', - justifyContent: 'center' + justifyContent: 'center', + color:"#000666" }, dayLabels: { width: 50*scaler, fontSize: 12*scaler, - color: '#000', + color: '#000066', textAlign: 'center' }, selectedDay: { width: 30*scaler, height:30*scaler, - borderRadius: getBorderRadiusByShape(scaler, dayShape), + // borderRadius: getBorderRadiusByShape(scaler, dayShape), alignSelf: 'center', justifyContent: 'center' }, @@ -95,12 +97,13 @@ export function makeStyles(params) { }, selectedToday: { - width: 30*scaler, - height:30*scaler, + width: 35*scaler, + height:35*scaler, backgroundColor: TODAY_BG_COLOR, - borderRadius: getBorderRadiusByShape(scaler, dayShape), + borderRadius:5, + // borderRadius: getBorderRadiusByShape(scaler, dayShape), alignSelf: 'center', - justifyContent: 'center' + justifyContent: 'center', }, dayWrapper: { @@ -108,15 +111,17 @@ export function makeStyles(params) { justifyContent: 'center', width: 50*scaler, height: 40*scaler, - backgroundColor: 'rgba(0,0,0,0.0)' + backgroundColor: 'rgba(0,0,0,0.0)', + color:"#000666" }, startDayWrapper: { width: 50*scaler, height: 30*scaler, - borderTopLeftRadius: 20*scaler, - borderBottomLeftRadius: 20*scaler, + borderTopLeftRadius: 5, + borderBottomLeftRadius: 5, backgroundColor: SELECTED_BG_COLOR, + color:"white", alignSelf: 'center', justifyContent: 'center' }, @@ -124,9 +129,11 @@ export function makeStyles(params) { endDayWrapper: { width: 50*scaler, height: 30*scaler, - borderTopRightRadius: 20*scaler, - borderBottomRightRadius: 20*scaler, + borderTopRightRadius: 5, + borderBottomRightRadius:5, backgroundColor: SELECTED_BG_COLOR, + color:"white", + alignSelf: 'center', justifyContent: 'center' }, @@ -134,7 +141,7 @@ export function makeStyles(params) { inRangeDay: { width: 50*scaler, height: 30*scaler, - backgroundColor: SELECTED_BG_COLOR, + backgroundColor: '#D4D4FF', alignSelf: 'center', justifyContent: 'center' }, @@ -203,7 +210,7 @@ export function makeStyles(params) { monthButton: { width: 30*scaler, height: 30*scaler, - borderRadius: 30*scaler, + // borderRadius: 30*scaler, alignSelf: 'center', justifyContent: 'center' }, From 837f4d6529bb7ff8a2a69b4d185221b6e7902ba4 Mon Sep 17 00:00:00 2001 From: Saad Awan <71684740+saadlatif75@users.noreply.github.com> Date: Tue, 10 Oct 2023 13:58:20 +0500 Subject: [PATCH 2/5] Ios clander Foxe --- CalendarPicker/Day.js | 367 +++++++++++++++++++++++------------ CalendarPicker/makeStyles.js | 3 +- 2 files changed, 245 insertions(+), 125 deletions(-) diff --git a/CalendarPicker/Day.js b/CalendarPicker/Day.js index 767d360e..f383b34b 100644 --- a/CalendarPicker/Day.js +++ b/CalendarPicker/Day.js @@ -1,14 +1,10 @@ -import React, { useEffect, useState } from 'react'; -import { - View, - Text, - TouchableOpacity -} from 'react-native'; -import PropTypes from 'prop-types'; -import moment from 'moment'; +import React, { useEffect, useState } from "react"; +import { View, Text, TouchableOpacity, Platform } from "react-native"; +import PropTypes from "prop-types"; +import moment from "moment"; - function Day(props) { - const [CurrentMonthDays, setCurrentMonthDays] = useState([]) +function Day(props) { + const [CurrentMonthDays, setCurrentMonthDays] = useState([]); const { day, month, @@ -39,26 +35,26 @@ import moment from 'moment'; enableDateChange, dotsData, monthDays, - monthDates + monthDates, } = props; - const thisDay = moment({year, month, day, hour: 12 }); -useEffect(() => { - function getDatesArrayForCurrentMonth() { - const daysInMonth = moment({ year: year, month: month }).daysInMonth(); - const datesArray = []; - - for (let day = 1; day <= daysInMonth; day++) { - datesArray.push(moment({ year: year, month: month, day })); + const thisDay = moment({ year, month, day, hour: 12 }); + useEffect(() => { + function getDatesArrayForCurrentMonth() { + const daysInMonth = moment({ year: year, month: month }).daysInMonth(); + const datesArray = []; + + for (let day = 1; day <= daysInMonth; day++) { + datesArray.push(moment({ year: year, month: month, day })); + } + monthDates && monthDates(datesArray); + return datesArray; } - monthDates && monthDates(datesArray) - return datesArray; - } - getDatesArrayForCurrentMonth() -}, []) + getDatesArrayForCurrentMonth(); + }, []); -// monthDays(CurrentMonthDays) - const today = moment(); + // monthDays(CurrentMonthDays) + const today = moment(); let dateOutOfRange; let computedSelectedDayStyle = styles.dayButton; // may be overridden depending on state let selectedDayTextStyle = {}; @@ -74,43 +70,49 @@ useEffect(() => { // Check whether props maxDate / minDate are defined. If not supplied, // don't restrict dates. if (maxDate) { - dateIsAfterMax = thisDay.isAfter(maxDate, 'day'); + dateIsAfterMax = thisDay.isAfter(maxDate, "day"); } if (minDate) { - dateIsBeforeMin = thisDay.isBefore(minDate, 'day'); + dateIsBeforeMin = thisDay.isBefore(minDate, "day"); } if (disabledDates) { - if (Array.isArray(disabledDates) && disabledDates.indexOf(thisDay.valueOf()) >= 0) { + if ( + Array.isArray(disabledDates) && + disabledDates.indexOf(thisDay.valueOf()) >= 0 + ) { dateIsDisabled = true; - } - else if (disabledDates instanceof Function) { + } else if (disabledDates instanceof Function) { dateIsDisabled = disabledDates(thisDay); } } if (allowRangeSelection && selectedStartDate && !selectedEndDate) { - let daysDiff = thisDay.diff(selectedStartDate, 'days'); // may be + or - + let daysDiff = thisDay.diff(selectedStartDate, "days"); // may be + or - daysDiff = allowBackwardRangeSelect ? Math.abs(daysDiff) : daysDiff; if (maxRangeDuration) { if (Array.isArray(maxRangeDuration)) { - let maxRangeEntry = maxRangeDuration.find(mrd => selectedStartDate.isSame(mrd.date, 'day') ); + let maxRangeEntry = maxRangeDuration.find((mrd) => + selectedStartDate.isSame(mrd.date, "day") + ); if (maxRangeEntry && daysDiff > maxRangeEntry.maxDuration) { dateRangeGreaterThanMax = true; } - } else if(daysDiff > maxRangeDuration) { + } else if (daysDiff > maxRangeDuration) { dateRangeGreaterThanMax = true; } } if (minRangeDuration) { if (Array.isArray(minRangeDuration)) { - let minRangeEntry = minRangeDuration.find(mrd => selectedStartDate.isSame(mrd.date, 'day') ); + let minRangeEntry = minRangeDuration.find((mrd) => + selectedStartDate.isSame(mrd.date, "day") + ); if (minRangeEntry && daysDiff < minRangeEntry.minDuration) { dateRangeLessThanMin = true; } - } else if(daysDiff < minRangeDuration) { + } else if (daysDiff < minRangeDuration) { dateRangeLessThanMin = true; } } @@ -119,28 +121,43 @@ useEffect(() => { dateRangeLessThanMin = true; } } -const matchingDots = dotsData?.filter(dot => dot.day === day && dot.month === month && dot.year === year); + const matchingDots = dotsData?.filter( + (dot) => dot.day === day && dot.month === month && dot.year === year + ); -dateOutOfRange = dateIsAfterMax || dateIsBeforeMin || dateIsDisabled || dateRangeLessThanMin || dateRangeGreaterThanMax; + dateOutOfRange = + dateIsAfterMax || + dateIsBeforeMin || + dateIsDisabled || + dateRangeLessThanMin || + dateRangeGreaterThanMax; - let isThisDaySameAsSelectedStart = thisDay.isSame(selectedStartDate, 'day'); - let isThisDaySameAsSelectedEnd = thisDay.isSame(selectedEndDate, 'day'); + let isThisDaySameAsSelectedStart = thisDay.isSame(selectedStartDate, "day"); + let isThisDaySameAsSelectedEnd = thisDay.isSame(selectedEndDate, "day"); let isThisDateInSelectedRange = - selectedStartDate - && selectedEndDate - && thisDay.isBetween(selectedStartDate, selectedEndDate,'day','[]'); + selectedStartDate && + selectedEndDate && + thisDay.isBetween(selectedStartDate, selectedEndDate, "day", "[]"); // If date is in range let's apply styles - if (!dateOutOfRange || isThisDaySameAsSelectedStart || isThisDaySameAsSelectedEnd || isThisDateInSelectedRange) { + if ( + !dateOutOfRange || + isThisDaySameAsSelectedStart || + isThisDaySameAsSelectedEnd || + isThisDateInSelectedRange + ) { // set today's style - let isToday = thisDay.isSame(today, 'day'); + let isToday = thisDay.isSame(today, "day"); if (isToday) { computedSelectedDayStyle = styles.selectedToday; // todayTextStyle prop overrides selectedDayTextColor (created via makeStyles) - selectedDayTextStyle = [todayTextStyle || styles.selectedDayLabel, propSelectedDayTextStyle]; + selectedDayTextStyle = [ + todayTextStyle || styles.selectedDayLabel, + propSelectedDayTextStyle, + ]; } - const custom = getCustomDateStyle({customDatesStyles, date: thisDay}); + const custom = getCustomDateStyle({ customDatesStyles, date: thisDay }); if (isToday && custom.style) { // Custom date style overrides 'today' style. It may be reset below @@ -149,12 +166,17 @@ dateOutOfRange = dateIsAfterMax || dateIsBeforeMin || dateIsDisabled || dateRang } // set selected day style - if (!allowRangeSelection && - selectedStartDate && - isThisDaySameAsSelectedStart) - { + if ( + !allowRangeSelection && + selectedStartDate && + isThisDaySameAsSelectedStart + ) { computedSelectedDayStyle = styles.selectedDay; - selectedDayTextStyle = [styles.selectedDayLabel, isToday && todayTextStyle, propSelectedDayTextStyle]; + selectedDayTextStyle = [ + styles.selectedDayLabel, + isToday && todayTextStyle, + propSelectedDayTextStyle, + ]; // selectedDayStyle prop overrides selectedDayColor (created via makeStyles) selectedDayStyle = propSelectedDayStyle || styles.selectedDayBackground; } @@ -164,59 +186,117 @@ dateOutOfRange = dateIsAfterMax || dateIsBeforeMin || dateIsDisabled || dateRang if (selectedStartDate && selectedEndDate) { // Apply style for start date if (isThisDaySameAsSelectedStart) { - computedSelectedDayStyle = [styles.startDayWrapper, selectedRangeStyle, selectedRangeStartStyle]; - selectedDayTextStyle = [styles.selectedDayLabel, propSelectedDayTextStyle, selectedRangeStartTextStyle]; + computedSelectedDayStyle = [ + styles.startDayWrapper, + selectedRangeStyle, + selectedRangeStartStyle, + ]; + selectedDayTextStyle = [ + styles.selectedDayLabel, + propSelectedDayTextStyle, + selectedRangeStartTextStyle, + ]; } // Apply style for end date if (isThisDaySameAsSelectedEnd) { - computedSelectedDayStyle = [styles.endDayWrapper, selectedRangeStyle, selectedRangeEndStyle]; - selectedDayTextStyle = [styles.selectedDayLabel, propSelectedDayTextStyle, selectedRangeEndTextStyle]; + computedSelectedDayStyle = [ + styles.endDayWrapper, + selectedRangeStyle, + selectedRangeEndStyle, + ]; + selectedDayTextStyle = [ + styles.selectedDayLabel, + propSelectedDayTextStyle, + selectedRangeEndTextStyle, + ]; } // Apply style if start date is the same as end date - if (isThisDaySameAsSelectedEnd && - isThisDaySameAsSelectedStart && - selectedEndDate.isSame(selectedStartDate, 'day')) - { - computedSelectedDayStyle = [styles.selectedDay, styles.selectedDayBackground, selectedRangeStyle]; - selectedDayTextStyle = [styles.selectedDayLabel, propSelectedDayTextStyle, selectedRangeStartTextStyle]; + if ( + isThisDaySameAsSelectedEnd && + isThisDaySameAsSelectedStart && + selectedEndDate.isSame(selectedStartDate, "day") + ) { + computedSelectedDayStyle = [ + styles.selectedDay, + styles.selectedDayBackground, + selectedRangeStyle, + ]; + selectedDayTextStyle = [ + styles.selectedDayLabel, + propSelectedDayTextStyle, + selectedRangeStartTextStyle, + ]; } // Apply style for days inside of range, excluding start & end dates. - if (thisDay.isBetween(selectedStartDate, selectedEndDate, 'day', '()')) { + if ( + thisDay.isBetween(selectedStartDate, selectedEndDate, "day", "()") + ) { computedSelectedDayStyle = [styles.inRangeDay, selectedRangeStyle]; - selectedDayTextStyle = [styles.selectedDayLabel, propSelectedDayTextStyle]; + selectedDayTextStyle = [ + styles.selectedDayLabel, + propSelectedDayTextStyle, + ]; } } // Apply style if start date has been selected but end date has not - if (selectedStartDate && - !selectedEndDate && - isThisDaySameAsSelectedStart) - { - computedSelectedDayStyle = [styles.startDayWrapper, selectedRangeStyle, selectedRangeStartStyle]; - selectedDayTextStyle = [styles.selectedDayLabel, propSelectedDayTextStyle, selectedRangeStartTextStyle]; + if ( + selectedStartDate && + !selectedEndDate && + isThisDaySameAsSelectedStart + ) { + computedSelectedDayStyle = [ + styles.startDayWrapper, + selectedRangeStyle, + selectedRangeStartStyle, + ]; + selectedDayTextStyle = [ + styles.selectedDayLabel, + propSelectedDayTextStyle, + selectedRangeStartTextStyle, + ]; // Override out of range start day text style when minRangeDuration = 1. // This allows selected start date's text to be styled by selectedRangeStartTextStyle // even when it's below minRangeDuration. overrideOutOfRangeTextStyle = selectedRangeStartTextStyle; } } - if (dateOutOfRange) { // start or end date selected, and this date outside of range. + if (dateOutOfRange) { + // start or end date selected, and this date outside of range. return ( - - - { day } + + + {day} - - + {matchingDots?.length > 0 && ( - - {matchingDots[0].colors.slice(0, matchingDots[0].value).map((color, index) => ( - - ))} + + {matchingDots[0].colors + .slice(0, matchingDots[0].value) + .map((color, index) => ( + + ))} )} @@ -226,30 +306,56 @@ dateOutOfRange = dateIsAfterMax || dateIsBeforeMin || dateIsDisabled || dateRang onPressDay({year, month, day}) }> - - { day } + style={[custom.style, computedSelectedDayStyle, selectedDayStyle]} + onPress={() => onPressDay({ year, month, day })} + > + + {day} {matchingDots?.length > 0 && ( - - {matchingDots[0].colors.slice(0, matchingDots[0].value).map((color, index) => ( - - ))} - - )} + + {matchingDots[0].colors + .slice(0, matchingDots[0].value) + .map((color, index) => ( + + ))} + + )} - - {/* {saad} */} - ); } - } - - else { // dateOutOfRange = true, and no selected start or end date. - const custom = getCustomDateStyle({customDatesStyles, date: thisDay}); + } else { + // dateOutOfRange = true, and no selected start or end date. + const custom = getCustomDateStyle({ customDatesStyles, date: thisDay }); // Allow customDatesStyles to override disabled dates if allowDisabled set if (!custom.allowDisabled) { custom.containerStyle = null; @@ -259,47 +365,60 @@ dateOutOfRange = dateIsAfterMax || dateIsBeforeMin || dateIsDisabled || dateRang return ( - - { day } + + {day} - {matchingDots?.length > 0 && ( - - {matchingDots[0].colors.slice(0, matchingDots[0].value).map((color, index) => ( - + {matchingDots?.length > 0 && ( + + {matchingDots[0].colors + .slice(0, matchingDots[0].value) + .map((color, index) => ( + ))} - - )} - - - - {/* { saad} */} + + )} ); } } -function getCustomDateStyle({customDatesStyles, date}) { +function getCustomDateStyle({ customDatesStyles, date }) { if (Array.isArray(customDatesStyles)) { for (let cds of customDatesStyles) { - if (date.isSame(moment(cds.date), 'day')) { - return {...cds}; + if (date.isSame(moment(cds.date), "day")) { + return { ...cds }; } } - } - else if (customDatesStyles instanceof Function) { + } else if (customDatesStyles instanceof Function) { let cds = customDatesStyles(date) || {}; - return {...cds}; + return { ...cds }; } return {}; } - Day.defaultProps = { customDatesStyles: [], - dotsData : [], - monthDates:(item)=>{console.log("item===")} - + dotsData: [], + monthDates: (item) => { + console.log("item==="); + }, }; Day.propTypes = { @@ -310,4 +429,4 @@ Day.propTypes = { minRangeDuration: PropTypes.oneOfType([PropTypes.array, PropTypes.number]), maxRangeDuration: PropTypes.oneOfType([PropTypes.array, PropTypes.number]), }; -export default (Day) +export default Day; diff --git a/CalendarPicker/makeStyles.js b/CalendarPicker/makeStyles.js index f74c52c4..95a74b74 100644 --- a/CalendarPicker/makeStyles.js +++ b/CalendarPicker/makeStyles.js @@ -53,7 +53,7 @@ export function makeStyles(params) { dayLabel: { fontSize: 14*scaler, color: '#000', - alignSelf: 'center' + alignSelf: 'center', }, selectedDayLabel: { @@ -122,6 +122,7 @@ export function makeStyles(params) { borderBottomLeftRadius: 5, backgroundColor: SELECTED_BG_COLOR, color:"white", + alignSelf: 'center', justifyContent: 'center' }, From c235593b3dbe56267ecfc1ab56cccf7f7e83716a Mon Sep 17 00:00:00 2001 From: Saad Awan <71684740+saadlatif75@users.noreply.github.com> Date: Tue, 10 Oct 2023 15:25:57 +0500 Subject: [PATCH 3/5] Dot Direction Fix --- CalendarPicker/Day.js | 372 ++++++++++++++---------------------------- 1 file changed, 126 insertions(+), 246 deletions(-) diff --git a/CalendarPicker/Day.js b/CalendarPicker/Day.js index f383b34b..29bbf841 100644 --- a/CalendarPicker/Day.js +++ b/CalendarPicker/Day.js @@ -1,10 +1,15 @@ -import React, { useEffect, useState } from "react"; -import { View, Text, TouchableOpacity, Platform } from "react-native"; -import PropTypes from "prop-types"; -import moment from "moment"; +import React, { useEffect, useState } from 'react'; +import { + View, + Text, + TouchableOpacity, + Platform +} from 'react-native'; +import PropTypes from 'prop-types'; +import moment from 'moment'; -function Day(props) { - const [CurrentMonthDays, setCurrentMonthDays] = useState([]); + function Day(props) { + const [CurrentMonthDays, setCurrentMonthDays] = useState([]) const { day, month, @@ -35,26 +40,26 @@ function Day(props) { enableDateChange, dotsData, monthDays, - monthDates, + monthDates } = props; - const thisDay = moment({ year, month, day, hour: 12 }); - useEffect(() => { - function getDatesArrayForCurrentMonth() { - const daysInMonth = moment({ year: year, month: month }).daysInMonth(); - const datesArray = []; - - for (let day = 1; day <= daysInMonth; day++) { - datesArray.push(moment({ year: year, month: month, day })); - } - monthDates && monthDates(datesArray); - return datesArray; + const thisDay = moment({year, month, day, hour: 12 }); +useEffect(() => { + function getDatesArrayForCurrentMonth() { + const daysInMonth = moment({ year: year, month: month }).daysInMonth(); + const datesArray = []; + + for (let day = 1; day <= daysInMonth; day++) { + datesArray.push(moment({ year: year, month: month, day })); } + monthDates && monthDates(datesArray) + return datesArray; + } - getDatesArrayForCurrentMonth(); - }, []); + getDatesArrayForCurrentMonth() +}, []) - // monthDays(CurrentMonthDays) - const today = moment(); +// monthDays(CurrentMonthDays) + const today = moment(); let dateOutOfRange; let computedSelectedDayStyle = styles.dayButton; // may be overridden depending on state let selectedDayTextStyle = {}; @@ -70,49 +75,43 @@ function Day(props) { // Check whether props maxDate / minDate are defined. If not supplied, // don't restrict dates. if (maxDate) { - dateIsAfterMax = thisDay.isAfter(maxDate, "day"); + dateIsAfterMax = thisDay.isAfter(maxDate, 'day'); } if (minDate) { - dateIsBeforeMin = thisDay.isBefore(minDate, "day"); + dateIsBeforeMin = thisDay.isBefore(minDate, 'day'); } if (disabledDates) { - if ( - Array.isArray(disabledDates) && - disabledDates.indexOf(thisDay.valueOf()) >= 0 - ) { + if (Array.isArray(disabledDates) && disabledDates.indexOf(thisDay.valueOf()) >= 0) { dateIsDisabled = true; - } else if (disabledDates instanceof Function) { + } + else if (disabledDates instanceof Function) { dateIsDisabled = disabledDates(thisDay); } } if (allowRangeSelection && selectedStartDate && !selectedEndDate) { - let daysDiff = thisDay.diff(selectedStartDate, "days"); // may be + or - + let daysDiff = thisDay.diff(selectedStartDate, 'days'); // may be + or - daysDiff = allowBackwardRangeSelect ? Math.abs(daysDiff) : daysDiff; if (maxRangeDuration) { if (Array.isArray(maxRangeDuration)) { - let maxRangeEntry = maxRangeDuration.find((mrd) => - selectedStartDate.isSame(mrd.date, "day") - ); + let maxRangeEntry = maxRangeDuration.find(mrd => selectedStartDate.isSame(mrd.date, 'day') ); if (maxRangeEntry && daysDiff > maxRangeEntry.maxDuration) { dateRangeGreaterThanMax = true; } - } else if (daysDiff > maxRangeDuration) { + } else if(daysDiff > maxRangeDuration) { dateRangeGreaterThanMax = true; } } if (minRangeDuration) { if (Array.isArray(minRangeDuration)) { - let minRangeEntry = minRangeDuration.find((mrd) => - selectedStartDate.isSame(mrd.date, "day") - ); + let minRangeEntry = minRangeDuration.find(mrd => selectedStartDate.isSame(mrd.date, 'day') ); if (minRangeEntry && daysDiff < minRangeEntry.minDuration) { dateRangeLessThanMin = true; } - } else if (daysDiff < minRangeDuration) { + } else if(daysDiff < minRangeDuration) { dateRangeLessThanMin = true; } } @@ -121,43 +120,28 @@ function Day(props) { dateRangeLessThanMin = true; } } - const matchingDots = dotsData?.filter( - (dot) => dot.day === day && dot.month === month && dot.year === year - ); +const matchingDots = dotsData?.filter(dot => dot.day === day && dot.month === month && dot.year === year); - dateOutOfRange = - dateIsAfterMax || - dateIsBeforeMin || - dateIsDisabled || - dateRangeLessThanMin || - dateRangeGreaterThanMax; +dateOutOfRange = dateIsAfterMax || dateIsBeforeMin || dateIsDisabled || dateRangeLessThanMin || dateRangeGreaterThanMax; - let isThisDaySameAsSelectedStart = thisDay.isSame(selectedStartDate, "day"); - let isThisDaySameAsSelectedEnd = thisDay.isSame(selectedEndDate, "day"); + let isThisDaySameAsSelectedStart = thisDay.isSame(selectedStartDate, 'day'); + let isThisDaySameAsSelectedEnd = thisDay.isSame(selectedEndDate, 'day'); let isThisDateInSelectedRange = - selectedStartDate && - selectedEndDate && - thisDay.isBetween(selectedStartDate, selectedEndDate, "day", "[]"); + selectedStartDate + && selectedEndDate + && thisDay.isBetween(selectedStartDate, selectedEndDate,'day','[]'); // If date is in range let's apply styles - if ( - !dateOutOfRange || - isThisDaySameAsSelectedStart || - isThisDaySameAsSelectedEnd || - isThisDateInSelectedRange - ) { + if (!dateOutOfRange || isThisDaySameAsSelectedStart || isThisDaySameAsSelectedEnd || isThisDateInSelectedRange) { // set today's style - let isToday = thisDay.isSame(today, "day"); + let isToday = thisDay.isSame(today, 'day'); if (isToday) { computedSelectedDayStyle = styles.selectedToday; // todayTextStyle prop overrides selectedDayTextColor (created via makeStyles) - selectedDayTextStyle = [ - todayTextStyle || styles.selectedDayLabel, - propSelectedDayTextStyle, - ]; + selectedDayTextStyle = [todayTextStyle || styles.selectedDayLabel, propSelectedDayTextStyle]; } - const custom = getCustomDateStyle({ customDatesStyles, date: thisDay }); + const custom = getCustomDateStyle({customDatesStyles, date: thisDay}); if (isToday && custom.style) { // Custom date style overrides 'today' style. It may be reset below @@ -166,17 +150,12 @@ function Day(props) { } // set selected day style - if ( - !allowRangeSelection && - selectedStartDate && - isThisDaySameAsSelectedStart - ) { + if (!allowRangeSelection && + selectedStartDate && + isThisDaySameAsSelectedStart) + { computedSelectedDayStyle = styles.selectedDay; - selectedDayTextStyle = [ - styles.selectedDayLabel, - isToday && todayTextStyle, - propSelectedDayTextStyle, - ]; + selectedDayTextStyle = [styles.selectedDayLabel, isToday && todayTextStyle, propSelectedDayTextStyle]; // selectedDayStyle prop overrides selectedDayColor (created via makeStyles) selectedDayStyle = propSelectedDayStyle || styles.selectedDayBackground; } @@ -186,176 +165,91 @@ function Day(props) { if (selectedStartDate && selectedEndDate) { // Apply style for start date if (isThisDaySameAsSelectedStart) { - computedSelectedDayStyle = [ - styles.startDayWrapper, - selectedRangeStyle, - selectedRangeStartStyle, - ]; - selectedDayTextStyle = [ - styles.selectedDayLabel, - propSelectedDayTextStyle, - selectedRangeStartTextStyle, - ]; + computedSelectedDayStyle = [styles.startDayWrapper, selectedRangeStyle, selectedRangeStartStyle]; + selectedDayTextStyle = [styles.selectedDayLabel, propSelectedDayTextStyle, selectedRangeStartTextStyle]; } // Apply style for end date if (isThisDaySameAsSelectedEnd) { - computedSelectedDayStyle = [ - styles.endDayWrapper, - selectedRangeStyle, - selectedRangeEndStyle, - ]; - selectedDayTextStyle = [ - styles.selectedDayLabel, - propSelectedDayTextStyle, - selectedRangeEndTextStyle, - ]; + computedSelectedDayStyle = [styles.endDayWrapper, selectedRangeStyle, selectedRangeEndStyle]; + selectedDayTextStyle = [styles.selectedDayLabel, propSelectedDayTextStyle, selectedRangeEndTextStyle]; } // Apply style if start date is the same as end date - if ( - isThisDaySameAsSelectedEnd && - isThisDaySameAsSelectedStart && - selectedEndDate.isSame(selectedStartDate, "day") - ) { - computedSelectedDayStyle = [ - styles.selectedDay, - styles.selectedDayBackground, - selectedRangeStyle, - ]; - selectedDayTextStyle = [ - styles.selectedDayLabel, - propSelectedDayTextStyle, - selectedRangeStartTextStyle, - ]; + if (isThisDaySameAsSelectedEnd && + isThisDaySameAsSelectedStart && + selectedEndDate.isSame(selectedStartDate, 'day')) + { + computedSelectedDayStyle = [styles.selectedDay, styles.selectedDayBackground, selectedRangeStyle]; + selectedDayTextStyle = [styles.selectedDayLabel, propSelectedDayTextStyle, selectedRangeStartTextStyle]; } // Apply style for days inside of range, excluding start & end dates. - if ( - thisDay.isBetween(selectedStartDate, selectedEndDate, "day", "()") - ) { + if (thisDay.isBetween(selectedStartDate, selectedEndDate, 'day', '()')) { computedSelectedDayStyle = [styles.inRangeDay, selectedRangeStyle]; - selectedDayTextStyle = [ - styles.selectedDayLabel, - propSelectedDayTextStyle, - ]; + selectedDayTextStyle = [styles.selectedDayLabel, propSelectedDayTextStyle]; } } // Apply style if start date has been selected but end date has not - if ( - selectedStartDate && - !selectedEndDate && - isThisDaySameAsSelectedStart - ) { - computedSelectedDayStyle = [ - styles.startDayWrapper, - selectedRangeStyle, - selectedRangeStartStyle, - ]; - selectedDayTextStyle = [ - styles.selectedDayLabel, - propSelectedDayTextStyle, - selectedRangeStartTextStyle, - ]; + if (selectedStartDate && + !selectedEndDate && + isThisDaySameAsSelectedStart) + { + computedSelectedDayStyle = [styles.startDayWrapper, selectedRangeStyle, selectedRangeStartStyle]; + selectedDayTextStyle = [styles.selectedDayLabel, propSelectedDayTextStyle, selectedRangeStartTextStyle]; // Override out of range start day text style when minRangeDuration = 1. // This allows selected start date's text to be styled by selectedRangeStartTextStyle // even when it's below minRangeDuration. overrideOutOfRangeTextStyle = selectedRangeStartTextStyle; } } - if (dateOutOfRange) { - // start or end date selected, and this date outside of range. + if (dateOutOfRange) { // start or end date selected, and this date outside of range. return ( - - - - {day} + + + + { day } + - + + {matchingDots?.length > 0 && ( - - {matchingDots[0].colors - .slice(0, matchingDots[0].value) - .map((color, index) => ( - - ))} + + {matchingDots[0].colors.slice(0, matchingDots[0].value).map((color, index) => ( + + ))} )} ); } else { return ( - + onPressDay({ year, month, day })} - > - - {day} + style={[custom.style, computedSelectedDayStyle, selectedDayStyle , +]} + onPress={() => onPressDay({year, month, day}) }> + + { day } {matchingDots?.length > 0 && ( - - {matchingDots[0].colors - .slice(0, matchingDots[0].value) - .map((color, index) => ( - - ))} - - )} + + {matchingDots[0].colors.slice(0, matchingDots[0].value).map((color, index) => ( + + ))} + + )} ); } - } else { - // dateOutOfRange = true, and no selected start or end date. - const custom = getCustomDateStyle({ customDatesStyles, date: thisDay }); + } + + else { // dateOutOfRange = true, and no selected start or end date. + const custom = getCustomDateStyle({customDatesStyles, date: thisDay}); // Allow customDatesStyles to override disabled dates if allowDisabled set if (!custom.allowDisabled) { custom.containerStyle = null; @@ -363,62 +257,48 @@ function Day(props) { custom.textStyle = null; } return ( - + - - {day} + + { day } - {matchingDots?.length > 0 && ( - - {matchingDots[0].colors - .slice(0, matchingDots[0].value) - .map((color, index) => ( - + {matchingDots?.length > 0 && ( + + {matchingDots[0].colors.slice(0, matchingDots[0].value).map((color, index) => ( + ))} - - )} + + )} + + + ); } } -function getCustomDateStyle({ customDatesStyles, date }) { +function getCustomDateStyle({customDatesStyles, date}) { if (Array.isArray(customDatesStyles)) { for (let cds of customDatesStyles) { - if (date.isSame(moment(cds.date), "day")) { - return { ...cds }; + if (date.isSame(moment(cds.date), 'day')) { + return {...cds}; } } - } else if (customDatesStyles instanceof Function) { + } + else if (customDatesStyles instanceof Function) { let cds = customDatesStyles(date) || {}; - return { ...cds }; + return {...cds}; } return {}; } + Day.defaultProps = { customDatesStyles: [], - dotsData: [], - monthDates: (item) => { - console.log("item==="); - }, + dotsData : [], + monthDates:(item)=>{console.log("item===")} + }; Day.propTypes = { @@ -429,4 +309,4 @@ Day.propTypes = { minRangeDuration: PropTypes.oneOfType([PropTypes.array, PropTypes.number]), maxRangeDuration: PropTypes.oneOfType([PropTypes.array, PropTypes.number]), }; -export default Day; +export default (Day) From 206c628d5b000f5cb4f0ee7866a64cf0dd0b36c9 Mon Sep 17 00:00:00 2001 From: Saad Awan <71684740+saadlatif75@users.noreply.github.com> Date: Fri, 13 Oct 2023 18:05:32 +0500 Subject: [PATCH 4/5] Dot Fixes Multiple dots Not Show --- CalendarPicker/Day.js | 379 ++++++++++++++++++++++++++++-------------- 1 file changed, 253 insertions(+), 126 deletions(-) diff --git a/CalendarPicker/Day.js b/CalendarPicker/Day.js index 29bbf841..649f6906 100644 --- a/CalendarPicker/Day.js +++ b/CalendarPicker/Day.js @@ -1,15 +1,10 @@ -import React, { useEffect, useState } from 'react'; -import { - View, - Text, - TouchableOpacity, - Platform -} from 'react-native'; -import PropTypes from 'prop-types'; -import moment from 'moment'; +import React, { useEffect, useState } from "react"; +import { View, Text, TouchableOpacity, Platform } from "react-native"; +import PropTypes from "prop-types"; +import moment from "moment"; - function Day(props) { - const [CurrentMonthDays, setCurrentMonthDays] = useState([]) +function Day(props) { + const [CurrentMonthDays, setCurrentMonthDays] = useState([]); const { day, month, @@ -40,26 +35,26 @@ import moment from 'moment'; enableDateChange, dotsData, monthDays, - monthDates + monthDates, } = props; - const thisDay = moment({year, month, day, hour: 12 }); -useEffect(() => { - function getDatesArrayForCurrentMonth() { - const daysInMonth = moment({ year: year, month: month }).daysInMonth(); - const datesArray = []; - - for (let day = 1; day <= daysInMonth; day++) { - datesArray.push(moment({ year: year, month: month, day })); + const thisDay = moment({ year, month, day, hour: 12 }); + useEffect(() => { + function getDatesArrayForCurrentMonth() { + const daysInMonth = moment({ year: year, month: month }).daysInMonth(); + const datesArray = []; + + for (let day = 1; day <= daysInMonth; day++) { + datesArray.push(moment({ year: year, month: month, day })); + } + monthDates && monthDates(datesArray); + return datesArray; } - monthDates && monthDates(datesArray) - return datesArray; - } - getDatesArrayForCurrentMonth() -}, []) + getDatesArrayForCurrentMonth(); + }, []); -// monthDays(CurrentMonthDays) - const today = moment(); + // monthDays(CurrentMonthDays) + const today = moment(); let dateOutOfRange; let computedSelectedDayStyle = styles.dayButton; // may be overridden depending on state let selectedDayTextStyle = {}; @@ -75,43 +70,49 @@ useEffect(() => { // Check whether props maxDate / minDate are defined. If not supplied, // don't restrict dates. if (maxDate) { - dateIsAfterMax = thisDay.isAfter(maxDate, 'day'); + dateIsAfterMax = thisDay.isAfter(maxDate, "day"); } if (minDate) { - dateIsBeforeMin = thisDay.isBefore(minDate, 'day'); + dateIsBeforeMin = thisDay.isBefore(minDate, "day"); } if (disabledDates) { - if (Array.isArray(disabledDates) && disabledDates.indexOf(thisDay.valueOf()) >= 0) { + if ( + Array.isArray(disabledDates) && + disabledDates.indexOf(thisDay.valueOf()) >= 0 + ) { dateIsDisabled = true; - } - else if (disabledDates instanceof Function) { + } else if (disabledDates instanceof Function) { dateIsDisabled = disabledDates(thisDay); } } if (allowRangeSelection && selectedStartDate && !selectedEndDate) { - let daysDiff = thisDay.diff(selectedStartDate, 'days'); // may be + or - + let daysDiff = thisDay.diff(selectedStartDate, "days"); // may be + or - daysDiff = allowBackwardRangeSelect ? Math.abs(daysDiff) : daysDiff; if (maxRangeDuration) { if (Array.isArray(maxRangeDuration)) { - let maxRangeEntry = maxRangeDuration.find(mrd => selectedStartDate.isSame(mrd.date, 'day') ); + let maxRangeEntry = maxRangeDuration.find((mrd) => + selectedStartDate.isSame(mrd.date, "day") + ); if (maxRangeEntry && daysDiff > maxRangeEntry.maxDuration) { dateRangeGreaterThanMax = true; } - } else if(daysDiff > maxRangeDuration) { + } else if (daysDiff > maxRangeDuration) { dateRangeGreaterThanMax = true; } } if (minRangeDuration) { if (Array.isArray(minRangeDuration)) { - let minRangeEntry = minRangeDuration.find(mrd => selectedStartDate.isSame(mrd.date, 'day') ); + let minRangeEntry = minRangeDuration.find((mrd) => + selectedStartDate.isSame(mrd.date, "day") + ); if (minRangeEntry && daysDiff < minRangeEntry.minDuration) { dateRangeLessThanMin = true; } - } else if(daysDiff < minRangeDuration) { + } else if (daysDiff < minRangeDuration) { dateRangeLessThanMin = true; } } @@ -120,28 +121,43 @@ useEffect(() => { dateRangeLessThanMin = true; } } -const matchingDots = dotsData?.filter(dot => dot.day === day && dot.month === month && dot.year === year); + const matchingDots = dotsData?.filter( + (dot) => dot.day === day && dot.month === month && dot.year === year + ); -dateOutOfRange = dateIsAfterMax || dateIsBeforeMin || dateIsDisabled || dateRangeLessThanMin || dateRangeGreaterThanMax; + dateOutOfRange = + dateIsAfterMax || + dateIsBeforeMin || + dateIsDisabled || + dateRangeLessThanMin || + dateRangeGreaterThanMax; - let isThisDaySameAsSelectedStart = thisDay.isSame(selectedStartDate, 'day'); - let isThisDaySameAsSelectedEnd = thisDay.isSame(selectedEndDate, 'day'); + let isThisDaySameAsSelectedStart = thisDay.isSame(selectedStartDate, "day"); + let isThisDaySameAsSelectedEnd = thisDay.isSame(selectedEndDate, "day"); let isThisDateInSelectedRange = - selectedStartDate - && selectedEndDate - && thisDay.isBetween(selectedStartDate, selectedEndDate,'day','[]'); + selectedStartDate && + selectedEndDate && + thisDay.isBetween(selectedStartDate, selectedEndDate, "day", "[]"); // If date is in range let's apply styles - if (!dateOutOfRange || isThisDaySameAsSelectedStart || isThisDaySameAsSelectedEnd || isThisDateInSelectedRange) { + if ( + !dateOutOfRange || + isThisDaySameAsSelectedStart || + isThisDaySameAsSelectedEnd || + isThisDateInSelectedRange + ) { // set today's style - let isToday = thisDay.isSame(today, 'day'); + let isToday = thisDay.isSame(today, "day"); if (isToday) { computedSelectedDayStyle = styles.selectedToday; // todayTextStyle prop overrides selectedDayTextColor (created via makeStyles) - selectedDayTextStyle = [todayTextStyle || styles.selectedDayLabel, propSelectedDayTextStyle]; + selectedDayTextStyle = [ + todayTextStyle || styles.selectedDayLabel, + propSelectedDayTextStyle, + ]; } - const custom = getCustomDateStyle({customDatesStyles, date: thisDay}); + const custom = getCustomDateStyle({ customDatesStyles, date: thisDay }); if (isToday && custom.style) { // Custom date style overrides 'today' style. It may be reset below @@ -150,12 +166,17 @@ dateOutOfRange = dateIsAfterMax || dateIsBeforeMin || dateIsDisabled || dateRang } // set selected day style - if (!allowRangeSelection && - selectedStartDate && - isThisDaySameAsSelectedStart) - { + if ( + !allowRangeSelection && + selectedStartDate && + isThisDaySameAsSelectedStart + ) { computedSelectedDayStyle = styles.selectedDay; - selectedDayTextStyle = [styles.selectedDayLabel, isToday && todayTextStyle, propSelectedDayTextStyle]; + selectedDayTextStyle = [ + styles.selectedDayLabel, + isToday && todayTextStyle, + propSelectedDayTextStyle, + ]; // selectedDayStyle prop overrides selectedDayColor (created via makeStyles) selectedDayStyle = propSelectedDayStyle || styles.selectedDayBackground; } @@ -165,91 +186,183 @@ dateOutOfRange = dateIsAfterMax || dateIsBeforeMin || dateIsDisabled || dateRang if (selectedStartDate && selectedEndDate) { // Apply style for start date if (isThisDaySameAsSelectedStart) { - computedSelectedDayStyle = [styles.startDayWrapper, selectedRangeStyle, selectedRangeStartStyle]; - selectedDayTextStyle = [styles.selectedDayLabel, propSelectedDayTextStyle, selectedRangeStartTextStyle]; + computedSelectedDayStyle = [ + styles.startDayWrapper, + selectedRangeStyle, + selectedRangeStartStyle, + ]; + selectedDayTextStyle = [ + styles.selectedDayLabel, + propSelectedDayTextStyle, + selectedRangeStartTextStyle, + ]; } // Apply style for end date if (isThisDaySameAsSelectedEnd) { - computedSelectedDayStyle = [styles.endDayWrapper, selectedRangeStyle, selectedRangeEndStyle]; - selectedDayTextStyle = [styles.selectedDayLabel, propSelectedDayTextStyle, selectedRangeEndTextStyle]; + computedSelectedDayStyle = [ + styles.endDayWrapper, + selectedRangeStyle, + selectedRangeEndStyle, + ]; + selectedDayTextStyle = [ + styles.selectedDayLabel, + propSelectedDayTextStyle, + selectedRangeEndTextStyle, + ]; } // Apply style if start date is the same as end date - if (isThisDaySameAsSelectedEnd && - isThisDaySameAsSelectedStart && - selectedEndDate.isSame(selectedStartDate, 'day')) - { - computedSelectedDayStyle = [styles.selectedDay, styles.selectedDayBackground, selectedRangeStyle]; - selectedDayTextStyle = [styles.selectedDayLabel, propSelectedDayTextStyle, selectedRangeStartTextStyle]; + if ( + isThisDaySameAsSelectedEnd && + isThisDaySameAsSelectedStart && + selectedEndDate.isSame(selectedStartDate, "day") + ) { + computedSelectedDayStyle = [ + styles.selectedDay, + styles.selectedDayBackground, + selectedRangeStyle, + ]; + selectedDayTextStyle = [ + styles.selectedDayLabel, + propSelectedDayTextStyle, + selectedRangeStartTextStyle, + ]; } // Apply style for days inside of range, excluding start & end dates. - if (thisDay.isBetween(selectedStartDate, selectedEndDate, 'day', '()')) { + if ( + thisDay.isBetween(selectedStartDate, selectedEndDate, "day", "()") + ) { computedSelectedDayStyle = [styles.inRangeDay, selectedRangeStyle]; - selectedDayTextStyle = [styles.selectedDayLabel, propSelectedDayTextStyle]; + selectedDayTextStyle = [ + styles.selectedDayLabel, + propSelectedDayTextStyle, + ]; } } // Apply style if start date has been selected but end date has not - if (selectedStartDate && - !selectedEndDate && - isThisDaySameAsSelectedStart) - { - computedSelectedDayStyle = [styles.startDayWrapper, selectedRangeStyle, selectedRangeStartStyle]; - selectedDayTextStyle = [styles.selectedDayLabel, propSelectedDayTextStyle, selectedRangeStartTextStyle]; + if ( + selectedStartDate && + !selectedEndDate && + isThisDaySameAsSelectedStart + ) { + computedSelectedDayStyle = [ + styles.startDayWrapper, + selectedRangeStyle, + selectedRangeStartStyle, + ]; + selectedDayTextStyle = [ + styles.selectedDayLabel, + propSelectedDayTextStyle, + selectedRangeStartTextStyle, + ]; // Override out of range start day text style when minRangeDuration = 1. // This allows selected start date's text to be styled by selectedRangeStartTextStyle // even when it's below minRangeDuration. overrideOutOfRangeTextStyle = selectedRangeStartTextStyle; } } - if (dateOutOfRange) { // start or end date selected, and this date outside of range. + if (dateOutOfRange) { + // start or end date selected, and this date outside of range. return ( - - - - { day } - + + + + {day} - - + {matchingDots?.length > 0 && ( - - {matchingDots[0].colors.slice(0, matchingDots[0].value).map((color, index) => ( - - ))} + + {matchingDots[0].colors + .slice(0, matchingDots[0].value) + .map((color, index) => ( + + ))} )} ); } else { return ( - + onPressDay({year, month, day}) }> - - { day } + style={[custom.style, computedSelectedDayStyle, selectedDayStyle]} + onPress={() => onPressDay({ year, month, day })} + > + + {day} {matchingDots?.length > 0 && ( - - {matchingDots[0].colors.slice(0, matchingDots[0].value).map((color, index) => ( - - ))} - - )} + + {matchingDots[0].colors + .slice(0, matchingDots[0].value) + .map((color, index) => ( + + ))} + + )} ); } - } - - else { // dateOutOfRange = true, and no selected start or end date. - const custom = getCustomDateStyle({customDatesStyles, date: thisDay}); + } else { + // dateOutOfRange = true, and no selected start or end date. + const custom = getCustomDateStyle({ customDatesStyles, date: thisDay }); // Allow customDatesStyles to override disabled dates if allowDisabled set if (!custom.allowDisabled) { custom.containerStyle = null; @@ -257,48 +370,62 @@ dateOutOfRange = dateIsAfterMax || dateIsBeforeMin || dateIsDisabled || dateRang custom.textStyle = null; } return ( - + - - { day } + + {day} - {matchingDots?.length > 0 && ( - - {matchingDots[0].colors.slice(0, matchingDots[0].value).map((color, index) => ( - + {matchingDots?.length > 0 && ( + + {matchingDots[0].colors + .slice(0, matchingDots[0].value) + .map((color, index) => ( + ))} - - )} - - - + + )} ); } } -function getCustomDateStyle({customDatesStyles, date}) { +function getCustomDateStyle({ customDatesStyles, date }) { if (Array.isArray(customDatesStyles)) { for (let cds of customDatesStyles) { - if (date.isSame(moment(cds.date), 'day')) { - return {...cds}; + if (date.isSame(moment(cds.date), "day")) { + return { ...cds }; } } - } - else if (customDatesStyles instanceof Function) { + } else if (customDatesStyles instanceof Function) { let cds = customDatesStyles(date) || {}; - return {...cds}; + return { ...cds }; } return {}; } - Day.defaultProps = { customDatesStyles: [], - dotsData : [], - monthDates:(item)=>{console.log("item===")} - + dotsData: [], + monthDates: (item) => { + console.log("item==="); + }, }; Day.propTypes = { @@ -309,4 +436,4 @@ Day.propTypes = { minRangeDuration: PropTypes.oneOfType([PropTypes.array, PropTypes.number]), maxRangeDuration: PropTypes.oneOfType([PropTypes.array, PropTypes.number]), }; -export default (Day) +export default Day; From 95e6aefbd6604dd1510508c852fab50ab9578488 Mon Sep 17 00:00:00 2001 From: Saad Awan <71684740+saadlatif75@users.noreply.github.com> Date: Thu, 16 Nov 2023 14:03:23 +0500 Subject: [PATCH 5/5] git ignore --- .gitignore | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index 158b5d1c..cc3402c7 100644 --- a/.gitignore +++ b/.gitignore @@ -9,7 +9,8 @@ node_modules/**/* example/node_modules/ example/CalendarPicker/ example/package-lock.json - +*.apk +*.aab # Xcode build/ *.pbxuser