npm - lowcoder-comps - Versions diffs - 0.0.10 → 0.0.11 - Mend

lowcoder-comps 0.0.10 → 0.0.11

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 (41) hide show

package/index.js +91356 -0
package/package.json +4 -3
package/README.md +0 -27
package/index.html +0 -26
package/index.tsx +0 -19
package/jest.config.js +0 -5
package/src/__test__/allComp.test.tsx +0 -61
package/src/app-env.d.ts +0 -3
package/src/comps/calendarComp/calendarComp.tsx +0 -442
package/src/comps/calendarComp/calendarConstants.tsx +0 -897
package/src/comps/chartComp/chartComp.tsx +0 -249
package/src/comps/chartComp/chartConfigs/barChartConfig.tsx +0 -51
package/src/comps/chartComp/chartConfigs/cartesianAxisConfig.tsx +0 -307
package/src/comps/chartComp/chartConfigs/chartUrls.tsx +0 -6
package/src/comps/chartComp/chartConfigs/legendConfig.tsx +0 -55
package/src/comps/chartComp/chartConfigs/lineChartConfig.tsx +0 -96
package/src/comps/chartComp/chartConfigs/pieChartConfig.tsx +0 -83
package/src/comps/chartComp/chartConfigs/scatterChartConfig.tsx +0 -62
package/src/comps/chartComp/chartConstants.tsx +0 -243
package/src/comps/chartComp/chartPropertyView.tsx +0 -161
package/src/comps/chartComp/chartUtils.ts +0 -240
package/src/comps/chartComp/reactEcharts/core.tsx +0 -187
package/src/comps/chartComp/reactEcharts/index.ts +0 -20
package/src/comps/chartComp/reactEcharts/types.ts +0 -70
package/src/comps/chartComp/seriesComp.tsx +0 -119
package/src/comps/imageEditorComp/imageEditorClass.tsx +0 -52
package/src/comps/imageEditorComp/imageEditorConstants.tsx +0 -109
package/src/comps/imageEditorComp/index.tsx +0 -184
package/src/comps/mermaidComp/index.tsx +0 -44
package/src/comps/mermaidComp/mermaid.tsx +0 -29
package/src/global.ts +0 -1
package/src/i18n/comps/index.tsx +0 -29
package/src/i18n/comps/locales/en.ts +0 -142
package/src/i18n/comps/locales/enObj.tsx +0 -120
package/src/i18n/comps/locales/index.ts +0 -7
package/src/i18n/comps/locales/types.tsx +0 -9
package/src/i18n/comps/locales/zh.ts +0 -4
package/src/i18n/comps/locales/zhObj.tsx +0 -4
package/src/index.ts +0 -9
package/tsconfig.json +0 -22
package/vite.config.js +0 -10

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "lowcoder-comps",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "type": "module",
   "license": "MIT",
   "dependencies": {
@@ -48,7 +48,8 @@
           "h": 60
         }
       }
-    }
+    },
+    "entry": "index.js"
   },
   "scripts": {
     "start": "vite",
@@ -61,4 +62,4 @@
     "vite": "^3.2.4",
     "vite-tsconfig-paths": "^3.6.0"
   }
-}
+}

package/README.md DELETED Viewed

@@ -1,27 +0,0 @@
-# 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 DELETED Viewed

@@ -1,26 +0,0 @@
-<!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 DELETED Viewed

@@ -1,19 +0,0 @@
-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 DELETED Viewed

@@ -1,5 +0,0 @@
-import config from "../../config/test/jest.config.js";
-export default {
-  ...config,
-};

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

@@ -1,61 +0,0 @@
-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 DELETED Viewed

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

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

@@ -1,442 +0,0 @@
-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,
-]);