131 lines
3.9 KiB
JavaScript
131 lines
3.9 KiB
JavaScript
import { Ionicons } from "@expo/vector-icons";
|
|
import { AssetsSelector } from "expo-images-picker";
|
|
import React, { useCallback, useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { StyleSheet, Text, View } from "react-native";
|
|
import { connect } from "react-redux";
|
|
import { createStructuredSelector } from "reselect";
|
|
import { logImEXEvent } from "../../firebase/firebase.analytics";
|
|
import { selectCurrentCameraJobId } from "../../redux/app/app.selectors";
|
|
import CameraSelectJob from "../camera-select-job/camera-select-job.component";
|
|
import UploadDeleteSwitch from "../upload-delete-switch/upload-delete-switch.component";
|
|
import UploadProgress from "../upload-progress/upload-progress.component";
|
|
|
|
const mapStateToProps = createStructuredSelector({
|
|
selectedCameraJobId: selectCurrentCameraJobId,
|
|
});
|
|
|
|
export function ImageBrowserScreen({ selectedCameraJobId }) {
|
|
const { t } = useTranslation();
|
|
const [uploads, setUploads] = useState(null);
|
|
const [tick, setTick] = useState(0);
|
|
const forceRerender = useCallback(() => {
|
|
setTick((tick) => tick + 1);
|
|
}, []);
|
|
|
|
const onDone = (data) => {
|
|
logImEXEvent("imexmobile_upload_documents", { count: data.length });
|
|
setUploads(data);
|
|
};
|
|
|
|
return (
|
|
<View style={[styles.flex, styles.container]}>
|
|
<CameraSelectJob />
|
|
<UploadDeleteSwitch />
|
|
{!selectedCameraJobId && (
|
|
<View
|
|
style={{
|
|
flex: 1,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
<Text>{t("mediabrowser.labels.selectjobassetselector")}</Text>
|
|
</View>
|
|
)}
|
|
{selectedCameraJobId && (
|
|
<AssetsSelector
|
|
style={{ flex: 1 }}
|
|
key={tick}
|
|
options={{
|
|
assetsType: ["photo", "video"],
|
|
margin: 3,
|
|
portraitCols: 4,
|
|
landscapeCols: 6,
|
|
widgetWidth: 100,
|
|
widgetBgColor: "white",
|
|
selectedBgColor: "#adadad",
|
|
spinnerColor: "#c8c8c8",
|
|
videoIcon: {
|
|
Component: Ionicons,
|
|
iconName: "ios-videocam",
|
|
color: "white",
|
|
size: 20,
|
|
},
|
|
selectedIcon: {
|
|
Component: Ionicons,
|
|
iconName: "ios-checkmark-circle-outline",
|
|
color: "white",
|
|
bg: "rgba(35,35,35, 0.75)",
|
|
size: 32,
|
|
},
|
|
defaultTopNavigator: {
|
|
continueText: t("mediabrowser.actions.upload"),
|
|
goBackText: t("mediabrowser.actions.refresh"),
|
|
buttonStyle: styles.buttonStyle,
|
|
textStyle: styles.textStyle,
|
|
backFunction: () => {
|
|
forceRerender();
|
|
},
|
|
doneFunction: onDone,
|
|
},
|
|
|
|
noAssets: {
|
|
Component: function NoAsset() {
|
|
return (
|
|
<View
|
|
style={{
|
|
display: "flex",
|
|
flex: 1,
|
|
height: 200,
|
|
marginHorizontal: 20,
|
|
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
}}
|
|
>
|
|
<Ionicons name="ios-camera" size={72} />
|
|
<Text style={{ textAlign: "center", marginTop: 10 }}>
|
|
{t("mediabrowser.labels.nomedia")}
|
|
</Text>
|
|
</View>
|
|
);
|
|
},
|
|
},
|
|
}}
|
|
/>
|
|
)}
|
|
<UploadProgress uploads={uploads} forceRerender={forceRerender} />
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
flex: {
|
|
flex: 1,
|
|
},
|
|
container: {
|
|
display: "flex",
|
|
// position: "relative",
|
|
},
|
|
buttonStyle: {
|
|
//backgroundColor: "tomato",
|
|
},
|
|
// eslint-disable-next-line react-native/no-color-literals
|
|
textStyle: {
|
|
color: "dodgerblue",
|
|
},
|
|
});
|
|
|
|
export default connect(mapStateToProps, null)(ImageBrowserScreen);
|