Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 5 additions & 4 deletions MobileApp/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,11 @@ export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Image style = {styles.image}
source = {require('./assets/logo.png')}
resizeMode = {Image.resizeMode.contain}/>
<Event event = {events[0]}/>
{/*<Image style = {styles.image}*/}
{/*source = {require('./assets/logo.png')}*/}
{/*resizeMode = {Image.resizeMode.contain}/>*/}
{/*<Event event = {events[0]}/>*/}
<Event event={events[0]}/>
</View>
);
}
Expand Down
51 changes: 28 additions & 23 deletions MobileApp/src/components/common/card.js
Original file line number Diff line number Diff line change
@@ -1,31 +1,36 @@
import React, { Component } from 'react'
import {View, StyleSheet} from 'react-native'
import React, {Component} from 'react'
import {View, StyleSheet, Platform} from 'react-native'

class Card extends Component {
static propTypes = {
static propTypes = {};

};

render() {
return (
<View style = {styles.container}>
{this.props.children}
</View>
)
}
render() {
return (
<View style={styles.container}>
{this.props.children}
</View>
)
}
}

const styles = StyleSheet.create({
container: {
padding: 5,
margin: 10,
backgroundColor: '#ddd',
shadowColor: '#000',
shadowOffset: {
width: 3, height: 3
},
shadowOpacity: 0.7
}
container: {
// ...Platform.select({
// ios: {
// shadowColor: '#000',
// shadowOffset: {
// width: 3, height: 3
// },
// shadowOpacity: 0.7
// },
// android: {
// // elevation: 5,
// }
// }),
margin: 10,
borderColor: '#ddd',
borderWidth:1,
}
})

export default Card
export default Card
97 changes: 84 additions & 13 deletions MobileApp/src/components/event-list.js
Original file line number Diff line number Diff line change
@@ -1,26 +1,97 @@
import React, { Component } from 'react'
import {Text, ScrollView, StyleSheet} from 'react-native'
import React, {PureComponent} from 'react'
import {Text, StyleSheet, SectionList, Platform, View} from 'react-native'
import Card from './common/card'

class EventList extends Component {
static propTypes = {
function reduceEvents(events) {
return events.reduce(function (sections, event) {
const symbol = event.title.charAt(0).toUpperCase()
const section = sections.find(function (item) {
return item.title === symbol
})
if (section) {
section.data.push(event)
return sections;
}

};
sections.push({
title: symbol,
data: [event]
})

return sections
}, []).sort((a, b) => {
if (a.title === b.title) {
return 0;
}

return a.title > b.title ? 1 : -1
})
}

class EventList extends PureComponent {
static propTypes = {};

render() {
const eventSections = reduceEvents(this.props.events)
return (
<SectionList
renderItem={this.renderItem}
renderSectionHeader={this.renderSectionHeader}
sections={eventSections}
keyExtractor={(item, index) => item + index}
/>
)
}

renderItem = ({item, index, section}) => {
return (
<ScrollView>
{this.props.events.map(event =>
<Card key = {event.uid}>
<Text>{event.title}</Text>
</Card>
)}
</ScrollView>
<Card key={item.uid}>
<View style={styles.eventTitle}><Text>{item.title}</Text></View>
<View style={styles.eventBody}>
<Text>{item.when} </Text>
<Text>{item.where}</Text>
</View>
</Card>
)
}

renderSectionHeader = ({section: {title}}) => (
<Text style={styles.section}>{title}</Text>
)
}

const styles = StyleSheet.create({
section: {
fontWeight: 'bold',
padding: 5,
margin: 10,
backgroundColor: '#1F0772',
color: '#fff',
textAlign: 'center',
...Platform.select({
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ок, но мы для этого в Card и выносили, чтоб не писать стили в каждом списке

ios: {
shadowColor: '#000',
shadowOffset: {
width: 3, height: 3
},
shadowOpacity: 0.7
},
android: {
elevation: 5,
}
}),
},
eventTitle: {
backgroundColor: '#ddd',
padding: 5,
},
eventBody: {
padding: 5,
// borderColor: '#ddd',
// borderBottomWidth: 1,
// borderLeftWidth: 1,
// borderRightWidth: 1,
}
})

export default EventList
export default EventList
37 changes: 27 additions & 10 deletions MobileApp/src/components/event.js
Original file line number Diff line number Diff line change
@@ -1,17 +1,34 @@
import React, { Component } from 'react'
import {View, Text, Image, StyleSheet} from 'react-native'
import React, {Component} from 'react'
import {View, Text, Image, StyleSheet, Button, Alert} from 'react-native'

class Event extends Component {
static propTypes = {
static propTypes = {};

};
deleteHandler = () => {
console.log('deleting event')
}

showAlertDeleting = () => Alert.alert(
'Deleting event',
'Are you sure?',
[
{text: 'Cancel', onPress: () => console.log('cancel deleting event')},
{text: 'OK', onPress: this.deleteHandler},
],
{cancelable: false}
)

render() {
const { event } = this.props
const {event} = this.props
return (
<View style = {styles.container}>
<Image source = {{uri: 'http://lorempixel.com/400/200'}} style = {styles.image}/>
<Text style = {styles.title}>{event.title}</Text>
<View style={styles.container}>
<Image source={{uri: 'http://lorempixel.com/400/200'}} style={styles.image}/>
<Button
color="red"
title="Delete"
onPress={this.showAlertDeleting}
/>
<Text style={styles.title}>{event.title}</Text>
<Text>{event.url}</Text>
<Text>{event.where}</Text>
<Text>{event.when}</Text>
Expand All @@ -22,7 +39,7 @@ class Event extends Component {

const styles = StyleSheet.create({
image: {
width: 400,
width: '100%',
height: 200
},
title: {
Expand All @@ -34,4 +51,4 @@ const styles = StyleSheet.create({
}
})

export default Event
export default Event