Splitable: start work on context

Co-authored-by: JackDotJS <jackdotbusiness@proton.me>
JackDotJS · Apr 16, 2024 · 94bc1fe · 94bc1fe
1 parent 4f2df70
commit 94bc1fe
Showing 1 changed file with 43 additions and 17 deletions.
diff --git a/src/components/Splitable.tsx b/src/components/Splitable.tsx
@@ -1,6 +1,21 @@
-import { JSX, Match, Switch } from "solid-js";
+import { JSX, Match, Switch, createContext, createSignal, useContext } from "solid-js";
 import SplitLine from "./SplitLine";
 
+export const SplitableContext = createContext<{
+  elementOne: HTMLDivElement,
+  elementTwo: HTMLDivElement,
+
+  setElementOne: (element: HTMLDivElement) => void, // eslint-disable-line no-unused-vars
+  setElementTwo: (element: HTMLDivElement) => void, // eslint-disable-line no-unused-vars
+}>();
+
+export function useSplitableContext() {
+  const context = useContext(SplitableContext);
+  if (!context) throw new Error(`useSplitableContext: SplitableContext is undefined!`);
+
+  return context;
+}
+
 type SplitableProps = {
   type: "horizontal" | "vertical",
   children: [JSX.Element, JSX.Element]
@@ -12,23 +27,34 @@ type SplitableProps = {
  * @returns {JSX.Element}
  */
 export default function Splitable(props: SplitableProps) {
+
+  const [elementOne, setElementOne] = createSignal<HTMLDivElement>();
+  const [elementTwo, setElementTwo] = createSignal<HTMLDivElement>();
+
   return (
-    <Switch fallback={<FallbackComponent />}>
-      <Match when={props.type === "vertical"}>
-        <div style={{ display: "flex", "flex-direction": "column", flex: 1 }}>
-          {props.children[0]}
-          <SplitLine type="vertical" />
-          {props.children[1]}
-        </div>
-      </Match>
-      <Match when={props.type === "horizontal"}>
-        <div style={{ display: "flex", "flex-direction": "row", flex: 1 }}>
-          {props.children[0]}
-          <SplitLine type="horizontal" />
-          {props.children[1]}
-        </div>
-      </Match>
-    </Switch>
+    <SplitableContext.Provider value={{
+      get elementOne() { return elementOne()!; },
+      get elementTwo() { return elementTwo()!; },
+      setElementOne,
+      setElementTwo
+    }}>
+      <Switch fallback={<FallbackComponent />}>
+        <Match when={props.type === "vertical"}>
+          <div style={{ display: "flex", "flex-direction": "column", flex: 1 }}>
+            {props.children[0]}
+            <SplitLine type="vertical" />
+            {props.children[1]}
+          </div>
+        </Match>
+        <Match when={props.type === "horizontal"}>
+          <div style={{ display: "flex", "flex-direction": "row", flex: 1 }}>
+            {props.children[0]}
+            <SplitLine type="horizontal" />
+            {props.children[1]}
+          </div>
+        </Match>
+      </Switch>
+    </SplitableContext.Provider>
   );
 }