ywana-core8 0.1.55 → 0.1.57

package/dist/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('material-design-icons-iconfont/dist/material-design-icons.css'), require('react'), require('resumablejs'), require('react-switch'), require('react-notifications-component'), require('react-notifications-component/dist/theme.css'), require('moment'), require('moment-range'), require('moment/locale/es'), require('axios'), require('deep-equal')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'material-design-icons-iconfont/dist/material-design-icons.css', 'react', 'resumablejs', 'react-switch', 'react-notifications-component', 'react-notifications-component/dist/theme.css', 'moment', 'moment-range', 'moment/locale/es', 'axios', 'deep-equal'], factory) :
-    (global = global || self, factory(global.ywanaCore8 = {}, null, global.react, global.resumablejs, global.reactSwitch, global.reactNotificationsComponent, null, global.moment, global.momentRange, null, global.axios, global.deepEqual));
-})(this, (function (exports, materialDesignIcons_css, React, ResumableJS, RSwitch, reactNotificationsComponent, theme_css, moment$1, momentRange, es, axios, equal) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('material-design-icons-iconfont/dist/material-design-icons.css'), require('react'), require('resumablejs'), require('react-switch'), require('react-notifications-component'), require('framer-motion'), require('react-notifications-component/dist/theme.css'), require('moment'), require('moment-range'), require('moment/locale/es'), require('axios'), require('deep-equal')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'material-design-icons-iconfont/dist/material-design-icons.css', 'react', 'resumablejs', 'react-switch', 'react-notifications-component', 'framer-motion', 'react-notifications-component/dist/theme.css', 'moment', 'moment-range', 'moment/locale/es', 'axios', 'deep-equal'], factory) :
+    (global = global || self, factory(global.ywanaCore8 = {}, null, global.react, global.resumablejs, global.reactSwitch, global.reactNotificationsComponent, global.framerMotion, null, global.moment, global.momentRange, null, global.axios, global.deepEqual));
+})(this, (function (exports, materialDesignIcons_css, React, ResumableJS, RSwitch, reactNotificationsComponent, framerMotion, theme_css, moment$1, momentRange, es, axios, equal) {
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
     var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
@@ -3340,6 +3340,75 @@
       }, 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 _useState3 = React.useState("left"),
+        setDirection = _useState3[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, dir) {
+        if (dir === void 0) {
+          dir = "left";
+        }
+        if (page) {
+          setHistory(function (prev) {
+            return [].concat(prev, [page]);
+          });
+        }
+        setDirection(dir);
+        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);
+          });
+          setDirection("right");
+          setPage(lastPage);
+          window.location.hash = lastPage;
+        }
+      };
+      return {
+        page: page,
+        "goto": _goto,
+        goBack: goBack,
+        history: history
+      };
+    }
+
     /**
      * Site Provider
      */
@@ -3380,30 +3449,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 +3462,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 +3488,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 +3642,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 +3680,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 +3691,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", {
@@ -3690,7 +3711,8 @@
       var children = _ref8.children,
         init = _ref8.init;
       var context = React.useContext(SiteContext);
-      var page = context.page;
+      var page = context.page,
+        direction = context.direction;
       React.useEffect(function () {
         if (init) {
           context["goto"](init);
@@ -3698,9 +3720,32 @@
           context["goto"]("EMPTY");
         }
       }, []);
-      return /*#__PURE__*/React__default["default"].createElement("main", null, React__default["default"].Children.toArray(children).filter(function (child) {
+      var currentPage = React__default["default"].Children.toArray(children).filter(function (child) {
         return child.props ? child.props.id === page : false;
-      }));
+      });
+      var xOffset = direction === "left" ? 40 : -40;
+      return /*#__PURE__*/React__default["default"].createElement("main", {
+        className: "site-page-container"
+      }, /*#__PURE__*/React__default["default"].createElement(framerMotion.AnimatePresence, {
+        exitBeforeEnter: true
+      }, currentPage && /*#__PURE__*/React__default["default"].createElement(framerMotion.motion.div, {
+        key: page,
+        initial: {
+          opacity: 0,
+          x: xOffset
+        },
+        animate: {
+          opacity: 1,
+          x: 0
+        },
+        exit: {
+          opacity: 0,
+          x: -xOffset
+        },
+        transition: {
+          duration: 0.3
+        }
+      }, currentPage)));
     };
 
     /**
@@ -3869,6 +3914,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 +12910,7 @@
     exports.MultiSelector = MultiSelector;
     exports.Page = Page;
     exports.PageContext = PageContext;
+    exports.PageLink = PageLink;
     exports.PageProvider = PageProvider;
     exports.PasswordEditor = PasswordEditor;
     exports.PasswordField = PasswordField;