Skip to content

Commit

Permalink
Fix #5471: Calendar PT refactor (#5483)
Browse files Browse the repository at this point in the history
  • Loading branch information
@melloware
melloware authored Dec 1, 2023
1 parent df8e455 commit 86d67a3
Show file tree
Hide file tree
Showing 3 changed files with 102 additions and 70 deletions.
96 changes: 67 additions & 29 deletions components/doc/calendar/theming/tailwinddoc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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: {
Expand All @@ -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',
Expand All @@ -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',
Expand All @@ -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 }) => ({
Expand All @@ -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'
}
`
};
Expand Down
14 changes: 2 additions & 12 deletions components/lib/calendar/Calendar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2682,12 +2682,7 @@ export const Calendar = React.memo(
ptm('previousButton')
);

return (
<button ref={previousButton} {...previousButtonProps}>
{backwardNavigatorIcon}
<Ripple />
</button>
);
return <Button type="button" ref={previousButton} icon={backwardNavigatorIcon} {...previousButtonProps} />;
};

const createForwardNavigator = (isVisible) => {
Expand All @@ -2709,12 +2704,7 @@ export const Calendar = React.memo(
ptm('nextButton')
);

return (
<button ref={nextButton} {...nextButtonProps}>
{forwardNavigatorIcon}
<Ripple />
</button>
);
return <Button type="button" ref={nextButton} icon={forwardNavigatorIcon} {...nextButtonProps} />;
};

const renderMonthsNavigator = (index) => {
Expand Down
62 changes: 33 additions & 29 deletions components/lib/passthrough/tailwind/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1132,11 +1132,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,
Expand All @@ -1146,12 +1146,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: {
Expand All @@ -1160,20 +1162,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',
Expand All @@ -1188,7 +1192,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',
Expand All @@ -1197,7 +1201,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 }) => ({
Expand All @@ -1211,29 +1215,29 @@ 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')
},
Expand Down

0 comments on commit 86d67a3

Please sign in to comment.