@isma91/react-scheduler 4.0.0 → 4.0.2

package/src/lib/positionManger/provider.tsx

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

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

package/src/lib/store/context.ts

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

package/src/lib/store/default.ts

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

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

@@ -1,33 +0,0 @@
-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;
-}