@isma91/react-scheduler 4.0.0

package/src/lib/styles/styles.ts

@@ -0,0 +1,256 @@
+import { Paper, alpha, styled } from "@mui/material";
+
+export const Wrapper = styled("div")<{ dialog: number }>(({ theme, dialog }) => ({
+  position: "relative",
+  "& .rs__table_loading": {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    zIndex: 999999,
+    "& .rs__table_loading_internal": {
+      background: dialog ? "" : alpha(theme.palette.background.paper, 0.4),
+      height: "100%",
+      "& > span": {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        height: "100%",
+        flexDirection: "column",
+        "& >span": {
+          marginBottom: 15,
+        },
+      },
+    },
+  },
+}));
+
+export const Table = styled("div")<{ resource_count: number }>(({ resource_count }) => ({
+  position: "relative",
+  display: "flex",
+  flexDirection: resource_count > 1 ? "row" : "column",
+  width: "100%",
+  boxSizing: "content-box",
+  "& > div": {
+    flexShrink: 0,
+    flexGrow: 1,
+  },
+}));
+
+export const NavigationDiv = styled(Paper)<{ sticky?: string; offset?: number }>(
+  ({ sticky = "0", offset = 0 }) => ({
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    position: sticky === "1" ? "sticky" : "relative",
+    top: sticky === "1" ? offset : undefined,
+    zIndex: sticky === "1" ? 999 : undefined,
+    boxShadow: "none",
+    padding: "2px 0",
+    "& > .rs__view_navigator": {
+      display: "flex",
+      alignItems: "center",
+    },
+  })
+);
+
+export const AgendaDiv = styled("div")<{ stickyOffset?: number; stickyHeight?: number }>(
+  ({ theme, stickyOffset = 0, stickyHeight = 40 }) => ({
+    borderStyle: "solid",
+    borderColor: theme.palette.grey[300],
+    borderWidth: "1px 1px 0 0",
+    "& > .rs__agenda_row": {
+      display: "flex",
+      "& >.rs__agenda__cell": {
+        padding: 4,
+        width: "100%",
+        maxWidth: 60,
+        "& > .MuiTypography-root": {
+          position: "sticky",
+          top: stickyOffset + stickyHeight,
+          "&.rs__hover__op": {
+            cursor: "pointer",
+            "&:hover": {
+              opacity: 0.7,
+              textDecoration: "underline",
+            },
+          },
+        },
+      },
+      "& .rs__cell": {
+        borderStyle: "solid",
+        borderColor: theme.palette.grey[300],
+        borderWidth: "0 0 1px 1px",
+      },
+      "& > .rs__agenda_items": {
+        flexGrow: 1,
+      },
+    },
+  })
+);
+
+export const TableGrid = styled("div")<{
+  days: number;
+  sticky?: string;
+  stickyNavigation?: boolean;
+  stickyOffset?: number;
+  stickyHeight?: number;
+  indent?: string;
+}>(
+  ({
+    days,
+    sticky = "0",
+    stickyNavigation,
+    indent = "1",
+    theme,
+    stickyOffset = 0,
+    stickyHeight = 40,
+  }) => ({
+    display: "grid",
+    gridTemplateColumns: +indent > 0 ? `10% repeat(${days}, 1fr)` : `repeat(${days}, 1fr)`,
+    overflowX: "auto",
+    overflowY: "hidden",
+    position: sticky === "1" ? "sticky" : "relative",
+    top: sticky === "1" ? (stickyNavigation ? stickyOffset + stickyHeight : 0) : undefined,
+    zIndex: sticky === "1" ? 99 : undefined,
+    [theme.breakpoints.down("sm")]: {
+      gridTemplateColumns: +indent > 0 ? `30px repeat(${days}, 1fr)` : "",
+    },
+    borderStyle: "solid",
+    borderColor: theme.palette.grey[300],
+    borderWidth: "0 0 0 1px",
+    "&:first-of-type": {
+      borderWidth: "1px 0 0 1px",
+    },
+    "&:last-of-type": {
+      borderWidth: "0 0 1px 1px",
+    },
+    "& .rs__cell": {
+      background: theme.palette.background.paper,
+      position: "relative",
+      borderStyle: "solid",
+      borderColor: theme.palette.grey[300],
+      borderWidth: "0 1px 1px 0",
+      "&.rs__header": {
+        "& > :first-of-type": {
+          padding: "2px 5px",
+        },
+      },
+      "&.rs__header__center": {
+        padding: "6px 0px",
+      },
+      "&.rs__time": {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        position: "sticky",
+        left: 0,
+        zIndex: 99,
+        [theme.breakpoints.down("sm")]: {
+          writingMode: "vertical-rl",
+        },
+      },
+      "& > button": {
+        width: "100%",
+        height: "100%",
+        borderRadius: 0,
+        cursor: "pointer",
+        "&:hover": {
+          background: alpha(theme.palette.primary.main, 0.1),
+        },
+      },
+      "& .rs__event__item": {
+        position: "absolute",
+        zIndex: 1,
+      },
+      "& .rs__multi_day": {
+        position: "absolute",
+        zIndex: 1,
+        textOverflow: "ellipsis",
+      },
+      "& .rs__block_col": {
+        display: "block",
+        position: "relative",
+      },
+      "& .rs__hover__op": {
+        cursor: "pointer",
+        "&:hover": {
+          opacity: 0.7,
+          textDecoration: "underline",
+        },
+      },
+      "&:not(.rs__time)": {
+        minWidth: 65,
+      },
+    },
+  })
+);
+
+export const EventItemPaper = styled(Paper)<{ disabled?: boolean }>(({ disabled }) => ({
+  width: "99.5%",
+  height: "100%",
+  display: "block",
+  cursor: disabled ? "not-allowed" : "pointer",
+  overflow: "hidden",
+  "& .MuiButtonBase-root": {
+    width: "100%",
+    height: "100%",
+    display: "block",
+    textAlign: "left",
+    "& > div": {
+      height: "100%",
+      // padding: "2px 4px",
+    },
+  },
+}));
+
+export const PopperInner = styled("div")(({ theme }) => ({
+  maxWidth: "100%",
+  width: 400,
+  "& > div": {
+    padding: "5px 10px",
+    "& .rs__popper_actions": {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      "& .MuiIconButton-root": {
+        color: theme.palette.primary.contrastText,
+      },
+    },
+  },
+}));
+
+export const EventActions = styled("div")(({ theme }) => ({
+  display: "inherit",
+  "& .MuiIconButton-root": {
+    color: theme.palette.primary.contrastText,
+  },
+  "& .MuiButton-root": {
+    "&.delete": {
+      color: theme.palette.error.main,
+    },
+    "&.cancel": {
+      color: theme.palette.action.disabled,
+    },
+  },
+}));
+
+export const TimeIndicatorBar = styled("div")<{ color?: string }>(({ theme, color }) => ({
+  position: "absolute",
+  zIndex: 9,
+  width: "100%",
+  display: "flex",
+  "& > div:first-of-type": {
+    height: 12,
+    width: 12,
+    borderRadius: "50%",
+    background: color || theme.palette.error.light,
+    marginLeft: -6,
+    marginTop: -5,
+  },
+  "& > div:last-of-type": {
+    borderTop: `solid 2px ${color || theme.palette.error.light}`,
+    width: "100%",
+  },
+}));

package/src/lib/types.ts

@@ -0,0 +1,423 @@
+import { DialogProps, GridSize } from "@mui/material";
+import { DateCalendarProps } from "@mui/x-date-pickers";
+import { Locale } from "date-fns";
+import { DragEvent } from "react";
+import { SelectOption } from "./components/inputs/SelectInput";
+import { View } from "./components/nav/Navigation";
+import { Store } from "./store/types";
+import { StateItem } from "./views/Editor";
+import type { RRule } from "rrule";
+
+export type DayHours =
+  | 0
+  | 1
+  | 2
+  | 3
+  | 4
+  | 5
+  | 6
+  | 7
+  | 8
+  | 9
+  | 10
+  | 11
+  | 12
+  | 13
+  | 14
+  | 15
+  | 16
+  | 17
+  | 18
+  | 19
+  | 20
+  | 21
+  | 22
+  | 23
+  | 24;
+
+export type WeekDays = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+
+interface CommonWeekViewProps {
+  weekDays: WeekDays[];
+  weekStartOn: WeekDays;
+  disableGoToDay?: boolean;
+}
+
+interface CommonViewProps {
+  startHour: DayHours;
+  endHour: DayHours;
+  cellRenderer?(props: CellRenderedProps): React.ReactNode;
+  headRenderer?(props: {
+    day: Date;
+    events: ProcessedEvent[];
+    resource?: DefaultResource;
+  }): React.ReactNode;
+  navigation?: boolean;
+  step: number;
+}
+
+export interface MonthProps extends CommonWeekViewProps, CommonViewProps {}
+
+export interface WeekProps extends CommonWeekViewProps, CommonViewProps {
+  hourRenderer?(hour: string): React.ReactNode;
+}
+
+export interface DayProps extends CommonViewProps {
+  hourRenderer?(hour: string): React.ReactNode;
+}
+
+export interface CellRenderedProps {
+  day: Date;
+  start: Date;
+  end: Date;
+  height: number;
+  onClick(): void;
+  onDragOver(e: DragEvent<HTMLButtonElement>): void;
+  onDragEnter(e: DragEvent<HTMLButtonElement>): void;
+  onDragLeave(e: DragEvent<HTMLButtonElement>): void;
+  onDrop(e: DragEvent<HTMLButtonElement>): void;
+}
+interface CalendarEvent {
+  event_id: number | string;
+  title: React.ReactNode;
+  subtitle?: React.ReactNode;
+  start: Date;
+  end: Date;
+  recurring?: RRule;
+  disabled?: boolean;
+  color?: string;
+  textColor?: string;
+  editable?: boolean;
+  deletable?: boolean;
+  draggable?: boolean;
+  allDay?: boolean;
+  /**
+   * @default " "
+   * passed as a children to mui <Avatar /> component
+   */
+  agendaAvatar?: React.ReactElement | string;
+  /** @internal Original start date before segment clipping */
+  _originalStart?: Date;
+  /** @internal Original end date before segment clipping */
+  _originalEnd?: Date;
+  /** @internal Segment continues from previous day */
+  _hasPrev?: boolean;
+  /** @internal Segment continues to next day */
+  _hasNext?: boolean;
+}
+export interface Translations {
+  navigation: Record<View, string> & { today: string; agenda: string };
+  form: {
+    addTitle: string;
+    editTitle: string;
+    confirm: string;
+    delete: string;
+    cancel: string;
+  };
+  event: Record<string, string> & {
+    title: string;
+    subtitle: string;
+    start: string;
+    end: string;
+    allDay: string;
+  };
+  validation?: {
+    required?: string;
+    invalidEmail?: string;
+    onlyNumbers?: string;
+    min?: string | ((min: number) => string);
+    max?: string | ((max: number) => string);
+  };
+  moreEvents: string;
+  noDataToDisplay: string;
+  loading: string;
+}
+
+export type InputTypes = "input" | "date" | "select" | "hidden";
+
+export interface EventRendererProps extends Pick<
+  React.HTMLAttributes<HTMLElement>,
+  "draggable" | "onDragStart" | "onDragEnd" | "onDragOver" | "onDragEnter" | "onClick"
+> {
+  event: ProcessedEvent;
+}
+export interface FieldInputProps {
+  /** Available to all InputTypes */
+  label?: string;
+  /** Available to all InputTypes */
+  placeholder?: string;
+  /** Available to all InputTypes
+   * @default false
+   */
+  required?: boolean;
+  /** Available to all InputTypes
+   * @default "outline"
+   */
+  variant?: "standard" | "filled" | "outlined";
+  /** Available to all InputTypes */
+  disabled?: boolean;
+  /** Available when @input="text" ONLY - Minimum length */
+  min?: number;
+  /** Available when @input="text" ONLY - Maximum length */
+  max?: number;
+  /** Available when @input="text" ONLY - Apply email Regex */
+  email?: boolean;
+  /** Available when @input="text" ONLY - Only numbers(int/float) allowed */
+  decimal?: boolean;
+  /** Available when @input="text" ONLY - Allow Multiline input. Use @rows property to set initial rows height */
+  multiline?: boolean;
+  /** Available when @input="text" ONLY - initial rows height*/
+  rows?: number;
+  /** Available when @input="date" ONLY
+   * @default "datetime"
+   */
+  type?: "date" | "datetime";
+  /** Available when @input="select" ONLY - Multi-Select input style.
+   * if you use "default" property with this, make sure your "default" property is an instance of Array
+   */
+  multiple?: "chips" | "default";
+  /** Available when @input="select" ONLY - display loading spinner instead of expand arrow */
+  loading?: boolean;
+  /** Available when @input="select" ONLY - Custom error message */
+  errMsg?: string;
+
+  /* Used for Grid alignment in a single row md | sm | xs */
+  md?: GridSize;
+  /* Used for Grid alignment in a single row md | sm | xs */
+  sm?: GridSize;
+  /* Used for Grid alignment in a single row md | sm | xs */
+  xs?: GridSize;
+}
+export interface FieldProps {
+  name: string;
+  type: InputTypes;
+  /** Required for type="select" */
+  options?: Array<SelectOption>;
+  default?: string | number | Date | any;
+  config?: FieldInputProps;
+}
+export type ProcessedEvent = CalendarEvent & Record<string, any>;
+export type EventActions = "create" | "edit";
+export type RemoteQuery = {
+  start: Date;
+  end: Date;
+  view: "day" | "week" | "month";
+};
+export type DefaultResource = {
+  assignee?: string | number;
+  text?: string;
+  subtext?: string;
+  avatar?: string;
+  color?: string;
+} & Record<string, any>;
+export type ResourceFields = {
+  idField: string;
+  textField: string;
+  subTextField?: string;
+  avatarField?: string;
+  colorField?: string;
+} & Record<string, string>;
+
+export interface SchedulerHelpers {
+  state: Record<string, StateItem>;
+  close(): void;
+  loading(status: boolean): void;
+  edited?: ProcessedEvent;
+  onConfirm(event: ProcessedEvent | ProcessedEvent[], action: EventActions): void;
+  [resourceKey: string]: unknown;
+}
+export interface SchedulerProps {
+  /**Min height of table
+   * @default 600
+   */
+  height: number;
+  /** Initial view to load */
+  view: View;
+  /**Activate Agenda view */
+  agenda?: boolean;
+  /** if true, day rows without event will be shown */
+  alwaysShowAgendaDays?: boolean;
+  /**Month view settings */
+  month: MonthProps | null;
+  /**Week view settings */
+  week: WeekProps | null;
+  /**Day view settings */
+  day: DayProps | null;
+  /**Initial date selected */
+  selectedDate: Date;
+  /** Show/Hide date navigation */
+  navigation?: boolean;
+  /** Show/Hide view navigator */
+  disableViewNavigator?: boolean;
+  /** */
+  navigationPickerProps?: Partial<
+    Omit<
+      DateCalendarProps,
+      "open" | "onClose" | "openTo" | "views" | "value" | "readOnly" | "onChange"
+    >
+  >;
+  /**Events to display */
+  events: ProcessedEvent[];
+  /** Custom event render method */
+  eventRenderer?: (props: EventRendererProps) => React.ReactNode | null;
+  /**Async function to load remote data with current view data. */
+  getRemoteEvents?(params: RemoteQuery): Promise<ProcessedEvent[] | void>;
+  /**Custom additional fields with it's settings */
+  fields: FieldProps[];
+  /**Table loading state */
+  loading?: boolean;
+  /** Custom loading component */
+  loadingComponent?: React.ReactNode;
+  /**Async function triggered when add/edit event */
+  onConfirm?(event: ProcessedEvent, action: EventActions): Promise<ProcessedEvent>;
+  /**Async function triggered when delete event */
+  onDelete?(deletedId: string | number): Promise<string | number | void>;
+  /**Override editor modal */
+  customEditor?(scheduler: SchedulerHelpers): React.ReactNode;
+  /** Custom viewer/popper component. If used, `viewerExtraComponent` & `viewerTitleComponent` will be ignored */
+  customViewer?(event: ProcessedEvent, close: () => void): React.ReactNode;
+  /**Additional component in event viewer popper */
+  viewerExtraComponent?:
+    | React.ReactNode
+    | ((fields: FieldProps[], event: ProcessedEvent) => React.ReactNode);
+  /**Override viewer title component */
+  viewerTitleComponent?(event: ProcessedEvent): React.ReactNode;
+  /**Override viewer subtitle component */
+  viewerSubtitleComponent?(event: ProcessedEvent): React.ReactNode;
+  /** if true, the viewer popover will be disabled globally */
+  disableViewer?: boolean;
+  /**Resources array to split event views with resources */
+  resources: DefaultResource[];
+  /**Map resources fields */
+  resourceFields: ResourceFields;
+  /**Override header component of resource */
+  resourceHeaderComponent?(resource: DefaultResource): React.ReactNode;
+  /** Triggered when resource tabs changes */
+  onResourceChange?(resource: DefaultResource): void;
+  /**Resource header view mode
+   * @default "default"
+   */
+  resourceViewMode: "default" | "vertical" | "tabs";
+  /**Direction of table */
+  direction: "rtl" | "ltr";
+  /**Editor dialog maxWith
+   * @default "md"
+   */
+  dialogMaxWidth: DialogProps["maxWidth"];
+  /**
+   * date-fns Locale object
+   */
+  locale: Locale;
+  /**
+   * Localization
+   */
+  translations: Translations;
+  /**
+   * Hour Format
+   */
+  hourFormat: "12" | "24";
+  /**
+   * Time zone IANA ID: https://data.iana.org/time-zones/releases
+   */
+  timeZone?: string;
+  /**
+   * Triggered when event is dropped on time slot.
+   */
+  onEventDrop?(
+    event: DragEvent<HTMLButtonElement>,
+    droppedOn: Date,
+    updatedEvent: ProcessedEvent,
+    originalEvent: ProcessedEvent
+  ): Promise<ProcessedEvent | void>;
+  /**
+   *
+   */
+  onEventClick?(event: ProcessedEvent): void;
+  /**
+   * Triggered when an event item is being edited from the popover
+   */
+  onEventEdit?(event: ProcessedEvent): void;
+  /**
+   * If event is deletable, applied to all events globally, overridden by event specific deletable prop
+   * @default true
+   */
+  deletable?: boolean;
+  /**
+   * If calendar is editable, applied to all events/cells globally, overridden by event specific editable prop
+   * @default true
+   */
+  editable?: boolean;
+  /**
+   * If event is draggable, applied to all events globally, overridden by event specific draggable prop
+   * @default true
+   */
+  draggable?: boolean;
+  /**
+   * Triggered when the `selectedDate` prop changes by navigation date picker or `today` button.
+   */
+  onSelectedDateChange?(date: Date): void;
+  /**
+   * Triggered when navigation view changes.
+   */
+  onViewChange?(view: View, agenda?: boolean): void;
+  /**
+   * If true, the navigation controller bar will be sticky
+   */
+  stickyNavigation?: boolean;
+  /**
+   * Overrides the default behavior of more events button
+   */
+  onClickMore?(date: Date, gotToDay: (date: Date) => void): void;
+  /**
+   *
+   */
+  onCellClick?(start: Date, end: Date, resourceKey?: string, resourceVal?: string | number): void;
+  /**
+   * Custom content to display in the scheduler header.
+   * Wrap with useCallback if using state/props to avoid re-renders.
+   *
+   * @example
+   * const header = useCallback(() => <Button>{state}</Button>, [state]);
+   */
+  customHeaderContent?: () => React.ReactNode;
+  /**
+   * Top offset when sticky navigation is enabled (in pixels).
+   * @default 0
+   */
+  stickyNavigationOffset?: number;
+  /**
+   * Height of the sticky navigation header in pixels.
+   * Used to calculate offset for sticky elements below the header.
+   * @default 40
+   */
+  stickyNavigationHeight?: number;
+  /**
+   * Override the current time used for the red indicator bar.
+   * Useful when working with different timezones or for testing.
+   */
+  currentTime?: Date;
+  /**
+   * Show/hide the current time indicator bar.
+   * @default true
+   */
+  showCurrentTimeBar?: boolean;
+  /**
+   * Color of the current time indicator bar.
+   * @default theme.palette.error.light (red)
+   */
+  currentTimeBarColor?: string;
+  /**
+   * When true, events spanning multiple days with allDay: false
+   * will be displayed in the time grid instead of the all-day header.
+   * Events will be split visually at midnight boundaries.
+   * @default false
+   */
+  forceInlineMultiDay?: boolean;
+}
+
+export interface SchedulerRef {
+  el: HTMLDivElement;
+  scheduler: Store;
+}
+
+export interface Scheduler extends Partial<SchedulerProps> {}