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

A UI component library from AppNexus.

import _isEmpty from "lodash/isEmpty";
import _map from "lodash/map";
import _constant from "lodash/constant";
import _xor from "lodash/xor";
import _without from "lodash/without";
import _includes from "lodash/includes";
import _reduce from "lodash/reduce";
import React from 'react';
import createClass from 'create-react-class';
import { Selection, SearchableMultiSelect } from '../../../index';
var Option = SearchableMultiSelect.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 {
      selectedIds: [],
      // aka our full set of selections regardless of currently search
      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);
  },
  handleRemove: function handleRemove(_ref2) {
    var callbackId = _ref2.props.callbackId;
    this.setState({
      selectedIds: _without(this.state.selectedIds, callbackId)
    });
  },
  handleSelect: function handleSelect(index, _ref3) {
    var callbackId = _ref3.props.callbackId;
    this.setState({
      selectedIds: _xor(this.state.selectedIds, [callbackId])
    });
  },
  render: function render() {
    var _this2 = this;

    var _this$state = this.state,
        isLoading = _this$state.isLoading,
        visibleIds = _this$state.visibleIds,
        selectedIds = _this$state.selectedIds; // Calculate selected indices based on selected ids

    var selectedIndices = _reduce(visibleIds, function (acc, id, index) {
      return _includes(selectedIds, id) ? acc.concat(index) : acc;
    }, []);

    return /*#__PURE__*/React.createElement("section", null, /*#__PURE__*/React.createElement(SearchableMultiSelect, {
      hasSelections: false,
      isLoading: isLoading,
      onSelect: this.handleSelect,
      onSearch: this.handleSearch,
      selectedIndices: selectedIndices,
      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);
    })), !_isEmpty(selectedIds) ? /*#__PURE__*/React.createElement(Selection, {
      isBold: true,
      hasBackground: true,
      Label: "Selected",
      kind: "container",
      isRemovable: false
    }, _map(selectedIds, function (id) {
      return /*#__PURE__*/React.createElement(Selection, {
        key: id,
        Label: allData[id].name,
        callbackId: id,
        onRemove: _this2.handleRemove
      });
    })) : null);
  }
});