<commit_before>import React from 'react';
import {DragSource, DropTarget} from 'react-dnd'
import ContextMenu from './ContextMenu'
import ContextMenuItem from './ContextMenuItem'
import { StyleSheet, css } from 'aphrodite'

class Item extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      text: this.props.item.itemText,
      edit: false
    }

    this.handleDelete = this.handleDelete.bind(this)
  }

  onChange(e){
    this.setState({
      text: e.target.value
    })
  }

  toggleMode(){
    this.setState({
      edit: !this.state.edit
    })
  }
  handleKeyDown(e){
    if(e.key === 'Enter'){
      const {boardId, listId, itemId, actions} = this.props
      actions.updateItem(boardId, listId, itemId, this.state.text)
      this.setState({
        edit: false
      })
    } else if (e.key === 'Escape') {
      this.setState({
        edit: false
      })
    }
  }
  handleOnBlur(){

      this.setState({
        edit: false
      })
    }

  handleDelete(){
    const {boardId, listId, itemId, actions} = this.props
    actions.deleteItem(boardId, listId, itemId)
  }

    render() {
    	const {item, connectDragSource, connectDropTarget, isDragging} = this.props

      const styles = StyleSheet.create({
        base: {
          position: 'relative',
          backgroundColor: 'white',
          margin: '2px',
          padding: '4px 10px 4px 4px',
          fontSize: '12px',
          borderRadius: '3px',
          minHeight: '30px',
          display: 'flex',
          flexDirection: 'row',
          justifyContent: 'space-between',
          alignItems: 'center',
          fontSize: '14px',
          order: item.itemIndex
        },
        dragging: {
          backgroundColor: 'grey',
          color: 'grey',
        }
    	})

      const textEdit = <textarea rows="3" autoFocus onChange={this.onChange.bind(this)} style={{width:'90%'}}
                      onKeyDown={this.handleKeyDown.bind(this)} onBlur={this.handleOnBlur.bind(this)} value={this.state.text} />
      const textDisplay = <div onClick={this.toggleMode.bind(this)}>{item.itemText}</div>
        return connectDragSource(connectDropTarget(
        	<div className={css(styles.base, isDragging && styles.dragging)}>

        		{this.state.edit? textEdit:textDisplay}
            <ContextMenu title="Item Actions"><commit_msg>added assignee prototype<commit_after>import React from 'react';
import {DragSource, DropTarget} from 'react-dnd'
import ContextMenu from './ContextMenu'
import ContextMenuItem from './ContextMenuItem'
import { StyleSheet, css } from 'aphrodite'

class Item extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      text: this.props.item.itemText,
      edit: false
    }

    this.handleDelete = this.handleDelete.bind(this)
  }

  onChange(e){
    this.setState({
      text: e.target.value
    })
  }

  toggleMode(){
    this.setState({
      edit: !this.state.edit
    })
  }
  handleKeyDown(e){
    if(e.key === 'Enter'){
      const {boardId, listId, itemId, actions} = this.props
      actions.updateItem(boardId, listId, itemId, this.state.text)
      this.setState({
        edit: false
      })
    } else if (e.key === 'Escape') {
      this.setState({
        edit: false
      })
    }
  }
  handleOnBlur(){

      this.setState({
        edit: false
      })
    }

  handleDelete(){
    const {boardId, listId, itemId, actions} = this.props
    actions.deleteItem(boardId, listId, itemId)
  }

    render() {
    	const {item, connectDragSource, connectDropTarget, isDragging} = this.props

      const styles = StyleSheet.create({
        base: {
          position: 'relative',
          backgroundColor: 'white',
          margin: '2px',
          padding: '4px 10px 4px 4px',
          fontSize: '12px',
          borderRadius: '3px',
          minHeight: '30px',
          display: 'flex',
          flexDirection: 'row',
          justifyContent: 'space-between',
          alignItems: 'center',
          fontSize: '14px',
          order: item.itemIndex
        },
        dragging: {
          backgroundColor: 'grey',
          color: 'grey',
        },
        tag: {
          fontSize:'10px',
          padding: '5px',
          color:'white',
          border: '1px solid',
          borderRadius: '10px',
          backgroundColor: '#4875af',
        },
        itemText: {
          display:'flex',
          flexDirection: 'column'
        },
        assignees: {
          marginTop: '10px',
          display: 'flex',
          flexDirection: 'row',
          flexWrap: 'wrap'
        }
    	})

      const textEdit = <textarea rows="3" autoFocus onChange={this.onChange.bind(this)} style={{width:'90%'}}
                      onKeyDown={this.handleKeyDown.bind(this)} onBlur={this.handleOnBlur.bind(this)} value={this.state.text} />
      const textDisplay =
          <div onClick={this.toggleMode.bind(this)} className={css(styles.itemText)}>
              {item.itemText}
              <div className={css(styles.assignees)}>
                <div className={css(styles.tag)}>Fahad</div>
                <div className={css(styles.tag)}>Khalid</div>
                <div className={css(styles.tag)}>Mohammed</div>
                <div className={css(styles.tag)}>Saleh</div>
              </div>

          </div>
        return connectDragSource(connectDropTarget(
        	<div className={css(styles.base, isDragging && styles.dragging)}>
        		{this.state.edit? textEdit:textDisplay}
            <ContextMenu title="Item Actions">
{'fraction_non_alphanumeric': 0.13491209185504127, 'fraction_numerical': 0.007893792608539648, 'mean_word_length': 2.187535734705546, 'pattern_counts': {'":': 0, '<': 23, '<?xml version=': 0, '>': 23, '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': '4410188', 'n_tokens_mistral': 1717, 'n_tokens_neox': 1675, 'n_words': 340}