Etch and TextEditor.onDidStopChanging


#1

Hi everyone,

I’m currently creating a package that has a view for displaying documentation. I was using JS to create it (with document.createElement) but the code was really horrible so I recently decided to use etch.

In one of my view, I display a list of all the installed packages and I would like to filter it in real time using a mini atom-text-editor. I was using the onDidStopChanging method before, but I don’t know how to achieve that now that I’m using JSX. Here the code I use.

import EtchComponent from '../etch-component' // Pasted from etch's README.md
import { TextEditor } from 'atom'

export default class Home extends EtchComponent {
  constructor (props, children) {
    super(props, children)
    this.updateSearch = this.updateSearch.bind(this)
  }

  updateSearch () {
    this.search = this.refs.filterEditor.getModel().getText()
    this.update()
  }

  render () {
    // Fake data
    const files = [
      {
         path: 'foo.vapi'
      },
      {
        path: 'bar.vapi'
      }
    ]
    const filter = this.search || ''

    const packages = files.filter(f => {
      return !filter || filter === '' || f.path.includes(filter)
    })

    return <div>
      <h1>Vala documentation</h1>
      <TextEditor placeholderText='Filter packages' mini={true} ref='filterEditor'/> // How to use onDidStopChanging here?
      // Display the list
      <ul className='list-group'>{
          packages.map(p => {
            return <li className='list-item' onclick={this.props.onLoad} item={p}>{path.basename(p.path, '.vapi')}</li>
          })
        }</ul>
    </div>
  }

  destroy () {
    super.destroy()
  }
}

Could you help me, please. Thanks. :slight_smile:


#2

It looks like you want to create a reference to the TextEditor:


#3

Thanks for your answer but it doesn’t seems to work. I added this after calling etch.initialize in my constructor.

this.refs.filterEditor.onDidStopChanging(() => { this.updateSearch() })

But it doesn’t do anything.

When I put a breakpoint here, this.refs.filterEditor is an instance of TextEditor, but when I try to call some methods from the dev tools console, nothing happens.


#4

That’s really strange. In an other view it just works fine. I really don’t understand where I made a mistake…


#5

I didn’t changed anything related to that, but it works now. It is really strange… My problem is solved, thank you for your help. :slight_smile: