ywana-core8 0.1.56 → 0.1.58

package/dist/index.umd.js

@@ -1,13 +1,14 @@
 (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('react-notifications-component/dist/theme.css'), require('framer-motion/dist/framer-motion.cjs'), 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', 'framer-motion/dist/framer-motion.cjs', '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.motion, global.moment, global.momentRange, null, global.axios, global.deepEqual));
+})(this, (function (exports, materialDesignIcons_css, React, ResumableJS, RSwitch, reactNotificationsComponent, theme_css, motion, 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);
     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);
@@ -3357,6 +3358,8 @@
       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() {
@@ -3375,12 +3378,16 @@
           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;
       };
@@ -3390,6 +3397,7 @@
           setHistory(function (prev) {
             return prev.slice(0, -1);
           });
+          setDirection("right");
           setPage(lastPage);
           window.location.hash = lastPage;
         }
@@ -3402,6 +3410,9 @@
       };
     }
 
+    var AnimatePresence = motion__default["default"].AnimatePresence,
+      MotionDiv = motion__default["default"].motion;
+
     /**
      * Site Provider
      */
@@ -3704,7 +3715,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);
@@ -3712,9 +3724,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(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)));
     };
 
     /**