Skip to content

Instantly share code, notes, and snippets.

@shawn-kb

shawn-kb/flatlist.js

Created August 3, 2018 19:54
Show Gist options
  • Save shawn-kb/121091c77bb07c2922d1a4d84756bb2d to your computer and use it in GitHub Desktop.
Save shawn-kb/121091c77bb07c2922d1a4d84756bb2d to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. skrite created this gist Aug 3, 2018.
    108 changes: 108 additions & 0 deletions flatlist.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,108 @@
    render() {
    if(stores.systemStore.preferToScroll == true){
    return(
    <View>
    {this._renderRegisterDeviceModal}
    <FlatList
    data={stores.databaseStore.sites.slice()}
    keyExtractor={ (item, index) => item.id}
    key = {( stores.systemStore.preferToScroll ) ? 1 : 0}
    numColumns={1}
    extraData={stores.databaseStore.isLoadingSites}
    onRefresh={() => this.onRefresh()}
    refreshing={false}
    renderItem={({item}) => this._renderFlatListItem(item)}
    ItemSeparatorComponent={this._renderSeparator}
    ListHeaderComponent={this._renderHeader}
    ListFooterComponent={this._renderFooter}
    />
    </View>
    )
    }else{
    return(
    <View>
    {this._renderRegisterDeviceModal}
    <FlatList
    data={stores.databaseStore.sites.slice()}
    keyExtractor={ (item, index) => item.id}
    key = {( stores.systemStore.preferToScroll ) ? 1 : 0}
    numColumns={stores.systemStore.gridColumns}
    extraData={stores.databaseStore.isLoadingSites}
    onRefresh={() => this.onRefresh()}
    refreshing={false}
    renderItem={({item}) => this._renderGridItem(item)}
    ItemSeparatorComponent={this._renderSeparator}
    ListHeaderComponent={this._renderHeader}
    ListFooterComponent={this._renderFooter}
    />
    </View>
    )
    }
    }

    _renderRegisterDeviceModal(){
    welcomeDeviceFarmName = `Farm: {stores.systemStore.activeGroup.name}`
    welcomeDeviceText = "Please register your name for access to the PivoTrac servers"
    return (
    <Modal
    isVisible={this.state.registerDeviceModalVisible}
    backdropColor={'orange'}
    backdropOpacity={0.9}
    animationType={'slide'}
    >
    <View>
    <Text> {welcomeDeviceFarmName} </Text>
    <Text> {welcomeDeviceText} </Text>
    <TextInput
    onChangeText={(deviceIdentity) => this.setState({deviceIdentity})}
    placeholder = {this.state.deviceIdentity}
    placeholderTextColor="#808080"
    style={styles.input}
    />


    <Button
    backgroundColor="grey"
    onPress={() => this.setDeviceIdentity()}
    title="Confirm"
    loadingProps={{ size: "large", color: "rgba(111, 202, 186, 1)" }}
    titleStyle={{ fontWeight: "700" }}
    buttonStyle={{
    backgroundColor: "green",
    width: 145,
    height: 45,
    borderColor: "transparent",
    borderWidth: 0,
    borderRadius: 5
    }}
    />

    </View>
    </Modal>
    )
    }


    _renderFlatListItem(item) {
    return (
    <View style={styles.row}>
    <TouchableOpacity onPress={ () => this._showSiteDetails(item) }>
    <View style={styles.cellLeft} >
    <PivotCircle site={item}/>
    </View>
    </TouchableOpacity>
    <View style={styles.cellCenter} >
    <Text style={styles.titleText}>{item.name}</Text>
    <Text style={styles.baseText}>{item.DescriptiveStatus}</Text>
    <Text style={styles.baseText}>{item.mode} </Text>
    </View>

    <View style={styles.cellRight} >
    <Text style={styles.baseText}>{item.prettyLastPressure} psi </Text>
    <Text style={styles.baseText}>{item.lastProjectedPosition} deg</Text>
    <Text style={styles.baseText}>{item.currentSpeed} days/rev </Text>
    </View>
    </View>

    )
    }