fix: widget align system on mobile (#409)

* fix: widget align system on mobile * fix: update zone when moveTo is called * fix: initial position of align system pages
reearth · Jan 27, 2023 · fce1ad7 · fce1ad7
1 parent 7970204
commit fce1ad7
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 10 deletions.
diff --git a/src/components/molecules/Visualizer/WidgetAlignSystem/MobileZone.tsx b/src/components/molecules/Visualizer/WidgetAlignSystem/MobileZone.tsx
@@ -1,4 +1,4 @@
-import { ReactNode, useState, useMemo } from "react";
+import { ReactNode, useState, useMemo, useEffect } from "react";
 import { GridSection } from "react-align";
 
 import Icon from "@reearth/components/atoms/Icon";
@@ -38,12 +38,21 @@ export default function MobileZone({
   ...props
 }: Props) {
   const filteredSections = useMemo(() => {
-    return sections.filter(s => !!zone?.[s] || (s === "center" && children));
+    return sections.filter(
+      s =>
+        areas.filter(a => zone?.[s]?.[a]?.widgets?.length).length || (s === "center" && children),
+    );
   }, [zone, children]);
 
-  const [pos, setPos] = useState(filteredSections.length === 3 ? 1 : 0);
+  const initialPos = useMemo(() => (filteredSections.length === 3 ? 1 : 0), [filteredSections]);
+
+  const [pos, setPos] = useState(initialPos);
   const publishedTheme = usePublishTheme(sceneProperty.theme);
 
+  useEffect(() => {
+    setPos(initialPos);
+  }, [initialPos]);
+
   return (
     <>
       <StyledSlide pos={pos} filteredSections={filteredSections.length > 1}>

diff --git a/src/components/molecules/Visualizer/useWidgetAlignSystem.ts b/src/components/molecules/Visualizer/useWidgetAlignSystem.ts
@@ -27,26 +27,43 @@ export default ({ alignSystem }: { alignSystem: WidgetAlignSystem | undefined })
 
     setOverrideAlignSystem(alignSystem => {
       if (!alignSystem) return alignSystem;
-      Object.keys(alignSystem).forEach(zoneName => {
-        const zone = alignSystem[zoneName as keyof WidgetAlignSystem];
+      let next = { ...alignSystem };
+      Object.keys(next).forEach(zoneName_ => {
+        const zoneName = zoneName_ as keyof WidgetAlignSystem;
+        const zone = alignSystem[zoneName];
         if (zone) {
-          Object.keys(zone).forEach(sectionName => {
-            const section = zone[sectionName as keyof WidgetZone];
+          Object.keys(zone).forEach(sectionName_ => {
+            const sectionName = sectionName_ as keyof WidgetZone;
+            const section = zone[sectionName];
             if (section) {
-              Object.keys(section).forEach(areaName => {
-                const area = section[areaName as keyof WidgetSection];
+              Object.keys(section).forEach(areaName_ => {
+                const areaName = areaName_ as keyof WidgetSection;
+                const area = section[areaName];
                 if (!widget && area?.widgets) {
                   const sourceIndex = area.widgets.findIndex(w => w.id === widgetId);
                   if (sourceIndex !== -1) {
                     [widget] = area.widgets.splice(sourceIndex, 1);
+                    next = {
+                      ...next,
+                      [zoneName]: {
+                        ...next[zoneName],
+                        [sectionName]: {
+                          ...(next[zoneName]?.[sectionName] || {}),
+                          [areaName]: {
+                            ...(next[zoneName]?.[sectionName]?.[areaName] || {}),
+                            ...area,
+                          },
+                        },
+                      },
+                    };
                   }
                 }
               });
             }
           });
         }
       });
-      return { ...alignSystem };
+      return { ...next };
     });
 
     setTimeout(() => {