@isma91/react-scheduler 4.0.0

package/src/lib/positionManger/provider.tsx

@@ -0,0 +1,113 @@
+import { useEffect, useState } from "react";
+import { PositionManagerState, PositionContext } from "./context";
+import useStore from "../hooks/useStore";
+import { DefaultResource, FieldProps, ProcessedEvent, ResourceFields } from "../types";
+import {
+  getResourcedEvents,
+  sortEventsByTheEarliest,
+  sortEventsByTheLengthest,
+} from "../helpers/generals";
+import { eachDayOfInterval, format } from "date-fns";
+import { View } from "../components/nav/Navigation";
+
+type Props = {
+  children: React.ReactNode;
+};
+
+const setEventPositions = (events: ProcessedEvent[]) => {
+  const slots: PositionManagerState["renderedSlots"][string] = {};
+  let position = 0;
+  for (let i = 0; i < events.length; i++) {
+    const event = events[i];
+    const eventLength = eachDayOfInterval({ start: event.start, end: event.end });
+    for (let i = 0; i < eventLength.length; i++) {
+      const day = format(eventLength[i], "yyyy-MM-dd");
+      if (slots[day]) {
+        const positions = Object.values(slots[day]);
+        while (positions.includes(position)) {
+          position += 1;
+        }
+        slots[day][event.event_id] = position;
+      } else {
+        slots[day] = { [event.event_id]: position };
+      }
+    }
+
+    // rest
+    position = 0;
+  }
+
+  return slots;
+};
+
+const setEventPositionsWithResources = (
+  events: ProcessedEvent[],
+  resources: DefaultResource[],
+  rFields: ResourceFields,
+  fields: FieldProps[],
+  view: View
+) => {
+  const sorted =
+    view === "month" ? sortEventsByTheLengthest(events) : sortEventsByTheEarliest(events);
+  const slots: PositionManagerState["renderedSlots"] = {};
+
+  if (resources.length) {
+    for (const resource of resources) {
+      const resourcedEvents = getResourcedEvents(sorted, resource, rFields, fields);
+      const positions = setEventPositions(resourcedEvents);
+      slots[resource[rFields.idField]] = positions;
+    }
+  } else {
+    slots.all = setEventPositions(sorted);
+  }
+  return slots;
+};
+
+export const PositionProvider = ({ children }: Props) => {
+  const { events, resources, resourceFields, fields, view } = useStore();
+  const [state, set] = useState<PositionManagerState>({
+    renderedSlots: setEventPositionsWithResources(events, resources, resourceFields, fields, view),
+  });
+
+  useEffect(() => {
+    set((prev) => ({
+      ...prev,
+      renderedSlots: setEventPositionsWithResources(
+        events,
+        resources,
+        resourceFields,
+        fields,
+        view
+      ),
+    }));
+  }, [events, fields, resourceFields, resources, view]);
+
+  const setRenderedSlot = (day: string, eventId: string, position: number, resourceId?: string) => {
+    set((prev) => ({
+      ...prev,
+      renderedSlots: {
+        ...prev.renderedSlots,
+        [resourceId || "all"]: {
+          ...prev.renderedSlots?.[resourceId || "all"],
+          [day]: prev.renderedSlots?.[resourceId || "all"]?.[day]
+            ? {
+                ...prev.renderedSlots?.[resourceId || "all"]?.[day],
+                [eventId]: position,
+              }
+            : { [eventId]: position },
+        },
+      },
+    }));
+  };
+
+  return (
+    <PositionContext.Provider
+      value={{
+        ...state,
+        setRenderedSlot,
+      }}
+    >
+      {children}
+    </PositionContext.Provider>
+  );
+};

package/src/lib/positionManger/usePosition.ts

@@ -0,0 +1,8 @@
+import { useContext } from "react";
+import { PositionContext } from "./context";
+
+const usePosition = () => {
+  return useContext(PositionContext);
+};
+
+export default usePosition;

package/src/lib/store/context.ts

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+import { initialStore } from "./default";
+import { Store } from "./types";
+
+export const StoreContext = createContext<Store>(initialStore);

package/src/lib/store/default.ts

@@ -0,0 +1,157 @@
+import { enUS } from "date-fns/locale";
+import { SchedulerProps } from "../types";
+import { getOneView, getTimeZonedDate } from "../helpers/generals";
+
+const defaultMonth = {
+  weekDays: [0, 1, 2, 3, 4, 5, 6],
+  weekStartOn: 6,
+  startHour: 9,
+  endHour: 17,
+  navigation: true,
+  disableGoToDay: false,
+};
+
+const defaultWeek = {
+  weekDays: [0, 1, 2, 3, 4, 5, 6],
+  weekStartOn: 6,
+  startHour: 9,
+  endHour: 17,
+  step: 60,
+  navigation: true,
+  disableGoToDay: false,
+};
+
+const defaultDay = {
+  startHour: 9,
+  endHour: 17,
+  step: 60,
+  navigation: true,
+};
+
+const defaultResourceFields = {
+  idField: "assignee",
+  textField: "text",
+  subTextField: "subtext",
+  avatarField: "avatar",
+  colorField: "color",
+};
+
+const defaultTranslations = (trans: Partial<SchedulerProps["translations"]> = {}) => {
+  const { navigation, form, event, ...other } = trans;
+
+  return {
+    navigation: Object.assign(
+      {
+        month: "Month",
+        week: "Week",
+        day: "Day",
+        agenda: "Agenda",
+        today: "Today",
+      },
+      navigation
+    ),
+    form: Object.assign(
+      {
+        addTitle: "Add Event",
+        editTitle: "Edit Event",
+        confirm: "Confirm",
+        delete: "Delete",
+        cancel: "Cancel",
+      },
+      form
+    ),
+    event: Object.assign(
+      {
+        title: "Title",
+        start: "Start",
+        end: "End",
+        allDay: "All Day",
+      },
+      event
+    ),
+    ...Object.assign(
+      { moreEvents: "More...", loading: "Loading...", noDataToDisplay: "No data to display" },
+      other
+    ),
+  };
+};
+
+const defaultViews = (props: Partial<SchedulerProps>) => {
+  const { month, week, day } = props;
+  return {
+    month: month !== null ? Object.assign(defaultMonth, month) : null,
+    week: week !== null ? Object.assign(defaultWeek, week) : null,
+    day: day !== null ? Object.assign(defaultDay, day) : null,
+  };
+};
+
+export const defaultProps = (props: Partial<SchedulerProps>) => {
+  // We're pulling values out of props that we don't want to
+  // pass on, so there are 'unused' ones here.
+  const {
+    translations,
+    resourceFields,
+    view,
+    agenda,
+    selectedDate,
+    resourceViewMode,
+    direction,
+    dialogMaxWidth,
+    hourFormat,
+    ...otherProps
+  } = props;
+
+  const views = defaultViews(props);
+  const defaultView = view || "week";
+  const initialView = views[defaultView] ? defaultView : getOneView(views);
+  return {
+    ...views,
+    translations: defaultTranslations(translations),
+    resourceFields: Object.assign(defaultResourceFields, resourceFields),
+    view: initialView,
+    selectedDate: getTimeZonedDate(selectedDate || new Date(), props.timeZone),
+    height: 600,
+    navigation: true,
+    disableViewNavigator: false,
+    events: [],
+    fields: [],
+    loading: undefined,
+    customEditor: undefined,
+    onConfirm: undefined,
+    onDelete: undefined,
+    viewerExtraComponent: undefined,
+    resources: [],
+    resourceHeaderComponent: undefined,
+    resourceViewMode: resourceViewMode || "default",
+    direction: direction || "ltr",
+    dialogMaxWidth: dialogMaxWidth || "md",
+    locale: enUS,
+    deletable: true,
+    editable: true,
+    hourFormat: hourFormat || "12",
+    draggable: true,
+    agenda,
+    enableAgenda: typeof agenda === "undefined" || agenda,
+    showCurrentTimeBar: true,
+    forceInlineMultiDay: false,
+    ...otherProps,
+  };
+};
+
+export const initialStore = {
+  ...defaultProps({}),
+  setProps: () => {},
+  dialog: false,
+  selectedRange: undefined,
+  selectedEvent: undefined,
+  selectedResource: undefined,
+  handleState: () => {},
+  getViews: () => [],
+  toggleAgenda: () => {},
+  triggerDialog: () => {},
+  triggerLoading: () => {},
+  handleGotoDay: () => {},
+  confirmEvent: () => {},
+  setCurrentDragged: () => {},
+  onDrop: () => {},
+};

package/src/lib/store/provider.tsx

@@ -0,0 +1,211 @@
+import { DragEvent, useEffect, useState } from "react";
+import { EventActions, ProcessedEvent, SchedulerProps } from "../types";
+import { defaultProps, initialStore } from "./default";
+import { StoreContext } from "./context";
+import { SchedulerState, SelectedRange, Store } from "./types";
+import { arraytizeFieldVal, getAvailableViews } from "../helpers/generals";
+import { addMinutes, differenceInMinutes, isEqual } from "date-fns";
+import { View } from "../components/nav/Navigation";
+
+type Props = {
+  children: React.ReactNode;
+  initial: Partial<SchedulerProps>;
+};
+
+export const StoreProvider = ({ children, initial }: Props) => {
+  const [state, set] = useState<Store>({ ...initialStore, ...defaultProps(initial) });
+
+  useEffect(() => {
+    set((prev) => ({
+      ...prev,
+      onEventDrop: initial.onEventDrop,
+      customEditor: initial.customEditor,
+      customHeaderContent: initial.customHeaderContent,
+      events: initial.events || [],
+    }));
+  }, [initial.onEventDrop, initial.customEditor, initial.events, initial.customHeaderContent]);
+
+  useEffect(() => {
+    if ("undefined" !== typeof initial.loading) {
+      set((prev) => ({ ...prev, loading: initial.loading }));
+    }
+  }, [initial.loading]);
+
+  const handleState = (value: SchedulerState[keyof SchedulerState], name: keyof SchedulerState) => {
+    set((prev) => ({ ...prev, [name]: value }));
+  };
+
+  const getViews = () => {
+    return getAvailableViews(state);
+  };
+
+  const toggleAgenda = () => {
+    set((prev) => {
+      const newStatus = !prev.agenda;
+
+      if (state.onViewChange && typeof state.onViewChange === "function") {
+        state.onViewChange(state.view, newStatus);
+      }
+
+      return { ...prev, agenda: newStatus };
+    });
+  };
+
+  const triggerDialog = (status: boolean, selected?: SelectedRange | ProcessedEvent) => {
+    const isEvent = selected as ProcessedEvent;
+
+    set((prev) => ({
+      ...prev,
+      dialog: status,
+      selectedRange: isEvent?.event_id
+        ? undefined
+        : isEvent || {
+            start: new Date(),
+            end: new Date(Date.now() + 60 * 60 * 1000),
+          },
+      selectedEvent: isEvent?.event_id ? isEvent : undefined,
+      selectedResource: isEvent?.[state.resourceFields?.idField],
+    }));
+  };
+
+  const triggerLoading = (status: boolean) => {
+    // Trigger if not out-sourced by props
+    if (typeof initial.loading === "undefined") {
+      set((prev) => ({ ...prev, loading: status }));
+    }
+  };
+
+  const handleGotoDay = (day: Date) => {
+    const currentViews = getViews();
+    let view: View | undefined;
+    if (currentViews.includes("day")) {
+      view = "day";
+      set((prev) => ({ ...prev, view: "day", selectedDate: day }));
+    } else if (currentViews.includes("week")) {
+      view = "week";
+      set((prev) => ({ ...prev, view: "week", selectedDate: day }));
+    } else {
+      console.warn("No Day/Week views available");
+    }
+
+    if (!!view && state.onViewChange && typeof state.onViewChange === "function") {
+      state.onViewChange(view, state.agenda);
+    }
+
+    if (!!view && state.onSelectedDateChange && typeof state.onSelectedDateChange === "function") {
+      state.onSelectedDateChange(day);
+    }
+  };
+
+  const confirmEvent = (event: ProcessedEvent | ProcessedEvent[], action: EventActions) => {
+    let updatedEvents: ProcessedEvent[];
+    if (action === "edit") {
+      if (Array.isArray(event)) {
+        updatedEvents = state.events.map((e) => {
+          const exist = event.find((ex) => ex.event_id === e.event_id);
+          return exist ? { ...e, ...exist } : e;
+        });
+      } else {
+        updatedEvents = state.events.map((e) =>
+          e.event_id === event.event_id ? { ...e, ...event } : e
+        );
+      }
+    } else {
+      updatedEvents = state.events.concat(event);
+    }
+    set((prev) => ({ ...prev, events: updatedEvents }));
+  };
+
+  const setCurrentDragged = (event?: ProcessedEvent) => {
+    set((prev) => ({ ...prev, currentDragged: event }));
+  };
+
+  const onDrop = async (
+    event: DragEvent<HTMLButtonElement>,
+    eventId: string,
+    startTime: Date,
+    resKey?: string,
+    resVal?: string | number
+  ) => {
+    // Get dropped event
+    const droppedEvent = state.events.find((e) => {
+      if (typeof e.event_id === "number") {
+        return e.event_id === +eventId;
+      }
+      return e.event_id === eventId;
+    }) as ProcessedEvent;
+
+    // Check if has resource and if is multiple
+    const resField = state.fields.find((f) => f.name === resKey);
+    const isMultiple = !!resField?.config?.multiple;
+    let newResource = resVal as string | number | string[] | number[];
+    if (resField) {
+      const eResource = droppedEvent[resKey as string];
+      const currentRes = arraytizeFieldVal(resField, eResource, droppedEvent).value;
+      if (isMultiple) {
+        // if dropped on already owned resource
+        if (currentRes.includes(resVal)) {
+          // Omit if dropped on same time slot for multiple event
+          if (isEqual(droppedEvent.start, startTime)) {
+            return;
+          }
+          newResource = currentRes;
+        } else {
+          // if have multiple resource ? add other : move to other
+          newResource = currentRes.length > 1 ? [...currentRes, resVal] : [resVal];
+        }
+      }
+    }
+
+    // Omit if dropped on same time slot for non multiple events
+    if (isEqual(droppedEvent.start, startTime)) {
+      if (!newResource || (!isMultiple && newResource === droppedEvent[resKey as string])) {
+        return;
+      }
+    }
+
+    // Update event time according to original duration & update resources/owners
+    const diff = differenceInMinutes(droppedEvent.end, droppedEvent.start);
+    const updatedEvent: ProcessedEvent = {
+      ...droppedEvent,
+      start: startTime,
+      end: addMinutes(startTime, diff),
+      recurring: undefined,
+      [resKey as string]: newResource || "",
+    };
+
+    // Local
+    if (!state.onEventDrop || typeof state.onEventDrop !== "function") {
+      return confirmEvent(updatedEvent, "edit");
+    }
+    // Remote
+    try {
+      triggerLoading(true);
+      const _event = await state.onEventDrop(event, startTime, updatedEvent, droppedEvent);
+      if (_event) {
+        confirmEvent(_event, "edit");
+      }
+    } finally {
+      triggerLoading(false);
+    }
+  };
+
+  return (
+    <StoreContext.Provider
+      value={{
+        ...state,
+        handleState,
+        getViews,
+        toggleAgenda,
+        triggerDialog,
+        triggerLoading,
+        handleGotoDay,
+        confirmEvent,
+        setCurrentDragged,
+        onDrop,
+      }}
+    >
+      {children}
+    </StoreContext.Provider>
+  );
+};

package/src/lib/store/types.ts

@@ -0,0 +1,33 @@
+import { DragEvent } from "react";
+import { View } from "../components/nav/Navigation";
+import { DefaultResource, EventActions, ProcessedEvent, SchedulerProps } from "../types";
+
+export type SelectedRange = { start: Date; end: Date };
+
+export interface SchedulerState extends SchedulerProps {
+  dialog: boolean;
+  selectedRange?: SelectedRange;
+  selectedEvent?: ProcessedEvent;
+  selectedResource?: DefaultResource["assignee"] | DefaultResource["assignee"][];
+  selectedTab?: DefaultResource["assignee"];
+  currentDragged?: ProcessedEvent;
+  enableAgenda?: boolean;
+}
+
+export interface Store extends SchedulerState {
+  handleState(value: SchedulerState[keyof SchedulerState], name: keyof SchedulerState): void;
+  getViews(): View[];
+  toggleAgenda: () => void;
+  triggerDialog(status: boolean, event?: SelectedRange | ProcessedEvent): void;
+  triggerLoading(status: boolean): void;
+  handleGotoDay(day: Date): void;
+  confirmEvent(event: ProcessedEvent | ProcessedEvent[], action: EventActions): void;
+  setCurrentDragged(event?: ProcessedEvent): void;
+  onDrop(
+    event: DragEvent<HTMLButtonElement>,
+    eventId: string,
+    droppedStartTime: Date,
+    resourceKey?: string,
+    resourceVal?: string | number
+  ): void;
+}