framework7-react 7.0.8 → 8.0.0-beta.1

package/shared/components-router.js

@@ -2,30 +2,24 @@
 import { f7events, f7routers } from './f7.js';
 import { extend, getComponentId } from './utils.js';
 import { routerOpenIn } from './router-open-in.js';
-
 const getChildrenArray = el => {
   const arr = [];
-
   for (let i = 0; i < el.children.length; i += 1) {
     arr.push(el.children[i]);
   }
-
   return arr;
 };
-
 const hasSameChildren = (childrenBefore, childrenAfter) => {
   if (childrenBefore.length !== childrenAfter.length) return false;
   const set = new Set([...childrenBefore, ...childrenAfter]);
   if (set.size === childrenBefore.length) return true;
   return false;
 };
-
 export default {
   proto: {
     openIn(router, navigateUrl, options) {
       return routerOpenIn(router, navigateUrl, options);
     },
-
     pageComponentLoader(_ref) {
       let {
         routerEl,
@@ -43,12 +37,10 @@ export default {
           viewRouter = data;
         }
       });
-
       if (!viewRouter) {
         reject();
         return;
       }
-
       const pageData = {
         component,
         id: getComponentId(),
@@ -59,7 +51,6 @@ export default {
       };
       let resolved;
       const childrenBefore = getChildrenArray(el);
-
       function onDidUpdate(componentRouterData) {
         if (componentRouterData !== viewRouter || resolved) return;
         const childrenAfter = getChildrenArray(el);
@@ -70,23 +61,19 @@ export default {
         resolve(pageEl);
         resolved = true;
       }
-
       f7events.on('viewRouterDidUpdate', onDidUpdate);
       viewRouter.pages.push(pageData);
       viewRouter.setPages(viewRouter.pages);
     },
-
     removePage($pageEl) {
       if (!$pageEl) return;
       const router = this;
       let f7Page;
       if ('length' in $pageEl && $pageEl[0]) f7Page = $pageEl[0].f7Page;else f7Page = $pageEl.f7Page;
-
       if (f7Page && f7Page.route && f7Page.route.route && f7Page.route.route.keepAlive) {
         router.app.$($pageEl).remove();
         return;
       }
-
       let viewRouter;
       f7routers.views.forEach(data => {
         if (data.el && data.el === router.el) {
@@ -94,7 +81,6 @@ export default {
         }
       });
       let pageEl;
-
       if ('length' in $pageEl) {
         // Dom7
         if ($pageEl.length === 0) return;
@@ -102,7 +88,6 @@ export default {
       } else {
         pageEl = $pageEl;
       }
-
       if (!pageEl) return;
       let pageComponentFound;
       viewRouter.pages.forEach((page, index) => {
@@ -112,12 +97,10 @@ export default {
           viewRouter.setPages(viewRouter.pages);
         }
       });
-
       if (!pageComponentFound) {
         pageEl.parentNode.removeChild(pageEl);
       }
     },
-
     tabComponentLoader(_temp) {
       let {
         tabEl,
@@ -134,12 +117,10 @@ export default {
           tabRouter = tabData;
         }
       });
-
       if (!tabRouter) {
         reject();
         return;
       }
-
       const id = getComponentId();
       const tabContent = {
         id,
@@ -150,7 +131,6 @@ export default {
         }, options.route.route && options.route.route.tab && options.route.route.tab.options && options.route.route.tab.options.props || {}, options.route.params, options.props || {})
       };
       let resolved;
-
       function onDidUpdate(componentRouterData) {
         if (componentRouterData !== tabRouter || resolved) return;
         f7events.off('tabRouterDidUpdate', onDidUpdate);
@@ -158,11 +138,9 @@ export default {
         resolve(tabContentEl);
         resolved = true;
       }
-
       f7events.on('tabRouterDidUpdate', onDidUpdate);
       tabRouter.setTabContent(tabContent);
     },
-
     removeTabContent(tabEl) {
       if (!tabEl) return;
       let tabRouter;
@@ -171,16 +149,12 @@ export default {
           tabRouter = tabData;
         }
       });
-
       if (!tabRouter) {
         tabEl.innerHTML = ''; // eslint-disable-line
-
         return;
       }
-
       tabRouter.setTabContent(null);
     },
-
     modalComponentLoader(_temp2) {
       let {
         component,
@@ -190,12 +164,10 @@ export default {
       } = _temp2 === void 0 ? {} : _temp2;
       const router = this;
       const modalsRouter = f7routers.modals;
-
       if (!modalsRouter) {
         reject();
         return;
       }
-
       const modalData = {
         component,
         id: getComponentId(),
@@ -205,7 +177,6 @@ export default {
         }, options.route.params, options.props || {})
       };
       let resolved;
-
       function onDidUpdate() {
         if (resolved) return;
         f7events.off('modalsRouterDidUpdate', onDidUpdate);
@@ -214,12 +185,10 @@ export default {
         resolve(modalEl);
         resolved = true;
       }
-
       f7events.on('modalsRouterDidUpdate', onDidUpdate);
       modalsRouter.modals.push(modalData);
       modalsRouter.setModals(modalsRouter.modals);
     },
-
     removeModal(modalEl) {
       const modalsRouter = f7routers.modals;
       if (!modalsRouter) return;
@@ -230,6 +199,5 @@ export default {
       modalsRouter.modals.splice(modalsRouter.modals.indexOf(modalDataToRemove), 1);
       modalsRouter.setModals(modalsRouter.modals);
     }
-
   }
 };

package/shared/f7.js

@@ -9,61 +9,49 @@ const f7routers = {
   tabs: [],
   modals: null
 };
-
 const setTheme = () => {
   if (!f7) return;
   theme.ios = f7.theme === 'ios';
   theme.md = f7.theme === 'md';
-  theme.aurora = f7.theme === 'aurora';
 };
-
 const cleanup = () => {
   unsetRouterIds();
   delete theme.ios;
   delete theme.md;
-  delete theme.aurora;
   f7routers.views = [];
   f7routers.tabs = [];
   f7routers.modals = null;
 };
-
 const f7initEvents = () => {
   f7events = new Framework7.Events();
 };
-
 const f7init = function (rootEl, params, init) {
   if (params === void 0) {
     params = {};
   }
-
   if (init === void 0) {
     init = true;
   }
-
   const f7Params = extend({}, params, {
     el: rootEl,
     init
   });
   if (typeof params.store !== 'undefined') f7Params.store = params.store;
   if (!f7Params.routes) f7Params.routes = [];
-
   if (f7Params.userAgent && (f7Params.theme === 'auto' || !f7Params.theme)) {
     const device = Framework7.getDevice({
       userAgent: f7Params.userAgent
     }, true);
     theme.ios = !!device.ios;
-    theme.aurora = device.desktop && device.electron;
-    theme.md = !theme.ios && !theme.aurora;
-  } // eslint-disable-next-line
-
-
-  if (f7 && typeof window !== 'undefined') return; // eslint-disable-next-line
-
+    theme.md = !theme.ios;
+  }
+  // eslint-disable-next-line
+  if (f7 && typeof window !== 'undefined') return;
+  // eslint-disable-next-line
   if (typeof window === 'undefined') cleanup();
   const instance = new Framework7(f7Params);
   f7 = instance;
   setTheme();
-
   if (instance.initialized) {
     f7 = instance;
     f7events.emit('ready', f7);
@@ -74,12 +62,10 @@ const f7init = function (rootEl, params, init) {
     });
   }
 };
-
 const f7ready = callback => {
   if (!callback) return;
   if (f7 && f7.initialized) callback(f7);else {
     f7events.once('ready', callback);
   }
 };
-
 export { f7, theme, f7ready, f7events, f7init, f7routers, f7initEvents, setTheme };

package/shared/get-router-initial-component.js

@@ -6,17 +6,14 @@ export const getRouterInitialComponent = (router, initialComponent) => {
   } = router.getInitialUrl();
   const initialRoute = router.findMatchingRoute(initialUrl);
   let routeProps = {};
-
   if (initialRoute && initialRoute.route && initialRoute.route.options) {
     routeProps = initialRoute.route.options.props;
   }
-
   const isMasterRoute = route => {
     if (route.master === true) return true;
     if (typeof route.master === 'function') return route.master(router.app);
     return false;
   };
-
   if (initialRoute && initialRoute.route && (initialRoute.route.component || initialRoute.route.asyncComponent) && !isMasterRoute(initialRoute.route)) {
     initialComponentData = {
       component: initialRoute.route.component || initialRoute.route.asyncComponent,
@@ -31,7 +28,6 @@ export const getRouterInitialComponent = (router, initialComponent) => {
       }
     };
   }
-
   return {
     initialPage: initialComponentData,
     initialRoute

package/shared/mixins.js

@@ -34,17 +34,13 @@ export function routerAttrs(props) {
     openIn
   } = props;
   let dataAnimate;
-
   if ('animate' in props && typeof animate !== 'undefined') {
     dataAnimate = animate.toString();
   }
-
   let dataReloadDetail;
-
   if ('reloadDetail' in props && typeof reloadDetail !== 'undefined') {
     dataReloadDetail = reloadDetail.toString();
   }
-
   return {
     'data-force': force || undefined,
     'data-reload-current': reloadCurrent || undefined,
@@ -133,8 +129,7 @@ export function actionsClasses(props) {
     sortableToggle,
     cardOpen,
     cardPreventOpen,
-    cardClose,
-    menuClose
+    cardClose
   } = props;
   return {
     'searchbar-enable': searchbarEnable || searchbarEnable === '',
@@ -159,7 +154,6 @@ export function actionsClasses(props) {
     'sortable-toggle': sortableToggle || sortableToggle === '',
     'card-close': cardClose || cardClose === '',
     'card-open': cardOpen || cardOpen === '',
-    'card-prevent-open': cardPreventOpen || cardPreventOpen === '',
-    'menu-close': menuClose || menuClose === ''
+    'card-prevent-open': cardPreventOpen || cardPreventOpen === ''
   };
 }

package/shared/plugin.js

@@ -4,12 +4,10 @@ import { f7, f7ready, theme, f7initEvents, setTheme } from './f7.js';
 const Framework7React = {
   name: 'reactPlugin',
   installed: false,
-
   install(params) {
     if (params === void 0) {
       params = {};
     }
-
     if (Framework7React.installed) return;
     Framework7React.installed = true;
     f7initEvents();
@@ -19,25 +17,21 @@ const Framework7React = {
     } = params;
     if (paramsTheme === 'md') theme.md = true;
     if (paramsTheme === 'ios') theme.ios = true;
-    if (paramsTheme === 'aurora') theme.aurora = true; // eslint-disable-next-line
 
+    // eslint-disable-next-line
     const needThemeCalc = typeof window === 'undefined' ? !!userAgent : true;
-
     if (needThemeCalc && (!paramsTheme || paramsTheme === 'auto')) {
       const device = Framework7.getDevice({
         userAgent
       }, true);
       theme.ios = !!device.ios;
-      theme.aurora = device.desktop && device.electron;
-      theme.md = !theme.ios && !theme.aurora;
+      theme.md = !theme.ios;
     }
-
     f7ready(() => {
       setTheme();
     });
     Framework7.Router.use(componentsRouter);
   }
-
 };
 export { f7ready, f7, theme };
 export default Framework7React;

package/shared/router-open-in.js

@@ -10,14 +10,15 @@ export const routerOpenIn = (router, url, options) => {
     url,
     route: {
       path: url,
-      options: { ...options,
+      options: {
+        ...options,
         openIn: undefined
       }
     }
   };
-  const params = { ...options
+  const params = {
+    ...options
   };
-
   if (options.openIn === 'popup') {
     params.component = function DynamicPopup() {
       return /*#__PURE__*/React.createElement(Popup, {
@@ -29,10 +30,8 @@ export const routerOpenIn = (router, url, options) => {
         ignoreOpenIn: true
       }));
     };
-
     navigateOptions.route.popup = params;
   }
-
   if (options.openIn === 'loginScreen') {
     params.component = function DynamicPopover() {
       return /*#__PURE__*/React.createElement(LoginScreen, {
@@ -44,10 +43,8 @@ export const routerOpenIn = (router, url, options) => {
         ignoreOpenIn: true
       }));
     };
-
     navigateOptions.route.loginScreen = params;
   }
-
   if (options.openIn === 'sheet') {
     params.component = function DynamicSheet() {
       return /*#__PURE__*/React.createElement(Sheet, {
@@ -59,13 +56,10 @@ export const routerOpenIn = (router, url, options) => {
         ignoreOpenIn: true
       }));
     };
-
     navigateOptions.route.sheet = params;
   }
-
   if (options.openIn === 'popover') {
     params.targetEl = options.clickedEl || options.targetEl;
-
     params.component = function DynamicPopover() {
       return /*#__PURE__*/React.createElement(Popover, {
         className: "popover-router-open-in",
@@ -77,15 +71,12 @@ export const routerOpenIn = (router, url, options) => {
         ignoreOpenIn: true
       }));
     };
-
     navigateOptions.route.popover = params;
   }
-
   if (options.openIn.indexOf('panel') >= 0) {
     const parts = options.openIn.split(':');
     const side = parts[1] || 'left';
     const effect = parts[2] || 'cover';
-
     params.component = function DynamicPanel() {
       return /*#__PURE__*/React.createElement(Panel, {
         side: side,
@@ -98,9 +89,7 @@ export const routerOpenIn = (router, url, options) => {
         ignoreOpenIn: true
       }));
     };
-
     navigateOptions.route.panel = params;
   }
-
   return router.navigate(navigateOptions);
 };

package/shared/tabbar-context.js

@@ -1,5 +1,5 @@
 import React from 'react';
 const TabbarContext = /*#__PURE__*/React.createContext({
-  tabbarHasLabels: false
+  tabbarHasIcons: false
 });
 export { TabbarContext };

package/shared/use-icon.js

@@ -5,35 +5,30 @@ export const useIcon = function (props) {
   if (props === void 0) {
     props = {};
   }
-
   const {
     icon,
     iconMaterial,
     iconF7,
     iconMd,
     iconIos,
-    iconAurora,
     iconColor,
     iconSize,
     iconBadge,
     badgeColor,
     iconBadgeColor
   } = props;
-
-  if (icon || iconMaterial || iconF7 || iconMd || iconIos || iconAurora) {
+  if (icon || iconMaterial || iconF7 || iconMd || iconIos) {
     return /*#__PURE__*/React.createElement(Icon, {
       material: iconMaterial,
       f7: iconF7,
       icon: icon,
       md: iconMd,
       ios: iconIos,
-      aurora: iconAurora,
       color: iconColor,
       size: iconSize
     }, (iconBadge || iconBadge === 0) && /*#__PURE__*/React.createElement(Badge, {
       color: badgeColor || iconBadgeColor
     }, iconBadge));
   }
-
   return null;
 };

package/shared/use-isomorphic-layout-effect.js

@@ -1,9 +1,7 @@
 import { useEffect, useLayoutEffect } from 'react';
-
 function useIsomorphicLayoutEffect(callback, deps) {
   // eslint-disable-next-line
   if (typeof window === 'undefined') return useEffect(callback, deps);
   return useLayoutEffect(callback, deps);
 }
-
 export { useIsomorphicLayoutEffect };

package/shared/use-route-props.js

@@ -7,7 +7,6 @@ export const useRouteProps = function (elRef, _temp) {
     if (elRef.current) {
       elRef.current.f7RouteProps = routeProps;
     }
-
     return () => {
       if (elRef.current && elRef.current.f7RouteProps) {
         delete elRef.current.f7RouteProps;

package/shared/use-smart-select.js

@@ -12,15 +12,12 @@ export const useSmartSelect = (smartSelect, smartSelectParams, f7SmartSelect, ge
       }
     });
   };
-
   const onDestroy = () => {
     if (f7SmartSelect.current && f7SmartSelect.current.destroy) {
       f7SmartSelect.current.destroy();
     }
-
     f7SmartSelect.current = null;
   };
-
   useEffect(() => {
     onMount();
     return onDestroy;

package/shared/use-store.js

@@ -1,30 +1,26 @@
 import { useState, useEffect, useRef } from 'react';
 import { f7 } from './f7.js';
 export const useStore = function () {
-  const assignedGetters = useRef({}); // (store, getter)
-
+  const assignedGetters = useRef({});
+  // (store, getter)
   let store = arguments.length <= 0 ? undefined : arguments[0];
   let getter = arguments.length <= 1 ? undefined : arguments[1];
-
   if (arguments.length === 1) {
     // (getter)
     store = f7.store;
     getter = arguments.length <= 0 ? undefined : arguments[0];
-  } // eslint-disable-next-line
-
+  }
 
+  // eslint-disable-next-line
   const obj = store._gettersPlain[getter];
   const [value, setValue] = useState(obj.value);
-
   function onUpdated(newValue) {
     setValue(newValue);
   }
-
   if (!assignedGetters.current[getter]) {
     obj.onUpdated(onUpdated);
     assignedGetters.current[getter] = true;
   }
-
   useEffect(() => {
     return () => {
       // eslint-disable-next-line

package/shared/use-tab.js

@@ -6,12 +6,10 @@ export const useTab = (elRef, props) => {
     if (elRef.current !== el) return;
     emit(props, 'tabShow', el);
   };
-
   const onTabHide = el => {
     if (elRef.current !== el) return;
     emit(props, 'tabHide', el);
   };
-
   const attachEvents = () => {
     if (!elRef.current) return;
     f7ready(() => {
@@ -19,13 +17,11 @@ export const useTab = (elRef, props) => {
       f7.on('tabHide', onTabHide);
     });
   };
-
   const detachEvents = () => {
     if (!f7) return;
     f7.off('tabShow', onTabShow);
     f7.off('tabHide', onTabHide);
   };
-
   useIsomorphicLayoutEffect(() => {
     attachEvents();
     return detachEvents;

package/shared/use-theme.js

@@ -2,12 +2,10 @@ import { useState } from 'react';
 import { f7, f7ready, theme } from './f7.js';
 export const useTheme = () => {
   const [t, setTheme] = useState(f7 ? theme : null);
-
   if (!f7) {
     f7ready(() => {
       setTheme(theme);
     });
   }
-
   return t;
 };

package/shared/use-tooltip.js

@@ -7,7 +7,6 @@ export const useTooltip = (elRef, props) => {
     tooltip,
     tooltipTrigger
   } = props;
-
   const onMount = () => {
     if (!elRef.current) return;
     if (!tooltip) return;
@@ -19,14 +18,12 @@ export const useTooltip = (elRef, props) => {
       });
     });
   };
-
   const onDestroy = () => {
     if (f7Tooltip.current && f7Tooltip.current.destroy) {
       f7Tooltip.current.destroy();
       f7Tooltip.current = null;
     }
   };
-
   useEffect(() => {
     onMount();
     return onDestroy;
@@ -37,7 +34,6 @@ export const useTooltip = (elRef, props) => {
       f7Tooltip.current = null;
       return;
     }
-
     if (value && !f7Tooltip.current && f7) {
       f7Tooltip.current = f7.tooltip.create({
         targetEl: elRef.current,
@@ -46,7 +42,6 @@ export const useTooltip = (elRef, props) => {
       });
       return;
     }
-
     if (!value || !f7Tooltip.current) return;
     f7Tooltip.current.setText(value);
   });