Separar Tabla.tsx en varios componentes

src/ContenedorHorarios/Tabla.tsx

@@ -3,6 +3,8 @@ import { createEffect, createMemo, createSignal, createState, For } from "solid-
 import { estilosGlobales } from "../Estilos";
 import { AnioData } from "../types/DatosHorario";
 import { dias, horas, horasDescanso } from "../Store";
+import { DataProcesada } from "../types/DatosHorario";
+import { FilaTabla } from "./Tabla/FilaTabla";
 
 const e = StyleSheet.create({
     fila: {
@@ -12,7 +14,7 @@ const e = StyleSheet.create({
         marginLeft: "4rem",
         display: "flex",
         alignItems: "center",
-        minHeight: "1rem",
+        minHeight: "1.5rem",
         ":hover": {
             // backgroundColor: "rgba(200, 200, 200, 0.25)"
         }
@@ -56,16 +58,6 @@ const e = StyleSheet.create({
     }
 });
 
-interface DataProcesada {
-    [hora: string]: {
-        [dia: string]: {
-            id: string,
-            txt: string,
-            esLab: boolean
-        }[]
-    }
-}
-
 const procesarAnio = (data: AnioData, anio: string, version: number) => {
     const obj: DataProcesada = {};
 
@@ -137,39 +129,7 @@ export function Tabla(props: { data: AnioData, anio: string, version: number })
         console.log("Renderizar tabla", props.anio);
         return <For each={horas}>
             {hora => {
-                return <div style={{position: "relative"}}>
+                return <FilaTabla data={data} hora={hora} idHover={idHover} setIdHover={setIdHover}/>
-                    <div className={css(e.celdaHora, estilosGlobales.inlineBlock)}>
-                        {hora.substring(0, 5)}
-                    </div>
-                    <div className={css(e.fila)}>
-                        <For each={dias}>
-                            {dia => {
-                                const diaStr = dia.substring(0, 2);
-                                const horaStr = hora.substring(0, 5);
-
-                                const datos = data()?.[horaStr]?.[diaStr] ?? [];
-
-                                return <div className={css(e.celdaComun, estilosGlobales.inlineBlock)}>
-                                    <For each={datos}>
-                                        {({id, txt, esLab}) => {
-
-                                            const clases = () => {
-                                                const clases = [e.celdaCurso, !esLab && e.celdaCursoTeoria];
-                                                if (id === idHover()) clases.push(e.celdaCursoActiva);
-                                                return css(...clases);
-                                            };
-
-                                            return <span className={clases()} onMouseEnter={() => setIdHover(id)}>
-                                                {txt}
-                                            </span>;
-                                        }}
-                                    </For>
-                                </div>;
-                            }}
-                        </For>
-                        <div className={css(e.filaBorde)}/>
-                    </div>
-                </div>;
             }}
         </For>
     });

src/ContenedorHorarios/Tabla/CeldaFila.tsx

@@ -0,0 +1,58 @@
+import { StyleSheet, css } from "aphrodite";
+import { estilosGlobales } from "../../Estilos";
+import { For } from "solid-js";
+
+const e = StyleSheet.create({
+    celdaComun: {
+        width: "20%",
+        textAlign: "center",
+        padding: "0 0.5rem",
+        boxSizing: "border-box"
+    },
+    celdaCurso: {
+        display: "inline-block",
+        padding: "0.25rem 0.35rem",
+        cursor: "pointer",
+        borderRadius: "5px",
+        transition: "background-color 100ms"
+    },
+    celdaCursoActiva: {
+        backgroundColor: "rgba(200, 200, 200, 0.25)"
+    },
+    celdaCursoTeoria: {
+        fontWeight: "bold"
+    }
+});
+
+interface Props {
+    datos: {id: string, txt: string, esLab: boolean}[],
+    idHover: () => string,
+    setIdHover: (v: string) => string
+}
+
+export function CeldaFila(props: Props) {
+
+    const datos = props.datos;
+    const idHover = props.idHover;
+    const setIdHover = props.setIdHover;
+
+    return <div className={css(e.celdaComun, estilosGlobales.inlineBlock)}>
+        <For each={datos}>
+            {({id, txt, esLab}) => {
+
+                const clases = () => {
+                    const clases = [e.celdaCurso, !esLab && e.celdaCursoTeoria];
+                    if (id === idHover()) clases.push(e.celdaCursoActiva);
+                    return css(...clases);
+                };
+
+                return <span className={clases()}
+                             onMouseEnter={() => setIdHover(id)}
+                             onMouseLeave={() => setIdHover("")}
+                >
+                    {txt}
+                </span>;
+            }}
+        </For>
+    </div>
+}

src/ContenedorHorarios/Tabla/FilaTabla.tsx

@@ -0,0 +1,68 @@
+import { StyleSheet, css } from "aphrodite";
+import { estilosGlobales } from "../../Estilos";
+import { For } from "solid-js";
+import { dias } from "../../Store";
+import {CeldaFila} from "./CeldaFila";
+import { DataProcesada } from "../../types/DatosHorario";
+
+const e = StyleSheet.create({
+    celdaHora: {
+        textAlign: "center",
+        width: "4rem",
+        padding: "0.25rem 0",
+        position: "absolute",
+        top: "-0.75rem"
+    },
+    fila: {
+        position: "relative",
+        zIndex: 2,
+        transition: "background-color 250ms",
+        marginLeft: "4rem",
+        display: "flex",
+        alignItems: "center",
+        minHeight: "1.5rem",
+        ":hover": {
+            // backgroundColor: "rgba(200, 200, 200, 0.25)"
+        }
+    },
+    filaBorde: {
+        position: "absolute",
+        top: 0,
+        height: "1px",
+        width: "100%",
+        backgroundColor: "rgba(200, 200, 200, 0.25)",
+        zIndex: 1
+    },
+});
+
+interface Props {
+    hora: string,
+    data: () => DataProcesada,
+    idHover: () => string,
+    setIdHover: (v: string) => string
+}
+
+export function FilaTabla(props: Props) {
+
+    const hora = props.hora;
+    const data = props.data;
+
+    return <div style={{position: "relative"}}>
+        <div className={css(e.celdaHora, estilosGlobales.inlineBlock)}>
+            {hora.substring(0, 5)}
+        </div>
+        <div className={css(e.fila)}>
+            <For each={dias}>
+                {dia => {
+                    const diaStr = dia.substring(0, 2);
+                    const horaStr = hora.substring(0, 5);
+
+                    const datos = data()?.[horaStr]?.[diaStr] ?? [];
+
+                    return <CeldaFila datos={datos} idHover={props.idHover} setIdHover={props.setIdHover}/>
+                }}
+            </For>
+            <div className={css(e.filaBorde)}/>
+        </div>
+    </div>;
+}

src/ContenedorHorarios/index.tsx

@@ -7,7 +7,7 @@ import { estilosGlobales } from "../Estilos";
 import { Show, createSignal, createEffect, batch } from "solid-js";
 
 const datosPromise = (async () => {
-    const file = await fetch("/horarios/2020_2_fps_ingenieriadesistemas.yaml");
+    const file = await fetch("/horarios/2020_1_fps_ingenieriadesistemas.yaml");
     const text = await file.text();
     return YAML.parse(text) as DatosHorario;
 })();

src/types/DatosHorario.ts

@@ -30,3 +30,12 @@ export interface DatosHorario {
     años: Anio
 }
 
+export interface DataProcesada {
+    [hora: string]: {
+        [dia: string]: {
+            id: string,
+            txt: string,
+            esLab: boolean
+        }[]
+    }
+}