@isma91/react-scheduler 4.0.0 → 4.0.2

package/src/lib/components/events/EmptyAgenda.tsx

@@ -1,27 +0,0 @@
-import { AgendaDiv } from "../../styles/styles";
-import { Typography } from "@mui/material";
-import useStore from "../../hooks/useStore";
-
-const EmptyAgenda = () => {
-  const { height, translations, stickyNavigationOffset, stickyNavigationHeight } = useStore();
-  return (
-    <AgendaDiv
-      stickyOffset={stickyNavigationOffset}
-      stickyHeight={stickyNavigationHeight}
-      sx={{
-        borderWidth: 1,
-        padding: 1,
-        height: height / 2,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-      }}
-    >
-      <div className="rs__cell rs__agenda_items">
-        <Typography>{translations.noDataToDisplay}</Typography>
-      </div>
-    </AgendaDiv>
-  );
-};
-
-export default EmptyAgenda;

package/src/lib/components/events/EventItem.tsx

@@ -1,180 +0,0 @@
-import { Fragment, MouseEvent, useCallback, useMemo, useState } from "react";
-import { Typography, ButtonBase, useTheme } from "@mui/material";
-import { format } from "date-fns";
-import { ProcessedEvent } from "../../types";
-import ArrowRightRoundedIcon from "@mui/icons-material/ArrowRightRounded";
-import ArrowLeftRoundedIcon from "@mui/icons-material/ArrowLeftRounded";
-import { EventItemPaper } from "../../styles/styles";
-import { differenceInDaysOmitTime, getHourFormat } from "../../helpers/generals";
-import useStore from "../../hooks/useStore";
-import useDragAttributes from "../../hooks/useDragAttributes";
-import EventItemPopover from "./EventItemPopover";
-import useEventPermissions from "../../hooks/useEventPermissions";
-
-interface EventItemProps {
-  event: ProcessedEvent;
-  multiday?: boolean;
-  hasPrev?: boolean;
-  hasNext?: boolean;
-  showdate?: boolean;
-}
-
-const EventItem = ({ event, multiday, hasPrev, hasNext, showdate = true }: EventItemProps) => {
-  const { direction, locale, hourFormat, eventRenderer, onEventClick, view, disableViewer } =
-    useStore();
-  const dragProps = useDragAttributes(event);
-  const [anchorEl, setAnchorEl] = useState<Element | null>(null);
-  const [deleteConfirm, setDeleteConfirm] = useState(false);
-  const theme = useTheme();
-  const hFormat = getHourFormat(hourFormat);
-
-  const NextArrow = direction === "rtl" ? ArrowLeftRoundedIcon : ArrowRightRoundedIcon;
-  const PrevArrow = direction === "rtl" ? ArrowRightRoundedIcon : ArrowLeftRoundedIcon;
-  const hideDates = differenceInDaysOmitTime(event.start, event.end) <= 0 && event.allDay;
-
-  const { canDrag } = useEventPermissions(event);
-
-  const triggerViewer = useCallback(
-    (el?: MouseEvent<Element>) => {
-      if (!el?.currentTarget && deleteConfirm) {
-        setDeleteConfirm(false);
-      }
-      setAnchorEl(el?.currentTarget || null);
-    },
-    [deleteConfirm]
-  );
-
-  const renderEvent = useMemo(() => {
-    // Check if has custom render event method
-    // only applicable to non-multiday events and not in month-view
-    if (typeof eventRenderer === "function" && !multiday && view !== "month") {
-      const custom = eventRenderer({ event, onClick: triggerViewer, ...dragProps });
-      if (custom) {
-        return (
-          <EventItemPaper key={`${event.start.getTime()}_${event.end.getTime()}_${event.event_id}`}>
-            {custom}
-          </EventItemPaper>
-        );
-      }
-    }
-
-    let item = (
-      <div style={{ padding: "2px 6px" }}>
-        <Typography variant="subtitle2" style={{ fontSize: 12 }} noWrap>
-          {event.title}
-        </Typography>
-        {event.subtitle && (
-          <Typography variant="body2" style={{ fontSize: 11 }} noWrap>
-            {event.subtitle}
-          </Typography>
-        )}
-        {showdate && (
-          <Typography style={{ fontSize: 11 }} noWrap>
-            {`${format(event.start, hFormat, {
-              locale,
-            })} - ${format(event.end, hFormat, { locale })}`}
-          </Typography>
-        )}
-      </div>
-    );
-    if (multiday) {
-      item = (
-        <div
-          style={{
-            padding: 2,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between",
-          }}
-        >
-          <Typography sx={{ fontSize: 11 }} noWrap>
-            {hasPrev ? (
-              <PrevArrow fontSize="small" sx={{ display: "flex" }} />
-            ) : (
-              showdate && !hideDates && format(event.start, hFormat, { locale })
-            )}
-          </Typography>
-          <Typography variant="subtitle2" align="center" sx={{ fontSize: 12 }} noWrap>
-            {event.title}
-          </Typography>
-          <Typography sx={{ fontSize: 11 }} noWrap>
-            {hasNext ? (
-              <NextArrow fontSize="small" sx={{ display: "flex" }} />
-            ) : (
-              showdate && !hideDates && format(event.end, hFormat, { locale })
-            )}
-          </Typography>
-        </div>
-      );
-    }
-    return (
-      <EventItemPaper
-        key={`${event.start.getTime()}_${event.end.getTime()}_${event.event_id}`}
-        disabled={event.disabled}
-        sx={{
-          bgcolor: event.disabled ? "#d0d0d0" : event.color || theme.palette.primary.main,
-          color: event.disabled ? "#808080" : event.textColor || theme.palette.primary.contrastText,
-          borderTop: event._hasPrev
-            ? `3px dashed ${event.textColor || theme.palette.primary.contrastText}`
-            : undefined,
-          borderBottom: event._hasNext
-            ? `3px dashed ${event.textColor || theme.palette.primary.contrastText}`
-            : undefined,
-          ...(event.sx || {}),
-        }}
-      >
-        <ButtonBase
-          onClick={(e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            if (!disableViewer) {
-              triggerViewer(e);
-            }
-            if (typeof onEventClick === "function") {
-              onEventClick(event);
-            }
-          }}
-          focusRipple
-          tabIndex={disableViewer ? -1 : 0}
-          disableRipple={disableViewer}
-          disabled={event.disabled}
-        >
-          <div {...dragProps} draggable={canDrag}>
-            {item}
-          </div>
-        </ButtonBase>
-      </EventItemPaper>
-    );
-  }, [
-    eventRenderer,
-    multiday,
-    view,
-    event,
-    showdate,
-    hFormat,
-    locale,
-    theme.palette.primary.main,
-    theme.palette.primary.contrastText,
-    disableViewer,
-    dragProps,
-    canDrag,
-    triggerViewer,
-    hasPrev,
-    PrevArrow,
-    hideDates,
-    hasNext,
-    NextArrow,
-    onEventClick,
-  ]);
-
-  return (
-    <Fragment>
-      {renderEvent}
-
-      {/* Viewer */}
-      <EventItemPopover anchorEl={anchorEl} event={event} onTriggerViewer={triggerViewer} />
-    </Fragment>
-  );
-};
-
-export default EventItem;

package/src/lib/components/events/EventItemPopover.tsx

@@ -1,179 +0,0 @@
-import { MouseEvent } from "react";
-import { Box, IconButton, Popover, Typography, useTheme } from "@mui/material";
-import useStore from "../../hooks/useStore";
-import { ProcessedEvent } from "../../types";
-import { PopperInner } from "../../styles/styles";
-import EventActions from "./Actions";
-import { differenceInDaysOmitTime, getHourFormat } from "../../helpers/generals";
-import EventNoteRoundedIcon from "@mui/icons-material/EventNoteRounded";
-import ClearRoundedIcon from "@mui/icons-material/ClearRounded";
-import SupervisorAccountRoundedIcon from "@mui/icons-material/SupervisorAccountRounded";
-import { format } from "date-fns";
-
-type Props = {
-  event: ProcessedEvent;
-  anchorEl: Element | null;
-  onTriggerViewer: (el?: MouseEvent<Element>) => void;
-};
-
-const EventItemPopover = ({ anchorEl, event, onTriggerViewer }: Props) => {
-  const {
-    triggerDialog,
-    onDelete,
-    events,
-    handleState,
-    triggerLoading,
-    customViewer,
-    viewerExtraComponent,
-    fields,
-    resources,
-    resourceFields,
-    locale,
-    viewerTitleComponent,
-    viewerSubtitleComponent,
-    hourFormat,
-    translations,
-    onEventEdit,
-  } = useStore();
-  const theme = useTheme();
-  const hFormat = getHourFormat(hourFormat);
-  const displayStart = event._originalStart || event.start;
-  const displayEnd = event._originalEnd || event.end;
-  const hideDates = differenceInDaysOmitTime(displayStart, displayEnd) <= 0 && event.allDay;
-
-  const idKey = resourceFields.idField;
-  const hasResource = resources.filter((res) =>
-    Array.isArray(event[idKey]) ? event[idKey].includes(res[idKey]) : res[idKey] === event[idKey]
-  );
-
-  const handleDelete = async () => {
-    try {
-      triggerLoading(true);
-      let deletedId = event.event_id;
-      // Trigger custom/remote when provided
-      if (onDelete) {
-        const remoteId = await onDelete(deletedId);
-        if (remoteId) {
-          deletedId = remoteId;
-        } else {
-          deletedId = "";
-        }
-      }
-      if (deletedId) {
-        onTriggerViewer();
-        const updatedEvents = events.filter((e) => e.event_id !== deletedId);
-        handleState(updatedEvents, "events");
-      }
-    } catch (error) {
-      console.error(error);
-    } finally {
-      triggerLoading(false);
-    }
-  };
-
-  return (
-    <Popover
-      open={Boolean(anchorEl)}
-      anchorEl={anchorEl}
-      onClose={() => {
-        onTriggerViewer();
-      }}
-      anchorOrigin={{
-        vertical: "center",
-        horizontal: "center",
-      }}
-      transformOrigin={{
-        vertical: "top",
-        horizontal: "center",
-      }}
-      onClick={(e) => {
-        e.stopPropagation();
-      }}
-    >
-      {typeof customViewer === "function" ? (
-        customViewer(event, () => onTriggerViewer())
-      ) : (
-        <PopperInner>
-          <Box
-            sx={{
-              bgcolor: event.color || theme.palette.primary.main,
-              color: theme.palette.primary.contrastText,
-            }}
-          >
-            <div className="rs__popper_actions">
-              <div>
-                <IconButton
-                  size="small"
-                  onClick={() => {
-                    onTriggerViewer();
-                  }}
-                >
-                  <ClearRoundedIcon color="disabled" />
-                </IconButton>
-              </div>
-              <EventActions
-                event={event}
-                onDelete={handleDelete}
-                onEdit={() => {
-                  onTriggerViewer();
-                  triggerDialog(true, event);
-
-                  if (onEventEdit && typeof onEventEdit === "function") {
-                    onEventEdit(event);
-                  }
-                }}
-              />
-            </div>
-            {viewerTitleComponent instanceof Function ? (
-              viewerTitleComponent(event)
-            ) : (
-              <Typography style={{ padding: "5px 0" }} noWrap>
-                {event.title}
-              </Typography>
-            )}
-          </Box>
-          <div style={{ padding: "5px 10px" }}>
-            <Typography
-              style={{ display: "flex", alignItems: "center", gap: 8 }}
-              color="textSecondary"
-              variant="caption"
-              noWrap
-            >
-              <EventNoteRoundedIcon />
-              {hideDates
-                ? translations.event.allDay
-                : `${format(displayStart, `dd MMMM yyyy ${hFormat}`, {
-                    locale: locale,
-                  })} - ${format(displayEnd, `dd MMMM yyyy ${hFormat}`, {
-                    locale: locale,
-                  })}`}
-            </Typography>
-            {viewerSubtitleComponent instanceof Function ? (
-              viewerSubtitleComponent(event)
-            ) : (
-              <Typography variant="body2" style={{ padding: "5px 0" }}>
-                {event.subtitle}
-              </Typography>
-            )}
-            {hasResource.length > 0 && (
-              <Typography
-                style={{ display: "flex", alignItems: "center", gap: 8 }}
-                color="textSecondary"
-                variant="caption"
-                noWrap
-              >
-                <SupervisorAccountRoundedIcon />
-                {hasResource.map((res) => res[resourceFields.textField]).join(", ")}
-              </Typography>
-            )}
-            {viewerExtraComponent instanceof Function
-              ? viewerExtraComponent(fields, event)
-              : viewerExtraComponent}
-          </div>
-        </PopperInner>
-      )}
-    </Popover>
-  );
-};
-
-export default EventItemPopover;

package/src/lib/components/events/MonthEvents.tsx

@@ -1,141 +0,0 @@
-import { Fragment, useMemo } from "react";
-import {
-  closestTo,
-  isBefore,
-  startOfWeek,
-  differenceInDays,
-  differenceInCalendarWeeks,
-  format,
-} from "date-fns";
-import { ProcessedEvent } from "../../types";
-import { Typography } from "@mui/material";
-import EventItem from "./EventItem";
-import {
-  MONTH_BAR_HEIGHT,
-  MONTH_NUMBER_HEIGHT,
-  MULTI_DAY_EVENT_HEIGHT,
-} from "../../helpers/constants";
-import { convertEventTimeZone, differenceInDaysOmitTime } from "../../helpers/generals";
-import useStore from "../../hooks/useStore";
-import usePosition from "../../positionManger/usePosition";
-
-interface MonthEventProps {
-  events: ProcessedEvent[];
-  resourceId?: string;
-  today: Date;
-  eachWeekStart: Date[];
-  eachFirstDayInCalcRow: Date | null;
-  daysList: Date[];
-  onViewMore(day: Date): void;
-  cellHeight: number;
-}
-
-const MonthEvents = ({
-  events,
-  resourceId,
-  today,
-  eachWeekStart,
-  eachFirstDayInCalcRow,
-  daysList,
-  onViewMore,
-  cellHeight,
-}: MonthEventProps) => {
-  const LIMIT = Math.round((cellHeight - MONTH_NUMBER_HEIGHT) / MULTI_DAY_EVENT_HEIGHT - 1);
-  const { translations, month, locale, timeZone } = useStore();
-  const { renderedSlots } = usePosition();
-
-  const renderEvents = useMemo(() => {
-    const elements: React.ReactNode[] = [];
-
-    for (let i = 0; i < Math.min(events.length, LIMIT + 1); i++) {
-      const event = convertEventTimeZone(events[i], timeZone);
-      const fromPrevWeek = !!eachFirstDayInCalcRow && isBefore(event.start, eachFirstDayInCalcRow);
-      const start = fromPrevWeek && eachFirstDayInCalcRow ? eachFirstDayInCalcRow : event.start;
-      let eventLength = differenceInDaysOmitTime(start, event.end) + 1;
-
-      const toNextWeek =
-        differenceInCalendarWeeks(event.end, start, {
-          weekStartsOn: month?.weekStartOn,
-          locale,
-        }) > 0;
-
-      if (toNextWeek) {
-        // Rethink it
-        const NotAccurateWeekStart = startOfWeek(event.start, {
-          weekStartsOn: month?.weekStartOn,
-          locale,
-        });
-        const closestStart = closestTo(NotAccurateWeekStart, eachWeekStart);
-        if (closestStart) {
-          eventLength =
-            daysList.length -
-            (!eachFirstDayInCalcRow ? differenceInDays(event.start, closestStart) : 0);
-        }
-      }
-
-      const day = format(today, "yyyy-MM-dd");
-      const rendered = renderedSlots?.[resourceId || "all"]?.[day];
-      const position = rendered?.[event.event_id] || 0;
-
-      const topSpace = Math.min(position, LIMIT) * MULTI_DAY_EVENT_HEIGHT + MONTH_NUMBER_HEIGHT;
-
-      if (position >= LIMIT) {
-        elements.push(
-          <Typography
-            key={i}
-            width="100%"
-            className="rs__multi_day rs__hover__op"
-            style={{ top: topSpace, fontSize: 11 }}
-            onClick={(e) => {
-              e.stopPropagation();
-              onViewMore(today);
-            }}
-          >
-            {`${Math.abs(events.length - i)} ${translations.moreEvents}`}
-          </Typography>
-        );
-        break;
-      }
-
-      elements.push(
-        <div
-          key={`${event.event_id}_${i}`}
-          className="rs__multi_day"
-          style={{
-            top: topSpace,
-            width: `${100 * eventLength}%`,
-            height: MONTH_BAR_HEIGHT,
-          }}
-        >
-          <EventItem
-            event={event}
-            showdate={false}
-            multiday={differenceInDaysOmitTime(event.start, event.end) > 0}
-            hasPrev={fromPrevWeek}
-            hasNext={toNextWeek}
-          />
-        </div>
-      );
-    }
-
-    return elements;
-  }, [
-    resourceId,
-    renderedSlots,
-    events,
-    LIMIT,
-    eachFirstDayInCalcRow,
-    month?.weekStartOn,
-    locale,
-    today,
-    eachWeekStart,
-    daysList.length,
-    translations.moreEvents,
-    onViewMore,
-    timeZone,
-  ]);
-
-  return <Fragment>{renderEvents}</Fragment>;
-};
-
-export default MonthEvents;

package/src/lib/components/events/TodayEvents.tsx

@@ -1,99 +0,0 @@
-import { differenceInMinutes } from "date-fns";
-import { Fragment } from "react";
-import { BORDER_HEIGHT } from "../../helpers/constants";
-import { isTimeZonedToday, traversCrossingEvents } from "../../helpers/generals";
-import { ProcessedEvent } from "../../types";
-import CurrentTimeBar from "./CurrentTimeBar";
-import EventItem from "./EventItem";
-
-interface TodayEventsProps {
-  todayEvents: ProcessedEvent[];
-  today: Date;
-  startHour: number;
-  endHour: number;
-  step: number;
-  minuteHeight: number;
-  direction: "rtl" | "ltr";
-  timeZone?: string;
-  currentTime?: Date;
-  showCurrentTimeBar?: boolean;
-  currentTimeBarColor?: string;
-}
-const TodayEvents = ({
-  todayEvents,
-  today,
-  startHour,
-  endHour,
-  step,
-  minuteHeight,
-  direction,
-  timeZone,
-  currentTime,
-  showCurrentTimeBar = true,
-  currentTimeBarColor,
-}: TodayEventsProps) => {
-  const crossingIds: Array<number | string> = [];
-
-  return (
-    <Fragment>
-      {showCurrentTimeBar && isTimeZonedToday({ dateLeft: today, timeZone }) && (
-        <CurrentTimeBar
-          startHour={startHour}
-          step={step}
-          minuteHeight={minuteHeight}
-          timeZone={timeZone}
-          zIndex={2 * todayEvents.length + 1}
-          currentTime={currentTime}
-          color={currentTimeBarColor}
-        />
-      )}
-
-      {todayEvents.map((event, i) => {
-        const maxHeight = (endHour * 60 - startHour * 60) * minuteHeight;
-        const eventHeight = differenceInMinutes(event.end, event.start) * minuteHeight;
-        const height = Math.min(eventHeight, maxHeight) - BORDER_HEIGHT;
-
-        const calendarStartInMins = startHour * 60;
-        const eventStartInMins = event.start.getHours() * 60 + event.start.getMinutes();
-        const minituesFromTop = Math.max(eventStartInMins - calendarStartInMins, 0);
-
-        const topSpace = minituesFromTop * minuteHeight;
-        /** Add border factor to height of each slot */
-        const slots = height / 60;
-        const heightBorderFactor = slots * BORDER_HEIGHT;
-
-        /** Calculate top space */
-        const slotsFromTop = minituesFromTop / step;
-        const top = topSpace + slotsFromTop;
-
-        const crossingEvents = traversCrossingEvents(todayEvents, event);
-        const alreadyRendered = crossingEvents.filter((e) => crossingIds.includes(e.event_id));
-        crossingIds.push(event.event_id);
-
-        return (
-          <div
-            key={`${event.event_id}/${event.recurrenceId || ""}`}
-            className="rs__event__item"
-            style={{
-              height: height + heightBorderFactor,
-              top,
-              width:
-                alreadyRendered.length > 0
-                  ? `calc(100% - ${100 - 98 / (alreadyRendered.length + 1)}%)`
-                  : "98%", // Leave some space to click cell
-              zIndex: todayEvents.length + i,
-              [direction === "rtl" ? "right" : "left"]:
-                alreadyRendered.length > 0
-                  ? `${(100 / (crossingEvents.length + 1)) * alreadyRendered.length}%`
-                  : "",
-            }}
-          >
-            <EventItem event={event} />
-          </div>
-        );
-      })}
-    </Fragment>
-  );
-};
-
-export default TodayEvents;

package/src/lib/components/hoc/DateProvider.tsx

@@ -1,19 +0,0 @@
-import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
-import useStore from "../../hooks/useStore";
-import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
-
-interface AuxProps {
-  children: React.ReactNode;
-}
-
-const DateProvider = ({ children }: AuxProps) => {
-  const { locale } = useStore();
-
-  return (
-    <LocalizationProvider dateAdapter={AdapterDateFns} adapterLocale={locale}>
-      {children}
-    </LocalizationProvider>
-  );
-};
-
-export default DateProvider;