npm - lowcoder-comps - Versions diffs - 0.0.17 → 0.0.19 - Mend

lowcoder-comps 0.0.17 → 0.0.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (78) hide show

package/README.md +27 -0
package/index.html +26 -0
package/index.tsx +19 -0
package/jest.config.js +6 -0
package/package.json +4 -5
package/src/__test__/allComp.test.tsx +61 -0
package/src/app-env.d.ts +3 -0
package/src/comps/calendarComp/calendarComp.tsx +443 -0
package/src/comps/calendarComp/calendarConstants.tsx +898 -0
package/src/comps/chartComp/chartComp.tsx +356 -0
package/src/comps/chartComp/chartConfigs/barChartConfig.tsx +51 -0
package/src/comps/chartComp/chartConfigs/cartesianAxisConfig.tsx +307 -0
package/src/comps/chartComp/chartConfigs/chartUrls.tsx +9 -0
package/src/comps/chartComp/chartConfigs/legendConfig.tsx +55 -0
package/src/comps/chartComp/chartConfigs/lineChartConfig.tsx +96 -0
package/src/comps/chartComp/chartConfigs/pieChartConfig.tsx +83 -0
package/src/comps/chartComp/chartConfigs/scatterChartConfig.tsx +62 -0
package/src/comps/chartComp/chartConstants.tsx +288 -0
package/src/comps/chartComp/chartPropertyView.tsx +218 -0
package/src/comps/chartComp/chartUtils.ts +291 -0
package/src/comps/chartComp/reactEcharts/core.tsx +194 -0
package/src/comps/chartComp/reactEcharts/index.ts +21 -0
package/src/comps/chartComp/reactEcharts/types.ts +76 -0
package/src/comps/chartComp/seriesComp.tsx +119 -0
package/src/comps/imageEditorComp/imageEditorClass.tsx +52 -0
package/src/comps/imageEditorComp/imageEditorConstants.tsx +109 -0
package/src/comps/imageEditorComp/index.tsx +184 -0
package/src/comps/mermaidComp/index.tsx +44 -0
package/src/comps/mermaidComp/mermaid.tsx +29 -0
package/src/global.ts +1 -0
package/src/i18n/comps/index.tsx +29 -0
package/src/i18n/comps/locales/en.ts +150 -0
package/src/i18n/comps/locales/enObj.tsx +198 -0
package/src/i18n/comps/locales/index.ts +7 -0
package/src/i18n/comps/locales/types.tsx +10 -0
package/src/i18n/comps/locales/zh.ts +145 -0
package/src/i18n/comps/locales/zhObj.tsx +4 -0
package/src/index.ts +11 -0
package/tsconfig.json +22 -0
package/vite.config.js +10 -0
package/001f8b13.js +0 -326
package/085bf0c2.js +0 -46688
package/256b619e.js +0 -92
package/29cba276.js +0 -91
package/2e18581a.js +0 -451
package/2ff2c7a6.js +0 -6
package/340c33ea.js +0 -1602
package/3ad55ad7.js +0 -607
package/47b0b0ff.js +0 -70
package/4a5b6fbe.js +0 -798
package/4abe140e.js +0 -943
package/4cf5b178.js +0 -34
package/5cab7b96.js +0 -18619
package/626b9013.js +0 -7
package/6798500f.js +0 -793
package/68b021d0.js +0 -2456
package/6ab1612a.js +0 -24
package/6e903063.js +0 -940
package/72a7048f.js +0 -849
package/7902f186.js +0 -823
package/82c1c410.js +0 -86
package/8517f7c1.js +0 -365
package/9495ef3b.js +0 -1118
package/9ea1ddd6.js +0 -447
package/a01c9944.js +0 -212
package/a4ce7e8a.js +0 -2827
package/ad68bdd0.js +0 -236
package/b499e5a9.js +0 -2103
package/bdc7b18a.js +0 -1032
package/be5b66cd.js +0 -832
package/c4378831.js +0 -117175
package/ca8f4e3f.js +0 -275
package/de61c633.js +0 -2679
package/e04788e2.js +0 -159
package/f9637058.js +0 -16
package/f9a47b7c.js +0 -985
package/ff16c2ec.js +0 -1246
package/index.js +0 -5

package/README.md ADDED Viewed

@@ -0,0 +1,27 @@
+# lowcoder comp lib
+## Start
+Start dev server to develop your comp lib.
+```bash
+yarn start
+# or
+npm start
+```
+## Build
+Build current comp lib into a .tgz file that you can upload it to the Lowcoder Comp Market.
+Before build you should change the version in package.json file.
+```bash
+yarn build
+# or
+npm run build
+```

package/index.html ADDED Viewed

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Lowcoder Comp Playground</title>
+    <style>
+      #root {
+        height: 100vh;
+      }
+      #root-loader {
+        height: 100vh;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root">
+      <div id="root-loader">Loading...</div>
+    </div>
+    <script src="index.tsx" type="module"></script>
+  </body>
+</html>

package/index.tsx ADDED Viewed

@@ -0,0 +1,19 @@
+import ReactDOM from "react-dom";
+import { CompIDE } from "lowcoder-sdk";
+import { name, version, lowcoder } from "./package.json";
+import compMap from "./src/index";
+import "lowcoder-sdk/dist/style.css";
+function CompDevApp() {
+  return (
+    <CompIDE
+      compMap={compMap}
+      packageName={name}
+      packageVersion={version}
+      compMeta={lowcoder.comps}
+    />
+  );
+}
+ReactDOM.render(<CompDevApp />, document.querySelector("#root"));

package/jest.config.js ADDED Viewed

@@ -0,0 +1,6 @@
+import config from "../../config/test/jest.config.js";
+export default {
+  ...config,
+  setupFiles: [...config.setupFiles, 'jest-canvas-mock'],
+};

package/package.json CHANGED Viewed

@@ -1,13 +1,13 @@
 {
   "name": "lowcoder-comps",
-  "version": "0.0.17",
+  "version": "0.0.19",
   "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/list": "^6.1.9",
     "@fullcalendar/moment": "^6.1.6",
     "@fullcalendar/react": "^6.1.6",
     "@fullcalendar/timegrid": "^6.1.6",
@@ -58,8 +58,7 @@
           "h": 40
         }
       }
-    },
-    "entry": "index.js"
+    }
   },
   "scripts": {
     "start": "vite",
@@ -74,4 +73,4 @@
     "vite": "^4.3.9",
     "vite-tsconfig-paths": "^3.6.0"
   }
-}
+}

package/src/__test__/allComp.test.tsx ADDED Viewed

@@ -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 ADDED Viewed

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

package/src/comps/calendarComp/calendarComp.tsx ADDED Viewed

@@ -0,0 +1,443 @@
+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 dayjs from "dayjs";
+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: dayjs(item.start, DateParser).format(),
+        end: dayjs(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 = 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}`}
+          isList={isList}
+          bg={eventInfo.backgroundColor}
+          theme={theme?.theme}
+          allDay={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();
+          });
+        },
+        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 = 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.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,
+]);