avatar

avatar  https://th.bing.com/th/id/OIP.CiUM0RHkaYe2DM0C9viTsgHaHa?pid=ImgDet&rs=1

Collapse.js

import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    StatusBar,
    Image,
} from 'react-native';
import * as Animatable from 'react-native-animatable';

import Collapsible from 'react-native-collapsible';
import { RotateInDownLeft } from 'react-native-reanimated';
import { black_color } from '../constants/colors';
import { height, width } from '../constants/dimensions';


export default class Collapse extends Component {
    state = {
        // activeSections: [],
        collapsed: true,
        // multipleSelect: false,
    };

    toggleExpanded = () => {
        this.setState({ collapsed: !this.state.collapsed });
    };

    
    render() {
      
        const { renderAvatar } = this.props
        const { avatarStyle, typing } = styles

        return (
            <View style={typing}>


                <TouchableOpacity onPress={this.toggleExpanded}>

                    <View style={styles.header}>
                        {renderAvatar? <View style={{width:'15%',justifyContent:'center',alignItems:'center'}}>
                               
                             <Image style={avatarStyle} source={renderAvatar} />
                        </View>:null}
                            
                         
                        <View style={{ marginHorizontal: 5, width: renderAvatar ?'85%':'100%' }}>
                            <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>

                                <Text style={styles.headerText} numberOfLines={renderAvatar ? undefined : 1}>{this.props.headerText}</Text>

                                <Animatable.Image
                                    style={{ justifyContent: 'space-between', alignContent: 'stretch' }}
                                    animation={this.collapsedRef?.state.collapsed ? undefined : 'zoomIn'}
                                    duration={300}
                                    // useNativeDriver
                                    source={this.state.collapsed ? require('../assets/images/arrow-black.png') : require('../assets/images/arrow-black-down.png')} />

                            </View>

                            <Text >{this.props.subtext}</Text>
                        </View>

                    </View>
                </TouchableOpacity>

                <Collapsible collapsed={this.state.collapsed}>
                    {this.props.children}
                </Collapsible>
                {/* <Accordion
            align="bottom"
            activeSections={activeSections}
            sections={CONTENT}
            touchableComponent={TouchableOpacity}
            expandMultiple={multipleSelect}
            renderHeader={this.renderHeader}
            renderContent={this.renderContent}
            duration={400}
            onChange={this.setSections}
            renderAsFlatList={false}
          /> */}

            </View>
        );
    }
}

const styles = StyleSheet.create({


    header: {

        flexDirection: 'row',
        paddingHorizontal: 5,
        width: '100%',
        flex: 1
    },
    headerText: {
        fontSize: 17,
        fontWeight: 'bold',
        color: black_color,
        fontFamily: 'Montserrat-Medium',
        marginBottom: height * 0.01,

        // paddingHorizontal: 5,
        // width:'90%'




    },

    avatarStyle: {
        width: 50,
        height: 50,

    },
    typing: {
        marginBottom: height * 0.025,


    }

    //   active: {
    //     backgroundColor: 'rgba(255,255,255,1)',
    //   },
    //   inactive: {
    //     backgroundColor: 'rgba(245,252,255,1)',
    //   },
    //   selectors: {
    //     marginBottom: 10,
    //     flexDirection: 'row',
    //     justifyContent: 'center',
    //   },
    //   selector: {
    //     backgroundColor: '#F5FCFF',
    //     padding: 10,
    //   },
    //   activeSelector: {
    //     fontWeight: 'bold',
    //   },
    //   selectTitle: {
    //     fontSize: 14,
    //     fontWeight: '500',
    //     padding: 10,
    //   },
    //   multipleToggle: {
    //     flexDirection: 'row',
    //     justifyContent: 'center',
    //     marginVertical: 30,
    //     alignItems: 'center',
    //   },
    //   multipleToggle__title: {
    //     fontSize: 16,
    //     marginRight: 8,
    //   },
});

data.js

export var data = [
    {
      'id': 'parent', 'name': 'Maria Anders', 'role': 'Board', 'color': '#71AF17','manager':null, "imageUrl": "//ej2.syncfusion.com/demos/src/diagram/employees/image30.png"
    },
    {
      'id': '1', 'name': 'Ana Trujillo', 'role': 'General Manager', 'manager': 'parent', 'color': '#71AF17', "imageUrl": "//ej2.syncfusion.com/demos/src/diagram/employees/image9.png"
    },
    {
      'id': '2', 'name': 'Thomas Hardy', 'role': 'Human Resource Manager', 'manager': '1', 'color': '#1859B7', "imageUrl": "//ej2.syncfusion.com/demos/src/diagram/employees/image3.png"
    },
    {
      'id': '3', 'name': 'Anto Moreno', 'role': 'Trainers', 'manager': '2', 'color': '#2E95D8', "imageUrl": "//ej2.syncfusion.com/demos/src/diagram/employees/image1.png"
    },
    {
      'id': '4', 'name': 'Hanna Moos', 'role': 'Recruiting Team', 'manager': '2', 'color': '#2E95D8', "imageUrl": "//ej2.syncfusion.com/demos/src/diagram/employees/image6.png"
    }, 
    {
      'id': '6', 'name': 'Martin Kloss', 'role': 'Design Manager', 'manager': '1', 'color': '#1859B7', "imageUrl": "//ej2.syncfusion.com/demos/src/diagram/employees/image18.png"
    },
    {
      'id': '7', 'name': 'Elizabeth Mary', 'role': 'Design Supervisor', 'manager': '6', 'color': '#2E95D8', "imageUrl": "//ej2.syncfusion.com/demos/src/diagram/employees/image8.png"
    },
    
    {
      'id': '9', 'name': 'Yang Wang', 'role': 'Drafting Supervisor', 'manager': '6', 'color': '#2E95D8', "imageUrl": "//ej2.syncfusion.com/demos/src/diagram/employees/image21.png"
    } 
  ];

orgChart

import React, { Component } from 'react';

import {
  ScrollView,
  StyleSheet,
  Text,
  View,
  Image,
  StatusBar,
} from 'react-native';
import * as Animatable from 'react-native-animatable';
import { data } from '../../data/data';
import LinkedList from '../../Util/linked-list';
import Collapse from '../components/SingleCollapse';
import { height } from '../constants/dimensions';

export default class Organigramme extends Component {

  state = {
    parent: null,
  }
  renderAvatar() {
    return (
      <Image source={require('../assets/images/avatar2.png')} />
    )
  }
  renderCollapse() {

    const ids = data.map((x) => x.id);
    const result = data.map((parent) => {
      const children = data.filter((child) => {
        if (child.id !== child.manager && child.manager === parent.id) {
          return true;
        }

        return false;
      });

      if (children.length) {
        parent.children = children
      }

      return parent;
    })
      .filter((obj) => {
        if (obj.id === obj.manager || !ids.includes(obj.manager)) {
          // include ultimate parents and orphans at root
          return true;
        }

        return false;
      });
    const chilrens = []
    const v = result.map((element) => {
      let n_element = element.children
      console.log(n_element[0])
      if (Array.isArray(n_element)) {
        console.log('in if')
        n_element.children = n_element
        
        console.log(n_element[0])
        // var childs = n_element[0]?.map(child => (<Collapse key={child.id} headerText={child.name} subtext={child.role} renderAvatar={require('../assets/images/avatar2.png')} >
       
          {/* <View style={styles.content}>
        //     <Text>{value.imageUrl}</Text>
        //   </View> */}
        //  </Collapse >))
        
        // chilrens.push(childs)
        // break;
      }
      console.log(chilrens)
      return <Collapse key={element.id} headerText={element.name} subtext={element.role} renderAvatar={require('../assets/images/avatar2.png')} >
      <View style={styles.content}>
        {chilrens}
      </View>
    </Collapse >
    })
    // console.log('result',result)



    let { parent } = this.state
    var i = 0
    ///////////////////////////////////
    let new_list = []

    // data.map((value,ind)=>{
    //   // const node = {node:value}
    //   for (let j in data){
    //     if(value.id == data[j].manager){
    //       const node = {node:value}

    //       if(new_list.includes(JSON.stringify(node))){
    //         new_list= new_list
    //         // new_list.map(elem=>{
    //         //   if (elem.node.id)
    //         // }
    //       }
    //      new_list.push(node)


    //     }
    //     new_list = new_list.map(elem=>{
    //       const children = data[j]
    //       // elem['children']=children
    //       elem.children = children;
    //       // Object.assign(elem, {children:children});
    //      })



    //   }
    //   const node = {node:value}
    //   new_list.push(node)
    //   // console.log(new_list)
    //   // console.log(new_list)
    // })
    // const collapse = data.map((value, index) => {

    //   parent = value.id == 2 ? value : parent
    //   // console.log('parent',parent)
    //   const dept = data.find(e => e.manager == parent?.id)
    //   // console.log(dept)
    //   // console.log('-----------------------------')
    //   let fils = []
    //   // let linked = new LinkedList()
    //   current = value.manager == null ? value : current
    //   // value.manager == null ? linked.insert(value) : ''
    //   for (j in data) {
    //     //  console.log('safari',data[j])


    //     if (current?.id == value.manager) {
    //       current = value.manager == null ? value : value
    //       fils.push(value)
    //       const fil = fils.map((value, index) => (<Collapse key={value.id} headerText={value.name} subtext={value.role} renderAvatar={require('../assets/images/avatar2.png')}>
    //         <View style={styles.content}>
    //           <Text>{value.imageUrl}</Text>
    //         </View>
    //       </Collapse>))
    //       return (< Collapse key={value.id} headerText={value.name} subtext={value.role} renderAvatar={require('../assets/images/avatar2.png')} >
    //         <View style={styles.content}>
    //           {fil}
    //         </View>
    //       </Collapse >)

    //     }
    //     else {
    //       return (<Collapse key={value.id} headerText={value.name} subtext={value.role} renderAvatar={require('../assets/images/avatar2.png')}>
    //         <View style={styles.content}>
    //           <Text>{value.imageUrl}</Text>
    //         </View>
    //       </Collapse>)
    //     }
    //   }



    // })
    // return collapse
    // for (elem in data) {
    //   const el = data[elem]
    //   console.log(el)
    //   const col = data.forEach(element => {
    //     // console.log(data.length)
    //     let l = []
    //     const value = element
    //     // console.log(value)


    //     if (value.id === el.manager) {

    //       console.log(el)
    //       return (
    //         <Collapse key={value.id} headerText={value.name} subtext={value.role} renderAvatar={require('../assets/images/avatar2.png')} >
    //           <View style={styles.content}>
    //             <Collapse key={el.id} headerText={el.name} subtext={el.role} renderAvatar={require('../assets/images/avatar2.png')} >
    //               <View style={styles.content}>
    //                 <Text>{el.imageUrl}</Text>
    //               </View>
    //             </Collapse >
    //           </View>
    //         </Collapse >

    //       )
    //     }
    //     return (
    //       <Collapse key={value.id} headerText={value.name} subtext={value.role} renderAvatar={require('../assets/images/avatar2.png')} >
    //         <View style={styles.content}>
    //           <Text>{value.imageUrl}</Text>
    //         </View>
    //       </Collapse >
    //     )

    //   })
    //   return col
    // }
return v
  }



  render() {
    return (
      <View style={styles.container}>
        <ScrollView contentContainerStyle={{ paddingTop: height * 0.025 }}>
          {/* <Collapse ref={ref => this.collapsedRef = ref} headerText="Titre de la Demo" subtext='Envoyer le 16 Mian 2022' renderAvatar={require('../assets/images/avatar2.png')}>
            <View style={styles.content}>
              <Collapse ref={ref => this.collapsedRef = ref} headerText="Titre de la Demo" subtext='Envoyer le 16 Mian 2022' renderAvatar={require('../assets/images/avatar2.png')}>
                <View style={styles.content}>
                  <Collapse ref={ref => this.collapsedRef = ref} headerText="Titre de la Demo" subtext='Envoyer le 16 Mian 2022' renderAvatar={require('../assets/images/avatar2.png')}>
                    <Text>Hello</Text>

                  </Collapse>
                </View>
              </Collapse>
            </View>
          </Collapse> */}
          {this.renderCollapse()}
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
    // paddingTop: StatusBar.currentHeight
    // Constants.statusBarHeight,
  },
  title: {
    textAlign: 'center',
    fontSize: 20,
    fontWeight: '300',
    marginBottom: 20,
  },
  header: {
    backgroundColor: '#F5FCFF',
    padding: 10,
  },
  headerText: {
    textAlign: 'center',
    fontSize: 16,
    fontWeight: '500',
  },
  content: {
    padding: 20,
    backgroundColor: '#fff',
  },

});