@isma91/react-scheduler 4.0.0

package/src/events.tsx

@@ -0,0 +1,227 @@
+import { datetime, RRule } from "rrule";
+import { ProcessedEvent } from "./lib/types";
+
+export const EVENTS: ProcessedEvent[] = [
+  {
+    event_id: 1,
+    title: "Event 1 (Disabled)",
+    subtitle: "This event is disabled",
+    start: new Date(new Date(new Date().setHours(9)).setMinutes(0)),
+    end: new Date(new Date(new Date().setHours(10)).setMinutes(0)),
+    disabled: true,
+    admin_id: [1, 2, 3, 4],
+  },
+  {
+    event_id: 2,
+    title: "Event 2",
+    subtitle: "This event is draggable",
+    start: new Date(new Date(new Date().setHours(10)).setMinutes(0)),
+    end: new Date(new Date(new Date().setHours(12)).setMinutes(0)),
+    admin_id: 2,
+    color: "#50b500",
+    agendaAvatar: "E",
+  },
+  {
+    event_id: 3,
+    title: "Event 3",
+    subtitle: "This event is not editable",
+    start: new Date(new Date(new Date().setHours(11)).setMinutes(0)),
+    end: new Date(new Date(new Date().setHours(12)).setMinutes(0)),
+    admin_id: 1,
+    editable: false,
+    deletable: false,
+  },
+  {
+    event_id: 4,
+    title: "Event 4",
+    start: new Date(
+      new Date(new Date(new Date().setHours(9)).setMinutes(30)).setDate(new Date().getDate() - 2)
+    ),
+    end: new Date(
+      new Date(new Date(new Date().setHours(11)).setMinutes(0)).setDate(new Date().getDate() - 2)
+    ),
+    admin_id: [2, 3],
+    color: "#900000",
+    allDay: true,
+  },
+  {
+    event_id: 5,
+    title: "Event 5",
+    subtitle: "This event is editable",
+    start: new Date(
+      new Date(new Date(new Date().setHours(10)).setMinutes(30)).setDate(new Date().getDate() - 2)
+    ),
+    end: new Date(
+      new Date(new Date(new Date().setHours(14)).setMinutes(0)).setDate(new Date().getDate() - 2)
+    ),
+    admin_id: 2,
+    editable: true,
+  },
+  {
+    event_id: 6,
+    title: "Event 6",
+    subtitle: "This event is all day",
+    start: new Date(
+      new Date(new Date(new Date().setHours(20)).setMinutes(30)).setDate(new Date().getDate() - 3)
+    ),
+    end: new Date(new Date(new Date().setHours(23)).setMinutes(0)),
+    admin_id: 2,
+    allDay: true,
+    sx: { color: "purple" },
+  },
+  {
+    event_id: 7,
+    title: "Event 7 (Not draggable)",
+    subtitle: "This event is not draggable",
+    start: new Date(
+      new Date(new Date(new Date().setHours(10)).setMinutes(30)).setDate(new Date().getDate() - 3)
+    ),
+    end: new Date(
+      new Date(new Date(new Date().setHours(14)).setMinutes(30)).setDate(new Date().getDate() - 3)
+    ),
+    admin_id: 1,
+    draggable: false,
+    color: "#8000cc",
+  },
+  {
+    event_id: 8,
+    title: "Event 8",
+    subtitle: "This event has a custom color",
+    start: new Date(
+      new Date(new Date(new Date().setHours(10)).setMinutes(30)).setDate(new Date().getDate() + 30)
+    ),
+    end: new Date(
+      new Date(new Date(new Date().setHours(14)).setMinutes(30)).setDate(new Date().getDate() + 30)
+    ),
+    admin_id: 1,
+    color: "#8000cc",
+  },
+  {
+    event_id: 9,
+    title: "Event 9",
+    subtitle: `This event is a recurring weekly until ${new Date(
+      new Date().setMonth(
+        new Date(
+          new Date(new Date(new Date().setHours(11)).setMinutes(0)).setDate(
+            new Date().getDate() + 1
+          )
+        ).getMonth() + 1
+      )
+    ).toDateString()}`,
+    start: new Date(
+      new Date(new Date(new Date().setHours(10)).setMinutes(0)).setDate(new Date().getDate() + 1)
+    ),
+    end: new Date(
+      new Date(new Date(new Date().setHours(11)).setMinutes(0)).setDate(new Date().getDate() + 1)
+    ),
+    recurring: new RRule({
+      freq: RRule.WEEKLY,
+      dtstart: convertDateToRRuleDate(
+        new Date(
+          new Date(new Date(new Date().setHours(10)).setMinutes(0)).setDate(
+            new Date().getDate() - 20
+          )
+        )
+      ),
+      until: new Date(
+        new Date().setMonth(
+          new Date(
+            new Date(new Date(new Date().setHours(11)).setMinutes(0)).setDate(
+              new Date().getDate() + 1
+            )
+          ).getMonth() + 1
+        )
+      ),
+    }),
+  },
+  {
+    event_id: 10,
+    title: "Event 10",
+    subtitle: "This event is a recurring hourly 3 times",
+    start: new Date(new Date(new Date().setHours(14)).setMinutes(15)),
+    end: new Date(new Date(new Date().setHours(14)).setMinutes(45)),
+    recurring: new RRule({
+      freq: RRule.HOURLY,
+      count: 3,
+      dtstart: convertDateToRRuleDate(new Date(new Date(new Date().setHours(14)).setMinutes(15))),
+    }),
+    color: "#dc4552",
+  },
+  {
+    event_id: 11,
+    title: "Event 11",
+    start: new Date(
+      new Date(new Date(new Date().setHours(9)).setMinutes(0)).setDate(new Date().getDate() - 2)
+    ),
+    end: new Date(
+      new Date(new Date(new Date().setHours(2)).setMinutes(0)).setDate(new Date().getDate() + 2)
+    ),
+    color: "#079000ff",
+    allDay: false,
+  },
+];
+
+export const RESOURCES = [
+  {
+    admin_id: 1,
+    title: "One",
+    mobile: "555666777",
+    avatar: "",
+    color: "#ab2d2d",
+  },
+  {
+    admin_id: 2,
+    title: "Two is very long name",
+    mobile: "555666777",
+    avatar: "https://picsum.photos/200/300",
+    color: "#58ab2d",
+  },
+  {
+    admin_id: 3,
+    title: "Three",
+    mobile: "555666777",
+    avatar: "https://picsum.photos/200/300",
+    color: "#a001a2",
+  },
+  {
+    admin_id: 4,
+    title: "Four",
+    mobile: "555666777",
+    avatar: "https://picsum.photos/200/300",
+    color: "#08c5bd",
+  },
+];
+
+export const generateRandomEvents = (total = 300) => {
+  const events = [];
+  for (let i = 0; i < total; i++) {
+    const day = Math.round(i % 15);
+    events.push({
+      event_id: Math.random(),
+      title: "Event " + (i + 1),
+      start: new Date(
+        new Date(new Date(new Date().setHours(10)).setMinutes(30)).setDate(
+          new Date().getDate() + day
+        )
+      ),
+      end: new Date(
+        new Date(new Date(new Date().setHours(14)).setMinutes(0)).setDate(
+          new Date().getDate() + day
+        )
+      ),
+      // allDay: Math.random() > 0.5,
+    });
+  }
+
+  return events;
+};
+
+function convertDateToRRuleDate(date: Date) {
+  return datetime(
+    date.getFullYear(),
+    date.getMonth() + 1,
+    date.getDate(),
+    date.getHours(),
+    date.getMinutes()
+  );
+}

package/src/index.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { CssBaseline, ThemeProvider, createTheme } from "@mui/material";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import Page1 from "./Page1";
+
+const root = createRoot(document.getElementById("root") as HTMLElement);
+root.render(
+  <React.StrictMode>
+    <ThemeProvider theme={createTheme()}>
+      <CssBaseline />
+      <BrowserRouter>
+        <Routes>
+          <Route path="/" element={<App />} />
+          <Route path="/1" element={<Page1 />} />
+        </Routes>
+      </BrowserRouter>
+    </ThemeProvider>
+  </React.StrictMode>
+);

package/src/lib/SchedulerComponent.tsx

@@ -0,0 +1,78 @@
+import { Week } from "./views/Week";
+import { Navigation } from "./components/nav/Navigation";
+import Editor from "./views/Editor";
+import { CircularProgress, Typography } from "@mui/material";
+import { Month } from "./views/Month";
+import { Day } from "./views/Day";
+import { Table, Wrapper } from "./styles/styles";
+import { forwardRef, useMemo } from "react";
+import useStore from "./hooks/useStore";
+import { SchedulerRef } from "./types";
+import { PositionProvider } from "./positionManger/provider";
+
+const SchedulerComponent = forwardRef<SchedulerRef, unknown>(function SchedulerComponent(_, ref) {
+  const store = useStore();
+  const { view, dialog, loading, loadingComponent, resourceViewMode, resources, translations } =
+    store;
+
+  const Views = useMemo(() => {
+    switch (view) {
+      case "month":
+        return <Month />;
+      case "week":
+        return <Week />;
+      case "day":
+        return <Day />;
+      default:
+        return "";
+    }
+  }, [view]);
+
+  const LoadingComp = useMemo(() => {
+    return (
+      <div className="rs__table_loading">
+        {loadingComponent || (
+          <div className="rs__table_loading_internal">
+            <span>
+              <CircularProgress size={50} />
+              <Typography align="center">{translations.loading}</Typography>
+            </span>
+          </div>
+        )}
+      </div>
+    );
+  }, [loadingComponent, translations.loading]);
+
+  return (
+    <Wrapper
+      dialog={dialog ? 1 : 0}
+      data-testid="rs-wrapper"
+      ref={(el) => {
+        const calendarRef = ref as any;
+        if (calendarRef) {
+          calendarRef.current = {
+            el,
+            scheduler: store,
+          };
+        }
+      }}
+    >
+      {loading ? LoadingComp : null}
+      <Navigation />
+      <Table
+        resource_count={resourceViewMode === "default" ? resources.length : 1}
+        // Temp resources/default `sticky` wontfix
+        sx={{
+          overflowX: resourceViewMode === "default" && resources.length > 1 ? "auto" : undefined,
+          flexDirection: resourceViewMode === "vertical" ? "column" : undefined,
+        }}
+        data-testid="grid"
+      >
+        <PositionProvider>{Views}</PositionProvider>
+      </Table>
+      {dialog && <Editor />}
+    </Wrapper>
+  );
+});
+
+export default SchedulerComponent;

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

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

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

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

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

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

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