@isma91/react-scheduler 4.0.0 → 4.0.2

package/src/lib/styles/styles.ts

@@ -1,256 +0,0 @@
-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

@@ -1,423 +0,0 @@
-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> {}