lowcoder-comps 0.0.7 → 0.0.8

package/package/icons/icon-chart.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48px" height="48px" viewBox="0 0 48 48" version="1.1">
+  <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g transform="translate(6.000000, 11.500000)" stroke="#D7D9E0" stroke-linecap="round" stroke-width="2">
+      <line x1="-2.00715996e-17" y1="0.5" x2="36" y2="0.5"/>
+      <line x1="-2.00715996e-17" y1="8.5" x2="36" y2="8.5"/>
+      <line x1="2.70913881e-14" y1="16.5" x2="36" y2="16.5"/>
+      <line x1="2.70913881e-14" y1="24.5" x2="36" y2="24.5"/>
+    </g>
+    <g transform="translate(11.000000, 10.000000)" fill="#3377FF">
+      <path d="M11,0 L15,0 C15.5522847,-1.01453063e-16 16,0.44771525 16,1 L16,25 L16,25 L10,25 L10,1 C10,0.44771525 10.4477153,7.67586877e-16 11,0 Z"/>
+      <path d="M1,13 L5,13 C5.55228475,13 6,13.4477153 6,14 L6,25 L6,25 L0,25 L0,14 C-6.76353751e-17,13.4477153 0.44771525,13 1,13 Z"/>
+      <path d="M21,6 L25,6 C25.5522847,6 26,6.44771525 26,7 L26,25 L26,25 L20,25 L20,7 C20,6.44771525 20.4477153,6 21,6 Z"/>
+    </g>
+  </g>
+</svg>

package/package/icons/icon-comp-calendar.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(6.000000, 5.000000)">
+            <rect stroke="#D7D9E0" stroke-width="2" fill="#FFFFFF" x="1" y="4" width="34" height="30" rx="3"></rect>
+            <g transform="translate(5.000000, 14.000000)">
+                <rect fill="#3377FF" x="14" y="0" width="5" height="5" rx="1.5"></rect>
+                <rect fill="#8B8FA3" x="7" y="0" width="5" height="5" rx="1.5"></rect>
+                <rect fill="#3377FF" x="14" y="6" width="5" height="5" rx="1.5"></rect>
+                <rect fill="#8B8FA3" x="7" y="6" width="5" height="5" rx="1.5"></rect>
+                <rect fill="#8B8FA3" x="0" y="6" width="5" height="5" rx="1.5"></rect>
+                <rect fill="#8B8FA3" x="7" y="12" width="5" height="5" rx="1.5"></rect>
+                <rect fill="#8B8FA3" x="0" y="12" width="5" height="5" rx="1.5"></rect>
+                <rect fill="#8B8FA3" x="21" y="0" width="5" height="5" rx="1.5"></rect>
+                <rect fill="#8B8FA3" x="21" y="6" width="5" height="5" rx="1.5"></rect>
+            </g>
+            <path d="M3,3 L33,3 C34.6568542,3 36,4.34314575 36,6 L36,12 L36,12 L0,12 L0,6 C-2.02906125e-16,4.34314575 1.34314575,3 3,3 Z" fill="#D7D9E0"></path>
+            <rect fill="#D7D9E0" x="7" y="0" width="4" height="8" rx="1"></rect>
+            <rect fill="#D7D9E0" x="25" y="0" width="4" height="8" rx="1"></rect>
+        </g>
+    </g>
+</svg>

package/package/index.js

@@ -0,0 +1,5 @@
+import { aJ as f } from "./2b3ab1e4.js";
+export {
+  f as default
+};
+(function(){"use strict";try{if(typeof document!="undefined"){var e=document.createElement("style");e.id="lowcoder-comps-0.0.8",e.appendChild(document.createTextNode("")),document.head.appendChild(e)}}catch(c){console.error("vite-plugin-css-injected-by-js",c)}})();

package/package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "lowcoder-comps",
+  "version": "0.0.8",
+  "type": "module",
+  "license": "MIT",
+  "dependencies": {
+    "@fullcalendar/core": "^6.1.6",
+    "@fullcalendar/daygrid": "^6.1.6",
+    "@fullcalendar/interaction": "^6.1.6",
+    "@fullcalendar/list": "^6.1.6",
+    "@fullcalendar/moment": "^6.1.6",
+    "@fullcalendar/react": "^6.1.6",
+    "@fullcalendar/timegrid": "^6.1.6",
+    "@types/react": "17",
+    "@types/react-dom": "17",
+    "big.js": "^6.2.1",
+    "lowcoder-cli": "workspace:^",
+    "lowcoder-sdk": "workspace:^",
+    "mermaid": "^10.1.x0",
+    "react": "17",
+    "react-dom": "17",
+    "typescript": "4.8.4"
+  },
+  "lowcoder": {
+    "description": "",
+    "comps": {
+      "chart": {
+        "name": "Chart",
+        "icon": "./icons/icon-chart.svg",
+        "layoutInfo": {
+          "w": 11,
+          "h": 35
+        }
+      },
+      "imageEditor": {
+        "name": "Image Editor",
+        "icon": "./icons/icon-chart.svg",
+        "layoutInfo": {
+          "w": 15,
+          "h": 60
+        }
+      },
+      "calendar": {
+        "name": "Calendar",
+        "icon": "./icons/icon-comp-calendar.svg",
+        "layoutInfo": {
+          "w": 15,
+          "h": 60
+        }
+      },
+      "mermaid": {
+        "name": "Mermaid",
+        "icon": "./icons/icon-chart.svg",
+        "layoutInfo": {
+          "w": 15,
+          "h": 60
+        }
+      }
+    },
+    "entry": "index.js"
+  },
+  "scripts": {
+    "start": "vite",
+    "build": "yarn test && lowcoder-cli build",
+    "build_only": "lowcoder-cli build",
+    "test": "jest"
+  },
+  "devDependencies": {
+    "jest": "29.3.0",
+    "vite": "^3.2.4",
+    "vite-tsconfig-paths": "^3.6.0"
+  }
+}

package/package.json

@@ -1,11 +1,8 @@
 {
   "name": "lowcoder-comps",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "type": "module",
   "license": "MIT",
-  "files": [
-    "tsconfig.json"
-  ],
   "dependencies": {
     "@fullcalendar/core": "^6.1.6",
     "@fullcalendar/daygrid": "^6.1.6",

package/src/__test__/allComp.test.tsx

@@ -0,0 +1,61 @@
+import _ from "lodash";
+import { CompConstructor, CustomAction } from "lowcoder-core";
+import { evalAndReduce, isExposingMethodComp } from "lowcoder-sdk";
+import { ChartCompWithDefault } from "comps/chartComp/chartComp";
+import log from "loglevel";
+
+const COMPS_MAP = {
+  chart: ChartCompWithDefault,
+} as Record<string, CompConstructor>;
+
+const compContextActionMap = {} as Record<string, CustomAction>;
+
+test("test comp don't change if no value change", () => {
+  Object.keys(COMPS_MAP).forEach((name) => {
+    const Comp = COMPS_MAP[name];
+    let comp = new Comp({});
+    if (compContextActionMap[name]) {
+      // set context
+      comp = comp.reduce(compContextActionMap[name]);
+    }
+    comp.getView(); // getView() is allowed when unevaluated
+    comp = evalAndReduce(comp);
+    expect(comp.node() === comp.node()).toBe(true);
+    expect(comp.node()?.evaluate() === comp.node()?.evaluate()).toBe(true);
+    const comp2 = evalAndReduce(comp);
+    if (comp2 !== comp) {
+      const comp3 = evalAndReduce(comp2);
+      if (comp3 === comp2) {
+        // log.debug(`${name} need eval twice to converge`);
+      } else {
+        const newComp = evalAndReduce(comp);
+        Object.keys((comp as any).children).forEach((key) => {
+          log.log(
+            `${key}, isEqual ${(comp as any).children[key] === (newComp as any).children[key]}`
+          );
+        });
+        throw new Error("bad " + name);
+      }
+    }
+  });
+});
+
+test("comp exposing method duplicate name", () => {
+  // one comp can't expose two methods with the same name
+  Object.values(COMPS_MAP).forEach((Comp) => {
+    const comp = new Comp({});
+    const methods = [];
+    if (isExposingMethodComp(comp)) {
+      methods.push(comp.getMethodConfig());
+    }
+    const childrenMap = (comp as any).children;
+    childrenMap &&
+      Object.values(childrenMap).forEach((child) => {
+        if (isExposingMethodComp(child as any)) {
+          methods.push((child as any).getMethodConfig());
+        }
+      });
+    const allMethodName = methods.flatMap((m) => m.map((methodConfig) => methodConfig.name));
+    expect(allMethodName.length).toEqual(_.uniq(allMethodName).length);
+  });
+});

package/src/app-env.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="lowcoder-cli/client" />
+
+declare module "lowcoder-sdk";

package/src/comps/calendarComp/calendarComp.tsx

@@ -0,0 +1,442 @@
+import {
+  isValidColor,
+  NameConfig,
+  NameConfigHidden,
+  BoolControl,
+  UICompBuilder,
+  withDefault,
+  withExposingConfigs,
+  NumberControl,
+  StringControl,
+  hiddenPropertyView,
+  ChangeEventHandlerControl,
+  Section,
+  sectionNames,
+  dropdownControl,
+  styleControl,
+  ThemeContext,
+  CalendarStyle,
+  DateParser,
+  CustomModal,
+  jsonValueExposingStateControl,
+  CalendarDeleteIcon,
+  Tooltip,
+} from "lowcoder-sdk";
+import { Input, Form } from "antd";
+import { trans, getCalendarLocale } from "../../i18n/comps";
+import { createRef, useContext, useRef, useState } from "react";
+import FullCalendar from "@fullcalendar/react";
+import dayGridPlugin from "@fullcalendar/daygrid";
+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 {
+  DefaultViewOptions,
+  FirstDayOptions,
+  Wrapper,
+  Event,
+  Remove,
+  EventType,
+  defaultData,
+  ViewType,
+  buttonText,
+  headerToolbar,
+  views,
+  slotLabelFormat,
+  viewClassNames,
+  FormWrapper,
+} from "./calendarConstants";
+import moment from "moment";
+
+const childrenMap = {
+  events: jsonValueExposingStateControl("events", defaultData),
+  onEvent: ChangeEventHandlerControl,
+
+  editable: withDefault(BoolControl, true),
+  defaultDate: withDefault(StringControl, "{{ new Date() }}"),
+  defaultView: dropdownControl(DefaultViewOptions, "timeGridWeek"),
+  firstDay: dropdownControl(FirstDayOptions, "1"),
+  showEventTime: withDefault(BoolControl, true),
+  showWeekends: withDefault(BoolControl, true),
+  showAllDay: withDefault(BoolControl, true),
+  dayMaxEvents: withDefault(NumberControl, 2),
+  eventMaxStack: withDefault(NumberControl, 0),
+  style: styleControl(CalendarStyle),
+};
+
+let CalendarBasicComp = (function () {
+  return new UICompBuilder(childrenMap, (props) => {
+    const theme = useContext(ThemeContext);
+    const ref = createRef<HTMLDivElement>();
+    const editEvent = useRef<EventType>();
+    const [form] = Form.useForm();
+    const [left, setLeft] = useState<number | undefined>(undefined);
+
+    const events = props.events.value.map((item: EventType) => {
+      return {
+        title: item.title,
+        id: item.id,
+        start: moment(item.start, DateParser).format(),
+        end: moment(item.end, DateParser).format(),
+        allDay: item.allDay,
+        color: isValidColor(item.color || "") ? item.color : theme?.theme?.primary,
+        ...(item.groupId ? { groupId: item.groupId } : null),
+      };
+    });
+
+    const {
+      defaultDate,
+      defaultView,
+      showEventTime,
+      showWeekends,
+      showAllDay,
+      dayMaxEvents,
+      eventMaxStack,
+      style,
+      firstDay,
+      editable,
+    } = 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 = moment(eventInfo.event.end).diff(moment(eventInfo.event.start), "minutes");
+        if (duration <= 30 || eventInfo.event.allDay) {
+          sizeClass = "small";
+        } else if (duration <= 60) {
+          sizeClass = "middle";
+        } else {
+          sizeClass = "large";
+        }
+      }
+      const stateClass =
+        moment().isAfter(moment(eventInfo.event.end)) &&
+        (eventInfo.view.type as ViewType) !== ViewType.MONTH
+          ? "past"
+          : "";
+
+      return (
+        <Event
+          className={`event ${sizeClass} ${stateClass}`}
+          isList={isList}
+          bg={eventInfo.backgroundColor}
+          theme={theme?.theme}
+          $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 = moment(info.end).diff(moment(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();
+          });
+        },
+        onCancel: () => {
+          form.resetFields();
+        },
+      });
+    };
+
+    let initialDate = defaultDate;
+    try {
+      initialDate = new Date(defaultDate).toISOString();
+    } catch (error) {
+      initialDate = undefined;
+    }
+
+    return (
+      <Wrapper
+        ref={ref}
+        editable={editable}
+        $style={style}
+        theme={theme?.theme}
+        onDoubleClick={handleDbClick}
+        left={left}
+        key={initialDate ? defaultView + initialDate : defaultView}
+      >
+        <FullCalendar
+          slotEventOverlap={false}
+          events={events}
+          expandRows={true}
+          height={"100%"}
+          locale={getCalendarLocale()}
+          locales={allLocales}
+          firstDay={Number(firstDay)}
+          plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin, momentPlugin]}
+          headerToolbar={headerToolbar}
+          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);
+          }}
+          buttonText={buttonText}
+          views={views}
+          eventClassNames={() => (!showEventTime ? "no-time" : "")}
+          slotLabelFormat={slotLabelFormat}
+          viewClassNames={viewClassNames}
+          moreLinkText={trans("calendar.more")}
+          initialDate={initialDate}
+          initialView={defaultView}
+          editable={editable}
+          selectable={editable}
+          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);
+          }}
+          eventsSet={(info) => {
+            let needChange = false;
+            let changeEvents: EventType[] = [];
+            info.forEach((item) => {
+              const event = events.find((i: EventType) => i.id === item.id);
+              const start = moment(item.start, DateParser).format();
+              const end = moment(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.events.onChange(changeEvents);
+              props.onEvent("change");
+            }
+          }}
+        />
+      </Wrapper>
+    );
+  })
+    .setPropertyViewFn((children) => {
+      return (
+        <>
+          <Section name={sectionNames.basic}>{children.events.propertyView({})}</Section>
+          <Section name={sectionNames.interaction}>{children.onEvent.getPropertyView()}</Section>
+          <Section name={sectionNames.advanced}>
+            {children.editable.propertyView({
+              label: trans("calendar.editable"),
+            })}
+            {children.defaultDate.propertyView({
+              label: trans("calendar.defaultDate"),
+              tooltip: trans("calendar.defaultDateTooltip"),
+            })}
+            {children.defaultView.propertyView({
+              label: trans("calendar.defaultView"),
+              tooltip: trans("calendar.defaultViewTooltip"),
+            })}
+            {children.firstDay.propertyView({
+              label: trans("calendar.startWeek"),
+            })}
+            {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}>{hiddenPropertyView(children)}</Section>
+          <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
+        </>
+      );
+    })
+    .build();
+})();
+
+CalendarBasicComp = class extends CalendarBasicComp {
+  override autoHeight(): boolean {
+    return false;
+  }
+};
+
+export const CalendarComp = withExposingConfigs(CalendarBasicComp, [
+  new NameConfig("events", trans("calendar.events")),
+  NameConfigHidden,
+]);