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

Remove duplicated virtualized lists.

Browse Source
This commit is contained in:
Patrick Fic
2021-03-09 20:56:13 -08:00
parent b5176b4d61
commit df23eb0947
2 changed files with 70 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
components/job-documents/job-documents.component.jsx
View File

@@ -1,4 +1,4 @@
import { Container, Content, Thumbnail } from "native-base"; import { Thumbnail } from "native-base";
import React, { useState } from "react"; import React, { useState } from "react";
import { import {
FlatList, FlatList,
@@ -6,6 +6,7 @@ import {
StyleSheet, StyleSheet,
Text, Text,
TouchableOpacity, TouchableOpacity,
View,
} from "react-native"; } from "react-native";
import MediaCacheOverlay from "../media-cache-overlay/media-cache-overlay.component"; import MediaCacheOverlay from "../media-cache-overlay/media-cache-overlay.component";
@@ -20,46 +21,41 @@ export default function JobDocumentsComponent({ job, loading, refetch }) {
return refetch(); return refetch();
}; };
return ( return (
<Container> <View>
<Content <FlatList
padder
refreshControl={ refreshControl={
<RefreshControl refreshing={loading} onRefresh={onRefresh} /> <RefreshControl refreshing={loading} onRefresh={onRefresh} />
} }
> data={job.documents}
<FlatList contentContainerStyle={styles.listContentContainer}
data={job.documents} keyExtractor={(item) => item.id}
style={{ flex: 1 }} numColumns={4}
contentContainerStyle={styles.listContentContainer} renderItem={(object) => (
keyExtractor={(item) => item.id} <TouchableOpacity
numColumns={4} onPress={() => {
renderItem={(object) => ( // setImgIndex(object.index);
<TouchableOpacity // setPreviewVisible(true);
onPress={() => { }}
// setImgIndex(object.index); >
// setPreviewVisible(true); <Thumbnail
square
large
style={{ margin: 5 }}
source={{
uri: `${REACT_APP_CLOUDINARY_IMAGE_ENDPOINT}/${REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS}/${object.item.key}`,
}} }}
> />
<Thumbnail </TouchableOpacity>
square )}
large />
style={{ margin: 5 }} <Text>{job.documents.length}</Text>
source={{ <MediaCacheOverlay
uri: `${REACT_APP_CLOUDINARY_IMAGE_ENDPOINT}/${REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS}/${object.item.key}`, imgIndex={imgIndex}
}} setImgIndex={setImgIndex}
/> previewVisible={previewVisible}
</TouchableOpacity> setPreviewVisible={setPreviewVisible}
)} />
/> </View>
<Text>{job.documents.length}</Text>
<MediaCacheOverlay
imgIndex={imgIndex}
setImgIndex={setImgIndex}
previewVisible={previewVisible}
setPreviewVisible={setPreviewVisible}
/>
</Content>
</Container>
); );
} }

78
components/job-lines/job-lines.component.jsx
View File

@@ -1,11 +1,12 @@
import { Card, CardItem, Container, Content, Text } from "native-base"; import Dinero from "dinero.js";
import { Card, CardItem, Text } from "native-base";
import React from "react"; import React from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { FlatList, RefreshControl, StyleSheet } from "react-native"; import { FlatList, RefreshControl, StyleSheet, View } from "react-native";
import Dinero from "dinero.js";
export default function JobLines({ job, loading, refetch }) { export default function JobLines({ job, loading, refetch }) {
const { t } = useTranslation(); const { t } = useTranslation();
if (!job) { if (!job) {
<Card> <Card>
<Text>Job is not defined.</Text> <Text>Job is not defined.</Text>
@@ -16,49 +17,44 @@ export default function JobLines({ job, loading, refetch }) {
}; };
return ( return (
<Container> <View>
<Content <FlatList
padder data={job.joblines}
refreshControl={ refreshControl={
<RefreshControl refreshing={loading} onRefresh={onRefresh} /> <RefreshControl refreshing={loading} onRefresh={onRefresh} />
} }
> contentContainerStyle={localStyles.listContentContainer}
<FlatList keyExtractor={(item) => item.id}
data={job.joblines} renderItem={(object) => (
style={{ flex: 1 }} <Card>
contentContainerStyle={localStyles.listContentContainer} <CardItem style={localStyles.flexRow}>
keyExtractor={(item) => item.id} <Text style={localStyles.growWithEllipsis}>{`${
renderItem={(object) => ( object.item.line_desc
<Card> }${
<CardItem style={localStyles.flexRow}> object.item.part_qty > 1 ? ` x ${object.item.part_qty}` : ""
<Text style={localStyles.growWithEllipsis}>{`${ }`}</Text>
object.item.line_desc {object.item.part_type && (
}${
object.item.part_qty > 1 ? ` x ${object.item.part_qty}` : ""
}`}</Text>
{object.item.part_type && (
<Text style={localStyles.sideMargins}>
{t(`jobdetail.part_types.${object.item.part_type}`)}
</Text>
)}
<Text style={localStyles.sideMargins}> <Text style={localStyles.sideMargins}>
{Dinero({ {t(`jobdetail.part_types.${object.item.part_type}`)}
amount: Math.round((object.item.act_price || 0) * 100),
}).toFormat()}
</Text> </Text>
</CardItem> )}
<CardItem style={localStyles.flexRow}> <Text style={localStyles.sideMargins}>
{object.item.mod_lbr_ty && ( {Dinero({
<Text> amount: Math.round((object.item.act_price || 0) * 100),
{t(`jobdetail.lbr_types.${object.item.mod_lbr_ty}`)} }).toFormat()}
</Text> </Text>
)} </CardItem>
</CardItem> <CardItem style={localStyles.flexRow}>
</Card> {object.item.mod_lbr_ty && (
)} <Text>
/> {t(`jobdetail.lbr_types.${object.item.mod_lbr_ty}`)}
</Content> </Text>
</Container> )}
</CardItem>
</Card>
)}
/>
</View>
); );
} }