Skip to content

Commit

Permalink
fix(datepicker): incorrect month view when date valid after correction
Browse files Browse the repository at this point in the history
  • Loading branch information
@binodnepali
binodnepali committed Jul 18, 2023
1 parent a305478 commit ac2613b
Show file tree
Hide file tree
Showing 3 changed files with 241 additions and 233 deletions.
176 changes: 89 additions & 87 deletions src/components/NepaliCalendar/NepaliCalendar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
import { useEffect, useState } from 'react';
import { useEffect, useState } from 'react'

import ExpandMoreIcon from '@assets/More.svg';
import NextIcon from '@assets/Next.svg';
import PrevIcon from '@assets/Prev.svg';
import ExpandMoreIcon from '@assets/More.svg'
import NextIcon from '@assets/Next.svg'
import PrevIcon from '@assets/Prev.svg'

import { Button } from '@ui/Button/Button';
import { useNepaliCalendar } from '@hooks/useNepaliCalendar';
import { Language } from '@/types/Language';
import { NepaliDate } from '@/types/NepaliDate';
import { Button } from '@ui/Button/Button'
import { useNepaliCalendar } from '@hooks/useNepaliCalendar'
import { Language } from '@/types/Language'
import { NepaliDate } from '@/types/NepaliDate'

interface NepaliCalendarProps {
className?: string;
lang?: Language;
separator?: string;
selectedDate?: NepaliDate;
onDateSelect?: (date: NepaliDate) => void;
className?: string
lang?: Language
separator?: string
selectedDate?: NepaliDate
onDateSelect?: (date: NepaliDate) => void
}

export const NepaliCalendar = ({
Expand All @@ -23,7 +23,7 @@ export const NepaliCalendar = ({
selectedDate,
onDateSelect,
}: NepaliCalendarProps) => {
const [showYearSelector, setShowYearSelector] = useState(false);
const [showYearSelector, setShowYearSelector] = useState(false)

const {
selectedLocalisedYear,
Expand All @@ -38,15 +38,15 @@ export const NepaliCalendar = ({
days,
} = useNepaliCalendar({
lang,
});
})

const handleOnSelectDate = (date: {
id: string;
value: number;
label: string;
id: string
value: number
label: string
}) => {
if (!selectedLocalisedYear || !selectedLocalisedMonth) {
return;
return
}

onDateSelect?.({
Expand All @@ -56,138 +56,140 @@ export const NepaliCalendar = ({
value: selectedLocalisedMonth.value + 1,
},
date,
});
};
})
}

const handleOnYearClick = (year: number) => {
const selectedYear = years.find((y) => y.value === year);
const selectedYear = years.find((y) => y.value === year)
if (!selectedYear) {
console.warn('Year not found');
console.warn('Year not found')

return;
return
}

setSelectedLocalisedYear(() => selectedYear);
setShowYearSelector(() => false);
};
setSelectedLocalisedYear(() => selectedYear)
setShowYearSelector(() => false)
}

const handleOnPrevClick = () => {
if (!selectedLocalisedYear || !selectedLocalisedMonth) {
return;
return
}

const prevMonth = selectedLocalisedMonth.value - 1;
const prevYear = selectedLocalisedYear.value - 1;
const prevMonth = selectedLocalisedMonth.value - 1
const prevYear = selectedLocalisedYear.value - 1

if (prevMonth < 0 && years.find((y) => y.value === prevYear)) {
const foundPrevYear = years.find((y) => y.value === prevYear);
const foundPrevYear = years.find((y) => y.value === prevYear)
if (!foundPrevYear) {
console.warn('Year not found');
return;
console.warn('Year not found')
return
}

const foundPrevMonth = months.find((m) => m.value === 11);
const foundPrevMonth = months.find((m) => m.value === 11)
if (!foundPrevMonth) {
console.warn('Month not found');
return;
console.warn('Month not found')
return
}

setSelectedLocalisedYear(() => foundPrevYear);
setSelectedLocalisedMonth(() => foundPrevMonth);
setSelectedLocalisedYear(() => foundPrevYear)
setSelectedLocalisedMonth(() => foundPrevMonth)

return;
return
}

if (prevMonth < 0) {
return;
return
}

const foundPrevMonth = months.find((m) => m.value === prevMonth);
const foundPrevMonth = months.find((m) => m.value === prevMonth)
if (!foundPrevMonth) {
console.warn('Month not found');
return;
console.warn('Month not found')
return
}

setSelectedLocalisedMonth(() => foundPrevMonth);
};
setSelectedLocalisedMonth(() => foundPrevMonth)
}

const handleOnNextClick = () => {
if (!selectedLocalisedYear || !selectedLocalisedMonth) {
return;
return
}

const nextMonth = selectedLocalisedMonth.value + 1;
const nextYear = selectedLocalisedYear.value + 1;
const nextMonth = selectedLocalisedMonth.value + 1
const nextYear = selectedLocalisedYear.value + 1

if (
nextMonth > months.length - 1 &&
years.find((y) => y.value === nextYear)
) {
const foundNextYear = years.find((y) => y.value === nextYear);
const foundNextYear = years.find((y) => y.value === nextYear)
if (!foundNextYear) {
console.warn('Year not found');
return;
console.warn('Year not found')
return
}

const foundNextMonth = months.find((m) => m.value === 0);
const foundNextMonth = months.find((m) => m.value === 0)
if (!foundNextMonth) {
console.warn('Month not found');
return;
console.warn('Month not found')
return
}

setSelectedLocalisedYear(() => foundNextYear);
setSelectedLocalisedMonth(() => foundNextMonth);
return;
setSelectedLocalisedYear(() => foundNextYear)
setSelectedLocalisedMonth(() => foundNextMonth)
return
}

if (nextMonth > months.length - 1) {
return;
return
}

const foundNextMonth = months.find((m) => m.value === nextMonth);
const foundNextMonth = months.find((m) => m.value === nextMonth)
if (!foundNextMonth) {
console.warn('Month not found');
return;
console.warn('Month not found')
return
}

setSelectedLocalisedMonth(() => foundNextMonth);
};
setSelectedLocalisedMonth(() => foundNextMonth)
}

useEffect(() => {
if (!selectedDate) return;
if (!selectedDate) return

const foundYear = years.find((y) => y.value === selectedDate.year.value);
const foundYear = years.find((y) => y.value === selectedDate.year.value)
if (!foundYear) {
console.warn('Year not found');
return;
console.warn('Year not found')
return
}

const foundMonth = months.find((m) => m.value === selectedDate.month.value);
const foundMonth = months.find(
(m) => m.value === selectedDate.month.value - 1,
)
if (!foundMonth) {
console.warn('Month not found');
return;
console.warn('Month not found')
return
}

setSelectedLocalisedYear(() => foundYear);
setSelectedLocalisedMonth(() => foundMonth);
setSelectedLocalisedYear(() => foundYear)
setSelectedLocalisedMonth(() => foundMonth)
}, [
months,
selectedDate,
setSelectedLocalisedMonth,
setSelectedLocalisedYear,
years,
]);
])

return (
<div className={`bg-neutral-50 py-4 px-4 rounded-md ${className}`}>
<div className='flex flex-row justify-between'>
<div className='flex flex-row gap-2 items-center'>
<div className="flex flex-row justify-between">
<div className="flex flex-row gap-2 items-center">
<span>{selectedLocalisedMonth?.label}</span>
<span>{selectedLocalisedYear?.label}</span>
<Button onClick={() => setShowYearSelector((value) => !value)}>
<ExpandMoreIcon
width='36'
height='36'
width="36"
height="36"
className={`transition-transform duration-500
${showYearSelector ? 'transform rotate-180' : ''}
`}
Expand All @@ -201,23 +203,23 @@ export const NepaliCalendar = ({
}`}
>
<Button onClick={handleOnPrevClick}>
<PrevIcon width='36' height='36' />
<PrevIcon width="36" height="36" />
</Button>
<Button onClick={handleOnNextClick}>
<NextIcon width='36' height='36' />
<NextIcon width="36" height="36" />
</Button>
</div>
</div>

{!showYearSelector && (
<>
<div className='grid grid-cols-7 gap-2 justify-items-center mt-4 '>
<div className="grid grid-cols-7 gap-2 justify-items-center mt-4 ">
{days.map((day) => (
<span key={day.value}>{day.label}</span>
))}
</div>

<div className='grid grid-cols-7 gap-2 justify-items-center mt-4'>
<div className="grid grid-cols-7 gap-2 justify-items-center mt-4">
{selectedLocalisedDates.map((date) => (
<Button
key={date.id}
Expand All @@ -236,17 +238,17 @@ export const NepaliCalendar = ({
)}

{showYearSelector && (
<div className='max-h-72 overflow-y-auto'>
<div className='grid grid-cols-4 gap-2 justify-items-center mt-4 max-h-xs'>
<div className="max-h-72 overflow-y-auto">
<div className="grid grid-cols-4 gap-2 justify-items-center mt-4 max-h-xs">
{years.map((y) => (
<Button
key={y.value}
onClick={() => handleOnYearClick(y.value)}
active={currentLocalisedDate?.id.includes(y.value.toString())}
selected={selectedLocalisedYear?.label.includes(
y.value.toString()
y.value.toString(),
)}
variant='pilled'
variant="pilled"
>
<span>{y.label}</span>
</Button>
Expand All @@ -255,5 +257,5 @@ export const NepaliCalendar = ({
</div>
)}
</div>
);
};
)
}
Loading

0 comments on commit ac2613b

Please sign in to comment.