diff --git a/apps/www/content/primitives/components/calendar.mdx b/apps/www/content/primitives/components/calendar.mdx index e224c219..bd4232c8 100644 --- a/apps/www/content/primitives/components/calendar.mdx +++ b/apps/www/content/primitives/components/calendar.mdx @@ -31,3 +31,9 @@ links: + +## Loader + + + + diff --git a/packages/raystack/calendar/calendar.tsx b/packages/raystack/calendar/calendar.tsx index 473d1616..ccd358a3 100644 --- a/packages/raystack/calendar/calendar.tsx +++ b/packages/raystack/calendar/calendar.tsx @@ -1,21 +1,36 @@ -import { DayPicker, DayPickerProps, DropdownProps } from "react-day-picker"; -import { cva } from "class-variance-authority"; +import { + dateLib, + DayPicker, + DayPickerProps, + DropdownProps, +} from 'react-day-picker'; +import { cva } from 'class-variance-authority'; import { ChevronRightIcon, ChevronLeftIcon, ChevronUpIcon, ChevronDownIcon, -} from "@radix-ui/react-icons"; -import styles from "./calendar.module.css"; -import { Select } from "~/select"; -import { ChangeEvent, useEffect, useState } from "react"; -import { Flex } from "~/flex/flex"; +} from '@radix-ui/react-icons'; +import styles from './calendar.module.css'; +import { Select } from '~/select'; +import { ChangeEvent, useEffect, useState } from 'react'; +import { Flex } from '~/flex/flex'; +import { Tooltip } from '~/tooltip'; +import Skeleton from 'react-loading-skeleton'; interface OnDropdownOpen { onDropdownOpen?: VoidFunction; } -export type CalendarProps = DayPickerProps & OnDropdownOpen; +interface CalendarPropsExtended { + showTooltip?: boolean; + tooltipMessages?: { [key: string]: any }; + loadingData?: boolean; +} + +export type CalendarProps = DayPickerProps & + OnDropdownOpen & + CalendarPropsExtended; const root = cva(styles.calendarRoot); @@ -54,7 +69,7 @@ function DropDown({ - + @@ -73,7 +88,7 @@ function DropDown({ ))} - + @@ -87,6 +102,9 @@ export const Calendar = function ({ classNames, showOutsideDays = true, onDropdownOpen, + showTooltip = false, + tooltipMessages = {}, + loadingData = false, ...props }: CalendarProps) { return ( @@ -94,7 +112,7 @@ export const Calendar = function ({ showOutsideDays={showOutsideDays} components={{ Chevron: (props) => { - if (props.orientation === "left") { + if (props.orientation === 'left') { return ; } return ; @@ -102,6 +120,33 @@ export const Calendar = function ({ Dropdown: (props: DropdownProps) => ( ), + DayButton: (props) => { + const { day, ...buttonProps } = props; + const message = + tooltipMessages[dateLib.format(day.date, 'dd-MM-yyyy')]; + return ( + +