diff --git a/common/changes/@uifabric/experiments/amyngu-preferConst_2018-04-10-23-09.json b/common/changes/@uifabric/experiments/amyngu-preferConst_2018-04-10-23-09.json new file mode 100644 index 00000000000000..d67c6f9a773511 --- /dev/null +++ b/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" +} \ No newline at end of file diff --git a/packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.tests.tsx b/packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.tests.tsx index 8e9dad90d677e5..9e1679a693996c 100644 --- a/packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.tests.tsx +++ b/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( { }); 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( { }); 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( { ReactDOM.unmountComponentAtNode(root); }); }); -}); +}); \ No newline at end of file diff --git a/packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.tsx b/packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.tsx index 46c0d32958d709..bd88502c5f8b6a 100644 --- a/packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.tsx +++ b/packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.tsx @@ -46,7 +46,7 @@ export class BaseExtendedPicker> 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> 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> extend } protected renderSuggestions(): JSX.Element { - let onRenderFloatingPicker = this.props.onRenderFloatingPicker; + const onRenderFloatingPicker = this.props.onRenderFloatingPicker; return (onRenderFloatingPicker({ componentRef: this.floatingPicker, onChange: this._onSuggestionSelected, @@ -159,7 +159,7 @@ export class BaseExtendedPicker> extend } protected renderSelectedItemsList(): JSX.Element { - let onRenderSelectedItems = this.props.onRenderSelectedItems; + const onRenderSelectedItems = this.props.onRenderSelectedItems; return (onRenderSelectedItems({ componentRef: this.selectedItemsList, ...this.selectedItemsListProps @@ -167,10 +167,10 @@ export class BaseExtendedPicker> extend } 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> extend protected onPaste = (ev: React.ClipboardEvent): void => { if (this.props.onPaste) { - let inputText = ev.clipboardData.getData('Text'); + const inputText = ev.clipboardData.getData('Text'); ev.preventDefault(); this.props.onPaste(inputText); } diff --git a/packages/experiments/src/components/ExtendedPicker/examples/ExtendedPeoplePicker.Basic.Example.tsx b/packages/experiments/src/components/ExtendedPicker/examples/ExtendedPeoplePicker.Basic.Example.tsx index fcd82c94a542f5..5b2dfc1ab7f78d 100644 --- a/packages/experiments/src/components/ExtendedPicker/examples/ExtendedPeoplePicker.Basic.Example.tsx +++ b/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 []; } } -} +} \ No newline at end of file diff --git a/packages/experiments/src/components/FloatingPicker/BaseFloatingPicker.test.tsx b/packages/experiments/src/components/FloatingPicker/BaseFloatingPicker.test.tsx index 252a302b2cd10c..4e651d5efc247b 100644 --- a/packages/experiments/src/components/FloatingPicker/BaseFloatingPicker.test.tsx +++ b/packages/experiments/src/components/FloatingPicker/BaseFloatingPicker.test.tsx @@ -60,17 +60,17 @@ describe('Pickers', () => { suggestionsStore={ new SuggestionsStore() } /> ); - 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( { }); 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( { ReactDOM.unmountComponentAtNode(root); }); }); -}); +}); \ No newline at end of file diff --git a/packages/experiments/src/components/FloatingPicker/BaseFloatingPicker.tsx b/packages/experiments/src/components/FloatingPicker/BaseFloatingPicker.tsx index b0d7c7fa9a08f3..05217da65bccf7 100644 --- a/packages/experiments/src/components/FloatingPicker/BaseFloatingPicker.tsx +++ b/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> extend suggestedDisplayValue: '', isMostRecentlyUsedVisible: false, moreSuggestionsAvailable: false, - isSearching: false, didBind: false, }; } @@ -157,7 +155,7 @@ export class BaseFloatingPicker> extend } public render(): JSX.Element { - let { className } = this.props; + const { className } = this.props; return (
> extend } protected renderSuggestions(): JSX.Element | null { - let TypedSuggestionsControl = this.SuggestionsControlOfProperType; + const TypedSuggestionsControl = this.SuggestionsControlOfProperType; return this.state.suggestionsVisible ? ( > 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> 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> extend protected updateSuggestionWithZeroState(): void { if (this.props.onZeroQuerySuggestion) { - let onEmptyInputFocus = this.props.onZeroQuerySuggestion as (selectedItems?: T[]) => T[] | PromiseLike; - let suggestions: T[] | PromiseLike = onEmptyInputFocus(this.props.selectedItems); + const onEmptyInputFocus = this.props.onZeroQuerySuggestion as (selectedItems?: T[]) => T[] | PromiseLike; + const suggestions: T[] | PromiseLike = onEmptyInputFocus(this.props.selectedItems); this.updateSuggestionsList(suggestions); } else { this.hidePicker(); @@ -239,8 +236,8 @@ export class BaseFloatingPicker> extend suggestions: T[] | PromiseLike, updatedValue?: string ): void { - let suggestionsArray: T[] = suggestions as T[]; - let suggestionsPromiseLike: PromiseLike = suggestions as PromiseLike< + const suggestionsArray: T[] = suggestions as T[]; + const suggestionsPromiseLike: PromiseLike = suggestions as PromiseLike< T[] >; @@ -260,7 +257,7 @@ export class BaseFloatingPicker> 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> 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> extend } private _onResolveSuggestions(updatedValue: string): void { - let suggestions: T[] | PromiseLike | null = this.props.onResolveSuggestions(updatedValue, this.props.selectedItems); + const suggestions: T[] | PromiseLike | null = this.props.onResolveSuggestions(updatedValue, this.props.selectedItems); if (suggestions !== null) { this.updateSuggestionsList(suggestions, updatedValue); @@ -398,14 +395,14 @@ export class BaseFloatingPicker> extend this.props.onValidateInput && this.props.createGenericItem ) { - let itemToConvert: ISuggestionModel = (this.props.createGenericItem as (( + const itemToConvert: ISuggestionModel = (this.props.createGenericItem as (( input: string, isValid: boolean ) => ISuggestionModel))( 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> extend this.setState({ didBind: false }); } } -} +} \ No newline at end of file diff --git a/packages/experiments/src/components/FloatingPicker/PeoplePicker/FloatingPeoplePicker.tsx b/packages/experiments/src/components/FloatingPicker/PeoplePicker/FloatingPeoplePicker.tsx index de027adbf47909..a2a787f36ca134 100644 --- a/packages/experiments/src/components/FloatingPicker/PeoplePicker/FloatingPeoplePicker.tsx +++ b/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 { // tslint:disable-next-line:no-any - let personaToConvert: any = { + const personaToConvert: any = { key: name, primaryText: name, imageInitials: '!', diff --git a/packages/experiments/src/components/FloatingPicker/PeoplePicker/PeoplePickerItems/SelectedItemDefault.tsx b/packages/experiments/src/components/FloatingPicker/PeoplePicker/PeoplePickerItems/SelectedItemDefault.tsx index 1799e953076adc..387f22c10d0638 100644 --- a/packages/experiments/src/components/FloatingPicker/PeoplePicker/PeoplePickerItems/SelectedItemDefault.tsx +++ b/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 />
); -}; +}; \ No newline at end of file diff --git a/packages/experiments/src/components/FloatingPicker/PeoplePicker/examples/FloatingPeoplePicker.Basic.Example.tsx b/packages/experiments/src/components/FloatingPicker/PeoplePicker/examples/FloatingPeoplePicker.Basic.Example.tsx index e8e9760c189162..60053903e075e7 100644 --- a/packages/experiments/src/components/FloatingPicker/PeoplePicker/examples/FloatingPeoplePicker.Basic.Example.tsx +++ b/packages/experiments/src/components/FloatingPicker/PeoplePicker/examples/FloatingPeoplePicker.Basic.Example.tsx @@ -28,9 +28,9 @@ export class FloatingPeoplePickerTypesExample 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); @@ -73,7 +73,7 @@ export class FloatingPeoplePickerTypesExample extends BaseComponent<{}, IPeopleP } private _renderFloatingPicker(): JSX.Element { - let suggestionProps: IBaseFloatingPickerSuggestionProps = { + const suggestionProps: IBaseFloatingPickerSuggestionProps = { footerItemsProps: [{ renderItem: () => { return (
Showing { this._picker.suggestions.length } results
); }, shouldShow: () => { @@ -116,17 +116,18 @@ export class FloatingPeoplePickerTypesExample 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 }); } } @@ -175,4 +176,4 @@ export class FloatingPeoplePickerTypesExample extends BaseComponent<{}, IPeopleP return false; } } -} +} \ No newline at end of file diff --git a/packages/experiments/src/components/FloatingPicker/Suggestions/Suggestions.tsx b/packages/experiments/src/components/FloatingPicker/Suggestions/Suggestions.tsx index b06b1bbd493c2c..072957192b09c5 100644 --- a/packages/experiments/src/components/FloatingPicker/Suggestions/Suggestions.tsx +++ b/packages/experiments/src/components/FloatingPicker/Suggestions/Suggestions.tsx @@ -29,7 +29,7 @@ export class Suggestions extends BaseComponent, {}> { * Increments the selected suggestion index */ public nextSuggestion(): boolean { - let { suggestions } = this.props; + const { suggestions } = this.props; if (suggestions && suggestions.length > 0) { if (this.currentIndex === -1) { @@ -51,7 +51,7 @@ export class Suggestions extends BaseComponent, {}> { * Decrements the selected suggestion index */ public previousSuggestion(): boolean { - let { suggestions } = this.props; + const { suggestions } = this.props; if (suggestions && suggestions.length > 0) { if (this.currentIndex === -1) { @@ -94,7 +94,7 @@ export class Suggestions extends BaseComponent, {}> { } public setSelectedSuggestion(index: number): void { - let { suggestions } = this.props; + const { suggestions } = this.props; if (index > suggestions.length - 1 || index < 0) { this.currentIndex = 0; diff --git a/packages/experiments/src/components/FloatingPicker/Suggestions/Suggestions.types.ts b/packages/experiments/src/components/FloatingPicker/Suggestions/Suggestions.types.ts index 6601e8147b9b06..b8e642cae14a2f 100644 --- a/packages/experiments/src/components/FloatingPicker/Suggestions/Suggestions.types.ts +++ b/packages/experiments/src/components/FloatingPicker/Suggestions/Suggestions.types.ts @@ -1,6 +1,5 @@ import * as React from 'react'; import { ISuggestionModel } from 'office-ui-fabric-react/lib/Pickers'; -import { IRenderFunction } from '../../../Utilities'; import { IPersonaProps } from 'office-ui-fabric-react/lib/Persona'; // tslint:disable-next-line:no-any @@ -75,10 +74,6 @@ export interface ISuggestionsControlProps extends React.Props, ISuggesti * Whether or not the first selectable item in the suggestions list should be selected */ shouldSelectFirstItem?: () => boolean; - /** - * How the "no result found" should look in the suggestion list. - */ - onRenderNoResultFound?: IRenderFunction; /** * The callback that should be called when the user attempts to use the input text as as item */ @@ -87,22 +82,6 @@ export interface ISuggestionsControlProps extends React.Props, ISuggesti * The CSS classname of the suggestions list. */ className?: string; - /** - * Used to indicate whether or not the component is searching for more results. - */ - isSearching?: boolean; - /** - * The text to display while searching for more results in a limited sugesstions list. - */ - searchingText?: string; - /** - * A renderer that adds an element at the end of the suggestions list it has more items than resultsMaximumNumber. - */ - resultsFooterFull?: (props: ISuggestionsProps) => JSX.Element; - /** - * A renderer that adds an element at the end of the suggestions list it has fewer items than resultsMaximumNumber. - */ - resultsFooter?: (props: ISuggestionsProps) => JSX.Element; /** * Completes the suggestion */ diff --git a/packages/experiments/src/components/FloatingPicker/Suggestions/SuggestionsControl.tsx b/packages/experiments/src/components/FloatingPicker/Suggestions/SuggestionsControl.tsx index b1cb55ae86dad8..260b1ea130c5e8 100644 --- a/packages/experiments/src/components/FloatingPicker/Suggestions/SuggestionsControl.tsx +++ b/packages/experiments/src/components/FloatingPicker/Suggestions/SuggestionsControl.tsx @@ -5,7 +5,6 @@ import { KeyCodes } from '../../../Utilities'; import { IButton } from 'office-ui-fabric-react/lib/Button'; -import { Spinner } from 'office-ui-fabric-react/lib/Spinner'; import { ISuggestionModel } from 'office-ui-fabric-react/lib/Pickers'; import { ISuggestionsHeaderFooterItemProps, @@ -110,8 +109,6 @@ export class SuggestionsControl extends BaseComponent extends BaseComponent) : (null) - } ); } @@ -145,23 +136,23 @@ export class SuggestionsControl extends BaseComponent extends BaseComponent extends BaseComponent { headerItemsProps.map((headerItemProps: ISuggestionsHeaderFooterProps, index: number) => { - let isSelected = selectedHeaderIndex !== -1 && selectedHeaderIndex === index; + const isSelected = selectedHeaderIndex !== -1 && selectedHeaderIndex === index; return ( headerItemProps.shouldShow() ?
extends BaseComponent extends BaseComponent { footerItemsProps.map((footerItemProps: ISuggestionsHeaderFooterProps, index: number) => { - let isSelected = selectedFooterIndex !== -1 && selectedFooterIndex === index; + const isSelected = selectedFooterIndex !== -1 && selectedFooterIndex === index; return ( footerItemProps.shouldShow() ?
extends BaseComponent extends BaseComponent extends BaseComponent currentIndex + 1) { for (let i = currentIndex + 1; i < itemProps.length; i++) { - let item = itemProps[i]; + const item = itemProps[i]; if (item.onExecute && item.shouldShow()) { this.setState({ selectedHeaderIndex: isHeader ? i : -1 }); this.setState({ selectedFooterIndex: isHeader ? -1 : i }); @@ -435,20 +426,20 @@ export class SuggestionsControl extends BaseComponent 0) { this._suggestions.setSelectedSuggestion(index - 1); this.setState({ selectedHeaderIndex: -1, selectedFooterIndex: -1 }); return true; } } else { - let isHeader = itemType === SuggestionItemType.header; - let itemProps = isHeader ? this.props.headerItemsProps : this.props.footerItemsProps; + const isHeader = itemType === SuggestionItemType.header; + const itemProps = isHeader ? this.props.headerItemsProps : this.props.footerItemsProps; if (itemProps) { - let index = currentIndex !== undefined ? currentIndex : itemProps.length; + const index = currentIndex !== undefined ? currentIndex : itemProps.length; if (index > 0) { for (let i = index - 1; i >= 0; i--) { - let item = itemProps[i]; + const item = itemProps[i]; if (item.onExecute && item.shouldShow()) { this.setState({ selectedHeaderIndex: isHeader ? i : -1 }); this.setState({ selectedFooterIndex: isHeader ? -1 : i }); diff --git a/packages/experiments/src/components/SelectedItemsList/BaseSelectedItemsList.test.tsx b/packages/experiments/src/components/SelectedItemsList/BaseSelectedItemsList.test.tsx index f725e47c0a0097..40790c614dd6bc 100644 --- a/packages/experiments/src/components/SelectedItemsList/BaseSelectedItemsList.test.tsx +++ b/packages/experiments/src/components/SelectedItemsList/BaseSelectedItemsList.test.tsx @@ -28,7 +28,7 @@ describe('SelectedItemsList', () => { ); - let tree = component.toJSON(); + const tree = component.toJSON(); expect(tree).toMatchSnapshot(); }); @@ -62,7 +62,7 @@ describe('SelectedItemsList', () => { root ) as TypedBaseSelectedItemsList; - let items: ISimple[] = [{ key: '1', name: 'a' }, { key: '2', name: 'b' }]; + const items: ISimple[] = [{ key: '1', name: 'a' }, { key: '2', name: 'b' }]; itemsList.addItems(items); expect(itemsList.items.length).toEqual(2); diff --git a/packages/experiments/src/components/SelectedItemsList/BaseSelectedItemsList.tsx b/packages/experiments/src/components/SelectedItemsList/BaseSelectedItemsList.tsx index f3116a45f136e0..a24a6f1549228a 100644 --- a/packages/experiments/src/components/SelectedItemsList/BaseSelectedItemsList.tsx +++ b/packages/experiments/src/components/SelectedItemsList/BaseSelectedItemsList.tsx @@ -28,7 +28,7 @@ export class BaseSelectedItemsList> constructor(basePickerProps: P) { super(basePickerProps); - let items: T[] = basePickerProps.selectedItems || basePickerProps.defaultSelectedItems || []; + const items: T[] = basePickerProps.selectedItems || basePickerProps.defaultSelectedItems || []; this.state = { items: items, }; @@ -45,35 +45,35 @@ export class BaseSelectedItemsList> public addItems = (items: T[]): void => { // tslint:disable-next-line:no-any - let processedItems: T[] | PromiseLike = this.props.onItemSelected ? (this.props.onItemSelected as any)(items) : items; + const processedItems: T[] | PromiseLike = this.props.onItemSelected ? (this.props.onItemSelected as any)(items) : items; - let processedItemObjects: T[] = processedItems as T[]; - let processedItemPromiseLikes: PromiseLike = processedItems as PromiseLike; + const processedItemObjects: T[] = processedItems as T[]; + const processedItemPromiseLikes: PromiseLike = processedItems as PromiseLike; if (processedItemPromiseLikes && processedItemPromiseLikes.then) { processedItemPromiseLikes.then((resolvedProcessedItems: T[]) => { - let newItems: T[] = this.state.items.concat(resolvedProcessedItems); + const newItems: T[] = this.state.items.concat(resolvedProcessedItems); this.updateItems(newItems); }); } else { - let newItems: T[] = this.state.items.concat(processedItemObjects); + const newItems: T[] = this.state.items.concat(processedItemObjects); this.updateItems(newItems); } this.setState({ suggestedDisplayValue: '' }); } public removeItemAt = (index: number): void => { - let { items } = this.state; + const { items } = this.state; // tslint:disable-next-line:no-any if (index > -1) { - let newItems = items.slice(0, index).concat(items.slice(index + 1)); + const newItems = items.slice(0, index).concat(items.slice(index + 1)); this.updateItems(newItems); } } public onCopy = (ev: React.ClipboardEvent): void => { if (this.props.onCopyItems && this.selection.getSelectedCount() > 0) { - let selectedItems: T[] = this.selection.getSelection() as T[]; + const selectedItems: T[] = this.selection.getSelection() as T[]; this.copyItems(selectedItems); } } @@ -93,7 +93,7 @@ export class BaseSelectedItemsList> } public componentWillReceiveProps(newProps: P): void { - let newItems = newProps.selectedItems; + const newItems = newProps.selectedItems; if (newItems) { this.setState({ items: newProps.selectedItems }); @@ -110,10 +110,10 @@ export class BaseSelectedItemsList> } protected renderItems = (): JSX.Element[] => { - let { removeButtonAriaLabel } = this.props; - let onRenderItem = this.props.onRenderItem as (props: ISelectedItemProps) => JSX.Element; + const { removeButtonAriaLabel } = this.props; + const onRenderItem = this.props.onRenderItem as (props: ISelectedItemProps) => JSX.Element; - let { items } = this.state; + const { items } = this.state; // tslint:disable-next-line:no-any return items.map((item: any, index: number) => onRenderItem({ item, @@ -150,10 +150,10 @@ export class BaseSelectedItemsList> } protected onItemChange = (changedItem: T, index: number): void => { - let { items } = this.state; + const { items } = this.state; if (index >= 0) { - let newItems: T[] = items; + const newItems: T[] = items; newItems[index] = changedItem; this.updateItems(newItems); @@ -161,22 +161,22 @@ export class BaseSelectedItemsList> } protected removeItem = (item: ISelectedItemProps): void => { - let { items } = this.state; - let index: number = items.indexOf(item); + const { items } = this.state; + const index: number = items.indexOf(item); if (index >= 0) { - let newItems: T[] = items.slice(0, index).concat(items.slice(index + 1)); + const newItems: T[] = items.slice(0, index).concat(items.slice(index + 1)); this.updateItems(newItems); } } // tslint:disable-next-line:no-any protected removeItems = (itemsToRemove: any[]): void => { - let { items } = this.state; + const { items } = this.state; // tslint:disable-next-line:no-any - let newItems: T[] = items.filter((item: any) => itemsToRemove.indexOf(item) === -1); - let firstItemToRemove = itemsToRemove[0]; - let index: number = items.indexOf(firstItemToRemove); + const newItems: T[] = items.filter((item: any) => itemsToRemove.indexOf(item) === -1); + const firstItemToRemove = itemsToRemove[0]; + const index: number = items.indexOf(firstItemToRemove); this.updateItems(newItems, index); } @@ -211,9 +211,9 @@ export class BaseSelectedItemsList> protected copyItems(items: T[]): void { if (this.props.onCopyItems) { // tslint:disable-next-line:no-any - let copyText = (this.props.onCopyItems as any)(items); + const copyText = (this.props.onCopyItems as any)(items); - let copyInput = document.createElement('input') as HTMLInputElement; + const copyInput = document.createElement('input') as HTMLInputElement; document.body.appendChild(copyInput); try { diff --git a/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.tsx b/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.tsx index 1639da03805bcd..90175d46014b9f 100644 --- a/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.tsx +++ b/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.tsx @@ -44,8 +44,8 @@ export class EditingItem extends BaseComponent string; - let itemText = getEditingItemText(this.props.item); + const getEditingItemText = this.props.getEditingItemText as (item: IExtendedPersonaProps) => string; + const itemText = getEditingItemText(this.props.item); this._editingFloatingPicker.value && this._editingFloatingPicker.value.onQueryStringChanged(itemText); this._editingInput.value = itemText; this._editingInput.focus(); @@ -74,7 +74,7 @@ export class EditingItem extends BaseComponent { - let onRenderFloatingPicker = this._onRenderFloatingPicker; + const onRenderFloatingPicker = this._onRenderFloatingPicker; return (onRenderFloatingPicker({ componentRef: this._editingFloatingPicker, onChange: this._onSuggestionSelected, @@ -103,7 +103,7 @@ export class EditingItem extends BaseComponent): void => { - let value: string = (ev.target as HTMLInputElement).value; + const value: string = (ev.target as HTMLInputElement).value; if (value === '') { if (this.props.onRemoveItem) { diff --git a/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/ExtendedSelectedItem.tsx b/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/ExtendedSelectedItem.tsx index 296b6cf76819bc..4352ac823eb938 100644 --- a/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/ExtendedSelectedItem.tsx +++ b/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/ExtendedSelectedItem.tsx @@ -22,7 +22,7 @@ export class ExtendedSelectedItem extends BaseComponent { - let { items } = this.state; - let index: number = items.indexOf(itemToReplace); + const { items } = this.state; + const index: number = items.indexOf(itemToReplace); if (index > -1) { - let newItems = items.slice(0, index).concat(itemsToReplaceWith).concat(items.slice(index + 1)); + const newItems = items.slice(0, index).concat(itemsToReplaceWith).concat(items.slice(index + 1)); this.updateItems(newItems); } } protected renderItems = (): JSX.Element[] => { - let { items } = this.state; + const { items } = this.state; // tslint:disable-next-line:no-any return items.map((item: any, index: number) => this._renderItem(item, index)); } // tslint:disable-next-line:no-any private _renderItem(item: any, index: number): JSX.Element { - let { removeButtonAriaLabel } = this.props; - let props = { + const { removeButtonAriaLabel } = this.props; + const props = { item, index, key: item.key ? item.key : index, @@ -90,8 +90,8 @@ export class SelectedPeopleList extends BasePeopleSelectedItemsList { /> ); } else { - let onRenderItem = this.props.onRenderItem as (props: ISelectedPeopleItemProps) => JSX.Element; - let renderedItem = onRenderItem(props); + const onRenderItem = this.props.onRenderItem as (props: ISelectedPeopleItemProps) => JSX.Element; + const renderedItem = onRenderItem(props); return ( props.menuItems.length > 0 ? ( @@ -120,7 +120,7 @@ export class SelectedPeopleList extends BasePeopleSelectedItemsList { // tslint:disable-next-line:no-any private _createMenuItems(item: any): IContextualMenuItem[] { - let menuItems: IContextualMenuItem[] = []; + const menuItems: IContextualMenuItem[] = []; if (this.props.editMenuItemText && this.props.getEditingItemText) { menuItems.push({