lowcoder-comps 0.0.29 → 0.0.31

package/src/comps/imageEditorComp/imageEditorClass.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import TuiImageEditor from "tui-image-editor";
+
+export class ImageEditor extends React.Component<any> {
+  rootEl = React.createRef<any>();
+
+  imageEditorInst: TuiImageEditor | undefined;
+  props: any;
+  constructor(props: any) {
+    super(props);
+    this.props = props;
+  }
+  componentDidMount() {
+    if (this.rootEl.current !== null) {
+      this.imageEditorInst = new TuiImageEditor(this.rootEl.current, {
+        ...(this.props as any),
+      });
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.imageEditorInst !== undefined) {
+      this.imageEditorInst.destroy();
+
+      this.imageEditorInst = undefined;
+    }
+  }
+
+  shouldComponentUpdate(nextProps: any) {
+    if (
+      JSON.stringify([this.props.includeUI.menu, this.props.includeUI.loadImage]) !==
+      JSON.stringify([nextProps.includeUI.menu, nextProps.includeUI.loadImage])
+    ) {
+      this.imageEditorInst = new TuiImageEditor(this.rootEl.current as any, {
+        ...nextProps,
+      });
+    }
+    return false;
+  }
+
+  getInstance() {
+    return this.imageEditorInst;
+  }
+
+  getRootElement() {
+    return this.rootEl.current;
+  }
+
+  render() {
+    return <div ref={this.rootEl} />;
+  }
+}

package/src/comps/imageEditorComp/imageEditorConstants.tsx

@@ -0,0 +1,109 @@
+import styled from "styled-components";
+import { default as Button } from "antd/es/button";
+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,163 @@
+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:
+      "Automatically detected based on X-axis data. For type description, refer to: ",
+    logBase: "Log Base",
+    yAxisName: "Y-axis Name",
+    yAxisType: "Y-axis Type",
+    yAxisDataFormat: "Y-axis Data Type",
+    yAxisDataFormatTooltip:
+      "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",
+    echartsMapOptionTooltip: "ECharts Map Option",
+    echartsMapOptionExamples: "ECharts Map Examples",
+    selectDesc: "Triggered when a user selects part of the data in the chart",
+    unselectDesc:
+      "Triggered when a user unselects part of the data in the chart",
+    selectedPointsDesc: "Selected Points",
+    lastInteractionDataDesc: "Last Interaction Data",
+    dataDesc: "JSON Data for the Chart",
+    titleDesc: "Current Chart Title",
+    scatterShape: "Scatter Shape",
+    circle: "Circle",
+    rect: "Rectangle",
+    triangle: "Triangle",
+    diamond: "Diamond",
+    pin: "Pin",
+    arrow: "Arrow",
+    pointColorLabel: "Point Color",
+    pointColorTooltip:
+      'Set point color based on series name and value. Variables: seriesName, value. Example: \'{{value < 25000 ? "red" : "green"}}\'',
+    mapReady: "Map Ready",
+    mapReadyDesc: "Triggers when the map is ready",
+    zoomLevelChange: "Zoom Level Change",
+    zoomLevelChangeDesc: "Triggers when the map zoom level changes",
+    centerPositionChange: "Center Position Change",
+    centerPositionChangeDesc: "Triggers when the map center position changes",
+    chartEventHandlers: "Chart Event Handlers",
+  },
+  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",
+    resources: "Resources",
+    resourcesDefault: "Rooms",
+    resourcesName: "Resource Name",
+    resourcesEvents : "Resources Events Data",
+    editable: "Editable",
+    license: "Licence Key",
+    licenseTooltip: "Get your licence key from https://fullcalendar.io/purchase to enable premium views like Resource Timeline and Resource Grid.",
+    defaultDate: "Default Date",
+    defaultDateTooltip: "Initial display date of the calendar",
+    defaultView: "Default View",
+    defaultViewTooltip: "Initial view of the calendar",
+    showEventTime: "Show Event Times",
+    showEventTimeTooltip: "Display event time text",
+    showWeekends: "Show Weekends",
+    showAllDay: "Show All-Day",
+    showAllDayTooltip: "Display all-day slot in week and day views",
+    dayMaxEvents: "Day Max Events",
+    dayMaxEventsTooltip: "Max events per day in month view, 0 for cell height limit",
+    eventMaxStack: "Event Max Stack",
+    eventMaxStackTooltip: "Max events to stack horizontally in week and day views, 0 for no limit",
+    selectInterval: "Selected Interval",
+    selectEvent: "Selected Event",
+    changeSet: "Changed Event Object",
+    headerBtnBackground: "Button Background",
+    btnText: "Button Text",
+    title: "Title",
+    selectBackground: "Selected Background",
+    today: "Today",
+    month: "Month",
+    week: "Week",
+    weekdaygrid : "Days of Week",
+    daygrid : "Day Events List",
+    year: "Year",
+    day: "Day",
+    list: "Events List",
+    timeline: "Resource Timeline", //added by fred
+    resourceTimeGridDay: "Resource Grid", //added by fred
+    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 groups events for drag and resize together.",
+    more: "More",
+    allDay: "All Day",
+    eventNameRequire: "Enter Event Name",
+    eventId: "Event ID",
+    eventIdRequire: "Enter Event ID",
+    eventIdTooltip: "Unique ID for each event",
+    eventIdExist: "ID Exists",
+    dragDropEventHandlers: "Drag/Drop Event Handlers",
+  },
+};