Boostnote/browser/components/SnippetTab.js

import React from 'react'
import CSSModules from 'browser/lib/CSSModules'
import styles from './SnippetTab.styl'
import context from 'browser/lib/context'
import i18n from 'browser/lib/i18n'

class SnippetTab extends React.Component {
  constructor (props) {
    super(props)

    this.state = {
      isRenaming: false,
      name: props.snippet.name
    }
  }

  componentWillUpdate (nextProps) {
    if (nextProps.snippet.name !== this.props.snippet.name) {
      this.setState({
        name: nextProps.snippet.name
      })
    }
  }

  handleClick (e) {
    this.props.onClick(e)
  }

  handleContextMenu (e) {
    context.popup([
      {
        label: i18n.__('Rename'),
        click: (e) => this.handleRenameClick(e)
      }
    ])
  }

  handleRenameClick (e) {
    this.startRenaming()
  }

  handleNameInputBlur (e) {
    this.handleRename()
  }

  handleNameInputChange (e) {
    this.setState({
      name: e.target.value
    })
  }

  handleNameInputKeyDown (e) {
    switch (e.keyCode) {
      case 13:
        this.handleRename()
        break
      case 27:
        this.setState((prevState, props) => ({
          name: props.snippet.name,
          isRenaming: false
        }))
        break
    }
  }

  handleRename () {
    this.setState({
      isRenaming: false
    }, () => {
      if (this.props.snippet.name !== this.state.name) {
        this.props.onRename(this.state.name)
      }
    })
  }

  handleDeleteButtonClick (e) {
    this.props.onDelete(e)
  }

  startRenaming () {
    this.setState({
      isRenaming: true
    }, () => {
      this.refs.name.focus()
      this.refs.name.select()
    })
  }

  handleDragStart (e) {
    e.dataTransfer.dropEffect = 'move'
    this.props.onDragStart(e)
  }

  handleDrop (e) {
    this.props.onDrop(e)
  }

  render () {
    const { isActive, snippet, isDeletable } = this.props
    return (
      <div styleName={isActive
          ? 'root--active'
          : 'root'
        }
      >
        {!this.state.isRenaming
          ? <button styleName='button'
            onClick={(e) => this.handleClick(e)}
            onDoubleClick={(e) => this.handleRenameClick(e)}
            onContextMenu={(e) => this.handleContextMenu(e)}
            onDragStart={(e) => this.handleDragStart(e)}
            onDrop={(e) => this.handleDrop(e)}
            draggable='true'
          >
            {snippet.name.trim().length > 0
              ? snippet.name
              : <span>
                {i18n.__('Unnamed')}
              </span>
            }
          </button>
          : <input styleName='input'
            ref='name'
            value={this.state.name}
            onChange={(e) => this.handleNameInputChange(e)}
            onBlur={(e) => this.handleNameInputBlur(e)}
            onKeyDown={(e) => this.handleNameInputKeyDown(e)}
          />
        }
        {isDeletable &&
          <button styleName='deleteButton'
            onClick={(e) => this.handleDeleteButtonClick(e)}
          >
            <i className='fa fa-times' />
          </button>
        }
      </div>
    )
  }
}

SnippetTab.propTypes = {

}

export default CSSModules(SnippetTab, styles)