From 022a96e53d9768d83fb35a34c4952365a9acff5a Mon Sep 17 00:00:00 2001 From: Gavin Sidebottom Date: Wed, 29 Jun 2016 15:12:28 -0400 Subject: [PATCH] PR comments --- static/js/components/AutoComplete.js | 12 ++++-- .../inputs/FieldsOfStudySelectField.js | 9 +++-- static/js/components/inputs/SelectField.js | 6 +-- static/js/components/inputs/inputs_test.js | 6 +-- .../components/utils/AutoCompleteSettings.js | 40 +++++++++---------- 5 files changed, 39 insertions(+), 34 deletions(-) diff --git a/static/js/components/AutoComplete.js b/static/js/components/AutoComplete.js index d2cfed859d..91a7bde87e 100644 --- a/static/js/components/AutoComplete.js +++ b/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; } diff --git a/static/js/components/inputs/FieldsOfStudySelectField.js b/static/js/components/inputs/FieldsOfStudySelectField.js index 5fdb8676f1..5513b83824 100644 --- a/static/js/components/inputs/FieldsOfStudySelectField.js +++ b/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 ; } diff --git a/static/js/components/inputs/SelectField.js b/static/js/components/inputs/SelectField.js index f4b57777bf..63b5ddeb76 100644 --- a/static/js/components/inputs/SelectField.js +++ b/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; diff --git a/static/js/components/inputs/inputs_test.js b/static/js/components/inputs/inputs_test.js index 13bceab028..93c99459b3 100644 --- a/static/js/components/inputs/inputs_test.js +++ b/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); diff --git a/static/js/components/utils/AutoCompleteSettings.js b/static/js/components/utils/AutoCompleteSettings.js index 350782cee4..ec980b6f05 100644 --- a/static/js/components/utils/AutoCompleteSettings.js +++ b/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 { return {optionLabel}; } }; -AutoCompleteSettings.highlightedMenuItemRender = (settings, option) => ( // eslint-disable-line react/display-name +export const highlightedMenuItemRender = (settings, option) => ( // eslint-disable-line react/display-name ( // esli ); -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; \ No newline at end of file