{"size": 2952, "ext": "js", "max_stars_repo_path": "src/components/fileDiffCollapseRegex.js", "max_stars_repo_name": "Firenza/GitHubCodeReviewFileMinimizer", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/fileDiffCollapseRegex.js", "max_issues_repo_name": "Firenza/GitHubCodeReviewFileMinimizer", "max_issues_repo_issues_event_min_datetime": "2019-02-16T17:49:35.000Z", "max_issues_repo_issues_event_max_datetime": "2019-02-16T17:49:35.000Z", "max_forks_repo_path": "src/components/fileDiffCollapseRegex.js", "max_forks_repo_name": "Firenza/GitHubCodeReviewFileMinimizer", "max_forks_repo_forks_event_min_datetime": "2017-12-21T18:35:50.000Z", "max_forks_repo_forks_event_max_datetime": "2017-12-21T18:35:50.000Z"}
{"max_stars_count": null, "max_issues_count": 1, "max_forks_count": 1, "avg_line_length": 33.9310344828, "max_line_length": 128, "alphanum_fraction": 0.5291327913}
import React, { Component } from 'react';
import Typography from 'material-ui/Typography';
import DeleteIcon from 'material-ui-icons/Delete';
import List, { ListItem, ListItemSecondaryAction, ListItemText } from 'material-ui/List';
import IconButton from 'material-ui/IconButton';
import TextField from 'material-ui/TextField';
import Select from 'material-ui/Select';
import Input, { InputLabel } from 'material-ui/Input';
import { MenuItem } from 'material-ui/Menu';
import Grid from 'material-ui/Grid';
import * as _ from 'lodash';
import Tooltip from 'material-ui/Tooltip';

const listItemStyle = {
    paddingTop: '5px',
    paddingBottom: '5px'
}

export default class FileDiffCollapseRegex extends Component {
    constructor(props) {
        super(props);

        this.state = this.props.fileDiffCollapseSetting;
    }

    componentWillReceiveProps(nextProps) {
        this.setState(nextProps.fileDiffCollapseSetting);
    }

    debouncedUpdated = _.debounce(this.props.updateFileDiffCollapseSetting, 150);

    handleInputChange = event => {
        this.state.matchString = event.target.value;

        this.setState(this.state);

        this.debouncedUpdated(this.state);
    }

    handleSelectChange = event => {
        this.state.matchType = event.target.value;

        this.setState(this.state);

        this.debouncedUpdated(this.state);
    }

    render() {
        return (
            <ListItem style={listItemStyle}>
                <Grid container alignItems="center">
                    <Grid item xs={1}>
                        {this.props.index > 0 &&
                            <Typography type="body2">Or</Typography>
                        }
                    </Grid>
                    <Grid item xs={5}>
                        <Select
                            value={this.state.matchType}
                            onChange={this.handleSelectChange}
                            input={<Input/>}
                        >
                            <MenuItem value={"Contains"}>Contains</MenuItem>
                            <MenuItem value={"Matches Regex"}>Matches Regex</MenuItem>
                        </Select>
                    </Grid>
                    <Grid item xs={5}>
                        <TextField
                            id="name"
                            value={this.state.matchString}
                            onChange={this.handleInputChange}
                        />
                    </Grid>
                </Grid>
                <ListItemSecondaryAction>
                    <Tooltip placement="left" title="Delete condition">
                        <IconButton onClick={() => this.props.deleteFileDiffCollapseSetting(this.state.id)} aria-label="Delete">
                            <DeleteIcon />
                        </IconButton>
                    </Tooltip>
                </ListItemSecondaryAction>
            </ListItem>
        );
    }
}

