@byeolnaerim/flex-layout 0.0.8 → 0.0.9

package/dist/flex-layout/components/FlexLayoutSplitScreen.js

@@ -1,19 +1,33 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { useEffect, useState, useRef, cloneElement } from 'react';
-import { dropMovementEventSubject } from '../hooks/useDrag';
-import { useFlexLayoutSplitScreen } from '../hooks/useFlexLayoutSplitScreen';
-import { resetRootSplitScreen, getSplitScreen, setSplitScreen, getCurrentSplitScreenComponents, removeSplitScreenChild } from '../store/FlexLayoutContainerStore';
-import styles from '../styles/FlexLayout.module.css';
-import FlexLayout from './FlexLayout';
-import FlexLayoutContainer from './FlexLayoutContainer';
-import FlexLayoutSplitScreenDragBox from './FlexLayoutSplitScreenDragBox';
-import equal from 'fast-deep-equal';
-import { distinctUntilChanged, take } from 'rxjs';
-import FlexLayoutSplitScreenDragBoxContainer from './FlexLayoutSplitScreenDragBoxContainer';
-import FlexLayoutSplitScreenDragBoxItem from './FlexLayoutSplitScreenDragBoxItem';
-import FlexLayoutSplitScreenDragBoxTitleMore from './FlexLayoutSplitScreenDragBoxTitleMore';
-import FlexLayoutSplitScreenScrollBox from './FlexLayoutSplitScreenScrollBox';
-
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  cloneElement,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+import {
+  dropMovementEventSubject
+} from "../hooks/useDrag";
+import { useFlexLayoutSplitScreen } from "../hooks/useFlexLayoutSplitScreen";
+import {
+  getCurrentSplitScreenComponents,
+  getSplitScreen,
+  removeRootSplitScreen,
+  removeSplitScreenChild,
+  resetRootSplitScreen,
+  setSplitScreen
+} from "../store/FlexLayoutContainerStore";
+import styles from "../styles/FlexLayout.module.css";
+import FlexLayout from "./FlexLayout";
+import FlexLayoutContainer from "./FlexLayoutContainer";
+import FlexLayoutSplitScreenDragBox from "./FlexLayoutSplitScreenDragBox";
+import equal from "fast-deep-equal";
+import { distinctUntilChanged, take } from "rxjs";
+import FlexLayoutSplitScreenDragBoxContainer from "./FlexLayoutSplitScreenDragBoxContainer";
+import FlexLayoutSplitScreenDragBoxItem from "./FlexLayoutSplitScreenDragBoxItem";
+import FlexLayoutSplitScreenDragBoxTitleMore from "./FlexLayoutSplitScreenDragBoxTitleMore";
+import FlexLayoutSplitScreenScrollBox from "./FlexLayoutSplitScreenScrollBox";
 function isOverDrop({
   x,
   y,
@@ -267,9 +281,9 @@ function FlexLayoutSplitScreen({
     });
     return () => {
       subscribe.unsubscribe();
-      resetRootSplitScreen(layoutName);
+      removeRootSplitScreen(layoutName);
     };
-  }, [layoutName]);
+  }, [layoutName, screenKey, navigationTitle, children, direction]);
   useEffect(() => {
     const subscribe = dropMovementEventSubject.pipe(
       distinctUntilChanged((prev, curr) => {
@@ -434,7 +448,7 @@ function FlexLayoutSplitScreen({
                         containerName: `${targetContainerName}_${layoutName}_${orderName}`,
                         component: targetComponent,
                         dropDocumentOutsideOption: dropDocumentOutsideOption2,
-                        screenKey: centerDropTargetComponent[0].screenKey,
+                        screenKey: dropTargetComponentEvent.screenKey,
                         navigationTitle: navigationTitle2
                       }
                     ]
@@ -630,21 +644,26 @@ function FlexLayoutSplitScreenChild({
   const [isEmptyContent, setIsEmptyContent] = useState(false);
   const [activeIndex, setActiveIndex] = useState(0);
   const centerDropTargetComponentRef = useRef(centerDropTargetComponent);
+  const initialCenterRef = useRef(
+    initialCenterComponents ?? []
+  );
   const activeIndexRef = useRef(activeIndex);
   useEffect(() => {
-    const subscribe = getSplitScreen(rootName, `${layoutName}=${screenKey}`).pipe(take(1)).subscribe((layoutInfo) => {
-      setSplitScreen(rootName, `${layoutName}=${screenKey}`, {
-        afterDropTargetComponent: layoutInfo?.afterDropTargetComponent || [],
-        beforeDropTargetComponent: layoutInfo?.beforeDropTargetComponent || [],
-        centerDropTargetComponent: layoutInfo?.centerDropTargetComponent || initialCenterComponents || [],
-        direction: layoutInfo?.direction || direction
+    const storeKey = `${layoutName}=${screenKey}`;
+    const subscribe = getSplitScreen(rootName, storeKey).pipe(take(1)).subscribe((layoutInfo) => {
+      if (layoutInfo) return;
+      setSplitScreen(rootName, storeKey, {
+        afterDropTargetComponent: [],
+        beforeDropTargetComponent: [],
+        centerDropTargetComponent: initialCenterRef.current,
+        direction
       });
     });
     return () => {
-      removeSplitScreenChild(rootName, layoutName);
+      removeSplitScreenChild(rootName, `${layoutName}=${screenKey}`);
       subscribe.unsubscribe();
     };
-  }, [rootName, layoutName, initialCenterComponents]);
+  }, [rootName, layoutName, screenKey]);
   useEffect(() => {
     const subscribe = getSplitScreen(rootName, `${layoutName}=${screenKey}`).subscribe((layoutInfo) => {
       if (layoutInfo) {
@@ -673,6 +692,7 @@ function FlexLayoutSplitScreenChild({
     });
     return () => {
       subscribe.unsubscribe();
+      removeRootSplitScreen(layoutName);
     };
   }, [rootName, layoutName]);
   useEffect(() => {
@@ -1011,13 +1031,31 @@ function FlexLayoutSplitScreenChild({
                                                 }
                                                 setCenterDropTargetComponent(
                                                   (prev) => {
-                                                    const result = handleRemove(
+                                                    const next = handleRemove(
                                                       prev,
                                                       item.containerName,
                                                       () => {
                                                       }
                                                     );
-                                                    return result;
+                                                    const key = `${layoutName}=${screenKey}`;
+                                                    const current = getCurrentSplitScreenComponents(
+                                                      rootName,
+                                                      key
+                                                    ) || {
+                                                      afterDropTargetComponent,
+                                                      beforeDropTargetComponent,
+                                                      centerDropTargetComponent: prev,
+                                                      direction
+                                                    };
+                                                    setSplitScreen(
+                                                      rootName,
+                                                      key,
+                                                      {
+                                                        ...current,
+                                                        centerDropTargetComponent: next
+                                                      }
+                                                    );
+                                                    return next;
                                                   }
                                                 );
                                               }
@@ -1026,6 +1064,7 @@ function FlexLayoutSplitScreenChild({
                                             children: /* @__PURE__ */ jsx(
                                               FlexLayoutSplitScreenDragBox,
                                               {
+                                                screenKey: item.screenKey,
                                                 onClick: () => {
                                                   setActiveIndex(
                                                     index
@@ -1191,7 +1230,7 @@ function FlexLayoutSplitScreenChild({
     }
   ) });
 }
-
-export { FlexLayoutSplitScreen as default };
-//# sourceMappingURL=FlexLayoutSplitScreen.js.map
+export {
+  FlexLayoutSplitScreen as default
+};
 //# sourceMappingURL=FlexLayoutSplitScreen.js.map