framework7-react 7.0.0-beta.2 → 7.0.0-beta.20

package/shared/plugin.js

@@ -1,11 +1,15 @@
 import Framework7 from 'framework7/lite';
-import componentsRouter from './components-router';
-import { f7, f7ready, theme, f7initEvents, setTheme } from './f7';
+import componentsRouter from './components-router.js';
+import { f7, f7ready, theme, f7initEvents, setTheme } from './f7.js';
 const Framework7React = {
   name: 'reactPlugin',
   installed: false,
 
-  install(params = {}) {
+  install(params) {
+    if (params === void 0) {
+      params = {};
+    }
+
     if (Framework7React.installed) return;
     Framework7React.installed = true;
     f7initEvents();

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/use-icon.js

@@ -1,7 +1,11 @@
 import React from 'react';
-import Icon from '../components/icon';
-import Badge from '../components/badge';
-export const useIcon = (props = {}) => {
+import Icon from '../components/icon.js';
+import Badge from '../components/badge.js';
+export const useIcon = function (props) {
+  if (props === void 0) {
+    props = {};
+  }
+
   const {
     icon,
     iconMaterial,

package/shared/use-route-props.js

@@ -1,7 +1,8 @@
 import { useEffect } from 'react';
-export const useRouteProps = (elRef, {
-  routeProps
-} = {}) => {
+export const useRouteProps = function (elRef, _temp) {
+  let {
+    routeProps
+  } = _temp === void 0 ? {} : _temp;
   useEffect(() => {
     if (elRef.current) {
       elRef.current.f7RouteProps = routeProps;

package/shared/use-smart-select.js

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
-import { f7ready, f7 } from './f7';
-import { extend } from './utils';
+import { f7ready, f7 } from './f7.js';
+import { extend } from './utils.js';
 export const useSmartSelect = (smartSelect, smartSelectParams, f7SmartSelect, getEl) => {
   const onMount = () => {
     f7ready(() => {

package/shared/use-store.js

@@ -1,15 +1,15 @@
 import { useState, useEffect, useRef } from 'react';
-import { f7 } from './f7';
-export const useStore = (...args) => {
+import { f7 } from './f7.js';
+export const useStore = function () {
   const assignedGetters = useRef({}); // (store, getter)
 
-  let store = args[0];
-  let getter = args[1];
+  let store = arguments.length <= 0 ? undefined : arguments[0];
+  let getter = arguments.length <= 1 ? undefined : arguments[1];
 
-  if (args.length === 1) {
+  if (arguments.length === 1) {
     // (getter)
     store = f7.store;
-    getter = args[0];
+    getter = arguments.length <= 0 ? undefined : arguments[0];
   } // eslint-disable-next-line
 
 

package/shared/use-tab.js

@@ -1,6 +1,6 @@
-import { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect';
-import { f7, f7ready } from './f7';
-import { emit } from './utils';
+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;

package/shared/use-theme.js

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

package/shared/use-tooltip.js

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from 'react';
-import { watchProp } from './watch-prop';
-import { f7, f7ready } from './f7';
+import { watchProp } from './watch-prop.js';
+import { f7, f7ready } from './f7.js';
 export const useTooltip = (elRef, props) => {
   const f7Tooltip = useRef(null);
   const {

package/shared/utils.js

@@ -14,11 +14,15 @@ export function isObject(o) {
 export function now() {
   return Date.now();
 }
-export function extend(...args) {
+export function extend() {
   let deep = true;
   let to;
   let from;
 
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+    args[_key] = arguments[_key];
+  }
+
   if (typeof args[0] === 'boolean') {
     [deep, to] = args;
     args.splice(0, 2);
@@ -57,15 +61,25 @@ export function extend(...args) {
 
   return to;
 }
-export function flattenArray(...args) {
+export function flattenArray() {
   const arr = [];
+
+  for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+    args[_key2] = arguments[_key2];
+  }
+
   args.forEach(arg => {
     if (Array.isArray(arg)) arr.push(...flattenArray(...arg));else arr.push(arg);
   });
   return arr;
 }
-export function classNames(...args) {
+export function classNames() {
   const classes = [];
+
+  for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+    args[_key3] = arguments[_key3];
+  }
+
   args.forEach(arg => {
     if (typeof arg === 'object' && arg.constructor === Object) {
       Object.keys(arg).forEach(key => {
@@ -79,7 +93,11 @@ export function classNames(...args) {
   });
   return uniqueClasses.join(' ');
 }
-export function getSlots(props = {}) {
+export function getSlots(props) {
+  if (props === void 0) {
+    props = {};
+  }
+
   const slots = {};
   if (!props) return slots;
   const children = props.children;
@@ -107,7 +125,11 @@ export function getSlots(props = {}) {
 
   return slots;
 }
-export function emit(props, events, ...args) {
+export function emit(props, events) {
+  for (var _len4 = arguments.length, args = new Array(_len4 > 2 ? _len4 - 2 : 0), _key4 = 2; _key4 < _len4; _key4++) {
+    args[_key4 - 2] = arguments[_key4];
+  }
+
   if (!events || !events.trim().length || typeof events !== 'string') return;
   events.trim().split(' ').forEach(event => {
     let eventName = (event || '').trim();
@@ -117,7 +139,11 @@ export function emit(props, events, ...args) {
     if (props[propName]) props[propName](...args);
   });
 }
-export function getExtraAttrs(props = {}) {
+export function getExtraAttrs(props) {
+  if (props === void 0) {
+    props = {};
+  }
+
   const extraAttrs = {};
   Object.keys(props).forEach(key => {
     if (key.indexOf('data-') === 0 || key.indexOf('aria-') === 0 || key === 'role') {

package/shared/watch-prop.js

@@ -1,5 +1,5 @@
 import { useRef } from 'react';
-import { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect';
+import { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect.js';
 export const watchProp = (value, callback) => {
   const valueRef = useRef(value);
   useIsomorphicLayoutEffect(() => {