Merge branch 'dev' into dependabot/npm_and_yarn/client/word-wrap-1.2.4

Author: FalkWolsky

.DS_Store

@@ -6,15 +6,19 @@ updates:
     directory: "/server/api-service"
     schedule:
       interval: "monthly"
+    target-branch: "dev"
   - package-ecosystem: "npm"
     directory: "/server/node-service"
     schedule:
       interval: "monthly"
+    target-branch: "dev"
   - package-ecosystem: "npm"
     directory: "/client"
     schedule:
       interval: "monthly"
+    target-branch: "dev"
   - package-ecosystem: "docker"
     directory: "/deploy/docker"
     schedule:
       interval: "monthly"
+    target-branch: "dev"

.github/dependabot.yml

@@ -6,18 +6,18 @@
 
 #### Use prebuilt docker image
 
-Simply run below command to start a backend server.
+Simply run the below command to start a backend server.
 
 ```bash
 docker run -d --name lowcoder -p 3000:3000 -v "$PWD/stacks:/lowcoder-stacks" lowcoderorg/lowcoder-ce
 ```
 
-For more information, view our [docs](../docs/self-hosting)
+For more information, view our [docs](https://docs.lowcoder.cloud/lowcoder-documentation/setup-and-run/self-hosting)
 
 #### Build Docker image from source
 
-1. Check out source code and change to source dir.
-2. Use the command below to build Docker image :
+1. Check out the source code and change to source dir.
+2. Use the command below to build a Docker image :
 
 ```bash
 docker build -f ./deploy/docker/Dockerfile -t lowcoder-dev .
@@ -31,11 +31,21 @@ docker run -d --name lowcoder-dev -p 3000:3000 -v "$PWD/stacks:/lowcoder-stacks"
 
 ### Start develop
 
-1. Check out source code.
+1. Check out the source code.
 2. Change to client dir in the repository root via cd client.
-3. Run yarn to install dependencies: .
-4. Start dev server: `LOWCODER_API_SERVICE_URL=http://localhost:3000 yarn start`.
-5. After dev server starts successfully, it will be automatically opened in the default browser.
+
+```bash
+cd client
+```
+   
+4. Run yarn to install dependencies: .
+
+```bash
+yarn install
+```
+
+5. Start dev server: `LOWCODER_API_SERVICE_URL=http://localhost:3000 yarn start`.
+6. After the dev server starts successfully, it will be automatically opened in the default browser.
 
 ### Before submitting a pull request
 

client/README.md

@@ -34,6 +34,7 @@ declare var LOWCODER_NODE_SERVICE_URL: string;
 declare var LOWCODER_SHOW_BRAND: string;
 declare var LOWCODER_CUSTOM_LOGO: string;
 declare var LOWCODER_CUSTOM_LOGO_SQUARE: string;
+declare var LOWCODER_CUSTOM_AUTH_WELCOME_TEXT: string;
 declare var REACT_APP_ENV: string;
 declare var REACT_APP_BUILD_ID: string;
 declare var REACT_APP_LOG_LEVEL: string;

client/packages/lowcoder-cli/client.d.ts

@@ -1,6 +1,6 @@
 {
   "name": "lowcoder-comps",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "type": "module",
   "license": "MIT",
   "dependencies": {
@@ -14,6 +14,7 @@
     "@types/react": "17",
     "@types/react-dom": "17",
     "big.js": "^6.2.1",
+    "echarts-extension-gmap": "^1.6.0",
     "lowcoder-cli": "workspace:^",
     "lowcoder-sdk": "workspace:^",
     "mermaid": "^10.2.4",

client/packages/lowcoder-comps/package.json

@@ -49,7 +49,7 @@ import {
   viewClassNames,
   FormWrapper,
 } from "./calendarConstants";
-import moment from "moment";
+import dayjs from "dayjs";
 
 const childrenMap = {
   events: jsonValueExposingStateControl("events", defaultData),
@@ -79,8 +79,8 @@ let CalendarBasicComp = (function () {
       return {
         title: item.title,
         id: item.id,
-        start: moment(item.start, DateParser).format(),
-        end: moment(item.end, DateParser).format(),
+        start: dayjs(item.start, DateParser).format(),
+        end: dayjs(item.end, DateParser).format(),
         allDay: item.allDay,
         color: isValidColor(item.color || "") ? item.color : theme?.theme?.primary,
         ...(item.groupId ? { groupId: item.groupId } : null),
@@ -104,7 +104,7 @@ let CalendarBasicComp = (function () {
       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");
+        const duration = dayjs(eventInfo.event.end).diff(dayjs(eventInfo.event.start), "minutes");
         if (duration <= 30 || eventInfo.event.allDay) {
           sizeClass = "small";
         } else if (duration <= 60) {
@@ -114,7 +114,7 @@ let CalendarBasicComp = (function () {
         }
       }
       const stateClass =
-        moment().isAfter(moment(eventInfo.event.end)) &&
+        dayjs().isAfter(dayjs(eventInfo.event.end)) &&
         (eventInfo.view.type as ViewType) !== ViewType.MONTH
           ? "past"
           : "";
@@ -125,6 +125,7 @@ let CalendarBasicComp = (function () {
           isList={isList}
           bg={eventInfo.backgroundColor}
           theme={theme?.theme}
+          allDay={showAllDay}
           $style={props.style}
         >
           <div className="event-time">{eventInfo.timeText}</div>
@@ -177,7 +178,7 @@ let CalendarBasicComp = (function () {
         end: info.endStr,
       };
       const view = info.view.type as ViewType;
-      const duration = moment(info.end).diff(moment(info.start), "minutes");
+      const duration = dayjs(info.end).diff(dayjs(info.start), "minutes");
       const singleClick =
         (view === ViewType.MONTH && duration === 1440) ||
         ([ViewType.WEEK, ViewType.DAY].includes(view) && duration === 30) ||
@@ -355,8 +356,8 @@ let CalendarBasicComp = (function () {
             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();
+              const start = dayjs(item.start, DateParser).format();
+              const end = dayjs(item.end, DateParser).format();
               if (
                 start !== event?.start ||
                 end !== event?.end ||

client/packages/lowcoder-comps/src/comps/calendarComp/calendarComp.tsx

@@ -17,7 +17,7 @@ import {
   UnderlineCss,
 } from "lowcoder-sdk";
 import styled from "styled-components";
-import moment from "moment";
+import dayjs from "dayjs";
 import {
   DayHeaderContentArg,
   FormatterInput,
@@ -388,7 +388,7 @@ export const Wrapper = styled.div<{
 
   .fc-scrollgrid-liquid > tbody {
     & > tr:nth-of-type(2) {
-      display: none;
+      display: ${(props) => props.allDay && 1};
     }
   }
   .fc .fc-timegrid-slot-label-cushion {
@@ -639,6 +639,7 @@ export const Event = styled.div<{
   bg: string;
   theme: Object;
   isList: boolean;
+  allDay: boolean;
   $style: CalendarStyleType;
 }>`
   height: 100%;
@@ -813,15 +814,15 @@ export const defaultData = [
   {
     id: "1",
     title: "Coding",
-    start: moment().hours(10).minutes(0).second(0).format(DATE_TIME_FORMAT),
-    end: moment().hours(11).minutes(30).second(0).format(DATE_TIME_FORMAT),
+    start: dayjs().hour(10).minute(0).second(0).format(DATE_TIME_FORMAT),
+    end: dayjs().hour(11).minute(30).second(0).format(DATE_TIME_FORMAT),
     color: "#079968",
   },
   {
     id: "2",
     title: "Rest",
-    start: moment().hours(24).format(DATE_FORMAT),
-    end: moment().hours(48).format(DATE_FORMAT),
+    start: dayjs().hour(24).format(DATE_FORMAT),
+    end: dayjs().hour(48).format(DATE_FORMAT),
     allDay: true,
   },
 ];
@@ -852,10 +853,10 @@ const weekHeadContent = (info: DayHeaderContentArg) => {
 const leftTimeContent = (info: SlotLabelContentArg) => {
   let isPast = false;
   if (info.view.type === ViewType.WEEK) {
-    isPast = moment().isAfter(moment(moment().format("YYYY MM DD " + info.text)));
+    isPast = dayjs().isAfter(dayjs(dayjs().format("YYYY MM DD " + info.text)));
   } else if (info.view.type === ViewType.DAY) {
-    isPast = moment().isAfter(
-      moment(moment(info.view.activeStart).format("YYYY MM DD " + info.text))
+    isPast = dayjs().isAfter(
+      dayjs(dayjs(info.view.activeStart).format("YYYY MM DD " + info.text))
     );
   }
   return {
@@ -887,9 +888,9 @@ export const slotLabelFormat = [
 export const viewClassNames = (info: ViewContentArg) => {
   let className = "";
   if ([ViewType.WEEK, ViewType.DAY].includes(info.view.type as ViewType)) {
-    if (moment().isAfter(info.view.activeEnd)) {
+    if (dayjs().isAfter(info.view.activeEnd)) {
       className = "past";
-    } else if (moment().isBefore(info.view.activeStart)) {
+    } else if (dayjs().isBefore(info.view.activeStart)) {
       className = "future";
     }
   }

client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx

@@ -26,14 +26,17 @@ import {
   withViewFn,
   ThemeContext,
   chartColorPalette,
+  loadScript,
 } from "lowcoder-sdk";
 import { getEchartsLocale, trans } from "i18n/comps";
 import { ItemColorComp } from "comps/chartComp/chartConfigs/lineChartConfig";
 import {
   echartsConfigOmitChildren,
   getEchartsConfig,
   getSelectedPoints,
+  loadGoogleMapsScript,
 } from "comps/chartComp/chartUtils";
+import 'echarts-extension-gmap';
 import log from "loglevel";
 
 let ChartTmpComp = (function () {
@@ -45,6 +48,7 @@ let ChartTmpComp = (function () {
 ChartTmpComp = withViewFn(ChartTmpComp, (comp) => {
   const echartsCompRef = useRef<ReactECharts | null>();
   const [chartSize, setChartSize] = useState<ChartSize>();
+  const [mapScriptLoaded, setMapScriptLoaded] = useState(false);
   const firstResize = useRef(true);
   const theme = useContext(ThemeContext);
   const defaultChartTheme = {
@@ -87,6 +91,34 @@ ChartTmpComp = withViewFn(ChartTmpComp, (comp) => {
     );
   }, [chartSize, ...Object.values(echartsConfigChildren)]);
 
+  const isMapScriptLoaded = useMemo(() => {
+    return mapScriptLoaded || window?.google;
+  }, [mapScriptLoaded])
+
+  const loadGoogleMapsData = () => {
+    const echartsCompInstance = echartsCompRef?.current?.getEchartsInstance();
+    if (!echartsCompInstance) {
+      return _.noop;
+    }
+    echartsCompInstance.getModel().getComponent("gmap").getGoogleMap();
+  }
+
+  const apiKey = comp.children.mapApiKey.getView();
+  const mode = comp.children.mode.getView();
+  useEffect(() => {
+    if(mode === 'map') {
+      const gMapScript = loadGoogleMapsScript('');
+      if(isMapScriptLoaded) {
+        loadGoogleMapsData();
+        return;
+      }
+      gMapScript.addEventListener('load', function () {
+        setMapScriptLoaded(true);
+        loadGoogleMapsData();
+      });
+    }
+  }, [mode, apiKey, option])
+
   return (
     <ReactResizeDetector
       onResize={(w, h) => {
@@ -101,15 +133,17 @@ ChartTmpComp = withViewFn(ChartTmpComp, (comp) => {
         }
       }}
     >
-      <ReactECharts
-        ref={(e) => (echartsCompRef.current = e)}
-        style={{ height: "100%" }}
-        notMerge
-        lazyUpdate
-        opts={{ locale: getEchartsLocale() }}
-        option={option}
-        theme={themeConfig}
-      />
+      {(mode !== 'map' || (mode === 'map' && isMapScriptLoaded)) && (
+        <ReactECharts
+          ref={(e) => (echartsCompRef.current = e)}
+          style={{ height: "100%" }}
+          notMerge
+          lazyUpdate
+          opts={{ locale: getEchartsLocale() }}
+          option={option}
+          theme={mode !== 'map' ? themeConfig : undefined}
+        />
+      )}
     </ReactResizeDetector>
   );
 });

client/packages/lowcoder-comps/src/comps/chartComp/chartComp.tsx

@@ -4,3 +4,6 @@ const echartsUrlLocale = language === "zh" ? "zh" : "en";
 export const optionUrl = `https://echarts.apache.org/${echartsUrlLocale}/option.html`;
 export const examplesUrl = `https://echarts.apache.org/examples/${echartsUrlLocale}/index.html`;
 export const xAxisTypeUrl = `${optionUrl}#xAxis.type`;
+export const googleMapsApiUrl = `https://maps.googleapis.com/maps/api/js`;
+export const mapOptionUrl = `https://github.com/plainheart/echarts-extension-gmap`;
+export const mapExamplesUrl = `https://codepen.io/plainheart/pen/VweLGbR`;

client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/chartUrls.tsx

@@ -1,5 +1,5 @@
 import { jsonControl, JSONObject, stateComp, toJSONObjectArray, toObject } from "lowcoder-sdk";
-import { StringControl } from "lowcoder-sdk";
+import { withDefault, BooleanControl, StringControl, NumberControl, JSONObjectControl } from "lowcoder-sdk";
 import { dropdownControl } from "lowcoder-sdk";
 import { eventHandlerControl } from "lowcoder-sdk";
 import { valueComp, withType } from "lowcoder-sdk";
@@ -15,7 +15,6 @@ import { ScatterChartConfig } from "./chartConfigs/scatterChartConfig";
 import { SeriesListComp } from "./seriesComp";
 import { EChartsOption } from "echarts";
 import { i18nObjs, trans } from "i18n/comps";
-import { JSONValue } from "lowcoder";
 
 export const ChartTypeOptions = [
   {
@@ -45,6 +44,10 @@ const chartModeOptions = [
     label: "ECharts JSON",
     value: "json",
   },
+  {
+    label: "Map",
+    value: "map",
+  },
 ] as const;
 
 export const EventOptions = [
@@ -221,6 +224,14 @@ export const chartUiModeChildren = {
   chartConfig: ChartOptionComp,
 };
 
+const chartMapModeChildren = {
+  mapApiKey: withDefault(StringControl, ''),
+  mapZoomLevel: withDefault(NumberControl, 3),
+  mapCenterLng: withDefault(NumberControl, 15.932644),
+  mapCenterLat: withDefault(NumberControl, 50.942063),
+  mapOptions: jsonControl(toObject, i18nObjs.defaultMapJsonOption),
+}
+
 export const chartChildrenMap = {
   mode: dropdownControl(chartModeOptions, "ui"),
   echartsOption: jsonControl(toObject, i18nObjs.defaultEchartsJsonOption),
@@ -236,6 +247,7 @@ export const chartChildrenMap = {
     }>
   >([]),
   ...chartUiModeChildren,
+  ...chartMapModeChildren,
 };
 
 const chartUiChildrenMap = uiChildren(chartChildrenMap);