UNPKG

goobs-frontend

Version:

A comprehensive React-based libary for building modern web applications

165 lines 8.73 kB
import { default as React } from 'react'; import { CalendarFilterOptions } from './CalendarFilters'; export type CalendarView = 'month' | 'week' | 'day'; export type { CalendarFilterOptions } from './CalendarFilters'; /** * Caller-supplied style overrides for BigCalendar. Theme variant + visual * tokens now live in BigCalendar.module.css (data-theme on the root); this * type preserves the public `styles` prop surface so callers keep their * existing overrides. `theme` selects the data-theme variant; the remaining * fields are passed through to child components (Paper / Typography) or used * as layout overrides on the root. */ export interface BigCalendarStyles { /** `data-theme` variant on the root and every themed child (Paper, toggles, icons). Default 'light'. */ theme?: 'light' | 'dark' | 'sacred'; /** Root container background, applied inline (theme surface default otherwise). */ backgroundColor?: string; /** Root container corner radius, applied inline. */ borderRadius?: string; /** Root font family, applied inline; also forwarded to the calendar's internal Typography text. */ fontFamily?: string; /** Base text size forwarded to the calendar's internal Typography; the per-element sizes the calendar sets win. */ fontSize?: string; /** Base text weight forwarded to the calendar's internal Typography; the per-element weights the calendar sets win. */ fontWeight?: string | number; /** Base line-height forwarded to the calendar's internal Typography (event chips set their own). */ lineHeight?: string; /** Base text color forwarded to the calendar's internal Typography (event chips force white; headers/dates set their own weights). */ color?: string; /** Root margin shorthand, applied inline. */ margin?: string; /** Root top margin, applied inline. */ marginTop?: string; /** Root bottom margin, applied inline. */ marginBottom?: string; /** Root left margin, applied inline. */ marginLeft?: string; /** Root right margin, applied inline. */ marginRight?: string; /** Root max-width, applied inline. */ maxWidth?: string; /** Root min-width, applied inline. */ minWidth?: string; /** Root max-height, applied inline. */ maxHeight?: string; /** Root min-height, applied inline. */ minHeight?: string; /** @deprecated Not read by the root container — it only flows into the internal Typography text width; scheduled for removal. */ width?: string; /** @deprecated No-op — not read by the component; scheduled for removal. */ height?: string; /** Toolbar Paper padding. Default: 20px sacred, 16px light/dark. */ toolbarPadding?: string; /** Toolbar Paper height and min-height. Default: 72px sacred, 64px light/dark. */ toolbarHeight?: string; /** @deprecated No-op — not read by the component; scheduled for removal. */ toolbarBackground?: string; /** Calendar-surface Paper corner radius. Default: 12px sacred, 8px light/dark. */ calendarBorderRadius?: string; /** Replaces the sacred theme's default gold-gradient background image on the calendar Paper (sacred theme only). */ sacredBackgroundImage?: string; /** @deprecated No-op — not read by the component; scheduled for removal. */ transitionDuration?: string; /** @deprecated No-op — not read by the component; scheduled for removal. */ transitionEasing?: string; } /** A single event rendered on the calendar. */ export type CalendarEvent = { /** Unique id; used as the React key for the event chip. */ id: string; /** Label shown on the chip and in its tooltip; matched by the search filter. */ title: string; /** Event start; anchors day placement, the date-range filter, and all-day placement. */ startDate: Date; /** Event end; with `startDate` it decides which day and hour cells the event occupies. */ endDate: Date; /** Chip background color. Default: '#2196f3', or translucent gold on the sacred theme. */ color?: string; /** In week/day views, shows the event in every visible hour cell of its start day. */ allDay?: boolean; /** Resource label appended to the chip label and tooltip; matched by the search and resource filters. */ resource?: string; /** Longer text shown in the tooltip; matched by the search filter. */ description?: string; /** Category key matched by the `eventTypes` filter. */ type?: string; /** Free-form bag read by the tags/status/custom filters (`metadata.tags`, `metadata.status`, plus custom keys). */ metadata?: Record<string, any>; }; export interface BigCalendarProps { /** Events to render; filtered client-side by the active filters. Default []. */ events?: CalendarEvent[]; /** * Initial focused date (default: today). Seeds internal state — the * calendar navigates itself and reports through `onDateChange`; later prop * changes do not re-sync it. */ currentDate?: Date; /** * Initial view (default 'month'). Seeds internal state — the toolbar * toggles switch views and report through `onViewChange`. */ view?: CalendarView; /** Called with the clicked event; when omitted, event chips render non-clickable. */ onEventClick?: (event: CalendarEvent) => void; /** * Called when a day cell (month view) or hour cell (week/day views, with * the hour) is clicked. The click also toggles the built-in selection * highlight summarized in the toolbar title. */ onCellClick?: (date: Date, hour?: number) => void; /** Notified when the toolbar view toggle changes the view. */ onViewChange?: (view: CalendarView) => void; /** Notified when previous/today/next navigation changes the focused date. */ onDateChange?: (date: Date) => void; /** Replaces the default tooltip-wrapped chip rendering for every event. */ eventRenderer?: (event: CalendarEvent) => React.ReactNode; /** Shows the navigation toolbar (prev/today/next, selection title, view toggles). Default true. */ showToolbar?: boolean; /** Month-view cell minimum height in px. Default 80. */ minCellHeight?: number; /** Week/day-view hour row height in px. Default 60. */ hourHeight?: number; /** First visible hour of the week/day grid (0–23). Default 0. */ startHour?: number; /** Hour the week/day grid ends at (exclusive). Default 24. */ endHour?: number; /** Theme plus container/typography/toolbar/surface overrides. See BigCalendarStyles. */ styles?: BigCalendarStyles; /** Shows the CalendarFilters panel between the toolbar and the grid. Default false. */ showFilters?: boolean; /** * Initial filter set (default {}). Seeds internal state — panel edits * apply immediately and report through `onFiltersChange`. */ filters?: CalendarFilterOptions; /** Notified with the full filter set whenever the filter panel changes it. */ onFiltersChange?: (filters: CalendarFilterOptions) => void; /** Options offered by the filter panel's resource dropdown. Default []. */ availableResources?: { id: string; title: string; }[]; /** City options for the filter panel's standardized dropdown. Default []. */ cities?: string[]; /** Property-type options for the filter panel's standardized dropdown. Default []. */ propertyTypes?: string[]; /** Bedroom-count options for the filter panel's standardized dropdown. Default []. */ bedroomOptions?: Array<string | number>; /** Price-range options for the filter panel's standardized dropdown. Default []. */ priceRanges?: string[]; } /** * Full calendar with month/week/day views, a navigation toolbar * (previous/today/next plus view toggles), an optional filter panel, and * built-in day/hour-span selection whose summary renders as the toolbar * title. Events render as tooltip-wrapped chips (replaceable via * `eventRenderer`) and are filtered client-side by the active * CalendarFilterOptions. `view`, `currentDate`, and `filters` only SEED * internal state — the calendar navigates itself and reports changes through * the `on*Change` callbacks. Themed light (default) / dark / sacred via * `styles.theme`. */ export default function BigCalendar({ events, currentDate, view: propView, onEventClick, onCellClick, onViewChange, onDateChange, eventRenderer, showToolbar, minCellHeight, hourHeight, startHour, endHour, styles, showFilters, filters, onFiltersChange, availableResources, cities, propertyTypes, bedroomOptions, priceRanges, }: BigCalendarProps): React.JSX.Element; //# sourceMappingURL=index.d.ts.map