// Import default styles.
// This only needs to be done once; probably during bootstrapping process.
import "react-select/dist/react-select.css";

import React from "react";
import ReactDOM from "react-dom";
import createFilterOptions from "react-select-fast-filter-options";
import Select from "react-select";

// Dummy array of test values.
const options = [
  {label: "Option One", value: 1},
  {label: "Option Two", value: 2},
];

// For more configuration options, see:
// https://github.com/bvaughn/react-select-fast-filter-options#configuration-options
const filterOptions = createFilterOptions({
  options
});

ReactDOM.render(
  <Select filterOptions={filterOptions} options={options} />,
  document.getElementById("root")
);

// Import default styles.
// This only needs to be done once; probably during bootstrapping process.
import "react-select/dist/react-select.css";
import "react-virtualized/styles.css";
import "react-virtualized-select/styles.css";

import React from "react";
import ReactDOM from "react-dom";
import createFilterOptions from "react-select-fast-filter-options";
import Select from "react-virtualized-select";

// Dummy array of test values.
const options = [
  {label: "Option One", value: 1},
  {label: "Option Two", value: 2},
];

// For more configuration options, see:
// https://github.com/bvaughn/react-select-fast-filter-options#configuration-options
const filterOptions = createFilterOptions({
  options
});

ReactDOM.render(
  <Select filterOptions={filterOptions} options={options} />,
  document.getElementById("root")
);

// selectors file
import { createSelector } from "reselect";
import createFilterOptions from "react-select-fast-filter-options";

// Select the huge array of options stored in redux state
export const optionsSelector = state => state.options;

// Create a search index optimized to quickly filter options.
// The search index will need to be recreated if your options array changes.
// This index is powered by js-search: https://github.com/bvaughn/js-search
// Reselect will only re-run this if options has changed
export const getIndexedOptions = createSelector(optionsSelector, options =>
  createFilterOptions({ options })
);

// Dummy array of test values.
const options = Array.from(new Array(100), (_, index) => ({
  label: `Item ${index}`,
  value: index
}));

const INITIAL_STATE = {
  options
};

function searchApp(state = INITIAL_STATE, action) {
  switch (action.type) {
    default:
      return state;
  }
}

export default searchApp;

// Import default styles.
// This only needs to be done once; probably during bootstrapping process.
import "react-select/dist/react-select.css";

import React from "react";
import ReactDOM from "react-dom";
import { connect, Provider } from "react-redux";
import Select from "react-select";
import { createStore } from "redux";
import { createSelector } from "reselect";
import searchApp from "./reducers";
import { getIndexedOptions, optionsSelector } from "./selectors";

const store = createStore(searchApp);
const mapStateToProps = state => ({
  filterOptions: getIndexedOptions(state),
  options: optionsSelector(state)
});

const FilterableSelect = connect(mapStateToProps)(props => (
  <Select {...props} />
));

ReactDOM.render(
  <Provider store={store}>
    <FilterableSelect />
  </Provider>,
  document.getElementById("root")
);

import {
  CaseSensitiveSanitizer,
  ExactWordIndexStrategy,
  Search,
  SimpleTokenizer,
  StemmingTokenizer,
  TfIdfSearchIndex
} from 'js-search'
import { stemmer } from 'porter-stemmer'
import createFilterOptions from 'react-select-fast-filter-options'

// Default index strategy is built for all substrings.
// In other word "c", "ca", "cat", "a", "at", and "t" all match "cat".
// Override to only allow exact-word matches like so:
const indexStrategy = new ExactWordIndexStrategy()

// Default sanitizer is case-insensitive
// Searches for "foo" will match "Foo".
// Override to be case-sensitive like so:
const sanitizer = new CaseSensitiveSanitizer()

// By default, search results are returned in the order they wre indexed.
// This means that your filtered options will match their unfiltered order.
// More advanced results orderings are possbile.
// For example TF-IDF ranking is an option.
// Learn more at https://github.com/bvaughn/js-search#tf-idf-ranking
const searchIndex = new TfIdfSearchIndex()

// Default tokenizer just splits search text on spaces.
// In other words "the boy" becomes 2 search tokens, "the" and "boy".
// The StemmingTokenizer can be used for fuzzier matching.
// For example, "searching" will match  "search", "searching", and "searched".
// Learn more at https://github.com/bvaughn/js-search#stemming
const tokenizer = new StemmingTokenizer(stemmer, new SimpleTokenizer())

const filterOptions = createFilterOptions({
  indexStrategy,
  options,
  sanitizer,
  searchIndex,
  tokenizer
})