@isma91/react-scheduler 4.0.0

package/src/lib/components/common/WithResources.tsx

@@ -0,0 +1,98 @@
+import { useMemo } from "react";
+import { DefaultResource } from "../../types";
+import { ResourceHeader } from "./ResourceHeader";
+import { ButtonTabProps, ButtonTabs } from "./Tabs";
+import useStore from "../../hooks/useStore";
+import { Box, useTheme } from "@mui/material";
+
+interface WithResourcesProps {
+  renderChildren(resource: DefaultResource): React.ReactNode;
+}
+const WithResources = ({ renderChildren }: WithResourcesProps) => {
+  const { resources, resourceFields, resourceViewMode } = useStore();
+  const theme = useTheme();
+
+  if (resourceViewMode === "tabs") {
+    return <ResourcesTabTables renderChildren={renderChildren} />;
+  } else if (resourceViewMode === "vertical") {
+    return (
+      <>
+        {resources.map((res: DefaultResource, i: number) => (
+          <Box key={`${res[resourceFields.idField]}_${i}`} sx={{ display: "flex" }}>
+            <Box
+              sx={{
+                borderColor: theme.palette.grey[300],
+                borderStyle: "solid",
+                borderWidth: "1px 1px 0 1px",
+                paddingTop: 1,
+                flexBasis: 140,
+              }}
+            >
+              <ResourceHeader resource={res} />
+            </Box>
+            <Box
+              //
+              sx={{ width: "100%", overflowX: "auto" }}
+            >
+              {renderChildren(res)}
+            </Box>
+          </Box>
+        ))}
+      </>
+    );
+  } else {
+    return (
+      <>
+        {resources.map((res: DefaultResource, i: number) => (
+          <div key={`${res[resourceFields.idField]}_${i}`}>
+            <ResourceHeader resource={res} />
+            {renderChildren(res)}
+          </div>
+        ))}
+      </>
+    );
+  }
+};
+
+const ResourcesTabTables = ({ renderChildren }: WithResourcesProps) => {
+  const { resources, resourceFields, selectedTab, handleState, onResourceChange } = useStore();
+
+  const tabs: ButtonTabProps[] = resources.map((res) => {
+    return {
+      id: res[resourceFields.idField],
+      label: <ResourceHeader resource={res} />,
+      component: <>{renderChildren(res)}</>,
+    };
+  });
+
+  const setTab = (tab: DefaultResource["assignee"]) => {
+    handleState(tab, "selectedTab");
+    if (typeof onResourceChange === "function") {
+      const selected = resources.find((re) => re[resourceFields.idField] === tab);
+      if (selected) {
+        onResourceChange(selected);
+      }
+    }
+  };
+
+  const currentTabSafeId = useMemo(() => {
+    const firstId = resources[0][resourceFields.idField];
+    if (!selectedTab) {
+      return firstId;
+    }
+
+    // Make sure current selected id is within the resources array
+    const idx = resources.findIndex((re) => re[resourceFields.idField] === selectedTab);
+    if (idx < 0) {
+      return firstId;
+    }
+
+    return selectedTab;
+  }, [resources, resourceFields.idField, selectedTab]);
+
+  return (
+    <ButtonTabs tabs={tabs} tab={currentTabSafeId} setTab={setTab} style={{ display: "grid" }} />
+  );
+};
+
+export { WithResources };

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

@@ -0,0 +1,65 @@
+import DeleteRounded from "@mui/icons-material/DeleteRounded";
+import EditRounded from "@mui/icons-material/EditRounded";
+import { Button, Grow, IconButton, Slide } from "@mui/material";
+import { useState } from "react";
+import { EventActions as Actions } from "../../styles/styles";
+import { ProcessedEvent } from "../../types";
+import useStore from "../../hooks/useStore";
+import useEventPermissions from "../../hooks/useEventPermissions";
+
+interface Props {
+  event: ProcessedEvent;
+  onDelete(): void;
+  onEdit(): void;
+}
+
+const EventActions = ({ event, onDelete, onEdit }: Props) => {
+  const { translations, direction } = useStore();
+  const [deleteConfirm, setDeleteConfirm] = useState(false);
+
+  const handleDelete = () => {
+    if (!deleteConfirm) {
+      return setDeleteConfirm(true);
+    }
+    onDelete();
+  };
+
+  const { canEdit, canDelete } = useEventPermissions(event);
+
+  return (
+    <Actions>
+      <Grow in={!deleteConfirm} exit={false} timeout={400} unmountOnExit>
+        <div>
+          {canEdit && (
+            <IconButton size="small" onClick={onEdit}>
+              <EditRounded />
+            </IconButton>
+          )}
+          {canDelete && (
+            <IconButton size="small" onClick={handleDelete}>
+              <DeleteRounded />
+            </IconButton>
+          )}
+        </div>
+      </Grow>
+      <Slide
+        in={deleteConfirm}
+        direction={direction === "rtl" ? "right" : "left"}
+        unmountOnExit
+        timeout={400}
+        exit={false}
+      >
+        <div>
+          <Button className="delete" size="small" onClick={handleDelete}>
+            {translations.form.delete.toUpperCase()}
+          </Button>
+          <Button className="cancel" size="small" onClick={() => setDeleteConfirm(false)}>
+            {translations.form.cancel.toUpperCase()}
+          </Button>
+        </div>
+      </Slide>
+    </Actions>
+  );
+};
+
+export default EventActions;

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

@@ -0,0 +1,115 @@
+import { Fragment, MouseEvent, useState } from "react";
+import {
+  useTheme,
+  List,
+  ListItemButton,
+  ListItemAvatar,
+  Avatar,
+  ListItemText,
+} from "@mui/material";
+import { format } from "date-fns";
+import { ProcessedEvent } from "../../types";
+import { getHourFormat, isTimeZonedToday } from "../../helpers/generals";
+import useStore from "../../hooks/useStore";
+import EventItemPopover from "./EventItemPopover";
+
+interface AgendaEventsListProps {
+  day: Date;
+  events: ProcessedEvent[];
+}
+
+const AgendaEventsList = ({ day, events }: AgendaEventsListProps) => {
+  const [anchorEl, setAnchorEl] = useState<Element | null>(null);
+  const [selectedEvent, setSelectedEvent] = useState<ProcessedEvent>();
+  const [deleteConfirm, setDeleteConfirm] = useState(false);
+  const { locale, hourFormat, eventRenderer, onEventClick, timeZone, disableViewer } = useStore();
+  const theme = useTheme();
+  const hFormat = getHourFormat(hourFormat);
+
+  const triggerViewer = (el?: MouseEvent<Element>) => {
+    if (!el?.currentTarget && deleteConfirm) {
+      setDeleteConfirm(false);
+    }
+    setAnchorEl(el?.currentTarget || null);
+  };
+
+  return (
+    <Fragment>
+      <List>
+        {events.map((event) => {
+          const startIsToday = isTimeZonedToday({
+            dateLeft: event.start,
+            dateRight: day,
+            timeZone,
+          });
+          const startFormat = startIsToday ? hFormat : `MMM d, ${hFormat}`;
+          const startDate = format(event.start, startFormat, {
+            locale,
+          });
+          const endIsToday = isTimeZonedToday({ dateLeft: event.end, dateRight: day, timeZone });
+
+          const endFormat = endIsToday ? hFormat : `MMM d, ${hFormat}`;
+          const endDate = format(event.end, endFormat, {
+            locale,
+          });
+
+          if (typeof eventRenderer === "function") {
+            return eventRenderer({
+              event,
+              onClick: (e) => {
+                setSelectedEvent(event);
+                triggerViewer(e);
+              },
+            });
+          }
+
+          return (
+            <ListItemButton
+              key={`${event.start.getTime()}_${event.end.getTime()}_${event.event_id}`}
+              focusRipple
+              disableRipple={disableViewer}
+              tabIndex={disableViewer ? -1 : 0}
+              disabled={event.disabled}
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                if (!disableViewer) {
+                  triggerViewer(e);
+                }
+                setSelectedEvent(event);
+                if (typeof onEventClick === "function") {
+                  onEventClick(event);
+                }
+              }}
+            >
+              <ListItemAvatar>
+                <Avatar
+                  sx={{
+                    bgcolor: event.disabled ? "#d0d0d0" : event.color || theme.palette.primary.main,
+                    color: event.disabled
+                      ? "#808080"
+                      : event.textColor || theme.palette.primary.contrastText,
+                  }}
+                >
+                  {event.agendaAvatar || " "}
+                </Avatar>
+              </ListItemAvatar>
+              <ListItemText primary={event.title} secondary={`${startDate} - ${endDate}`} />
+            </ListItemButton>
+          );
+        })}
+      </List>
+
+      {/* Viewer */}
+      {selectedEvent && (
+        <EventItemPopover
+          anchorEl={anchorEl}
+          event={selectedEvent}
+          onTriggerViewer={triggerViewer}
+        />
+      )}
+    </Fragment>
+  );
+};
+
+export default AgendaEventsList;

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

@@ -0,0 +1,59 @@
+import { useEffect, useState } from "react";
+import { differenceInMinutes, set } from "date-fns";
+import { BORDER_HEIGHT } from "../../helpers/constants";
+import { getTimeZonedDate } from "../../helpers/generals";
+import { TimeIndicatorBar } from "../../styles/styles";
+
+interface CurrentTimeBarProps {
+  startHour: number;
+  step: number;
+  minuteHeight: number;
+  timeZone?: string;
+  zIndex?: number;
+  currentTime?: Date;
+  color?: string;
+}
+
+function calculateTop({
+  startHour,
+  step,
+  minuteHeight,
+  timeZone,
+  currentTime,
+}: CurrentTimeBarProps): number {
+  const now = currentTime
+    ? getTimeZonedDate(currentTime, timeZone)
+    : getTimeZonedDate(new Date(), timeZone);
+
+  const minutesFromTop = differenceInMinutes(now, set(now, { hours: startHour, minutes: 0 }));
+  const topSpace = minutesFromTop * minuteHeight;
+  const slotsFromTop = minutesFromTop / step;
+  const borderFactor = slotsFromTop + BORDER_HEIGHT;
+  const top = topSpace + borderFactor;
+
+  return top;
+}
+
+const CurrentTimeBar = (props: CurrentTimeBarProps) => {
+  const [top, setTop] = useState(calculateTop(props));
+  const { startHour, step, minuteHeight, timeZone, currentTime, color } = props;
+
+  useEffect(() => {
+    const calcProps = { startHour, step, minuteHeight, timeZone, currentTime };
+    setTop(calculateTop(calcProps));
+    const interval = setInterval(() => setTop(calculateTop(calcProps)), 60 * 1000);
+    return () => clearInterval(interval);
+  }, [startHour, step, minuteHeight, timeZone, currentTime]);
+
+  // Prevent showing bar on top of days/header
+  if (top < 0) return null;
+
+  return (
+    <TimeIndicatorBar style={{ top, zIndex: props.zIndex }} color={color}>
+      <div />
+      <div />
+    </TimeIndicatorBar>
+  );
+};
+
+export default CurrentTimeBar;

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

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

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