Merge pull request #71 from tpucci/canal/stop/type

Add FullScreen Portal

Author: tpucci

example/src/App.tsx

@@ -1,9 +1,14 @@
 import React, { Component } from 'react';
 import { SignIn } from './canals/SignIn';
+import { FullScreenPortal } from 'react-gondola';
 
 interface IProps {}
 export default class App extends Component<IProps> {
   render() {
-    return <SignIn />;
+    return (
+      <FullScreenPortal>
+        <SignIn />
+      </FullScreenPortal>
+    );
   }
 }

example/src/canals/SignIn/Confirm.tsx

@@ -0,0 +1,22 @@
+import React, { Component } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+interface IProps {}
+export class Confirm extends Component<IProps> {
+  render() {
+    return (
+      <View style={styles.container}>
+        <Text>Confim</Text>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    backgroundColor: '#FFFF99',
+    flex: 1,
+    justifyContent: 'center'
+  }
+});

example/src/canals/SignIn/SignIn.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { createCanal } from 'react-gondola';
 import { FirstName } from './FirstName';
 import { LastName } from './LastName';
+import { Confirm } from './Confirm';
 import { Observer } from 'mobx-react/native';
 import { fromStream } from 'mobx-utils';
 import { interval } from 'rxjs';
@@ -10,16 +11,26 @@ import { map } from 'rxjs/operators';
 // @ts-ignore
 const SignInCanal = createCanal([
   { name: 'firstName', Component: FirstName },
-  { name: 'lastName', Component: LastName }
+  { name: 'lastName', Component: LastName },
+  { name: 'confirm', Component: Confirm, isFullScreen: true }
 ]);
 
 export const SignIn = () => {
-  const delayedAuth = fromStream(
+  const lastNameAuth = fromStream(
+    interval(1000).pipe(map(tick => tick % 4 === 0 || (tick + 1) % 4 === 0))
+  );
+  const confirmAuth = fromStream(
     interval(1000).pipe(map(tick => tick % 2 === 0))
   );
   return (
     <Observer>
-      {() => <SignInCanal firstName lastName={delayedAuth.current} />}
+      {() => (
+        <SignInCanal
+          firstName
+          lastName={lastNameAuth.current}
+          confirm={confirmAuth.current}
+        />
+      )}
     </Observer>
   );
 };

example/src/canals/SignIn/__tests__/Confirm.test.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import TestRenderer from 'react-test-renderer';
+
+import { Confirm } from '../Confirm';
+
+describe('Confirm', () => {
+  it('renders correctly', () => {
+    const testRenderer = TestRenderer.create(<Confirm />);
+    expect(testRenderer.toJSON()).toMatchSnapshot();
+  });
+});

example/src/canals/SignIn/__tests__/__snapshots__/Confirm.test.tsx.snap

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Confirm renders correctly 1`] = `
+<View
+  style={
+    Object {
+      "alignItems": "center",
+      "backgroundColor": "#FFFF99",
+      "flex": 1,
+      "justifyContent": "center",
+    }
+  }
+>
+  <Text>
+    Confim
+  </Text>
+</View>
+`;

jest.config.js

@@ -13,4 +13,5 @@ module.exports = {
       statements: 100,
     },
   },
+  testPathIgnorePatterns: ['/node_modules/', '/__tests__/utils'],
 };

jest/setup.js

@@ -3,3 +3,5 @@ import { configure } from 'mobx';
 configure({
   enforceActions: 'observed',
 });
+
+Date.now = jest.fn(() => 0);

src/FullScreenPortal.tsx

@@ -0,0 +1,32 @@
+import React, { Component as ReactComponent, Fragment } from 'react';
+import { View, StyleSheet } from 'react-native';
+import { Observer } from 'mobx-react/native';
+import { fromStream } from 'mobx-utils';
+import { Navigation } from './Navigation';
+
+export class FullScreenPortal extends ReactComponent {
+  fullScreenStack = fromStream(Navigation.getInstance().fullSceenStack$);
+
+  render() {
+    return (
+      <View style={StyleSheet.absoluteFill}>
+        <Fragment>{this.props.children}</Fragment>
+        <Observer>
+          {() => {
+            if (this.fullScreenStack.current) {
+              return (
+                this.fullScreenStack.current &&
+                this.fullScreenStack.current.map(({ Component, name }) => (
+                  <View style={StyleSheet.absoluteFill} key={name}>
+                    <Component />
+                  </View>
+                ))
+              );
+            }
+            return null;
+          }}
+        </Observer>
+      </View>
+    );
+  }
+}

src/Navigation.ts

@@ -0,0 +1,59 @@
+import { Subject, Observable } from 'rxjs';
+import { ComponentType } from 'react';
+import { mergeAll, map, scan } from 'rxjs/operators';
+
+export interface IStop {
+  name: string;
+  Component: ComponentType;
+  isFullScreen?: boolean;
+}
+
+type Stack = IStop[];
+
+interface IFullScreenStackProperties {
+  canalId: string;
+  fullScreenStack: Stack;
+}
+
+interface IFullScreenStackMap {
+  [canalId: string]: Stack;
+}
+
+export class Navigation {
+  static getInstance() {
+    if (Navigation.instance) {
+      return Navigation.instance;
+    }
+    Navigation.instance = new Navigation();
+    return Navigation.instance;
+  }
+  private static instance: Navigation;
+
+  canalsFullScreenStackProperties$ = new Subject<
+    Observable<IFullScreenStackProperties>
+  >();
+
+  fullSceenStack$: Observable<
+    Stack
+  > = this.canalsFullScreenStackProperties$.pipe(
+    mergeAll(),
+    scan(
+      (
+        fullScreenStackMap: IFullScreenStackMap,
+        fullScreenStackProperties: IFullScreenStackProperties
+      ) => ({
+        ...fullScreenStackMap,
+        [fullScreenStackProperties.canalId]:
+          fullScreenStackProperties.fullScreenStack
+      }),
+      {}
+    ),
+    map(fullScreenStackMap =>
+      Object.keys(fullScreenStackMap).reduce(
+        (fullScreenStack: Stack, canalId: string) =>
+          fullScreenStack.concat(fullScreenStackMap[canalId]),
+        []
+      )
+    )
+  );
+}

src/__tests__/FullScreenPortal.test.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import TestRenderer from 'react-test-renderer';
+
+import { FullScreenPortal } from '../FullScreenPortal';
+
+describe('FullScreenPortal', () => {
+  it('renders the full screen portal', () => {
+    const testRenderer = TestRenderer.create(<FullScreenPortal />);
+    expect(testRenderer.toJSON()).toMatchSnapshot();
+  });
+});