Skip to content
This repository has been archived by the owner on Apr 14, 2023. It is now read-only.

Commit

Permalink
Add add a note flow (#47)
Browse files Browse the repository at this point in the history
  • Loading branch information
pandananta authored Sep 13, 2018
1 parent cc76a2c commit 4507e12
Show file tree
Hide file tree
Showing 9 changed files with 282 additions and 107 deletions.
17 changes: 9 additions & 8 deletions expo_project/components/MapWithMarkers.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { AnimatedCircularProgress } from 'react-native-circular-progress';
import { iconColors } from '../constants/Colors';
import MapConfig from '../constants/Map';
import PersonIcon from '../components/PersonIcon';
import * as _ from 'lodash';

// NOTE: A longPress is more like 500ms,
// however there's a delay between when the longPress is registered
Expand All @@ -22,21 +23,22 @@ class MapWithMarkers extends React.Component {
this.state = {
region: MapConfig.defaultRegion,
circularProgressLocation: null,
nextMarkerColor: this.getRandomIconColor(),
nextMarkerColor: null,
};
}

getRandomIconColor = () => {
const iconOptions = Object.values(iconColors);
return iconOptions[Math.floor(Math.random() * iconOptions.length)];
};

setNextColor = () => {
this.setState({ nextMarkerColor: this.getRandomIconColor() });
// enforce next color is not current color
const iconColorOptions = _.filter(
_.values(iconColors),
color => color !== this.state.nextMarkerColor,
);
return _.sample(iconColorOptions);
};

startProgressAnimation = (locationX, locationY) => {
this.setState({
nextMarkerColor: this.getRandomIconColor(),
circularProgressLocation: {
top: locationY - CIRCULAR_PROGRESS_SIZE / 2,
left: locationX - CIRCULAR_PROGRESS_SIZE / 2,
Expand All @@ -47,7 +49,6 @@ class MapWithMarkers extends React.Component {
stopProgressAnimation = () => {
this.setState({
circularProgressLocation: null,
nextMarkerColor: this.getRandomIconColor(),
});
};

Expand Down
90 changes: 90 additions & 0 deletions expo_project/components/NoteModal.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
import React from 'react';
import { Modal, StyleSheet, Text, View } from 'react-native';
import { Button, TextInput } from 'react-native-paper';
import PropTypes from 'prop-types';

class NoteModal extends React.Component {
constructor(props) {
super(props);

this.state = {
text: props.initialValue,
};
}

render() {
return (
<Modal animationType="none" visible={true}>
<View style={styles.modalHeader}>
<Button
onPress={() => {
this.props.onClose(this.props.initialValue);
}}>
<Text>Cancel</Text>
</Button>
<Button
onPress={() => {
this.props.onClose(this.state.text);
}}>
<Text>Done</Text>
</Button>
</View>
<View style={styles.modalBody}>
<View>
<TextInput
label="Add a note"
returnKeyLabel="Done"
autoFocus
value={this.state.text}
onChangeText={text => this.setState({ text })}
onSubmitEditing={() => {
this.props.onClose(this.state.text);
}}
/>
<View style={styles.buttonWrapper}>
<Button
raised
primary
dark
onPress={() => {
this.props.onClose(this.state.text);
}}>
<Text>Done</Text>
</Button>
</View>
</View>
</View>
</Modal>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
padding: 20,
backgroundColor: 'white',
},
modalHeader: {
flexDirection: 'row',
justifyContent: 'space-between',
},
modalBody: {
padding: 20,
},
buttonWrapper: {
marginTop: 20,
},
});

NoteModal.propTypes = {
initialValue: PropTypes.string,
onClose: PropTypes.func,
};

NoteModal.defaultProps = {
initialValue: '',
onClose: () => null,
};

export default NoteModal;
6 changes: 5 additions & 1 deletion expo_project/components/PersonIcon.js
Original file line number Diff line number Diff line change
Expand Up @@ -48,8 +48,12 @@ const styles = StyleSheet.create({

PersonIcon.propTypes = {
size: PropTypes.number.isRequired,
backgroundColor: PropTypes.string.isRequired,
backgroundColor: PropTypes.string,
shadow: PropTypes.bool,
};

PropTypes.defaultProps = {
backgroundColor: 'white',
};

export default PersonIcon;
2 changes: 1 addition & 1 deletion expo_project/components/Selectable.js
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ const styles = StyleSheet.create({
borderWidth: 1,
backgroundColor: '#FAFAFA',
borderRadius: 3,
borderColor: 'rgba(0, 0, 0, 0.0980392)',
borderColor: 'rgba(0, 0, 0, 0.12)',
padding: 5,
marginRight: 5,
marginTop: 10,
Expand Down
25 changes: 19 additions & 6 deletions expo_project/components/Survey.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,6 @@ class Survey extends React.Component {
const { activeMarker, onSelect } = this.props;
return (
<View>
<View style={styles.titleContainer}>
<Text style={styles.title}>{activeMarker.title}</Text>
<Text>{activeMarker.dateLabel}</Text>
</View>
{_.map(QUESTION_CONFIG, question => {
const { questionKey, questionLabel, options } = question;
return (
Expand All @@ -30,14 +26,31 @@ class Survey extends React.Component {
/>
);
})}
{activeMarker.note && (
<View style={styles.noteContainer}>
<Text style={styles.noteTitle}>Note</Text>
<Text style={[styles.noteBody, { color: activeMarker.color }]}>
{activeMarker.note}
</Text>
</View>
)}
</View>
);
}
}

const styles = StyleSheet.create({
titleContainer: { paddingVertical: 10, paddingHorizontal: 20 },
title: { fontWeight: 'bold' },
noteContainer: { paddingVertical: 10 },
noteTitle: {
// match selectable style
marginBottom: 5,
paddingHorizontal: 20,
},
noteBody: {
fontFamily: 'monaco',
marginVertical: 10,
marginHorizontal: 20,
},
});

Survey.propTypes = {
Expand Down
2 changes: 1 addition & 1 deletion expo_project/components/SurveyHeader.js
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ const styles = StyleSheet.create({
text: {
color: '#fff',
fontWeight: '600',
fontSize: 24,
fontSize: 18,
fontFamily: Theme.fonts.medium,
},
});
Expand Down
12 changes: 1 addition & 11 deletions expo_project/config/studies.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,19 +8,9 @@ export default [
surveys: [
{
type: 'activity',
title: 'Stationary Mapping tool',
title: '2pm - 3pm shift',
routeName: 'SurveyScreen',
},
{
type: 'lineOfSight',
title: 'Line of Sight tool',
routeName: 'ComingSoonScreen',
},
{
type: 'intercept',
title: 'Intercept study tool',
routeName: 'ComingSoonScreen',
},
],
},
];
5 changes: 2 additions & 3 deletions expo_project/screens/StudyIndexScreen.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,14 @@ class SurveyIndexScreen extends React.Component {
<ScrollView style={[styles.container]} stickyHeaderIndices={[0]}>
<Caption style={styles.sectionTitle}>Your studies</Caption>
{studies.map(study => (
<Card elevation={3}>
<Card elevation={3} key={study.studyId}>
<CardContent style={styles.studyHeader}>
<Title>{study.studyName}</Title>
<Paragraph>by {study.studyAuthor}</Paragraph>
</CardContent>
{study.surveys.map(survey => {
return (
<View>
<View key={survey.title}>
<Divider />
<CardContent style={styles.surveyRow}>
<View style={styles.contentWrapper}>
Expand Down Expand Up @@ -78,7 +78,6 @@ const styles = StyleSheet.create({
},
sectionTitle: {
backgroundColor: 'white',
fontWeight: 'bold',
marginBottom: 10,
},
surveyRow: {
Expand Down
Loading

0 comments on commit 4507e12

Please sign in to comment.