feat(react): support open-in functionality with react components router

Author: nolimits4web

src/react/shared/components-router.js

@@ -1,6 +1,7 @@
 /* eslint no-underscore-dangle: "off" */
 import { f7events, f7routers } from './f7';
 import { extend, getComponentId } from './utils';
+import { routerOpenIn } from './router-open-in';
 
 const getChildrenArray = (el) => {
   const arr = [];
@@ -18,6 +19,9 @@ const hasSameChildren = (childrenBefore, childrenAfter) => {
 
 export default {
   proto: {
+    openIn(router, navigateUrl, options) {
+      return routerOpenIn(router, navigateUrl, options);
+    },
     pageComponentLoader({ routerEl, component, options, resolve, reject }) {
       const router = this;
       const routerId = router.id;

src/react/shared/router-open-in.jsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import Popup from '../components/popup';
+import View from '../components/view';
+import LoginScreen from '../components/login-screen';
+import Sheet from '../components/sheet';
+import Popover from '../components/popover';
+import Panel from '../components/panel';
+
+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 (
+        <Popup className="popup-router-open-in" data-url={url}>
+          <View linksView={router.view.selector} url={url} ignoreOpenIn />
+        </Popup>
+      );
+    };
+    navigateOptions.route.popup = params;
+  }
+  if (options.openIn === 'loginScreen') {
+    params.component = function DynamicPopover() {
+      return (
+        <LoginScreen className="login-screen-router-open-in" data-url={url}>
+          <View linksView={router.view.selector} url={url} ignoreOpenIn />
+        </LoginScreen>
+      );
+    };
+    navigateOptions.route.loginScreen = params;
+  }
+  if (options.openIn === 'sheet') {
+    params.component = function DynamicSheet() {
+      return (
+        <Sheet className="sheet-modal-router-open-in" data-url={url}>
+          <View linksView={router.view.selector} url={url} ignoreOpenIn />
+        </Sheet>
+      );
+    };
+    navigateOptions.route.sheet = params;
+  }
+  if (options.openIn === 'popover') {
+    params.targetEl = options.clickedEl || options.targetEl;
+    params.component = function DynamicPopover() {
+      return (
+        <Popover
+          className="popover-router-open-in"
+          targetEl={options.clickedEl || options.targetEl}
+          data-url={url}
+        >
+          <View linksView={router.view.selector} url={url} ignoreOpenIn />
+        </Popover>
+      );
+    };
+    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.targetEl = options.clickedEl || options.targetEl;
+    params.component = function DynamicPanel() {
+      return (
+        <Panel side={side} effect={effect} className="panel-router-open-in" data-url={url}>
+          <View linksView={router.view.selector} url={url} ignoreOpenIn />
+        </Panel>
+      );
+    };
+    navigateOptions.route.panel = params;
+  }
+  return router.navigate(navigateOptions);
+};