@isma91/react-scheduler 4.0.0

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

@@ -0,0 +1,179 @@
+import { MouseEvent } from "react";
+import { Box, IconButton, Popover, Typography, useTheme } from "@mui/material";
+import useStore from "../../hooks/useStore";
+import { ProcessedEvent } from "../../types";
+import { PopperInner } from "../../styles/styles";
+import EventActions from "./Actions";
+import { differenceInDaysOmitTime, getHourFormat } from "../../helpers/generals";
+import EventNoteRoundedIcon from "@mui/icons-material/EventNoteRounded";
+import ClearRoundedIcon from "@mui/icons-material/ClearRounded";
+import SupervisorAccountRoundedIcon from "@mui/icons-material/SupervisorAccountRounded";
+import { format } from "date-fns";
+
+type Props = {
+  event: ProcessedEvent;
+  anchorEl: Element | null;
+  onTriggerViewer: (el?: MouseEvent<Element>) => void;
+};
+
+const EventItemPopover = ({ anchorEl, event, onTriggerViewer }: Props) => {
+  const {
+    triggerDialog,
+    onDelete,
+    events,
+    handleState,
+    triggerLoading,
+    customViewer,
+    viewerExtraComponent,
+    fields,
+    resources,
+    resourceFields,
+    locale,
+    viewerTitleComponent,
+    viewerSubtitleComponent,
+    hourFormat,
+    translations,
+    onEventEdit,
+  } = useStore();
+  const theme = useTheme();
+  const hFormat = getHourFormat(hourFormat);
+  const displayStart = event._originalStart || event.start;
+  const displayEnd = event._originalEnd || event.end;
+  const hideDates = differenceInDaysOmitTime(displayStart, displayEnd) <= 0 && event.allDay;
+
+  const idKey = resourceFields.idField;
+  const hasResource = resources.filter((res) =>
+    Array.isArray(event[idKey]) ? event[idKey].includes(res[idKey]) : res[idKey] === event[idKey]
+  );
+
+  const handleDelete = async () => {
+    try {
+      triggerLoading(true);
+      let deletedId = event.event_id;
+      // Trigger custom/remote when provided
+      if (onDelete) {
+        const remoteId = await onDelete(deletedId);
+        if (remoteId) {
+          deletedId = remoteId;
+        } else {
+          deletedId = "";
+        }
+      }
+      if (deletedId) {
+        onTriggerViewer();
+        const updatedEvents = events.filter((e) => e.event_id !== deletedId);
+        handleState(updatedEvents, "events");
+      }
+    } catch (error) {
+      console.error(error);
+    } finally {
+      triggerLoading(false);
+    }
+  };
+
+  return (
+    <Popover
+      open={Boolean(anchorEl)}
+      anchorEl={anchorEl}
+      onClose={() => {
+        onTriggerViewer();
+      }}
+      anchorOrigin={{
+        vertical: "center",
+        horizontal: "center",
+      }}
+      transformOrigin={{
+        vertical: "top",
+        horizontal: "center",
+      }}
+      onClick={(e) => {
+        e.stopPropagation();
+      }}
+    >
+      {typeof customViewer === "function" ? (
+        customViewer(event, () => onTriggerViewer())
+      ) : (
+        <PopperInner>
+          <Box
+            sx={{
+              bgcolor: event.color || theme.palette.primary.main,
+              color: theme.palette.primary.contrastText,
+            }}
+          >
+            <div className="rs__popper_actions">
+              <div>
+                <IconButton
+                  size="small"
+                  onClick={() => {
+                    onTriggerViewer();
+                  }}
+                >
+                  <ClearRoundedIcon color="disabled" />
+                </IconButton>
+              </div>
+              <EventActions
+                event={event}
+                onDelete={handleDelete}
+                onEdit={() => {
+                  onTriggerViewer();
+                  triggerDialog(true, event);
+
+                  if (onEventEdit && typeof onEventEdit === "function") {
+                    onEventEdit(event);
+                  }
+                }}
+              />
+            </div>
+            {viewerTitleComponent instanceof Function ? (
+              viewerTitleComponent(event)
+            ) : (
+              <Typography style={{ padding: "5px 0" }} noWrap>
+                {event.title}
+              </Typography>
+            )}
+          </Box>
+          <div style={{ padding: "5px 10px" }}>
+            <Typography
+              style={{ display: "flex", alignItems: "center", gap: 8 }}
+              color="textSecondary"
+              variant="caption"
+              noWrap
+            >
+              <EventNoteRoundedIcon />
+              {hideDates
+                ? translations.event.allDay
+                : `${format(displayStart, `dd MMMM yyyy ${hFormat}`, {
+                    locale: locale,
+                  })} - ${format(displayEnd, `dd MMMM yyyy ${hFormat}`, {
+                    locale: locale,
+                  })}`}
+            </Typography>
+            {viewerSubtitleComponent instanceof Function ? (
+              viewerSubtitleComponent(event)
+            ) : (
+              <Typography variant="body2" style={{ padding: "5px 0" }}>
+                {event.subtitle}
+              </Typography>
+            )}
+            {hasResource.length > 0 && (
+              <Typography
+                style={{ display: "flex", alignItems: "center", gap: 8 }}
+                color="textSecondary"
+                variant="caption"
+                noWrap
+              >
+                <SupervisorAccountRoundedIcon />
+                {hasResource.map((res) => res[resourceFields.textField]).join(", ")}
+              </Typography>
+            )}
+            {viewerExtraComponent instanceof Function
+              ? viewerExtraComponent(fields, event)
+              : viewerExtraComponent}
+          </div>
+        </PopperInner>
+      )}
+    </Popover>
+  );
+};
+
+export default EventItemPopover;

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

@@ -0,0 +1,141 @@
+import { Fragment, useMemo } from "react";
+import {
+  closestTo,
+  isBefore,
+  startOfWeek,
+  differenceInDays,
+  differenceInCalendarWeeks,
+  format,
+} from "date-fns";
+import { ProcessedEvent } from "../../types";
+import { Typography } from "@mui/material";
+import EventItem from "./EventItem";
+import {
+  MONTH_BAR_HEIGHT,
+  MONTH_NUMBER_HEIGHT,
+  MULTI_DAY_EVENT_HEIGHT,
+} from "../../helpers/constants";
+import { convertEventTimeZone, differenceInDaysOmitTime } from "../../helpers/generals";
+import useStore from "../../hooks/useStore";
+import usePosition from "../../positionManger/usePosition";
+
+interface MonthEventProps {
+  events: ProcessedEvent[];
+  resourceId?: string;
+  today: Date;
+  eachWeekStart: Date[];
+  eachFirstDayInCalcRow: Date | null;
+  daysList: Date[];
+  onViewMore(day: Date): void;
+  cellHeight: number;
+}
+
+const MonthEvents = ({
+  events,
+  resourceId,
+  today,
+  eachWeekStart,
+  eachFirstDayInCalcRow,
+  daysList,
+  onViewMore,
+  cellHeight,
+}: MonthEventProps) => {
+  const LIMIT = Math.round((cellHeight - MONTH_NUMBER_HEIGHT) / MULTI_DAY_EVENT_HEIGHT - 1);
+  const { translations, month, locale, timeZone } = useStore();
+  const { renderedSlots } = usePosition();
+
+  const renderEvents = useMemo(() => {
+    const elements: React.ReactNode[] = [];
+
+    for (let i = 0; i < Math.min(events.length, LIMIT + 1); i++) {
+      const event = convertEventTimeZone(events[i], timeZone);
+      const fromPrevWeek = !!eachFirstDayInCalcRow && isBefore(event.start, eachFirstDayInCalcRow);
+      const start = fromPrevWeek && eachFirstDayInCalcRow ? eachFirstDayInCalcRow : event.start;
+      let eventLength = differenceInDaysOmitTime(start, event.end) + 1;
+
+      const toNextWeek =
+        differenceInCalendarWeeks(event.end, start, {
+          weekStartsOn: month?.weekStartOn,
+          locale,
+        }) > 0;
+
+      if (toNextWeek) {
+        // Rethink it
+        const NotAccurateWeekStart = startOfWeek(event.start, {
+          weekStartsOn: month?.weekStartOn,
+          locale,
+        });
+        const closestStart = closestTo(NotAccurateWeekStart, eachWeekStart);
+        if (closestStart) {
+          eventLength =
+            daysList.length -
+            (!eachFirstDayInCalcRow ? differenceInDays(event.start, closestStart) : 0);
+        }
+      }
+
+      const day = format(today, "yyyy-MM-dd");
+      const rendered = renderedSlots?.[resourceId || "all"]?.[day];
+      const position = rendered?.[event.event_id] || 0;
+
+      const topSpace = Math.min(position, LIMIT) * MULTI_DAY_EVENT_HEIGHT + MONTH_NUMBER_HEIGHT;
+
+      if (position >= LIMIT) {
+        elements.push(
+          <Typography
+            key={i}
+            width="100%"
+            className="rs__multi_day rs__hover__op"
+            style={{ top: topSpace, fontSize: 11 }}
+            onClick={(e) => {
+              e.stopPropagation();
+              onViewMore(today);
+            }}
+          >
+            {`${Math.abs(events.length - i)} ${translations.moreEvents}`}
+          </Typography>
+        );
+        break;
+      }
+
+      elements.push(
+        <div
+          key={`${event.event_id}_${i}`}
+          className="rs__multi_day"
+          style={{
+            top: topSpace,
+            width: `${100 * eventLength}%`,
+            height: MONTH_BAR_HEIGHT,
+          }}
+        >
+          <EventItem
+            event={event}
+            showdate={false}
+            multiday={differenceInDaysOmitTime(event.start, event.end) > 0}
+            hasPrev={fromPrevWeek}
+            hasNext={toNextWeek}
+          />
+        </div>
+      );
+    }
+
+    return elements;
+  }, [
+    resourceId,
+    renderedSlots,
+    events,
+    LIMIT,
+    eachFirstDayInCalcRow,
+    month?.weekStartOn,
+    locale,
+    today,
+    eachWeekStart,
+    daysList.length,
+    translations.moreEvents,
+    onViewMore,
+    timeZone,
+  ]);
+
+  return <Fragment>{renderEvents}</Fragment>;
+};
+
+export default MonthEvents;

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

@@ -0,0 +1,99 @@
+import { differenceInMinutes } from "date-fns";
+import { Fragment } from "react";
+import { BORDER_HEIGHT } from "../../helpers/constants";
+import { isTimeZonedToday, traversCrossingEvents } from "../../helpers/generals";
+import { ProcessedEvent } from "../../types";
+import CurrentTimeBar from "./CurrentTimeBar";
+import EventItem from "./EventItem";
+
+interface TodayEventsProps {
+  todayEvents: ProcessedEvent[];
+  today: Date;
+  startHour: number;
+  endHour: number;
+  step: number;
+  minuteHeight: number;
+  direction: "rtl" | "ltr";
+  timeZone?: string;
+  currentTime?: Date;
+  showCurrentTimeBar?: boolean;
+  currentTimeBarColor?: string;
+}
+const TodayEvents = ({
+  todayEvents,
+  today,
+  startHour,
+  endHour,
+  step,
+  minuteHeight,
+  direction,
+  timeZone,
+  currentTime,
+  showCurrentTimeBar = true,
+  currentTimeBarColor,
+}: TodayEventsProps) => {
+  const crossingIds: Array<number | string> = [];
+
+  return (
+    <Fragment>
+      {showCurrentTimeBar && isTimeZonedToday({ dateLeft: today, timeZone }) && (
+        <CurrentTimeBar
+          startHour={startHour}
+          step={step}
+          minuteHeight={minuteHeight}
+          timeZone={timeZone}
+          zIndex={2 * todayEvents.length + 1}
+          currentTime={currentTime}
+          color={currentTimeBarColor}
+        />
+      )}
+
+      {todayEvents.map((event, i) => {
+        const maxHeight = (endHour * 60 - startHour * 60) * minuteHeight;
+        const eventHeight = differenceInMinutes(event.end, event.start) * minuteHeight;
+        const height = Math.min(eventHeight, maxHeight) - BORDER_HEIGHT;
+
+        const calendarStartInMins = startHour * 60;
+        const eventStartInMins = event.start.getHours() * 60 + event.start.getMinutes();
+        const minituesFromTop = Math.max(eventStartInMins - calendarStartInMins, 0);
+
+        const topSpace = minituesFromTop * minuteHeight;
+        /** Add border factor to height of each slot */
+        const slots = height / 60;
+        const heightBorderFactor = slots * BORDER_HEIGHT;
+
+        /** Calculate top space */
+        const slotsFromTop = minituesFromTop / step;
+        const top = topSpace + slotsFromTop;
+
+        const crossingEvents = traversCrossingEvents(todayEvents, event);
+        const alreadyRendered = crossingEvents.filter((e) => crossingIds.includes(e.event_id));
+        crossingIds.push(event.event_id);
+
+        return (
+          <div
+            key={`${event.event_id}/${event.recurrenceId || ""}`}
+            className="rs__event__item"
+            style={{
+              height: height + heightBorderFactor,
+              top,
+              width:
+                alreadyRendered.length > 0
+                  ? `calc(100% - ${100 - 98 / (alreadyRendered.length + 1)}%)`
+                  : "98%", // Leave some space to click cell
+              zIndex: todayEvents.length + i,
+              [direction === "rtl" ? "right" : "left"]:
+                alreadyRendered.length > 0
+                  ? `${(100 / (crossingEvents.length + 1)) * alreadyRendered.length}%`
+                  : "",
+            }}
+          >
+            <EventItem event={event} />
+          </div>
+        );
+      })}
+    </Fragment>
+  );
+};
+
+export default TodayEvents;

package/src/lib/components/hoc/DateProvider.tsx

@@ -0,0 +1,19 @@
+import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+import useStore from "../../hooks/useStore";
+import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
+
+interface AuxProps {
+  children: React.ReactNode;
+}
+
+const DateProvider = ({ children }: AuxProps) => {
+  const { locale } = useStore();
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDateFns} adapterLocale={locale}>
+      {children}
+    </LocalizationProvider>
+  );
+};
+
+export default DateProvider;

package/src/lib/components/inputs/DatePicker.tsx

@@ -0,0 +1,95 @@
+import { useCallback, useEffect, useState } from "react";
+import DateProvider from "../hoc/DateProvider";
+import { DatePicker } from "@mui/x-date-pickers/DatePicker";
+import { DateTimePicker } from "@mui/x-date-pickers/DateTimePicker";
+import useStore from "../../hooks/useStore";
+
+interface EditorDatePickerProps {
+  type?: "date" | "datetime";
+  label?: string;
+  variant?: "standard" | "filled" | "outlined";
+  value: Date | string;
+  name: string;
+  onChange(name: string, date: Date): void;
+  error?: boolean;
+  errMsg?: string;
+  touched?: boolean;
+  required?: boolean;
+}
+
+const EditorDatePicker = ({
+  type = "datetime",
+  value,
+  label,
+  name,
+  onChange,
+  variant = "outlined",
+  error,
+  errMsg,
+  touched,
+  required,
+}: EditorDatePickerProps) => {
+  const { translations } = useStore();
+  const [state, setState] = useState({
+    touched: false,
+    valid: !!value,
+    errorMsg: errMsg
+      ? errMsg
+      : required
+        ? translations?.validation?.required || "Required"
+        : undefined,
+  });
+
+  const Picker = type === "date" ? DatePicker : DateTimePicker;
+
+  const hasError = state.touched && (error || !state.valid);
+
+  const handleChange = useCallback(
+    (value: string | Date) => {
+      const isValidDate = !isNaN(Date.parse(value as string));
+      const val = typeof value === "string" && isValidDate ? new Date(value) : value;
+      let isValid = true;
+      let errorMsg = errMsg;
+      if (required && !val) {
+        isValid = false;
+        errorMsg = errMsg || translations?.validation?.required || "Required";
+      }
+
+      setState((prev) => {
+        return { ...prev, touched: true, valid: isValid, errorMsg: errorMsg };
+      });
+
+      onChange(name, val as Date);
+    },
+    [errMsg, name, onChange, required, translations?.validation?.required]
+  );
+
+  useEffect(() => {
+    if (touched) {
+      handleChange(value);
+    }
+  }, [handleChange, touched, value]);
+
+  return (
+    <DateProvider>
+      <Picker
+        value={value instanceof Date ? value : new Date(value)}
+        label={label}
+        onChange={(e) => {
+          handleChange(e as Date);
+        }}
+        minutesStep={5}
+        slotProps={{
+          textField: {
+            variant,
+            helperText: hasError && state.errorMsg,
+            error: hasError,
+            fullWidth: true,
+          },
+        }}
+      />
+    </DateProvider>
+  );
+};
+
+export { EditorDatePicker };

package/src/lib/components/inputs/Input.tsx

@@ -0,0 +1,113 @@
+import { useState, useEffect, useCallback } from "react";
+import { TextField, Typography } from "@mui/material";
+import useStore from "../../hooks/useStore";
+
+interface EditorInputProps {
+  variant?: "standard" | "filled" | "outlined";
+  label?: string;
+  placeholder?: string;
+  required?: boolean;
+  min?: number;
+  max?: number;
+  email?: boolean;
+  decimal?: boolean;
+  disabled?: boolean;
+  multiline?: boolean;
+  rows?: number;
+  value: string;
+  name: string;
+  onChange(name: string, value: string, isValid: boolean): void;
+  touched?: boolean;
+}
+
+const EditorInput = ({
+  variant = "outlined",
+  label,
+  placeholder,
+  value,
+  name,
+  required,
+  min,
+  max,
+  email,
+  decimal,
+  onChange,
+  disabled,
+  multiline,
+  rows,
+  touched,
+}: EditorInputProps) => {
+  const [state, setState] = useState({
+    touched: false,
+    valid: false,
+    errorMsg: "",
+  });
+  const { translations } = useStore();
+
+  const handleChange = useCallback(
+    (value: string) => {
+      const val = value;
+      let isValid = true;
+      let errorMsg = "";
+      if (email) {
+        const reg =
+          /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+        isValid = reg.test(val) && isValid;
+        errorMsg = translations?.validation?.invalidEmail || "Invalid Email";
+      }
+      if (decimal) {
+        const reg = /^[0-9]+(\.[0-9]*)?$/;
+        isValid = reg.test(val) && isValid;
+        errorMsg = translations?.validation?.onlyNumbers || "Only Numbers Allowed";
+      }
+      if (min && `${val}`.trim().length < min) {
+        isValid = false;
+        errorMsg =
+          typeof translations?.validation?.min === "function"
+            ? translations?.validation?.min(min)
+            : translations?.validation?.min || `Minimum ${min} letters`;
+      }
+      if (max && `${val}`.trim().length > max) {
+        isValid = false;
+        errorMsg =
+          typeof translations?.validation?.max === "function"
+            ? translations?.validation?.max(max)
+            : translations?.validation?.max || `Maximum ${max} letters`;
+      }
+      if (required && `${val}`.trim().length <= 0) {
+        isValid = false;
+        errorMsg = translations?.validation?.required || "Required";
+      }
+      setState({ touched: true, valid: isValid, errorMsg: errorMsg });
+      onChange(name, val, isValid);
+    },
+    [decimal, email, max, min, name, onChange, required, translations?.validation]
+  );
+
+  useEffect(() => {
+    if (touched) {
+      handleChange(value);
+    }
+  }, [handleChange, touched, value]);
+
+  return (
+    <TextField
+      variant={variant}
+      label={label && <Typography variant="body2">{`${label} ${required ? "*" : ""}`}</Typography>}
+      value={value}
+      name={name}
+      onChange={(e) => handleChange(e.target.value)}
+      disabled={disabled}
+      error={state.touched && !state.valid}
+      helperText={state.touched && !state.valid && state.errorMsg}
+      multiline={multiline}
+      rows={rows}
+      style={{ width: "100%" }}
+      InputProps={{
+        placeholder: placeholder || "",
+      }}
+    />
+  );
+};
+
+export { EditorInput };