ecki/modernjs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Routing ready

Browse Source
This commit is contained in:
Federico Kereki
2018-09-13 21:23:38 -03:00
parent c4f6b0b629
commit d94877aba7
9 changed files with 377 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files
chapter11/App.js
+9 -7
View File
@@ -1,17 +1,19 @@
/* @flow */
import React from "react";
import { Provider } from "react-redux";
import { StatusBar } from "react-native";
import { store } from "./src/regionsStyledApp/store";
import { ConnectedMain } from "./src/regionsStyledApp/main.connected";
import { MyDrawer } from "./src/routingApp/drawer";
export default class App extends React.PureComponent<> {
class App extends React.Component {
render() {
return (
<Provider store={store}>
<ConnectedMain />
</Provider>
<React.Fragment>
<StatusBar hidden />
<MyDrawer />
</React.Fragment>
);
}
}
export default App;
chapter11/App.routing.js
+19
View File
@@ -0,0 +1,19 @@
/* @flow */
import React from "react";
import { StatusBar } from "react-native";
import { MyDrawer } from "./src/routingApp/drawer";
class App extends React.Component {
render() {
return (
<React.Fragment>
<StatusBar hidden />
<MyDrawer />
</React.Fragment>
);
}
}
export default App;
chapter11/__BORRAME__
-113
View File
@@ -1,113 +0,0 @@
http://iosres.com/
https://material.io/tools/devices/
http://screensiz.es/
https://www.sebastien-gabriel.com/designers-guide-to-dpi/
https://medium.com/@pnowelldesign/pixel-density-demystified-a4db63ba2922
POINTS in Apple, DIP (Density Independent Pixels) in Android
RN: unidad siempre es DIP, no se pone la unidad
import React from "react";
import PropTypes from "prop-types";
import { AppState, View } from "react-native";
class StatusHandler extends React.PureComponent {
static propTypes = {
setStatus: PropTypes.func.isRequired
};
componentDidMount() {
AppState.addEventListener("change", this.props.setStatus.bind(this));
this.props.setStatus(AppState.currentState);
}
render() {
return <View hidden />;
}
}
export { StatusHandler };
return (
<Provider>
<StatusBar hidden />
<ConnectedOnLayoutHandler />
<ConnectedOnStatusHandler />
<ConnectedKillSwitchHandler onSuccess={() => null} />
<TopLevelNavigator
ref={navigatorRef => NavigatorService.setContainer(navigatorRef)}
uriPrefix={Platform.OS == "android" ? "tbstntrn://tbstntrn/" : "tbstntrn://"}
/>
</Provider>
);
Todos los componentes que precisan estado se conectan a state.view.appLayout
import { HomeCardHandset } from "./homeCard.handset";
import { HomeCardTablet } from "./homeCard.tablet";
import { HomeCardTV } from "./homeCard.tv";
import { selectViewForFormFactor } from "../../utilities";
export const HomeCard = selectViewForFormFactor(HomeCardHandset, HomeCardTablet, HomeCardTV);
import React from "react";
import PropTypes from "prop-types";
// eslint-disable-next-line react/require-render-return
class HomeCardCommon extends React.PureComponent {
static propTypes = {
appLayout: PropTypes.string.isRequired,
...
};
render() {
throw new Error("MUST IMPLEMENT ABSTRACT render() METHOD");
}
}
export { HomeCardCommon };
action para layout:
export const resetLayout = ({ view: { ...rest } }) => ({
view: {
...rest,
appLayout: `${Dimensions.get("window").height}/${Dimensions.get("window").width}`
}
});
Todas las vistas son
render() { if FormFactor.isPortrait ... else ... }
chapter11/package-lock.json
Generated
+159 -23
View File
@@ -1,5 +1,5 @@
{
"name": "chapter10",
"name": "chapter11",
"version": "0.1.0",
"lockfileVersion": 1,
"requires": true,
@@ -3127,6 +3127,11 @@
"integrity": "sha512-UZK3NBx2Mca+b5LsG7bY183pHWt5Y1xts4P3Pz7ENTwGVnJOUWbRb3ocjvX7hx9tq/yTAdclXm9sZ38gNuem4A==",
"dev": true
},
"clamp": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/clamp/-/clamp-1.0.1.tgz",
"integrity": "sha1-ZqDmQBGBbjcZaCj9yMjBRzEshjQ="
},
"class-utils": {
"version": "0.3.6",
"resolved": "https://registry.npmjs.org/class-utils/-/class-utils-0.3.6.tgz",
@@ -3507,6 +3512,15 @@
"object-assign": "^4.1.1"
}
},
"create-react-context": {
"version": "0.2.2",
"resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.2.2.tgz",
"integrity": "sha512-KkpaLARMhsTsgp0d2NA/R94F/eDLbhXERdIq3LvX2biCAXcDvHYoOqHfWCHf1+OLj+HKBotLG3KqaOOf+C1C+A==",
"requires": {
"fbjs": "^0.8.0",
"gud": "^1.0.0"
}
},
"cross-spawn": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
@@ -5776,8 +5790,7 @@
},
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
"optional": true
"bundled": true
},
"aproba": {
"version": "1.2.0",
@@ -5795,13 +5808,11 @@
},
"balanced-match": {
"version": "1.0.0",
"bundled": true,
"optional": true
"bundled": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
@@ -5814,18 +5825,15 @@
},
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"optional": true
"bundled": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
"optional": true
"bundled": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"optional": true
"bundled": true
},
"core-util-is": {
"version": "1.0.2",
@@ -5928,8 +5936,7 @@
},
"inherits": {
"version": "2.0.3",
"bundled": true,
"optional": true
"bundled": true
},
"ini": {
"version": "1.3.5",
@@ -5939,7 +5946,6 @@
"is-fullwidth-code-point": {
"version": "1.0.0",
"bundled": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
@@ -5952,7 +5958,6 @@
"minimatch": {
"version": "3.0.4",
"bundled": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
@@ -6052,8 +6057,7 @@
},
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"optional": true
"bundled": true
},
"object-assign": {
"version": "4.1.1",
@@ -6063,7 +6067,6 @@
"once": {
"version": "1.4.0",
"bundled": true,
"optional": true,
"requires": {
"wrappy": "1"
}
@@ -6169,7 +6172,6 @@
"string-width": {
"version": "1.0.2",
"bundled": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
@@ -6187,7 +6189,6 @@
"strip-ansi": {
"version": "3.0.1",
"bundled": true,
"optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
@@ -6226,8 +6227,7 @@
},
"wrappy": {
"version": "1.0.2",
"bundled": true,
"optional": true
"bundled": true
},
"yallist": {
"version": "3.0.2",
@@ -6511,6 +6511,11 @@
"resolved": "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz",
"integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE="
},
"gud": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz",
"integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw=="
},
"handlebars": {
"version": "4.0.11",
"resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.0.11.tgz",
@@ -10008,6 +10013,15 @@
"resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
"integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA=="
},
"query-string": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/query-string/-/query-string-6.1.0.tgz",
"integrity": "sha512-pNB/Gr8SA8ff8KpUFM36o/WFAlthgaThka5bV19AD9PNTH20Pwq5Zxodif2YyHwrctp6SkL4GqlOot0qR/wGaw==",
"requires": {
"decode-uri-component": "^0.2.0",
"strict-uri-encode": "^2.0.0"
}
},
"querystring": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz",
@@ -10222,6 +10236,11 @@
"integrity": "sha512-rI3cGFj/obHbBz156PvErrS5xc6f1eWyTwyV4mo0vF2lGgXgS+mm7EKD5buLJq6jNgIagQescGSVG2YzgXt8Yg==",
"dev": true
},
"react-lifecycles-compat": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
},
"react-native": {
"version": "0.55.4",
"resolved": "https://registry.npmjs.org/react-native/-/react-native-0.55.4.tgz",
@@ -10442,6 +10461,27 @@
"resolved": "https://registry.npmjs.org/react-native-branch/-/react-native-branch-2.0.0-beta.3.tgz",
"integrity": "sha1-IWevhrvJ+WS9Rb1fN2hOW1SWXjI="
},
"react-native-dismiss-keyboard": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/react-native-dismiss-keyboard/-/react-native-dismiss-keyboard-1.0.0.tgz",
"integrity": "sha1-MohiQrPyMX4SHzrrmwpYXiuHm0k="
},
"react-native-drawer-layout": {
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/react-native-drawer-layout/-/react-native-drawer-layout-1.3.2.tgz",
"integrity": "sha512-fjO0scqbJUfNu2wuEpvywL7DYLXuCXJ2W/zYhWz986rdLytidbys1QGVvkaszHrb4Y7OqO96mTkgpOcP8KWevw==",
"requires": {
"react-native-dismiss-keyboard": "1.0.0"
}
},
"react-native-drawer-layout-polyfill": {
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/react-native-drawer-layout-polyfill/-/react-native-drawer-layout-polyfill-1.3.2.tgz",
"integrity": "sha512-XzPhfLDJrYHru+e8+dFwhf0FtTeAp7JXPpFYezYV6P1nTeA1Tia/kDpFT+O2DWTrBKBEI8FGhZnThrroZmHIxg==",
"requires": {
"react-native-drawer-layout": "1.3.2"
}
},
"react-native-gesture-handler": {
"version": "1.0.0-alpha.41",
"resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-1.0.0-alpha.41.tgz",
@@ -10507,6 +10547,14 @@
}
}
},
"react-native-safe-area-view": {
"version": "0.9.0",
"resolved": "https://registry.npmjs.org/react-native-safe-area-view/-/react-native-safe-area-view-0.9.0.tgz",
"integrity": "sha512-y792ScHMzvgwquxL869S9CER4dwiFu/TuCiXdy0xBtygmScMK4eWonnUT65LvOrsSSdr8o6XEK1mbI51h6ozvQ==",
"requires": {
"hoist-non-react-statics": "^2.3.1"
}
},
"react-native-safe-module": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/react-native-safe-module/-/react-native-safe-module-1.2.0.tgz",
@@ -10556,6 +10604,14 @@
"prop-types": "^15.5.10"
}
},
"react-native-tab-view": {
"version": "0.0.77",
"resolved": "https://registry.npmjs.org/react-native-tab-view/-/react-native-tab-view-0.0.77.tgz",
"integrity": "sha512-9vjD4Ly1Zlum1Y4g23ODpi/F3gYIUIsKWrsZO/Oh5cuX1eiB1DRVn11nY1z+j/hsQfhfyW6nDlmySyDvYQvYCA==",
"requires": {
"prop-types": "^15.6.0"
}
},
"react-native-vector-icons": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/react-native-vector-icons/-/react-native-vector-icons-4.5.0.tgz",
@@ -10574,6 +10630,81 @@
"react-google-maps": "^7.3.0"
}
},
"react-navigation": {
"version": "2.13.0",
"resolved": "https://registry.npmjs.org/react-navigation/-/react-navigation-2.13.0.tgz",
"integrity": "sha512-9O6RZSzQ0tvLakeUP6dJ/YXz8muQsLftmfeHakco3gbS2c3c1rXB6tKOdj8YzE/OGZxOG9OrY2gUR+jlk0KiHg==",
"requires": {
"clamp": "^1.0.1",
"create-react-context": "0.2.2",
"hoist-non-react-statics": "^2.2.0",
"path-to-regexp": "^1.7.0",
"query-string": "^6.1.0",
"react-lifecycles-compat": "^3",
"react-native-safe-area-view": "^0.9.0",
"react-navigation-deprecated-tab-navigator": "1.3.0",
"react-navigation-drawer": "0.5.0",
"react-navigation-stack": "0.3.0",
"react-navigation-tabs": "0.7.0"
},
"dependencies": {
"isarray": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
"integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
},
"path-to-regexp": {
"version": "1.7.0",
"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.7.0.tgz",
"integrity": "sha1-Wf3g9DW62suhA6hOnTvGTpa5k30=",
"requires": {
"isarray": "0.0.1"
}
}
}
},
"react-navigation-deprecated-tab-navigator": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/react-navigation-deprecated-tab-navigator/-/react-navigation-deprecated-tab-navigator-1.3.0.tgz",
"integrity": "sha512-Cm+qYOPFWbvvcuv0YYX0ioYwLGgw7XAqdhAfpo3sIr3trxRW8871ePmfFOPezjQtz4v6ItjZt6LPgtBAVZoroQ==",
"requires": {
"react-native-tab-view": "^0.0.77"
}
},
"react-navigation-drawer": {
"version": "0.5.0",
"resolved": "https://registry.npmjs.org/react-navigation-drawer/-/react-navigation-drawer-0.5.0.tgz",
"integrity": "sha512-F1y593uC6pqBMGH+Omz75oNODEbxB/s0EGO8QtYwu1NmOOEUuuLA+c14zm+pgMsI4HlDabiHxPkWqsgGz25xVQ==",
"requires": {
"react-native-drawer-layout-polyfill": "^1.3.2"
}
},
"react-navigation-stack": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/react-navigation-stack/-/react-navigation-stack-0.3.0.tgz",
"integrity": "sha512-zl1DDcJ24qX566wOXwXxZb3Z7MpJrDPCX4qD2yOybYx/uT05EVf7CP3gO/IKlk76IinozugqiiexNRzrvSKM2A=="
},
"react-navigation-tabs": {
"version": "0.7.0",
"resolved": "https://registry.npmjs.org/react-navigation-tabs/-/react-navigation-tabs-0.7.0.tgz",
"integrity": "sha512-tLOUu8kBqjS9jJjxz7Mq89A5C9d4mx2qa1YwTG7QTijQOjMSBLlohc5ZuexBtrZDwviiGz7KdRJR7zxvI7qO6A==",
"requires": {
"hoist-non-react-statics": "^2.5.0",
"prop-types": "^15.6.1",
"react-lifecycles-compat": "^3.0.4",
"react-native-tab-view": "^1.0.0"
},
"dependencies": {
"react-native-tab-view": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/react-native-tab-view/-/react-native-tab-view-1.0.2.tgz",
"integrity": "sha512-x8I43V1X7/AyMnIwnqJGMU54LqQRlV6vJ9irbls9asA/axdHIdxagPIV6Jx1ttFe/bPKhFwXL+lRYdYxGyUlWg==",
"requires": {
"prop-types": "^15.6.1"
}
}
}
},
"react-prop-types-element-of-type": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/react-prop-types-element-of-type/-/react-prop-types-element-of-type-2.2.0.tgz",
@@ -11933,6 +12064,11 @@
"debug": "2"
}
},
"strict-uri-encode": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
"integrity": "sha1-ucczDHBChi9rFC3CdLvMWGbONUY="
},
"string-length": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/string-length/-/string-length-2.0.0.tgz",
chapter11/package.json
+1
View File
@@ -36,6 +36,7 @@
"prop-types": "^15.6.2",
"react": "16.3.1",
"react-native": "~0.55.2",
"react-navigation": "^2.13.0",
"redux-thunk": "^2.3.0"
}
}
chapter11/src/regionsStyledApp/regionsTable.component.js
+76 -43
View File
@@ -1,55 +1,88 @@
/* @flow */
/* sssssflow */
/* eslint-disable */
import React from "react";
import PropTypes from "prop-types";
import { View, ScrollView, Text, StyleSheet } from "react-native";
import React, { Component } from "react";
import { Text, View, StatusBar, Button, StyleSheet } from "react-native";
import { createDrawerNavigator } from "react-navigation";
import type { deviceDataType } from "./device";
import { lowColor, fullSizeStyle } from "./styleConstants";
// import { store } from "./src/routingApp/store";
const ownStyle = StyleSheet.create({
grayish: {
backgroundColor: lowColor
const myStyles = StyleSheet.create({
fullView: {
flex: 1,
flexDirection: "column",
justifyContent: "center",
alignItems: "center"
},
bigText: {
fontSize: 24,
fontWeight: "bold"
}
});
export class RegionsTable extends React.PureComponent<{
deviceData: deviceDataType,
list: Array<{
regionCode: string,
regionName: string
}>
}> {
static propTypes = {
deviceData: PropTypes.object.isRequired,
list: PropTypes.arrayOf(PropTypes.object).isRequired
};
static defaultProps = {
list: []
};
render() {
if (this.props.list.length === 0) {
const makeSimpleView = text =>
class extends Component<{}> {
displayName = `View:${text}`;
render() {
return (
<View style={ownStyle.fullSize}>
<Text>No regions.</Text>
<View style={myStyles.fullView}>
<Text style={myStyles.bigText}>{text}</Text>
</View>
);
} else {
const ordered = [...this.props.list].sort(
(a, b) => (a.regionName < b.regionName ? -1 : 1)
);
return (
<ScrollView style={[fullSizeStyle, ownStyle.grayish]}>
{ordered.map(x => (
<View key={`${x.countryCode}-${x.regionCode}`}>
<Text>{x.regionName}</Text>
</View>
))}
</ScrollView>
);
}
};
const JumpButton = props => (
<Button
onPress={() => this.props.navigation.navigate("Charlie")}
title="Gotocharlie"
/>
);
const Home = makeSimpleView("Home!");
const Alpha = makeSimpleView("Alpha");
const Bravo = makeSimpleView("Bravo");
const Charlie = makeSimpleView("Charlie");
const Zulu = makeSimpleView("Zulu");
const Help = makeSimpleView("Help");
const LinkJump = props => (
<View style={{ flex: 1 }}>
<Button
onPress={() => props.navigation.navigate("Alpha")}
title="Go to Alpha"
/>
<Button
onPress={() => props.navigation.navigate("Bravo")}
title="Go to Bravo"
/>
<Button
onPress={() => props.navigation.navigate("Charlie")}
title="Go to Charlie"
/>
</View>
);
const MyDrawer = createDrawerNavigator({
Home: { screen: Home },
Alpha: { screen: Alpha },
Bravo: { screen: Bravo },
Charlie: { screen: Charlie },
Zulu: { screen: Zulu },
Help: { screen: Help },
LinkJump: { screen: LinkJump }
});
class App extends Component {
render() {
return (
<React.Fragment>
<StatusBar hidden />
<Text>Something in the top bar...!</Text>
<MyDrawer />
</React.Fragment>
);
}
}
export default App;
chapter11/src/routingApp/drawer.js
+29
View File
@@ -0,0 +1,29 @@
/* @flow */
import { createDrawerNavigator } from "react-navigation";
import {
Home,
Alpha,
Bravo,
Charlie,
Zulu,
Help,
SomeJumps
} from "./screens";
export const MyDrawer = createDrawerNavigator(
{
Home: { screen: Home },
Alpha: { screen: Alpha },
Bravo: { screen: Bravo },
Charlie: { screen: Charlie },
Zulu: { screen: Zulu },
["Get Help"]: { screen: Help },
["Some jumps"]: { screen: SomeJumps }
},
{
drawerBackgroundColor: "lightcyan",
drawerWidth: 140
}
);
chapter11/src/routingApp/hamburger.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

chapter11/src/routingApp/screens.js
+84
View File
@@ -0,0 +1,84 @@
/* @flow */
import React, { Component } from "react";
import {
Button,
Image,
StyleSheet,
Text,
TouchableOpacity,
View
} from "react-native";
const myStyles = StyleSheet.create({
fullSize: {
flex: 1
},
fullCenteredView: {
flex: 1,
flexDirection: "column",
justifyContent: "center",
alignItems: "center"
},
bigText: {
fontSize: 24,
fontWeight: "bold"
},
hamburger: {
width: 22,
height: 22,
alignSelf: "flex-end"
}
});
const makeSimpleView = text =>
class extends Component<{ navigation: object }> {
displayName = `View:${text}`;
render() {
return (
<View style={myStyles.fullSize}>
<TouchableOpacity
onPress={this.props.navigation.toggleDrawer}
>
<Image
source={require("./hamburger.png")}
style={myStyles.hamburger}
/>
</TouchableOpacity>
<View style={myStyles.fullCenteredView}>
<Text style={myStyles.bigText}>{text}</Text>
</View>
</View>
);
}
};
export const Home = makeSimpleView("Home");
export const Alpha = makeSimpleView("Alpha");
export const Bravo = makeSimpleView("Bravo");
export const Charlie = makeSimpleView("Charlie");
export const Zulu = makeSimpleView("Zulu");
export const Help = makeSimpleView("Help!");
export const SomeJumps = (props: object) => (
<View style={myStyles.fullSize}>
<Button
onPress={() => props.navigation.navigate("Alpha")}
title="Go to Alpha"
/>
<Button
onPress={() => props.navigation.navigate("Bravo")}
title="Leap to Bravo"
/>
<Button
onPress={() => props.navigation.navigate("Charlie")}
title="Jump to Charlie"
/>
</View>
);