From e6e6b3a98551c5ebf842d78e7ada35ae5bac8cda Mon Sep 17 00:00:00 2001
From: RAHEEL <mraheeliftikhar1994@gmail.com>
Date: Mon, 15 Apr 2024 23:03:13 +0500
Subject: [PATCH 1/3] added click events for echarts json/map mode

---
 client/packages/lowcoder-comps/package.json   |  2 +-
 .../src/comps/chartComp/chartComp.tsx         | 24 +++++++++++++++++++
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/client/packages/lowcoder-comps/package.json b/client/packages/lowcoder-comps/package.json
index 38efb4058..c77e3beb1 100644
--- a/client/packages/lowcoder-comps/package.json
+++ b/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": {
diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartComp.tsx b/client/packages/lowcoder-comps/src/comps/chartComp/chartComp.tsx
index 7e558971c..105cfb5d6 100644
--- a/client/packages/lowcoder-comps/src/comps/chartComp/chartComp.tsx
+++ b/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

From 39b775d3816db8f222973933643858640ce0e694 Mon Sep 17 00:00:00 2001
From: RAHEEL <mraheeliftikhar1994@gmail.com>
Date: Mon, 15 Apr 2024 23:38:10 +0500
Subject: [PATCH 2/3] show only available space for editing list item in
 horizontal mode

---
 .../packages/lowcoder/src/comps/comps/listViewComp/listView.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx b/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx
index 980599f7d..dc279c79e 100644
--- a/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx
@@ -129,6 +129,8 @@ function ListItem({
           dispatch={itemIdx === offset ? containerProps.dispatch : _.noop}
           style={{
             height: "100%",
+            // in case of horizontal mode, minHorizontalWidth is 0px
+            width: minHorizontalWidth !== '0px' ? minHorizontalWidth : '100%',
             backgroundColor: "transparent",
             flex: "auto",
           }}

From cb826f827301b40ea93065d204e7949d3d8bf474 Mon Sep 17 00:00:00 2001
From: RAHEEL <mraheeliftikhar1994@gmail.com>
Date: Tue, 16 Apr 2024 00:28:44 +0500
Subject: [PATCH 3/3] horizontal scrolling for gridview comp

---
 .../src/comps/comps/listViewComp/listView.tsx | 37 +++++++++++++------
 1 file changed, 26 insertions(+), 11 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx b/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx
index dc279c79e..da62b232c 100644
--- a/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx
+++ b/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;
 };
 
@@ -130,9 +139,9 @@ function ListItem({
           style={{
             height: "100%",
             // in case of horizontal mode, minHorizontalWidth is 0px
-            width: minHorizontalWidth !== '0px' ? minHorizontalWidth : '100%',
+            width: minHorizontalWidth || '100%',
             backgroundColor: "transparent",
-            flex: "auto",
+            // flex: "auto",
           }}
           autoHeight={autoHeight}
           isDroppable={itemIdx === offset}
@@ -249,7 +258,7 @@ export function ListView(props: Props) {
                 minHeight={minHeight}
                 unMountFn={unMountFn}
                 horizontalWidth={`${100 / noOfColumns}%`}
-                minHorizontalWidth={horizontal ? minHorizontalWidth : '0px'}
+                minHorizontalWidth={horizontal ? minHorizontalWidth : undefined}
               />
             );
           })}
@@ -270,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>