From 4d6fd107d25739806dd394bb65458406d25b0658 Mon Sep 17 00:00:00 2001 From: Jaied Al Sabid <87969327+jaieds@users.noreply.github.com> Date: Sat, 4 Jan 2025 13:15:29 +0600 Subject: [PATCH] chore: Lint --- .../datepicker/datepicker-component.tsx | 446 +++++++++--------- src/components/datepicker/datepicker.tsx | 8 +- 2 files changed, 228 insertions(+), 226 deletions(-) diff --git a/src/components/datepicker/datepicker-component.tsx b/src/components/datepicker/datepicker-component.tsx index 0920c75f..5d853f28 100644 --- a/src/components/datepicker/datepicker-component.tsx +++ b/src/components/datepicker/datepicker-component.tsx @@ -42,7 +42,7 @@ export interface DatePickerProps { /** The selected dates. */ selectedDates?: Date | Date[] | TDateRange | undefined; /** Sets the selected dates. */ - setSelectedDates: (dates: Date | Date[] | TDateRange | undefined) => void; + setSelectedDates: ( dates: Date | Date[] | TDateRange | undefined ) => void; /** Show or hide days outside of the current month. */ showOutsideDays?: boolean; /** Defines the selection selectionType of the date picker: single, range, or multiple dates. */ @@ -58,7 +58,7 @@ export interface DatePickerProps { } interface CustomMonthCaptionProps { - goToMonth: (date: Date) => void; + goToMonth: ( date: Date ) => void; nextMonth: Date; previousMonth: Date; calendarMonth: { date: Date }; @@ -75,17 +75,17 @@ interface CustomDayButtonProps { range_start: boolean; range_end: boolean; }; - onSelect: (date: Date) => void; - onMouseEnter?: (event: React.MouseEvent) => void; - onMouseLeave?: (event: React.MouseEvent) => void; - onClick?: (event: React.MouseEvent) => void; - onKeyDown?: (event: React.KeyboardEvent) => void; - onFocus?: (event: React.FocusEvent) => void; - onBlur?: (event: React.FocusEvent) => void; + onSelect: ( date: Date ) => void; + onMouseEnter?: ( event: React.MouseEvent ) => void; + onMouseLeave?: ( event: React.MouseEvent ) => void; + onClick?: ( event: React.MouseEvent ) => void; + onKeyDown?: ( event: React.KeyboardEvent ) => void; + onFocus?: ( event: React.FocusEvent ) => void; + onBlur?: ( event: React.FocusEvent ) => void; children: ReactNode; } -const DatePickerComponent = ({ +const DatePickerComponent = ( { width, className: outerClassName, // Renamed to avoid shadowing classNames, @@ -97,79 +97,79 @@ const DatePickerComponent = ({ alignment = 'horizontal', numberOfMonths, ...props -}: DatePickerProps) => { +}: DatePickerProps ) => { // check footer is a valid component. const isFooter = - React.isValidElement(props.footer) || + React.isValidElement( props.footer ) || typeof props.footer === 'function'; - const [showMonthSelect, setShowMonthSelect] = useState(false); - const [showYearSelect, setShowYearSelect] = useState(false); // New state for year selection - const [selectedYear, setSelectedYear] = useState(new Date().getFullYear()); - const [yearRangeStart, setYearRangeStart] = useState( - selectedYear - (selectedYear % 24) + const [ showMonthSelect, setShowMonthSelect ] = useState( false ); + const [ showYearSelect, setShowYearSelect ] = useState( false ); // New state for year selection + const [ selectedYear, setSelectedYear ] = useState( new Date().getFullYear() ); + const [ yearRangeStart, setYearRangeStart ] = useState( + selectedYear - ( selectedYear % 24 ) ); - if (selectedDates === undefined ) { - if (mode === 'multiple') { + if ( selectedDates === undefined ) { + if ( mode === 'multiple' ) { selectedDates = []; - } else if (mode === 'range') { + } else if ( mode === 'range' ) { selectedDates = { from: undefined, to: undefined }; } else { selectedDates = undefined; } } - function CustomMonthCaption(customMonthProps: CustomMonthCaptionProps) { + function CustomMonthCaption( customMonthProps: CustomMonthCaptionProps ) { const { goToMonth, nextMonth, previousMonth } = useDayPicker(); const yearFormatted = format( customMonthProps.calendarMonth.date, 'yyyy' ); - const month = format(customMonthProps.calendarMonth.date, 'MMMM'); + const month = format( customMonthProps.calendarMonth.date, 'MMMM' ); - const startOfWeek = new Date(customMonthProps.calendarMonth.date); - startOfWeek.setDate(startOfWeek.getDate() - startOfWeek.getDay()); + const startOfWeek = new Date( customMonthProps.calendarMonth.date ); + startOfWeek.setDate( startOfWeek.getDate() - startOfWeek.getDay() ); - const weekdays = Array.from({ length: 7 }, (_, i) => { - const date = new Date(startOfWeek); - date.setDate(startOfWeek.getDate() + i); - return formatWeekdayName(date); - }); + const weekdays = Array.from( { length: 7 }, ( _, i ) => { + const date = new Date( startOfWeek ); + date.setDate( startOfWeek.getDate() + i ); + return formatWeekdayName( date ); + } ); const handlePrevButtonClick = () => { - if (showYearSelect) { - setYearRangeStart(yearRangeStart - 24); - } else if (showMonthSelect) { + if ( showYearSelect ) { + setYearRangeStart( yearRangeStart - 24 ); + } else if ( showMonthSelect ) { const prevYear = new Date( selectedYear - 1, customMonthProps.calendarMonth.date.getMonth() ); - setSelectedYear(prevYear.getFullYear()); - goToMonth(prevYear); + setSelectedYear( prevYear.getFullYear() ); + goToMonth( prevYear ); } else { - goToMonth(previousMonth!); + goToMonth( previousMonth! ); } }; const handleNextButtonClick = () => { - if (showYearSelect) { - setYearRangeStart(yearRangeStart + 24); - } else if (showMonthSelect) { + if ( showYearSelect ) { + setYearRangeStart( yearRangeStart + 24 ); + } else if ( showMonthSelect ) { const nextYear = new Date( selectedYear + 1, customMonthProps.calendarMonth.date.getMonth() ); - setSelectedYear(nextYear.getFullYear()); - goToMonth(nextYear); + setSelectedYear( nextYear.getFullYear() ); + goToMonth( nextYear ); } else { - goToMonth(nextMonth!); + goToMonth( nextMonth! ); } }; - const handleYearClick = (yearValue: number) => { - setSelectedYear(yearValue); - setShowYearSelect(false); - setShowMonthSelect(true); + const handleYearClick = ( yearValue: number ) => { + setSelectedYear( yearValue ); + setShowYearSelect( false ); + setShowMonthSelect( true ); goToMonth( new Date( yearValue, @@ -179,12 +179,12 @@ const DatePickerComponent = ({ }; let displayText; - if (showYearSelect) { - displayText = `${yearRangeStart} - ${yearRangeStart + 23}`; - } else if (showMonthSelect) { + if ( showYearSelect ) { + displayText = `${ yearRangeStart } - ${ yearRangeStart + 23 }`; + } else if ( showMonthSelect ) { displayText = yearFormatted; } else { - displayText = `${month} ${yearFormatted}`; + displayText = `${ month } ${ yearFormatted }`; } return ( @@ -192,7 +192,7 @@ const DatePickerComponent = ({
- {showYearSelect && ( + { showYearSelect && (
- {generateYearRange(yearRangeStart).map((yearValue) => ( + { generateYearRange( yearRangeStart ).map( ( yearValue ) => ( - ))} + ) ) }
- )} + ) } - {showMonthSelect && !showYearSelect && ( + { showMonthSelect && ! showYearSelect && (
- {Array.from({ length: 12 }, (_, monthIndex) => ( + { Array.from( { length: 12 }, ( _, monthIndex ) => ( - ))} + ) ) }
- )} + ) } - {!showMonthSelect && !showYearSelect && ( - - )} + { ! showMonthSelect && ! showYearSelect && ( + + ) } ); } - const MonthSelectors = ({ weekdays }: { weekdays: string[] }) => { + const MonthSelectors = ( { weekdays }: { weekdays: string[] } ) => { return (
- {weekdays.map((weekday, weekdayIndex) => ( + { weekdays.map( ( weekday, weekdayIndex ) => ( - ))} + ) ) }
); }; - const CustomDayButton = ({ + const CustomDayButton = ( { day, modifiers, ...customDayProps - }: CustomDayButtonProps) => { + }: CustomDayButtonProps ) => { const { selected: isSelected, today: isToday, @@ -332,20 +332,20 @@ const DatePickerComponent = ({ const isPartOfRange = isRangeStart || isRangeEnd || isRangeMiddle; const today = new Date(); - const rangeEnd = (selectedDates as TDateRange)?.to; + const rangeEnd = ( selectedDates as TDateRange )?.to; const isThisMonth = - format(day.displayMonth, 'yyyy-MM') === format(today, 'yyyy-MM'); + format( day.displayMonth, 'yyyy-MM' ) === format( today, 'yyyy-MM' ); const isRangeEndInCurrentMonth = rangeEnd && - format(rangeEnd, 'yyyy-MM') === format(day.date, 'yyyy-MM'); - const previousMonth = subMonths(today, 1); + format( rangeEnd, 'yyyy-MM' ) === format( day.date, 'yyyy-MM' ); + const previousMonth = subMonths( today, 1 ); const isPreviousMonth = - format(day.date, 'yyyy-MM') === format(previousMonth, 'yyyy-MM'); + format( day.date, 'yyyy-MM' ) === format( previousMonth, 'yyyy-MM' ); const shouldShowDay = isThisMonth || isRangeEndInCurrentMonth || isPartOfRange; - const showOutsideDates = !showOutsideDays && isOutside; + const showOutsideDates = ! showOutsideDays && isOutside; // Common class for disabled outside days const disabledOutsideClass = @@ -354,45 +354,43 @@ const DatePickerComponent = ({ const buttonClasses = cn( 'h-10 w-10 flex items-center justify-center transition text-text-secondary relative text-sm', 'border-none rounded', - (isSelected || isPartOfRange) && (!isOutside || isPreviousMonth) + ( isSelected || isPartOfRange ) && ( ! isOutside || isPreviousMonth ) ? 'bg-background-brand text-text-on-color' : 'bg-transparent hover:bg-button-tertiary-hover', - isRangeMiddle && shouldShowDay && (!isOutside || isPartOfRange) + isRangeMiddle && shouldShowDay && ( ! isOutside || isPartOfRange ) ? 'bg-brand-background-50 text-text-secondary rounded-none' : '', isDisabled ? 'opacity-50 cursor-not-allowed text-text-disabled' : 'cursor-pointer', - (isOutside && !isPartOfRange) || - (!shouldShowDay && isOutside) || - (isOutside && !isPreviousMonth) + ( isOutside && ! isPartOfRange ) || + ( ! shouldShowDay && isOutside ) || + ( isOutside && ! isPreviousMonth ) ? disabledOutsideClass : '' ); - const handleHover = (event: React.MouseEvent) => { - if (typeof customDayProps.onMouseEnter === 'function') { - customDayProps.onMouseEnter(event); + const handleHover = ( event: React.MouseEvent ) => { + if ( typeof customDayProps.onMouseEnter === 'function' ) { + customDayProps.onMouseEnter( event ); } - event.currentTarget.setAttribute('data-hover', 'true'); + event.currentTarget.setAttribute( 'data-hover', 'true' ); }; - const handleLeave = (event: React.MouseEvent) => { - if (typeof customDayProps.onMouseLeave === 'function') { - customDayProps.onMouseLeave(event); + const handleLeave = ( event: React.MouseEvent ) => { + if ( typeof customDayProps.onMouseLeave === 'function' ) { + customDayProps.onMouseLeave( event ); } - event.currentTarget.setAttribute('data-hover', 'false'); + event.currentTarget.setAttribute( 'data-hover', 'false' ); }; - const handleClick = (event: React.MouseEvent) => { - if (typeof customDayProps.onClick === 'function') { - customDayProps.onClick(event); + const handleClick = ( event: React.MouseEvent ) => { + if ( typeof customDayProps.onClick === 'function' ) { + customDayProps.onClick( event ); } }; - console.log('isSelected', isSelected); - return ( ); }; @@ -424,20 +422,20 @@ const DatePickerComponent = ({ const CustomMonths = ( monthGridProps: MonthGridProps ) => { return (
- {( + { ( monthGridProps as { children: React.ReactElement[]; } - ).children[1].props.children.map( - (month: React.ReactElement, index: number) => ( + ).children[ 1 ].props.children.map( + ( month: React.ReactElement, index: number ) => (
- {month} + { month }
) - )} + ) }
); }; @@ -446,36 +444,36 @@ const DatePickerComponent = ({ selectedDate: Date | TDateRange | Date[], trigger: Date ) => { - if (mode === 'range') { + if ( mode === 'range' ) { const currentSelectedValue = selectedDates as TDateRange; if ( - (currentSelectedValue?.from && currentSelectedValue?.to) || - (!currentSelectedValue?.from && !currentSelectedValue?.to) + ( currentSelectedValue?.from && currentSelectedValue?.to ) || + ( ! currentSelectedValue?.from && ! currentSelectedValue?.to ) ) { - setSelectedDates({ from: trigger, to: undefined }); + setSelectedDates( { from: trigger, to: undefined } ); return; } - setSelectedDates(selectedDate); - } else if (mode === 'multiple') { + setSelectedDates( selectedDate ); + } else if ( mode === 'multiple' ) { if ( - (selectedDates as Date[])!.some( - (date) => - format(date, 'yyyy-MM-dd') === - format(trigger, 'yyyy-MM-dd') + ( selectedDates as Date[] )!.some( + ( date ) => + format( date, 'yyyy-MM-dd' ) === + format( trigger, 'yyyy-MM-dd' ) ) ) { setSelectedDates( - (selectedDates as Date[])!.filter( - (date) => - format(date, 'yyyy-MM-dd') !== - format(trigger, 'yyyy-MM-dd') + ( selectedDates as Date[] )!.filter( + ( date ) => + format( date, 'yyyy-MM-dd' ) !== + format( trigger, 'yyyy-MM-dd' ) ) ); } else { - setSelectedDates([...(selectedDates as Date[]), trigger]); + setSelectedDates( [ ...( selectedDates as Date[] ), trigger ] ); } - } else if (mode === 'single') { - setSelectedDates(selectedDate); + } else if ( mode === 'single' ) { + setSelectedDates( selectedDate ); } }; @@ -497,26 +495,26 @@ const DatePickerComponent = ({ return ( <> - {/* @ts-ignore */} + { /* @ts-expect-error: Type mismatch due to mode type. */ } { - if (mode === 'range') { + mode={ mode } + selected={ ( () => { + if ( mode === 'range' ) { return selectedDates as TDateRange; } - if (mode === 'multiple') { + if ( mode === 'multiple' ) { return selectedDates as Date[]; } return selectedDates as Date | undefined; - })()} - onSelect={handleSelect} + } )() } + onSelect={ handleSelect } hideNavigation captionLayout="label" - className={cn(outerClassName)} // Using renamed className - formatters={{ + className={ cn( outerClassName ) } // Using renamed className + formatters={ { formatWeekdayName, - }} - classNames={{ + } } + classNames={ { months: monthsClassName, month: 'flex flex-col p-2 gap-1 text-center w-full', caption: 'relative flex justify-center items-center', @@ -527,84 +525,84 @@ const DatePickerComponent = ({ row: 'flex w-full mt-2', cell: 'h-10 w-10 text-center text-sm p-0 relative', ...classNames, - }} - numberOfMonths={numberOfMonths} - components={{ + } } + numberOfMonths={ numberOfMonths } + components={ { MonthCaption: CustomMonthCaption as unknown as CustomComponents['MonthCaption'], DayButton: CustomDayButton as unknown as CustomComponents['DayButton'], - Day: (singleDayProps) => { + Day: ( singleDayProps ) => { return (
); }, Weekdays: () => <>, - Week: (weekProps: any) => { + Week: ( weekProps ) => { return (
- {weekProps.children} + { weekProps.children }
); }, - Months: (monthsProps) => ( + Months: ( monthsProps ) => ( <>
- {( + { ( monthsProps as { children: React.ReactElement[]; } - )?.children?.map((months, monthIndex) => { - if (!months) { + )?.children?.map( ( months, monthIndex ) => { + if ( ! months ) { return null; } return ( - - {( + + { ( months as unknown as React.ReactElement[] - ).map((month, innerMonthIndex) => ( + ).map( ( month, innerMonthIndex ) => ( - {innerMonthIndex > 0 && ( + { innerMonthIndex > 0 && (
- )} - {month} + ) } + { month } - ))} + ) ) } ); - })} + } ) }
), - MonthGrid: (monthGridProps) => - !showMonthSelect && !showYearSelect ? ( - + MonthGrid: ( monthGridProps ) => + ! showMonthSelect && ! showYearSelect ? ( + ) : ( <> ), - }} - {...(mode === 'range' && { required: true })} - {...props} - onDayMouseEnter={(_, __, event) => { - if (mode !== 'range') { + } } + { ...( mode === 'range' && { required: true } ) } + { ...props } + onDayMouseEnter={ ( _, __, event ) => { + if ( mode !== 'range' ) { return; } // if more then 1 selected then no need of hover effect @@ -612,16 +610,16 @@ const DatePickerComponent = ({ // Reset data-hover if more then 1 selected or if none are selected if ( - (selected?.from && selected?.to) || - (!selected?.from && !selected?.to) + ( selected?.from && selected?.to ) || + ( ! selected?.from && ! selected?.to ) ) { const resetButtons = Array.from( - document.querySelectorAll('[data-hover]') + document.querySelectorAll( '[data-hover]' ) ); - resetButtons.forEach((item: Element) => { - item.setAttribute('data-hover', 'false'); - }); + resetButtons.forEach( ( item: Element ) => { + item.setAttribute( 'data-hover', 'false' ); + } ); return; } @@ -631,45 +629,45 @@ const DatePickerComponent = ({ // Find the closest ancestor container element const datesContainer = currentButton.closest( '.bsf-force-ui-month-weeks' - ) as any; + ) as Element; // Find all buttons within the container element const buttons: HTMLButtonElement[] = Array.from( - datesContainer.querySelectorAll('button') + datesContainer.querySelectorAll( 'button' ) ); // Find the index of the current button in the buttons array - const currentIndex = buttons.indexOf(currentButton); + const currentIndex = buttons.indexOf( currentButton ); - // Find the index of the button with aria-selected="true" + // Find the index of the button with data-selected="true" const selectedIndex = buttons.findIndex( - (button: any) => - button.getAttribute('aria-selected') === 'true' + ( button: Element ) => + button.getAttribute( 'data-selected' ) === 'true' ); // Create an array to store the selected buttons const selectedButtons: HTMLButtonElement[] = []; // Determine the range of buttons to select - const start = Math.min(currentIndex, selectedIndex); - const end = Math.max(currentIndex, selectedIndex); + const start = Math.min( currentIndex, selectedIndex ); + const end = Math.max( currentIndex, selectedIndex ); - // Select the buttons between the current button and the button with aria-selected="true" (inclusive) + // Select the buttons between the current button and the button with data-selected="true" (inclusive) // eslint-disable-next-line no-plusplus - for (let i = start; i <= end; i++) { - if (!buttons[i]?.disabled) { - selectedButtons.push(buttons[i]); + for ( let i = start; i <= end; i++ ) { + if ( ! buttons[ i ]?.disabled ) { + selectedButtons.push( buttons[ i ] ); } } - buttons.forEach((item: HTMLButtonElement) => { + buttons.forEach( ( item: HTMLButtonElement ) => { // run over all buttons and set data-hover true to those who in range item.setAttribute( 'data-hover', - selectedButtons.includes(item) ? 'true' : 'false' + selectedButtons.includes( item ) ? 'true' : 'false' ); - }); - }} + } ); + } } /> ); diff --git a/src/components/datepicker/datepicker.tsx b/src/components/datepicker/datepicker.tsx index cceb54f9..90f82e45 100644 --- a/src/components/datepicker/datepicker.tsx +++ b/src/components/datepicker/datepicker.tsx @@ -75,7 +75,9 @@ const DatePicker = ( { return getDefaultSelectedValue( selectionType ); } ); - const handleSelect = ( selectedDate: Date | Date[] | TDateRange | undefined ) => { + const handleSelect = ( + selectedDate: Date | Date[] | TDateRange | undefined + ) => { setSelectedDates( selectedDate ); if ( onDateSelect ) { onDateSelect( selectedDate ); @@ -129,7 +131,9 @@ const DatePicker = ( { const handleCancelClick = () => { setSelectedDates( - selectionType === 'multiple' ? [] : { from: undefined, to: undefined } + selectionType === 'multiple' + ? [] + : { from: undefined, to: undefined } ); if ( onCancel ) { onCancel();