-
-
Save ezioruan/e6b6465b6e6477c7a7e9b0a3f88bd708 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* @providesModule PatientList | |
*/ | |
import NavigationBar from 'react-native-navbar'; | |
import NavigationButtons from 'NavigationButtons'; | |
import React, { ListView, Navigator, StyleSheet, Text, TextInput, TouchableHighlight, View } from 'react-native'; | |
import { connect } from 'react-redux/native' | |
@connect(state => ({ | |
patients: state.patients | |
})) | |
export default class PatientList extends React.Component { | |
constructor(props) { | |
super(props); | |
let dataSource = new ListView.DataSource({ | |
sectionHeaderHasChanged: this._sectionHeaderHasChanged, | |
rowHasChanged: this._rowHasChanged, | |
}); | |
this.state = { | |
dataSource: dataSource | |
} | |
} | |
componentDidMount() { | |
// let listViewScrollView = this.refs.listView.getScrollResponder(); | |
// listViewScrollView.scrollTo(1); // Hack to get ListView to render fully | |
} | |
componentWillReceiveProps(nextProps) { | |
if (nextProps.patients !== this.props.patients) { | |
let {data, sectionIds} = this._getListViewData(nextProps.patients); | |
this.setState({ | |
dataSource: this.state.dataSource.cloneWithRowsAndSections(data, sectionIds) | |
}) | |
} | |
} | |
_getListViewData(patients) { | |
let data = {}; | |
let sectionIds = []; | |
patients.map((patient) => { | |
let section = patient.lastName.charAt(0); | |
if (sectionIds.indexOf(section) === -1) { | |
sectionIds.push(section); | |
data[section] = []; | |
} | |
data[section].push(patient); | |
}); | |
return {data, sectionIds}; | |
} | |
_sectionHeaderHasChanged(oldSection, newSection) { | |
return oldSection !== newSection; | |
} | |
_rowHasChanged(oldRow, newRow) { | |
return oldRow !== newRow; | |
} | |
_onPressButton(rowID, rowData) { | |
this.props.navigator.push({ | |
id: 'patient-notes', | |
data: rowData, | |
sceneConfig: Navigator.SceneConfigs.FloatFromRight, | |
navigationBar: ( | |
<NavigationBar | |
title={`${rowData.lastName}, ${rowData.firstName.charAt(0)}.`} | |
buttonsColor="#48D1CC" | |
customNext={<NavigationButtons.AddNote patient={rowData} NavigationEmitter={this.props.NavigationEmitter}/>} | |
style={{flex: 1}} | |
/> | |
) | |
}); | |
} | |
_renderRow(rowData, sectionID, rowID) { | |
return ( | |
<TouchableHighlight underlayColor={'#ccc'} onPress={() => this._onPressButton(rowID, rowData)}> | |
<View> | |
<View style={styles.row}> | |
<Text style={[styles.text, styles.boldText]}>{rowData.lastName}, </Text> | |
<Text style={styles.text}>{rowData.firstName}</Text> | |
</View> | |
</View> | |
</TouchableHighlight> | |
); | |
} | |
_renderSectionHeader(data, sectionId) { | |
var text; | |
return ( | |
<View style={styles.sectionHeader}> | |
<Text style={styles.sectionHeaderText}>{sectionId}</Text> | |
</View> | |
); | |
} | |
_renderSeparator(sectionID, rowID, adjacentRowHighlighted) { | |
var style = styles.rowSeparator; | |
if (adjacentRowHighlighted) { | |
style = [style, styles.rowSeparatorHide]; | |
} | |
return ( | |
<View key={"SEP_" + sectionID + "_" + rowID} style={style}/> | |
); | |
} | |
render() { | |
return ( | |
<ListView | |
ref="listView" | |
automaticallyAdjustContentInsets={false} | |
dataSource={this.state.dataSource} | |
renderRow={::this._renderRow} | |
renderSectionHeader={this._renderSectionHeader} | |
renderSeparator={this._renderSeparator} | |
/> | |
); | |
} | |
} | |
const styles = StyleSheet.create({ | |
row: { | |
flexDirection: 'row', | |
padding: 15, | |
}, | |
rowSeparator: { | |
backgroundColor: 'rgba(0, 0, 0, 0.1)', | |
height: 1, | |
marginHorizontal: 10, | |
}, | |
rowSeparatorHide: { | |
opacity: 0.0, | |
}, | |
sectionHeader: { | |
backgroundColor: '#48D1CC' | |
}, | |
sectionHeaderText: { | |
fontFamily: 'AvenirNext-Medium', | |
fontSize: 16, | |
color: 'white', | |
paddingLeft: 10 | |
}, | |
thumb: { | |
width: 64, | |
height: 64, | |
}, | |
text: { | |
fontFamily: 'AvenirNext-Medium', | |
fontSize: 16 | |
}, | |
boldText: { | |
fontFamily: 'AvenirNext-Bold', | |
}, | |
}); | |
// PatientList.propTypes = { | |
// // onAddClick: PropTypes.func.isRequired | |
// }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment