@isma91/react-scheduler 4.0.0 → 4.0.1

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

@@ -1,80 +0,0 @@
-import { useState } from "react";
-import DateProvider from "../hoc/DateProvider";
-import { DateCalendar } from "@mui/x-date-pickers";
-import { Button, Popover } from "@mui/material";
-import { format, getMonth, setMonth } from "date-fns";
-import { LocaleArrow } from "../common/LocaleArrow";
-import useStore from "../../hooks/useStore";
-import useArrowDisable from "../../hooks/useArrowDisable";
-
-interface MonthDateBtnProps {
-  selectedDate: Date;
-  onChange(value: Date): void;
-}
-
-const MonthDateBtn = ({ selectedDate, onChange }: MonthDateBtnProps) => {
-  const { locale, navigationPickerProps } = useStore();
-  const currentMonth = getMonth(selectedDate);
-  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
-  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 prevMonth = currentMonth - 1;
-    onChange(setMonth(selectedDate, prevMonth));
-  };
-  const handleNext = () => {
-    const nextMonth = currentMonth + 1;
-    onChange(setMonth(selectedDate, nextMonth));
-  };
-  return (
-    <>
-      <LocaleArrow
-        type="prev"
-        onClick={handlePrev}
-        disabled={prevDisabled}
-        aria-label="previous month"
-      />
-      <Button style={{ padding: 4 }} onClick={handleOpen} aria-label="selected month">
-        {format(selectedDate, "MMMM yyyy", { locale })}
-      </Button>
-      <Popover
-        open={Boolean(anchorEl)}
-        anchorEl={anchorEl}
-        onClose={handleClose}
-        anchorOrigin={{
-          vertical: "bottom",
-          horizontal: "left",
-        }}
-      >
-        <DateProvider>
-          <DateCalendar
-            {...navigationPickerProps}
-            openTo="month"
-            views={["year", "month"]}
-            value={selectedDate}
-            onChange={handleChange}
-          />
-        </DateProvider>
-      </Popover>
-      <LocaleArrow
-        type="next"
-        onClick={handleNext}
-        disabled={nextDisabled}
-        aria-label="next month"
-      />
-    </>
-  );
-};
-
-export { MonthDateBtn };

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

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

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

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

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