move split modal to modals directory

2026-04-11 20:30:35 +00:00
parent 423e84bc14
commit 240c307418
6 changed files with 5 additions and 5 deletions
@@ -0,0 +1,53 @@
+import CoreViewModel from "../../ViewModel/Global/coreViewModel";
+import "./splitModal.css";
+
+import * as React from "bloatless-react";
+
+export function SplitModal<T>(
+    coreViewModel: CoreViewModel,
+    leftView: React.State<Element>,
+    rightView: React.State<Element>,
+    extendedStyle: boolean = false,
+    navigationState?: React.State<T | undefined>,
+) {
+    function closePage() {
+        navigationState.value = undefined;
+    }
+
+    const hasPageOpen = new React.State<boolean>(false);
+    navigationState?.subscribe(
+        (newValue) => (hasPageOpen.value = newValue != undefined),
+    );
+
+    const view = (
+        <div
+            class="split-modal"
+            toggle:extended={extendedStyle}
+            toggle:navigation={navigationState != undefined}
+            toggle:page-open={hasPageOpen}
+        >
+            <div>
+                <div class="scroll-area" children:set={leftView}></div>
+            </div>
+            <div class="scroll-area slide-up">
+                <div
+                    class="flex-row width-100 mobile-only"
+                    toggle:hidden={navigationState == undefined}
+                >
+                    <button
+                        class="ghost square"
+                        aria-label={
+                            coreViewModel.translations.general.backButton
+                        }
+                        on:click={closePage}
+                    >
+                        <span class="icon">arrow_back</span>
+                    </button>
+                </div>
+                <div children:set={rightView}></div>
+            </div>
+        </div>
+    );
+
+    return view;
+}