Merge pull request #1988 from lowcoder-org/dev

Dev -> Main for v2.7.4

Author: FalkWolsky

client/VERSION

@@ -1 +1 @@
-2.7.3
+2.7.4

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lowcoder-frontend",
-  "version": "2.7.3",
+  "version": "2.7.4",
   "type": "module",
   "private": true,
   "workspaces": [

client/packages/lowcoder-comps/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lowcoder-comps",
-  "version": "2.7.3",
+  "version": "2.7.4",
   "type": "module",
   "license": "MIT",
   "dependencies": {

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

@@ -61,6 +61,8 @@ BarChartTmpComp = withViewFn(BarChartTmpComp, (comp) => {
   const [chartSize, setChartSize] = useState<ChartSize>();
   const firstResize = useRef(true);
   const theme = useContext(ThemeContext);
+  const [chartKey, setChartKey] = useState(0);
+  const prevRaceMode = useRef<boolean>();
   const defaultChartTheme = {
     color: chartColorPalette,
     backgroundColor: "#fff",
@@ -73,6 +75,16 @@ BarChartTmpComp = withViewFn(BarChartTmpComp, (comp) => {
     log.error('theme chart error: ', error);
   }
 
+  // Detect race mode changes and force chart recreation
+  const currentRaceMode = comp.children.chartConfig?.children?.comp?.children?.race?.getView();
+  useEffect(() => {
+    if (prevRaceMode.current !== undefined && prevRaceMode.current !== currentRaceMode) {
+      // Force chart recreation when race mode changes
+      setChartKey(prev => prev + 1);
+    }
+    prevRaceMode.current = currentRaceMode;
+  }, [currentRaceMode]);
+
   const triggerClickEvent = async (dispatch: any, action: CompAction<JSONValue>) => {
     await getPromiseAfterDispatch(
       dispatch,
@@ -176,10 +188,11 @@ BarChartTmpComp = withViewFn(BarChartTmpComp, (comp) => {
   return (
     <div ref={containerRef} style={{height: '100%'}}>
       <ReactECharts
+        key={chartKey}
         ref={(e) => (echartsCompRef.current = e)}
         style={{ height: "100%" }}
-        notMerge
-        lazyUpdate
+        notMerge={!currentRaceMode}
+        lazyUpdate={!currentRaceMode}
         opts={{ locale: getEchartsLocale() }}
         option={option}
         mode={mode}

client/packages/lowcoder-comps/src/comps/barChartComp/barChartUtils.ts

@@ -201,6 +201,15 @@ export function getEchartsConfig(
       animationEasing: 'linear',
       animationEasingUpdate: 'linear',
     }
+  } else {
+    // Ensure proper animation settings when race is disabled
+    config = {
+      ...config,
+      animationDuration: 1000,
+      animationDurationUpdate: 1000,
+      animationEasing: 'cubicOut',
+      animationEasingUpdate: 'cubicOut',
+    }
   }
   if (props.data.length <= 0) {
     // no data
@@ -333,6 +342,21 @@ export function getEchartsConfig(
           animationDurationUpdate: 300
         },
       }
+    } else {
+      // Reset axis animations when race is disabled
+      config = {
+        ...config,
+        xAxis: {
+          ...config.xAxis,
+          animationDuration: undefined,
+          animationDurationUpdate: undefined
+        },
+        yAxis: {
+          ...config.yAxis,
+          animationDuration: undefined,
+          animationDurationUpdate: undefined
+        },
+      }
     }
   }
   // console.log("Echarts transformedData and config", transformedData, config);

client/packages/lowcoder-comps/src/comps/basicChartComp/chartConfigs/barChartConfig.tsx

@@ -53,7 +53,7 @@ export const BarChartConfig = (function () {
         type: "bar",
         subtype: props.type,
         realtimeSort: props.race,
-        seriesLayoutBy: props.race?'column':undefined,
+        seriesLayoutBy: props.race?'column':'row',
         label: {
           show: props.showLabel,
           position: "top",

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

@@ -268,6 +268,7 @@ let CalendarBasicComp = (function () {
     const ref = createRef<HTMLDivElement>();
     const editEvent = useRef<EventInput>();
     const initData = useRef<boolean>(false);
+    const clickTimeout = useRef<NodeJS.Timeout | null>(null);
     const [form] = Form.useForm(); 
     const [left, setLeft] = useState<number | undefined>(undefined);
     const [licensed, setLicensed] = useState<boolean>(props.licenseKey !== "");
@@ -370,6 +371,15 @@ let CalendarBasicComp = (function () {
         initData.current = true;
       }
     }, [JSON.stringify(initialEvents), comp?.children?.comp?.children?.initialData]);
+
+    // Cleanup timeout on unmount
+    useEffect(() => {
+      return () => {
+        if (clickTimeout.current) {
+          clearTimeout(clickTimeout.current);
+        }
+      };
+    }, []);
 
     const resources = useMemo(() => props.resources.value, [props.resources.value]);
 
@@ -850,22 +860,30 @@ let CalendarBasicComp = (function () {
       handleEventDataChange,
     ]); 
 
+    const handleSingleClick = useCallback(() => {
+      // Prevent double click from triggering the event
+      // Use a timeout to debounce rapid clicks
+      if (clickTimeout.current) {
+        clearTimeout(clickTimeout.current);
+        clickTimeout.current = null;
+        return; // This was a double click, don't trigger
+      }
+      
+      clickTimeout.current = setTimeout(() => {
+        props.onEvent('click');
+        clickTimeout.current = null;
+      }, 150); // Small delay to catch double clicks
+    }, [props.onEvent]);
+
     const handleDbClick = useCallback(() => {
-      const event = props.updatedEventsData.find(
-        (item: EventType) => item.id === editEvent.current?.id
-      ) as EventType;
       if (!props.editable || !editEvent.current) {
         return;
       }
-      if (event) {
-        showModal(event, true);
+      if (onEventVal && onEventVal.some((e: any) => e.name === 'doubleClick')) {
+        // Check if 'doubleClick' is included in the array
+        props.onEvent('doubleClick');
       } else {
-        if (onEventVal && onEventVal.some((e: any) => e.name === 'doubleClick')) {
-          // Check if 'doubleClick' is included in the array
-          props.onEvent('doubleClick');
-        } else {
-          showModal(editEvent.current as EventType, false);
-        }
+        showModal(editEvent.current as EventType, false);
       }
     }, [
       editEvent,
@@ -974,6 +992,9 @@ let CalendarBasicComp = (function () {
             allDaySlot={props.showAllDay}
             eventContent={renderEventContent}
             select={(info) => handleCreate(info)}
+            dateClick={() => {
+              handleSingleClick();
+            }}
             eventClick={(info) => {
               const event = events.find(
                 (item: EventInput) => item.id === info.event.id
@@ -982,6 +1003,7 @@ let CalendarBasicComp = (function () {
               setTimeout(() => {
                 editEvent.current = undefined;
               }, 500);
+              handleSingleClick();
             }}
             moreLinkClick={(info) => {
               let left = 0;

client/packages/lowcoder-core/lib/index.js

@@ -1692,11 +1692,12 @@ class CodeNode extends AbstractNode {
                 // if query is dependent on itself, mark as ready
                 if (pathsArr?.[0] === options?.queryName)
                     return;
+                // TODO: check if this is needed after removing lazy load
                 // wait for lazy loaded comps to load before executing query on page load
-                if (value && !Object.keys(value).length && paths.size) {
-                    isFetching = true;
-                    ready = false;
-                }
+                // if (value && !Object.keys(value).length && paths.size) {
+                //   isFetching = true;
+                //   ready = false;
+                // }
                 if (_.has(value, IS_FETCHING_FIELD)) {
                     isFetching = isFetching || value.isFetching === true;
                 }

client/packages/lowcoder-core/src/eval/codeNode.tsx

@@ -176,11 +176,12 @@ export class CodeNode extends AbstractNode<ValueAndMsg<unknown>> {
         // if query is dependent on itself, mark as ready
         if (pathsArr?.[0] === options?.queryName) return;
 
+        // TODO: check if this is needed after removing lazy load
         // wait for lazy loaded comps to load before executing query on page load
-        if (value && !Object.keys(value).length && paths.size) {
-          isFetching = true;
-          ready = false;
-        }
+        // if (value && !Object.keys(value).length && paths.size) {
+        //   isFetching = true;
+        //   ready = false;
+        // }
         if (_.has(value, IS_FETCHING_FIELD)) {
           isFetching = isFetching || value.isFetching === true;
         }

client/packages/lowcoder/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lowcoder",
-  "version": "2.7.3",
+  "version": "2.7.4",
   "private": true,
   "type": "module",
   "main": "src/index.sdk.ts",