Prefer const for ExtendedPicker, FloatingPicker, and SelectedItemsList

common/changes/@uifabric/experiments/amyngu-preferConst_2018-04-10-23-09.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/experiments",
+      "comment": "prefer const, instead of let, for extendedpicker, floatingpicker, and selecteditemlists",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@uifabric/experiments",
+  "email": "amyngu@microsoft.com"
+}

packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.tests.tsx

@@ -84,15 +84,15 @@ describe('Pickers', () => {
           onRenderFloatingPicker={ basicRenderFloatingPicker }
         />
       );
-      let tree = component.toJSON();
+      const tree = component.toJSON();
       expect(tree).toMatchSnapshot();
     });
 
     it('force resolves to the first suggestion', () => {
-      let root = document.createElement('div');
+      const root = document.createElement('div');
       document.body.appendChild(root);
 
-      let picker: TypedBaseExtendedPicker = ReactDOM.render(
+      const picker: TypedBaseExtendedPicker = ReactDOM.render(
         <BaseExtendedPickerWithType
           floatingPickerProps={ floatingPickerProps }
           selectedItemsListProps={ selectedItemsListProps }
@@ -118,10 +118,10 @@ describe('Pickers', () => {
     });
 
     it('Can hide and show picker', () => {
-      let root = document.createElement('div');
+      const root = document.createElement('div');
       document.body.appendChild(root);
 
-      let picker: TypedBaseExtendedPicker = ReactDOM.render(
+      const picker: TypedBaseExtendedPicker = ReactDOM.render(
         <BaseExtendedPickerWithType
           floatingPickerProps={ floatingPickerProps }
           selectedItemsListProps={ selectedItemsListProps }
@@ -145,10 +145,10 @@ describe('Pickers', () => {
     });
 
     it('Completes the suggestion', () => {
-      let root = document.createElement('div');
+      const root = document.createElement('div');
       document.body.appendChild(root);
 
-      let picker: TypedBaseExtendedPicker = ReactDOM.render(
+      const picker: TypedBaseExtendedPicker = ReactDOM.render(
         <BaseExtendedPickerWithType
           floatingPickerProps={ floatingPickerProps }
           selectedItemsListProps={ selectedItemsListProps }
@@ -170,4 +170,4 @@ describe('Pickers', () => {
       ReactDOM.unmountComponentAtNode(root);
     });
   });
-});
+});

packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.tsx

@@ -46,7 +46,7 @@ export class BaseExtendedPicker<T, P extends IBaseExtendedPickerProps<T>> extend
   constructor(basePickerProps: P) {
     super(basePickerProps);
 
-    let items: T[] = basePickerProps.selectedItems || basePickerProps.defaultSelectedItems || [];
+    const items: T[] = basePickerProps.selectedItems || basePickerProps.defaultSelectedItems || [];
 
     this.selection = new Selection({ onSelectionChanged: () => this.onSelectionChange() });
     this.selection.setItems(items);
@@ -86,8 +86,8 @@ export class BaseExtendedPicker<T, P extends IBaseExtendedPickerProps<T>> extend
   }
 
   public render(): JSX.Element {
-    let { suggestedDisplayValue } = this.state;
-    let {
+    const { suggestedDisplayValue } = this.state;
+    const {
       className,
       inputProps,
       disabled
@@ -148,7 +148,7 @@ export class BaseExtendedPicker<T, P extends IBaseExtendedPickerProps<T>> extend
   }
 
   protected renderSuggestions(): JSX.Element {
-    let onRenderFloatingPicker = this.props.onRenderFloatingPicker;
+    const onRenderFloatingPicker = this.props.onRenderFloatingPicker;
     return (onRenderFloatingPicker({
       componentRef: this.floatingPicker,
       onChange: this._onSuggestionSelected,
@@ -159,18 +159,18 @@ export class BaseExtendedPicker<T, P extends IBaseExtendedPickerProps<T>> extend
   }
 
   protected renderSelectedItemsList(): JSX.Element {
-    let onRenderSelectedItems = this.props.onRenderSelectedItems;
+    const onRenderSelectedItems = this.props.onRenderSelectedItems;
     return (onRenderSelectedItems({
       componentRef: this.selectedItemsList,
       ...this.selectedItemsListProps
     }));
   }
 
   protected resetFocus(index?: number): void {
-    let { items } = this.state;
+    const { items } = this.state;
 
     if (items.length && index! >= 0 && this.root.value) {
-      let newEl: HTMLElement = this.root.value
+      const newEl: HTMLElement = this.root.value
         .querySelectorAll('[data-selection-index]')[Math.min(index!, items.length - 1)] as HTMLElement;
       if (newEl && this.focusZone.value) {
         this.focusZone.value.focusElement(newEl);
@@ -228,7 +228,7 @@ export class BaseExtendedPicker<T, P extends IBaseExtendedPickerProps<T>> extend
 
   protected onPaste = (ev: React.ClipboardEvent<Autofill | HTMLInputElement>): void => {
     if (this.props.onPaste) {
-      let inputText = ev.clipboardData.getData('Text');
+      const inputText = ev.clipboardData.getData('Text');
       ev.preventDefault();
       this.props.onPaste(inputText);
     }

packages/experiments/src/components/ExtendedPicker/examples/ExtendedPeoplePicker.Basic.Example.tsx

@@ -33,9 +33,9 @@ export class ExtendedPeoplePickerTypesExample extends BaseComponent<{}, IPeopleP
 
   constructor(props: {}) {
     super(props);
-    let peopleList: IPersonaWithMenu[] = [];
+    const peopleList: IPersonaWithMenu[] = [];
     people.forEach((persona: IPersonaProps) => {
-      let target: IPersonaWithMenu = {};
+      const target: IPersonaWithMenu = {};
 
       assign(target, persona);
       peopleList.push(target);
@@ -190,17 +190,18 @@ export class ExtendedPeoplePickerTypesExample extends BaseComponent<{}, IPeopleP
   }
 
   private _onRemoveSuggestion = (item: IPersonaProps): void => {
-    let { peopleList, mostRecentlyUsed: mruState } = this.state;
-    let indexPeopleList: number = peopleList.indexOf(item);
-    let indexMostRecentlyUsed: number = mruState.indexOf(item);
+    const { peopleList, mostRecentlyUsed: mruState } = this.state;
+    const indexPeopleList: number = peopleList.indexOf(item);
+    const indexMostRecentlyUsed: number = mruState.indexOf(item);
 
     if (indexPeopleList >= 0) {
-      let newPeople: IPersonaProps[] = peopleList.slice(0, indexPeopleList).concat(peopleList.slice(indexPeopleList + 1));
+      const newPeople: IPersonaProps[] = peopleList.slice(0, indexPeopleList).concat(peopleList.slice(indexPeopleList + 1));
       this.setState({ peopleList: newPeople });
     }
 
     if (indexMostRecentlyUsed >= 0) {
-      let newSuggestedPeople: IPersonaProps[] = mruState.slice(0, indexMostRecentlyUsed).concat(mruState.slice(indexMostRecentlyUsed + 1));
+      const newSuggestedPeople: IPersonaProps[]
+        = mruState.slice(0, indexMostRecentlyUsed).concat(mruState.slice(indexMostRecentlyUsed + 1));
       this.setState({ mostRecentlyUsed: newSuggestedPeople });
     }
   }
@@ -303,4 +304,4 @@ export class ExtendedPeoplePickerTypesExample extends BaseComponent<{}, IPeopleP
         return [];
     }
   }
-}
+}

packages/experiments/src/components/FloatingPicker/BaseFloatingPicker.test.tsx

@@ -60,17 +60,17 @@ describe('Pickers', () => {
           suggestionsStore={ new SuggestionsStore<ISimple>() }
         />
       );
-      let tree = component.toJSON();
+      const tree = component.toJSON();
       expect(tree).toMatchSnapshot();
     });
 
     it('shows zero query options on empty input', () => {
-      let root = document.createElement('div');
-      let input = document.createElement('input');
+      const root = document.createElement('div');
+      const input = document.createElement('input');
       document.body.appendChild(input);
       document.body.appendChild(root);
 
-      let picker: TypedBaseFloatingPicker = ReactDOM.render(
+      const picker: TypedBaseFloatingPicker = ReactDOM.render(
         <BaseFloatingPickerWithType
           onResolveSuggestions={ onResolveSuggestions }
           onRenderSuggestionsItem={ basicSuggestionRenderer }
@@ -92,12 +92,12 @@ describe('Pickers', () => {
     });
 
     it('updates suggestions on query string changed', () => {
-      let root = document.createElement('div');
-      let input = document.createElement('input');
+      const root = document.createElement('div');
+      const input = document.createElement('input');
       document.body.appendChild(input);
       document.body.appendChild(root);
 
-      let picker: TypedBaseFloatingPicker = ReactDOM.render(
+      const picker: TypedBaseFloatingPicker = ReactDOM.render(
         <BaseFloatingPickerWithType
           onResolveSuggestions={ onResolveSuggestions }
           onRenderSuggestionsItem={ basicSuggestionRenderer }
@@ -114,4 +114,4 @@ describe('Pickers', () => {
       ReactDOM.unmountComponentAtNode(root);
     });
   });
-});
+});

packages/experiments/src/components/FloatingPicker/BaseFloatingPicker.tsx

@@ -21,7 +21,6 @@ export interface IBaseFloatingPickerState {
   queryString: string;
   suggestedDisplayValue?: string;
   moreSuggestionsAvailable?: boolean;
-  isSearching?: boolean;
   isMostRecentlyUsedVisible?: boolean;
   suggestionsVisible?: boolean;
   suggestionsLoading?: boolean;
@@ -51,7 +50,6 @@ export class BaseFloatingPicker<T, P extends IBaseFloatingPickerProps<T>> extend
       suggestedDisplayValue: '',
       isMostRecentlyUsedVisible: false,
       moreSuggestionsAvailable: false,
-      isSearching: false,
       didBind: false,
     };
   }
@@ -157,7 +155,7 @@ export class BaseFloatingPicker<T, P extends IBaseFloatingPickerProps<T>> extend
   }
 
   public render(): JSX.Element {
-    let { className } = this.props;
+    const { className } = this.props;
     return (
       <div
         ref={ this.root }
@@ -169,7 +167,7 @@ export class BaseFloatingPicker<T, P extends IBaseFloatingPickerProps<T>> extend
   }
 
   protected renderSuggestions(): JSX.Element | null {
-    let TypedSuggestionsControl = this.SuggestionsControlOfProperType;
+    const TypedSuggestionsControl = this.SuggestionsControlOfProperType;
     return this.state.suggestionsVisible ? (
       <Callout
         className={ styles.callout }
@@ -193,7 +191,6 @@ export class BaseFloatingPicker<T, P extends IBaseFloatingPickerProps<T>> extend
           onSuggestionRemove={ this.onSuggestionRemove }
           suggestions={ this.suggestionStore.getSuggestions() }
           ref={ this._resolveRef('suggestionsControl') }
-          isSearching={ this.state.isSearching }
           completeSuggestion={ this.completeSuggestion }
           shouldLoopSelection={ false }
           { ...this.props.pickerSuggestionsProps as IBaseFloatingPickerSuggestionProps }
@@ -204,8 +201,8 @@ export class BaseFloatingPicker<T, P extends IBaseFloatingPickerProps<T>> extend
 
   protected onSuggestionSelect(): void {
     if (this.suggestionsControl && this.suggestionsControl.currentSuggestion) {
-      let currentValue: string = this.state.queryString;
-      let itemValue: string = this._getTextFromItem(
+      const currentValue: string = this.state.queryString;
+      const itemValue: string = this._getTextFromItem(
         this.suggestionsControl.currentSuggestion.item,
         currentValue
       );
@@ -227,8 +224,8 @@ export class BaseFloatingPicker<T, P extends IBaseFloatingPickerProps<T>> extend
 
   protected updateSuggestionWithZeroState(): void {
     if (this.props.onZeroQuerySuggestion) {
-      let onEmptyInputFocus = this.props.onZeroQuerySuggestion as (selectedItems?: T[]) => T[] | PromiseLike<T[]>;
-      let suggestions: T[] | PromiseLike<T[]> = onEmptyInputFocus(this.props.selectedItems);
+      const onEmptyInputFocus = this.props.onZeroQuerySuggestion as (selectedItems?: T[]) => T[] | PromiseLike<T[]>;
+      const suggestions: T[] | PromiseLike<T[]> = onEmptyInputFocus(this.props.selectedItems);
       this.updateSuggestionsList(suggestions);
     } else {
       this.hidePicker();
@@ -239,8 +236,8 @@ export class BaseFloatingPicker<T, P extends IBaseFloatingPickerProps<T>> extend
     suggestions: T[] | PromiseLike<T[]>,
     updatedValue?: string
   ): void {
-    let suggestionsArray: T[] = suggestions as T[];
-    let suggestionsPromiseLike: PromiseLike<T[]> = suggestions as PromiseLike<
+    const suggestionsArray: T[] = suggestions as T[];
+    const suggestionsPromiseLike: PromiseLike<T[]> = suggestions as PromiseLike<
       T[]
       >;
 
@@ -260,7 +257,7 @@ export class BaseFloatingPicker<T, P extends IBaseFloatingPickerProps<T>> extend
       this._updateSuggestionsVisible(updatedValue !== undefined && updatedValue !== '');
 
       // Ensure that the promise will only use the callback if it was the most recent one.
-      let promise: PromiseLike<
+      const promise: PromiseLike<
         T[]
         > = (this.currentPromise = suggestionsPromiseLike);
       promise.then((newSuggestions: T[]) => {
@@ -334,7 +331,7 @@ export class BaseFloatingPicker<T, P extends IBaseFloatingPickerProps<T>> extend
         !(this.props.inputElement as HTMLElement).contains(ev.target as HTMLElement))) {
       return;
     }
-    let keyCode = ev.which;
+    const keyCode = ev.which;
     switch (keyCode) {
       case KeyCodes.escape:
         this.hidePicker();
@@ -386,7 +383,7 @@ export class BaseFloatingPicker<T, P extends IBaseFloatingPickerProps<T>> extend
   }
 
   private _onResolveSuggestions(updatedValue: string): void {
-    let suggestions: T[] | PromiseLike<T[]> | null = this.props.onResolveSuggestions(updatedValue, this.props.selectedItems);
+    const suggestions: T[] | PromiseLike<T[]> | null = this.props.onResolveSuggestions(updatedValue, this.props.selectedItems);
 
     if (suggestions !== null) {
       this.updateSuggestionsList(suggestions, updatedValue);
@@ -398,14 +395,14 @@ export class BaseFloatingPicker<T, P extends IBaseFloatingPickerProps<T>> extend
       this.props.onValidateInput &&
       this.props.createGenericItem
     ) {
-      let itemToConvert: ISuggestionModel<T> = (this.props.createGenericItem as ((
+      const itemToConvert: ISuggestionModel<T> = (this.props.createGenericItem as ((
         input: string,
         isValid: boolean
       ) => ISuggestionModel<T>))(
         this.state.queryString,
         (this.props.onValidateInput as ((input: string) => boolean))(this.state.queryString)
         );
-      let convertedItems = this.suggestionStore.convertSuggestionsToSuggestionItems([itemToConvert]);
+      const convertedItems = this.suggestionStore.convertSuggestionsToSuggestionItems([itemToConvert]);
       this.onChange(convertedItems[0].item);
     }
   }
@@ -439,4 +436,4 @@ export class BaseFloatingPicker<T, P extends IBaseFloatingPickerProps<T>> extend
       this.setState({ didBind: false });
     }
   }
-}
+}

packages/experiments/src/components/FloatingPicker/PeoplePicker/FloatingPeoplePicker.tsx

@@ -23,7 +23,7 @@ export class FloatingPeoplePicker extends BaseFloatingPeoplePicker {
 
 export function createGenericItem(name: string, isValid: boolean): ISuggestionModel<IPersonaProps> {
   // tslint:disable-next-line:no-any
-  let personaToConvert: any = {
+  const personaToConvert: any = {
     key: name,
     primaryText: name,
     imageInitials: '!',

packages/experiments/src/components/FloatingPicker/PeoplePicker/PeoplePickerItems/SelectedItemDefault.tsx

@@ -10,7 +10,7 @@ import * as stylesImport from './PickerItemsDefault.scss';
 const styles: any = stylesImport;
 
 export const SelectedItemDefault: (props: IPeoplePickerItemProps) => JSX.Element = (peoplePickerItemProps: IPeoplePickerItemProps) => {
-  let {
+  const {
     item,
     onRemoveItem,
     index,
@@ -59,4 +59,4 @@ export const SelectedItemDefault: (props: IPeoplePickerItemProps) => JSX.Element
       />
     </div >
   );
-};
+};