{"size": 2401, "ext": "js", "max_stars_repo_path": "transitions/app/PhotoGrid.js", "max_stars_repo_name": "lintonye/react-native-diary", "max_stars_repo_stars_event_min_datetime": "2016-11-21T01:09:36.000Z", "max_stars_repo_stars_event_max_datetime": "2020-09-12T06:26:53.000Z", "max_issues_repo_path": "transitions/app/PhotoGrid.js", "max_issues_repo_name": "lintonye/react-native-diary", "max_issues_repo_issues_event_min_datetime": "2017-03-10T10:59:20.000Z", "max_issues_repo_issues_event_max_datetime": "2017-11-09T01:33:52.000Z", "max_forks_repo_path": "transitions/app/PhotoGrid.js", "max_forks_repo_name": "lintonye/react-native-diary", "max_forks_repo_forks_event_min_datetime": "2016-06-24T21:13:51.000Z", "max_forks_repo_forks_event_max_datetime": "2019-09-03T09:58:27.000Z"}
{"max_stars_count": 54, "max_issues_count": 3, "max_forks_count": 18, "avg_line_length": 25.8172043011, "max_line_length": 97, "alphanum_fraction": 0.5680966264}
// @flow
import React, { Component } from 'react';
import {
    ListView,
    Image,
    View,
    Text,
    Dimensions,
    StyleSheet,
} from 'react-native';
import faker from 'faker';
import _ from 'lodash';

import SharedView from './SharedView';
import Touchable from './Touchable';

const ds = new ListView.DataSource({
    rowHasChanged: (r1, r2) => r1 !== r2,
});

const images = [
    require('./images/img1.jpg'),
    require('./images/img2.jpg'),
    require('./images/img3.jpg'),
    require('./images/img4.jpg'),
    require('./images/img5.jpg'),
    require('./images/img6.jpg'),
    require('./images/img7.jpg'),
    require('./images/img8.jpg'),
    require('./images/img9.jpg'),
    require('./images/img10.jpg'),
    require('./images/img11.jpg'),
    require('./images/img12.jpg'),
]

const photos = Array(50).fill(0).map(_ => ({
    url: faker.image.animals(500, 500, true),
    image: images[faker.random.number(images.length-1)],
    title: faker.name.findName(),
    description: faker.lorem.paragraphs(4),
}));

const colCount = 3;

const { width: windowWidth } = Dimensions.get("window");
const margin = 2;
const photoWidth = (windowWidth - margin * colCount * 2) / colCount;

const photoRows = _.chunk(photos, colCount);

class PhotoGrid extends Component {
    render() {
        return (
            <ListView
                dataSource={ds.cloneWithRows(photoRows)}
                renderRow={this.renderRow.bind(this)}
                />);
    }
    renderRow(photos) {
        return (
            <View style={styles.row}>
                {photos.map(this.renderCell.bind(this))}
            </View>
        )
    }
    renderCell(photo) {
        const onPhotoPressed = photo => this.props.navigation.navigate('PhotoDetail', { photo });
        return (
            <Touchable onPress={() => onPhotoPressed(photo)} key={photo.url}>
                <View style={styles.cell}>
                    <SharedView name={`image-${photo.url}`} containerRouteName='PhotoGrid'>
                        <Image source={photo.image} style={styles.image}/>
                    </SharedView>
                </View>
            </Touchable>
        )
    }
}

const styles = StyleSheet.create({
    row: {
        flexDirection: 'row',
    },
    cell: {
        margin: 2,
    },
    image: {
        width: photoWidth,
        height: photoWidth,
    }
})

export default PhotoGrid;