{"size": 4477, "ext": "js", "max_stars_repo_path": "components/Descriptif.js", "max_stars_repo_name": "YannickBezes/myicetool", "max_stars_repo_stars_event_min_datetime": "2018-03-08T10:42:46.000Z", "max_stars_repo_stars_event_max_datetime": "2018-03-12T09:19:03.000Z", "max_issues_repo_path": "components/Descriptif.js", "max_issues_repo_name": "YannickBezes/myicetool", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "components/Descriptif.js", "max_forks_repo_name": "YannickBezes/myicetool", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 2, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 46.6354166667, "max_line_length": 160, "alphanum_fraction": 0.5282555283}
import React, { Component } from 'react'
import { View, Text, Image, ScrollView } from 'react-native'

import styles from '../styles/components/Descriptif.style'

export default class Descriptif extends Component {

    constructor(props) {
        super(props)
    }

    get constituants() {
        const { constituants } = this.props
        const items = constituants && constituants.length ?
            constituants.map((c, index) => {
                return <Text style={[styles.textColor, styles.list]} key={`constituant=${index}`}>- {c.libelle}</Text>
            }) : false
        return (
            <View>
                <Text style={[styles.strong, styles.textColor]}>Constituants : </Text>
                {items}
            </View>
        )
    }

    get supports() {
        const { supports } = this.props
        const items = supports && supports.length ?
            supports.map((s, index) => {
                return <Text style={[styles.textColor, styles.list]} key={`support=${index}`}>- {s.libelle}</Text>
            }) : false
        return (
            <View style={{paddingBottom: 10}}>
                <Text style={[styles.strong, styles.textColor]}>Supports : </Text>
                {items}
            </View>
        )
    }

    render() {
        let { nom, nombre_voies, altitude_minimum, hauteur, niveau_engagement, lng, lat, type_fin_vie, type_glace, structure, orientation, niveau } = this.props
        return(
            <ScrollView style={styles.content}>
                <View style={styles.containerText}>
                    <Text style={[styles.strong, styles.textColor]}>Nom cascade : </Text><Text style={styles.textColor}>{nom}</Text>
                </View>
                <View style={styles.containerText}>
                    <Text style={[styles.strong, styles.textColor]}>Nombre de voies : </Text><Text style={styles.textColor}>{nombre_voies}</Text>
                </View>
                <View style={styles.containerText}>
                    <Text style={[styles.strong, styles.textColor]}>Altitude Minimum : </Text>
                    <Text style={styles.textColor}>{altitude_minimum}</Text>
                </View>
                <View style={styles.containerText}>
                    <Text style={[styles.strong, styles.textColor]}>Hauteur : </Text>
                    <Text style={styles.textColor}>{hauteur}</Text>
                </View>
                <View style={styles.containerText}>
                    <Text style={[styles.strong, styles.textColor]}>Niveau d'engagement : </Text>
                    <Text style={styles.textColor}>{niveau_engagement}</Text>
                </View>
                <View style={styles.containerText}>
                    <Text style={[styles.strong, styles.textColor]}>Latitude : </Text>
                    <Text style={styles.textColor}>{lat}</Text>
                </View>
                <View style={styles.containerText}>
                    <Text style={[styles.strong, styles.textColor]}>Longitude : </Text>
                    <Text style={styles.textColor}>{lng}</Text>
                </View>
                <View style={styles.containerText}>
                    <Text style={[styles.strong, styles.textColor]}>Type de fin de vie : </Text>
                    <Text style={styles.textColor}>{type_fin_vie.libelle}</Text>
                </View>
                <View style={styles.containerText}>
                    <Text style={[styles.strong, styles.textColor]}>Type de glace : </Text>
                    <Text style={styles.textColor}>{type_glace.libelle}</Text>
                </View>
                <View style={styles.containerText}>
                    <Text style={[styles.strong, styles.textColor]}>Structure : </Text>
                    <Text style={styles.textColor}>{structure.libelle}</Text>
                </View>
                <View style={styles.containerText}>
                    <Text style={[styles.strong, styles.textColor]}>Orientation : </Text>
                    <Text style={styles.textColor}>{orientation.libelle}</Text>
                </View>
                <View style={styles.containerText}>
                    <Text style={[styles.strong, styles.textColor]}>Niveau de difficulté : </Text>
                    <Text style={styles.textColor}>{niveau.libelle}</Text>
                </View>
                {this.constituants}
                {this.supports}
            </ScrollView>
        );
    }
}
