From 42d9ed08b131f74b267d5c80eb4cf87a3ccad7a8 Mon Sep 17 00:00:00 2001 From: KaWaite <34051327+KaWaite@users.noreply.github.com> Date: Wed, 29 Nov 2023 16:51:02 +0900 Subject: [PATCH] chore(web): fix title padding changes updating page padding (#840) --- .../beta/lib/core/StoryPanel/ActionPanel/index.tsx | 4 +++- .../core/StoryPanel/Block/builtin/Title/index.tsx | 14 +++----------- .../Block/builtin/common/ActionPanel/index.tsx | 1 + .../StoryPanel/Block/builtin/common/Wrapper.tsx | 5 +++-- web/src/beta/lib/core/StoryPanel/Page/hooks.ts | 13 +++++++++++-- web/src/beta/lib/core/StoryPanel/Page/index.tsx | 8 ++++---- .../lib/core/StoryPanel/SelectableArea/index.tsx | 3 +++ 7 files changed, 28 insertions(+), 20 deletions(-) diff --git a/web/src/beta/lib/core/StoryPanel/ActionPanel/index.tsx b/web/src/beta/lib/core/StoryPanel/ActionPanel/index.tsx index de62e48f61..842f23e014 100644 --- 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>; onSettingsToggle?: () => void; onRemove?: () => void; @@ -65,6 +66,7 @@ const ActionPanel: React.FC = ({ actionItems, position, dndEnabled, + overrideGroupId, setShowPadding, onSettingsToggle, onRemove, @@ -144,7 +146,7 @@ const ActionPanel: React.FC = ({ {Object.keys(panelSettings).map((fieldId, index) => { const field = panelSettings[fieldId]; - const groupId = "panel"; + const groupId = overrideGroupId || "panel"; return ( = ({ 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 = ({ 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 ( >; 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 index 514c4e889e..b2d824daf4 100644 --- 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 = ({ 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 = ({ {editMode && groupId && propertyId && settingsEnabled && ( - {Object.keys(defaultSettings).map(fieldId => { + {Object.keys(defaultSettings).map((fieldId, idx) => { const field = defaultSettings[fieldId]; return ( 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 index a4eaf0f18f..04949202ca 100644 --- 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 = ({ const { openBlocksIndex, titleId, - title, + titleProperty, propertyId, panelSettings, storyBlocks, @@ -145,7 +145,7 @@ const StoryPanel: React.FC = ({ padding={panelSettings?.padding?.value} gap={panelSettings?.gap?.value}> - {(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 = ({ 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 index 79d48b0064..f03ef63462 100644 --- 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>; onEditModeToggle?: () => void; onSettingsToggle?: () => void; @@ -60,6 +61,7 @@ const SelectableArea: React.FC = ({ noBorder, isEditable, panelSettings, + overrideGroupId, setEditMode, onEditModeToggle, onSettingsToggle, @@ -91,6 +93,7 @@ const SelectableArea: React.FC = ({ panelSettings={panelSettings} dndEnabled={dndEnabled} position={position} + overrideGroupId={overrideGroupId} setShowPadding={setShowPadding} onEditModeToggle={onEditModeToggle} onSettingsToggle={onSettingsToggle}