147 lines
4.0 KiB
JavaScript
147 lines
4.0 KiB
JavaScript
import { Ionicons } from "@expo/vector-icons";
|
|
import { useNavigation } from "@react-navigation/native";
|
|
import * as ImagePicker from "expo-image-picker";
|
|
import { Body, H3, Icon, ListItem, Right } from "native-base";
|
|
import React, { useEffect } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { Animated, Platform, Text } from "react-native";
|
|
import { TouchableOpacity } from "react-native-gesture-handler";
|
|
import Swipeable from "react-native-gesture-handler/Swipeable";
|
|
import { connect } from "react-redux";
|
|
import { createStructuredSelector } from "reselect";
|
|
import { setCameraJob, setCameraJobId } from "../../redux/app/app.actions";
|
|
import styles from "../styles";
|
|
|
|
const mapStateToProps = createStructuredSelector({
|
|
//currentUser: selectCurrentUser
|
|
});
|
|
const mapDispatchToProps = (dispatch) => ({
|
|
setCameraJobId: (id) => dispatch(setCameraJobId(id)),
|
|
setCameraJob: (job) => dispatch(setCameraJob(job)),
|
|
});
|
|
|
|
export function JobListItem({ setCameraJob, setCameraJobId, item }) {
|
|
const { t } = useTranslation();
|
|
const navigation = useNavigation();
|
|
|
|
useEffect(() => {
|
|
(async () => {
|
|
if (Platform.OS !== "web") {
|
|
const {
|
|
status,
|
|
} = await ImagePicker.requestMediaLibraryPermissionsAsync();
|
|
if (status !== "granted") {
|
|
alert("Sorry, we need camera roll permissions to make this work!");
|
|
}
|
|
}
|
|
})();
|
|
}, []);
|
|
|
|
const pickImage = async () => {
|
|
let result = await ImagePicker.launchImageLibraryAsync({
|
|
mediaTypes: ImagePicker.MediaTypeOptions.All,
|
|
allowsEditing: true,
|
|
aspect: [4, 3],
|
|
quality: 1,
|
|
});
|
|
|
|
console.log(result);
|
|
|
|
if (!result.cancelled) {
|
|
// setImage(result.uri);
|
|
}
|
|
};
|
|
|
|
const RenderRightAction = (progress, dragX) => {
|
|
const scale = dragX.interpolate({
|
|
inputRange: [-100, 0],
|
|
outputRange: [0.7, 0],
|
|
});
|
|
|
|
return (
|
|
<TouchableOpacity
|
|
style={[styles.swipe_view, styles.swipe_view_blue]}
|
|
onPress={() => {
|
|
setCameraJobId(item.id);
|
|
setCameraJob(item);
|
|
navigation.navigate("CameraTab");
|
|
}}
|
|
>
|
|
<Animated.View
|
|
style={{
|
|
// color: "white",
|
|
// paddingHorizontal: 10,
|
|
// fontWeight: "600",
|
|
transform: [{ scale }],
|
|
}}
|
|
>
|
|
<Ionicons name="ios-camera" size={24} color="white" />
|
|
</Animated.View>
|
|
</TouchableOpacity>
|
|
);
|
|
};
|
|
const RenderLeftAction = (progress, dragX) => {
|
|
const scale = dragX.interpolate({
|
|
inputRange: [0, 100],
|
|
outputRange: [0, 1],
|
|
extrapolate: "clamp",
|
|
});
|
|
|
|
return (
|
|
<TouchableOpacity
|
|
style={[styles.swipe_view, styles.swipe_view_blue]}
|
|
onPress={() => {
|
|
setCameraJobId(item.id);
|
|
setCameraJob(item);
|
|
navigation.push("MediaBrowser");
|
|
//pickImage(item.id);
|
|
}}
|
|
>
|
|
<Animated.Text
|
|
style={{
|
|
// color: "white",
|
|
// paddingHorizontal: 10,
|
|
// fontWeight: "600",
|
|
transform: [{ scale }],
|
|
}}
|
|
>
|
|
Add
|
|
</Animated.Text>
|
|
</TouchableOpacity>
|
|
);
|
|
};
|
|
|
|
const onPress = () => {
|
|
navigation.push("JobDetail", {
|
|
jobId: item.id,
|
|
title: item.ro_number || t("general.labels.na"),
|
|
});
|
|
};
|
|
|
|
return (
|
|
<Swipeable
|
|
renderLeftActions={RenderLeftAction}
|
|
renderRightActions={RenderRightAction}
|
|
>
|
|
<TouchableOpacity onPress={onPress}>
|
|
<ListItem>
|
|
<H3>{item.ro_number || t("general.labels.na")}</H3>
|
|
|
|
<Body style={{ marginLeft: 10 }}>
|
|
<Text>{`${item.ownr_fn || ""} ${item.ownr_ln || ""} ${
|
|
item.ownr_co_nm || ""
|
|
} - ${item.v_model_yr || ""} ${item.v_make_desc || ""} ${
|
|
item.v_model_desc || ""
|
|
}`}</Text>
|
|
</Body>
|
|
<Right>
|
|
<Icon active name="arrow-forward" />
|
|
</Right>
|
|
</ListItem>
|
|
</TouchableOpacity>
|
|
</Swipeable>
|
|
);
|
|
}
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(JobListItem);
|