<commit_before><commit_msg>Add image Thumbnail component<commit_after>import React, { PropTypes } from 'react';
import { injectIntl } from 'react-intl';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import formTranslations from 'lib/translations/form';

const styles = {
  dialogContent: {
    width: '90%',
    maxWidth: 'none',
  },
  dialogBody: {
    display: 'flex',
    justifyContent: 'space-around',
  },
};

class Thumbnail extends React.Component {
  constructor(props) {
    super(props);
    const { src, file } = props;
    const isFromFile = !src && file;

    this.state = {
      src: null,
      alt: isFromFile ? file.name : null,
      open: false,
    };

    if (isFromFile) {
      const reader = new FileReader();
      reader.onload = () => this.setState({ src: reader.result });
      reader.readAsDataURL(file);
    }
  }

  render() {
    // eslint-disable-next-line no-unused-vars
    const { intl, src, alt, file, onTouchTap, style, ...props } = this.props;
    const source = src || this.state.src;
    const altText = alt || this.state.alt || src;

    const thumbnailStyle = {
      ...style,
      cursor: 'zoom-in',
    };

    const expandedImageStyle = {
      ...style,
      width: 'auto',
      height: 'auto',
      maxWidth: '100%',
      maxHeight: '100%',
      objectFit: 'contain',
    };

    const onThumbnailTouchTap = onTouchTap && typeof (onTouchTap) === 'function' ?
      (event) => {
        onTouchTap(event);
        this.setState({ open: true });
      } :
      () => this.setState({ open: true });

    const actions = [
      <FlatButton
        label={intl.formatMessage(formTranslations.close)}
        primary
        onTouchTap={() => this.setState({ open: false })}
      />,
    ];

    return (
      <div>
        <img
          src={source}
          alt={altText}
          onTouchTap={onThumbnailTouchTap}
          style={thumbnailStyle}
          {...props}
        />
        <Dialog
          actions={actions}
          modal={false}
          open={this.state.open}
          onRequestClose={() => this.setState({ open: false })}
          bodyStyle={styles.dialogBody}
          contentStyle={styles.dialogContent}
        >
          <img
            src={source}
            alt={altText}
            style={expandedImageStyle}
            {...props}
          />
        </Dialog>
      </div>
    );
  }
}

Thumbnail.propTypes = {
  intl: PropTypes.shape({
    formatMessage: PropTypes.func.isRequired,
  }).isRequired,
  src: PropTypes.string,
  alt: PropTypes.string,
  file: PropTypes.instanceOf(File),
  onTouchTap: PropTypes.func,
  style: PropTypes.shape(),
};

export default injectIntl(Thumbnail);
{'fraction_non_alphanumeric': 0.14395604395604394, 'fraction_numerical': 0.0029304029304029304, 'mean_word_length': 2.2243211334120425, 'pattern_counts': {'":': 0, '<': 10, '<?xml version=': 0, '>': 15, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6537998', 'n_tokens_mistral': 855, 'n_tokens_neox': 856, 'n_words': 176}