ywana-core8 0.1.47 → 0.1.49

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.1.47",
+  "version": "0.1.49",
   "description": "ywana-core8",
   "homepage": "https://ywana.github.io/workspace",
   "author": "Ernesto Roldan Garcia",

package/src/site/site.js

@@ -1,4 +1,4 @@
-import React, { Children, Fragment, useState, useContext, useEffect } from 'react'
+import React, { Children, Fragment, useState, useContext, useEffect, useCallback, useMemo } from 'react'
 import { Icon } from '../html/icon'
 import { Tabs, Tab } from '../html/tab'
 import { Header } from '../html/header'
@@ -21,12 +21,30 @@ export const SiteProvider = ({ children, siteLang, siteDictionary }) => {
     const [info, setInfo] = useState(null)
     const [showConsole, setShowConsole] = useState(false)
     const [consoleLines, setConsoleLines] = useState([])
-    const [page, setPage] = useState()
     const [dialog, setDialog] = useState()
     const [promptDialog, setPromptDialog] = useState()
     const [preview, setPreview] = useState()
     const [breadcrumb, setBreadcrumb] = useState()
-    
+    const [history, setHistory] = useState([])
+
+    // 📌 Extraer la página actual desde la URL (por defecto "home")
+    const getCurrentPageFromURL = () => {
+        const path = window.location.pathname.replace("/", "")
+        return path || "home"
+    }
+    const [page, setPage] = useState(getCurrentPageFromURL())
+
+    useEffect(() => {
+        // 📌 Detectar cambios en la URL cuando el usuario presiona "Atrás" o "Adelante"
+        const handlePopState = (event) => {
+            const previousPage = event.state?.page || "home"
+            setPage(previousPage)
+        }
+
+        window.addEventListener("popstate", handlePopState)
+        return () => window.removeEventListener("popstate", handlePopState)
+    }, [])
+
     const value = {
 
         lang,
@@ -34,13 +52,16 @@ export const SiteProvider = ({ children, siteLang, siteDictionary }) => {
 
         dictionary,
         setDictionary,
+        translate: useCallback((key) => dictionary?.[key]?.[lang] || key, [lang, dictionary]),
+        /*
         translate: (key) => {
             if (!key) return key
             if (dictionary === undefined) return key
             const term = dictionary[key]
             return term ? term[lang] : key
         },
-        
+        */
+
         sideNav,
         setSideNav,
 
@@ -64,7 +85,21 @@ export const SiteProvider = ({ children, siteLang, siteDictionary }) => {
         setBreadcrumb,
 
         page,
-        goto: (id) => { setPage(id) },
+        goto: (id) => {
+            if (page) {
+                setHistory(prev => [...prev, page]) // 🔹 Guarda la página actual en el historial antes de cambiar
+            }
+            setPage(id)
+            window.history.pushState({ page: id }, "", `/${id}`) // 🔹 Actualiza la URL
+        },
+        goBack: () => {
+            if (history.length > 0) {
+                const lastPage = history[history.length - 1]
+                setHistory(prev => prev.slice(0, -1)) // 🔹 Elimina la última entrada del historial
+                setPage(lastPage) // 🔹 Vuelve a la página anterior
+                window.history.back() // 🔹 Regresa en la navegación del navegador
+            }
+        },
 
         dialog,
         openDialog: (dialog) => { setDialog(dialog) },
@@ -101,7 +136,7 @@ export const SiteProvider = ({ children, siteLang, siteDictionary }) => {
 
     return (
         <SiteContext.Provider value={value}>
-                {children}
+            {children}
         </SiteContext.Provider>
     )
 }
@@ -204,14 +239,15 @@ const SiteMenu = ({ iconSrc, title, children, min }) => {
         context.goto(id)
     }
 
-    const sections = children ?
-        Children.toArray(children).reduce((sections, page) => {
-            const section = page.props ? page.props.section : '...'
-            if (!sections[section]) sections[section] = []
-            const { id, icon, title } = page.props
-            if (title) sections[section].push({ id, icon, title })
-            return sections
-        }, {}) : {}
+    const sections = useMemo(() => {
+        return children.reduce((acc, child) => {
+            const section = child.props.section || "";
+            if (!acc[section]) acc[section] = [];
+            const { title } = child.props;
+            if (title) acc[section].push(child.props);
+            return acc;
+        }, {});
+    }, [children]);
 
     const style = sideNav === 'max' ? 'max' : 'min'
     const toggleIcon = sideNav === 'max' ? 'chevron_left' : 'chevron_right'