From b97cd2ec91b1afdd25f3a71f822ed985fda24830 Mon Sep 17 00:00:00 2001
From: Beatrice Mkumbo <charsbeaty@gmail.com>
Date: Tue, 14 Nov 2023 16:53:43 +0300
Subject: [PATCH] chore(web): Story page click away (#806)

---
 .../beta/lib/core/StoryPanel/Page/index.tsx   |  3 -
 .../core/StoryPanel/SelectableArea/hooks.ts   | 11 +---
 .../core/StoryPanel/SelectableArea/index.tsx  | 56 +++++++++----------
 3 files changed, 27 insertions(+), 43 deletions(-)

diff --git a/web/src/beta/lib/core/StoryPanel/Page/index.tsx b/web/src/beta/lib/core/StoryPanel/Page/index.tsx
index f1376eb51..f8c2ca899 100644
--- a/web/src/beta/lib/core/StoryPanel/Page/index.tsx
+++ b/web/src/beta/lib/core/StoryPanel/Page/index.tsx
@@ -99,7 +99,6 @@ const StoryPanel: React.FC<Props> = ({
       showSettings={showPageSettings}
       isEditable={isEditable}
       onClick={() => onPageSelect?.(page?.id)}
-      onClickAway={onPageSelect}
       onSettingsToggle={onPageSettingsToggle}>
       <Wrapper id={page?.id} padding={panelSettings.padding.value} gap={panelSettings.gap.value}>
         {(isEditable || title?.title?.value) && (
@@ -115,7 +114,6 @@ const StoryPanel: React.FC<Props> = ({
             isEditable={isEditable}
             isSelected={selectedStoryBlockId === titleId}
             onClick={() => onBlockSelect?.(titleId)}
-            onClickAway={onBlockSelect}
             onPropertyUpdate={onPropertyUpdate}
             onPropertyItemAdd={onPropertyItemAdd}
             onPropertyItemMove={onPropertyItemMove}
@@ -158,7 +156,6 @@ const StoryPanel: React.FC<Props> = ({
                     isSelected={selectedStoryBlockId === b.id}
                     isEditable={isEditable}
                     onClick={() => onBlockSelect?.(b.id)}
-                    onClickAway={onBlockSelect}
                     onRemove={onBlockDelete}
                     onPropertyUpdate={onPropertyUpdate}
                     onPropertyItemAdd={onPropertyItemAdd}
diff --git a/web/src/beta/lib/core/StoryPanel/SelectableArea/hooks.ts b/web/src/beta/lib/core/StoryPanel/SelectableArea/hooks.ts
index f2c7b95f4..f99916dd2 100644
--- a/web/src/beta/lib/core/StoryPanel/SelectableArea/hooks.ts
+++ b/web/src/beta/lib/core/StoryPanel/SelectableArea/hooks.ts
@@ -1,13 +1,12 @@
-import { Dispatch, SetStateAction, useCallback, useEffect, useState } from "react";
+import { Dispatch, SetStateAction, useEffect, useState } from "react";
 
 type Props = {
   editMode?: boolean;
   isSelected?: boolean;
   setEditMode?: Dispatch<SetStateAction<boolean>>;
-  onClickAway?: () => void;
 };
 
-export default ({ editMode, isSelected, setEditMode, onClickAway }: Props) => {
+export default ({ editMode, isSelected, setEditMode }: Props) => {
   const [showPadding, setShowPadding] = useState(false);
 
   useEffect(() => {
@@ -16,14 +15,8 @@ export default ({ editMode, isSelected, setEditMode, onClickAway }: Props) => {
     }
   }, [isSelected, editMode, setEditMode]);
 
-  const handleClickAway = useCallback(() => {
-    setShowPadding(false);
-    onClickAway?.();
-  }, [onClickAway]);
-
   return {
     showPadding,
     setShowPadding,
-    handleClickAway,
   };
 };
diff --git a/web/src/beta/lib/core/StoryPanel/SelectableArea/index.tsx b/web/src/beta/lib/core/StoryPanel/SelectableArea/index.tsx
index 956b8ffc7..dc2d62b7e 100644
--- a/web/src/beta/lib/core/StoryPanel/SelectableArea/index.tsx
+++ b/web/src/beta/lib/core/StoryPanel/SelectableArea/index.tsx
@@ -3,7 +3,6 @@ import { Dispatch, ReactNode, SetStateAction } from "react";
 import { styled } from "@reearth/services/theme";
 
 import ActionPanel, { type ActionPosition } from "../Block/builtin/common/ActionPanel";
-import ClickAwayListener from "../ClickAwayListener";
 
 import useHooks from "./hooks";
 
@@ -24,7 +23,6 @@ type Props = {
   onEditModeToggle?: () => void;
   onSettingsToggle?: () => void;
   onClick?: () => void;
-  onClickAway?: () => void;
   onRemove?: () => void;
   onPropertyUpdate?: (
     propertyId?: string,
@@ -55,49 +53,45 @@ const SelectableArea: React.FC<Props> = ({
   setEditMode,
   onEditModeToggle,
   onSettingsToggle,
-  onClick,
-  onClickAway,
   onRemove,
+  onClick,
   onPropertyUpdate,
   onPropertyItemAdd,
   onPropertyItemMove,
   onPropertyItemDelete,
 }) => {
-  const { showPadding, setShowPadding, handleClickAway } = useHooks({
+  const { showPadding, setShowPadding } = useHooks({
     editMode,
     isSelected,
     setEditMode,
-    onClickAway,
   });
 
   return !isEditable ? (
     <>{children}</>
   ) : (
-    <ClickAwayListener enabled={isSelected} onClickAway={handleClickAway}>
-      <Wrapper isSelected={isSelected} noBorder={noBorder} onClick={onClick}>
-        <ActionPanel
-          title={title}
-          icon={icon}
-          isSelected={isSelected}
-          showSettings={showSettings}
-          showPadding={showPadding}
-          editMode={editMode}
-          propertyId={propertyId}
-          panelSettings={panelSettings}
-          dndEnabled={dndEnabled}
-          position={position}
-          setShowPadding={setShowPadding}
-          onEditModeToggle={onEditModeToggle}
-          onSettingsToggle={onSettingsToggle}
-          onRemove={onRemove}
-          onPropertyUpdate={onPropertyUpdate}
-          onPropertyItemAdd={onPropertyItemAdd}
-          onPropertyItemMove={onPropertyItemMove}
-          onPropertyItemDelete={onPropertyItemDelete}
-        />
-        {children}
-      </Wrapper>
-    </ClickAwayListener>
+    <Wrapper isSelected={isSelected} noBorder={noBorder} onClick={onClick}>
+      <ActionPanel
+        title={title}
+        icon={icon}
+        isSelected={isSelected}
+        showSettings={showSettings}
+        showPadding={showPadding}
+        editMode={editMode}
+        propertyId={propertyId}
+        panelSettings={panelSettings}
+        dndEnabled={dndEnabled}
+        position={position}
+        setShowPadding={setShowPadding}
+        onEditModeToggle={onEditModeToggle}
+        onSettingsToggle={onSettingsToggle}
+        onRemove={onRemove}
+        onPropertyUpdate={onPropertyUpdate}
+        onPropertyItemAdd={onPropertyItemAdd}
+        onPropertyItemMove={onPropertyItemMove}
+        onPropertyItemDelete={onPropertyItemDelete}
+      />
+      {children}
+    </Wrapper>
   );
 };