ywana-core8 0.1.55 → 0.1.56

package/dist/index.umd.js

@@ -3340,6 +3340,68 @@
       }, children));
     };
 
+    /**
+     * Use Hash Page
+     */
+    function useHashPage(defaultPage) {
+      if (defaultPage === void 0) {
+        defaultPage = "home";
+      }
+      var getCurrentPageFromURL = function getCurrentPageFromURL() {
+        var hash = window.location.hash.replace("#", "");
+        return hash || defaultPage;
+      };
+      var _useState = React.useState(getCurrentPageFromURL()),
+        page = _useState[0],
+        setPage = _useState[1];
+      var _useState2 = React.useState([]),
+        history = _useState2[0],
+        setHistory = _useState2[1];
+      var isFirstLoad = React.useRef(true);
+      React.useEffect(function () {
+        var handleHashChange = function handleHashChange() {
+          var newPage = getCurrentPageFromURL();
+          if (!isFirstLoad.current) {
+            setHistory(function (prev) {
+              return [].concat(prev, [page]);
+            }); // Guarda la página anterior
+          } else {
+            isFirstLoad.current = false;
+          }
+          setPage(newPage);
+        };
+        window.addEventListener("hashchange", handleHashChange);
+        return function () {
+          return window.removeEventListener("hashchange", handleHashChange);
+        };
+      }, [page]);
+      var _goto = function _goto(id) {
+        if (page) {
+          setHistory(function (prev) {
+            return [].concat(prev, [page]);
+          });
+        }
+        setPage(id);
+        window.location.hash = id;
+      };
+      var goBack = function goBack() {
+        if (history.length > 0) {
+          var lastPage = history[history.length - 1];
+          setHistory(function (prev) {
+            return prev.slice(0, -1);
+          });
+          setPage(lastPage);
+          window.location.hash = lastPage;
+        }
+      };
+      return {
+        page: page,
+        "goto": _goto,
+        goBack: goBack,
+        history: history
+      };
+    }
+
     /**
      * Site Provider
      */
@@ -3380,30 +3442,10 @@
       var _useState11 = React.useState(),
         breadcrumb = _useState11[0],
         setBreadcrumb = _useState11[1];
-      var _useState12 = React.useState([]),
-        history = _useState12[0],
-        setHistory = _useState12[1];
-
-      // 📌 Extraer la página actual desde la URL (por defecto "home")
-      var getCurrentPageFromURL = function getCurrentPageFromURL() {
-        var path = window.location.pathname.replace("/", "");
-        return path || "home";
-      };
-      var _useState13 = React.useState(getCurrentPageFromURL()),
-        page = _useState13[0],
-        setPage = _useState13[1];
-      React.useEffect(function () {
-        // 📌 Detectar cambios en la URL cuando el usuario presiona "Atrás" o "Adelante"
-        var handlePopState = function handlePopState(event) {
-          var _event$state;
-          var previousPage = ((_event$state = event.state) == null ? void 0 : _event$state.page) || "home";
-          setPage(previousPage);
-        };
-        window.addEventListener("popstate", handlePopState);
-        return function () {
-          return window.removeEventListener("popstate", handlePopState);
-        };
-      }, []);
+      var _useHashPage = useHashPage(),
+        page = _useHashPage.page,
+        _goto = _useHashPage["goto"],
+        goBack = _useHashPage.goBack;
       var value = {
         lang: lang,
         setLang: setLang,
@@ -3413,15 +3455,6 @@
           var _dictionary$key;
           return (dictionary == null ? void 0 : (_dictionary$key = dictionary[key]) == null ? void 0 : _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: sideNav,
         setSideNav: setSideNav,
         showNav: showNav,
@@ -3448,27 +3481,8 @@
         breadcrumb: breadcrumb,
         setBreadcrumb: setBreadcrumb,
         page: page,
-        "goto": function goto(id) {
-          if (page) {
-            setHistory(function (prev) {
-              return [].concat(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: function goBack() {
-          if (history.length > 0) {
-            var lastPage = history[history.length - 1];
-            setHistory(function (prev) {
-              return 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
-          }
-        },
+        "goto": _goto,
+        goBack: goBack,
         dialog: dialog,
         openDialog: function openDialog(dialog) {
           setDialog(dialog);
@@ -3621,7 +3635,7 @@
         var next = sideNav === 'max' ? 'min' : 'max';
         setSideNav(next);
       }
-      var _goto = function _goto(id) {
+      var _goto2 = function _goto2(id) {
         context.setShowNav(false);
         context["goto"](id);
       };
@@ -3659,7 +3673,7 @@
             className: "site-menu-item " + styleItem,
             key: id,
             onClick: function onClick() {
-              return _goto(id);
+              return _goto2(id);
             }
           }, /*#__PURE__*/React__default["default"].createElement(Tooltip, {
             text: title,
@@ -3670,7 +3684,7 @@
             icon: icon,
             clickable: true,
             action: function action() {
-              return _goto(id);
+              return _goto2(id);
             }
           })), sideNav === 'max' ? /*#__PURE__*/React__default["default"].createElement("label", null, titleTxt) : null);
         }), /*#__PURE__*/React__default["default"].createElement("div", {
@@ -3869,6 +3883,36 @@
       }, children));
     };
 
+    /**
+     * PageLink - Navegación declarativa usando el sistema de hash
+     * 
+     * Props:
+     * - page: string → ID de la página a mostrar
+     * - children: ReactNode → contenido visual del enlace
+     * - className: string → clases opcionales
+     * - style: object → estilos en línea opcionales
+     */
+    var PageLink = function PageLink(_ref) {
+      var page = _ref.page,
+        children = _ref.children,
+        _ref$className = _ref.className,
+        className = _ref$className === void 0 ? '' : _ref$className,
+        _ref$style = _ref.style,
+        style = _ref$style === void 0 ? {} : _ref$style;
+      var _useContext = React.useContext(SiteContext),
+        _goto2 = _useContext["goto"];
+      var handleClick = function handleClick(e) {
+        e.preventDefault();
+        _goto2(page);
+      };
+      return /*#__PURE__*/React__default["default"].createElement("a", {
+        href: "#" + page,
+        onClick: handleClick,
+        className: className,
+        style: style
+      }, children);
+    };
+
     /**
      * Admin Change User Password Dialog
      */
@@ -12835,6 +12879,7 @@
     exports.MultiSelector = MultiSelector;
     exports.Page = Page;
     exports.PageContext = PageContext;
+    exports.PageLink = PageLink;
     exports.PageProvider = PageProvider;
     exports.PasswordEditor = PasswordEditor;
     exports.PasswordField = PasswordField;