Move state modifiers to separate file

Author: ericgio

src/core/Typeahead.tsx

@@ -9,6 +9,13 @@ import React, {
 } from 'react';
 
 import TypeaheadManager from './TypeaheadManager';
+import {
+  clearTypeahead,
+  clickOrFocusInput,
+  getInitialState,
+  hideMenu,
+  toggleMenu,
+} from './TypeaheadState';
 
 import {
   caseSensitiveType,
@@ -208,78 +215,6 @@ const defaultProps = {
 
 type Props = TypeaheadProps;
 
-export function getInitialState(props: Props): TypeaheadState {
-  const {
-    defaultInputValue,
-    defaultOpen,
-    defaultSelected,
-    maxResults,
-    multiple,
-  } = props;
-
-  let selected = props.selected
-    ? props.selected.slice()
-    : defaultSelected.slice();
-
-  let text = defaultInputValue;
-
-  if (!multiple && selected.length) {
-    // Set the text if an initial selection is passed in.
-    text = getOptionLabel(selected[0], props.labelKey);
-
-    if (selected.length > 1) {
-      // Limit to 1 selection in single-select mode.
-      selected = selected.slice(0, 1);
-    }
-  }
-
-  return {
-    activeIndex: -1,
-    activeItem: undefined,
-    initialItem: undefined,
-    isFocused: false,
-    selected,
-    showMenu: defaultOpen,
-    shownResults: maxResults,
-    text,
-  };
-}
-
-export function clearTypeahead(state: TypeaheadState, props: Props) {
-  return {
-    ...getInitialState(props),
-    isFocused: state.isFocused,
-    selected: [],
-    text: '',
-  };
-}
-
-export function clickOrFocusInput(state: TypeaheadState) {
-  return {
-    ...state,
-    isFocused: true,
-    showMenu: true,
-  };
-}
-
-export function hideMenu(state: TypeaheadState, props: Props) {
-  const { activeIndex, activeItem, initialItem, shownResults } =
-    getInitialState(props);
-
-  return {
-    ...state,
-    activeIndex,
-    activeItem,
-    initialItem,
-    showMenu: false,
-    shownResults,
-  };
-}
-
-export function toggleMenu(state: TypeaheadState, props: Props) {
-  return state.showMenu ? hideMenu(state, props) : { ...state, showMenu: true };
-}
-
 /**
  * Manually trigger the input's change event.
  * https://stackoverflow.com/questions/23892547/what-is-the-best-way-to-trigger-onchange-event-in-react-js/46012210#46012210

…onents/Typeahead/TypeaheadState.test.tsx src/core/TypeaheadState.test.tsxsrc/components/Typeahead/TypeaheadState.test.tsx renamed to src/core/TypeaheadState.test.tsx src/components/Typeahead/TypeaheadState.test.tsx renamed to src/core/TypeaheadState.test.tsx

@@ -4,9 +4,9 @@ import {
   getInitialState,
   hideMenu,
   toggleMenu,
-} from '../../core/Typeahead';
+} from './TypeaheadState';
 
-import { defaultProps, defaultState } from '../../tests/data';
+import { defaultProps, defaultState } from '../tests/data';
 
 describe('State modifiers', () => {
   it('calls the clearTypeahead modifier', () => {

src/core/TypeaheadState.ts

@@ -0,0 +1,76 @@
+import { TypeaheadProps, TypeaheadState } from '../types';
+import { getOptionLabel } from '../utils';
+
+type Props = TypeaheadProps;
+
+export function getInitialState(props: Props): TypeaheadState {
+  const {
+    defaultInputValue,
+    defaultOpen,
+    defaultSelected,
+    maxResults,
+    multiple,
+  } = props;
+
+  let selected = props.selected
+    ? props.selected.slice()
+    : defaultSelected.slice();
+
+  let text = defaultInputValue;
+
+  if (!multiple && selected.length) {
+    // Set the text if an initial selection is passed in.
+    text = getOptionLabel(selected[0], props.labelKey);
+
+    if (selected.length > 1) {
+      // Limit to 1 selection in single-select mode.
+      selected = selected.slice(0, 1);
+    }
+  }
+
+  return {
+    activeIndex: -1,
+    activeItem: undefined,
+    initialItem: undefined,
+    isFocused: false,
+    selected,
+    showMenu: defaultOpen,
+    shownResults: maxResults,
+    text,
+  };
+}
+
+export function clearTypeahead(state: TypeaheadState, props: Props) {
+  return {
+    ...getInitialState(props),
+    isFocused: state.isFocused,
+    selected: [],
+    text: '',
+  };
+}
+
+export function clickOrFocusInput(state: TypeaheadState) {
+  return {
+    ...state,
+    isFocused: true,
+    showMenu: true,
+  };
+}
+
+export function hideMenu(state: TypeaheadState, props: Props) {
+  const { activeIndex, activeItem, initialItem, shownResults } =
+    getInitialState(props);
+
+  return {
+    ...state,
+    activeIndex,
+    activeItem,
+    initialItem,
+    showMenu: false,
+    shownResults,
+  };
+}
+
+export function toggleMenu(state: TypeaheadState, props: Props) {
+  return state.showMenu ? hideMenu(state, props) : { ...state, showMenu: true };
+}