<commit_before>import React, { Component } from 'react'

export default class Image extends Component {
  constructor(props){
    super(props);
    this.state = {
      naturalSizeList: {}
    }
  }


  onLoadImage(e){
    const img = e.currentTarget;
    const newList = {...this.state.naturalSizeList};
    newList[img.getAttribute("data-id")] = {
      width: img.naturalWidth,
      height: img.naturalHeight,
    }
    this.setState({"naturalSizeList": newList});
  }

  displayNaturalSize(image){
    if(this.state.naturalSizeList[image.id]){
      return (
        <div className="text-center">
          W:{this.state.naturalSizeList[image.id].width}&nbsp;
          H:{this.state.naturalSizeList[image.id].height}
        </div>
      )
    } else {
      return null;
    }
  }

  onClickRemove(e){
    const imgId = e.currentTarget.getAttribute("data-id");
    this.props.onValueChange({
      code: this.props.data.code,
      values: this.props.values.filter(image => image.id != imgId),
    });
  }

  render() {
    return (
      <div>
        <input className="form-control" type="file"/>
        <ul className="clearfix list-unstyled">
          {this.props.values.map(image => {
            return (
              <li key={image.id} className="pull-left">
                <div>
                  <button data-id={image.id} onClick={e => this.onClickRemove(e)} className="btn btn-danger btn-sm" type="button">
                    <i className="fa fa-times" aria-hidden="true"></i>
                  </button>
                </div>
                <div style={{
                  height: this.props.thumbHeight,
                  width: this.props.thumbWidth,
                }}>
                  <img
                    onLoad={e => this.onLoadImage(e)}
                    src={image.path} data-id={image.id}
                    style={{
                      maxHeight: this.props.thumbHeight,
                      maxWidth: this.props.thumbWidth,<commit_msg>画像の追加を実装。<commit_after>import React, { Component } from 'react'

export default class Image extends Component {
  constructor(props){
    super(props);
    this.state = {
      naturalSizeList: {}
    }

    this.newImageId = 1;
  }


  onLoadImage(e){
    const img = e.currentTarget;
    const newList = {...this.state.naturalSizeList};
    newList[img.getAttribute("data-id")] = {
      width: img.naturalWidth,
      height: img.naturalHeight,
    }
    this.setState({"naturalSizeList": newList});
  }

  displayNaturalSize(image){
    if(this.state.naturalSizeList[image.id]){
      return (
        <div className="text-center">
          W:{this.state.naturalSizeList[image.id].width}&nbsp;
          H:{this.state.naturalSizeList[image.id].height}
        </div>
      )
    } else {
      return null;
    }
  }

  onClickRemove(e){
    const imgId = e.currentTarget.getAttribute("data-id");
    this.props.onValueChange({
      code: this.props.data.code,
      values: this.props.values.filter(image => image.id != imgId),
    });
  }

  onChangeInput(e){
    const input = e.currentTarget;
    if (input.files && input.files.length > 0) {
        for (var i = 0; i < input.files.length; i++) {
          const imageId = 'new_' + this.newImageId++;
          const reader = new FileReader();
          const file = input.files[i];
          reader.onload = (e) => {
            this.props.onValueChange({
              code: this.props.data.code,
              values: [...this.props.values, {id: imageId, path: e.target.result, file: file}],
            });
          }
          reader.readAsDataURL(file)
        }
    }
  }

  render() {
    return (
      <div>
        <input className="form-control" type="file" onChange={e => this.onChangeInput(e)} multiple />
        <ul className="clearfix list-unstyled">
          {this.props.values.map(image => {
            return (
              <li key={image.id} className="pull-left">
                <div>
                  <button data-id={image.id} onClick={e => this.onClickRemove(e)} className="btn btn-danger btn-sm" type="button">
                    <i className="fa fa-times" aria-hidden="true"></i>
                  </button>
                </div>
                <div style={{
                  height: this.props.thumbHeight,
                  width: this.props.thumbWidth,
                }}>
                  <img
                    onLoad={e => this.onLoadImage(e)}
                    src={image.path} data-id={image.id}
                    style={{
                      maxHeight: this.props.thumbHeight,
                      maxWidth: this.props.thumbWidth,
{'fraction_non_alphanumeric': 0.14171527327716568, 'fraction_numerical': 0.0006480881399870382, 'mean_word_length': 1.8231707317073171, 'pattern_counts': {'":': 2, '<': 32, '<?xml version=': 0, '>': 40, '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': '7379947', 'n_tokens_mistral': 1391, 'n_tokens_neox': 1356, 'n_words': 236}