framework7-react 6.3.16 → 7.0.0-beta.12

package/{esm/shared → shared}/mixins.js

@@ -1,37 +1,45 @@
-import { isStringProp } from './utils';
+import { isStringProp } from './utils.js';
 export function colorClasses(props) {
-  var _ref;
-
-  var color = props.color,
-      colorTheme = props.colorTheme,
-      textColor = props.textColor,
-      bgColor = props.bgColor,
-      borderColor = props.borderColor,
-      rippleColor = props.rippleColor,
-      themeDark = props.themeDark;
-  return _ref = {
-    'theme-dark': themeDark
-  }, _ref["color-" + color] = color, _ref["color-theme-" + colorTheme] = colorTheme, _ref["text-color-" + textColor] = textColor, _ref["bg-color-" + bgColor] = bgColor, _ref["border-color-" + borderColor] = borderColor, _ref["ripple-color-" + rippleColor] = rippleColor, _ref;
+  const {
+    color,
+    colorTheme,
+    textColor,
+    bgColor,
+    borderColor,
+    rippleColor,
+    dark
+  } = props;
+  return {
+    dark,
+    [`color-${color}`]: color,
+    [`color-theme-${colorTheme}`]: colorTheme,
+    [`text-color-${textColor}`]: textColor,
+    [`bg-color-${bgColor}`]: bgColor,
+    [`border-color-${borderColor}`]: borderColor,
+    [`ripple-color-${rippleColor}`]: rippleColor
+  };
 }
 export function routerAttrs(props) {
-  var force = props.force,
-      reloadCurrent = props.reloadCurrent,
-      reloadPrevious = props.reloadPrevious,
-      reloadAll = props.reloadAll,
-      reloadDetail = props.reloadDetail,
-      animate = props.animate,
-      ignoreCache = props.ignoreCache,
-      routeTabId = props.routeTabId,
-      view = props.view,
-      transition = props.transition,
-      openIn = props.openIn;
-  var dataAnimate;
+  const {
+    force,
+    reloadCurrent,
+    reloadPrevious,
+    reloadAll,
+    reloadDetail,
+    animate,
+    ignoreCache,
+    routeTabId,
+    view,
+    transition,
+    openIn
+  } = props;
+  let dataAnimate;
 
   if ('animate' in props && typeof animate !== 'undefined') {
     dataAnimate = animate.toString();
   }
 
-  var dataReloadDetail;
+  let dataReloadDetail;
 
   if ('reloadDetail' in props && typeof reloadDetail !== 'undefined') {
     dataReloadDetail = reloadDetail.toString();
@@ -52,39 +60,43 @@ export function routerAttrs(props) {
   };
 }
 export function routerClasses(props) {
-  var back = props.back,
-      linkBack = props.linkBack,
-      external = props.external,
-      preventRouter = props.preventRouter;
+  const {
+    back,
+    linkBack,
+    external,
+    preventRouter
+  } = props;
   return {
     back: back || linkBack,
-    external: external,
+    external,
     'prevent-router': preventRouter
   };
 }
 export function actionsAttrs(props) {
-  var searchbarEnable = props.searchbarEnable,
-      searchbarDisable = props.searchbarDisable,
-      searchbarClear = props.searchbarClear,
-      searchbarToggle = props.searchbarToggle,
-      panelOpen = props.panelOpen,
-      panelClose = props.panelClose,
-      panelToggle = props.panelToggle,
-      popupOpen = props.popupOpen,
-      popupClose = props.popupClose,
-      actionsOpen = props.actionsOpen,
-      actionsClose = props.actionsClose,
-      popoverOpen = props.popoverOpen,
-      popoverClose = props.popoverClose,
-      loginScreenOpen = props.loginScreenOpen,
-      loginScreenClose = props.loginScreenClose,
-      sheetOpen = props.sheetOpen,
-      sheetClose = props.sheetClose,
-      sortableEnable = props.sortableEnable,
-      sortableDisable = props.sortableDisable,
-      sortableToggle = props.sortableToggle,
-      cardOpen = props.cardOpen,
-      cardClose = props.cardClose;
+  const {
+    searchbarEnable,
+    searchbarDisable,
+    searchbarClear,
+    searchbarToggle,
+    panelOpen,
+    panelClose,
+    panelToggle,
+    popupOpen,
+    popupClose,
+    actionsOpen,
+    actionsClose,
+    popoverOpen,
+    popoverClose,
+    loginScreenOpen,
+    loginScreenClose,
+    sheetOpen,
+    sheetClose,
+    sortableEnable,
+    sortableDisable,
+    sortableToggle,
+    cardOpen,
+    cardClose
+  } = props;
   return {
     'data-searchbar': isStringProp(searchbarEnable) && searchbarEnable || isStringProp(searchbarDisable) && searchbarDisable || isStringProp(searchbarClear) && searchbarClear || isStringProp(searchbarToggle) && searchbarToggle || undefined,
     'data-panel': isStringProp(panelOpen) && panelOpen || isStringProp(panelClose) && panelClose || isStringProp(panelToggle) && panelToggle || undefined,
@@ -98,30 +110,32 @@ export function actionsAttrs(props) {
   };
 }
 export function actionsClasses(props) {
-  var searchbarEnable = props.searchbarEnable,
-      searchbarDisable = props.searchbarDisable,
-      searchbarClear = props.searchbarClear,
-      searchbarToggle = props.searchbarToggle,
-      panelOpen = props.panelOpen,
-      panelClose = props.panelClose,
-      panelToggle = props.panelToggle,
-      popupOpen = props.popupOpen,
-      popupClose = props.popupClose,
-      actionsClose = props.actionsClose,
-      actionsOpen = props.actionsOpen,
-      popoverOpen = props.popoverOpen,
-      popoverClose = props.popoverClose,
-      loginScreenOpen = props.loginScreenOpen,
-      loginScreenClose = props.loginScreenClose,
-      sheetOpen = props.sheetOpen,
-      sheetClose = props.sheetClose,
-      sortableEnable = props.sortableEnable,
-      sortableDisable = props.sortableDisable,
-      sortableToggle = props.sortableToggle,
-      cardOpen = props.cardOpen,
-      cardPreventOpen = props.cardPreventOpen,
-      cardClose = props.cardClose,
-      menuClose = props.menuClose;
+  const {
+    searchbarEnable,
+    searchbarDisable,
+    searchbarClear,
+    searchbarToggle,
+    panelOpen,
+    panelClose,
+    panelToggle,
+    popupOpen,
+    popupClose,
+    actionsClose,
+    actionsOpen,
+    popoverOpen,
+    popoverClose,
+    loginScreenOpen,
+    loginScreenClose,
+    sheetOpen,
+    sheetClose,
+    sortableEnable,
+    sortableDisable,
+    sortableToggle,
+    cardOpen,
+    cardPreventOpen,
+    cardClose,
+    menuClose
+  } = props;
   return {
     'searchbar-enable': searchbarEnable || searchbarEnable === '',
     'searchbar-disable': searchbarDisable || searchbarDisable === '',

package/shared/modal-state-classes.js

@@ -0,0 +1,9 @@
+export const modalStateClasses = ({
+  isOpened,
+  isClosing
+} = {}) => {
+  return {
+    'modal-in': isOpened.current && !isClosing.current,
+    'modal-out': isClosing.current
+  };
+};

package/{esm/shared → shared}/plugin.js

@@ -1,40 +1,39 @@
 import Framework7 from 'framework7/lite';
-import componentsRouter from './components-router';
-import { f7, f7ready, theme, f7initEvents, setTheme } from './f7';
-var Framework7React = {
+import componentsRouter from './components-router.js';
+import { f7, f7ready, theme, f7initEvents, setTheme } from './f7.js';
+const Framework7React = {
   name: 'reactPlugin',
   installed: false,
-  install: function install(params) {
-    if (params === void 0) {
-      params = {};
-    }
 
+  install(params = {}) {
     if (Framework7React.installed) return;
     Framework7React.installed = true;
     f7initEvents();
-    var _params = params,
-        paramsTheme = _params.theme,
-        userAgent = _params.userAgent;
+    const {
+      theme: paramsTheme,
+      userAgent
+    } = params;
     if (paramsTheme === 'md') theme.md = true;
     if (paramsTheme === 'ios') theme.ios = true;
     if (paramsTheme === 'aurora') theme.aurora = true; // eslint-disable-next-line
 
-    var needThemeCalc = typeof window === 'undefined' ? !!userAgent : true;
+    const needThemeCalc = typeof window === 'undefined' ? !!userAgent : true;
 
     if (needThemeCalc && (!paramsTheme || paramsTheme === 'auto')) {
-      var device = Framework7.getDevice({
-        userAgent: userAgent
+      const device = Framework7.getDevice({
+        userAgent
       }, true);
       theme.ios = !!device.ios;
       theme.aurora = device.desktop && device.electron;
       theme.md = !theme.ios && !theme.aurora;
     }
 
-    f7ready(function () {
+    f7ready(() => {
       setTheme();
     });
     Framework7.Router.use(componentsRouter);
   }
+
 };
 export { f7ready, f7, theme };
 export default Framework7React;

package/shared/router-context.js

@@ -0,0 +1,6 @@
+import React from 'react';
+const RouterContext = /*#__PURE__*/React.createContext({
+  route: null,
+  router: null
+});
+export { RouterContext };

package/shared/router-open-in.js

@@ -0,0 +1,106 @@
+import React from 'react';
+import Popup from '../components/popup.js';
+import View from '../components/view.js';
+import LoginScreen from '../components/login-screen.js';
+import Sheet from '../components/sheet.js';
+import Popover from '../components/popover.js';
+import Panel from '../components/panel.js';
+export const routerOpenIn = (router, url, options) => {
+  const navigateOptions = {
+    url,
+    route: {
+      path: url,
+      options: { ...options,
+        openIn: undefined
+      }
+    }
+  };
+  const params = { ...options
+  };
+
+  if (options.openIn === 'popup') {
+    params.component = function DynamicPopup() {
+      return /*#__PURE__*/React.createElement(Popup, {
+        className: "popup-router-open-in",
+        "data-url": url
+      }, /*#__PURE__*/React.createElement(View, {
+        linksView: router.view.selector,
+        url: url,
+        ignoreOpenIn: true
+      }));
+    };
+
+    navigateOptions.route.popup = params;
+  }
+
+  if (options.openIn === 'loginScreen') {
+    params.component = function DynamicPopover() {
+      return /*#__PURE__*/React.createElement(LoginScreen, {
+        className: "login-screen-router-open-in",
+        "data-url": url
+      }, /*#__PURE__*/React.createElement(View, {
+        linksView: router.view.selector,
+        url: url,
+        ignoreOpenIn: true
+      }));
+    };
+
+    navigateOptions.route.loginScreen = params;
+  }
+
+  if (options.openIn === 'sheet') {
+    params.component = function DynamicSheet() {
+      return /*#__PURE__*/React.createElement(Sheet, {
+        className: "sheet-modal-router-open-in",
+        "data-url": url
+      }, /*#__PURE__*/React.createElement(View, {
+        linksView: router.view.selector,
+        url: url,
+        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",
+        targetEl: options.clickedEl || options.targetEl,
+        "data-url": url
+      }, /*#__PURE__*/React.createElement(View, {
+        linksView: router.view.selector,
+        url: url,
+        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,
+        effect: effect,
+        className: "panel-router-open-in",
+        "data-url": url
+      }, /*#__PURE__*/React.createElement(View, {
+        linksView: router.view.selector,
+        url: url,
+        ignoreOpenIn: true
+      }));
+    };
+
+    navigateOptions.route.panel = params;
+  }
+
+  return router.navigate(navigateOptions);
+};

package/shared/tabbar-context.js

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

package/{esm/shared → shared}/use-async-component.js

@@ -1,6 +1,6 @@
 import React, { lazy, Suspense } from 'react';
-export var useAsyncComponent = function useAsyncComponent(component, props, key) {
-  var Component = /*#__PURE__*/lazy(component);
+export const useAsyncComponent = (component, props, key) => {
+  const Component = /*#__PURE__*/lazy(component);
   return /*#__PURE__*/React.createElement(Suspense, {
     fallback: null,
     key: key

package/shared/use-icon.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import Icon from '../components/icon.js';
+import Badge from '../components/badge.js';
+export const useIcon = (props = {}) => {
+  const {
+    icon,
+    iconMaterial,
+    iconF7,
+    iconMd,
+    iconIos,
+    iconAurora,
+    iconColor,
+    iconSize,
+    iconBadge,
+    badgeColor,
+    iconBadgeColor
+  } = props;
+
+  if (icon || iconMaterial || iconF7 || iconMd || iconIos || iconAurora) {
+    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/{esm/shared → shared}/use-route-props.js

@@ -1,14 +1,13 @@
 import { useEffect } from 'react';
-export var useRouteProps = function useRouteProps(elRef, _temp) {
-  var _ref = _temp === void 0 ? {} : _temp,
-      routeProps = _ref.routeProps;
-
-  useEffect(function () {
+export const useRouteProps = (elRef, {
+  routeProps
+} = {}) => {
+  useEffect(() => {
     if (elRef.current) {
       elRef.current.f7RouteProps = routeProps;
     }
 
-    return function () {
+    return () => {
       if (elRef.current && elRef.current.f7RouteProps) {
         delete elRef.current.f7RouteProps;
       }

package/{esm/shared → shared}/use-smart-select.js

@@ -1,11 +1,11 @@
 import { useEffect } from 'react';
-import { f7ready, f7 } from './f7';
-import { extend } from './utils';
-export var useSmartSelect = function useSmartSelect(smartSelect, smartSelectParams, f7SmartSelect, getEl) {
-  var onMount = function onMount() {
-    f7ready(function () {
+import { f7ready, f7 } from './f7.js';
+import { extend } from './utils.js';
+export const useSmartSelect = (smartSelect, smartSelectParams, f7SmartSelect, getEl) => {
+  const onMount = () => {
+    f7ready(() => {
       if (smartSelect) {
-        var ssParams = extend({
+        const ssParams = extend({
           el: getEl()
         }, smartSelectParams || {});
         f7SmartSelect.current = f7.smartSelect.create(ssParams);
@@ -13,7 +13,7 @@ export var useSmartSelect = function useSmartSelect(smartSelect, smartSelectPara
     });
   };
 
-  var onDestroy = function onDestroy() {
+  const onDestroy = () => {
     if (f7SmartSelect.current && f7SmartSelect.current.destroy) {
       f7SmartSelect.current.destroy();
     }
@@ -21,7 +21,7 @@ export var useSmartSelect = function useSmartSelect(smartSelect, smartSelectPara
     f7SmartSelect.current = null;
   };
 
-  useEffect(function () {
+  useEffect(() => {
     onMount();
     return onDestroy;
   }, []);

package/shared/use-store.js

@@ -0,0 +1,35 @@
+import { useState, useEffect, useRef } from 'react';
+import { f7 } from './f7.js';
+export const useStore = (...args) => {
+  const assignedGetters = useRef({}); // (store, getter)
+
+  let store = args[0];
+  let getter = args[1];
+
+  if (args.length === 1) {
+    // (getter)
+    store = f7.store;
+    getter = args[0];
+  } // 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
+      store.__removeCallback(onUpdated);
+    };
+  }, []);
+  return value;
+};

package/{esm/shared → shared}/use-tab.js

@@ -1,32 +1,32 @@
-import { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect';
-import { f7, f7ready } from './f7';
-import { emit } from './utils';
-export var useTab = function useTab(elRef, props) {
-  var onTabShow = function onTabShow(el) {
+import { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect.js';
+import { f7, f7ready } from './f7.js';
+import { emit } from './utils.js';
+export const useTab = (elRef, props) => {
+  const onTabShow = el => {
     if (elRef.current !== el) return;
     emit(props, 'tabShow', el);
   };
 
-  var onTabHide = function onTabHide(el) {
+  const onTabHide = el => {
     if (elRef.current !== el) return;
     emit(props, 'tabHide', el);
   };
 
-  var attachEvents = function attachEvents() {
+  const attachEvents = () => {
     if (!elRef.current) return;
-    f7ready(function () {
+    f7ready(() => {
       f7.on('tabShow', onTabShow);
       f7.on('tabHide', onTabHide);
     });
   };
 
-  var detachEvents = function detachEvents() {
+  const detachEvents = () => {
     if (!f7) return;
     f7.off('tabShow', onTabShow);
     f7.off('tabHide', onTabHide);
   };
 
-  useIsomorphicLayoutEffect(function () {
+  useIsomorphicLayoutEffect(() => {
     attachEvents();
     return detachEvents;
   });

package/shared/use-theme.js

@@ -0,0 +1,13 @@
+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/{esm/shared → shared}/use-tooltip.js

@@ -1,15 +1,17 @@
 import { useEffect, useRef } from 'react';
-import { watchProp } from './watch-prop';
-import { f7, f7ready } from './f7';
-export var useTooltip = function useTooltip(elRef, props) {
-  var f7Tooltip = useRef(null);
-  var tooltip = props.tooltip,
-      tooltipTrigger = props.tooltipTrigger;
+import { watchProp } from './watch-prop.js';
+import { f7, f7ready } from './f7.js';
+export const useTooltip = (elRef, props) => {
+  const f7Tooltip = useRef(null);
+  const {
+    tooltip,
+    tooltipTrigger
+  } = props;
 
-  var onMount = function onMount() {
+  const onMount = () => {
     if (!elRef.current) return;
     if (!tooltip) return;
-    f7ready(function () {
+    f7ready(() => {
       f7Tooltip.current = f7.tooltip.create({
         targetEl: elRef.current,
         text: tooltip,
@@ -18,18 +20,18 @@ export var useTooltip = function useTooltip(elRef, props) {
     });
   };
 
-  var onDestroy = function onDestroy() {
+  const onDestroy = () => {
     if (f7Tooltip.current && f7Tooltip.current.destroy) {
       f7Tooltip.current.destroy();
       f7Tooltip.current = null;
     }
   };
 
-  useEffect(function () {
+  useEffect(() => {
     onMount();
     return onDestroy;
   }, []);
-  watchProp(tooltip, function (value) {
+  watchProp(tooltip, value => {
     if (!value && f7Tooltip.current) {
       f7Tooltip.current.destroy();
       f7Tooltip.current = null;