lowcoder-comps 0.0.29 → 0.0.31

package/src/comps/calendarComp/calendarComp.tsx

@@ -0,0 +1,633 @@
+import { default as Form } from "antd/es/form";
+import { default as Input } from "antd/es/input";
+import { trans, getCalendarLocale } from "../../i18n/comps";
+import { createRef, useContext, useRef, useState, useEffect } from "react";
+import dayjs from "dayjs";
+import FullCalendar from "@fullcalendar/react";
+import resourceTimelinePlugin from "@fullcalendar/resource-timeline";
+import resourceTimeGridPlugin from "@fullcalendar/resource-timegrid";
+import adaptivePlugin from "@fullcalendar/adaptive";
+import dayGridPlugin from "@fullcalendar/daygrid";
+import multiMonthPlugin from '@fullcalendar/multimonth';
+import timeGridPlugin from "@fullcalendar/timegrid";
+import interactionPlugin from "@fullcalendar/interaction";
+import listPlugin from "@fullcalendar/list";
+import allLocales from "@fullcalendar/core/locales-all";
+import { EventContentArg, DateSelectArg } from "@fullcalendar/core";
+import momentPlugin from "@fullcalendar/moment";
+
+import ErrorBoundary from "./errorBoundary";
+
+import {
+  isValidColor,
+  NameConfig,
+  NameConfigHidden,
+  BoolControl,
+  UICompBuilder,
+  withDefault,
+  withExposingConfigs,
+  withMethodExposing,
+  NumberControl,
+  StringControl,
+  hiddenPropertyView,
+  ChangeEventHandlerControl,
+  // DragEventHandlerControl,
+  Section,
+  sectionNames,
+  dropdownControl,
+  styleControl,
+  ThemeContext,
+  CalendarStyle,
+  DateParser,
+  CustomModal,
+  jsonValueExposingStateControl,
+  CalendarDeleteIcon,
+  Tooltip,
+} from "lowcoder-sdk";
+
+import {
+  DefaultWithFreeViewOptions,
+  DefaultWithPremiumViewOptions,
+  FirstDayOptions,
+  Wrapper,
+  Event,
+  Remove,
+  EventType,
+  defaultData,
+  ViewType,
+  buttonText,
+  headerToolbar,
+  views,
+  slotLabelFormat,
+  slotLabelFormatWeek,
+  slotLabelFormatMonth,
+  viewClassNames,
+  FormWrapper,
+  resourcesDefaultData,
+  resourcesEventsDefaultData,
+  resourceTimeLineHeaderToolbar,
+  resourceTimeGridHeaderToolbar,
+} from "./calendarConstants";
+ 
+const childrenMap = {
+  events: jsonValueExposingStateControl("events", defaultData),
+  resourcesEvents: jsonValueExposingStateControl("resourcesEvents", resourcesEventsDefaultData),
+  resources: jsonValueExposingStateControl("resources", resourcesDefaultData),
+  resourceName: withDefault(StringControl, trans("calendar.resourcesDefault")),
+  onEvent: ChangeEventHandlerControl,
+  // onDropEvent: DragEventHandlerControl,
+  editable: withDefault(BoolControl, true),
+  showEventTime: withDefault(BoolControl, true),
+  showWeekends: withDefault(BoolControl, true),
+  showAllDay: withDefault(BoolControl, true),
+  defaultDate: withDefault(StringControl, "{{ new Date() }}"),
+  firstDay: dropdownControl(FirstDayOptions, "1"),
+  dayMaxEvents: withDefault(NumberControl, 2),
+  eventMaxStack: withDefault(NumberControl, 0),
+  style: styleControl(CalendarStyle),
+  licenseKey: withDefault( StringControl, "" ),
+  currentFreeView: dropdownControl(DefaultWithFreeViewOptions, "timeGridWeek"),
+  currentPremiumView: dropdownControl(DefaultWithPremiumViewOptions, "resourceTimelineDay"),
+};
+
+let CalendarBasicComp = (function () {
+  return new UICompBuilder(childrenMap, (props: { 
+    events: any; 
+    resourcesEvents: any; 
+    resources: any; 
+    resourceName : string
+    onEvent?: any;
+    // onDropEvent?: any;
+    editable?: boolean; 
+    showEventTime?: boolean; 
+    showWeekends?: boolean; 
+    showAllDay?: boolean; 
+    defaultDate?: string; 
+    firstDay?: string; 
+    dayMaxEvents?: number; 
+    eventMaxStack?: number; 
+    style: any; 
+    licenseKey?: string; 
+    licensed?: boolean;
+    currentFreeView?: string; 
+    currentPremiumView?: string; 
+  }) => {
+
+    const theme = useContext(ThemeContext);
+    const ref = createRef<HTMLDivElement>();
+    const editEvent = useRef<EventType>();
+    const [form] = Form.useForm();
+    const [left, setLeft] = useState<number | undefined>(undefined);
+    const [licensed, setLicensed] = useState<boolean>(props.licenseKey !== "");
+
+    useEffect(() => {
+      setLicensed(props.licenseKey !== "");
+    }, [props.licenseKey]);
+
+    let currentView = licensed ? props.currentPremiumView : props.currentFreeView;
+    let currentEvents = currentView == "resourceTimelineDay" || currentView == "resourceTimeGridDay" ? props.resourcesEvents : props.events;
+
+    console.log("currentEvents", currentEvents);
+
+    // we use one central stack of events for all views
+    let events = Array.isArray(currentEvents.value) ? currentEvents.value.map((item: EventType) => {
+      return {
+        title: item.title,
+        id: item.id,
+        start: dayjs(item.start, DateParser).format(),
+        end: dayjs(item.end, DateParser).format(),
+        allDay: item.allDay,
+        resourceId: item.resourceId ? item.resourceId : null,
+        color: isValidColor(item.color || "") ? item.color : theme?.theme?.primary,
+        ...(item.groupId ? { groupId: item.groupId } : {}),
+      };
+    }) : [currentEvents.value];
+
+    const resources = props.resources.value;
+
+    // list all plugins for Fullcalendar
+    const plugins = [
+      dayGridPlugin,
+      timeGridPlugin,
+      interactionPlugin,
+      listPlugin,
+      momentPlugin,
+      resourceTimelinePlugin,
+      resourceTimeGridPlugin,
+      adaptivePlugin,
+      multiMonthPlugin,
+    ];
+
+    // filter out premium plugins if not licensed
+    const filteredPlugins = plugins.filter((plugin) => {
+      if (!licensed) {
+        return ![resourceTimelinePlugin, resourceTimeGridPlugin, adaptivePlugin].includes(plugin);
+      }
+      return true;
+    });
+
+    const toolBar = (defaultView: any) => {
+      switch (defaultView) {
+        case "resourceTimelineDay":
+          return resourceTimeLineHeaderToolbar;
+          break;
+        case "resourceTimeGridDay":
+          return resourceTimeGridHeaderToolbar;
+          break;
+        default:
+          return headerToolbar;
+          break;
+      }
+    };
+
+
+    const [currentSlotLabelFormat, setCurrentSlotLabelFormat] = useState(slotLabelFormat);
+
+    const handleDatesSet = (arg: { view: { type: any; }; }) => {
+      switch (arg.view.type) {
+        case "resourceTimelineDay":
+          setCurrentSlotLabelFormat(slotLabelFormat);
+          break;
+        case "resourceTimelineWeek":
+          setCurrentSlotLabelFormat(slotLabelFormatWeek);
+          break;
+        case "resourceTimelineMonth":
+          setCurrentSlotLabelFormat(slotLabelFormatMonth);
+          break;
+        default:
+          setCurrentSlotLabelFormat(slotLabelFormat);
+          break;
+      }
+    };
+
+    let initialDate: string | undefined;
+
+    try {
+      initialDate = new Date(props.defaultDate || Date.now()).toISOString();
+    } catch (error) {
+      initialDate = undefined;
+    }
+
+    let {
+      showEventTime,
+      showWeekends,
+      showAllDay,
+      dayMaxEvents,
+      eventMaxStack,
+      style,
+      firstDay,
+      editable,
+      licenseKey,
+      resourceName,
+    } = props;
+
+    function renderEventContent(eventInfo: EventContentArg) {
+      const isList = eventInfo.view.type === "listWeek";
+      let sizeClass = "";
+      if (
+        [ViewType.WEEK, ViewType.DAY].includes(eventInfo.view.type as ViewType)
+      ) {
+        const duration = dayjs(eventInfo.event.end).diff(
+          dayjs(eventInfo.event.start),
+          "minutes"
+        );
+        if (duration <= 30 || eventInfo.event.allDay) {
+          sizeClass = "small";
+        } else if (duration <= 60) {
+          sizeClass = "middle";
+        } else {
+          sizeClass = "large";
+        }
+      }
+      const stateClass =
+        dayjs().isAfter(dayjs(eventInfo.event.end)) &&
+        (eventInfo.view.type as ViewType) !== ViewType.MONTH
+          ? "past"
+          : "";
+
+      return (
+        <Event
+          className={`event ${sizeClass} ${stateClass}`}
+          $bg={eventInfo.backgroundColor}
+          theme={theme?.theme}
+          $isList={isList}
+          $allDay={Boolean(showAllDay)}
+          $style={props.style}
+        >
+          <div className="event-time">{eventInfo.timeText}</div>
+          <div className="event-title">{eventInfo.event.title}</div>
+          <Remove
+            $isList={isList}
+            className="event-remove"
+            onClick={(e) => {
+              e.stopPropagation();
+              props.onEvent("change");
+              const event = events.filter(
+                (item: EventType) => item.id !== eventInfo.event.id
+              );
+              props.events.onChange(event);
+            }}
+            onMouseDown={(e) => {
+              e.stopPropagation();
+              e.preventDefault();
+            }}
+          >
+            <CalendarDeleteIcon />
+          </Remove>
+        </Event>
+      );
+    }
+
+    const handleDbClick = () => {
+      const event = props.events.value.find(
+        (item: EventType) => item.id === editEvent.current?.id
+      ) as EventType;
+      if (!editable || !editEvent.current) {
+        return;
+      }
+      if (event) {
+        const { title, groupId, color, id } = event;
+        const eventInfo = {
+          title,
+          groupId,
+          color,
+          id,
+        };
+        showModal(eventInfo, true);
+      } else {
+        showModal(editEvent.current, false);
+      }
+    };
+
+    const handleCreate = (info: DateSelectArg) => {
+      const event = {
+        allDay: info.allDay,
+        start: info.startStr,
+        end: info.endStr,
+      };
+      const view = info.view.type as ViewType;
+      const duration = dayjs(info.end).diff(dayjs(info.start), "minutes");
+      const singleClick =
+        (view === ViewType.MONTH && duration === 1440) ||
+        ([ViewType.WEEK, ViewType.DAY].includes(view) && duration === 30) ||
+        (info.allDay && duration === 1440);
+      if (singleClick) {
+        editEvent.current = event;
+        setTimeout(() => {
+          editEvent.current = undefined;
+        }, 500);
+        return;
+      }
+      showModal(event, false);
+    };
+
+    const showModal = (event: EventType, ifEdit: boolean) => {
+      const modalTitle = ifEdit
+        ? trans("calendar.editEvent")
+        : trans("calendar.creatEvent");
+      form && form.setFieldsValue(event);
+      const eventId = editEvent.current?.id;
+      CustomModal.confirm({
+        title: modalTitle,
+        content: (
+          <FormWrapper form={form}>
+            <Form.Item
+              label={
+                <Tooltip title={trans("calendar.eventIdTooltip")}>
+                  {trans("calendar.eventId")}
+                </Tooltip>
+              }
+              name="id"
+              rules={[
+                { required: true, message: trans("calendar.eventIdRequire") },
+              ]}
+            >
+              <Input />
+            </Form.Item>
+            <Form.Item
+              label={trans("calendar.eventName")}
+              name="title"
+              rules={[
+                { required: true, message: trans("calendar.eventNameRequire") },
+              ]}
+            >
+              <Input />
+            </Form.Item>
+            <Form.Item label={trans("calendar.eventColor")} name="color">
+              <Input />
+            </Form.Item>
+            <Form.Item
+              label={
+                <Tooltip title={trans("calendar.groupIdTooltip")}>
+                  {trans("calendar.eventGroupId")}
+                </Tooltip>
+              }
+              name="groupId"
+            >
+              <Input />
+            </Form.Item>
+          </FormWrapper>
+        ),
+        onConfirm: () => {
+          form.submit();
+          return form.validateFields().then(() => {
+            const { id, groupId, color, title = "" } = form.getFieldsValue();
+            const idExist = props.events.value.findIndex(
+              (item: EventType) => item.id === id
+            );
+            if (idExist > -1 && id !== eventId) {
+              form.setFields([
+                { name: "id", errors: [trans("calendar.eventIdExist")] },
+              ]);
+              throw new Error();
+            }
+            if (ifEdit) {
+              const changeEvents = props.events.value.map((item: EventType) => {
+                if (item.id === eventId) {
+                  return {
+                    ...item,
+                    title,
+                    id,
+                    ...(groupId !== undefined ? { groupId } : null),
+                    ...(color !== undefined ? { color } : null),
+                  };
+                } else {
+                  return item;
+                }
+              });
+              props.events.onChange(changeEvents);
+            } else {
+              const createInfo = {
+                allDay: event.allDay,
+                start: event.start,
+                end: event.end,
+                id,
+                title,
+                ...(groupId !== undefined ? { groupId } : null),
+                ...(color !== undefined ? { color } : null),
+              };
+              props.events.onChange([...props.events.value, createInfo]);
+            }
+            props.onEvent("change");
+            form.resetFields();
+          }); //small change
+        },
+        onCancel: () => {
+          form.resetFields();
+        },
+      });
+    }; 
+
+    return (
+      <Wrapper
+        ref={ref}
+        $editable={editable}
+        $style={style}
+        $theme={theme?.theme}
+        onDoubleClick={handleDbClick}
+        $left={left}
+        key={initialDate ? currentView + initialDate : currentView}
+      >
+        <ErrorBoundary>
+          <FullCalendar
+            slotEventOverlap={false}
+            events={ events }
+            dayHeaders={true}
+            dayHeaderFormat={{ weekday: 'short', month: 'numeric', day: 'numeric', omitCommas: true }}
+            expandRows={true}
+            multiMonthMinWidth={250}
+            nowIndicator={true}
+            height={"100%"}
+            locale={getCalendarLocale()}
+            locales={allLocales}
+            firstDay={Number(firstDay)}
+            plugins={filteredPlugins}
+            headerToolbar={toolBar(currentView)}
+            resourceAreaHeaderContent={resourceName}
+            
+            buttonText={buttonText}
+            schedulerLicenseKey={licenseKey}
+            views={views}
+            resources={ currentView == "resourceTimelineDay" || currentView == "resourceTimeGridDay" ? resources : [] }
+            eventClassNames={() => (!showEventTime ? "no-time" : "")}
+            slotLabelFormat={currentSlotLabelFormat}
+            viewClassNames={viewClassNames}
+            moreLinkText={trans("calendar.more")}
+            initialDate={initialDate}
+            initialView={currentView}
+            editable={editable}
+            selectable={editable}
+            datesSet={handleDatesSet}
+            selectMirror={false}
+            displayEventTime={showEventTime}
+            dayMaxEvents={dayMaxEvents}
+            eventMaxStack={eventMaxStack || undefined}
+            weekends={showWeekends}
+            allDaySlot={showAllDay}
+            eventContent={renderEventContent}
+            select={(info) => handleCreate(info)}
+            eventClick={(info) => {
+              const event = events.find(
+                (item: EventType) => item.id === info.event.id
+              );
+              editEvent.current = event;
+              setTimeout(() => {
+                editEvent.current = undefined;
+              }, 500);
+            }}
+            moreLinkClick={(info) => {
+              let left = 0;
+              const ele = info.jsEvent.target as HTMLElement;
+              if (info.view.type === ViewType.DAY) {
+                if (info.allDay) {
+                  left = ele.offsetParent?.parentElement?.offsetLeft || 0;
+                } else {
+                  left = ele.parentElement?.offsetLeft || 0;
+                }
+              } else {
+                if (info.allDay) {
+                  left =
+                    ele.offsetParent?.parentElement?.parentElement?.offsetLeft ||
+                    0;
+                } else {
+                  left =
+                    ele.offsetParent?.parentElement?.parentElement?.parentElement
+                      ?.offsetLeft || 0;
+                }
+              }
+              setLeft(left);
+            }}
+            eventsSet={(info) => {
+              let needChange = false;
+              let changeEvents: EventType[] = [];
+              info.forEach((item) => {
+                const event = events.find((i: EventType) => i.id === item.id);
+                const start = dayjs(item.start, DateParser).format();
+                const end = dayjs(item.end, DateParser).format();
+                if (
+                  start !== event?.start ||
+                  end !== event?.end ||
+                  !!item.allDay !== !!event?.allDay
+                ) {
+                  needChange = true;
+                  changeEvents.push({
+                    ...event,
+                    allDay: item.allDay,
+                    start: item.startStr,
+                    end: item.endStr,
+                  });
+                } else {
+                  changeEvents.push(event);
+                }
+              });
+              if (needChange) {
+                props.onEvent("change");
+              }
+            }}
+            eventDragStop={(info) => {
+              if (info.view) {
+                // props.onDropEvent("dropEvent");
+              }
+            }}
+          />
+        </ErrorBoundary>
+      </Wrapper>
+    );
+  })
+    .setPropertyViewFn((children: { 
+      
+      events: { propertyView: (arg0: {}) => any; }; 
+      resourcesEvents: { propertyView: (arg0: {}) => any; };
+      resources: { propertyView: (arg0: {}) => any; };
+      resourceName: { propertyView: (arg0: {}) => any; };
+      onEvent: { propertyView: ({title}?: {title?: string}) => any; }; 
+      // onDropEvent: { propertyView: ({title}?: {title?: string}) => any; };
+      editable: { propertyView: (arg0: { label: string; }) => any; };
+      showEventTime: { propertyView: (arg0: { label: string; tooltip: string; }) => any; }; 
+      showWeekends: { propertyView: (arg0: { label: string; }) => any; }; 
+      showAllDay: { propertyView: (arg0: { label: string; tooltip: string; }) => any; }; 
+      defaultDate: { propertyView: (arg0: { label: string; tooltip: string; }) => any; }; 
+      firstDay: { propertyView: (arg0: { label: string; }) => any; }; 
+      dayMaxEvents: { propertyView: (arg0: { label: string; tooltip: string; }) => any; }; 
+      eventMaxStack: { propertyView: (arg0: { label: string; tooltip: string; }) => any; }; 
+      currentFreeView: { propertyView: (arg0: { label: string; tooltip: string; }) => any; }; 
+      currentPremiumView: { propertyView: (arg0: { label: string; tooltip: string; }) => any; }; 
+      style: { getPropertyView: () => any; };
+      licenseKey: { getView: () => any; propertyView: (arg0: { label: string; }) => any; };
+    }) => {
+
+      const license = children.licenseKey.getView();
+      
+      return (
+        <>
+          <Section name={sectionNames.basic}>
+            {children.defaultDate.propertyView({ label: trans("calendar.defaultDate"), tooltip: trans("calendar.defaultDateTooltip"), })}
+            {children.events.propertyView({label: trans("calendar.events")})}
+            {license == "" ? null : children.resourcesEvents.propertyView({label: trans("calendar.resourcesEvents")})}
+          </Section>
+          { license != "" && 
+            <Section name={trans("calendar.resources")}>
+              {children.resources.propertyView({label: trans("calendar.resources")})}
+              {children.resourceName.propertyView({label: trans("calendar.resourcesName")})}
+            </Section>
+          }
+          <Section name={sectionNames.interaction}>
+            {hiddenPropertyView(children)}
+            <div style={{display: 'flex', flexDirection: 'column', gap: '8px'}}>
+              {children.onEvent.propertyView()}
+            </div>
+            <div style={{display: 'flex', flexDirection: 'column', gap: '8px'}}>
+              {/* {children.onDropEvent.propertyView({title: trans("calendar.dragDropEventHandlers")})} */}
+            </div>
+            {children.editable.propertyView({ label: trans("calendar.editable"), })}
+          </Section>
+          <Section name={sectionNames.advanced}>
+            {children.showEventTime.propertyView({ label: trans("calendar.showEventTime"), tooltip: trans("calendar.showEventTimeTooltip"), })}
+            {children.showWeekends.propertyView({ label: trans("calendar.showWeekends"), })}
+            {children.showAllDay.propertyView({ label: trans("calendar.showAllDay"), tooltip: trans("calendar.showAllDayTooltip"), })}
+            {children.dayMaxEvents.propertyView({ label: trans("calendar.dayMaxEvents"), tooltip: trans("calendar.dayMaxEventsTooltip"), })}
+            {children.eventMaxStack.propertyView({ label: trans("calendar.eventMaxStack"), tooltip: trans("calendar.eventMaxStackTooltip"), })}
+          </Section>
+          <Section name={sectionNames.layout}>
+            {children.licenseKey.propertyView({ label: trans("calendar.license"), tooltip: trans("calendar.licenseTooltip"), })}
+            {license == ""
+              ? children.currentFreeView.propertyView({ label: trans("calendar.defaultView"), tooltip: trans("calendar.defaultViewTooltip"), })
+              : children.currentPremiumView.propertyView({ label: trans("calendar.defaultView"), tooltip: trans("calendar.defaultViewTooltip"), })}
+            {children.firstDay.propertyView({ label: trans("calendar.startWeek"), })}
+          </Section>
+          <Section name={sectionNames.style}>
+            {children.style.getPropertyView()}
+          </Section>
+        </>
+      );
+    })
+    .build();
+})();
+
+CalendarBasicComp = class extends CalendarBasicComp {
+  override autoHeight(): boolean {
+    return false;
+  }
+};
+
+const TmpCalendarComp = withExposingConfigs(CalendarBasicComp, [
+  new NameConfig("events", trans("calendar.events")),
+  new NameConfig("resourcesEvents", trans("calendar.resourcesEvents")),
+  new NameConfig("resources", trans("calendar.resources")),
+  NameConfigHidden,
+]);
+
+export const CalendarComp = withMethodExposing(TmpCalendarComp, [
+  {
+    method: {
+      name: "setCalendarView",
+      description: "timeGridWeek || timeGridDay || dayGridMonth || listWeek || resourceTimelineDay || resourceTimeGridDay || resourceTimelineWeek || resourceTimelineMonth",
+      params: [{ name: "viewType", type: "string" }],
+    },
+    execute: (comp, values) => {
+      const viewType = values[0] as string;
+      viewType == "" ? viewType : "timeGridWeek";
+      return comp.children.licenseKey.getView() == "" ? comp.children.defaultFreeView.dispatchChangeValueAction(viewType) : comp.children.defaultPremiumView.dispatchChangeValueAction(viewType);
+    }
+  },
+]);