From 86d67a318205b2f03c426adf6220e991aaa6c86a Mon Sep 17 00:00:00 2001 From: Melloware Date: Fri, 1 Dec 2023 08:57:59 -0500 Subject: [PATCH] Fix #5471: Calendar PT refactor (#5483) --- .../doc/calendar/theming/tailwinddoc.js | 96 +++++++++++++------ components/lib/calendar/Calendar.js | 14 +-- components/lib/passthrough/tailwind/index.js | 62 ++++++------ 3 files changed, 102 insertions(+), 70 deletions(-) diff --git a/components/doc/calendar/theming/tailwinddoc.js b/components/doc/calendar/theming/tailwinddoc.js index fd4cf5a2b6..6054d24860 100644 --- a/components/doc/calendar/theming/tailwinddoc.js +++ b/components/doc/calendar/theming/tailwinddoc.js @@ -29,11 +29,11 @@ const Tailwind = { }) }) }, - dropdownbutton: ({ props }) => ({ - root: { - className: classNames({ 'rounded-l-none': props.showIcon }) - } - }), + dropdownButton: { + root: ({ props }) => ({ + className: classNames({ 'rounded-l-none': props.icon }) + }) + }, panel: ({ props }) => ({ className: classNames('bg-white dark:bg-gray-900', 'min-w-[350px]', { 'shadow-md border-0 absolute': !props.inline, @@ -43,12 +43,14 @@ const Tailwind = { header: { className: classNames('flex items-center justify-between', 'p-2 text-gray-700 dark:text-white/80 bg-white dark:bg-gray-900 font-semibold m-0 border-b border-gray-300 dark:border-blue-900/40 rounded-t-lg') }, - previousbutton: { - className: classNames( - 'flex items-center justify-center cursor-pointer overflow-hidden relative', - 'w-8 h-8 text-gray-600 dark:text-white/70 border-0 bg-transparent rounded-full transition-colors duration-200 ease-in-out', - 'hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 ' - ) + previousButton: { + root: ({ props }) => ({ + className: classNames( + 'flex items-center justify-center cursor-pointer overflow-hidden relative', + 'w-8 h-8 text-gray-600 dark:text-white/70 border-0 bg-transparent rounded-full transition-colors duration-200 ease-in-out', + 'hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 ' + ) + }) }, title: 'leading-8 mx-auto', monthTitle: { @@ -57,20 +59,22 @@ const Tailwind = { yearTitle: { className: classNames('text-gray-700 dark:text-white/80 transition duration-200 font-semibold p-2', 'hover:text-blue-500') }, - nextbutton: { - className: classNames( - 'flex items-center justify-center cursor-pointer overflow-hidden relative', - 'w-8 h-8 text-gray-600 dark:text-white/70 border-0 bg-transparent rounded-full transition-colors duration-200 ease-in-out', - 'hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 ' - ) + nextButton: { + root: ({ props }) => ({ + className: classNames( + 'flex items-center justify-center cursor-pointer overflow-hidden relative', + 'w-8 h-8 text-gray-600 dark:text-white/70 border-0 bg-transparent rounded-full transition-colors duration-200 ease-in-out', + 'hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 ' + ) + }) }, table: { className: classNames('border-collapse w-full', 'my-2') }, - tableheadercell: 'p-2', + tableHeaderCell: 'p-2', weekday: 'text-gray-600 dark:text-white/70', day: 'p-2', - daylabel: ({ context }) => ({ + dayLabel: ({ context }) => ({ className: classNames( 'w-10 h-10 rounded-full transition-shadow duration-200 border-transparent border', 'flex items-center justify-center mx-auto overflow-hidden relative', @@ -85,7 +89,7 @@ const Tailwind = { } ) }), - monthpicker: 'my-2', + monthPicker: 'my-2', month: ({ context }) => ({ className: classNames( 'w-1/3 inline-flex items-center justify-center cursor-pointer overflow-hidden relative', @@ -94,7 +98,7 @@ const Tailwind = { { 'text-gray-600 dark:text-white/70 bg-transprent hover:bg-gray-200 dark:hover:bg-gray-800/80': !context.selected && !context.disabled, 'text-blue-700 bg-blue-100 hover:bg-blue-200': context.selected && !context.disabled } ) }), - yearpicker: { + yearPicker: { className: classNames('my-2') }, year: ({ context }) => ({ @@ -108,33 +112,67 @@ const Tailwind = { } ) }), - timepicker: { + timePicker: { className: classNames('flex justify-center items-center', 'border-t-1 border-solid border-gray-300 p-2') }, - separatorcontainer: 'flex items-center flex-col px-2', + separatorContainer: 'flex items-center flex-col px-2', separator: 'text-xl', - hourpicker: 'flex items-center flex-col px-2', - minutepicker: 'flex items-center flex-col px-2', - ampmpicker: 'flex items-center flex-col px-2', - incrementbutton: { + hourPicker: 'flex items-center flex-col px-2', + minutePicker: 'flex items-center flex-col px-2', + ampmPicker: 'flex items-center flex-col px-2', + incrementButton: { className: classNames( 'flex items-center justify-center cursor-pointer overflow-hidden relative', 'w-8 h-8 text-gray-600 dark:text-white/70 border-0 bg-transparent rounded-full transition-colors duration-200 ease-in-out', 'hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 ' ) }, - decrementbutton: { + decrementButton: { className: classNames( 'flex items-center justify-center cursor-pointer overflow-hidden relative', 'w-8 h-8 text-gray-600 dark:text-white/70 border-0 bg-transparent rounded-full transition-colors duration-200 ease-in-out', 'hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 ' ) }, - groupcontainer: 'flex', + groupContainer: 'flex', group: { className: classNames('flex-1', 'border-l border-gray-300 pr-0.5 pl-0.5 pt-0 pb-0', 'first:pl-0 first:border-l-0') }, transition: TRANSITIONS.overlay + }, + listbox: { + root: { + className: classNames('bg-white dark:bg-gray-900 border border-gray-400 dark:border-blue-900/40 transition-colors duration-200 ease-in-out rounded-md', 'w-full md:w-56') + }, + wrapper: 'overflow-auto', + list: 'py-3 list-none m-0', + item: ({ context }) => ({ + className: classNames('cursor-pointer font-normal overflow-hidden relative whitespace-nowrap', 'm-0 p-3 border-0 transition-shadow duration-200 rounded-none', { + 'text-gray-700 hover:text-gray-700 hover:bg-gray-200 dark:text-white/80 dark:hover:bg-gray-800': !context.focused && !context.selected, + 'bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90 hover:text-gray-700 hover:bg-gray-200 dark:text-white/80 dark:hover:bg-gray-800': context.focused && !context.selected, + 'bg-blue-100 text-blue-700 dark:bg-blue-400 dark:text-white/80': context.focused && context.selected, + 'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80': !context.focused && context.selected + }) + }), + itemgroup: { + className: classNames('m-0 p-3 text-gray-800 bg-white font-bold', 'dark:bg-gray-900 dark:text-white/80', 'cursor-auto') + }, + header: { + className: classNames('p-3 border-b border-gray-300 text-gray-700 bg-gray-100 mt-0 rounded-tl-lg rounded-tr-lg', 'dark:bg-gray-800 dark:text-white/80 dark:border-blue-900/40') + }, + filtercontainer: 'relative', + filterinput: { + root: { + className: classNames( + 'pr-7 -mr-7', + 'w-full', + 'font-sans text-base text-gray-700 bg-white py-3 px-3 border border-gray-300 transition duration-200 rounded-lg appearance-none', + 'dark:bg-gray-900 dark:border-blue-900/40 dark:hover:border-blue-300 dark:text-white/80', + 'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]' + ) + } + }, + filtericon: '-mt-2 absolute top-1/2' } ` }; diff --git a/components/lib/calendar/Calendar.js b/components/lib/calendar/Calendar.js index cbf1728d5f..7dd1ebc461 100644 --- a/components/lib/calendar/Calendar.js +++ b/components/lib/calendar/Calendar.js @@ -2682,12 +2682,7 @@ export const Calendar = React.memo( ptm('previousButton') ); - return ( - - ); + return - ); + return