ywana-core8 0.1.56 → 0.1.58

package/dist/index.cjs

@@ -4,6 +4,7 @@ var ResumableJS = require('resumablejs');
 var RSwitch = require('react-switch');
 var reactNotificationsComponent = require('react-notifications-component');
 require('react-notifications-component/dist/theme.css');
+var motion = require('framer-motion/dist/framer-motion.cjs');
 var moment$1 = require('moment');
 var momentRange = require('moment-range');
 require('moment/locale/es');
@@ -15,6 +16,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var ResumableJS__default = /*#__PURE__*/_interopDefaultLegacy(ResumableJS);
 var RSwitch__default = /*#__PURE__*/_interopDefaultLegacy(RSwitch);
+var motion__default = /*#__PURE__*/_interopDefaultLegacy(motion);
 var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment$1);
 var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
 var equal__default = /*#__PURE__*/_interopDefaultLegacy(equal);
@@ -3364,6 +3366,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 +3386,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 +3405,7 @@ function useHashPage(defaultPage) {
       setHistory(function (prev) {
         return prev.slice(0, -1);
       });
+      setDirection("right");
       setPage(lastPage);
       window.location.hash = lastPage;
     }
@@ -3409,6 +3418,9 @@ function useHashPage(defaultPage) {
   };
 }
 
+var AnimatePresence = motion__default["default"].AnimatePresence,
+  MotionDiv = motion__default["default"].motion;
+
 /**
  * Site Provider
  */
@@ -3711,7 +3723,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 +3732,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(AnimatePresence, {
+    exitBeforeEnter: true
+  }, currentPage && /*#__PURE__*/React__default["default"].createElement(MotionDiv, {
+    key: page,
+    initial: {
+      opacity: 0,
+      x: xOffset
+    },
+    animate: {
+      opacity: 1,
+      x: 0
+    },
+    exit: {
+      opacity: 0,
+      x: -xOffset
+    },
+    transition: {
+      duration: 0.3
+    }
+  }, currentPage)));
 };
 
 /**