PR comments

static/js/components/AutoComplete.js

@@ -4,7 +4,11 @@ import React, {Component, PropTypes} from 'react';
 import ReactDOM from 'react-dom';
 import _ from 'lodash';
 import keycode from 'keycode';
-import AutoCompleteSettings from './utils/AutoCompleteSettings';
+import { 
+  defaultFilter, 
+  defaultMenuItemRender,
+  noFilter
+} from './utils/AutoCompleteSettings';
 import TextField from 'material-ui/TextField';
 import Menu from './Menu';
 import MenuItem from 'material-ui/MenuItem';
@@ -183,8 +187,8 @@ class AutoComplete extends Component {
     },
     animated: true,
     disableFocusRipple: true,
-    filter: AutoCompleteSettings.defaultFilter,
-    menuItemRenderer: AutoCompleteSettings.defaultMenuItemRender,
+    filter: defaultFilter,
+    menuItemRenderer: defaultMenuItemRender,
     fullWidth: false,
     open: false,
     openOnFocus: false,
@@ -279,7 +283,7 @@ class AutoComplete extends Component {
   getFilter = () => {
     const { filter } = this.props;
     if (this.state.skipFilter) {
-      return AutoCompleteSettings.noFilter;
+      return noFilter;
     } else {
       return filter;
     }

static/js/components/inputs/FieldsOfStudySelectField.js

@@ -2,7 +2,11 @@
 import React from 'react';
 import _ from 'lodash';
 import SelectField from './SelectField';
-import AutoCompleteSettings from '../utils/AutoCompleteSettings';
+import {
+  caseInsensitiveFilter,
+  showLimitedOptions,
+  highlightMatchedOptionText
+} from '../utils/AutoCompleteSettings';
 import FIELDS_OF_STUDY from '../../fields_of_study';
 
 let fieldOfStudyOptions = _.map(FIELDS_OF_STUDY, (name, code) => ({
@@ -27,12 +31,11 @@ export default class FieldsOfStudySelectField extends React.Component {
   };
 
   render() {
-    const { showLimitedOptions, highlightMatchedOptionText } = AutoCompleteSettings;
     return <SelectField
       options={fieldOfStudyOptions}
       autocompleteStyleProps={FieldsOfStudySelectField.autocompleteStyleProps}
       autocompleteBehaviors={[showLimitedOptions, highlightMatchedOptionText]}
-      filter={AutoCompleteSettings.caseInsensitiveFilter}
+      filter={caseInsensitiveFilter}
       {...this.props}
     />;
   }

static/js/components/inputs/SelectField.js

@@ -2,7 +2,7 @@
 import React from 'react';
 import _ from 'lodash';
 import AutoComplete from '../AutoComplete';
-import AutoCompleteSettings from '../utils/AutoCompleteSettings';
+import { defaultFilter, showAllOptions } from '../utils/AutoCompleteSettings';
 import { callFunctionArray } from '../../util/util';
 import type { Option } from '../../flow/generalTypes';
 
@@ -34,7 +34,7 @@ class SelectField extends React.Component {
       menuStyle: {maxHeight: 300},
       fullWidth: true
     },
-    autocompleteBehaviors: [AutoCompleteSettings.showAllOptions]
+    autocompleteBehaviors: [showAllOptions]
   };
 
   createEditKeySet: Function = (): string[] => {
@@ -81,7 +81,7 @@ class SelectField extends React.Component {
       let autocompleteProps = this.getAutocompleteProps();
       let filterFunction = _.has(autocompleteProps, 'filter') ?
         autocompleteProps.filter :
-        AutoCompleteSettings.defaultFilter;
+        defaultFilter;
       let firstMatchingOption = options.find((option) => filterFunction(optionOrString, option.label));
       if (firstMatchingOption) {
         toStore = firstMatchingOption.value;

static/js/components/inputs/inputs_test.js

@@ -11,7 +11,7 @@ import SelectField from './SelectField';
 import CountrySelectField from './CountrySelectField';
 import StateSelectField from './StateSelectField';
 import FieldsOfStudySelectField from './FieldsOfStudySelectField';
-import AutoCompleteSettings from '../utils/AutoCompleteSettings';
+import { showAllOptions, showLimitedOptions } from '../utils/AutoCompleteSettings';
 import FIELDS_OF_STUDY from '../../fields_of_study';
 
 describe('Profile inputs', () => {
@@ -189,14 +189,14 @@ describe('Profile inputs', () => {
     });
 
     it('behaves appropriately with no limit on autocomplete results shown', () => {
-      inputProps.autocompleteBehaviors = [AutoCompleteSettings.showAllOptions];
+      inputProps.autocompleteBehaviors = [showAllOptions];
       selectField = renderLetterSelectField();
       assert.isOk(selectField.props.openOnFocus);
       assert.isOk(selectField.props.showOptionsWhenBlank);
     });
 
     it('behaves appropriately with a limit on autocomplete results shown', () => {
-      inputProps.autocompleteBehaviors = [AutoCompleteSettings.showLimitedOptions];
+      inputProps.autocompleteBehaviors = [showLimitedOptions];
       selectField = renderLetterSelectField();
       assert.isNotOk(selectField.props.openOnFocus);
       assert.isNotOk(selectField.props.showOptionsWhenBlank);

static/js/components/utils/AutoCompleteSettings.js

@@ -2,24 +2,24 @@ import React from 'react';
 import MenuItem from 'material-ui/MenuItem';
 import { DEFAULT_OPTION_LIMIT_COUNT } from '../../constants';
 
-const AutoCompleteSettings = {};
+export const noFilter = () => true;
 
-AutoCompleteSettings.noFilter = () => true;
-
-AutoCompleteSettings.defaultFilter = AutoCompleteSettings.caseInsensitivePrefixFilter = (searchText, key) => {
+export const caseInsensitivePrefixFilter = (searchText, key) => {
   return key.toLowerCase().startsWith(searchText.toLowerCase());
 };
 
-AutoCompleteSettings.caseInsensitiveFilter = (searchText, key) => {
+export const defaultFilter = caseInsensitivePrefixFilter;
+
+export const caseInsensitiveFilter = (searchText, key) => {
   return key.toLowerCase().indexOf(searchText.toLowerCase()) !== -1;
 };
 
-AutoCompleteSettings.caseSensitiveFilter = (searchText, key) => {
+export const caseSensitiveFilter = (searchText, key) => {
   return searchText !== '' && key.indexOf(searchText) !== -1;
 };
 
-AutoCompleteSettings.nonBlankCaseInsPrefixFilter = (searchText, key) => {
-  return searchText !== '' ? AutoCompleteSettings.caseInsensitivePrefixFilter(searchText, key) : false;
+export const nonBlankCaseInsPrefixFilter = (searchText, key) => {
+  return searchText !== '' ? caseInsensitivePrefixFilter(searchText, key) : false;
 };
 
 const levenshteinDistance = (searchText, key) => {
@@ -41,17 +41,17 @@ const levenshteinDistance = (searchText, key) => {
   }
   return current.pop();
 };
-AutoCompleteSettings.levenshteinDistanceFilter = (distanceLessThan) => {
+export const levenshteinDistanceFilter = (distanceLessThan) => {
   if (distanceLessThan === undefined) {
     return levenshteinDistance;
   } else if (typeof distanceLessThan !== 'number') {
-    throw 'Error: AutoCompleteSettings.levenshteinDistanceFilter is a filter generator, not a filter!';
+    throw 'Error: levenshteinDistanceFilter is a filter generator, not a filter!';
   }
 
   return (s, k) => levenshteinDistance(s, k) < distanceLessThan;
 };
 
-AutoCompleteSettings.fuzzyFilter = (searchText, key) => {
+export const fuzzyFilter = (searchText, key) => {
   const compareString = key.toLowerCase();
   searchText = searchText.toLowerCase();
 
@@ -65,7 +65,7 @@ AutoCompleteSettings.fuzzyFilter = (searchText, key) => {
   return searchTextIndex === searchText.length;
 };
 
-AutoCompleteSettings.defaultMenuItemRender = (settings, option) => ( // eslint-disable-line react/display-name
+export const defaultMenuItemRender = (settings, option) => ( // eslint-disable-line react/display-name
   <MenuItem
     key={option.value}
     primaryText={option.label}
@@ -88,7 +88,7 @@ const renderHighlightedOption = (optionLabel, searchText) => {
     return <span>{optionLabel}</span>;
   }
 };
-AutoCompleteSettings.highlightedMenuItemRender = (settings, option) => ( // eslint-disable-line react/display-name
+export const highlightedMenuItemRender = (settings, option) => ( // eslint-disable-line react/display-name
   <MenuItem
     key={option.value}
     value={option.value}
@@ -98,28 +98,26 @@ AutoCompleteSettings.highlightedMenuItemRender = (settings, option) => ( // esli
   </MenuItem>
 );
 
-AutoCompleteSettings.showAllOptions = (props) => {
+export const showAllOptions = (props) => {
   const { filter } = props;
   return {
-    filter: filter || AutoCompleteSettings.caseInsensitivePrefixFilter,
+    filter: filter || caseInsensitivePrefixFilter,
     openOnFocus: true
   };
 };
 
-AutoCompleteSettings.showLimitedOptions = (props) => {
+export const showLimitedOptions = (props) => {
   const { filter, maxSearchResults } = props;
   return {
-    filter: filter || AutoCompleteSettings.nonBlankCaseInsPrefixFilter,
+    filter: filter || nonBlankCaseInsPrefixFilter,
     openOnFocus: false,
     showOptionsWhenBlank: false,
     maxSearchResults: maxSearchResults || DEFAULT_OPTION_LIMIT_COUNT
   };
 };
 
-AutoCompleteSettings.highlightMatchedOptionText = () => {
+export const highlightMatchedOptionText = () => {
   return {
-    menuItemRenderer: AutoCompleteSettings.highlightedMenuItemRender
+    menuItemRenderer: highlightedMenuItemRender
   };
 };
-
-export default AutoCompleteSettings;