chore(web): fix title padding changes updating page padding (#840)

reearth · Nov 29, 2023 · 42d9ed0 · 42d9ed0
1 parent 1ff1f7d
commit 42d9ed0
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 20 deletions.
diff --git a/web/src/beta/lib/core/StoryPanel/ActionPanel/index.tsx b/web/src/beta/lib/core/StoryPanel/ActionPanel/index.tsx
@@ -30,6 +30,7 @@ type Props = {
   dndEnabled?: boolean;
   position?: ActionPosition;
   isHovered?: boolean;
+  overrideGroupId?: string;
   setShowPadding: Dispatch<SetStateAction<boolean>>;
   onSettingsToggle?: () => void;
   onRemove?: () => void;
@@ -65,6 +66,7 @@ const ActionPanel: React.FC<Props> = ({
   actionItems,
   position,
   dndEnabled,
+  overrideGroupId,
   setShowPadding,
   onSettingsToggle,
   onRemove,
@@ -144,7 +146,7 @@ const ActionPanel: React.FC<Props> = ({
                 <SettingsContent>
                   {Object.keys(panelSettings).map((fieldId, index) => {
                     const field = panelSettings[fieldId];
-                    const groupId = "panel";
+                    const groupId = overrideGroupId || "panel";
                     return (
                       <FieldComponent
                         key={index}

diff --git a/web/src/beta/lib/core/StoryPanel/Block/builtin/Title/index.tsx b/web/src/beta/lib/core/StoryPanel/Block/builtin/Title/index.tsx
@@ -14,16 +14,7 @@ export type Props = BlockProps;
 const TitleBlock: React.FC<Props> = ({ block, isSelected, ...props }) => {
   const t = useT();
 
-  const property = useMemo(
-    () => ({
-      title: {
-        title: block?.property?.title?.title,
-        color: block?.property?.title?.color,
-      },
-      panel: { padding: block?.property?.title?.padding },
-    }),
-    [block?.property],
-  );
+  const property = useMemo(() => block?.property, [block?.property]);
 
   const title = useMemo(
     () => property?.title?.title?.value as ValueTypes["string"],
@@ -34,7 +25,8 @@ const TitleBlock: React.FC<Props> = ({ block, isSelected, ...props }) => {
     () => property?.title?.color?.value as ValueTypes["string"],
     [property?.title?.color?.value],
   );
-  const hasEmptySpace = isEmptyString(title);
+
+  const hasEmptySpace = useMemo(() => isEmptyString(title), [title]);
 
   return (
     <BlockWrapper

diff --git a/web/src/beta/lib/core/StoryPanel/Block/builtin/common/ActionPanel/index.tsx b/web/src/beta/lib/core/StoryPanel/Block/builtin/common/ActionPanel/index.tsx
@@ -17,6 +17,7 @@ type Props = {
   panelSettings?: any;
   dndEnabled?: boolean;
   position?: ActionPosition;
+  overrideGroupId?: string;
   setShowPadding: Dispatch<SetStateAction<boolean>>;
   onEditModeToggle?: () => void;
   onSettingsToggle?: () => void;

diff --git a/web/src/beta/lib/core/StoryPanel/Block/builtin/common/Wrapper.tsx b/web/src/beta/lib/core/StoryPanel/Block/builtin/common/Wrapper.tsx
@@ -104,6 +104,7 @@ const BlockWrapper: React.FC<Props> = ({
         panelSettings={panelSettings}
         editMode={editMode}
         isEditable={isEditable}
+        overrideGroupId={groupId === "title" ? groupId : undefined}
         setEditMode={setEditMode}
         onEditModeToggle={handleEditModeToggle}
         onSettingsToggle={handleSettingsToggle}
@@ -123,11 +124,11 @@ const BlockWrapper: React.FC<Props> = ({
         </Block>
         {editMode && groupId && propertyId && settingsEnabled && (
           <EditorPanel onClick={stopClickPropagation}>
-            {Object.keys(defaultSettings).map(fieldId => {
+            {Object.keys(defaultSettings).map((fieldId, idx) => {
               const field = defaultSettings[fieldId];
               return (
                 <FieldComponent
-                  key={groupId + propertyId}
+                  key={groupId + propertyId + idx}
                   propertyId={propertyId}
                   groupId={groupId}
                   fieldId={fieldId}

diff --git a/web/src/beta/lib/core/StoryPanel/Page/hooks.ts b/web/src/beta/lib/core/StoryPanel/Page/hooks.ts
@@ -63,7 +63,16 @@ export default ({
     [property?.panel, isEditable],
   );
 
-  const title = useMemo(() => property?.title, [property?.title]);
+  const titleProperty = useMemo(
+    () => ({
+      title: {
+        title: property?.title?.title,
+        color: property?.title?.color,
+      },
+      panel: { padding: property?.title?.padding },
+    }),
+    [property?.title],
+  );
 
   const titleId = useMemo(() => `${page?.id}/title`, [page?.id]);
 
@@ -76,7 +85,7 @@ export default ({
   return {
     openBlocksIndex,
     titleId,
-    title,
+    titleProperty,
     propertyId,
     property,
     panelSettings,

diff --git a/web/src/beta/lib/core/StoryPanel/Page/index.tsx b/web/src/beta/lib/core/StoryPanel/Page/index.tsx
@@ -84,7 +84,7 @@ const StoryPanel: React.FC<Props> = ({
   const {
     openBlocksIndex,
     titleId,
-    title,
+    titleProperty,
     propertyId,
     panelSettings,
     storyBlocks,
@@ -145,7 +145,7 @@ const StoryPanel: React.FC<Props> = ({
         padding={panelSettings?.padding?.value}
         gap={panelSettings?.gap?.value}>
         <PageTitleWrapper>
-          {(isEditable || title?.title?.value) && (
+          {(isEditable || titleProperty?.title?.title?.value) && (
             // The title block is a pseudo block.
             // It is not saved in the story block list and not draggable because
             // it is actually a field on the story page.
@@ -155,8 +155,8 @@ const StoryPanel: React.FC<Props> = ({
                 pluginId: "reearth",
                 extensionId: "titleStoryBlock",
                 name: t("Title"),
-                propertyId: page?.propertyId ?? "",
-                property: { title },
+                propertyId,
+                property: titleProperty,
               }}
               isEditable={isEditable}
               isSelected={selectedStoryBlockId === titleId}

diff --git a/web/src/beta/lib/core/StoryPanel/SelectableArea/index.tsx b/web/src/beta/lib/core/StoryPanel/SelectableArea/index.tsx
@@ -20,6 +20,7 @@ type Props = {
   position?: ActionPosition;
   noBorder?: boolean;
   isEditable?: boolean;
+  overrideGroupId?: string;
   setEditMode?: Dispatch<SetStateAction<boolean>>;
   onEditModeToggle?: () => void;
   onSettingsToggle?: () => void;
@@ -60,6 +61,7 @@ const SelectableArea: React.FC<Props> = ({
   noBorder,
   isEditable,
   panelSettings,
+  overrideGroupId,
   setEditMode,
   onEditModeToggle,
   onSettingsToggle,
@@ -91,6 +93,7 @@ const SelectableArea: React.FC<Props> = ({
         panelSettings={panelSettings}
         dndEnabled={dndEnabled}
         position={position}
+        overrideGroupId={overrideGroupId}
         setShowPadding={setShowPadding}
         onEditModeToggle={onEditModeToggle}
         onSettingsToggle={onSettingsToggle}