Added swipable list to work items list
This commit is contained in:
John Lyon-Smith
@@ -1,53 +1,136 @@
|
||||
import React from 'react'
|
||||
import { StyleSheet, View, TouchableOpacity, Image, FlatList, Text} from 'react-native'
|
||||
import { Icon, Header } from '../ui'
|
||||
import autobind from 'autobind-decorator'
|
||||
import React from "react"
|
||||
import {
|
||||
StyleSheet,
|
||||
View,
|
||||
TouchableHighlight,
|
||||
TouchableOpacity,
|
||||
Image,
|
||||
FlatList,
|
||||
Text
|
||||
} from "react-native"
|
||||
import { Icon, Header } from "../ui"
|
||||
import { MessageModal } from "../Modal"
|
||||
import autobind from "autobind-decorator"
|
||||
import { SwipeListView } from "react-native-swipe-list-view"
|
||||
import { api } from "../API"
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
justifyContent: 'flex-start',
|
||||
backgroundColor: '#FFFFFF',
|
||||
},
|
||||
height: "100%",
|
||||
width: "100%",
|
||||
justifyContent: "flex-start",
|
||||
backgroundColor: "#FFFFFF"
|
||||
}
|
||||
})
|
||||
|
||||
const data = [
|
||||
{key: '1', type: 'work', location: 'Ossington Ave. | 0.2 mi.', state: 'open', latlng: { latitude: 43.653226, longitude: -79.383184 } },
|
||||
{key: '2', type: 'inspection', location: 'Alexandre St. | 0.7 mi.', state: 'open', latlng: { latitude: 43.648118, longitude: 79.392636 }},
|
||||
{key: '3', type: 'complaint', location: 'Bay St. | 0.8 mi.', state: 'open', latlng: { latitude: 43.640168, longitude: -79.409373 }},
|
||||
{key: '4', type: 'work', location: 'Bloor St. | 1.2 mi.', state: 'open', latlng: { latitude: 43.633110, longitude: -79.415880 }},
|
||||
{key: '5', type: 'inspection', location: 'Blue Jays Way | 2.2 mi.', state: 'open', latlng: { latitude: 43.653526, longitude: -79.361385 }},
|
||||
{key: '6', type: 'complaint', location: 'Christie St. | 3.0 mi.', state: 'open', latlng: { latitude: 43.663870, longitude: -79.383705 }},
|
||||
{key: '7', type: 'work', location: 'Cummer Ave. | 4.2 mi.', state: 'open', latlng: { latitude: 43.659166, longitude: -79.391350 }},
|
||||
{key: '8', type: 'complaint', location: 'Danforth Ave. | 4.7 mi.', state: 'open', latlng: { latitude: 43.663538, longitude: -79.423212 }},
|
||||
{
|
||||
key: "1",
|
||||
type: "work",
|
||||
location: "Ossington Ave. | 0.2 mi.",
|
||||
state: "open",
|
||||
latlng: { latitude: 43.653226, longitude: -79.383184 }
|
||||
},
|
||||
{
|
||||
key: "2",
|
||||
type: "inspection",
|
||||
location: "Alexandre St. | 0.7 mi.",
|
||||
state: "open",
|
||||
latlng: { latitude: 43.648118, longitude: 79.392636 }
|
||||
},
|
||||
{
|
||||
key: "3",
|
||||
type: "complaint",
|
||||
location: "Bay St. | 0.8 mi.",
|
||||
state: "open",
|
||||
latlng: { latitude: 43.640168, longitude: -79.409373 }
|
||||
},
|
||||
{
|
||||
key: "4",
|
||||
type: "work",
|
||||
location: "Bloor St. | 1.2 mi.",
|
||||
state: "open",
|
||||
latlng: { latitude: 43.63311, longitude: -79.41588 }
|
||||
},
|
||||
{
|
||||
key: "5",
|
||||
type: "inspection",
|
||||
location: "Blue Jays Way | 2.2 mi.",
|
||||
state: "open",
|
||||
latlng: { latitude: 43.653526, longitude: -79.361385 }
|
||||
},
|
||||
{
|
||||
key: "6",
|
||||
type: "complaint",
|
||||
location: "Christie St. | 3.0 mi.",
|
||||
state: "open",
|
||||
latlng: { latitude: 43.66387, longitude: -79.383705 }
|
||||
},
|
||||
{
|
||||
key: "7",
|
||||
type: "work",
|
||||
location: "Cummer Ave. | 4.2 mi.",
|
||||
state: "open",
|
||||
latlng: { latitude: 43.659166, longitude: -79.39135 }
|
||||
},
|
||||
{
|
||||
key: "8",
|
||||
type: "complaint",
|
||||
location: "Danforth Ave. | 4.7 mi.",
|
||||
state: "open",
|
||||
latlng: { latitude: 43.663538, longitude: -79.423212 }
|
||||
}
|
||||
]
|
||||
|
||||
const inspectionTypes = {
|
||||
work: {
|
||||
title: 'Work Order'
|
||||
title: "Work Order"
|
||||
},
|
||||
inspection: {
|
||||
title: 'Inspection',
|
||||
title: "Inspection"
|
||||
},
|
||||
complaint: {
|
||||
title: 'Complaint',
|
||||
title: "Complaint"
|
||||
}
|
||||
}
|
||||
|
||||
export class WorkItemList extends React.Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.state = {
|
||||
messageModal: null
|
||||
}
|
||||
api
|
||||
.listWorkItems()
|
||||
.then(list => {})
|
||||
.catch(() => {
|
||||
this.setState({
|
||||
messageModal: {
|
||||
icon: "hand",
|
||||
message: "Unable to get list of work items",
|
||||
detail: error.message
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
@autobind
|
||||
handleItemSelect(item, index) {
|
||||
this.props.history.push('/activity')
|
||||
this.props.history.push("/workitem")
|
||||
}
|
||||
|
||||
@autobind
|
||||
handleItemDelete(item, index) {
|
||||
}
|
||||
|
||||
@autobind
|
||||
handleMessageDismiss() {
|
||||
this.setState({ messageModal: null })
|
||||
}
|
||||
|
||||
@autobind
|
||||
handleAddPress(item, index) {
|
||||
this.props.history.push('/workitem')
|
||||
this.props.history.push("/workitem")
|
||||
}
|
||||
|
||||
@autobind
|
||||
@@ -57,31 +140,85 @@ export class WorkItemList extends React.Component {
|
||||
if (history.length > 1) {
|
||||
history.goBack()
|
||||
} else {
|
||||
history.replace('/home')
|
||||
history.replace("/home")
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const { messageModal } = this.state
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Header title='Work Items' leftButton={{ icon: 'back', onPress: this.handleBackPress }} rightButton={{ icon: 'add', onPress: this.handleAddPress }} />
|
||||
<FlatList
|
||||
style={{ width: '100%', flexGrow: 1, paddingTop: 20, paddingBottom: 20 }}
|
||||
<Header
|
||||
title="Work Items"
|
||||
leftButton={{ icon: "back", onPress: this.handleBackPress }}
|
||||
rightButton={{ icon: "add", onPress: this.handleAddPress }}
|
||||
/>
|
||||
<SwipeListView
|
||||
useFlatList
|
||||
style={{
|
||||
width: "100%",
|
||||
flexGrow: 1,
|
||||
paddingTop: 20,
|
||||
paddingBottom: 20
|
||||
}}
|
||||
data={data}
|
||||
renderItem={({item, index}) => {
|
||||
return (
|
||||
<View style={{ flexDirection: 'row', height: 50 }}>
|
||||
<Text style={{ fontSize: 8, width: 45, marginLeft: 15, alignSelf: 'center' }}>{item.state.toUpperCase()}</Text>
|
||||
<View style={{ flexDirection: 'column', width: '75%' }}>
|
||||
<Text style={{ fontSize: 20 }}>{inspectionTypes[item.type].title}</Text>
|
||||
<Text style={{ fontSize: 14, color: 'gray' }}>{item.location}</Text>
|
||||
renderItem={({ item, index }) => (
|
||||
<TouchableHighlight
|
||||
style={{
|
||||
height: 50,
|
||||
paddingLeft: 20,
|
||||
paddingRight: 20,
|
||||
backgroundColor: "white",
|
||||
}}
|
||||
underlayColor='#EEEEEE'
|
||||
onPress={() => this.handleItemSelect(item, index)}
|
||||
>
|
||||
<View style={{ height: '100%', width: '100%', flexDirection: 'row' }}>
|
||||
<View style={{ flexGrow: 1, flexDirection: "column", justifyContent: 'center' }}>
|
||||
<Text style={{ fontSize: 20 }}>
|
||||
{inspectionTypes[item.type].title}
|
||||
</Text>
|
||||
<Text style={{ fontSize: 14, color: "gray" }}>
|
||||
{item.location}
|
||||
</Text>
|
||||
</View>
|
||||
<TouchableOpacity style={{ alignSelf: 'center' }} onPress={() => (this._handleItemSelect(item, index))} >
|
||||
<Icon name='rightArrow' size={16} />
|
||||
</TouchableOpacity>
|
||||
<Icon
|
||||
name="rightArrow"
|
||||
size={16}
|
||||
style={{ alignSelf: "center" }}
|
||||
/>
|
||||
</View>
|
||||
)
|
||||
}} />
|
||||
</TouchableHighlight>
|
||||
)}
|
||||
renderHiddenItem={({ item, index }) => (
|
||||
<TouchableOpacity
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
justifyContent: "flex-end",
|
||||
height: 50,
|
||||
backgroundColor: "red",
|
||||
}}
|
||||
onPress={() => this.handleItemDelete(item, index)}
|
||||
>
|
||||
<View style={{ flexDirection: 'column', justifyContent: 'center', backgroundColor: "red", width: 75 }}>
|
||||
<Text style={{ fontSize: 20, alignSelf: "center" }}>
|
||||
Delete
|
||||
</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
rightOpenValue={-80}
|
||||
stopLeftSwipe={100}
|
||||
disableRightSwipe
|
||||
/>
|
||||
<MessageModal
|
||||
open={!!messageModal}
|
||||
icon={messageModal ? messageModal.icon : ""}
|
||||
message={messageModal ? messageModal.message : ""}
|
||||
detail={messageModal ? messageModal.detail : ""}
|
||||
onDismiss={messageModal && this.handleMessageDismiss}
|
||||
/>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user