admin/imexmobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed hooks issue for useNavigation + added swipeable

Browse Source
This commit is contained in:
Patrick Fic
2020-08-13 11:14:39 -07:00
parent 7cc384e7ff
commit 4d50906b48
12 changed files with 222 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
babel-translations.babel
View File

@@ -81,6 +81,32 @@
<folder_node>
<name>joblist</name>
<children>
<folder_node>
<name>actions</name>
<children>
<concept_node>
<name>swipecamera</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
</children>
</folder_node>
<folder_node>
<name>labels</name>
<children>
@@ -105,6 +131,27 @@
</translation>
</translations>
</concept_node>
<concept_node>
<name>detail</name>
<definition_loaded>false</definition_loaded>
<description></description>
<comment></comment>
<default_text></default_text>
<translations>
<translation>
<language>en-US</language>
<approved>false</approved>
</translation>
<translation>
<language>es-MX</language>
<approved>false</approved>
</translation>
<translation>
<language>fr-CA</language>
<approved>false</approved>
</translation>
</translations>
</concept_node>
</children>
</folder_node>
<folder_node>

15
components/flat-list-item-separator/flat-list-item-separator.component.jsx Normal file
View File

@@ -0,0 +1,15 @@
import React from "react";
import { View, Text } from "react-native";
export default function FlatListItemSeparator() {
return (
<View
style={{
height: 1,
width: "100%",
backgroundColor: "#000",
opacity: 0.2,
}}
/>
);
}

64
components/job-list-item/job-list-item.component.jsx Normal file
View File

@@ -0,0 +1,64 @@
import { Card, CardItem, H3, SwipeRow } from "native-base";
import React from "react";
import { StyleSheet, Text, View } from "react-native";
import { useNavigation } from "@react-navigation/native";
import Swipeable from "react-native-gesture-handler/Swipeable";
import { useTranslation } from "react-i18next";
import { Ionicons } from "@expo/vector-icons";
import styles from "../styles";
const RenderRightAction = (props) => {
const { t } = useTranslation();
return (
<View style={[styles.swipe_view, styles.swipe_view_blue]}>
<Ionicons name="ios-camera" size={24} color="white" />
<Text style={styles.swipe_text}>{t("joblist.actions.swipecamera")}</Text>
</View>
);
};
export default function JobListItem({ item }) {
console.log("JobListItem -> item", item);
const navigation = useNavigation();
const onPress = () => {
navigation.push("JobDetail", {
jobId: item.id,
title: item.ro_number ? item.ro_number : `EST-${item.est_number}`,
});
};
return (
<Swipeable renderRightActions={() => <RenderRightAction />}>
<Card>
<CardItem header bordered first button onPress={onPress}>
<View style={localStyles.item_header}>
<H3 style={localStyles.item_header_content}>
{item.ro_number ? item.ro_number : `EST-${item.est_number}`}
</H3>
<Text style={localStyles.item_header_margin}>
{item.clm_no || ""}
</Text>
</View>
</CardItem>
<CardItem bordered last button>
<View>
<Text>{`${item.ownr_fn || ""} ${item.ownr_ln || ""} ${
item.ownr_co_nm || ""
}`}</Text>
<Text>{`${item.v_model_yr || ""} ${item.v_make_desc || ""} ${
item.v_model_desc || ""
}`}</Text>
</View>
</CardItem>
</Card>
</Swipeable>
);
}
const localStyles = StyleSheet.create({
item_header: {
flexDirection: "row",
alignItems: "center",
},
item_header_margin: { marginLeft: 10 },
});

55
components/job-list/job-list.component.jsx
View File

@@ -1,30 +1,15 @@
import { useQuery } from "@apollo/client";
import React from "react";
import {
View,
Text,
ActivityIndicator,
ListView,
RefreshControl,
} from "react-native";
import { RefreshControl } from "react-native";
import { FlatList } from "react-native-gesture-handler";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectBodyshop } from "../../redux/user/user.selectors";
import { useQuery } from "@apollo/client";
import { QUERY_ALL_ACTIVE_JOBS } from "../../graphql/jobs.queries";
import styles from "../styles";
import {
Container,
Content,
Card,
CardItem,
Icon,
Right,
H1,
} from "native-base";
import { FlatList } from "react-native-gesture-handler";
import { selectBodyshop } from "../../redux/user/user.selectors";
import ErrorDisplay from "../error-display/error-display.component";
import LoadingDisplay from "../loading-display/loading-display.component";
import JobListItem from "../job-list-item/job-list-item.component";
import { useNavigation } from "@react-navigation/native";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop,
@@ -39,7 +24,7 @@ export function JobListComponent({ bodyshop }) {
});
const onRefresh = async () => {
await refetch();
return refetch();
};
if (loading) return <LoadingDisplay />;
@@ -52,32 +37,10 @@ export function JobListComponent({ bodyshop }) {
}
style={{ flex: 1 }}
data={data ? data.jobs : []}
renderItem={renderItem}
renderItem={(object) => <JobListItem item={object.item} />}
//ItemSeparatorComponent={FlatListItemSeparator}
/>
);
}
const renderItem = ({ item }) => {
return (
<CardItem>
<View>
<H1>{`${item.est_number}${
item.ro_number ? ` ${item.ro_number}` : ""
}`}</H1>
<Text>{`${item.ownr_fn || ""} ${item.ownr_ln || ""} ${
item.ownr_co_nm || ""
}`}</Text>
<Text>{`${item.v_model_yr || ""} ${item.v_make_desc || ""} ${
item.v_model_desc || ""
}`}</Text>
</View>
<Right>
<Text>{item.ded_amt}</Text>
</Right>
<Right>
<Icon name="arrow-forward" />
</Right>
</CardItem>
);
};
export default connect(mapStateToProps, null)(JobListComponent);

10
components/loading-display/loading-display.component.jsx
View File

@@ -3,12 +3,10 @@ import { View, Text } from "react-native";
import { BarIndicator } from "react-native-indicators";
import { Container, Content } from "native-base";
export default function LoadingDisplay({ size, count = 5 }) {
export default function LoadingDisplay({ count = 5 }) {
return (
<Container>
<Content>
<BarIndicator size={size || "large"} count={count} />
</Content>
</Container>
<View>
<BarIndicator count={count} color="dodgerblue" />
</View>
);
}

1
components/screen-job-list/screen-job-list.component.jsx
View File

@@ -1,4 +1,3 @@
import { Container, Content } from "native-base";
import React from "react";
import JobListComponent from "../job-list/job-list.component.jsx";

60
components/screen-main/screen-main.component.jsx
View File

@@ -5,7 +5,12 @@ import { createDrawerNavigator } from "@react-navigation/drawer";
import i18n from "i18next";
import React, { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { StatusBar as rnStatusBar, StyleSheet } from "react-native";
import {
StatusBar as rnStatusBar,
StyleSheet,
View,
Button,
} from "react-native";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import {
@@ -24,6 +29,7 @@ import ScreenMessagingList from "../screen-messaging-list/screen-messaging-list.
import ScreenSignIn from "../screen-sign-in/screen-sign-in.component";
import ScreenSettingsComponent from "../screen-settings/screen-settings.component";
import ScreenSplash from "../screen-splash/screen-splash.component";
import { Ionicons } from "@expo/vector-icons";
const JobStack = createStackNavigator();
const MessagingStack = createStackNavigator();
@@ -42,20 +48,40 @@ const mapDispatchToProps = (dispatch) => ({
signOutStart: () => dispatch(signOutStart()),
});
const JobStackNavigator = () => (
<JobStack.Navigator>
const LeftDrawerButton = (props, navigation) => (
<Ionicons
{...props}
name="ios-menu"
size={24}
color="dodgerblue"
style={{ marginLeft: 20 }}
onPress={() => navigation.toggleDrawer()}
/>
);
const JobStackNavigator = ({ navigation }) => (
<JobStack.Navigator initialRouteName="JobList">
<JobStack.Screen
name="JobList"
options={({ route }) => ({
title: `${i18n.t("joblist.labels.activejobs")}`,
headerLeft: (props) => LeftDrawerButton(props, navigation),
})}
component={ScreenJobList}
/>
<JobStack.Screen name="JobDetail" component={ScreenJobDetail} />
<JobStack.Screen
name="JobDetail"
component={ScreenJobDetail}
options={({ route }) => ({
title:
(route.params && route.params.title) ||
i18n.t("joblist.labels.detail"),
})}
/>
</JobStack.Navigator>
);
const MessagingStackNavigator = () => (
const MessagingStackNavigator = ({ navigation }) => (
<MessagingStack.Navigator>
<MessagingStack.Screen
name="MessagingList"
@@ -69,7 +95,23 @@ const MessagingStackNavigator = () => (
);
const BottomTabsNavigator = () => (
<BottomTabs.Navigator>
<BottomTabs.Navigator
screenOptions={({ route }) => ({
tabBarIcon: ({ focused, color, size }) => {
let iconName;
if (route.name === "JobTab") {
iconName = "ios-list";
} else if (route.name === "MessagingTab") {
iconName = "ios-chatboxes";
}
return <Ionicons name={iconName} size={size} color={color} />;
},
})}
tabBarOptions={{
activeTintColor: "dodgerblue",
inactiveTintColor: "slategrey",
}}
>
<BottomTabs.Screen
name="JobTab"
options={{ title: i18n.t("joblist.titles.jobtab") }}
@@ -83,12 +125,14 @@ const BottomTabsNavigator = () => (
</BottomTabs.Navigator>
);
const DrawerNavigator = () => (
const DrawerNavigator = ({ navigation }) => (
<Drawer.Navigator>
<Drawer.Screen name="Home" component={BottomTabsNavigator} />
<Drawer.Screen
name="Settings"
options={{ title: i18n.t("settings.titles.settings") }}
options={{
title: i18n.t("settings.titles.settings"),
}}
component={ScreenSettingsComponent}
/>
</Drawer.Navigator>

2
components/screen-sign-in/screen-sign-in.component.jsx
View File

@@ -93,7 +93,7 @@ export function SignIn({ emailSignInStart, signingIn }) {
const localStyles = StyleSheet.create({
content: {
paddingBottom: 150,
paddingBottom: 200,
},
logo: { width: 100, height: 100 },
});

15
components/styles.js
View File

@@ -12,4 +12,19 @@ export default StyleSheet.create({
justifyContent: "space-evenly",
alignItems: "center",
},
swipe_view: {
alignItems: "center",
justifyContent: "center",
width: 100,
marginTop: 5,
marginBottom: 5,
},
swipe_view_blue: {
backgroundColor: "dodgerblue",
},
swipe_text: {
textAlign: "center",
color: "white",
},
});

6
translations/en-US/common.json
View File

@@ -9,8 +9,12 @@
}
},
"joblist": {
"actions": {
"swipecamera": "Add Pictures/Video"
},
"labels": {
"activejobs": "All Active Jobs"
"activejobs": "Jobs",
"detail": "Job Detail"
},
"titles": {
"jobtab": "Jobs"

6
translations/es-MX/common.json
View File

@@ -9,8 +9,12 @@
}
},
"joblist": {
"actions": {
"swipecamera": ""
},
"labels": {
"activejobs": ""
"activejobs": "",
"detail": ""
},
"titles": {
"jobtab": ""

6
translations/fr-CA/common.json
View File

@@ -9,8 +9,12 @@
}
},
"joblist": {
"actions": {
"swipecamera": ""
},
"labels": {
"activejobs": ""
"activejobs": "",
"detail": ""
},
"titles": {
"jobtab": ""