ywana-core8 0.1.46 → 0.1.48

package/package.json

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

package/src/html/tree.js

@@ -43,17 +43,22 @@ export const TreeNode = ({ id, icon = 'folder', label, tooltip, open=false, chil
 /**
  * Tree Item
  */
-export const TreeItem = ({ id, icon = 'description', label, actions, onSelect, selected = false }) => {
+export const TreeItem = ({ id, icon = 'description', label, actions, onSelect, selected = false, onCheck, checked = false }) => {
 
     function select() {
         if (onSelect) onSelect(id)
     }
 
+    function check(event) {
+        if (onCheck) onCheck(id, event.target.checked)
+    }
+
     const style = selected ? "selected" : ""
     const labelTxt = label ? <Text format={TEXTFORMATS.STRING}>{label}</Text> : null
 
     return (
         <div className={`tree-item final ${style}`} onClick={select}>
+            { onCheck ? <input type="checkbox" checked={checked} onChange={check} /> : null }
             <Icon icon={icon} size="small" small />
             <div className="label">{labelTxt}</div>
             <div className="actions">{actions}</div>

package/src/site/index.js

@@ -1,4 +1,4 @@
-export * from './site'
+export * from './site2'
 export * from './siteContext'
 export * from './page'
 export * from './dialog'

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,12 +52,15 @@ 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) },
@@ -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'

package/src/site/site2.js

@@ -0,0 +1,338 @@
+import React, { Children, Fragment, useState, useContext, useEffect, useCallback, useMemo } from 'react'
+import { Header } from './header'
+import { Icon } from '../html/icon'
+import { Page } from './page'
+import { ConfirmDialog } from './dialog'
+import './site.css'
+
+/**
+ * Site Context
+ */
+export const SiteContext = React.createContext({})
+
+/**
+ * Site Provider
+ */
+export const SiteProvider = ({ children, siteLang, siteDictionary }) => {
+
+    const [lang, setLang] = useState(siteLang)
+    const [dictionary, setDictionary] = useState(siteDictionary)
+    const [sideNav, setSideNav] = useState('max')
+    const [showNav, setShowNav] = useState(false)
+    const [info, setInfo] = useState(true)
+    const [showConsole, setShowConsole] = useState(false)
+    const [consoleLines, setConsoleLines] = 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 = useMemo(() => ({
+
+        lang,
+        setLang,
+        dictionary,
+        setDictionary,
+        translate: useCallback((key) => dictionary?.[key]?.[lang] || key, [lang, dictionary]),
+
+        sideNav,
+        setSideNav,
+
+        showNav,
+        setShowNav,
+
+        info,
+        openInfo: (info) => { setInfo(info) },
+        closeInfo: () => { setInfo(null) },
+
+        consoleLines,
+        showConsole,
+        toggleConsole: () => { setShowConsole(!showConsole) },
+        writeLog: (line) => {
+            const next = consoleLines.concat(line)
+            setConsoleLines(next)
+        },
+        clearLog: () => { setConsoleLines([]) },
+
+        breadcrumb,
+        setBreadcrumb,
+
+        page,
+        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) },
+        closeDialog: () => { setDialog(null) },
+
+        preview,
+        openPreview: (preview) => { setPreview(preview) },
+        closePreview: () => { setPreview(null) },
+
+        confirm: (props) => {
+            setPromptDialog(<ConfirmDialog {...props} />)
+        },
+
+        prompt: (message) => window.prompt(message),
+
+        promptDialog,
+        openPromptDialog: (dialog) => { setPromptDialog(dialog) },
+        closePromptDialog: () => { setPromptDialog(null) },
+
+    }), [lang, dictionary, sideNav, showNav, info, consoleLines, showConsole, breadcrumb, page, dialog, promptDialog, preview])
+
+    return (
+        <SiteContext.Provider value={value}>
+            {children}
+        </SiteContext.Provider>
+    )
+}
+
+/**
+ * Site
+ */
+export const Site = ({ icon, logo, title, headerBar, asideBar, footer, children, init, min, lang, dictionary }) => {
+    return (
+        <SiteErrorBoundary>
+            <SiteProvider siteLang={lang} siteDictionary={dictionary}>
+                <div className="site10">
+                    <SiteHeader icon={icon} logo={logo} title={title} >
+                        {headerBar}
+                    </SiteHeader>
+                    <SiteMenu title={title} min={min} >{children}</SiteMenu>
+                    <SitePage init={init}>
+                        {children}
+                        <Page id="EMPTY">EMPTY</Page>
+                    </SitePage>
+                    <SiteBar>{asideBar}</SiteBar>
+                    <SiteAside />
+                    <SiteDialog />
+                    <SitePromptDialog />
+                    <SitePreview />
+                    <SiteFooter>{footer}</SiteFooter>
+                </div>
+            </SiteProvider>
+        </SiteErrorBoundary>
+    )
+}
+
+/**
+ * Site Header
+ */
+const SiteHeader = (props) => {
+
+    const context = useContext(SiteContext)
+    const { sideNav, setSideNav } = context
+    const { icon = "equalizer", logo, title } = props
+
+    function toggleMenu() {
+        const next = sideNav === 'max' ? 'min' : 'max'
+        setSideNav(next)
+    }
+
+    return (
+        <Header icon={icon} iconAction={toggleMenu} logo={logo} title={title} />
+    )
+}
+
+/**
+ * Site Bar
+ */
+const SiteBar = ({ children }) => {
+    return (
+        <nav>
+            {children}
+        </nav>
+    )
+}
+
+/**
+ * Site Footer
+ */
+const SiteFooter = ({ children }) => {
+    return (
+        <footer>
+            {children}
+        </footer>
+    )
+}
+
+/**
+ * Site Aside
+ */
+const SiteAside = () => {
+    const context = useContext(SiteContext)
+    return context.info ? (
+        <aside>
+            {context.info}
+        </aside>
+    ) : ''
+}
+
+/**
+ * SiteMenu
+ */
+const SiteMenu = ({ iconSrc, title, children, min }) => {
+
+    const context = useContext(SiteContext)
+    const { page, sideNav, setSideNav, showNav } = context
+
+    useEffect(() => {
+        if (min) context.setSideNav('min')
+    }, [])
+
+    function toggle() {
+        const next = sideNav === 'max' ? 'min' : 'max'
+        setSideNav(next)
+    }
+
+    const goto = (id) => {
+        context.setShowNav(false)
+        context.goto(id)
+    }
+
+    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'
+    return (
+        <menu className={`${style} ${showNav ? 'show' : ''}`}>
+            <main >
+                {Object.keys(sections).map(title => (
+                    <Fragment key={title}>
+                        {title === 'undefined' ? '' : <div className={`section-title ${style}`}>{sideNav === "max" ? title : ''}</div>}
+                        {sections[title].map(({ id, icon = 'info', title }) => {
+                            const styleItem = id === page ? 'selected' : ''
+                            const titleTxt = context.translate(title)
+                            return (
+                                <div className={`site-menu-item ${styleItem}`} key={id} onClick={() => goto(id)}>
+                                    <Icon key={id} icon={icon} clickable />
+                                    {sideNav === 'max' ? <label>{titleTxt}</label> : null}
+                                </div>
+                            )
+                        })}
+                        <div className="section-divider" ></div>
+                    </Fragment>
+                ))}
+            </main>
+        </menu>
+    )
+}
+
+/**
+ * SitePage
+ */
+const SitePage = ({ children, init }) => {
+    const context = useContext(SiteContext)
+    const { page } = context
+    useEffect(() => {
+        if (init) {
+            context.goto(init)
+        } else {
+            context.goto("EMPTY")
+        }
+    }, [])
+    return (
+        <main>
+            {React.Children.toArray(children).filter(child => child.props ? child.props.id === page : false)}
+        </main>
+    )
+}
+
+/**
+ * Site Dialog
+ */
+const SiteDialog = () => {
+    const context = useContext(SiteContext)
+    return context.dialog ? context.dialog : ''
+}
+
+/**
+ * Site Promtp Dialog
+ */
+const SitePromptDialog = () => {
+    const context = useContext(SiteContext)
+    return context.promptDialog ? context.promptDialog : ''
+}
+
+/**
+ * Site Preview
+ */
+const SitePreview = () => {
+    const context = useContext(SiteContext)
+    return context.preview ? (
+        <div className="site-preview" >
+            {context.preview}
+        </div>
+    ) : ''
+}
+
+class SiteErrorBoundary extends React.Component {
+
+    constructor(props) {
+        super(props)
+        this.state = { hasError: false }
+    }
+
+    static getDerivedStateFromError(error) {
+        return { hasError: true, error }
+    }
+
+    componentDidCatch(error, errorInfo) {
+        console.error("SiteErrorBoundary >", error, errorInfo)
+    }
+
+    render() {
+        if (this.state.hasError) {
+
+            const { error } = this.state
+
+            return (
+                <div className="site-error">
+                    <h1>Site Error</h1>
+                    <p>Error {error.status}: {error.message}</p>
+                </div>
+            )
+        }
+        return this.props.children
+    }
+}