@isma91/react-scheduler 4.0.0

package/src/lib/components/nav/Navigation.tsx

@@ -0,0 +1,201 @@
+import { Fragment, useState } from "react";
+import {
+  Button,
+  useTheme,
+  useMediaQuery,
+  Popover,
+  MenuList,
+  MenuItem,
+  IconButton,
+} from "@mui/material";
+import { WeekDateBtn } from "./WeekDateBtn";
+import { DayDateBtn } from "./DayDateBtn";
+import { MonthDateBtn } from "./MonthDateBtn";
+import MoreVertIcon from "@mui/icons-material/MoreVert";
+import ViewAgendaIcon from "@mui/icons-material/ViewAgenda";
+import useStore from "../../hooks/useStore";
+import { NavigationDiv } from "../../styles/styles";
+import { getTimeZonedDate } from "../../helpers/generals";
+
+export type View = "month" | "week" | "day";
+
+const Navigation = () => {
+  const {
+    selectedDate,
+    view,
+    week,
+    handleState,
+    getViews,
+    translations,
+    navigation,
+    day,
+    month,
+    disableViewNavigator,
+    onSelectedDateChange,
+    onViewChange,
+    stickyNavigation,
+    timeZone,
+    agenda,
+    toggleAgenda,
+    enableAgenda,
+    customHeaderContent,
+    stickyNavigationOffset,
+  } = useStore();
+  const [anchorEl, setAnchorEl] = useState<Element | null>(null);
+  const theme = useTheme();
+  const isDesktop = useMediaQuery(theme.breakpoints.up("sm"));
+  const views = getViews();
+
+  const toggleMoreMenu = (el?: Element) => {
+    setAnchorEl(el || null);
+  };
+
+  const handleSelectedDateChange = (date: Date) => {
+    handleState(date, "selectedDate");
+
+    if (onSelectedDateChange && typeof onSelectedDateChange === "function") {
+      onSelectedDateChange(date);
+    }
+  };
+
+  const handleChangeView = (view: View) => {
+    handleState(view, "view");
+    if (onViewChange && typeof onViewChange === "function") {
+      onViewChange(view, agenda);
+    }
+  };
+
+  const renderDateSelector = () => {
+    switch (view) {
+      case "month":
+        return (
+          month?.navigation && (
+            <MonthDateBtn selectedDate={selectedDate} onChange={handleSelectedDateChange} />
+          )
+        );
+      case "week":
+        return (
+          week?.navigation && (
+            <WeekDateBtn
+              selectedDate={selectedDate}
+              onChange={handleSelectedDateChange}
+              weekProps={week!}
+            />
+          )
+        );
+      case "day":
+        return (
+          day?.navigation && (
+            <DayDateBtn selectedDate={selectedDate} onChange={handleSelectedDateChange} />
+          )
+        );
+      default:
+        return "";
+    }
+  };
+
+  if (!navigation && disableViewNavigator) return null;
+
+  return (
+    <NavigationDiv sticky={stickyNavigation ? "1" : "0"} offset={stickyNavigationOffset}>
+      <div data-testid="date-navigator">{navigation && renderDateSelector()}</div>
+
+      {customHeaderContent && (
+        <div className="rs__custom_header_content">{customHeaderContent()}</div>
+      )}
+
+      <div
+        className="rs__view_navigator"
+        data-testid="view-navigator"
+        style={{
+          visibility: disableViewNavigator ? "hidden" : "visible",
+        }}
+      >
+        <Button
+          onClick={() => handleSelectedDateChange(getTimeZonedDate(new Date(), timeZone))}
+          aria-label={translations.navigation.today}
+        >
+          {translations.navigation.today}
+        </Button>
+        {enableAgenda &&
+          (isDesktop ? (
+            <Button
+              color={agenda ? "primary" : "inherit"}
+              onClick={toggleAgenda}
+              aria-label={translations.navigation.agenda}
+            >
+              {translations.navigation.agenda}
+            </Button>
+          ) : (
+            <IconButton
+              color={agenda ? "primary" : "default"}
+              style={{ padding: 5 }}
+              onClick={toggleAgenda}
+            >
+              <ViewAgendaIcon />
+            </IconButton>
+          ))}
+
+        {views.length > 1 &&
+          (isDesktop ? (
+            views.map((v) => (
+              <Button
+                key={v}
+                color={v === view ? "primary" : "inherit"}
+                onClick={() => handleChangeView(v)}
+                onDragOver={(e) => {
+                  e.preventDefault();
+                  handleChangeView(v);
+                }}
+              >
+                {translations.navigation[v]}
+              </Button>
+            ))
+          ) : (
+            <Fragment>
+              <IconButton
+                style={{ padding: 5 }}
+                onClick={(e) => {
+                  toggleMoreMenu(e.currentTarget);
+                }}
+              >
+                <MoreVertIcon />
+              </IconButton>
+              <Popover
+                open={Boolean(anchorEl)}
+                anchorEl={anchorEl}
+                onClose={() => {
+                  toggleMoreMenu();
+                }}
+                anchorOrigin={{
+                  vertical: "center",
+                  horizontal: "center",
+                }}
+                transformOrigin={{
+                  vertical: "top",
+                  horizontal: "center",
+                }}
+              >
+                <MenuList autoFocusItem={!!anchorEl} disablePadding>
+                  {views.map((v) => (
+                    <MenuItem
+                      key={v}
+                      selected={v === view}
+                      onClick={() => {
+                        toggleMoreMenu();
+                        handleChangeView(v);
+                      }}
+                    >
+                      {translations.navigation[v]}
+                    </MenuItem>
+                  ))}
+                </MenuList>
+              </Popover>
+            </Fragment>
+          ))}
+      </div>
+    </NavigationDiv>
+  );
+};
+
+export { Navigation };

package/src/lib/components/nav/WeekDateBtn.tsx

@@ -0,0 +1,89 @@
+import { useState } from "react";
+import DateProvider from "../hoc/DateProvider";
+import { Button, Popover } from "@mui/material";
+import { endOfWeek, format, startOfWeek, addDays } from "date-fns";
+import { LocaleArrow } from "../common/LocaleArrow";
+import { DateCalendar } from "@mui/x-date-pickers";
+import useStore from "../../hooks/useStore";
+import useArrowDisable from "../../hooks/useArrowDisable";
+import { WeekProps } from "../../types";
+
+interface WeekDateBtnProps {
+  selectedDate: Date;
+  onChange(value: Date): void;
+  weekProps: WeekProps;
+}
+
+const WeekDateBtn = ({ selectedDate, onChange, weekProps }: WeekDateBtnProps) => {
+  const { locale, navigationPickerProps } = useStore();
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+  const { weekStartOn } = weekProps;
+  const weekStart = startOfWeek(selectedDate, { weekStartsOn: weekStartOn });
+  const weekEnd = endOfWeek(selectedDate, { weekStartsOn: weekStartOn });
+  const { prevDisabled, nextDisabled } = useArrowDisable();
+
+  const handleOpen = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const handleChange = (e: Date | null) => {
+    onChange(e || new Date());
+    handleClose();
+  };
+
+  const handlePrev = () => {
+    const ladtDayPrevWeek = addDays(weekStart, -1);
+    onChange(ladtDayPrevWeek);
+  };
+
+  const handleNext = () => {
+    const firstDayNextWeek = addDays(weekEnd, 1);
+    onChange(firstDayNextWeek);
+  };
+
+  return (
+    <>
+      <LocaleArrow
+        type="prev"
+        onClick={handlePrev}
+        disabled={prevDisabled}
+        aria-label="previous week"
+      />
+      <Button style={{ padding: 4 }} onClick={handleOpen} aria-label="selected week">
+        {`${format(weekStart, "dd", { locale })} - ${format(weekEnd, "dd MMM yyyy", {
+          locale,
+        })}`}
+      </Button>
+      <Popover
+        open={Boolean(anchorEl)}
+        anchorEl={anchorEl}
+        onClose={handleClose}
+        anchorOrigin={{
+          vertical: "bottom",
+          horizontal: "left",
+        }}
+      >
+        <DateProvider>
+          <DateCalendar
+            {...navigationPickerProps}
+            openTo="day"
+            views={["month", "day"]}
+            value={selectedDate}
+            onChange={handleChange}
+          />
+        </DateProvider>
+      </Popover>
+      <LocaleArrow
+        type="next"
+        onClick={handleNext}
+        disabled={nextDisabled}
+        aria-label="next week"
+      />
+    </>
+  );
+};
+
+export { WeekDateBtn };

package/src/lib/components/week/WeekTable.tsx

@@ -0,0 +1,229 @@
+import { Fragment, useMemo } from "react";
+import useStore from "../../hooks/useStore";
+import { TableGrid } from "../../styles/styles";
+import {
+  differenceInDaysOmitTime,
+  filterMultiDaySlot,
+  filterTodayEvents,
+  getHourFormat,
+} from "../../helpers/generals";
+import { MULTI_DAY_EVENT_HEIGHT } from "../../helpers/constants";
+import { DefaultResource, ProcessedEvent } from "../../types";
+import useSyncScroll from "../../hooks/useSyncScroll";
+import {
+  addMinutes,
+  endOfDay,
+  format,
+  isAfter,
+  isBefore,
+  isSameDay,
+  isToday,
+  startOfDay,
+} from "date-fns";
+import TodayTypo from "../common/TodayTypo";
+import usePosition from "../../positionManger/usePosition";
+import EventItem from "../events/EventItem";
+import { Typography } from "@mui/material";
+import TodayEvents from "../events/TodayEvents";
+import Cell from "../common/Cell";
+
+type Props = {
+  daysList: Date[];
+  hours: Date[];
+  cellHeight: number;
+  minutesHeight: number;
+  resource?: DefaultResource;
+  resourcedEvents: ProcessedEvent[];
+};
+
+const WeekTable = ({
+  daysList,
+  hours,
+  cellHeight,
+  minutesHeight,
+  resourcedEvents,
+  resource,
+}: Props) => {
+  const {
+    week,
+    events,
+    handleGotoDay,
+    resources,
+    resourceFields,
+    resourceViewMode,
+    direction,
+    locale,
+    hourFormat,
+    timeZone,
+    stickyNavigation,
+    stickyNavigationOffset,
+    stickyNavigationHeight,
+    currentTime,
+    showCurrentTimeBar,
+    currentTimeBarColor,
+    forceInlineMultiDay,
+  } = useStore();
+  const { startHour, endHour, step, cellRenderer, disableGoToDay, headRenderer, hourRenderer } =
+    week!;
+  const { renderedSlots } = usePosition();
+  const { headersRef, bodyRef } = useSyncScroll();
+  const MULTI_SPACE = MULTI_DAY_EVENT_HEIGHT;
+  const weekStart = startOfDay(daysList[0]);
+  const weekEnd = endOfDay(daysList[daysList.length - 1]);
+  const hFormat = getHourFormat(hourFormat);
+
+  // Equalizing multi-day section height except in resource/tabs mode
+  const headerHeight = useMemo(() => {
+    const shouldEqualize = resources.length && resourceViewMode === "default";
+    const allWeekMulti = filterMultiDaySlot(
+      shouldEqualize ? events : resourcedEvents,
+      daysList,
+      timeZone,
+      true,
+      forceInlineMultiDay
+    );
+    return MULTI_SPACE * allWeekMulti.length + 45;
+  }, [
+    MULTI_SPACE,
+    daysList,
+    events,
+    resourceViewMode,
+    resourcedEvents,
+    resources.length,
+    timeZone,
+  ]);
+
+  const renderMultiDayEvents = (
+    events: ProcessedEvent[],
+    today: Date,
+    resource?: DefaultResource
+  ) => {
+    const isFirstDayInWeek = isSameDay(weekStart, today);
+    const allWeekMulti = filterMultiDaySlot(
+      events,
+      daysList,
+      timeZone,
+      undefined,
+      forceInlineMultiDay
+    );
+
+    const multiDays = allWeekMulti
+      .filter((e) => (isBefore(e.start, weekStart) ? isFirstDayInWeek : isSameDay(e.start, today)))
+      .sort((a, b) => b.end.getTime() - a.end.getTime());
+    return multiDays.map((event) => {
+      const hasPrev = isBefore(startOfDay(event.start), weekStart);
+      const hasNext = isAfter(endOfDay(event.end), weekEnd);
+      const eventLength =
+        differenceInDaysOmitTime(hasPrev ? weekStart : event.start, hasNext ? weekEnd : event.end) +
+        1;
+
+      const day = format(today, "yyyy-MM-dd");
+      const resourceId = resource ? resource[resourceFields.idField] : "all";
+      const rendered = renderedSlots?.[resourceId]?.[day];
+      const position = rendered?.[event.event_id] || 0;
+
+      return (
+        <div
+          key={event.event_id}
+          className="rs__multi_day"
+          style={{
+            top: position * MULTI_SPACE + 45,
+            width: `${99.9 * eventLength}%`,
+            overflowX: "hidden",
+          }}
+        >
+          <EventItem event={event} hasPrev={hasPrev} hasNext={hasNext} multiday />
+        </div>
+      );
+    });
+  };
+
+  return (
+    <>
+      {/* Header days */}
+      <TableGrid
+        days={daysList.length}
+        ref={headersRef}
+        sticky="1"
+        stickyNavigation={stickyNavigation}
+        stickyOffset={stickyNavigationOffset}
+        stickyHeight={stickyNavigationHeight}
+      >
+        <span className="rs__cell rs__time"></span>
+        {daysList.map((date, i) => (
+          <span
+            key={i}
+            className={`rs__cell rs__header ${isToday(date) ? "rs__today_cell" : ""}`}
+            style={{ height: headerHeight }}
+          >
+            {typeof headRenderer === "function" ? (
+              <div>{headRenderer({ day: date, events: resourcedEvents, resource })}</div>
+            ) : (
+              <TodayTypo
+                date={date}
+                onClick={!disableGoToDay ? handleGotoDay : undefined}
+                locale={locale}
+              />
+            )}
+            {renderMultiDayEvents(resourcedEvents, date, resource)}
+          </span>
+        ))}
+      </TableGrid>
+      {/* Time Cells */}
+      <TableGrid days={daysList.length} ref={bodyRef}>
+        {hours.map((h, i) => (
+          <Fragment key={i}>
+            <span style={{ height: cellHeight }} className="rs__cell rs__header rs__time">
+              {typeof hourRenderer === "function" ? (
+                <div>{hourRenderer(format(h, hFormat, { locale }))}</div>
+              ) : (
+                <Typography variant="caption">{format(h, hFormat, { locale })}</Typography>
+              )}
+            </span>
+            {daysList.map((date, ii) => {
+              const start = new Date(`${format(date, "yyyy/MM/dd")} ${format(h, hFormat)}`);
+              const end = addMinutes(start, step);
+              const field = resourceFields.idField;
+              return (
+                <span key={ii} className={`rs__cell ${isToday(date) ? "rs__today_cell" : ""}`}>
+                  {/* Events of each day - run once on the top hour column */}
+                  {i === 0 && (
+                    <TodayEvents
+                      todayEvents={filterTodayEvents(
+                        resourcedEvents,
+                        date,
+                        timeZone,
+                        forceInlineMultiDay
+                      )}
+                      today={date}
+                      minuteHeight={minutesHeight}
+                      startHour={startHour}
+                      endHour={endHour}
+                      step={step}
+                      direction={direction}
+                      timeZone={timeZone}
+                      currentTime={currentTime}
+                      showCurrentTimeBar={showCurrentTimeBar}
+                      currentTimeBarColor={currentTimeBarColor}
+                    />
+                  )}
+                  <Cell
+                    start={start}
+                    end={end}
+                    day={date}
+                    height={cellHeight}
+                    resourceKey={field}
+                    resourceVal={resource ? resource[field] : null}
+                    cellRenderer={cellRenderer}
+                  />
+                </span>
+              );
+            })}
+          </Fragment>
+        ))}
+      </TableGrid>
+    </>
+  );
+};
+
+export default WeekTable;

package/src/lib/helpers/constants.ts

@@ -0,0 +1,4 @@
+export const BORDER_HEIGHT = 1;
+export const MULTI_DAY_EVENT_HEIGHT = 28;
+export const MONTH_NUMBER_HEIGHT = 27;
+export const MONTH_BAR_HEIGHT = 23;