ywana-core8 0.1.55 → 0.1.57

package/dist/index.modern.js

@@ -3,6 +3,7 @@ import React, { useContext, useState, useEffect, useCallback, Fragment, useRef,
 import ResumableJS from 'resumablejs';
 import RSwitch from 'react-switch';
 import { Store, ReactNotifications } from 'react-notifications-component';
+import { AnimatePresence, motion } from 'framer-motion';
 import 'react-notifications-component/dist/theme.css';
 import moment$1 from 'moment';
 import { extendMoment } from 'moment-range';
@@ -3338,6 +3339,75 @@ var Page = function Page(props) {
   }, 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 = useState(getCurrentPageFromURL()),
+    page = _useState[0],
+    setPage = _useState[1];
+  var _useState2 = useState([]),
+    history = _useState2[0],
+    setHistory = _useState2[1];
+  var _useState3 = useState("left"),
+    setDirection = _useState3[1];
+  var isFirstLoad = useRef(true);
+  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
  */
@@ -3378,30 +3448,10 @@ var SiteProvider = function SiteProvider(_ref) {
   var _useState11 = useState(),
     breadcrumb = _useState11[0],
     setBreadcrumb = _useState11[1];
-  var _useState12 = 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 = useState(getCurrentPageFromURL()),
-    page = _useState13[0],
-    setPage = _useState13[1];
-  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,
@@ -3411,15 +3461,6 @@ var SiteProvider = function SiteProvider(_ref) {
       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,
@@ -3446,27 +3487,8 @@ var SiteProvider = function SiteProvider(_ref) {
     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);
@@ -3619,7 +3641,7 @@ var SiteMenu = function SiteMenu(_ref6) {
     var next = sideNav === 'max' ? 'min' : 'max';
     setSideNav(next);
   }
-  var _goto = function _goto(id) {
+  var _goto2 = function _goto2(id) {
     context.setShowNav(false);
     context["goto"](id);
   };
@@ -3657,7 +3679,7 @@ var SiteMenu = function SiteMenu(_ref6) {
         className: "site-menu-item " + styleItem,
         key: id,
         onClick: function onClick() {
-          return _goto(id);
+          return _goto2(id);
         }
       }, /*#__PURE__*/React.createElement(Tooltip, {
         text: title,
@@ -3668,7 +3690,7 @@ var SiteMenu = function SiteMenu(_ref6) {
         icon: icon,
         clickable: true,
         action: function action() {
-          return _goto(id);
+          return _goto2(id);
         }
       })), sideNav === 'max' ? /*#__PURE__*/React.createElement("label", null, titleTxt) : null);
     }), /*#__PURE__*/React.createElement("div", {
@@ -3688,7 +3710,8 @@ var SitePage = function SitePage(_ref8) {
   var children = _ref8.children,
     init = _ref8.init;
   var context = useContext(SiteContext);
-  var page = context.page;
+  var page = context.page,
+    direction = context.direction;
   useEffect(function () {
     if (init) {
       context["goto"](init);
@@ -3696,9 +3719,32 @@ var SitePage = function SitePage(_ref8) {
       context["goto"]("EMPTY");
     }
   }, []);
-  return /*#__PURE__*/React.createElement("main", null, React.Children.toArray(children).filter(function (child) {
+  var currentPage = React.Children.toArray(children).filter(function (child) {
     return child.props ? child.props.id === page : false;
-  }));
+  });
+  var xOffset = direction === "left" ? 40 : -40;
+  return /*#__PURE__*/React.createElement("main", {
+    className: "site-page-container"
+  }, /*#__PURE__*/React.createElement(AnimatePresence, {
+    exitBeforeEnter: true
+  }, currentPage && /*#__PURE__*/React.createElement(motion.div, {
+    key: page,
+    initial: {
+      opacity: 0,
+      x: xOffset
+    },
+    animate: {
+      opacity: 1,
+      x: 0
+    },
+    exit: {
+      opacity: 0,
+      x: -xOffset
+    },
+    transition: {
+      duration: 0.3
+    }
+  }, currentPage)));
 };
 
 /**
@@ -3867,6 +3913,36 @@ var TabbedView = function TabbedView(props) {
   }, 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 = useContext(SiteContext),
+    _goto2 = _useContext["goto"];
+  var handleClick = function handleClick(e) {
+    e.preventDefault();
+    _goto2(page);
+  };
+  return /*#__PURE__*/React.createElement("a", {
+    href: "#" + page,
+    onClick: handleClick,
+    className: className,
+    style: style
+  }, children);
+};
+
 /**
  * Admin Change User Password Dialog
  */
@@ -12765,5 +12841,5 @@ var isFunction = function isFunction(value) {
   return value && (Object.prototype.toString.call(value) === "[object Function]" || "function" === typeof value || value instanceof Function);
 };
 
-export { Accordion, ActionButton, Avatar, Button, Calendar, ChangeUserPasswordAction, ChangeUserPasswordDialog, CheckBox, Chip, Chips, CircularProgress, CollectionAPI$1 as CollectionAPI, CollectionAPI as CollectionAPI2, CollectionContext$1 as CollectionContext, CollectionContext as CollectionContext2, CollectionEditor$2 as CollectionEditor, CollectionFilters$1 as CollectionFilters, CollectionPage$1 as CollectionPage, CollectionPage as CollectionPage2, CollectionTree, ColorField, Content, ContentEditor, ContentForm, ContentViewer, CreateContentDialog, DataTable, DateRange, Dialog, DropDown, DynamicForm, EditContentDialog, EmptyMessage, FORMATS$1 as FORMATS, FieldEditor, FileExplorer, FileExplorerView, FileGridItem, FilesGridView, FilesSearchBox, FilesTableView, FoldersTreeView, ForgetUserPasswordAction, Form, HTTPClient, Header, Icon, ImageViewer, Kanban, KanbanCard, KanbanColumn, KanbanHeader, KanbanSwimlane, LOGIN_API, LOGIN_CONTEXT, LOGIN_DICTIONARY, LinearProgress, List, ListEditor, LoginBox, Menu, MenuIcon, MenuItem, MenuSeparator, MonthCalendar, MultiSelector, Page, PageContext, PageProvider, PasswordEditor, PasswordField, Planner, Planner2, Property, RadioButton, ResetPasswordBox, Section, Session, Site, SiteContext, SiteProvider, Stack, Switch, Switch2, TASK_STATES, TEXTFORMATS, TYPES$1 as TYPES, Tab, TabbedContentEditor, TabbedTablePage, TabbedView, TableEditor$2 as TableEditor, TablePage, TablePage2, Tabs, TaskContext, TaskContextProvider, TaskMonitor, TaskProgress, Text, TextArea, TextField, Thumbnail, ToggleButton, TokenField, Tooltip, Tree, TreeItem, TreeNode, TreededContentEditor, UnlockUserAction, UploadArea, UploadDialog, UploadFile$1 as UploadFile, UploadForm, UploadIcon, Uploader, View, Viewer, WaitScreen, Wizard, WizardContext, isEmpty, isFunction, validatePassword };
+export { Accordion, ActionButton, Avatar, Button, Calendar, ChangeUserPasswordAction, ChangeUserPasswordDialog, CheckBox, Chip, Chips, CircularProgress, CollectionAPI$1 as CollectionAPI, CollectionAPI as CollectionAPI2, CollectionContext$1 as CollectionContext, CollectionContext as CollectionContext2, CollectionEditor$2 as CollectionEditor, CollectionFilters$1 as CollectionFilters, CollectionPage$1 as CollectionPage, CollectionPage as CollectionPage2, CollectionTree, ColorField, Content, ContentEditor, ContentForm, ContentViewer, CreateContentDialog, DataTable, DateRange, Dialog, DropDown, DynamicForm, EditContentDialog, EmptyMessage, FORMATS$1 as FORMATS, FieldEditor, FileExplorer, FileExplorerView, FileGridItem, FilesGridView, FilesSearchBox, FilesTableView, FoldersTreeView, ForgetUserPasswordAction, Form, HTTPClient, Header, Icon, ImageViewer, Kanban, KanbanCard, KanbanColumn, KanbanHeader, KanbanSwimlane, LOGIN_API, LOGIN_CONTEXT, LOGIN_DICTIONARY, LinearProgress, List, ListEditor, LoginBox, Menu, MenuIcon, MenuItem, MenuSeparator, MonthCalendar, MultiSelector, Page, PageContext, PageLink, PageProvider, PasswordEditor, PasswordField, Planner, Planner2, Property, RadioButton, ResetPasswordBox, Section, Session, Site, SiteContext, SiteProvider, Stack, Switch, Switch2, TASK_STATES, TEXTFORMATS, TYPES$1 as TYPES, Tab, TabbedContentEditor, TabbedTablePage, TabbedView, TableEditor$2 as TableEditor, TablePage, TablePage2, Tabs, TaskContext, TaskContextProvider, TaskMonitor, TaskProgress, Text, TextArea, TextField, Thumbnail, ToggleButton, TokenField, Tooltip, Tree, TreeItem, TreeNode, TreededContentEditor, UnlockUserAction, UploadArea, UploadDialog, UploadFile$1 as UploadFile, UploadForm, UploadIcon, Uploader, View, Viewer, WaitScreen, Wizard, WizardContext, isEmpty, isFunction, validatePassword };
 //# sourceMappingURL=index.modern.js.map