@isma91/react-scheduler 4.0.0 → 4.0.2

package/src/lib/views/Day.tsx

@@ -1,265 +0,0 @@
-import { useEffect, useCallback, Fragment } from "react";
-import { Typography } from "@mui/material";
-import {
-  format,
-  eachMinuteOfInterval,
-  isToday,
-  isBefore,
-  isAfter,
-  startOfDay,
-  endOfDay,
-  addDays,
-  addMinutes,
-  set,
-} from "date-fns";
-import TodayTypo from "../components/common/TodayTypo";
-import EventItem from "../components/events/EventItem";
-import { DefaultResource, ProcessedEvent } from "../types";
-import {
-  calcCellHeight,
-  calcMinuteHeight,
-  filterMultiDaySlot,
-  filterTodayEvents,
-  getHourFormat,
-  getResourcedEvents,
-} from "../helpers/generals";
-import { WithResources } from "../components/common/WithResources";
-import Cell from "../components/common/Cell";
-import TodayEvents from "../components/events/TodayEvents";
-import { TableGrid } from "../styles/styles";
-import { MULTI_DAY_EVENT_HEIGHT } from "../helpers/constants";
-import useStore from "../hooks/useStore";
-import { DayAgenda } from "./DayAgenda";
-
-const Day = () => {
-  const {
-    day,
-    selectedDate,
-    events,
-    height,
-    getRemoteEvents,
-    triggerLoading,
-    handleState,
-    resources,
-    resourceFields,
-    resourceViewMode,
-    fields,
-    direction,
-    locale,
-    hourFormat,
-    timeZone,
-    stickyNavigation,
-    agenda,
-    stickyNavigationOffset,
-    stickyNavigationHeight,
-    currentTime,
-    showCurrentTimeBar,
-    currentTimeBarColor,
-    forceInlineMultiDay,
-  } = useStore();
-
-  const { startHour, endHour, step, cellRenderer, headRenderer, hourRenderer } = day!;
-  const START_TIME = set(selectedDate, { hours: startHour, minutes: 0, seconds: 0 });
-  const END_TIME = set(selectedDate, { hours: endHour, minutes: -step, seconds: 0 });
-  const hours = eachMinuteOfInterval(
-    {
-      start: START_TIME,
-      end: END_TIME,
-    },
-    { step: step }
-  );
-  const CELL_HEIGHT = calcCellHeight(height, hours.length);
-  const MINUTE_HEIGHT = calcMinuteHeight(CELL_HEIGHT, step);
-  const hFormat = getHourFormat(hourFormat);
-
-  const fetchEvents = useCallback(async () => {
-    try {
-      triggerLoading(true);
-      const start = addDays(START_TIME, -1);
-      const end = addDays(END_TIME, 1);
-      const events = await getRemoteEvents!({
-        start,
-        end,
-        view: "day",
-      });
-      if (events && events?.length) {
-        handleState(events, "events");
-      }
-    } catch (error) {
-      throw error;
-    } finally {
-      triggerLoading(false);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [getRemoteEvents]);
-
-  useEffect(() => {
-    if (getRemoteEvents instanceof Function) {
-      fetchEvents();
-    }
-  }, [fetchEvents, getRemoteEvents]);
-
-  const renderMultiDayEvents = useCallback(
-    (events: ProcessedEvent[]) => {
-      const todayMulti = filterMultiDaySlot(events, selectedDate, timeZone, forceInlineMultiDay);
-      return (
-        <div
-          className="rs__block_col"
-          style={{ height: MULTI_DAY_EVENT_HEIGHT * todayMulti.length }}
-        >
-          {todayMulti.map((event, i) => {
-            const hasPrev = isBefore(event.start, startOfDay(selectedDate));
-            const hasNext = isAfter(event.end, endOfDay(selectedDate));
-            return (
-              <div
-                key={event.event_id}
-                className="rs__multi_day"
-                style={{
-                  top: i * MULTI_DAY_EVENT_HEIGHT,
-                  width: "99.9%",
-                  overflowX: "hidden",
-                }}
-              >
-                <EventItem event={event} multiday hasPrev={hasPrev} hasNext={hasNext} />
-              </div>
-            );
-          })}
-        </div>
-      );
-    },
-    [selectedDate, timeZone]
-  );
-
-  const renderTable = useCallback(
-    (resource?: DefaultResource) => {
-      let resourcedEvents = events;
-      if (resource) {
-        resourcedEvents = getResourcedEvents(events, resource, resourceFields, fields);
-      }
-
-      if (agenda) {
-        return <DayAgenda resource={resource} events={resourcedEvents} />;
-      }
-
-      // Equalizing multi-day section height
-      const shouldEqualize = resources.length && resourceViewMode === "default";
-      const allWeekMulti = filterMultiDaySlot(
-        shouldEqualize ? events : resourcedEvents,
-        selectedDate,
-        timeZone,
-        forceInlineMultiDay
-      );
-      const headerHeight = MULTI_DAY_EVENT_HEIGHT * allWeekMulti.length + 45;
-      return (
-        <>
-          {/* Header */}
-          <TableGrid
-            days={1}
-            sticky="1"
-            stickyNavigation={stickyNavigation}
-            stickyOffset={stickyNavigationOffset}
-            stickyHeight={stickyNavigationHeight}
-          >
-            <span className="rs__cell"></span>
-            <span
-              className={`rs__cell rs__header ${isToday(selectedDate) ? "rs__today_cell" : ""}`}
-              style={{ height: headerHeight }}
-            >
-              {typeof headRenderer === "function" ? (
-                <div>{headRenderer({ day: selectedDate, events: resourcedEvents, resource })}</div>
-              ) : (
-                <TodayTypo date={selectedDate} locale={locale} />
-              )}
-              {renderMultiDayEvents(resourcedEvents)}
-            </span>
-          </TableGrid>
-          <TableGrid days={1}>
-            {/* Body */}
-            {hours.map((h, i) => {
-              const start = new Date(`${format(selectedDate, "yyyy/MM/dd")} ${format(h, hFormat)}`);
-              const end = addMinutes(start, step);
-              const field = resourceFields.idField;
-              return (
-                <Fragment key={i}>
-                  {/* Time Cells */}
-                  <span className="rs__cell rs__header rs__time" style={{ height: CELL_HEIGHT }}>
-                    {typeof hourRenderer === "function" ? (
-                      <div>{hourRenderer(format(h, hFormat, { locale }))}</div>
-                    ) : (
-                      <Typography variant="caption">{format(h, hFormat, { locale })}</Typography>
-                    )}
-                  </span>
-                  <span className={`rs__cell ${isToday(selectedDate) ? "rs__today_cell" : ""}`}>
-                    {/* Events of this day - run once on the top hour column */}
-                    {i === 0 && (
-                      <TodayEvents
-                        todayEvents={filterTodayEvents(
-                          resourcedEvents,
-                          selectedDate,
-                          timeZone,
-                          forceInlineMultiDay
-                        )}
-                        today={START_TIME}
-                        minuteHeight={MINUTE_HEIGHT}
-                        startHour={startHour}
-                        endHour={endHour}
-                        step={step}
-                        direction={direction}
-                        timeZone={timeZone}
-                        currentTime={currentTime}
-                        showCurrentTimeBar={showCurrentTimeBar}
-                        currentTimeBarColor={currentTimeBarColor}
-                      />
-                    )}
-                    {/* Cell */}
-                    <Cell
-                      start={start}
-                      end={end}
-                      day={selectedDate}
-                      height={CELL_HEIGHT}
-                      resourceKey={field}
-                      resourceVal={resource ? resource[field] : null}
-                      cellRenderer={cellRenderer}
-                    />
-                  </span>
-                </Fragment>
-              );
-            })}
-          </TableGrid>
-        </>
-      );
-    },
-    [
-      CELL_HEIGHT,
-      MINUTE_HEIGHT,
-      START_TIME,
-      agenda,
-      cellRenderer,
-      direction,
-      endHour,
-      events,
-      fields,
-      hFormat,
-      headRenderer,
-      hourRenderer,
-      hours,
-      locale,
-      renderMultiDayEvents,
-      resourceFields,
-      resourceViewMode,
-      resources.length,
-      selectedDate,
-      startHour,
-      step,
-      stickyNavigation,
-      timeZone,
-      currentTime,
-      showCurrentTimeBar,
-      currentTimeBarColor,
-    ]
-  );
-
-  return resources.length ? <WithResources renderChildren={renderTable} /> : renderTable();
-};
-
-export { Day };

package/src/lib/views/DayAgenda.tsx

@@ -1,57 +0,0 @@
-import { useMemo } from "react";
-import { format } from "date-fns";
-import { AgendaDiv } from "../styles/styles";
-import { DefaultResource, ProcessedEvent } from "../types";
-import useStore from "../hooks/useStore";
-import { Typography } from "@mui/material";
-import { filterTodayAgendaEvents } from "../helpers/generals";
-import AgendaEventsList from "../components/events/AgendaEventsList";
-import EmptyAgenda from "../components/events/EmptyAgenda";
-
-type Props = {
-  events: ProcessedEvent[];
-  resource?: DefaultResource;
-};
-const DayAgenda = ({ events, resource }: Props) => {
-  const {
-    day,
-    locale,
-    selectedDate,
-    translations,
-    alwaysShowAgendaDays,
-    stickyNavigationOffset,
-    stickyNavigationHeight,
-  } = useStore();
-  const { headRenderer } = day!;
-
-  const dayEvents = useMemo(() => {
-    return filterTodayAgendaEvents(events, selectedDate);
-  }, [events, selectedDate]);
-
-  if (!alwaysShowAgendaDays && !dayEvents.length) {
-    return <EmptyAgenda />;
-  }
-
-  return (
-    <AgendaDiv stickyOffset={stickyNavigationOffset} stickyHeight={stickyNavigationHeight}>
-      <div className="rs__agenda_row rs__today_cell">
-        <div className="rs__cell rs__agenda__cell">
-          {typeof headRenderer === "function" ? (
-            <div>{headRenderer({ day: selectedDate, events, resource })}</div>
-          ) : (
-            <Typography variant="body2">{format(selectedDate, "dd E", { locale })}</Typography>
-          )}
-        </div>
-        <div className="rs__cell rs__agenda_items">
-          {dayEvents.length > 0 ? (
-            <AgendaEventsList day={selectedDate} events={dayEvents} />
-          ) : (
-            <Typography sx={{ padding: 1 }}>{translations.noDataToDisplay}</Typography>
-          )}
-        </div>
-      </div>
-    </AgendaDiv>
-  );
-};
-
-export { DayAgenda };

package/src/lib/views/Editor.tsx

@@ -1,258 +0,0 @@
-import {
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  Grid,
-  useMediaQuery,
-  useTheme,
-} from "@mui/material";
-import { addMinutes, differenceInMinutes } from "date-fns";
-import { Fragment, useState } from "react";
-import { EditorDatePicker } from "../components/inputs/DatePicker";
-import { EditorInput } from "../components/inputs/Input";
-import { EditorSelect } from "../components/inputs/SelectInput";
-import { arraytizeFieldVal, revertTimeZonedDate } from "../helpers/generals";
-import useStore from "../hooks/useStore";
-import { SelectedRange } from "../store/types";
-import {
-  EventActions,
-  FieldInputProps,
-  FieldProps,
-  InputTypes,
-  ProcessedEvent,
-  SchedulerHelpers,
-} from "../types";
-
-export type StateItem = {
-  value: any;
-  validity: boolean;
-  type: InputTypes;
-  config?: FieldInputProps;
-};
-
-export type StateEvent = (ProcessedEvent & SelectedRange) | Record<string, any>;
-
-const initialState = (fields: FieldProps[], event?: StateEvent): Record<string, StateItem> => {
-  const customFields = {} as Record<string, StateItem>;
-  for (const field of fields) {
-    const defVal = arraytizeFieldVal(field, field.default, event);
-    const eveVal = arraytizeFieldVal(field, event?.[field.name], event);
-
-    customFields[field.name] = {
-      value: eveVal.value || defVal.value || "",
-      validity: field.config?.required ? !!eveVal.validity || !!defVal.validity : true,
-      type: field.type,
-      config: field.config,
-    };
-  }
-
-  return {
-    event_id: {
-      value: event?.event_id || null,
-      validity: true,
-      type: "hidden",
-    },
-    title: {
-      value: event?.title || "",
-      validity: !!event?.title,
-      type: "input",
-      config: { label: "Title", required: true, min: 3 },
-    },
-    subtitle: {
-      value: event?.subtitle || "",
-      validity: true,
-      type: "input",
-      config: { label: "Subtitle", required: false },
-    },
-    start: {
-      value: event?._originalStart || event?.start || new Date(),
-      validity: true,
-      type: "date",
-      config: { label: "Start", sm: 6 },
-    },
-    end: {
-      value: event?._originalEnd || event?.end || new Date(),
-      validity: true,
-      type: "date",
-      config: { label: "End", sm: 6 },
-    },
-    ...customFields,
-  };
-};
-
-const Editor = () => {
-  const {
-    fields,
-    dialog,
-    triggerDialog,
-    selectedRange,
-    selectedEvent,
-    resourceFields,
-    selectedResource,
-    triggerLoading,
-    onConfirm,
-    customEditor,
-    confirmEvent,
-    dialogMaxWidth,
-    translations,
-    timeZone,
-  } = useStore();
-  const [state, setState] = useState(initialState(fields, selectedEvent || selectedRange));
-  const [touched, setTouched] = useState(false);
-  const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
-
-  const handleEditorState = (name: string, value: any, validity: boolean) => {
-    setState((prev) => {
-      return {
-        ...prev,
-        [name]: { ...prev[name], value, validity },
-      };
-    });
-  };
-
-  const handleClose = (clearState?: boolean) => {
-    if (clearState) {
-      setState(initialState(fields));
-    }
-    triggerDialog(false);
-  };
-
-  const handleConfirm = async () => {
-    let body = {} as ProcessedEvent;
-    for (const key in state) {
-      body[key] = state[key].value;
-      if (!customEditor && !state[key].validity) {
-        return setTouched(true);
-      }
-    }
-    try {
-      triggerLoading(true);
-      // Auto fix date
-      body.end =
-        body.start >= body.end
-          ? addMinutes(body.start, differenceInMinutes(selectedRange?.end!, selectedRange?.start!))
-          : body.end;
-      // Specify action
-      const action: EventActions = selectedEvent?.event_id ? "edit" : "create";
-      // Trigger custom/remote when provided
-      if (onConfirm) {
-        body = await onConfirm(body, action);
-      } else {
-        // Create/Edit local data
-        body.event_id =
-          selectedEvent?.event_id || Date.now().toString(36) + Math.random().toString(36).slice(2);
-      }
-
-      body.start = revertTimeZonedDate(body.start, timeZone);
-      body.end = revertTimeZonedDate(body.end, timeZone);
-
-      confirmEvent(body, action);
-      handleClose(true);
-    } catch (error) {
-      console.error(error);
-    } finally {
-      triggerLoading(false);
-    }
-  };
-  const renderInputs = (key: string) => {
-    const stateItem = state[key];
-    switch (stateItem.type) {
-      case "input":
-        return (
-          <EditorInput
-            value={stateItem.value}
-            name={key}
-            onChange={handleEditorState}
-            touched={touched}
-            {...stateItem.config}
-            label={translations.event[key] || stateItem.config?.label}
-          />
-        );
-      case "date":
-        return (
-          <EditorDatePicker
-            value={stateItem.value}
-            name={key}
-            onChange={(...args) => handleEditorState(...args, true)}
-            touched={touched}
-            {...stateItem.config}
-            label={translations.event[key] || stateItem.config?.label}
-          />
-        );
-      case "select":
-        const field = fields.find((f) => f.name === key);
-        return (
-          <EditorSelect
-            value={stateItem.value}
-            name={key}
-            options={field?.options || []}
-            onChange={handleEditorState}
-            touched={touched}
-            {...stateItem.config}
-            label={translations.event[key] || stateItem.config?.label}
-          />
-        );
-      default:
-        return "";
-    }
-  };
-
-  const renderEditor = () => {
-    if (customEditor) {
-      const schedulerHelpers: SchedulerHelpers = {
-        state,
-        close: () => triggerDialog(false),
-        loading: (load) => triggerLoading(load),
-        edited: selectedEvent,
-        onConfirm: confirmEvent,
-        [resourceFields.idField]: selectedResource,
-      };
-      return customEditor(schedulerHelpers);
-    }
-    return (
-      <Fragment>
-        <DialogTitle>
-          {selectedEvent ? translations.form.editTitle : translations.form.addTitle}
-        </DialogTitle>
-        <DialogContent style={{ overflowX: "hidden" }}>
-          <Grid container spacing={2}>
-            {Object.keys(state).map((key) => {
-              const item = state[key];
-              return (
-                <Grid key={key} size={{ sm: item.config?.sm, xs: 12 }}>
-                  {renderInputs(key)}
-                </Grid>
-              );
-            })}
-          </Grid>
-        </DialogContent>
-        <DialogActions>
-          <Button color="inherit" fullWidth onClick={() => handleClose()}>
-            {translations.form.cancel}
-          </Button>
-          <Button color="primary" fullWidth onClick={handleConfirm}>
-            {translations.form.confirm}
-          </Button>
-        </DialogActions>
-      </Fragment>
-    );
-  };
-
-  return (
-    <Dialog
-      open={dialog}
-      fullScreen={isMobile}
-      maxWidth={dialogMaxWidth}
-      onClose={() => {
-        triggerDialog(false);
-      }}
-    >
-      {renderEditor()}
-    </Dialog>
-  );
-};
-
-export default Editor;

package/src/lib/views/Month.tsx

@@ -1,82 +0,0 @@
-import { useEffect, useCallback } from "react";
-import { addDays, eachWeekOfInterval, endOfMonth, startOfMonth } from "date-fns";
-import { DefaultResource } from "../types";
-import { getResourcedEvents, sortEventsByTheEarliest } from "../helpers/generals";
-import { WithResources } from "../components/common/WithResources";
-import useStore from "../hooks/useStore";
-import { MonthAgenda } from "./MonthAgenda";
-import MonthTable from "../components/month/MonthTable";
-
-const Month = () => {
-  const {
-    month,
-    selectedDate,
-    events,
-    getRemoteEvents,
-    triggerLoading,
-    handleState,
-    resources,
-    resourceFields,
-    fields,
-    agenda,
-  } = useStore();
-
-  const { weekStartOn, weekDays } = month!;
-  const monthStart = startOfMonth(selectedDate);
-  const monthEnd = endOfMonth(selectedDate);
-  const eachWeekStart = eachWeekOfInterval(
-    {
-      start: monthStart,
-      end: monthEnd,
-    },
-    { weekStartsOn: weekStartOn }
-  );
-  const daysList = weekDays.map((d) => addDays(eachWeekStart[0], d));
-
-  const fetchEvents = useCallback(async () => {
-    try {
-      triggerLoading(true);
-      const start = eachWeekStart[0];
-      const end = addDays(eachWeekStart[eachWeekStart.length - 1], daysList.length);
-      const events = await getRemoteEvents!({
-        start,
-        end,
-        view: "month",
-      });
-      if (events && events?.length) {
-        handleState(events, "events");
-      }
-    } catch (error) {
-      throw error;
-    } finally {
-      triggerLoading(false);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [daysList.length, getRemoteEvents]);
-
-  useEffect(() => {
-    if (getRemoteEvents instanceof Function) {
-      fetchEvents();
-    }
-  }, [fetchEvents, getRemoteEvents]);
-
-  const renderTable = useCallback(
-    (resource?: DefaultResource) => {
-      if (agenda) {
-        let resourcedEvents = sortEventsByTheEarliest(events);
-        if (resource) {
-          resourcedEvents = getResourcedEvents(events, resource, resourceFields, fields);
-        }
-
-        return <MonthAgenda resource={resource} events={resourcedEvents} />;
-      }
-
-      return <MonthTable daysList={daysList} eachWeekStart={eachWeekStart} resource={resource} />;
-    },
-    [agenda, daysList, eachWeekStart, events, fields, resourceFields]
-  );
-
-  return resources.length ? <WithResources renderChildren={renderTable} /> : renderTable();
-};
-
-export { Month };