@isma91/react-scheduler 4.0.0 → 4.0.2

package/src/lib/__tests__/index.test.tsx

@@ -1,24 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import { Scheduler } from "..";
-import "@testing-library/jest-dom";
-
-describe("Render scheduler", () => {
-  it("Default render", () => {
-    render(<Scheduler />);
-
-    // Scheduler component
-    const scheduler = screen.getByTestId("rs-wrapper");
-    expect(scheduler).toBeInTheDocument();
-
-    // Navigators
-    const viewNavigator = screen.getByTestId("view-navigator");
-    expect(viewNavigator).toBeInTheDocument();
-
-    const dateNavigator = screen.getByTestId("date-navigator");
-    expect(dateNavigator).toBeInTheDocument();
-    expect(dateNavigator.getElementsByTagName("button").length).toEqual(3);
-
-    const grid = screen.getByTestId("grid");
-    expect(grid).toBeInTheDocument();
-  });
-});

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

@@ -1,52 +0,0 @@
-import { Button } from "@mui/material";
-import { useCellAttributes } from "../../hooks/useCellAttributes";
-import { CellRenderedProps } from "../../types";
-
-interface CellProps {
-  day: Date;
-  start: Date;
-  height: number;
-  end: Date;
-  resourceKey: string;
-  resourceVal: string | number;
-  cellRenderer?(props: CellRenderedProps): React.ReactNode;
-  children?: React.ReactNode;
-}
-
-const Cell = ({
-  day,
-  start,
-  end,
-  resourceKey,
-  resourceVal,
-  cellRenderer,
-  height,
-  children,
-}: CellProps) => {
-  const props = useCellAttributes({ start, end, resourceKey, resourceVal });
-
-  if (cellRenderer) {
-    return cellRenderer({
-      day,
-      start,
-      end,
-      height,
-      ...props,
-    });
-  }
-
-  return (
-    <Button
-      fullWidth
-      aria-label={`${start.toLocaleString("en", {
-        dateStyle: "full",
-        timeStyle: "long",
-      })} - ${end.toLocaleString("en", { dateStyle: "full", timeStyle: "long" })}`}
-      {...props}
-    >
-      {children}
-    </Button>
-  );
-};
-
-export default Cell;

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

@@ -1,38 +0,0 @@
-import NavigateBeforeRoundedIcon from "@mui/icons-material/NavigateBeforeRounded";
-import NavigateNextRoundedIcon from "@mui/icons-material/NavigateNextRounded";
-import { IconButton, IconButtonProps } from "@mui/material";
-import { MouseEvent } from "react";
-import useStore from "../../hooks/useStore";
-
-interface LocaleArrowProps extends Omit<IconButtonProps, "type"> {
-  type: "prev" | "next";
-  onClick?(e?: MouseEvent): void;
-}
-const LocaleArrow = ({ type, onClick, ...props }: LocaleArrowProps) => {
-  const { direction } = useStore();
-
-  let Arrow = NavigateNextRoundedIcon;
-  if (type === "prev") {
-    Arrow = direction === "rtl" ? NavigateNextRoundedIcon : NavigateBeforeRoundedIcon;
-  } else if (type === "next") {
-    Arrow = direction === "rtl" ? NavigateBeforeRoundedIcon : NavigateNextRoundedIcon;
-  }
-
-  return (
-    <IconButton
-      style={{ padding: 2 }}
-      onClick={onClick}
-      onDragOver={(e) => {
-        e.preventDefault();
-        if (onClick) {
-          onClick();
-        }
-      }}
-      {...props}
-    >
-      <Arrow />
-    </IconButton>
-  );
-};
-
-export { LocaleArrow };

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

@@ -1,73 +0,0 @@
-import {
-  Avatar,
-  ListItem,
-  ListItemAvatar,
-  ListItemText,
-  Typography,
-  useTheme,
-} from "@mui/material";
-import { DefaultResource } from "../../types";
-import useStore from "../../hooks/useStore";
-
-interface ResourceHeaderProps {
-  resource: DefaultResource;
-}
-const ResourceHeader = ({ resource }: ResourceHeaderProps) => {
-  const { resourceHeaderComponent, resourceFields, direction, resourceViewMode } = useStore();
-  const theme = useTheme();
-
-  const text = resource[resourceFields.textField];
-  const subtext = resource[resourceFields.subTextField || ""];
-  const avatar = resource[resourceFields.avatarField || ""];
-  const color = resource[resourceFields.colorField || ""];
-
-  if (resourceHeaderComponent instanceof Function) {
-    return resourceHeaderComponent(resource);
-  }
-
-  return (
-    <ListItem
-      sx={{
-        padding: "2px 10px",
-        textAlign: direction === "rtl" ? "right" : "left",
-        ...(resourceViewMode === "tabs"
-          ? {}
-          : resourceViewMode === "vertical"
-            ? {
-                display: "block",
-                textAlign: "center",
-                position: "sticky",
-                top: 4,
-              }
-            : {
-                borderColor: theme.palette.grey[300],
-                borderStyle: "solid",
-                borderWidth: 1,
-              }),
-      }}
-      component="div"
-    >
-      <ListItemAvatar>
-        <Avatar sx={{ background: color, margin: "auto" }} alt={text} src={avatar} />
-      </ListItemAvatar>
-      <ListItemText
-        primary={
-          <Typography variant="body2" noWrap={resourceViewMode !== "vertical"}>
-            {text}
-          </Typography>
-        }
-        secondary={
-          <Typography
-            variant="caption"
-            color="textSecondary"
-            noWrap={resourceViewMode !== "vertical"}
-          >
-            {subtext}
-          </Typography>
-        }
-      />
-    </ListItem>
-  );
-};
-
-export { ResourceHeader };

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

@@ -1,119 +0,0 @@
-import { CSSProperties } from "react";
-import { Tabs, Tab } from "@mui/material";
-import { styled } from "@mui/material/styles";
-import { Theme } from "@mui/system";
-
-interface TabPanelProps {
-  value: string | number;
-  index: string | number;
-  children: React.ReactNode;
-}
-function TabPanel(props: TabPanelProps) {
-  const { children, value, index } = props;
-  return value === index ? <>{children}</> : <></>;
-}
-
-function a11yProps(index: string | number) {
-  return {
-    id: `scrollable-auto-tab-${index}`,
-    "aria-controls": `scrollable-auto-tabpanel-${index}`,
-  };
-}
-
-const StyledTaps = styled("div")(({ theme }: { theme: Theme }) => ({
-  flexGrow: 1,
-  width: "100%",
-  backgroundColor: theme.palette.background.paper,
-  alignSelf: "center",
-  "& .tabs": {
-    borderColor: theme.palette.grey[300],
-    borderStyle: "solid",
-    borderWidth: 1,
-    "& button.MuiTab-root": {
-      borderColor: theme.palette.grey[300],
-      borderRightStyle: "solid",
-      borderWidth: 1,
-    },
-  },
-  "& .primary": {
-    background: theme.palette.primary.main,
-  },
-  "& .secondary": {
-    background: theme.palette.secondary.main,
-  },
-  "& .error": {
-    background: theme.palette.error.main,
-  },
-  "& .info": {
-    background: theme.palette.info.dark,
-  },
-  "& .text_primary": {
-    color: theme.palette.primary.main,
-  },
-  "& .text_secondary": {
-    color: theme.palette.secondary.main,
-  },
-  "& .text_error": {
-    color: theme.palette.error.main,
-  },
-  "& .text_info": {
-    color: theme.palette.info.dark,
-  },
-}));
-
-export type ButtonTabProps = {
-  id: string | number;
-  label: string | React.ReactNode;
-  component: React.ReactNode;
-};
-interface ButtonTabsProps {
-  tabs: ButtonTabProps[];
-  tab: string | number;
-  setTab(tab: string | number): void;
-  variant?: "scrollable" | "standard" | "fullWidth";
-  indicator?: "primary" | "secondary" | "info" | "error";
-  style?: CSSProperties;
-}
-
-const ButtonTabs = ({
-  tabs,
-  variant = "scrollable",
-  tab,
-  setTab,
-  indicator = "primary",
-  style,
-}: ButtonTabsProps) => {
-  return (
-    <StyledTaps style={style}>
-      <Tabs
-        value={tab}
-        variant={variant}
-        scrollButtons
-        className="tabs"
-        classes={{ indicator: indicator }}
-      >
-        {tabs.map((tab: ButtonTabProps, i: number) => (
-          <Tab
-            key={tab.id || i}
-            label={tab.label}
-            sx={{ flex: 1, flexBasis: 200, flexShrink: 0 }}
-            value={tab.id}
-            {...a11yProps(tab.id)}
-            onClick={() => setTab(tab.id)}
-            onDragEnter={() => setTab(tab.id)}
-          />
-        ))}
-      </Tabs>
-      {tabs.map(
-        (t: ButtonTabProps, i: number) =>
-          t.component && (
-            <TabPanel key={i} value={tab} index={t.id}>
-              {t.component}
-            </TabPanel>
-          )
-      )}
-    </StyledTaps>
-  );
-};
-
-export { ButtonTabs };

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

@@ -1,44 +0,0 @@
-import { Typography } from "@mui/material";
-import { format, Locale } from "date-fns";
-import { isTimeZonedToday } from "../../helpers/generals";
-import useStore from "../../hooks/useStore";
-
-interface TodayTypoProps {
-  date: Date;
-  onClick?(day: Date): void;
-  locale: Locale;
-}
-
-const TodayTypo = ({ date, onClick, locale }: TodayTypoProps) => {
-  const { timeZone } = useStore();
-  const today = isTimeZonedToday({ dateLeft: date, timeZone });
-
-  return (
-    <div>
-      <Typography
-        style={{
-          fontWeight: today ? "bold" : "inherit",
-        }}
-        color={today ? "primary" : "inherit"}
-        className={onClick ? "rs__hover__op" : ""}
-        onClick={(e) => {
-          e.stopPropagation();
-          if (onClick) onClick(date);
-        }}
-      >
-        {format(date, "dd", { locale })}
-      </Typography>
-      <Typography
-        color={today ? "primary" : "inherit"}
-        style={{
-          fontWeight: today ? "bold" : "inherit",
-          fontSize: 11,
-        }}
-      >
-        {format(date, "eee", { locale })}
-      </Typography>
-    </div>
-  );
-};
-
-export default TodayTypo;

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

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

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

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

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