lucid-ui/lib/components/SearchableSingleSelect/examples/03.asynchronous.js

A UI component library from AppNexus.

import _map from "lodash/map";
import _constant from "lodash/constant";
import _indexOf from "lodash/indexOf";
import _get from "lodash/get";
import _includes from "lodash/includes";
import _reduce from "lodash/reduce";
import React from 'react';
import createClass from 'create-react-class';
import { SearchableSingleSelect } from '../../../index';
var Option = SearchableSingleSelect.Option;
var allData = {
  100: {
    name: 'Rita Daniel'
  },
  101: {
    name: 'Meghan Mcgowan'
  },
  102: {
    name: 'Latisha Kent'
  },
  103: {
    name: 'Jeannine Horton'
  },
  104: {
    name: 'Noreen Joyner'
  },
  105: {
    name: 'Angelique Head'
  },
  106: {
    name: 'Kim Salinas'
  },
  107: {
    name: 'Alexis Small'
  },
  108: {
    name: 'Fernandez Singleton'
  },
  109: {
    name: 'Jacqueline Alvarado'
  },
  110: {
    name: 'Cornelia Roman'
  },
  111: {
    name: 'John Gonzales'
  },
  112: {
    name: 'Mcleod Hodge'
  },
  113: {
    name: 'Fry Barrera'
  },
  114: {
    name: 'Jannie Compton'
  },
  115: {
    name: 'June Odom'
  },
  116: {
    name: 'Rose Foster'
  },
  117: {
    name: 'Kathryn Prince'
  },
  118: {
    name: 'Hebert Bowman'
  },
  119: {
    name: 'Shawn Burgess'
  }
};
export default createClass({
  getInitialState: function getInitialState() {
    return {
      selectedId: null,
      // current selection
      visibleIds: [],
      // aka current search results
      isLoading: false
    };
  },
  componentDidMount: function componentDidMount() {
    this.handleSearch('');
  },
  handleSearch: function handleSearch(searchText) {
    var _this = this;

    this.setState({
      isLoading: true
    }); // Fake an API call

    setTimeout(function () {
      var visibleIds = _reduce(allData, function (acc, _ref, id) {
        var name = _ref.name;
        return _includes(name.toLowerCase(), searchText.toLowerCase()) ? acc.concat(id) : acc;
      }, []);

      _this.setState({
        visibleIds: visibleIds,
        isLoading: false
      });
    }, 750);
  },
  handleSelect: function handleSelect(index, event) {
    this.setState({
      selectedId: _get(event, 'props.callbackId', null)
    });
  },
  render: function render() {
    var _this$state = this.state,
        isLoading = _this$state.isLoading,
        visibleIds = _this$state.visibleIds,
        selectedId = _this$state.selectedId;
    var selectedIndex = _indexOf(visibleIds, selectedId) === -1 ? null : _indexOf(visibleIds, selectedId);
    return /*#__PURE__*/React.createElement("section", null, /*#__PURE__*/React.createElement(SearchableSingleSelect, {
      hasSelections: false,
      isLoading: isLoading,
      onSelect: this.handleSelect,
      onSearch: this.handleSearch,
      selectedIndex: selectedIndex,
      optionFilter: _constant(true),
      SearchField: {
        placeholder: 'Type here to simulate an API backed search'
      }
    }, _map(visibleIds, function (id) {
      return /*#__PURE__*/React.createElement(Option, {
        key: id,
        callbackId: id
      }, allData[id].name);
    })));
  }
});