chore(web): fix gap field component (#801)

Co-authored-by: nina992 <nouralali992@gmail.com>
reearth · Nov 8, 2023 · f9b18c9 · f9b18c9
1 parent f8ea057
commit f9b18c9
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 8 deletions.
diff --git a/web/src/beta/lib/core/StoryPanel/ActionPanel/index.tsx b/web/src/beta/lib/core/StoryPanel/ActionPanel/index.tsx
@@ -50,7 +50,6 @@ const ActionPanel: React.FC<Props> = ({
 }) => {
   const t = useT();
   const ref = useItemContext();
-
   const handleRemove = useCallback(() => {
     onRemove?.();
     onSettingsToggle?.();
@@ -75,7 +74,6 @@ const ActionPanel: React.FC<Props> = ({
     }
     return menuItems;
   }, [settingsTitle, t, setShowPadding, onRemove, handleRemove]);
-  // console.log("PS", panelSettings);
 
   return (
     <Wrapper isSelected={isSelected} position={position} onClick={stopClickPropagation}>
@@ -120,12 +118,12 @@ const ActionPanel: React.FC<Props> = ({
               </SettingsHeading>
               {propertyId && panelSettings && (
                 <SettingsContent>
-                  {Object.keys(panelSettings).map(fieldId => {
+                  {Object.keys(panelSettings).map((fieldId, index) => {
                     const field = panelSettings[fieldId];
                     const groupId = "panel";
                     return (
                       <FieldComponent
-                        key={groupId + propertyId}
+                        key={index}
                         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
@@ -43,7 +43,6 @@ export default ({
   const property = useMemo(() => page?.property, [page?.property]);
 
   const propertyId = useMemo(() => page?.propertyId, [page?.propertyId]);
-
   const panelSettings = useMemo(
     () => ({
       padding: {
@@ -55,10 +54,10 @@ export default ({
         ),
       },
       gap: {
+        ...property?.panel?.gap,
         value:
-          property?.panel?.gap?.value ?? isEditable
-            ? MIN_STORY_PAGE_GAP_IN_EDITOR
-            : DEFAULT_STORY_PAGE_GAP,
+          property?.panel?.gap?.value ??
+          (isEditable ? MIN_STORY_PAGE_GAP_IN_EDITOR : DEFAULT_STORY_PAGE_GAP),
       },
     }),
     [property?.panel, isEditable],