diff options
| author | Andrew <saintruler@gmail.com> | 2019-03-11 21:00:02 +0400 |
|---|---|---|
| committer | Andrew <saintruler@gmail.com> | 2019-03-11 21:00:02 +0400 |
| commit | 7e7dd5244e8d26485ad7950a89c04c98c4fef83f (patch) | |
| tree | 810730c4650392080fb87a78d3b527201e89fe4b /frontend/app/config/navigation | |
Initial commit/
Diffstat (limited to 'frontend/app/config/navigation')
| -rw-r--r-- | frontend/app/config/navigation/propTypes.js | 15 | ||||
| -rw-r--r-- | frontend/app/config/navigation/routes.js | 269 | ||||
| -rw-r--r-- | frontend/app/config/navigation/routesBuilder.js | 62 | ||||
| -rw-r--r-- | frontend/app/config/navigation/transitions.js | 59 |
4 files changed, 405 insertions, 0 deletions
diff --git a/frontend/app/config/navigation/propTypes.js b/frontend/app/config/navigation/propTypes.js new file mode 100644 index 0000000..a7c6ffc --- /dev/null +++ b/frontend/app/config/navigation/propTypes.js @@ -0,0 +1,15 @@ +import PropTypes from 'prop-types'; + +const shape = (propShape) => PropTypes.shape(propShape); + +const functionTypes = { + goBack: PropTypes.func, + navigate: PropTypes.func, +}; + +const NavigationType = shape({ + goBack: functionTypes.goBack.isRequired, + navigate: functionTypes.navigate.isRequired, +}); + +export default NavigationType; diff --git a/frontend/app/config/navigation/routes.js b/frontend/app/config/navigation/routes.js new file mode 100644 index 0000000..6a75312 --- /dev/null +++ b/frontend/app/config/navigation/routes.js @@ -0,0 +1,269 @@ +import _ from 'lodash'; +import {FontIcons} from '../../assets/icons'; +import * as Screens from '../../screens/index'; + +export const MainRoutes = [ + { + id: 'LoginMenu', + title: 'Auth', + icon: FontIcons.login, + screen: Screens.LoginMenu, + children: [ + { + id: 'Login1', + title: 'Login V1', + screen: Screens.LoginV1, + children: [], + }, + { + id: 'Login2', + title: 'Login V2', + screen: Screens.LoginV2, + children: [], + }, + { + id: 'SignUp', + title: 'Sign Up', + screen: Screens.SignUp, + children: [], + }, + { + id: 'password', + title: 'Password Recovery', + screen: Screens.PasswordRecovery, + children: [], + }, + ], + }, + { + id: 'SocialMenu', + title: 'Social', + icon: FontIcons.profile, + screen: Screens.SocialMenu, + children: [ + { + id: 'ProfileV1', + title: 'User Profile V1', + screen: Screens.ProfileV1, + children: [], + }, + { + id: 'ProfileV2', + title: 'User Profile V2', + screen: Screens.ProfileV2, + children: [], + }, + { + id: 'ProfileV3', + title: 'User Profile V3', + screen: Screens.ProfileV3, + children: [], + }, + { + id: 'ProfileSettings', + title: 'Profile Settings', + screen: Screens.ProfileSettings, + children: [], + }, + { + id: 'Notifications', + title: 'Notifications', + screen: Screens.Notifications, + children: [], + }, + { + id: 'Contacts', + title: 'Contacts', + screen: Screens.Contacts, + children: [], + }, + { + id: 'Feed', + title: 'Feed', + screen: Screens.Feed, + children: [], + }, + ], + }, + { + id: 'ArticlesMenu', + title: 'Articles', + icon: FontIcons.article, + screen: Screens.ArticleMenu, + children: [ + { + id: 'Articles1', + title: 'Article List V1', + screen: Screens.Articles1, + children: [], + }, + { + id: 'Articles2', + title: 'Article List V2', + screen: Screens.Articles2, + children: [], + }, + { + id: 'Articles3', + title: 'Article List V3', + screen: Screens.Articles3, + children: [], + }, + { + id: 'Articles4', + title: 'Article List V4', + screen: Screens.Articles4, + children: [], + }, + { + id: 'Blogposts', + title: 'Blogposts', + screen: Screens.Blogposts, + children: [], + }, + { + id: 'Article', + title: 'Article View', + screen: Screens.Article, + children: [], + }, + ], + }, + { + id: 'MessagingMenu', + title: 'Messaging', + icon: FontIcons.mail, + screen: Screens.MessagingMenu, + children: [ + { + id: 'Chat', + title: 'Chat', + screen: Screens.Chat, + children: [], + }, + { + id: 'ChatList', + title: 'Chat List', + screen: Screens.ChatList, + children: [], + }, + { + id: 'Comments', + title: 'Comments', + screen: Screens.Comments, + children: [], + }, + ], + }, + { + id: 'DashboardsMenu', + title: 'Dashboards', + icon: FontIcons.dashboard, + screen: Screens.DashboardMenu, + children: [{ + id: 'Dashboard', + title: 'Dashboard', + screen: Screens.Dashboard, + children: [], + }], + }, + { + id: 'WalkthroughMenu', + title: 'Walkthroughs', + icon: FontIcons.mobile, + screen: Screens.WalkthroughMenu, + children: [{ + id: 'Walkthrough', + title: 'Walkthrough', + screen: Screens.WalkthroughScreen, + children: [], + }], + }, + { + id: 'EcommerceMenu', + title: 'Ecommerce', + icon: FontIcons.card, + screen: Screens.EcommerceMenu, + children: [ + { + id: 'Cards', + title: 'Cards', + icon: FontIcons.card, + screen: Screens.Cards, + children: [], + }, + { + id: 'AddProblem', + title: 'Add Card Form', + icon: FontIcons.addToCardForm, + screen: Screens.AddToCardForm, + children: [], + }, + + ], + }, + { + id: 'NavigationMenu', + icon: FontIcons.navigation, + title: 'Navigation', + screen: Screens.NavigationMenu, + children: [ + { + id: 'GridV1', + title: 'Grid Menu V1', + screen: Screens.GridV1, + children: [], + }, + { + id: 'GridV2', + title: 'Grid Menu V2', + screen: Screens.GridV2, + children: [], + }, + { + id: 'List', + title: 'List Menu', + screen: Screens.ListMenu, + children: [], + }, + { + id: 'Side', + title: 'Side Menu', + action: 'DrawerOpen', + screen: Screens.SideMenu, + children: [], + }, + ], + }, + { + id: 'OtherMenu', + title: 'Other', + icon: FontIcons.other, + screen: Screens.OtherMenu, + children: [ + { + id: 'Settings', + title: 'Settings', + screen: Screens.Settings, + children: [], + }, + ], + }, + { + id: 'Themes', + title: 'Themes', + icon: FontIcons.theme, + screen: Screens.Themes, + children: [], + }, +]; + +const menuRoutes = _.cloneDeep(MainRoutes); +menuRoutes.unshift({ + id: 'Walkthrough', + title: 'Walkthrough', + screen: Screens.WalkthroughScreen, + children: [], +}); + +export const MenuRoutes = menuRoutes; diff --git a/frontend/app/config/navigation/routesBuilder.js b/frontend/app/config/navigation/routesBuilder.js new file mode 100644 index 0000000..157a958 --- /dev/null +++ b/frontend/app/config/navigation/routesBuilder.js @@ -0,0 +1,62 @@ +import React from 'react'; +import _ from 'lodash'; +import { createStackNavigator } from 'react-navigation'; +import { withRkTheme } from 'react-native-ui-kitten'; +import { NavBar } from '../../components/index'; +import transition from './transitions'; +import { + MainRoutes, + MenuRoutes, +} from './routes'; + +const main = {}; +const flatRoutes = {}; + +const routeMapping = (route) => ({ + screen: withRkTheme(route.screen), + title: route.title, +}); + +(MenuRoutes).forEach(route => { + flatRoutes[route.id] = routeMapping(route); + main[route.id] = routeMapping(route); + route.children.forEach(nestedRoute => { + flatRoutes[nestedRoute.id] = routeMapping(nestedRoute); + }); +}); + +const renderHeader = (navigation, props) => { + const ThemedNavigationBar = withRkTheme(NavBar); + return ( + <ThemedNavigationBar navigation={navigation} headerProps={props} /> + ); +}; + +const DrawerRoutes = Object.keys(main).reduce((routes, name) => { + const rawRoutes = routes; + rawRoutes[name] = { + name, + screen: createStackNavigator(flatRoutes, { + initialRouteName: name, + headerMode: 'screen', + cardStyle: { backgroundColor: 'transparent' }, + transitionConfig: transition, + navigationOptions: ({ navigation }) => ({ + gesturesEnabled: false, + header: (props) => renderHeader(navigation, props), + }), + }), + }; + return rawRoutes; +}, {}); + +export const AppRoutes = DrawerRoutes; +export const LoginRoutes = _.find(MainRoutes, { id: 'LoginMenu' }).children; +export const NavigationRoutes = _.find(MainRoutes, { id: 'NavigationMenu' }).children; +export const SocialRoutes = _.find(MainRoutes, { id: 'SocialMenu' }).children; +export const ArticleRoutes = _.find(MainRoutes, { id: 'ArticlesMenu' }).children; +export const MessagingRoutes = _.find(MainRoutes, { id: 'MessagingMenu' }).children; +export const DashboardRoutes = _.find(MainRoutes, { id: 'DashboardsMenu' }).children; +export const WalkthroughRoutes = _.find(MainRoutes, { id: 'WalkthroughMenu' }).children; +export const EcommerceRoutes = _.find(MainRoutes, { id: 'EcommerceMenu' }).children; +export const OtherRoutes = _.find(MainRoutes, { id: 'OtherMenu' }).children; diff --git a/frontend/app/config/navigation/transitions.js b/frontend/app/config/navigation/transitions.js new file mode 100644 index 0000000..ff3d2fa --- /dev/null +++ b/frontend/app/config/navigation/transitions.js @@ -0,0 +1,59 @@ +import { + Dimensions, + Platform, +} from 'react-native'; + +const { width } = Dimensions.get('window'); + +const IosTransition = (index, position) => { + const inputRange = [index - 1, index, index + 0.99, index + 1]; + const outputRange = [width, 0, -10, -10]; + + const translateY = 0; + const translateX = position.interpolate({ + inputRange, + outputRange, + }); + + const opacity = position.interpolate({ + inputRange, + outputRange: [0, 1, 1, 0], + }); + return { + opacity, + transform: [{ translateX }, { translateY }], + }; +}; + +const DroidTransition = (index, position) => { + const inputRange = [index - 1, index, index + 0.99, index + 1]; + + const opacity = position.interpolate({ + inputRange, + outputRange: [0, 1, 1, 0], + }); + + const translateX = 0; + const translateY = position.interpolate({ + inputRange, + outputRange: [50, 0, 0, 0], + }); + + return { + opacity, + transform: [{ translateX }, { translateY }], + }; +}; + +function transition() { + return { + screenInterpolator: (sceneProps) => { + const { position, scene } = sceneProps; + const { index } = scene; + if (Platform.OS === 'ios') { return IosTransition(index, position); } + return DroidTransition(index, position); + }, + }; +} + +export default transition; |