How to use atom-select-list - 10 common examples

constructor (initiallyVisibleItemCount = 10) {
    this.keyBindingsForActiveElement = []
    this.selectListView = new SelectListView({
      initiallyVisibleItemCount: initiallyVisibleItemCount, // just for being able to disable visible-on-render in spec
      items: [],
      filter: this.filter,
      emptyMessage: 'No matches found',
      elementForItem: (item, {index, selected, visible}) => {
        if (!visible) {
          return document.createElement("li")
        }

        const li = document.createElement('li')
        li.classList.add('event', 'two-lines')
        li.dataset.eventName = item.name

        const rightBlock = document.createElement('div')
        rightBlock.classList.add('pull-right')

async show() {
    const selectListView = new SelectListView({
      items: await this.getItems(),
      emptyMessage: 'No matches found',
      filterKeyForItem: item => item,
      elementForItem: (item) => {
        const li = document.createElement('li')
        li.textContent = item
        return li
      },
      didConfirmSelection: (item) => {
        this.process(item).catch(e => console.error('[Linter] Unable to process toggle:', e)).then(() => this.dispose())
      },
      didCancelSelection: () => {
        this.dispose()
      },
    })
    const panel = atom.workspace.addModalPanel({ item: selectListView })

it('displays Auto Detect as the selected grammar', async () => {
      editor.setGrammar(atom.grammars.nullGrammar);
      atom.commands.dispatch(editor.getElement(), 'grammar-selector:show');
      await SelectListView.getScheduler().getNextUpdatePromise();

      const grammarView = atom.workspace.getModalPanels()[0].getItem().element;
      expect(grammarView.querySelector('li.active').textContent).toBe(
        'Auto Detect'
      );
    }));

constructor(kernelSpecs: Array) {
    this.kernelSpecs = kernelSpecs;
    this.onConfirmed = null;

    this.selectListView = new SelectListView({
      itemsClassList: ["mark-active"],
      items: [],
      filterKeyForItem: item => item.display_name,
      elementForItem: item => {
        const element = document.createElement("li");
        element.textContent = item.display_name;
        return element;
      },
      didConfirmSelection: item => {
        log("Selected kernel:", item);
        if (this.onConfirmed) this.onConfirmed(item);
        this.cancel();
      },
      didCancelSelection: () => this.cancel(),
      emptyMessage: "No kernels found"
    });

constructor(treeView) {
    super();
    const self = this;

    self.items = [];
    self.itemsCache = null;
    self.treeView = treeView;
    self.root = null;

    self.selectListView = new SelectListView({
      items: [],
      maxResults: 25,
      emptyMessage: 'No files found\u2026',
      filterKeyForItem: (item) => {
        if (atom.config.get('ftp-remote-edit.finder.filterKeyForItem') == "Filename") {
          return item.file;
        } else {
          return item.relativePath;
        }
      },
      didCancelSelection: () => { self.cancel(); },
      didConfirmSelection: (item) => {
        self.open(item);
        self.cancel();
      },
      elementForItem: ({ file, relativePath }) => {

constructor(props: Object) {
    const { items, didConfirmSelection } = props
    const font: string = (atom.config.get('editor.fontFamily'): any)
    this.selectListView = new SelectListView({
      items,
      didConfirmSelection: item => {
        this.hide()
        didConfirmSelection(item)
      },
      didCancelSelection: () => this.hide(),
      elementForItem: i => {
        const li = document.createElement('li')
        li.style.fontFamily = font
        li.textContent = i
        return li
      }
    })
  }

removeWatch() {
    const watches = this.watchViews
      .map((v, k) => ({
        name: v.getCode(),
        value: k
      }))
      .filter(obj => obj.value !== 0 || obj.name !== "");

    const watchesPicker = new SelectListView({
      items: watches,
      elementForItem: watch => {
        const element = document.createElement("li");
        element.textContent = watch.name || "";
        return element;
      },
      didConfirmSelection: watch => {
        this.watchViews[watch.value].destroy();
        this.watchViews.splice(watch.value, 1);
        modalPanel.destroy();
        watchesPicker.destroy();
        if (this.watchViews.length === 0) this.addWatch();
        else if (previouslyFocusedElement) previouslyFocusedElement.focus();
      },
      filterKeyForItem: watch => watch.name,
      didCancelSelection: () => {

constructor() {
    this.selectListView = new SelectListView({
      items: this.getItems(),
      infoMessage: 'Install library to',
      filterKeyForItem: (item) => [item.name, item.path].join(' '),
      elementForItem: this.buildSelectListElement,
      didConfirmSelection: (item) => {
        if (item.path === 'custom') {
          atom.pickFolder(paths => {
            if (paths) {
              paths.forEach(p => {
                if (fs.isDirectorySync(p)) {
                  this.onDidStorageSelect(p);
                }
              });
              this.destroy();
            }
          });

'line-ending-selector:show': (event) => {
      if (!modalPanel) {
        lineEndingListView = new SelectListView({
          items: [{name: 'LF', value: '\n'}, {name: 'CRLF', value: '\r\n'}],
          filterKeyForItem: (lineEnding) => lineEnding.name,
          didConfirmSelection: (lineEnding) => {
            setLineEnding(atom.workspace.getActiveTextEditor(), lineEnding.value)
            modalPanel.hide()
          },
          didCancelSelection: () => {
            modalPanel.hide()
          },
          elementForItem: (lineEnding) => {
            const element = document.createElement('li')
            element.textContent = lineEnding.name
            return element
          }
        })
        modalPanel = atom.workspace.addModalPanel({item: lineEndingListView})

constructor(stashes: Stash[], handleSelection: Stash => void) {
    this.listView = new SelectList({
      items: stashes,
      emptyMessage: 'Your stash is empty',
      filterKeyForItem: stash => stash.content,
      elementForItem: (stash, _options) => {
        const li = document.createElement('li')
        li.textContent = `${stash.index}: ${stash.label}`
        return li
      },
      didCancelSelection: () => {
        this.destroy()
        this.restoreFocus()
      },
      didConfirmSelection: stash => {
        handleSelection(stash)
        this.destroy()
      }