fix: list diff select from container or item

illacloud · Mar 1, 2024 · f3098ca · f3098ca
1 parent 75479c4
commit f3098ca
Show file tree

Hide file tree

Showing 10 changed files with 64 additions and 36 deletions.
diff --git a/...der/src/page/App/components/DotPanel/components/Canvas/renderComponentCanvasContainer.tsx b/...der/src/page/App/components/DotPanel/components/Canvas/renderComponentCanvasContainer.tsx
@@ -558,6 +558,7 @@ const RenderComponentCanvasContainer: FC<
             data-canvas-container={displayName}
             data-column-number={columnNumber}
             data-unit-width={unitWidth}
+            data-list-widget-container
           >
             {isEditMode && (
               <DragShadowPreview

diff --git a/...page/App/components/DotPanel/components/Canvas/renderComponentCanvasContainerWithJson.tsx b/...page/App/components/DotPanel/components/Canvas/renderComponentCanvasContainerWithJson.tsx
@@ -49,6 +49,7 @@ export const RenderComponentCanvasWithJson: FC<{
     <div
       css={outerComponentCanvasContainerWithJsonStyle(containerPadding)}
       ref={canvasRef}
+      data-list-widget-container
     >
       {componentTree}
     </div>

diff --git a/...uilder/src/widgetLibrary/GridListWidget/components/ListWidgetWithAutoPagination/index.tsx b/...uilder/src/widgetLibrary/GridListWidget/components/ListWidgetWithAutoPagination/index.tsx
@@ -220,10 +220,11 @@ const ListWidgetWithAutoPagination: FC<ListWidgetPropsWithChildrenNodes> = (
                   loading,
                 )}
                 ref={itemRef}
-                onClick={() => {
-                  handleUpdateSelectedItem(
-                    selectIndexForMark === 0 ? undefined : 0,
-                  )
+                onClick={(e) => {
+                  const isClickOnContainer = !!(
+                    e.target as HTMLElement
+                  )?.getAttribute("data-list-widget-container")
+                  handleUpdateSelectedItem(0, isClickOnContainer)
                 }}
               >
                 <RenderTemplateContainer
@@ -279,10 +280,11 @@ const ListWidgetWithAutoPagination: FC<ListWidgetPropsWithChildrenNodes> = (
                   itemHeight,
                   itemPadding?.size,
                 )}
-                onClick={() => {
-                  handleUpdateSelectedItem(
-                    selectIndexForMark === index ? undefined : index,
-                  )
+                onClick={(e) => {
+                  const isClickOnContainer = !!(
+                    e.target as HTMLElement
+                  )?.getAttribute("data-list-widget-container")
+                  handleUpdateSelectedItem(index, isClickOnContainer)
                 }}
               >
                 <RenderCopyContainer

diff --git a/...lder/src/widgetLibrary/GridListWidget/components/ListWidgetWithServerPagination/index.tsx b/...lder/src/widgetLibrary/GridListWidget/components/ListWidgetWithServerPagination/index.tsx
@@ -291,8 +291,12 @@ const ListWidgetWithServerPagination: FC<ListWidgetPropsWithChildrenNodes> = (
                 isEditMode,
                 loading,
               )}
-              onClick={() => {
-                handleUpdateSelectedItem(0)
+              onClick={(e) => {
+                const isClickOnContainer = !!(
+                  e.target as HTMLElement
+                )?.getAttribute("data-list-widget-container")
+
+                handleUpdateSelectedItem(0, isClickOnContainer)
               }}
             >
               <RenderTemplateContainer
@@ -346,8 +350,12 @@ const ListWidgetWithServerPagination: FC<ListWidgetPropsWithChildrenNodes> = (
                   itemPadding?.size,
                 )}
                 ref={itemRef}
-                onClick={() => {
-                  handleUpdateSelectedItem(index)
+                onClick={(e) => {
+                  const isClickOnContainer = !!(
+                    e.target as HTMLElement
+                  )?.getAttribute("data-list-widget-container")
+
+                  handleUpdateSelectedItem(index, isClickOnContainer)
                 }}
               >
                 <RenderCopyContainer

diff --git a/apps/builder/src/widgetLibrary/GridListWidget/gridList.tsx b/apps/builder/src/widgetLibrary/GridListWidget/gridList.tsx
@@ -171,16 +171,22 @@ export const GridListWidget: FC<GridListWidgetProps> = (props) => {
   }, [childrenNode, dataSources, transTemplateContainerNodes])
 
   const handleUpdateSelectedItem = useCallback(
-    (index?: number) => {
+    (index?: number, isContainerClick?: boolean) => {
       if (!Array.isArray(dataSources) || disabled) return
-      if (selectIndexForMark === index || index === undefined) {
+      if (
+        (selectIndexForMark === index && isContainerClick) ||
+        index === undefined
+      ) {
         setSelectIndexForMark(undefined)
       } else {
         setSelectIndexForMark(index)
       }
       new Promise((resolve) => {
         let value
-        if (index === undefined || index < 0 || index > dataSources.length) {
+        if (
+          index === undefined ||
+          (selectIndexForMark === index && isContainerClick)
+        ) {
           value = {
             selectedItem: undefined,
             selectedIndex: undefined,

diff --git a/apps/builder/src/widgetLibrary/GridListWidget/interface.ts b/apps/builder/src/widgetLibrary/GridListWidget/interface.ts
@@ -79,6 +79,6 @@ export interface RenderCopyContainerProps {
 
 export interface ListWidgetPropsWithChildrenNodes extends GridListWidgetProps {
   copyComponents: ComponentTreeNode[] | null
-  handleUpdateSelectedItem: (index?: number) => void
+  handleUpdateSelectedItem: (index?: number, isContainerClick?: boolean) => void
   selectIndexForMark?: number
 }
diff --git a/apps/builder/src/widgetLibrary/ListWidget/components/ListWidgetWithAutoPagination/index.tsx b/apps/builder/src/widgetLibrary/ListWidget/components/ListWidgetWithAutoPagination/index.tsx
@@ -184,10 +184,11 @@ const ListWidgetWithAutoPagination: FC<ListWidgetPropsWithChildrenNodes> = (
                   isEditMode,
                   loading,
                 )}
-                onClick={() => {
-                  handleUpdateSelectedItem(
-                    selectIndexForMark === 0 ? undefined : 0,
-                  )
+                onClick={(e) => {
+                  const isClickOnContainer = !!(
+                    e.target as HTMLElement
+                  )?.getAttribute("data-list-widget-container")
+                  handleUpdateSelectedItem(0, isClickOnContainer)
                 }}
               >
                 <RenderTemplateContainer
@@ -245,10 +246,11 @@ const ListWidgetWithAutoPagination: FC<ListWidgetPropsWithChildrenNodes> = (
                   itemPadding?.size,
                 )}
                 key={node.displayName}
-                onClick={() => {
-                  handleUpdateSelectedItem(
-                    selectIndexForMark === index ? undefined : index,
-                  )
+                onClick={(e) => {
+                  const isClickOnContainer = !!(
+                    e.target as HTMLElement
+                  )?.getAttribute("data-list-widget-container")
+                  handleUpdateSelectedItem(index, isClickOnContainer)
                 }}
               >
                 <RenderCopyContainer

diff --git a/.../builder/src/widgetLibrary/ListWidget/components/ListWidgetWithServerPagination/index.tsx b/.../builder/src/widgetLibrary/ListWidget/components/ListWidgetWithServerPagination/index.tsx
@@ -254,10 +254,11 @@ const ListWidgetWithServerPagination: FC<ListWidgetPropsWithChildrenNodes> = (
                 isEditMode,
                 loading,
               )}
-              onClick={() => {
-                handleUpdateSelectedItem(
-                  selectIndexForMark === 0 ? undefined : 0,
-                )
+              onClick={(e) => {
+                const isClickOnContainer = !!(
+                  e.target as HTMLElement
+                )?.getAttribute("data-list-widget-container")
+                handleUpdateSelectedItem(0, isClickOnContainer)
               }}
             >
               <RenderTemplateContainer
@@ -311,10 +312,11 @@ const ListWidgetWithServerPagination: FC<ListWidgetPropsWithChildrenNodes> = (
                   itemPadding?.size,
                 )}
                 key={node.displayName}
-                onClick={() => {
-                  handleUpdateSelectedItem(
-                    selectIndexForMark === index ? undefined : index,
-                  )
+                onClick={(e) => {
+                  const isClickOnContainer = !!(
+                    e.target as HTMLElement
+                  )?.getAttribute("data-list-widget-container")
+                  handleUpdateSelectedItem(index, isClickOnContainer)
                 }}
               >
                 <RenderCopyContainer

diff --git a/apps/builder/src/widgetLibrary/ListWidget/interface.ts b/apps/builder/src/widgetLibrary/ListWidget/interface.ts
@@ -71,5 +71,5 @@ export interface RenderCopyContainerProps {
 export interface ListWidgetPropsWithChildrenNodes extends ListWidgetProps {
   copyComponents: ComponentTreeNode[] | null
   selectIndexForMark?: number
-  handleUpdateSelectedItem: (index?: number) => void
+  handleUpdateSelectedItem: (index?: number, isContainerClick?: boolean) => void
 }
diff --git a/apps/builder/src/widgetLibrary/ListWidget/list.tsx b/apps/builder/src/widgetLibrary/ListWidget/list.tsx
@@ -175,16 +175,22 @@ export const ListWidget: FC<ListWidgetProps> = (props) => {
   }, [childrenNode, dataSources, transTemplateContainerNodes])
 
   const handleUpdateSelectedItem = useCallback(
-    (index?: number) => {
+    (index?: number, isContainerClick?: boolean) => {
       if (!Array.isArray(dataSources) || disabled) return
-      if (selectIndexForMark === index || index === undefined) {
+      if (
+        (selectIndexForMark === index && isContainerClick) ||
+        index === undefined
+      ) {
         setSelectIndexForMark(undefined)
       } else {
         setSelectIndexForMark(index)
       }
       new Promise((resolve) => {
         let value
-        if (index === undefined || index < 0 || index > dataSources.length) {
+        if (
+          index === undefined ||
+          (selectIndexForMark === index && isContainerClick)
+        ) {
           value = {
             selectedItem: undefined,
             selectedIndex: undefined,