lowcoder-comps 0.0.18 → 0.0.19

package/src/comps/chartComp/reactEcharts/index.ts

@@ -0,0 +1,21 @@
+import * as echarts from "echarts";
+import "echarts-wordcloud";
+import { EChartsReactProps, EChartsInstance, EChartsOptionWithMap } from "./types";
+import EChartsReactCore from "./core";
+
+/**
+ * reference: https://github.com/hustcc/echarts-for-react
+ * add exception-catch for setOption
+ * if query isn't successfully loaded, chart will fail to load and can't reload
+ */
+export type { EChartsReactProps, EChartsOptionWithMap, EChartsInstance };
+
+// export the Component the echarts Object.
+export default class EChartsReact extends EChartsReactCore {
+  constructor(props: EChartsReactProps) {
+    super(props);
+
+    // initialize as echarts package
+    this.echarts = echarts;
+  }
+}

package/src/comps/chartComp/reactEcharts/types.ts

@@ -0,0 +1,76 @@
+import { CSSProperties } from "react";
+import { EChartsOption } from "echarts";
+import { GoogleMapComponentOption } from "echarts-extension-gmap";
+
+export type EChartsOptionWithMap = EChartsOption & GoogleMapComponentOption<any>;
+
+export type EChartsInstance = any;
+
+export type Opts = {
+  readonly devicePixelRatio?: number;
+  readonly renderer?: "canvas" | "svg";
+  readonly width?: number | null | undefined | "auto";
+  readonly height?: number | null | undefined | "auto";
+  readonly locale?: string;
+};
+
+export type EChartsReactProps = {
+  /**
+   * echarts library entry, use it for import necessary.
+   */
+  readonly echarts?: any;
+  /**
+   * `className` for container
+   */
+  readonly className?: string;
+  /**
+   * `style` for container
+   */
+  readonly style?: CSSProperties;
+  /**
+   * echarts option
+   */
+  readonly option: EChartsOptionWithMap;
+  /**
+   * echarts theme config, can be:
+   * 1. theme name string
+   * 2. theme object
+   */
+  readonly theme?: string | Record<string, any>;
+  /**
+   * notMerge config for echarts, default is `false`
+   */
+  readonly notMerge?: boolean;
+  /**
+   * lazyUpdate config for echarts, default is `false`
+   */
+  readonly lazyUpdate?: boolean;
+  /**
+   * showLoading config for echarts, default is `false`
+   */
+  readonly showLoading?: boolean;
+  /**
+   * loadingOption config for echarts, default is `null`
+   */
+  readonly loadingOption?: any;
+  /**
+   * echarts opts config, default is `{}`
+   */
+  readonly opts?: Opts;
+  /**
+   * when after chart reander, do the callback widht echarts instance
+   */
+  readonly onChartReady?: (instance: EChartsInstance) => void;
+  /**
+   * bind events, default is `{}`
+   */
+  readonly onEvents?: Record<string, Function>;
+  /**
+   * should update echarts options
+   */
+  readonly shouldSetOption?: (prevProps: EChartsReactProps, props: EChartsReactProps) => boolean;
+  /** 
+   * echarts mode: ui | json | map 
+  */
+  readonly mode?: 'ui' | 'json' | 'map'
+};

package/src/comps/chartComp/seriesComp.tsx

@@ -0,0 +1,119 @@
+import {
+  BoolControl,
+  StringControl,
+  list,
+  JSONObject,
+  isNumeric,
+  genRandomKey,
+  Dropdown,
+  OptionsType,
+  MultiCompBuilder,
+  valueComp,
+} from "lowcoder-sdk";
+import { trans } from "i18n/comps";
+
+import { ConstructorToComp, ConstructorToDataType, ConstructorToView } from "lowcoder-core";
+import { CompAction, CustomAction, customAction, isMyCustomAction } from "lowcoder-core";
+
+export type SeriesCompType = ConstructorToComp<typeof SeriesComp>;
+export type RawSeriesCompType = ConstructorToView<typeof SeriesComp>;
+type SeriesDataType = ConstructorToDataType<typeof SeriesComp>;
+
+type ActionDataType = {
+  type: "chartDataChanged";
+  chartData: Array<JSONObject>;
+};
+
+export function newSeries(name: string, columnName: string): SeriesDataType {
+  return {
+    seriesName: name,
+    columnName: columnName,
+    dataIndex: genRandomKey(),
+  };
+}
+
+const seriesChildrenMap = {
+  columnName: StringControl,
+  seriesName: StringControl,
+  hide: BoolControl,
+  // unique key, for sort
+  dataIndex: valueComp<string>(""),
+};
+
+const SeriesTmpComp = new MultiCompBuilder(seriesChildrenMap, (props) => {
+  return props;
+})
+  .setPropertyViewFn(() => {
+    return <></>;
+  })
+  .build();
+
+class SeriesComp extends SeriesTmpComp {
+  getPropertyViewWithData(columnOptions: OptionsType): React.ReactNode {
+    return (
+      <>
+        {this.children.seriesName.propertyView({
+          label: trans("chart.seriesName"),
+        })}
+        <Dropdown
+          value={this.children.columnName.getView()}
+          options={columnOptions}
+          label={trans("chart.dataColumns")}
+          onChange={(value) => {
+            this.children.columnName.dispatchChangeValueAction(value);
+          }}
+        />
+      </>
+    );
+  }
+}
+
+const SeriesListTmpComp = list(SeriesComp);
+
+export class SeriesListComp extends SeriesListTmpComp {
+  override reduce(action: CompAction): this {
+    if (isMyCustomAction<ActionDataType>(action, "chartDataChanged")) {
+      // auto generate series
+      const actions = this.genExampleSeriesActions(action.value.chartData);
+      return this.reduce(this.multiAction(actions));
+    }
+    return super.reduce(action);
+  }
+
+  private genExampleSeriesActions(chartData: Array<JSONObject>) {
+    const actions: CustomAction[] = [];
+    if (!chartData || chartData.length <= 0 || !chartData[0]) {
+      return actions;
+    }
+    let delCnt = 0;
+    const existColumns = this.getView().map((s) => s.getView().columnName);
+    // delete series not in data
+    existColumns.forEach((columnName) => {
+      if (chartData[0]?.[columnName] === undefined) {
+        actions.push(this.deleteAction(0));
+        delCnt++;
+      }
+    });
+    if (existColumns.length > delCnt) {
+      // don't generate example if exists
+      return actions;
+    }
+    // generate example series
+    const exampleKeys = Object.keys(chartData[0])
+      .filter((key) => {
+        return !existColumns.includes(key) && isNumeric(chartData[0][key]);
+      })
+      .slice(0, 3);
+    exampleKeys.forEach((key) => actions.push(this.pushAction(newSeries(key, key))));
+    return actions;
+  }
+
+  dispatchDataChanged(chartData: Array<JSONObject>): void {
+    this.dispatch(
+      customAction<ActionDataType>({
+        type: "chartDataChanged",
+        chartData: chartData,
+      })
+    );
+  }
+}

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 { 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";
+  }
+}