{"size": 2149, "ext": "js", "max_stars_repo_path": "stories/Combobox/ExandableListboxDemo.js", "max_stars_repo_name": "propertybase/react-lds", "max_stars_repo_stars_event_min_datetime": "2016-09-05T13:21:40.000Z", "max_stars_repo_stars_event_max_datetime": "2019-08-31T15:24:20.000Z", "max_issues_repo_path": "stories/Combobox/ExandableListboxDemo.js", "max_issues_repo_name": "propertybase/react-lds", "max_issues_repo_issues_event_min_datetime": "2016-09-05T14:10:25.000Z", "max_issues_repo_issues_event_max_datetime": "2020-03-23T13:25:32.000Z", "max_forks_repo_path": "stories/Combobox/ExandableListboxDemo.js", "max_forks_repo_name": "react-lds/react-lds", "max_forks_repo_forks_event_min_datetime": "2017-05-18T15:55:37.000Z", "max_forks_repo_forks_event_max_datetime": "2020-02-26T13:30:52.000Z"}
{"max_stars_count": 23, "max_issues_count": 112, "max_forks_count": 12, "avg_line_length": 23.8777777778, "max_line_length": 110, "alphanum_fraction": 0.5602605863}
import React, { Component } from 'react';
import { without } from 'lodash-es';
import { BASE_ITEMS } from './constants';
import { AutoCompleteCombobox, ComboboxGroupedListbox } from '../../src';

export class ExpandableListboxDemo extends Component {
  state = {
    isExpanded: false,
    isOpen: false,
    items: BASE_ITEMS,
    selection: BASE_ITEMS.map(({ id }) => id),
    search: '',
  }

  onSelect = (id, { isReplace, isRemove }) => {
    if (isReplace) {
      this.setState({
        selection: [].concat(id),
      });
    } else if (isRemove) {
      this.setState(({ selection: prevSelection }) => ({
        selection: without(prevSelection, id),
      }));
    } else {
      this.setState(({ selection: prevSelection }) => ({
        selection: [...prevSelection, id],
      }));
    }
  }

  onExpand = () => {
    this.setState({ isExpanded: true });
  }

  onToggle = (nextOpen) => {
    this.setState({ isOpen: nextOpen });
  }

  onSearch = (val) => {
    this.setState({ search: val });
  }

  renderListbox = (listboxProps) => {
    const { isExpanded } = this.state;

    return (
      <ComboboxGroupedListbox
        {...listboxProps}
        isExpanded={isExpanded}
        onExpand={this.onExpand}
      />
    );
  }

  render() {
    const {
      isOpen,
      items,
      search,
      selection,
    } = this.state;

    const filteredItems = search.length < 2
      ? items
      : items.filter(({ isHeader, label }) => isHeader || label.toLowerCase().includes(search.toLowerCase()));

    const selectedItems = selection.map((id) => {
      const existingItem = items.find(item => item.id === id);
      return existingItem || { label: id, id };
    });

    return (
      <div style={{ maxWidth: '45rem' }}>
        <AutoCompleteCombobox
          isOpen={isOpen}
          items={filteredItems}
          isMultiSelect
          label="Expandable Listbox"
          onSearch={this.onSearch}
          onSelect={this.onSelect}
          onToggle={this.onToggle}
          renderListbox={this.renderListbox}
          search={search}
          selectedItems={selectedItems}
        />
      </div>
    );
  }
}
