lowcoder-comps 0.0.7 → 0.0.8

package/src/comps/imageEditorComp/imageEditorConstants.tsx

@@ -0,0 +1,109 @@
+import styled from "styled-components";
+import { Button } from "antd";
+import { EventConfigType } from "lowcoder-sdk";
+import { trans } from "i18n/comps";
+
+export const saveEvent: EventConfigType = {
+  label: trans("imageEditor.save"),
+  value: "save",
+  description: trans("imageEditor.saveDesc"),
+};
+
+export const Container = styled.div`
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .tui-image-editor-container.top .tui-image-editor-controls-logo {
+    display: none;
+  }
+  .tui-image-editor-container .tui-image-editor-header-logo,
+  .tui-image-editor-container .tui-image-editor-controls-logo {
+    display: none;
+  }
+  .tui-image-editor-container .tui-image-editor-header-buttons button,
+  .tui-image-editor-container .tui-image-editor-header-buttons div,
+  .tui-image-editor-container .tui-image-editor-controls-buttons button,
+  .tui-image-editor-container .tui-image-editor-controls-buttons div {
+    display: none;
+  }
+  .tie-btn-hand {
+    display: none !important;
+  }
+  .tui-image-editor-container .tui-image-editor-menu,
+  .tui-image-editor-container .tui-image-editor-help-menu {
+    background-color: #f3f4f6 !important;
+  }
+`;
+
+export const EmbeddedButton = styled(Button)`
+  position: absolute;
+  right: 8px;
+  bottom: 4px;
+  z-index: 100;
+`;
+
+export const customTheme = {
+  // image
+  "common.bi.image": "",
+  "common.bisize.width": "0px",
+  "common.bisize.height": "0px",
+  "common.backgroundImage": "none",
+  "common.backgroundColor": "#f3f4f6",
+  "common.border": "1px solid #444",
+
+  // header
+  "header.backgroundImage": "none",
+  "header.backgroundColor": "#f3f4f6",
+  "header.border": "0px",
+  "header.display": "none",
+
+  // icons default
+  "menu.normalIcon.color": "#8a8a8a",
+  "menu.activeIcon.color": "#555555",
+  "menu.disabledIcon.color": "#434343",
+  "menu.hoverIcon.color": "#e9e9e9",
+  "submenu.normalIcon.color": "#8a8a8a",
+  "submenu.activeIcon.color": "#e9e9e9",
+
+  "menu.iconSize.width": "24px",
+  "menu.iconSize.height": "24px",
+  "submenu.iconSize.width": "32px",
+  "submenu.iconSize.height": "32px",
+
+  // submenu primary color
+  "submenu.backgroundColor": "#1e1e1e",
+  "submenu.partition.color": "#858585",
+
+  // submenu labels
+  "submenu.normalLabel.color": "#858585",
+  "submenu.normalLabel.fontWeight": "lighter",
+  "submenu.activeLabel.color": "#fff",
+  "submenu.activeLabel.fontWeight": "lighter",
+
+  // checkbox style
+  "checkbox.border": "1px solid #ccc",
+  "checkbox.backgroundColor": "#fff",
+
+  // rango style
+  "range.pointer.color": "#fff",
+  "range.bar.color": "#666",
+  "range.subbar.color": "#d1d1d1",
+
+  "range.disabledPointer.color": "#414141",
+  "range.disabledBar.color": "#282828",
+  "range.disabledSubbar.color": "#414141",
+
+  "range.value.color": "#fff",
+  "range.value.fontWeight": "lighter",
+  "range.value.fontSize": "11px",
+  "range.value.border": "1px solid #353535",
+  "range.value.backgroundColor": "#151515",
+  "range.title.color": "#fff",
+  "range.title.fontWeight": "lighter",
+
+  // colorpicker style
+  "colorpicker.button.border": "1px solid #1e1e1e",
+  "colorpicker.title.color": "#fff",
+};

package/src/comps/imageEditorComp/index.tsx

@@ -0,0 +1,184 @@
+import {
+  BoolControl,
+  hiddenPropertyView,
+  NameConfig,
+  Section,
+  sectionNames,
+  StringStateControl,
+  UICompBuilder,
+  withDefault,
+  withExposingConfigs,
+  eventHandlerControl,
+  NameConfigHidden,
+  stringExposingStateControl,
+} from "lowcoder-sdk";
+import { useRef } from "react";
+import ReactResizeDetector from "react-resize-detector";
+import _ from "lodash";
+import { RecordConstructorToView } from "lowcoder-core";
+import { Container, customTheme, EmbeddedButton, saveEvent } from "./imageEditorConstants";
+import { ImageEditor } from "./imageEditorClass";
+import { i18nObjs, trans } from "i18n/comps";
+
+const childrenMap = {
+  src: withDefault(StringStateControl, trans("imageEditor.defaultSrc")),
+  name: withDefault(StringStateControl, "Example"),
+  crop: withDefault(BoolControl, true),
+  flip: withDefault(BoolControl, true),
+  rotate: withDefault(BoolControl, true),
+  draw: withDefault(BoolControl, true),
+  shape: withDefault(BoolControl, true),
+  icon: withDefault(BoolControl, true),
+  text: withDefault(BoolControl, true),
+  mask: withDefault(BoolControl, true),
+  filter: withDefault(BoolControl, true),
+  dataURI: stringExposingStateControl("dataURI"),
+  data: stringExposingStateControl("data"),
+  onEvent: eventHandlerControl([saveEvent] as const),
+  buttonText: withDefault(StringStateControl, trans("imageEditor.save")),
+};
+
+const ContainerImageEditor = (props: RecordConstructorToView<typeof childrenMap>) => {
+  const editorRef = useRef<any>(null);
+  const conRef = useRef<HTMLDivElement>(null);
+
+  const menu = ["crop", "flip", "rotate", "draw", "shape", "icon", "text", "mask", "filter"];
+  const menuMap = new Map<string, boolean>();
+  menuMap.set("crop", props.crop);
+  menuMap.set("flip", props.flip);
+  menuMap.set("rotate", props.rotate);
+  menuMap.set("draw", props.draw);
+  menuMap.set("shape", props.shape);
+  menuMap.set("icon", props.icon);
+  menuMap.set("text", props.text);
+  menuMap.set("mask", props.mask);
+  menuMap.set("filter", props.filter);
+  let filteredMenu = menu.filter((ele) => {
+    return menuMap.get(ele);
+  });
+  const onResize = () => {
+    const editor = editorRef.current;
+    const container = conRef.current;
+    editor.imageEditorInst.ui.resizeEditor({
+      uiSize: { width: container?.clientWidth, height: container?.clientHeight },
+    });
+  };
+
+  const saveImage = () => {
+    let imageEditorInst = editorRef.current.imageEditorInst;
+    let dataURL = imageEditorInst.toDataURL();
+    props.dataURI.onChange(dataURL);
+    props.data.onChange(dataURL.split(",")[1]);
+  };
+  return (
+    <Container ref={conRef}>
+      <EmbeddedButton
+        type="primary"
+        onClick={() => {
+          saveImage();
+          props.onEvent("save");
+        }}
+      >
+        {props.buttonText.value}
+      </EmbeddedButton>
+      <ReactResizeDetector onResize={onResize}>
+        <div style={{ width: "100%", height: "100%" }}>
+          <ImageEditor
+            ref={editorRef}
+            includeUI={{
+              loadImage: {
+                path: props.src.value,
+                name: props.name.value,
+              },
+              menu: filteredMenu,
+              theme: customTheme,
+              uiSize: {
+                width: "100%",
+                height: "100%",
+              },
+              menuBarPosition: "bottom",
+              locale: i18nObjs.imageEditorLocale ?? {},
+            }}
+            cssMaxWidth={document.documentElement.clientWidth}
+            cssMaxHeight={document.documentElement.clientHeight}
+            selectionStyle={{
+              cornerSize: 50,
+              rotatingPointOffset: 100,
+            }}
+            usageStatistics={false}
+          />
+        </div>
+      </ReactResizeDetector>
+    </Container>
+  );
+};
+let ImageEditorBasicComp = (function () {
+  return new UICompBuilder(childrenMap, (props) => {
+    return <ContainerImageEditor {...props} />;
+  })
+    .setPropertyViewFn((children) => {
+      return (
+        <>
+          <Section name={sectionNames.basic}>
+            {children.src.propertyView({
+              label: trans("imageEditor.src"),
+              placeholder: "http://xxx.jpg",
+            })}
+            {children.name.propertyView({
+              label: trans("imageEditor.name"),
+            })}
+            {children.buttonText.propertyView({
+              label: trans("imageEditor.buttonText"),
+            })}
+          </Section>
+          <Section name={sectionNames.interaction}>{children.onEvent.getPropertyView()}</Section>
+          <Section name={sectionNames.advanced}>
+            {children.crop.propertyView({
+              label: "Crop",
+            })}
+            {children.flip.propertyView({
+              label: "Flip",
+            })}
+            {children.rotate.propertyView({
+              label: "Rotate",
+            })}
+            {children.draw.propertyView({
+              label: "Draw",
+            })}
+            {children.shape.propertyView({
+              label: "Shape",
+            })}
+            {children.icon.propertyView({
+              label: "Icon",
+            })}
+            {children.text.propertyView({
+              label: "Text",
+            })}
+            {children.mask.propertyView({
+              label: "Mask",
+            })}
+            {children.filter.propertyView({
+              label: "Filter",
+            })}
+          </Section>
+          <Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
+        </>
+      );
+    })
+    .build();
+})();
+
+ImageEditorBasicComp = class extends ImageEditorBasicComp {
+  override autoHeight(): boolean {
+    return false;
+  }
+};
+
+export const ImageEditorComp = withExposingConfigs(ImageEditorBasicComp, [
+  new NameConfig("src", trans("imageEditor.srcDesc")),
+  new NameConfig("name", trans("imageEditor.nameDesc")),
+  new NameConfig("dataURI", trans("imageEditor.dataURIDesc")),
+  new NameConfig("data", trans("imageEditor.dataDesc")),
+  new NameConfig("buttonText", trans("imageEditor.buttonTextDesc")),
+  NameConfigHidden,
+]);

package/src/comps/mermaidComp/index.tsx

@@ -0,0 +1,44 @@
+import {
+  UICompBuilder,
+  Section,
+  withExposingConfigs,
+  stringExposingStateControl,
+  NameConfig,
+  eventHandlerControl,
+  withMethodExposing,
+} from "lowcoder-sdk";
+
+import Mermaid from "./mermaid";
+
+const childrenMap = {
+  code: stringExposingStateControl(
+    "code",
+    `graph LR
+   Start --> Stop`
+  ),
+  onEvent: eventHandlerControl([
+    {
+      label: "onChange",
+      value: "change",
+      description: "",
+    },
+  ]),
+};
+
+const CompBase = new UICompBuilder(childrenMap, (props: any) => {
+  const code = props.code.value;
+  return <Mermaid code={code} />;
+})
+  .setPropertyViewFn((children: any) => {
+    return (
+      <>
+        <Section name="Basic">{children.code.propertyView({ label: "code" })}</Section>
+        <Section name="Interaction">{children.onEvent.propertyView()}</Section>
+      </>
+    );
+  })
+  .build();
+
+const AppViewCompTemp = withMethodExposing(CompBase, []);
+
+export const MermaidComp = withExposingConfigs(AppViewCompTemp, [new NameConfig("code", "")]);

package/src/comps/mermaidComp/mermaid.tsx

@@ -0,0 +1,29 @@
+import React, { useEffect, useState } from "react";
+import mermaid from "mermaid";
+
+function escape(str: string): string {
+  const entries: { [index: string]: any } = { lt: "<", gt: ">", nbsp: " ", amp: "&", quot: '"' };
+  return str
+    .replace(/&(lt|gt|nbsp|amp|quot);/gi, function (_, t) {
+      return entries[t];
+    })
+    .trim();
+}
+
+export default ({ id = "graphDiv", code = "" }) => {
+  const [svg, setSvg] = useState("");
+
+  useEffect(() => {
+    mermaid.initialize({ startOnLoad: false });
+  }, []);
+
+  useEffect(() => {
+    if (!code) return;
+
+    mermaid.mermaidAPI.render(id, escape(code)).then((res) => {
+      setSvg(res.svg);
+    });
+  }, [code, setSvg]);
+
+  return <pre className="mermaid" dangerouslySetInnerHTML={{ __html: svg }}></pre>;
+};

package/src/global.ts

@@ -0,0 +1 @@
+import "../../lowcoder/src/global";

package/src/i18n/comps/index.tsx

@@ -0,0 +1,29 @@
+import { getI18nObjects, getValueByLocale, Translator } from "lowcoder-core";
+import * as localeData from "./locales";
+import { I18nObjects } from "./locales/types";
+
+export const { trans, language } = new Translator<typeof localeData.en>(
+  localeData,
+  REACT_APP_LANGUAGES
+);
+export const i18nObjs = getI18nObjects<I18nObjects>(localeData, REACT_APP_LANGUAGES);
+
+export function getEchartsLocale() {
+  return getValueByLocale("EN", (locale) => {
+    switch (locale.language) {
+      case "en":
+        return "EN";
+      case "zh":
+        return "ZH";
+    }
+  });
+}
+
+export function getCalendarLocale() {
+  switch (language) {
+    case "zh":
+      return "zh-cn";
+    default:
+      return "en-gb";
+  }
+}

package/src/i18n/comps/locales/en.ts

@@ -0,0 +1,142 @@
+export const en = {
+  chart: {
+    delete: "Delete",
+    data: "Data",
+    mode: "Mode",
+    config: "Configuration",
+    UIMode: "UI Mode",
+    chartType: "Chart type",
+    xAxis: "X-axis",
+    chartSeries: "Chart series",
+    customSeries: "Custom series",
+    add: "Add",
+    confirmDelete: "Confirm Delete: ",
+    seriesName: "Series Name",
+    dataColumns: "Data columns",
+    title: "Title",
+    xAxisDirection: "X axis direction",
+    xAxisName: "X axis name",
+    xAxisType: "X axis type",
+    xAxisTypeTooltip:
+      "By default, it will be automatically detected according to X-axis data. For the type description, please refer to: ",
+    logBase: "LogBase",
+    yAxisName: "Y axis name",
+    yAxisType: "Y axis type",
+    yAxisDataFormat: "Y axis data type",
+    yAxisDataFormatTooltip: `Value indicates the value of each coordinate. Example: '{{value * 100 + "%"}}'`,
+    basicBar: "Basic bar",
+    stackedBar: "Stacked bar",
+    barType: "Bar chart type",
+    categoryAxis: "Category axis",
+    valueAxis: "Value axis",
+    timeAxis: "Time axis",
+    logAxis: "Log axis",
+    auto: "Default",
+    legendPosition: "Legend position",
+    basicLine: "Basic line",
+    stackedLine: "Stacked line",
+    areaLine: "Area line",
+    smooth: "Smooth curve",
+    lineType: "Line chart type",
+    basicPie: "Basic pie",
+    doughnutPie: "Doughnut pie",
+    rosePie: "Rose pie",
+    pieType: "Pie chart type",
+    spending: "Spending",
+    budget: "Budget",
+    bar: "Bar chart",
+    line: "Line chart",
+    scatter: "Scatter chart",
+    pie: "Pie chart",
+    horizontal: "Horizontal",
+    vertical: "Vertical",
+    noData: "No data",
+    unknown: "Unknown",
+    select: "Select",
+    unSelect: "Unselect",
+    echartsOptionLabel: "Option",
+    echartsOptionTooltip: "ECharts option",
+    echartsOptionExamples: "ECharts examples",
+    selectDesc: "Triggered when the user selects part of the data in the chart",
+    unselectDesc: "Triggered when the user unselects part of the data in the chart",
+    selectedPointsDesc: "Selected points",
+    dataDesc: "The raw data used in the current chart",
+    titleDesc: "Current chart title",
+    scatterShape: "Scatter shape",
+    circle: "Circle",
+    rect: "Rect",
+    triangle: "Triangle",
+    diamond: "Diamond",
+    pin: "Pin",
+    arrow: "Arrow",
+    pointColorLabel: "Point color",
+    pointColorTooltip: `Set the point color according to the series name and current point value, optional variables: seriesName, value. Example: '{{value < 25000 ? "red" : "green"}}'`,
+  },
+  imageEditor: {
+    defaultSrc: "",
+    save: "Save",
+    saveDesc: "Save image",
+    src: "Image source",
+    name: "Image name",
+    buttonText: "Button text",
+    srcDesc: "Image source",
+    nameDesc: "Image name",
+    dataURIDesc: "Image data URI",
+    dataDesc: "Image data",
+    buttonTextDesc: "Button text",
+  },
+  calendar: {
+    events: "Events data",
+    editable: "Editable",
+    defaultDate: "Default date",
+    defaultDateTooltip: "The date that the calendar initially displays",
+    defaultView: "Default view",
+    defaultViewTooltip: "The view that the calendar initially displays",
+    showEventTime: "Show event times",
+    showEventTimeTooltip: "Whether to display the time text of the event",
+    showWeekends: "Show weekends",
+    showAllDay: "Show all-day",
+    showAllDayTooltip: "Whether to display the all-day slot in the week and day views",
+    dayMaxEvents: "Day max events",
+    dayMaxEventsTooltip:
+      "The maximum number of events to display in the month view per day, with 0 being limited to the height of the cell",
+    eventMaxStack: "Event max stack",
+    eventMaxStackTooltip:
+      "The maximum number of events to stack horizontally in the week and day views, with 0 being no limit",
+    selectInterval: "The interval selected on the calendar",
+    selectEvent: "Selected event",
+    changeSet:
+      "The event object changed by dragging in the calendar, the key is the eventId, and the value is the event",
+    headerBtnBackground: "Button background",
+    btnText: "Button text",
+    title: "Title",
+    selectBackground: "Selected background",
+    today: "Today",
+    month: "Month",
+    week: "Week",
+    day: "Day",
+    list: "List",
+    monday: "Monday",
+    tuesday: "Tuesday",
+    wednesday: "Wednesday",
+    thursday: "Thursday",
+    friday: "Friday",
+    saturday: "Saturday",
+    sunday: "Sunday",
+    startWeek: "Start from",
+    creatEvent: "Create event",
+    editEvent: "Edit event",
+    eventName: "Event name",
+    eventColor: "Event color",
+    eventGroupId: "Group ID",
+    groupIdTooltip:
+      "Group ID is used to group different events, and events in the same group can be dragged and resized together.",
+    more: "more",
+    allDay: "All day",
+    eventNameRequire: "Please enter Event name",
+    eventId: "Event ID",
+    eventIdRequire: "Please enter Event ID",
+    eventIdTooltip: "Unique ID for each event",
+    eventIdExist: "ID already exists",
+  },
+};

package/src/i18n/comps/locales/enObj.tsx

@@ -0,0 +1,120 @@
+import { I18nObjects } from "./types";
+import { chartColorPalette } from "lowcoder-sdk";
+
+export const enObj: I18nObjects = {
+  defaultDataSource: [
+    {
+      date: "2021-09",
+      department: "Administration",
+      spending: 9003,
+      budget: 8000,
+    },
+    {
+      date: "2021-09",
+      department: "Finance",
+      spending: 3033,
+      budget: 4000,
+    },
+    {
+      date: "2021-09",
+      department: "Sales",
+      spending: 9230,
+      budget: 8000,
+    },
+    {
+      date: "2021-10",
+      department: "Administration",
+      spending: 13032,
+      budget: 15000,
+    },
+    {
+      date: "2021-10",
+      department: "Finance",
+      spending: 2300,
+      budget: 5000,
+    },
+    {
+      date: "2021-10",
+      department: "Sales",
+      spending: 7323.5,
+      budget: 8000,
+    },
+    {
+      date: "2021-11",
+      department: "Administration",
+      spending: 13000,
+      budget: 16023,
+    },
+    {
+      date: "2021-11",
+      department: "Finance",
+      spending: 3569.5,
+      budget: 3000,
+    },
+    {
+      date: "2021-11",
+      department: "Sales",
+      spending: 10000,
+      budget: 9932,
+    },
+    {
+      date: "2021-12",
+      department: "Administration",
+      spending: 18033,
+      budget: 20000,
+    },
+    {
+      date: "2021-12",
+      department: "Finance",
+      spending: 4890,
+      budget: 4500,
+    },
+    {
+      date: "2021-12",
+      department: "Sales",
+      spending: 9322,
+      budget: 8000,
+    },
+  ],
+
+  defaultEchartsJsonOption: {
+    title: {
+      text: "Funnel Chart",
+      left: "center",
+    },
+    backgroundColor: "#ffffff",
+    color: chartColorPalette,
+    tooltip: {
+      trigger: "item",
+      formatter: "{a} <br/>{b} : {c}%",
+    },
+    legend: {
+      data: ["Show", "Click", "Visit", "Query", "Buy"],
+      top: "bottom",
+    },
+    series: [
+      {
+        name: "Funnel",
+        type: "funnel",
+        left: "10%",
+        top: 60,
+        bottom: 60,
+        width: "80%",
+        min: 0,
+        max: 100,
+        gap: 2,
+        label: {
+          show: true,
+          position: "inside",
+        },
+        data: [
+          { value: 100, name: "Show" },
+          { value: 80, name: "Click" },
+          { value: 60, name: "Visit" },
+          { value: 40, name: "Query" },
+          { value: 20, name: "Buy" },
+        ],
+      },
+    ],
+  },
+};

package/src/i18n/comps/locales/index.ts

@@ -0,0 +1,7 @@
+// file examples: en, enGB, zh, zhHK
+// fallback example: current locale is zh-HK, fallback order is zhHK => zh => en
+export * from "./en";
+export * from "./zh";
+
+export * from "./enObj";
+export * from "./zhObj";

package/src/i18n/comps/locales/types.tsx

@@ -0,0 +1,9 @@
+import { JSONObject } from "lowcoder-sdk";
+import { XAXisComponentOption } from "echarts";
+
+export type I18nObjects = {
+  defaultDataSource: JSONObject[];
+  defaultEchartsJsonOption: Record<string, unknown>;
+  timeXAxisLabel?: XAXisComponentOption["axisLabel"];
+  imageEditorLocale?: Record<string, string>;
+};

package/src/i18n/comps/locales/zh.ts

@@ -0,0 +1,4 @@
+import { en } from "./en";
+
+export const zh: typeof en | undefined = undefined;
+

package/src/i18n/comps/locales/zhObj.tsx

@@ -0,0 +1,4 @@
+import { I18nObjects } from "./types";
+
+export const zhObj: I18nObjects | undefined = undefined;
+