ssc-refer/es/containers/referContainer.js

React refer component for SSC 3.0

import _extends from 'babel-runtime/helpers/extends';
import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
/**
 * Created by Tiger on 17/2/22.
 */
import { debounce } from 'lodash';
import React, { PropTypes } from 'react';

var DEFAULT_DELAY_MS = 200;

/**
 * HoC that encapsulates common behavior and functionality for doing
 * asynchronous searches, including:
 *
 *  - Debouncing user input
 *  - Query caching (optional)
 *  - Search prompt and empty results behaviors
 */
var referContainer = function referContainer(Refers) {
  var _cache = {};

  return React.createClass({
    propTypes: {
      /**
       * Delay, in milliseconds, before performing search.
       */
      delay: PropTypes.number,
      /**
       * Callback to perform when the search is executed.
       */
      onSearch: PropTypes.func.isRequired,
      /**
       * Options to be passed to the typeahead. Will typically be the query
       * results, but can also be initial default options.
       */
      options: PropTypes.array,
      /**
       * Text displayed in the menu when there is no user input.
       */
      promptText: PropTypes.string,
      /**
       * Text displayed in the menu while the request is pending.
       */
      searchText: PropTypes.string,
      /**
       * Whether or not the component should cache query results.
       */
      useCache: PropTypes.bool
    },

    getDefaultProps: function getDefaultProps() {
      return {
        delay: DEFAULT_DELAY_MS,
        minLength: 2,
        options: [],
        promptText: 'Type to search...',
        searchText: 'Searching...',
        useCache: true
      };
    },
    getInitialState: function getInitialState() {
      return {
        hasSelection: false,
        query: '',
        requestPending: false
      };
    },
    componentWillMount: function componentWillMount() {
      this._handleSearchDebounced = debounce(this._handleSearch, this.props.delay);
    },
    componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
      var options = nextProps.options,
          useCache = nextProps.useCache;
      var _state = this.state,
          query = _state.query,
          requestPending = _state.requestPending;


      if (!requestPending) {
        return;
      }

      if (useCache) {
        _cache[query] = options;
      }

      this.setState({ requestPending: false });
    },
    componentWillUnmount: function componentWillUnmount() {
      _cache = {};
    },
    render: function render() {
      var _this = this;

      var _props = this.props,
          useCache = _props.useCache,
          props = _objectWithoutProperties(_props, ['useCache']);

      var cachedQuery = _cache[this.state.query];

      return React.createElement(Refers, _extends({}, props, {
        emptyLabel: this._getEmptyLabel(),
        isLoading: this.state.requestPending,
        onChange: this._handleChange,
        onInputChange: this._handleInputChange,
        options: useCache && cachedQuery ? cachedQuery : this.props.options,
        ref: function ref(instance) {
          return _this._instance = instance;
        }
      }));
    },


    /**
     * Make the component instance available.
     */
    getInstance: function getInstance() {
      return this._instance.getInstance();
    },
    _getEmptyLabel: function _getEmptyLabel() {
      var _props2 = this.props,
          emptyLabel = _props2.emptyLabel,
          promptText = _props2.promptText,
          searchText = _props2.searchText,
          useCache = _props2.useCache;
      var _state2 = this.state,
          hasSelection = _state2.hasSelection,
          query = _state2.query,
          requestPending = _state2.requestPending;


      if (!query.length || hasSelection) {
        return promptText;
      }

      if (requestPending || useCache && !_cache[query]) {
        return searchText;
      }

      return emptyLabel;
    },
    _handleChange: function _handleChange(selected) {
      this.props.onChange && this.props.onChange(selected);
      this.setState({ hasSelection: !!selected.length });
    },
    _handleInputChange: function _handleInputChange(query) {
      this.props.onInputChange && this.props.onInputChange(query);
      this._handleSearchDebounced(query);
    },
    _handleSearch: function _handleSearch(initialQuery) {
      var _props3 = this.props,
          caseSensitive = _props3.caseSensitive,
          minLength = _props3.minLength,
          onSearch = _props3.onSearch,
          useCache = _props3.useCache;


      var query = initialQuery.trim();
      if (!caseSensitive) {
        query = query.toLowerCase();
      }

      this.setState({ query: query });

      if (!query || minLength && query.length < minLength) {
        return;
      }

      // Use cached results, if available.
      if (useCache && _cache[query]) {
        return;
      }

      // Only perform a search on user input, not selection.
      if (this.state.hasSelection) {
        return;
      }

      // Perform the async search.
      this.setState({ requestPending: true }, function () {
        return onSearch(query);
      });
    }
  });
};

export default referContainer;