<commit_before>/* @flow */
/** @jsx etch.dom */

import etch from 'etch'

import BranchesViewModel from './branches-view-model'

import type {TextEditor} from 'atom'
import type {ComponentWidget} from 'etch'
const TextEditorComponent = atom.workspace.buildTextEditor

type CreateBranchComponentProps = {
  viewModel: BranchesViewModel,
  onClose: () => void
}

export default class CreateBranchComponent {
  element: HTMLElement;
  viewModel: BranchesViewModel;
  onClose: () => void;

  refs: {editor: TextEditor};

  textEditorComponent: ComponentWidget;

  constructor (props: CreateBranchComponentProps) {
    // $FlowFixMe: Yes, we know this isn't a React component.
    this.textEditorComponent = <TextEditorComponent
      ref='editor'
      placeholderText='Branch name'
      mini={true}/>

    this.acceptProps(props)

    const editorElement = this.refs.editor.getElement()

    atom.commands.add(editorElement, {
      'core:confirm': () => this.create(),
      'core:cancel': () => this.close()
    })

    editorElement.addEventListener('blur', () => {
      if (document.hasFocus()) this.close()
    })
  }

  acceptProps ({viewModel, onClose}: CreateBranchComponentProps): Promise<void> {
    this.viewModel = viewModel
    this.onClose = onClose

    if (this.element) {
      return etch.update(this)
    } else {
      etch.initialize(this)
      return Promise.resolve()
    }
  }

  close () {
    this.onClose()
  }

  async create (): Promise<void> {
    const name = this.refs.editor.getText()
    const sanitizedName = await this.viewModel.sanitizedBranchName(name)

    console.log('create', sanitizedName)

    this.close()
  }

  focus () {
    this.refs.editor.getElement().focus()
  }

  render () {
    return (
      <div>{this.textEditorComponent}</div>
    )
  }

  update (props: CreateBranchComponentProps, children: Array<any>): Promise<void> {
    return this.acceptProps(props)
  }
}<commit_msg>Show the sanitized branch name.<commit_after>/* @flow */
/** @jsx etch.dom */

import etch from 'etch'
import {CompositeDisposable, Disposable} from 'atom'

import BranchesViewModel from './branches-view-model'

import type {TextEditor} from 'atom'
import type {ComponentWidget} from 'etch'
const TextEditorComponent = atom.workspace.buildTextEditor

type CreateBranchComponentProps = {
  viewModel: BranchesViewModel,
  onClose: () => void
}

export default class CreateBranchComponent {
  element: HTMLElement;
  viewModel: BranchesViewModel;
  onClose: () => void;
  subscriptions: CompositeDisposable;

  refs: {editor: TextEditor};

  enteredName: string;
  sanitizedName: string;

  textEditorComponent: ComponentWidget;

  constructor (props: CreateBranchComponentProps) {
    // $FlowFixMe: Yes, we know this isn't a React component.
    this.textEditorComponent = <TextEditorComponent
      ref='editor'
      placeholderText='Branch name'
      mini={true}/>

    this.acceptProps(props)

    const editorElement = this.refs.editor.getElement()

    atom.commands.add(editorElement, {
      'core:confirm': () => this.create(),
      'core:cancel': () => this.close()
    })

    const closeIfFocused = () => {
      if (document.hasFocus()) this.close()
    }

    editorElement.addEventListener('blur', closeIfFocused)
    this.subscriptions.add(new Disposable(() => editorElement.removeEventListener('blur', closeIfFocused)))

    this.subscriptions.add(this.refs.editor.onDidChange(() => this.onDidChange()))
  }

  async destroy (): Promise<void> {
    this.subscriptions.dispose()
    return etch.destroy(this)
  }

  acceptProps ({viewModel, onClose}: CreateBranchComponentProps): Promise<void> {
    if (this.subscriptions) {
      this.subscriptions.dispose()
    }
    this.subscriptions = new CompositeDisposable()

    this.viewModel = viewModel
    this.onClose = onClose

    if (this.element) {
      return etch.update(this)
    } else {
      etch.initialize(this)
      return Promise.resolve()
    }
  }

  close () {
    this.onClose()
  }

  async create (): Promise<void> {
    const name = this.refs.editor.getText()
    const sanitizedName = await this.viewModel.sanitizedBranchName(name)

    console.log('create', sanitizedName)

    this.close()
  }

  focus () {
    this.refs.editor.getElement().focus()
  }

  async onDidChange (): Promise<void> {
    this.enteredName = this.refs.editor.getText()
    this.sanitizedName = await this.viewModel.sanitizedBranchName(this.enteredName)

    etch.update(this)
  }

  renderSanitizedName () {
    if (this.enteredName === this.sanitizedName) return null

    return (
      <div>Will be created as <em>{this.sanitizedName}</em></div>
    )
  }

  render () {
    return (
      <div>
        {this.textEditorComponent}
        {this.renderSanitizedName()}
      </div>
    )
  }

  update (props: CreateBranchComponentProps, children: Array<any>): Promise<void> {
    return this.acceptProps(props)
  }
}
{'fraction_non_alphanumeric': 0.12901259650548558, 'fraction_numerical': 0.0, 'mean_word_length': 3.4836065573770494, 'pattern_counts': {'":': 0, '<': 23, '<?xml version=': 0, '>': 35, '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': '5371025', 'n_tokens_mistral': 1553, 'n_tokens_neox': 1484, 'n_words': 304}