SHARE
TWEET

Untitled

a guest Jun 19th, 2019 61 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React,{Component} from 'react';
  2. import {
  3.   Text,
  4.   TextInput,
  5.   View,
  6.   StyleSheet,
  7.   TouchableOpacity
  8. } from 'react-native';
  9. import {db} from '../config/db';
  10. import {addDepts} from './dbServices';
  11. import ItemComponent from './ItemComponent';
  12.  
  13. export default class ViewDept extends Component{
  14.   constructor(props){
  15.     super(props)
  16.     this.state={
  17.       departments:[]
  18.     }
  19.   }
  20.   componentDidMount() {
  21.     let currentComponent = this;
  22.  
  23.    db.database().ref('custsf/').on('value', function(data) {
  24.      // console.log(snapshot.val());
  25.       //let data = snapshot.val();
  26.      // let departments = Object.values(data);
  27.       currentComponent.setState({departments:data.val()});
  28.     });
  29.   }
  30.  listenForItems=(addDepts) => {
  31.     addDepts.on("value", function(snapshot) {
  32.       console.log(snapshot.val());
  33.       let data = snapshot.val();
  34.       let departments = Object.values(data);
  35.       this.departments=departments;
  36.     });
  37.   }
  38. render() {
  39.     return (
  40.       <View style={styles.container}>
  41.  
  42.         {
  43.           this.state.departments.length > 0
  44.                     ? <ItemComponent items={this.state.departments} />
  45.                     : <Text>No items</Text>
  46.         }
  47.  
  48.  
  49.       </View>
  50.     );
  51.   }
  52.  
  53. }
  54. const styles = StyleSheet.create({
  55.   container: {
  56.     flex: 1,
  57.     alignItems: 'center',
  58.     justifyContent: 'center',
  59.     padding: 12,
  60.   },
  61. })
  62.      
  63. import React, { Component } from 'react';
  64. import { StyleSheet, View, Text, TouchableOpacity, Alert } from 'react-native';
  65. import { Table, TableWrapper, Row, Cell } from 'react-native-table-component';
  66.  import PropTypes from 'prop-types';
  67. export default class ItemComponent extends Component {
  68.   constructor(props) {
  69.     super(props);
  70.     this.state = {
  71.       tableHead: ['Head', 'Head2', 'Head3', 'Head4'],
  72.       tableData: [
  73.         ['1', '2', '3', '4'],
  74.         ['a', 'b', 'c', 'd'],
  75.         ['1', '2', '3', '4'],
  76.         ['a', 'b', 'c', 'd']
  77.       ]
  78.     }
  79.   }
  80.   static propTypes = {
  81.       items: PropTypes.array.isRequired
  82.   };
  83.  
  84.   _alertIndex(index) {
  85.     Alert.alert(`This is row ${index + 1}`);
  86.   }
  87.  
  88.   render() {
  89.     const state = this.state;
  90.     const element = (data, index) => (
  91.       <TouchableOpacity onPress={() => this._alertIndex(index)}>
  92.         <View style={styles.btn}>
  93.           <Text style={styles.btnText}>button</Text>
  94.         </View>
  95.       </TouchableOpacity>
  96.     );
  97.  
  98.     return (
  99.       <View style={styles.container}>
  100.         <Table borderStyle={{borderColor: 'transparent'}}>
  101.           <Row data={state.tableHead} style={styles.head} textStyle={styles.text}/>
  102.           {
  103.             state.tableData.map((rowData, index) => (
  104.               <TableWrapper key={index} style={styles.row}>
  105.                 {
  106.                   rowData.map((cellData, cellIndex) => (
  107.                     <Cell key={cellIndex} data={cellIndex === 3 ? element(cellData, index) : cellData} textStyle={styles.text}/>
  108.                   ))
  109.                 }
  110.               </TableWrapper>
  111.             ))
  112.           }
  113.         </Table>
  114.       </View>
  115.     )
  116.   }
  117. }
  118.  
  119. const styles = StyleSheet.create({
  120.   container: { flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#fff' },
  121.   head: { height: 40, backgroundColor: '#808B97' },
  122.   text: { margin: 6 },
  123.   row: { flexDirection: 'row', backgroundColor: '#FFF1C1' },
  124.   btn: { width: 58, height: 18, backgroundColor: '#78B7BB',  borderRadius: 2 },
  125.   btnText: { textAlign: 'center', color: '#fff' }
  126. });
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top