Merge pull request #809 from raheeliftikhar5/echart-click-events

 Click events for echarts json/map view

Author: FalkWolsky

client/packages/lowcoder-comps/package.json

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

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

@@ -76,6 +76,30 @@ ChartTmpComp = withViewFn(ChartTmpComp, (comp) => {
   }
 
   useEffect(() => {
+    // click events for JSON/Map mode 
+    if (mode === 'ui') return;
+
+    const echartsCompInstance = echartsCompRef?.current?.getEchartsInstance();
+    if (!echartsCompInstance) {
+      return _.noop;
+    }
+    echartsCompInstance?.on("click", (param: any) => {
+      document.dispatchEvent(new CustomEvent("clickEvent", {
+        bubbles: true,
+        detail: {
+          action: 'click',
+          data: param.data,
+        }
+      }));
+    });
+    return () => {
+      echartsCompInstance?.off("click");
+      document.removeEventListener('clickEvent', clickEventCallback)
+    };
+  }, [mode, mapScriptLoaded]);
+
+  useEffect(() => {
+    // click events for UI mode
     if(mode !== 'ui') return;
 
     // bind events

client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx

@@ -42,18 +42,26 @@ const FlexWrapper = styled.div`
   height: 100%;
   display: flex;
   align-items: center;
-  justify-content: center;
-  flex-wrap: 'wrap'};
+  // justify-content: center;
 `;
 
-const ListOrientationWrapper = styled.div<{ $isHorizontal: boolean, $autoHeight : boolean }>`
+const ListOrientationWrapper = styled.div<{
+  $isHorizontal: boolean,
+  $autoHeight : boolean,
+  $isGrid: boolean,
+}>`
   height: ${(props) => (props.$autoHeight ? "auto" : "100%")};
   display: flex;
-  flex-direction: ${(props) => (props.$isHorizontal ? "row" : "column")};
+  flex-direction: ${(props) => (props.$isHorizontal && !props.$isGrid ? "row" : "column")};
   height: 100%;
 `;
 
-const MinHorizontalWidthContext = createContext({
+type MinHorizontalWidthContextType = {
+  horizontalWidth: string,
+  minHorizontalWidth?: string,
+}
+
+const MinHorizontalWidthContext = createContext<MinHorizontalWidthContextType>({
   horizontalWidth: '100%',
   minHorizontalWidth: '100px',
 });
@@ -63,11 +71,12 @@ const ContainerInListView = (props: ContainerBaseProps ) => {
     horizontalWidth,
     minHorizontalWidth
   } = useContext(MinHorizontalWidthContext);
+
   return (
     <div
       style={{
         width: horizontalWidth,
-        minWidth: minHorizontalWidth,
+        minWidth: minHorizontalWidth || '0px',
       }}
     >
       <InnerGrid
@@ -88,7 +97,7 @@ type ListItemProps = {
   scrollContainerRef?: RefObject<HTMLDivElement>;
   minHeight?: string;
   unMountFn?: () => void;
-  minHorizontalWidth: string;
+  minHorizontalWidth?: string;
   horizontalWidth: string;
 };
 
@@ -129,8 +138,10 @@ function ListItem({
           dispatch={itemIdx === offset ? containerProps.dispatch : _.noop}
           style={{
             height: "100%",
+            // in case of horizontal mode, minHorizontalWidth is 0px
+            width: minHorizontalWidth || '100%',
             backgroundColor: "transparent",
-            flex: "auto",
+            // flex: "auto",
           }}
           autoHeight={autoHeight}
           isDroppable={itemIdx === offset}
@@ -247,7 +258,7 @@ export function ListView(props: Props) {
                 minHeight={minHeight}
                 unMountFn={unMountFn}
                 horizontalWidth={`${100 / noOfColumns}%`}
-                minHorizontalWidth={horizontal ? minHorizontalWidth : '0px'}
+                minHorizontalWidth={horizontal ? minHorizontalWidth : undefined}
               />
             );
           })}
@@ -268,7 +279,13 @@ export function ListView(props: Props) {
         <BodyWrapper ref={ref} $autoHeight={autoHeight}>
           <ScrollBar style={{ height: autoHeight ? "auto" : "100%", margin: "0px", padding: "0px" }} hideScrollbar={!scrollbars}>
             <>{<ReactResizeDetector onResize={(width?: number, height?: number) => { if (height) setListHeight(height); }} observerOptions={{ box: "border-box" }} >
-              <ListOrientationWrapper $isHorizontal={horizontal} $autoHeight={autoHeight}>{renders}</ListOrientationWrapper>
+              <ListOrientationWrapper
+                $isHorizontal={horizontal}
+                $isGrid={noOfColumns > 1}
+                $autoHeight={autoHeight}
+              >
+                {renders}
+              </ListOrientationWrapper>
             </ReactResizeDetector>}</>
           </ScrollBar>
         </BodyWrapper>