ywana-core8 0.1.56 → 0.1.57

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.1.56",
+  "version": "0.1.57",
   "description": "ywana-core8",
   "homepage": "https://ywana.github.io/workspace",
   "author": "Ernesto Roldan Garcia",
@@ -36,6 +36,7 @@
     "axios": "^1.3.4",
     "crypto-js": "^4.1.1",
     "deep-equal": "^2.0.5",
+    "framer-motion": "^5.6.0",
     "material-design-icons-iconfont": "^6.7.0",
     "moment": "^2.29.1",
     "moment-range": "^4.0.2",

package/src/site/navigation.js

@@ -13,6 +13,7 @@ export function useHashPage(defaultPage = "home") {
 
     const [page, setPage] = useState(getCurrentPageFromURL())
     const [history, setHistory] = useState([])
+    const [direction, setDirection] = useState("left")
     const isFirstLoad = useRef(true)
 
     useEffect(() => {
@@ -30,10 +31,11 @@ export function useHashPage(defaultPage = "home") {
         return () => window.removeEventListener("hashchange", handleHashChange)
     }, [page])
 
-    const goto = (id) => {
+    const goto = (id, dir = "left") => {
         if (page) {
             setHistory(prev => [...prev, page])
         }
+        setDirection(dir)
         setPage(id)
         window.location.hash = id
     }
@@ -42,6 +44,7 @@ export function useHashPage(defaultPage = "home") {
         if (history.length > 0) {
             const lastPage = history[history.length - 1]
             setHistory(prev => prev.slice(0, -1))
+            setDirection("right")
             setPage(lastPage)
             window.location.hash = lastPage
         }

package/src/site/site.css

@@ -118,6 +118,11 @@
     align-items: center;
 }
 
+.site-page-container {
+    position:relative;
+    overflow: hidden;
+}
+
 .site6>main {
     grid-area: main;
     overflow: hidden;

package/src/site/site.js

@@ -7,6 +7,7 @@ import { Page } from './page'
 import { SiteContext } from './siteContext'
 import { ReactNotifications, Store } from 'react-notifications-component'
 import { useHashPage } from './navigation'
+import { AnimatePresence, motion } from 'framer-motion'
 import 'react-notifications-component/dist/theme.css'
 import './site.css'
 
@@ -253,7 +254,7 @@ const SiteMenu = ({ iconSrc, title, children, min }) => {
  */
 const SitePage = ({ children, init }) => {
     const context = useContext(SiteContext)
-    const { page } = context
+    const { page, direction } = context
     useEffect(() => {
         if (init) {
             context.goto(init)
@@ -261,9 +262,24 @@ 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
     return (
-        <main>
-            {React.Children.toArray(children).filter(child => child.props ? child.props.id === page : false)}
+        <main className='site-page-container'>
+            <AnimatePresence exitBeforeEnter>
+                {currentPage && (
+                    <motion.div
+                        key={page}
+                        initial={{ opacity: 0, x: xOffset }}
+                        animate={{ opacity: 1, x: 0 }}
+                        exit={{ opacity: 0, x: -xOffset }}
+                        transition={{ duration: 0.3 }}
+                    >
+                        {currentPage}
+                    </motion.div>
+                )}
+            </AnimatePresence>
         </main>
     )
 }