<commit_before>/**
 * Created by <NAME>
 */
import React, { Component } from 'react';
import { View, Image, Dimensions, Modal, TouchableOpacity } from 'react-native';
import * as _ from 'lodash';

class PhotoGrid extends Component {

    constructor(props) {
        super(props)
        this.state = {
            modalVisible: false,
            photoUrl: '',
        };

    }

    photoPopupToggle(photoUrl) {
        this.setState({ modalVisible: !this.state.modalVisible, photoUrl });
    }

    renderChunk() {
        let chunk = _.chunk(this.props.PhotosList, 9);

        return chunk.map(
            (chunkItem, index) => {
                let row = _.chunk(chunkItem, 3);

                return row.map(
                    (rowItem, rowIndex) => {

                        return this.renderPhotoRow(rowItem, rowIndex);
                    }
                )

            }
        )


    }
    renderPhotoRow(rowItem, rowIndex) {

        if (rowIndex == 0) {
            return this.renderPhotoRow1(rowItem);
        }
        else if (rowIndex == 1) {
            return this.renderPhotoRow2(rowItem);
        }
        else if (rowIndex == 2) {
            return this.renderPhotoRow3(rowItem);
        }

    }
    renderPhotoRow1(row) {
        console.log('row', row);
        return (
            <View key={1} style={styles.alignCenter}>
                {
                    row.map(
                        (item, index) => {
                            return (
                                <View key={index} style={[styles.photoView, { borderRadius: this.props.borderRadius }]}>
                                    <TouchableOpacity onPress={() => { this.photoPopupToggle(item.url) }}>
                                        <Image source={{ uri: item.url }} style={[styles.ImageStyle, { borderRadius: this.props.borderRadius }]} />
                                    </TouchableOpacity>
                                </View>
                            )
                        }

                    )
                }

            </View>
        )
    }
    renderPhotoRow2(row) {

        if (row.length == 1) {
            return (
                <View key={row[0].url} style={styles.alignCenter}>
                    <View key={row[0].url} style={[styles.expandedView, { borderRadius: this.props.borderRadius }]}>
                        <TouchableOpacity onPress={() => { this.photoPopupToggle(row[0].url) }}>
                            <Image source={{ uri: row[0].url }} style={[styles.ImageStyle, styles.expandedImage, { borderRadius: this.props.borderRadius }]} />
                        </TouchableOpacity>
                    </View>
                </View>
            )
        }
        else if (row.length == 2) {
            return (
                <View key={row[0].url} style={styles.alignCenter}>
                    <View key={row[0].url} style={[styles.expandedView, { borderRadius: this.props.borderRadius }]}>
                        <TouchableOpacity onPress={() => { this.photoPopupToggle(row[0].url) }}>
                            <Image source={{ uri: row[0].url }} style={[styles.ImageStyle, styles.expandedImage, { borderRadius: this.props.borderRadius }]} />
                        </TouchableOpacity>
                    </View>
                    <View key={row[1].url} style={styles.flexCol}>
                        <View style={[styles.photoView, { borderRadius: this.props.borderRadius }]}>
                            <TouchableOpacity onPress={() => { this.photoPopupToggle(row[1].url) }}>
                                <Image source={{ uri: row[1].url }} style={[styles.ImageStyle, { borderRadius: this.props.borderRadius }]} />
                            </TouchableOpacity>
                        </View>
                    </View>
                </View>
            )

        }
        else if (row.length == 3) {
            return (
                <View key={row[0].url} style={styles.alignCenter}>
                    <View key={row[0].url} style={[styles.expandedView, { borderRadius: this.props.borderRadius }]}>
                        <TouchableOpacity onPress={() => { this.photoPopupToggle(row[0].url) }}>
                            <Image source={{ uri: row[0].url }} style={[styles.ImageStyle, styles.expandedImage, { borderRadius: this.props.borderRadius }]} />
                        </TouchableOpacity>
                    </View>
                    <View key={row[1].url} style={styles.flexCol}>
                        <View style={[styles.photoView, { borderRadius: this.props.borderRadius }]}>
                            <TouchableOpacity onPress={() => { this.photoPopupToggle(row[1].url) }}>
                                <Image source={{ uri: row[1].url }} style={[styles.ImageStyle, { borderRadius: this.props.borderRadius }]} />
                            </TouchableOpacity>
                        </View>
                        <View style={[styles.photoView, { borderRadius: this.props.borderRadius }]}>
                            <TouchableOpacity onPress={() => { this.photoPopupToggle(row[2].url) }}>
                                <Image source={{ uri: row[2].url }} style={[styles.ImageStyle, { borderRadius: this.props.borderRadius }]} />
                            </TouchableOpacity>
                        </View>
                    </View>
                </View>
            )

        }

    }
    renderPhotoRow3(row) {

        if (row.length == 1) {
            return (
                <View key={row[0].url} style={styles.alignCenter}>
                    <View key={row[0].url} style={styles.flexCol}>
                        <View style={[styles.photoView, { borderRadius: this.props.borderRadius }]}>
                            <TouchableOpacity onPress={() => { this.photoPopupToggle(row[0].url) }}>
                                <Image source={{ uri: row[0].url }} style={[styles.ImageStyle, { borderRadius: this.props.borderRadius }]} />
                            </TouchableOpacity>
                        </View>

                    </View>
                </View>
            )
        }
        else if (row.length == 2) {
            return (
                <View key={row[0].url} style={styles.alignCenter}>
                    <View key={row[0].url} style={styles.flexCol}>
                        <View style={[styles.photoView, { borderRadius: this.props.borderRadius }]}>
                            <TouchableOpacity onPress={() => { this.photoPopupToggle(row[0].url) }}>
                                <Image source={{ uri: row[0].url }} style={[styles.ImageStyle, { borderRadius: this.props.borderRadius }]} />
                            </TouchableOpacity>
                        </View>
                        <View key={row[1].url} style={[styles.photoView, { borderRadius: this.props.borderRadius }]}>
                            <TouchableOpacity onPress={() => { this.photoPopupToggle(row[1].url) }}>
                                <Image source={{ uri: row[1].url }} style={[styles.ImageStyle, { borderRadius: this.props.borderRadius }]} />
                            </TouchableOpacity>
                        </View>
                    </View>
                </View>
            )

        }
        else if (row.length == 3) {
            return (
                <View key={row[0].url} style={styles.alignCenter}>

                    <View style={styles.flexCol}>
                        <View style={[styles.photoView, { borderRadius: this.props.borderRadius }]}>
                            <TouchableOpacity onPress={() => { this.photoPopupToggle(row[0].url) }}>
                                <Image source={{ uri: row[0].url }} style={[styles.ImageStyle, { borderRadius: this.props.borderRadius }]} />
                            </TouchableOpacity>
                        </View>
                        <View style={[styles.photoView, { borderRadius: this.props.borderRadius }]}>
                            <TouchableOpacity onPress={() => { this.photoPopupToggle(row[1].url) }}>
                                <Image source={{ uri: row[1].url }} style={[styles.ImageStyle, { borderRadius: this.props.borderRadius }]} />
                            </TouchableOpacity>
                        </View>
                    </View>
                    <View style={[styles.expandedView, { borderRadius: this.props.borderRadius }]}>
                        <TouchableOpacity onPress={() => { this.photoPopupToggle(row[2].url) }}>
                            <Image source={{ uri: row[2].url }} style={[styles.ImageStyle, styles.expandedImage, { borderRadius: this.props.borderRadius }]} />
                        </TouchableOpacity>
                    </View>
                </View>
            )

        }

    }

    renderGrid() {
        return (
            <View>
                {this.renderChunk()}
            </View>
        )
    }

    render() {

        return (<commit_msg>Add overlay with child component<commit_after>/**
 * Created by <NAME>
 */
import React, { Component } from 'react';
import { View, Image, Dimensions, Modal, TouchableOpacity } from 'react-native';
import * as _ from 'lodash';

class PhotoGrid extends Component {

    constructor(props) {
        super(props)
        this.state = {
            modalVisible: false,
            photoUrl: '',
        };

    }

    photoPopupToggle(photoUrl) {
        this.setState({ modalVisible: !this.state.modalVisible, photoUrl });
    }

    renderChunk() {
        let chunk = _.chunk(this.props.PhotosList, 9);

        return chunk.map(
            (chunkItem, index) => {
                let row = _.chunk(chunkItem, 3);

                return row.map(
                    (rowItem, rowIndex) => {

                        return this.renderPhotoRow(rowItem, rowIndex);
                    }
                )

            }
        )


    }
    renderPhotoRow(rowItem, rowIndex) {

        if (rowIndex == 0) {
            return this.renderPhotoRow1(rowItem);
        }
        else if (rowIndex == 1) {
            return this.renderPhotoRow2(rowItem);
        }
        else if (rowIndex == 2) {
            return this.renderPhotoRow3(rowItem);
        }

    }
    renderPhotoRow1(row) {
        const { children } = this.props;
        console.log('row', row);
        return (
            <View key={1} style={styles.alignCenter}>
                {
                    row.map(
                        (item, index) => {
                            return (
                                <View key={index} style={[styles.photoView, { borderRadius: this.props.borderRadius }]}>
                                    <TouchableOpacity onPress={() => { this.photoPopupToggle(item.url) }}>
                                        <Image source={{ uri: item.url }} style={[styles.ImageStyle, { borderRadius: this.props.borderRadius }]} />
                                        {children && children(item)}
                                    </TouchableOpacity>
                                </View>
                            )
                        }

                    )
                }

            </View>
        )
    }
    renderPhotoRow2(row) {
        const { children } = this.props;
        if (row.length == 1) {
            return (
                <View key={row[0].url} style={styles.alignCenter}>
                    <View key={row[0].url} style={[styles.expandedView, { borderRadius: this.props.borderRadius }]}>
                        <TouchableOpacity onPress={() => { this.photoPopupToggle(row[0].url) }}>
                            <Image source={{ uri: row[0].url }} style={[styles.ImageStyle, styles.expandedImage, { borderRadius: this.props.borderRadius }]} />
                            {children && children(row[0])}
                        </TouchableOpacity>
                    </View>
                </View>
            )
        }
        else if (row.length == 2) {
            return (
                <View key={row[0].url} style={styles.alignCenter}>
                    <View key={row[0].url} style={[styles.expandedView, { borderRadius: this.props.borderRadius }]}>
                        <TouchableOpacity onPress={() => { this.photoPopupToggle(row[0].url) }}>
                            <Image source={{ uri: row[0].url }} style={[styles.ImageStyle, styles.expandedImage, { borderRadius: this.props.borderRadius }]} />
                            {children && children(row[0])}
                        </TouchableOpacity>
                    </View>
                    <View key={row[1].url} style={styles.flexCol}>
                        <View style={[styles.photoView, { borderRadius: this.props.borderRadius }]}>
                            <TouchableOpacity onPress={() => { this.photoPopupToggle(row[1].url) }}>
                                <Image source={{ uri: row[1].url }} style={[styles.ImageStyle, { borderRadius: this.props.borderRadius }]} />
                                {children && children(row[1])}
                            </TouchableOpacity>
                        </View>
                    </View>
                </View>
            )

        }
        else if (row.length == 3) {
            return (
                <View key={row[0].url} style={styles.alignCenter}>
                    <View key={row[0].url} style={[styles.expandedView, { borderRadius: this.props.borderRadius }]}>
                        <TouchableOpacity onPress={() => { this.photoPopupToggle(row[0].url) }}>
                            <Image source={{ uri: row[0].url }} style={[styles.ImageStyle, styles.expandedImage, { borderRadius: this.props.borderRadius }]} />
                            {children && children(row[0])}
                        </TouchableOpacity>
                    </View>
                    <View key={row[1].url} style={styles.flexCol}>
                        <View style={[styles.photoView, { borderRadius: this.props.borderRadius }]}>
                            <TouchableOpacity onPress={() => { this.photoPopupToggle(row[1].url) }}>
                                <Image source={{ uri: row[1].url }} style={[styles.ImageStyle, { borderRadius: this.props.borderRadius }]} />
                                {children && children(row[1])}
                            </TouchableOpacity>
                        </View>
                        <View style={[styles.photoView, { borderRadius: this.props.borderRadius }]}>
                            <TouchableOpacity onPress={() => { this.photoPopupToggle(row[2].url) }}>
                                <Image source={{ uri: row[2].url }} style={[styles.ImageStyle, { borderRadius: this.props.borderRadius }]} />
                                {children && children(row[2])}
                            </TouchableOpacity>
                        </View>
                    </View>
                </View>
            )

        }

    }
    renderPhotoRow3(row) {
        const { children } = this.props;
        if (row.length == 1) {
            return (
                <View key={row[0].url} style={styles.alignCenter}>
                    <View key={row[0].url} style={styles.flexCol}>
                        <View style={[styles.photoView, { borderRadius: this.props.borderRadius }]}>
                            <TouchableOpacity onPress={() => { this.photoPopupToggle(row[0].url) }}>
                                <Image source={{ uri: row[0].url }} style={[styles.ImageStyle, { borderRadius: this.props.borderRadius }]} />
                                {children && children(row[0])}
                            </TouchableOpacity>
                        </View>

                    </View>
                </View>
            )
        }
        else if (row.length == 2) {
            return (
                <View key={row[0].url} style={styles.alignCenter}>
                    <View key={row[0].url} style={styles.flexCol}>
                        <View style={[styles.photoView, { borderRadius: this.props.borderRadius }]}>
                            <TouchableOpacity onPress={() => { this.photoPopupToggle(row[0].url) }}>
                                <Image source={{ uri: row[0].url }} style={[styles.ImageStyle, { borderRadius: this.props.borderRadius }]} />
                                {children && children(row[0])}
                            </TouchableOpacity>
                        </View>
                        <View key={row[1].url} style={[styles.photoView, { borderRadius: this.props.borderRadius }]}>
                            <TouchableOpacity onPress={() => { this.photoPopupToggle(row[1].url) }}>
                                <Image source={{ uri: row[1].url }} style={[styles.ImageStyle, { borderRadius: this.props.borderRadius }]} />
                                {children && children(row[1])}
                            </TouchableOpacity>
                        </View>
                    </View>
                </View>
            )

        }
        else if (row.length == 3) {
            return (
                <View key={row[0].url} style={styles.alignCenter}>

                    <View style={styles.flexCol}>
                        <View style={[styles.photoView, { borderRadius: this.props.borderRadius }]}>
                            <TouchableOpacity onPress={() => { this.photoPopupToggle(row[0].url) }}>
                                <Image source={{ uri: row[0].url }} style={[styles.ImageStyle, { borderRadius: this.props.borderRadius }]} />
                                {children && children(row[0])}
                            </TouchableOpacity>
                        </View>
                        <View style={[styles.photoView, { borderRadius: this.props.borderRadius }]}>
                            <TouchableOpacity onPress={() => { this.photoPopupToggle(row[1].url) }}>
                                <Image source={{ uri: row[1].url }} style={[styles.ImageStyle, { borderRadius: this.props.borderRadius }]} />
                                {children && children(row[1])}
                            </TouchableOpacity>
                        </View>
                    </View>
                    <View style={[styles.expandedView, { borderRadius: this.props.borderRadius }]}>
                        <TouchableOpacity onPress={() => { this.photoPopupToggle(row[2].url) }}>
                            <Image source={{ uri: row[2].url }} style={[styles.ImageStyle, styles.expandedImage, { borderRadius: this.props.borderRadius }]} />
                            {children && children(row[2])}
                        </TouchableOpacity>
                    </View>
                </View>
            )

        }

    }

    renderGrid() {
        return (
            <View>
                {this.renderChunk()}
            </View>
        )
    }

    render() {

        return (
{'fraction_non_alphanumeric': 0.13764178317066736, 'fraction_numerical': 0.0065418095489316805, 'mean_word_length': 1.3052413960841542, 'pattern_counts': {'":': 0, '<': 187, '<?xml version=': 0, '>': 219, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 7, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5232665', 'n_tokens_mistral': 4965, 'n_tokens_neox': 4802, 'n_words': 807}