ywana-core8 0.1.58 → 0.1.60

package/package.json

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

package/src/site/link.js

@@ -1,55 +1,6 @@
-import { useEffect, useState, useRef } from "react"
 import React, { useContext } from 'react'
 import { SiteContext } from './siteContext'
 
-/**
- * Use Hash Page
- */
-export function useHashPage(defaultPage = "home") {
-    const getCurrentPageFromURL = () => {
-        const hash = window.location.hash.replace("#", "")
-        return hash || defaultPage
-    }
-
-    const [page, setPage] = useState(getCurrentPageFromURL())
-    const [history, setHistory] = useState([])
-    const isFirstLoad = useRef(true)
-
-    useEffect(() => {
-        const handleHashChange = () => {
-            const newPage = getCurrentPageFromURL()
-            if (!isFirstLoad.current) {
-                setHistory(prev => [...prev, page]) // Guarda la página anterior
-            } else {
-                isFirstLoad.current = false
-            }
-            setPage(newPage)
-        }
-
-        window.addEventListener("hashchange", handleHashChange)
-        return () => window.removeEventListener("hashchange", handleHashChange)
-    }, [page])
-
-    const goto = (id) => {
-        if (page) {
-            setHistory(prev => [...prev, page])
-        }
-        setPage(id)
-        window.location.hash = id
-    }
-
-    const goBack = () => {
-        if (history.length > 0) {
-            const lastPage = history[history.length - 1]
-            setHistory(prev => prev.slice(0, -1))
-            setPage(lastPage)
-            window.location.hash = lastPage
-        }
-    }
-
-    return { page, goto, goBack, history }
-}
-
 /**
  * PageLink - Navegación declarativa usando el sistema de hash
  * 

package/src/site/navigation.js

@@ -50,5 +50,5 @@ export function useHashPage(defaultPage = "home") {
         }
     }
 
-    return { page, goto, goBack, history }
+    return { page, goto, goBack, history, direction }
 }

package/src/site/site.css

@@ -119,8 +119,32 @@
 }
 
 .site-page-container {
-    position:relative;
-    overflow: hidden;
+    position: relative;
+    transition: all 0.3s ease;
+}
+
+/* Cuando una página sale */
+.site-page-container.page-out {
+    opacity: 0;
+    transform: translateX(-30px);
+}
+
+/* Cuando una página entra */
+.site-page-container.page-in {
+    opacity: 0;
+    transform: translateX(30px);
+    animation: pageIn 0.3s forwards;
+}
+
+@keyframes pageIn {
+    from {
+        opacity: 0;
+        transform: translateX(30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
 }
 
 .site6>main {

package/src/site/site.js

@@ -6,11 +6,9 @@ import { Tooltip } from '../html/tooltip'
 import { Page } from './page'
 import { SiteContext } from './siteContext'
 import { ReactNotifications, Store } from 'react-notifications-component'
-import { useHashPage } from './navigation'
 import 'react-notifications-component/dist/theme.css'
 import './site.css'
-import motion from "framer-motion/dist/framer-motion.cjs"
-const { AnimatePresence, motion: MotionDiv } = motion
+import { useHashPage } from './navigation'
 
 /**
  * Site Provider
@@ -29,7 +27,7 @@ export const SiteProvider = ({ children, siteLang, siteDictionary }) => {
     const [preview, setPreview] = useState()
     const [breadcrumb, setBreadcrumb] = useState()
 
-    const { page, goto, goBack } = useHashPage()
+    const { page, goto, goBack, direction } = useHashPage()
 
     const value = {
 
@@ -65,6 +63,7 @@ export const SiteProvider = ({ children, siteLang, siteDictionary }) => {
         page,
         goto,
         goBack,
+        direction,
 
         dialog,
         openDialog: (dialog) => { setDialog(dialog) },
@@ -254,8 +253,13 @@ const SiteMenu = ({ iconSrc, title, children, min }) => {
  * SitePage
  */
 const SitePage = ({ children, init }) => {
+
     const context = useContext(SiteContext)
-    const { page, direction } = context
+    const { page } = context
+    
+    const [renderedPage, setRenderedPage] = useState(page)
+    const [transitionClass, setTransitionClass] = useState('')
+    
     useEffect(() => {
         if (init) {
             context.goto(init)
@@ -263,24 +267,25 @@ const SitePage = ({ children, init }) => {
             context.goto("EMPTY")
         }
     }, [])
-    
-    const currentPage = React.Children.toArray(children).filter(child => child.props ? child.props.id === page : false)
-    const xOffset = direction === "left" ? 40 : -40
+
+    useEffect(() => {
+        if (page !== renderedPage) {
+            setTransitionClass(`page-out-${context.direction}`)
+            setTimeout(() => {
+                setTransitionClass(`page-in-${context.direction}`)
+                setRenderedPage(page)
+                setTimeout(() => { 
+                    setTransitionClass('')
+                }, 300)
+            }, 300)
+            setRenderedPage(page)
+        }
+    }, [page])
+
+    const currentPage = Children.toArray(children).filter(child => child.props ? child.props.id === renderedPage : false)
     return (
-        <main className='site-page-container'>
-            <AnimatePresence exitBeforeEnter>
-                {currentPage && (
-                    <MotionDiv
-                        key={page}
-                        initial={{ opacity: 0, x: xOffset }}
-                        animate={{ opacity: 1, x: 0 }}
-                        exit={{ opacity: 0, x: -xOffset }}
-                        transition={{ duration: 0.3 }}
-                    >
-                        {currentPage}
-                    </MotionDiv>
-                )}
-            </AnimatePresence>
+        <main className={`site-page-container ${transitionClass}`}>
+            {currentPage}
         </main>
     )
 }