Boostnote/browser/main/modals/PreferencesModal/SnippetTab.js

import PropTypes from 'prop-types'
import React from 'react'
import CSSModules from 'browser/lib/CSSModules'
import dataApi from 'browser/main/lib/dataApi'
import styles from './SnippetTab.styl'
import ConfigManager from 'browser/main/lib/ConfigManager'
import SnippetEditor from './SnippetEditor';
import i18n from 'browser/lib/i18n'

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

    this.state = {
      snippets: [
        { id: 'abcsajisdjiasd', name: 'Hello', content: 'asdddddddsaddddddd' },
        { id: 'btbjieejbiebfe', name: 'Hello 2', content: 'asdddddddsaddddddd' }
      ],
      currentSnippet: null
    }
  }

  handleSnippetClick(id) {
    this.setState({'currentSnippet': id})
  }

  renderSnippetList () {
    let { snippets } = this.state
    return (
      snippets.map((snippet) => (
        <div styleName='snippet-item' 
              key={snippet.id} 
              onClick={() => this.handleSnippetClick(snippet.id)}>
          {snippet.name}
        </div>
      ))
    )
  }

  render () {
    const { config } = this.props

    let editorFontSize = parseInt(config.editor.fontSize, 10)
    if (!(editorFontSize > 0 && editorFontSize < 101)) editorFontSize = 14
    let editorIndentSize = parseInt(config.editor.indentSize, 10)
    if (!(editorFontSize > 0 && editorFontSize < 132)) editorIndentSize = 4
    return (
      <div styleName='root'>
        <div styleName='header'>{i18n.__('Snippets')}</div>
        <div styleName='snippet-list'>
          {this.renderSnippetList()}
        </div>
        {this.state.currentSnippet ? 
        <div styleName='snippet-detail'>
          <div styleName='group-section'>
            <div styleName='group-section-label'>{i18n.__('Snippet name')}</div>
            <div styleName='group-section-control'>
              <input styleName='group-section-control-input' type='text' />
            </div>
          </div>
          <div styleName='snippet-editor-section'>
            <SnippetEditor
              storageKey={this.props.storageKey}
              theme={config.editor.theme}
              keyMap={config.editor.keyMap}
              fontFamily={config.editor.fontFamily}
              fontSize={editorFontSize}
              indentType={config.editor.indentType}
              indentSize={editorIndentSize}
              enableRulers={config.editor.enableRulers}
              rulers={config.editor.rulers}
              displayLineNumbers={config.editor.displayLineNumbers}
              scrollPastEnd={config.editor.scrollPastEnd}
              snippetId={this.state.currentSnippet} />
          </div>
        </div>
        : ''}
      </div>
    )
  }
}

SnippetTab.PropTypes = {
}

export default CSSModules(SnippetTab, styles)