ywana-core8 0.1.58 → 0.1.60

package/dist/index.umd.js

@@ -1,14 +1,13 @@
 (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('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) {
+    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) {
     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);
@@ -3359,6 +3358,7 @@
         history = _useState2[0],
         setHistory = _useState2[1];
       var _useState3 = React.useState("left"),
+        direction = _useState3[0],
         setDirection = _useState3[1];
       var isFirstLoad = React.useRef(true);
       React.useEffect(function () {
@@ -3406,13 +3406,11 @@
         page: page,
         "goto": _goto,
         goBack: goBack,
-        history: history
+        history: history,
+        direction: direction
       };
     }
 
-    var AnimatePresence = motion__default["default"].AnimatePresence,
-      MotionDiv = motion__default["default"].motion;
-
     /**
      * Site Provider
      */
@@ -3456,7 +3454,8 @@
       var _useHashPage = useHashPage(),
         page = _useHashPage.page,
         _goto = _useHashPage["goto"],
-        goBack = _useHashPage.goBack;
+        goBack = _useHashPage.goBack,
+        direction = _useHashPage.direction;
       var value = {
         lang: lang,
         setLang: setLang,
@@ -3494,6 +3493,7 @@
         page: page,
         "goto": _goto,
         goBack: goBack,
+        direction: direction,
         dialog: dialog,
         openDialog: function openDialog(dialog) {
           setDialog(dialog);
@@ -3715,8 +3715,13 @@
       var children = _ref8.children,
         init = _ref8.init;
       var context = React.useContext(SiteContext);
-      var page = context.page,
-        direction = context.direction;
+      var page = context.page;
+      var _useState12 = React.useState(page),
+        renderedPage = _useState12[0],
+        setRenderedPage = _useState12[1];
+      var _useState13 = React.useState(''),
+        transitionClass = _useState13[0],
+        setTransitionClass = _useState13[1];
       React.useEffect(function () {
         if (init) {
           context["goto"](init);
@@ -3724,32 +3729,25 @@
           context["goto"]("EMPTY");
         }
       }, []);
-      var currentPage = React__default["default"].Children.toArray(children).filter(function (child) {
-        return child.props ? child.props.id === page : false;
+      React.useEffect(function () {
+        if (page !== renderedPage) {
+          setTransitionClass("page-out-" + context.direction);
+          setTimeout(function () {
+            setTransitionClass("page-in-" + context.direction);
+            setRenderedPage(page);
+            setTimeout(function () {
+              setTransitionClass('');
+            }, 300);
+          }, 300);
+          setRenderedPage(page);
+        }
+      }, [page]);
+      var currentPage = React.Children.toArray(children).filter(function (child) {
+        return child.props ? child.props.id === renderedPage : 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)));
+        className: "site-page-container " + transitionClass
+      }, currentPage);
     };
 
     /**
@@ -3935,10 +3933,10 @@
         _ref$style = _ref.style,
         style = _ref$style === void 0 ? {} : _ref$style;
       var _useContext = React.useContext(SiteContext),
-        _goto2 = _useContext["goto"];
+        _goto = _useContext["goto"];
       var handleClick = function handleClick(e) {
         e.preventDefault();
-        _goto2(page);
+        _goto(page);
       };
       return /*#__PURE__*/React__default["default"].createElement("a", {
         href: "#" + page,
@@ -12971,6 +12969,7 @@
     exports.WizardContext = WizardContext;
     exports.isEmpty = isEmpty;
     exports.isFunction = isFunction;
+    exports.useHashPage = useHashPage;
     exports.validatePassword = validatePassword;
 
 }));