Skip to content

Instantly share code, notes, and snippets.

@junkycoder
Created November 17, 2016 16:27

Revisions

  1. junkycoder created this gist Nov 17, 2016.
    35 changes: 35 additions & 0 deletions App.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,35 @@

    import React, { Component } from 'react';

    import Router from './Router';

    import NewDocument from './NewDocument';
    import DocumentsList from './DocumentsList';


    export default class App extends Component {

    state = {
    documents: [],
    newDocument: {

    },
    };

    render() {
    return (
    <Router>
    <NewDocument
    name="new"
    title='Nový doklad'
    document={this.state.newDocument}
    />
    <DocumentsList
    name="list"
    title='Seznam dokladů'
    documents={this.state.documents}
    />
    </Router>
    );
    }
    }
    48 changes: 48 additions & 0 deletions NavBar.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,48 @@
    import React from 'react';
    import {
    Text,
    Button,
    Navigator,
    } from 'react-native';

    const { NavigationBar } = Navigator;

    const createLeftButton = ({ goToLink }) => (route, navigator, index, navState) => {
    return (
    <Button
    title="vše"
    onPress={() => goToLink('list')}
    />
    );
    };

    const createRightButton = ({ goToLink }) => (route, navigator, index, navState) => {
    return (
    <Button
    title="nový"
    onPress={() => goToLink('new')}
    />
    );
    };

    const createTitle = () => (route, navigator, index, navState) => {
    return (
    <Text>{route.props.title}</Text>
    );
    };

    export default function NavBar({ navigator, navState, link }) {
    const goToLink = link(navigator);

    return (
    <NavigationBar
    navigator={navigator}
    navState={navState}
    routeMapper={{
    LeftButton: createLeftButton({ goToLink }),
    RightButton: createRightButton({ goToLink }),
    Title: createTitle(),
    }}
    />
    );
    }
    21 changes: 21 additions & 0 deletions NewDocument.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,21 @@
    import React, { Component, PropTypes } from 'react';
    import {
    Text,
    } from 'react-native';

    import { documentType } from '../types';

    const {
    arrayOf,
    } = PropTypes;

    export default class DocumentsList extends Component {

    static propTypes = {
    documents: arrayOf(documentType)
    }

    render() {
    return <Text style={{ padding: 50 }}>Seznam dokumentů</Text>;
    }
    }
    50 changes: 50 additions & 0 deletions Router.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,50 @@
    import React, { Component } from 'react';
    import {
    Navigator,
    } from 'react-native';

    const { NavigationBar } = Navigator;

    import NavBar from './NavBar';

    export default class Router extends Component {

    defaultRoute() {
    const route = Object.create(this.props.children[0], {});
    // console.log(Object.isExtensible(route)); // === true

    return route;
    }

    scene() {
    return (route, navigator) => {
    return React.cloneElement(route, {
    goToLink: this.link(navigator)
    });
    }
    }

    link(navigator) {
    let routesByName = {};

    this.props.children.forEach(route => (
    routesByName[route.props.name] = route
    ));

    return routeName => navigator.replace(
    Object.create(routesByName[routeName], {})
    );
    }

    render() {
    const goToLink = navigator => this.link(navigator)

    return (
    <Navigator
    initialRoute={this.defaultRoute()}
    renderScene={this.scene()}
    navigationBar={<NavBar link={goToLink} />}
    />
    );
    }
    }