lowcoder-comps 0.0.10 → 0.0.12

package/src/comps/imageEditorComp/imageEditorConstants.tsx

@@ -1,109 +0,0 @@
-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

@@ -1,184 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

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

package/src/i18n/comps/index.tsx

@@ -1,29 +0,0 @@
-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

@@ -1,142 +0,0 @@
-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

@@ -1,120 +0,0 @@
-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

@@ -1,7 +0,0 @@
-// 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

@@ -1,9 +0,0 @@
-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

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

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

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