ywana-core8 0.1.56 → 0.1.57

package/dist/index.cjs

@@ -3,6 +3,7 @@ var React = require('react');
 var ResumableJS = require('resumablejs');
 var RSwitch = require('react-switch');
 var reactNotificationsComponent = require('react-notifications-component');
+var framerMotion = require('framer-motion');
 require('react-notifications-component/dist/theme.css');
 var moment$1 = require('moment');
 var momentRange = require('moment-range');
@@ -3364,6 +3365,8 @@ function useHashPage(defaultPage) {
   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() {
@@ -3382,12 +3385,16 @@ function useHashPage(defaultPage) {
       return window.removeEventListener("hashchange", handleHashChange);
     };
   }, [page]);
-  var _goto = function _goto(id) {
+  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;
   };
@@ -3397,6 +3404,7 @@ function useHashPage(defaultPage) {
       setHistory(function (prev) {
         return prev.slice(0, -1);
       });
+      setDirection("right");
       setPage(lastPage);
       window.location.hash = lastPage;
     }
@@ -3711,7 +3719,8 @@ var SitePage = function SitePage(_ref8) {
   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);
@@ -3719,9 +3728,32 @@ var SitePage = function SitePage(_ref8) {
       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)));
 };
 
 /**