sergey/anti-hvost
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: modal calendar styles

Browse Source
This commit is contained in:
Sergey Elpashev
2025-04-21 17:00:03 +03:00
parent 66d7cf0532
commit 607637b5ca
2 changed files with 149 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

148
src/components/ModalCalendar.tsx
View File

@@ -1,3 +1,4 @@
import { cn } from "@/utils/class-merge";
import { FunctionComponent } from "preact";
import { Dispatch, StateUpdater } from "preact/hooks";
import { Calendar } from "primereact/calendar";
@@ -9,10 +10,155 @@ interface ModalCalendarProps {
onClose?: () => void;
}
const TRANSITIONS = {
overlay: {
timeout: 150,
cn: {
enter: "opacity-0 scale-75",
enterActive: "opacity-100 !scale-100 transition-[transform,opacity] duration-150 ease-in",
exit: "opacity-100",
exitActive: "!opacity-0 transition-opacity duration-150 ease-linear",
},
},
};
const ModalCalendar: FunctionComponent<ModalCalendarProps> = ({ isOpen, setIsOpen, onClose }) => {
return (
<ModalWindow isOpen={isOpen} setIsOpen={setIsOpen} onClose={onClose} className="md:h-[40rem] md:w-[30rem]">
<Calendar inline pt={{ "p-calendar": "w-full" }} />
<Calendar
inline
pt={{
root: ({ props }) => ({
className: cn("inline-flex max-w-full relative", {
"opacity-60 select-none pointer-events-none cursor-default": props.disabled,
}),
}),
input: ({ props }) => ({
root: {
className: cn(
"font-sans text-base text-gray-600 bg-white p-3 border border-gray-300 transition-colors duration-200 appearance-none",
"hover:border-blue-500",
{
"rounded-lg": !props.showIcon,
"border-r-0 rounded-l-lg": props.showIcon,
}
),
},
}),
dropdownButton: {
root: ({ props }) => ({
className: cn({ "rounded-l-none": props.icon }),
}),
},
panel: ({ props }) => ({
className: cn("bg-[rgba(251,194,199,0.38)]", "min-w-full", {
"shadow-md border-0 absolute": !props.inline,
"inline-block overflow-x-auto border border-gray-300 p-2 rounded-lg": props.inline,
}),
}),
header: {
className: cn(
"flex items-center justify-between",
"p-2 text-gray-700 bg-white font-semibold m-0 border-b border-gray-300 rounded-t-lg"
),
},
previousButton: {
className: cn(
"flex items-center justify-center cursor-pointer overflow-hidden relative",
"w-8 h-8 text-gray-600 border-0 bg-transparent rounded-full transition-colors duration-200 ease-in-out",
"hover:text-gray-700 hover:border-transparent hover:bg-gray-200 "
),
},
title: { className: "leading-8 mx-auto" },
monthTitle: {
className: cn("text-gray-700 transition duration-200 font-semibold p-2", "mr-2", "hover:text-blue-500"),
},
yearTitle: {
className: cn("text-gray-700 transition duration-200 font-semibold p-2", "hover:text-blue-500"),
},
nextButton: {
className: cn(
"flex items-center justify-center cursor-pointer overflow-hidden relative",
"w-8 h-8 text-gray-600 border-0 bg-transparent rounded-full transition-colors duration-200 ease-in-out",
"hover:text-gray-700 hover:border-transparent hover:bg-gray-200 "
),
},
table: {
className: cn("border-collapse w-full", "my-2"),
},
tableHeaderCell: { className: "p-2" },
weekDay: { className: "text-gray-600 " },
day: { className: "p-2" },
dayLabel: ({ context }) => ({
className: cn(
"w-10 h-10 rounded-full transition-shadow duration-200 border-transparent border",
"flex items-center justify-center mx-auto overflow-hidden relative",
"focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] ",
{
"opacity-60 cursor-default": context.disabled,
"cursor-pointer": !context.disabled,
},
{
"text-gray-600 bg-transparent hover:bg-gray-200 ": !context.selected && !context.disabled,
"text-blue-700 bg-blue-100 hover:bg-blue-200": context.selected && !context.disabled,
}
),
}),
monthPicker: { className: "my-2" },
month: ({ context }) => ({
className: cn(
"w-1/3 inline-flex items-center justify-center cursor-pointer overflow-hidden relative",
"p-2 transition-shadow duration-200 rounded-lg",
"focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] ",
{
"text-gray-600 bg-transparent hover:bg-gray-200 ": !context.selected && !context.disabled,
"text-blue-700 bg-blue-100 hover:bg-blue-200": context.selected && !context.disabled,
}
),
}),
yearPicker: {
className: cn("my-2"),
},
year: ({ context }) => ({
className: cn(
"w-1/2 inline-flex items-center justify-center cursor-pointer overflow-hidden relative",
"p-2 transition-shadow duration-200 rounded-lg",
"focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] ",
{
"text-gray-600 bg-transparent hover:bg-gray-200 ": !context.selected && !context.disabled,
"text-blue-700 bg-blue-100 hover:bg-blue-200": context.selected && !context.disabled,
}
),
}),
timePicker: {
className: cn("flex justify-center items-center", "border-t-1 border-solid border-gray-300 p-2"),
},
separatorContainer: { className: "flex items-center flex-col px-2" },
separator: { className: "text-xl" },
hourPicker: { className: "flex items-center flex-col px-2" },
minutePicker: { className: "flex items-center flex-col px-2" },
ampmPicker: { className: "flex items-center flex-col px-2" },
incrementButton: {
className: cn(
"flex items-center justify-center cursor-pointer overflow-hidden relative",
"w-8 h-8 text-gray-600 border-0 bg-transparent rounded-full transition-colors duration-200 ease-in-out",
"hover:text-gray-700 hover:border-transparent hover:bg-gray-200 "
),
},
decrementButton: {
className: cn(
"flex items-center justify-center cursor-pointer overflow-hidden relative",
"w-8 h-8 text-gray-600 border-0 bg-transparent rounded-full transition-colors duration-200 ease-in-out",
"hover:text-gray-700 hover:border-transparent hover:bg-gray-200 "
),
},
groupContainer: { className: "flex" },
group: {
className: cn("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,
}}
/>
</ModalWindow>
);
};