diff --git a/apps/fabric-website/tslint.json b/apps/fabric-website/tslint.json index c1579f8b41531a..150bae09e1c3ef 100644 --- a/apps/fabric-website/tslint.json +++ b/apps/fabric-website/tslint.json @@ -14,6 +14,7 @@ "jsx-alignment": false, "jsx-ban-props": false, "jsx-no-string-ref": false, - "jsx-no-bind": false + "jsx-no-bind": false, + "prefer-const": false } } \ No newline at end of file diff --git a/apps/todo-app/tslint.json b/apps/todo-app/tslint.json index cd3b575b4545f6..640af822902dae 100644 --- a/apps/todo-app/tslint.json +++ b/apps/todo-app/tslint.json @@ -6,6 +6,7 @@ "no-any": false, "typedef": [ false - ] + ], + "prefer-const": false } } \ No newline at end of file diff --git a/packages/example-app-base/tslint.json b/packages/example-app-base/tslint.json index 621ee6ba046052..672d9eba8927e3 100644 --- a/packages/example-app-base/tslint.json +++ b/packages/example-app-base/tslint.json @@ -2,5 +2,7 @@ "extends": [ "office-ui-fabric-react-tslint" ], - "rules": {} + "rules": { + "prefer-const": false + } } \ No newline at end of file diff --git a/packages/experiments/tslint.json b/packages/experiments/tslint.json index 621ee6ba046052..672d9eba8927e3 100644 --- a/packages/experiments/tslint.json +++ b/packages/experiments/tslint.json @@ -2,5 +2,7 @@ "extends": [ "office-ui-fabric-react-tslint" ], - "rules": {} + "rules": { + "prefer-const": false + } } \ No newline at end of file diff --git a/packages/file-type-icons/tslint.json b/packages/file-type-icons/tslint.json index 621ee6ba046052..672d9eba8927e3 100644 --- a/packages/file-type-icons/tslint.json +++ b/packages/file-type-icons/tslint.json @@ -2,5 +2,7 @@ "extends": [ "office-ui-fabric-react-tslint" ], - "rules": {} + "rules": { + "prefer-const": false + } } \ No newline at end of file diff --git a/packages/jest-serializer-merge-styles/tslint.json b/packages/jest-serializer-merge-styles/tslint.json index 009d06e3cf4477..621ee6ba046052 100644 --- a/packages/jest-serializer-merge-styles/tslint.json +++ b/packages/jest-serializer-merge-styles/tslint.json @@ -2,7 +2,5 @@ "extends": [ "office-ui-fabric-react-tslint" ], - "rules": { - "prefer-const": true - } + "rules": {} } \ No newline at end of file diff --git a/packages/merge-styles/tslint.json b/packages/merge-styles/tslint.json index 009d06e3cf4477..621ee6ba046052 100644 --- a/packages/merge-styles/tslint.json +++ b/packages/merge-styles/tslint.json @@ -2,7 +2,5 @@ "extends": [ "office-ui-fabric-react-tslint" ], - "rules": { - "prefer-const": true - } + "rules": {} } \ No newline at end of file diff --git a/packages/office-ui-fabric-react-tslint/tslint.json b/packages/office-ui-fabric-react-tslint/tslint.json index 67a68159eae099..0fcb71bed6ed9a 100644 --- a/packages/office-ui-fabric-react-tslint/tslint.json +++ b/packages/office-ui-fabric-react-tslint/tslint.json @@ -53,7 +53,7 @@ "property-declaration", "member-variable-declaration" ], - "prefer-const": false, + "prefer-const": true, "quotemark": [ true, "single", diff --git a/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.styles.ts b/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.styles.ts index c07eed7a0bab1c..fd6951300fd3a6 100644 --- a/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.styles.ts +++ b/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.styles.ts @@ -18,7 +18,7 @@ export const getStyles = memoizeFunction(( theme: ITheme = getTheme(), customStyles?: IActivityItemStyles ): IActivityItemStyles => { - let ActivityItemStyles: IActivityItemStyles = { + const ActivityItemStyles: IActivityItemStyles = { root: [ theme.fonts.small, diff --git a/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.test.tsx b/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.test.tsx index f993d7b6ae0309..462414f66dd3dc 100644 --- a/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.test.tsx +++ b/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.test.tsx @@ -32,72 +32,72 @@ const defaultPersonaProps = [ describe('ActivityItem', () => { it('renders with an icon correctly', () => { - let component = renderer.create( + const component = renderer.create( } /> ); - let tree = component.toJSON(); + const tree = component.toJSON(); expect(tree).toMatchSnapshot(); }); it('renders with a single persona correctly', () => { - let component = renderer.create( + const component = renderer.create( ); - let tree = component.toJSON(); + const tree = component.toJSON(); expect(tree).toMatchSnapshot(); }); it('renders with multiple personas correctly', () => { - let component = renderer.create( + const component = renderer.create( ); - let tree = component.toJSON(); + const tree = component.toJSON(); expect(tree).toMatchSnapshot(); }); it('renders compact with an icon correctly', () => { - let component = renderer.create( + const component = renderer.create( } isCompact={ true } /> ); - let tree = component.toJSON(); + const tree = component.toJSON(); expect(tree).toMatchSnapshot(); }); it('renders compact with a single persona correctly', () => { - let component = renderer.create( + const component = renderer.create( ); - let tree = component.toJSON(); + const tree = component.toJSON(); expect(tree).toMatchSnapshot(); }); it('renders compact with multiple personas correctly', () => { - let component = renderer.create( + const component = renderer.create( ); - let tree = component.toJSON(); + const tree = component.toJSON(); expect(tree).toMatchSnapshot(); }); -}); +}); \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.tsx b/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.tsx index 610e71dbc1913e..814a480422d6f4 100644 --- a/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.tsx +++ b/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.tsx @@ -18,7 +18,7 @@ export class ActivityItem extends BaseComponent { } public render() { - let { + const { onRenderIcon = this._onRenderIcon, onRenderActivityDescription = this._onRenderActivityDescription, onRenderComments = this._onRenderComments, @@ -97,11 +97,11 @@ export class ActivityItem extends BaseComponent { @autobind private _onRenderPersonaArray(props: IActivityItemProps): JSX.Element | null { let personaElement: JSX.Element | null = null; - let activityPersonas = props.activityPersonas as Array; + const activityPersonas = props.activityPersonas as Array; if (activityPersonas[0].imageUrl || activityPersonas[0].imageInitials) { - let personaList: Array = []; - let showSize16Personas = (activityPersonas.length > 1 || props.isCompact); - let personaLimit = props.isCompact ? 3 : 4; + const personaList: Array = []; + const showSize16Personas = (activityPersonas.length > 1 || props.isCompact); + const personaLimit = props.isCompact ? 3 : 4; let style: React.CSSProperties | undefined = undefined; if (props.isCompact) { style = { diff --git a/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Basic.Example.tsx index 183891565cf458..838d6fd39bec76 100644 --- a/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Basic.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Basic.Example.tsx @@ -56,9 +56,9 @@ export class ActivityItemBasicExample extends React.Component = []; + const activityExampleList: Array = []; activityItemExamples.forEach((item) => { - let props = item; + const props = item; activityExampleList.push( ); diff --git a/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Compact.Example.tsx b/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Compact.Example.tsx index 1f845e585933bc..56a68c5f440d62 100644 --- a/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Compact.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Compact.Example.tsx @@ -72,9 +72,9 @@ export class ActivityItemCompactExample extends React.Component = []; + const activityExampleList: Array = []; activityItemExamples.forEach((item) => { - let props = item; + const props = item; activityExampleList.push( ); diff --git a/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Persona.Example.tsx b/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Persona.Example.tsx index 7087b67f512a28..204be27e2a29fb 100644 --- a/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Persona.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Persona.Example.tsx @@ -109,9 +109,9 @@ export class ActivityItemPersonaExample extends React.Component = []; + const activityExampleList: Array = []; activityItemExamples.forEach((item) => { - let props = item; + const props = item; activityExampleList.push( ); diff --git a/packages/office-ui-fabric-react/src/components/Autofill/Autofill.test.tsx b/packages/office-ui-fabric-react/src/components/Autofill/Autofill.test.tsx index 4f2963461f5c58..c70c381eb2c758 100644 --- a/packages/office-ui-fabric-react/src/components/Autofill/Autofill.test.tsx +++ b/packages/office-ui-fabric-react/src/components/Autofill/Autofill.test.tsx @@ -11,11 +11,11 @@ import { Autofill } from './Autofill'; describe('Autofill', () => { let autoFill: Autofill; let autoFillInput: HTMLInputElement; - let baseNode = document.createElement('div'); + const baseNode = document.createElement('div'); document.body.appendChild(baseNode); beforeEach(() => { - let component = ReactDOM.render( + const component = ReactDOM.render( autoFill = c! } suggestedDisplayValue='hello' diff --git a/packages/office-ui-fabric-react/src/components/Autofill/Autofill.tsx b/packages/office-ui-fabric-react/src/components/Autofill/Autofill.tsx index 4d40ee53a5963f..b4dfb73618bb22 100644 --- a/packages/office-ui-fabric-react/src/components/Autofill/Autofill.tsx +++ b/packages/office-ui-fabric-react/src/components/Autofill/Autofill.tsx @@ -35,7 +35,7 @@ export class Autofill extends BaseComponent impl public get cursorLocation(): number { if (this._inputElement) { - let inputElement = this._inputElement; + const inputElement = this._inputElement; if (inputElement.selectionDirection !== SELECTION_FORWARD) { return inputElement.selectionEnd; } else { @@ -81,8 +81,8 @@ export class Autofill extends BaseComponent impl } public componentDidUpdate() { - let value = this._value; - let { + const value = this._value; + const { suggestedDisplayValue, shouldSelectFullInputValueInComponentDidUpdate } = this.props; @@ -109,7 +109,7 @@ export class Autofill extends BaseComponent impl } public render() { - let { + const { displayValue } = this.state; @@ -154,7 +154,7 @@ export class Autofill extends BaseComponent impl // Find out more at https://developer.mozilla.org/en-US/docs/Web/Events/compositionstart @autobind private _onCompositionEnd(ev: React.CompositionEvent) { - let inputValue = this._getCurrentInputValue(); + const inputValue = this._getCurrentInputValue(); this._tryEnableAutofill(inputValue, this.value, false, true); // Due to timing, this needs to be async, otherwise no text will be selected. this._async.setTimeout(() => this._updateValue(inputValue), 0); @@ -200,7 +200,7 @@ export class Autofill extends BaseComponent impl @autobind private _onChange(ev: React.FormEvent) { - let value: string = this._getCurrentInputValue(ev); + const value: string = this._getCurrentInputValue(ev); // Right now typing does not have isComposing, once that has been fixed any should be removed. this._tryEnableAutofill(value, this._value, (ev.nativeEvent as any).isComposing); this._updateValue(value); diff --git a/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.test.tsx b/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.test.tsx index d2ae7c88e4e241..843ca2f5255535 100644 --- a/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.test.tsx +++ b/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.test.tsx @@ -49,14 +49,14 @@ describe('Breadcrumb', () => { { text: 'TestText', key: 'TestKey', onClick: clickCallback } ]; - let component = ReactTestUtils.renderIntoDocument( + const component = ReactTestUtils.renderIntoDocument( ); - let renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance); - let itemLink = renderedDOM.querySelector('.ms-Breadcrumb-itemLink'); + const renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance); + const itemLink = renderedDOM.querySelector('.ms-Breadcrumb-itemLink'); ReactTestUtils.Simulate.click(itemLink!); expect(callbackValue).toEqual('TestKey'); @@ -71,15 +71,15 @@ describe('Breadcrumb', () => { { text: 'TestText4', key: 'TestKey4' } ]; - let component = ReactTestUtils.renderIntoDocument( + const component = ReactTestUtils.renderIntoDocument( ); - let renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance); - let itemLink = renderedDOM.querySelectorAll('.ms-Breadcrumb-item'); + const renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance); + const itemLink = renderedDOM.querySelectorAll('.ms-Breadcrumb-item'); expect(itemLink[0].textContent).toEqual('TestText3'); }); diff --git a/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.tsx b/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.tsx index 1b3b682702215d..6c6409e6733dc7 100644 --- a/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.tsx +++ b/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.tsx @@ -56,7 +56,7 @@ export class Breadcrumb extends BaseComponent { @autobind private _onReduceData(data: IBreadCrumbData): IBreadCrumbData | undefined { let { renderedItems, renderedOverflowItems } = data; - let movedItem = renderedItems[0]; + const movedItem = renderedItems[0]; renderedItems = renderedItems.slice(1); renderedOverflowItems = [...renderedOverflowItems, movedItem]; @@ -68,10 +68,10 @@ export class Breadcrumb extends BaseComponent { @autobind private _onRenderBreadcrumb(data: IBreadCrumbData) { - let { className, ariaLabel, onRenderItem = this._onRenderItem } = data.props; - let { renderedOverflowItems, renderedItems } = data; + const { className, ariaLabel, onRenderItem = this._onRenderItem } = data.props; + const { renderedOverflowItems, renderedItems } = data; - let contextualItems = renderedOverflowItems.map( + const contextualItems = renderedOverflowItems.map( (item, index) => ({ name: item.text, key: item.key, diff --git a/packages/office-ui-fabric-react/src/components/Button/ActionButton/ActionButton.styles.ts b/packages/office-ui-fabric-react/src/components/Button/ActionButton/ActionButton.styles.ts index 406b8c933d9c70..3ea21f35580ffe 100644 --- a/packages/office-ui-fabric-react/src/components/Button/ActionButton/ActionButton.styles.ts +++ b/packages/office-ui-fabric-react/src/components/Button/ActionButton/ActionButton.styles.ts @@ -15,8 +15,8 @@ export const getStyles = memoizeFunction(( theme: ITheme, customStyles?: IButtonStyles ): IButtonStyles => { - let baseButtonStyles: IButtonStyles = getBaseButtonStyles(theme); - let actionButtonStyles: IButtonStyles = { + const baseButtonStyles: IButtonStyles = getBaseButtonStyles(theme); + const actionButtonStyles: IButtonStyles = { root: { padding: DEFAULT_PADDING, height: DEFAULT_BUTTON_HEIGHT, diff --git a/packages/office-ui-fabric-react/src/components/Button/ActionButton/ActionButton.tsx b/packages/office-ui-fabric-react/src/components/Button/ActionButton/ActionButton.tsx index 491b6ece22e842..c99913121c9777 100644 --- a/packages/office-ui-fabric-react/src/components/Button/ActionButton/ActionButton.tsx +++ b/packages/office-ui-fabric-react/src/components/Button/ActionButton/ActionButton.tsx @@ -13,7 +13,7 @@ export class ActionButton extends BaseComponent { protected _shouldUpdateComponentRef = false; public render() { - let { styles, theme } = this.props; + const { styles, theme } = this.props; return ( { - let { semanticColors } = theme; + const { semanticColors } = theme; - let border = semanticColors.buttonBorder; - let disabledBackground = semanticColors.disabledBackground; - let disabledText = semanticColors.disabledText; + const border = semanticColors.buttonBorder; + const disabledBackground = semanticColors.disabledBackground; + const disabledText = semanticColors.disabledText; return { root: [ diff --git a/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx b/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx index aa00e77d0dc649..dc4cdb3965e29b 100644 --- a/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx +++ b/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx @@ -90,9 +90,9 @@ export class BaseButton extends BaseComponent): JSX.Element | null { - let { + const { iconProps } = this.props; @@ -264,7 +264,7 @@ export class BaseButton extends BaseComponent) { - let { onMenuClick } = this.props; + const { onMenuClick } = this.props; if (onMenuClick) { onMenuClick(ev, this); } diff --git a/packages/office-ui-fabric-react/src/components/Button/Button.test.tsx b/packages/office-ui-fabric-react/src/components/Button/Button.test.tsx index b50f0b53f612c0..df1c3edab4bbbf 100644 --- a/packages/office-ui-fabric-react/src/components/Button/Button.test.tsx +++ b/packages/office-ui-fabric-react/src/components/Button/Button.test.tsx @@ -19,13 +19,13 @@ const alertClicked = (): void => { /*noop*/ }; describe('Button', () => { it('renders DefaultButton correctly', () => { const component = renderer.create(); - let tree = component.toJSON(); + const tree = component.toJSON(); expect(tree).toMatchSnapshot(); }); it('renders ActionButton correctly', () => { const component = renderer.create(Button); - let tree = component.toJSON(); + const tree = component.toJSON(); expect(tree).toMatchSnapshot(); }); @@ -49,7 +49,7 @@ describe('Button', () => { ] } } />); - let tree = component.toJSON(); + const tree = component.toJSON(); expect(tree).toMatchSnapshot(); }); @@ -58,7 +58,7 @@ describe('Button', () => { Create account ); - let tree = component.toJSON(); + const tree = component.toJSON(); expect(tree).toMatchSnapshot(); }); @@ -69,7 +69,7 @@ describe('Button', () => { title='Emoji' ariaLabel='Emoji' />); - let tree = component.toJSON(); + const tree = component.toJSON(); expect(tree).toMatchSnapshot(); }); @@ -89,7 +89,7 @@ describe('Button', () => { }); it('can render with an onClick.', () => { - let onClick: () => null = () => null; + const onClick: () => null = () => null; const button = ReactTestUtils.renderIntoDocument( Hello diff --git a/packages/office-ui-fabric-react/src/components/Button/ButtonThemes.ts b/packages/office-ui-fabric-react/src/components/Button/ButtonThemes.ts index 808bcfd3a1966e..8ffc2d20125e2a 100644 --- a/packages/office-ui-fabric-react/src/components/Button/ButtonThemes.ts +++ b/packages/office-ui-fabric-react/src/components/Button/ButtonThemes.ts @@ -2,17 +2,17 @@ import { IButtonStyles } from './Button.types'; import { ITheme, HighContrastSelector } from '../../Styling'; export function standardStyles(theme: ITheme): IButtonStyles { - let s = theme.semanticColors; + const s = theme.semanticColors; - let buttonBackground = s.buttonBackground; - let buttonBackgroundChecked = s.buttonBackgroundChecked; - let buttonBackgroundHovered = s.buttonBackgroundHovered; - let buttonBackgroundCheckedHovered = s.buttonBackgroundCheckedHovered; + const buttonBackground = s.buttonBackground; + const buttonBackgroundChecked = s.buttonBackgroundChecked; + const buttonBackgroundHovered = s.buttonBackgroundHovered; + const buttonBackgroundCheckedHovered = s.buttonBackgroundCheckedHovered; - let buttonText = s.buttonText; - let buttonTextHovered = s.buttonTextHovered; - let buttonTextChecked = s.buttonTextChecked; - let buttonTextCheckedHovered = s.buttonTextCheckedHovered; + const buttonText = s.buttonText; + const buttonTextHovered = s.buttonTextHovered; + const buttonTextChecked = s.buttonTextChecked; + const buttonTextCheckedHovered = s.buttonTextCheckedHovered; return { root: { diff --git a/packages/office-ui-fabric-react/src/components/Button/CommandBarButton/CommandBarButton.styles.ts b/packages/office-ui-fabric-react/src/components/Button/CommandBarButton/CommandBarButton.styles.ts index 6a8f5856c1d606..d76227886d6374 100644 --- a/packages/office-ui-fabric-react/src/components/Button/CommandBarButton/CommandBarButton.styles.ts +++ b/packages/office-ui-fabric-react/src/components/Button/CommandBarButton/CommandBarButton.styles.ts @@ -17,9 +17,9 @@ export const getStyles = memoizeFunction(( focusInset?: string, focusColor?: string ): IButtonStyles => { - let baseButtonStyles: IButtonStyles = getBaseButtonStyles(theme); - let baseSplitButtonStyles: IButtonStyles = getSplitButtonStyles(theme); - let commandButtonStyles: IButtonStyles = { + const baseButtonStyles: IButtonStyles = getBaseButtonStyles(theme); + const baseSplitButtonStyles: IButtonStyles = getSplitButtonStyles(theme); + const commandButtonStyles: IButtonStyles = { root: { minWidth: '40px', backgroundColor: theme.palette.neutralLighter, diff --git a/packages/office-ui-fabric-react/src/components/Button/CommandBarButton/CommandBarButton.tsx b/packages/office-ui-fabric-react/src/components/Button/CommandBarButton/CommandBarButton.tsx index dbd000543dd3ae..c5b55c2678e0d3 100644 --- a/packages/office-ui-fabric-react/src/components/Button/CommandBarButton/CommandBarButton.tsx +++ b/packages/office-ui-fabric-react/src/components/Button/CommandBarButton/CommandBarButton.tsx @@ -12,7 +12,7 @@ export class CommandBarButton extends BaseComponent { protected _shouldUpdateComponentRef = false; public render() { - let { styles, theme } = this.props; + const { styles, theme } = this.props; return ( { - let baseButtonStyles: IButtonStyles = getBaseButtonStyles(theme); - let splitButtonStyles: IButtonStyles = getSplitButtonStyles(theme); - let compoundButtonStyles: IButtonStyles = { + const baseButtonStyles: IButtonStyles = getBaseButtonStyles(theme); + const splitButtonStyles: IButtonStyles = getSplitButtonStyles(theme); + const compoundButtonStyles: IButtonStyles = { root: { maxWidth: '280px', minHeight: '72px', @@ -66,7 +66,7 @@ export const getStyles = memoizeFunction(( }; - let standardCompoundTheme: IButtonStyles = { + const standardCompoundTheme: IButtonStyles = { description: { color: theme.palette.neutralSecondary, @@ -89,7 +89,7 @@ export const getStyles = memoizeFunction(( } }; - let primaryCompoundTheme: IButtonStyles = { + const primaryCompoundTheme: IButtonStyles = { description: { color: theme.palette.white, diff --git a/packages/office-ui-fabric-react/src/components/Button/CompoundButton/CompoundButton.tsx b/packages/office-ui-fabric-react/src/components/Button/CompoundButton/CompoundButton.tsx index 8b44d9f464dffd..96cd9e73660a7e 100644 --- a/packages/office-ui-fabric-react/src/components/Button/CompoundButton/CompoundButton.tsx +++ b/packages/office-ui-fabric-react/src/components/Button/CompoundButton/CompoundButton.tsx @@ -12,7 +12,7 @@ export class CompoundButton extends BaseComponent { protected _shouldUpdateComponentRef = false; public render() { - let { primary = false, styles, theme } = this.props; + const { primary = false, styles, theme } = this.props; return ( { - let baseButtonStyles: IButtonStyles = getBaseButtonStyles(theme); - let splitButtonStyles: IButtonStyles = getSplitButtonStyles(theme); - let defaultButtonStyles: IButtonStyles = { + const baseButtonStyles: IButtonStyles = getBaseButtonStyles(theme); + const splitButtonStyles: IButtonStyles = getSplitButtonStyles(theme); + const defaultButtonStyles: IButtonStyles = { root: { minWidth: DEFAULT_BUTTON_MINWIDTH, height: DEFAULT_BUTTON_HEIGHT, diff --git a/packages/office-ui-fabric-react/src/components/Button/IconButton/IconButton.styles.ts b/packages/office-ui-fabric-react/src/components/Button/IconButton/IconButton.styles.ts index dae28404cd08cb..7792c4b2551b01 100644 --- a/packages/office-ui-fabric-react/src/components/Button/IconButton/IconButton.styles.ts +++ b/packages/office-ui-fabric-react/src/components/Button/IconButton/IconButton.styles.ts @@ -15,9 +15,9 @@ export const getStyles = memoizeFunction(( theme: ITheme, customStyles?: IButtonStyles ): IButtonStyles => { - let baseButtonStyles: IButtonStyles = getBaseButtonStyles(theme); - let splitButtonStyles: IButtonStyles = getSplitButtonStyles(theme); - let iconButtonStyles: IButtonStyles = { + const baseButtonStyles: IButtonStyles = getBaseButtonStyles(theme); + const splitButtonStyles: IButtonStyles = getSplitButtonStyles(theme); + const iconButtonStyles: IButtonStyles = { root: { padding: '0 4px', width: '32px', diff --git a/packages/office-ui-fabric-react/src/components/Button/IconButton/IconButton.tsx b/packages/office-ui-fabric-react/src/components/Button/IconButton/IconButton.tsx index 9d6367a36cfbe6..775ecceba5cc6d 100644 --- a/packages/office-ui-fabric-react/src/components/Button/IconButton/IconButton.tsx +++ b/packages/office-ui-fabric-react/src/components/Button/IconButton/IconButton.tsx @@ -12,7 +12,7 @@ export class IconButton extends BaseComponent { protected _shouldUpdateComponentRef = false; public render() { - let { styles, theme } = this.props; + const { styles, theme } = this.props; return ( { - let baseButtonStyles: IButtonStyles = getBaseButtonStyles(theme); - let messageBarButtonStyles: IButtonStyles = { + const baseButtonStyles: IButtonStyles = getBaseButtonStyles(theme); + const messageBarButtonStyles: IButtonStyles = { root: { backgroundColor: theme.palette.neutralQuaternaryAlt, color: theme.palette.neutralPrimary diff --git a/packages/office-ui-fabric-react/src/components/Button/MessageBarButton/MessageBarButton.tsx b/packages/office-ui-fabric-react/src/components/Button/MessageBarButton/MessageBarButton.tsx index e39a2789c8b6c5..c59d000ab98a12 100644 --- a/packages/office-ui-fabric-react/src/components/Button/MessageBarButton/MessageBarButton.tsx +++ b/packages/office-ui-fabric-react/src/components/Button/MessageBarButton/MessageBarButton.tsx @@ -8,7 +8,7 @@ import { getStyles } from './MessageBarButton.styles'; export class MessageBarButton extends BaseComponent { public render() { - let { styles, theme } = this.props; + const { styles, theme } = this.props; return ( { - let splitButtonStyles: IButtonStyles = { + const splitButtonStyles: IButtonStyles = { splitButtonContainer: { position: 'relative', display: 'inline-block', diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Action.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Action.Example.tsx index 7dcfd418f4b1f2..dd8603446821ac 100644 --- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Action.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Action.Example.tsx @@ -16,7 +16,7 @@ export class ButtonActionExample extends React.Component { } public render() { - let { disabled, checked } = this.props; + const { disabled, checked } = this.props; const getClassNames = classNamesFunction(); const classNames = getClassNames(getStyles); diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Anchor.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Anchor.Example.tsx index 5490a3a062eb8d..adbd686f9f4935 100644 --- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Anchor.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Anchor.Example.tsx @@ -15,7 +15,7 @@ import { export class ButtonAnchorExample extends React.Component { public render() { - let { disabled, checked } = this.props; + const { disabled, checked } = this.props; const getClassNames = classNamesFunction(); const classNames = getClassNames(getStyles); @@ -28,7 +28,7 @@ export class ButtonAnchorExample extends React.Component { checked={ checked } href='http://bing.com' target='_blank' - title='Let us bing!' + title='let us bing!' > Bing diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Command.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Command.Example.tsx index 6e11b46aafb087..4617d5420cb864 100644 --- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Command.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Command.Example.tsx @@ -3,7 +3,7 @@ import { CommandButton, IButtonProps } from 'office-ui-fabric-react/lib/Button'; export class ButtonCommandExample extends React.Component { public render() { - let { disabled, checked } = this.props; + const { disabled, checked } = this.props; return (
diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.CommandBar.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.CommandBar.Example.tsx index 3ef494a34669f0..c1ba4cf8657597 100644 --- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.CommandBar.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.CommandBar.Example.tsx @@ -3,7 +3,7 @@ import { CommandBarButton, IButtonProps } from 'office-ui-fabric-react/lib/Butto export class ButtonCommandBarExample extends React.Component { public render() { - let { disabled, checked } = this.props; + const { disabled, checked } = this.props; return (
diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Compound.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Compound.Example.tsx index 92c31dded940ab..19a42f41c4c630 100644 --- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Compound.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Compound.Example.tsx @@ -17,7 +17,7 @@ export class ButtonCompoundExample extends React.Component { } public render() { - let { disabled, checked } = this.props; + const { disabled, checked } = this.props; const getClassNames = classNamesFunction(); const classNames = getClassNames(getStyles); diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.ContextualMenu.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.ContextualMenu.Example.tsx index fe610776134a13..31aff85d1f4cdf 100644 --- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.ContextualMenu.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.ContextualMenu.Example.tsx @@ -3,7 +3,7 @@ import { DefaultButton, IButtonProps } from 'office-ui-fabric-react/lib/Button'; export class ButtonContextualMenuExample extends React.Component { public render() { - let { disabled, checked } = this.props; + const { disabled, checked } = this.props; return (
diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Default.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Default.Example.tsx index a9809406fd1430..7e145591eefde6 100644 --- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Default.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Default.Example.tsx @@ -10,7 +10,7 @@ import { Label } from 'office-ui-fabric-react/lib/Label'; export class ButtonDefaultExample extends React.Component { public render() { - let { disabled, checked } = this.props; + const { disabled, checked } = this.props; const getClassNames = classNamesFunction(); const classNames = getClassNames(getStyles); diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Icon.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Icon.Example.tsx index 88fd480f3c5411..74b9d3be7d68ec 100644 --- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Icon.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Icon.Example.tsx @@ -10,7 +10,7 @@ import { Label } from 'office-ui-fabric-react/lib/Label'; export class ButtonIconExample extends React.Component { public render() { - let { disabled, checked } = this.props; + const { disabled, checked } = this.props; const getClassNames = classNamesFunction(); const classNames = getClassNames(getStyles); diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Primary.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Primary.Example.tsx index 23c09a4f712b23..7962b3cd33805c 100644 --- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Primary.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Primary.Example.tsx @@ -10,7 +10,7 @@ import { Label } from 'office-ui-fabric-react/lib/Label'; export class ButtonPrimaryExample extends React.Component { public render() { - let { disabled, checked } = this.props; + const { disabled, checked } = this.props; const getClassNames = classNamesFunction(); const classNames = getClassNames(getStyles); diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.ScreenReader.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.ScreenReader.Example.tsx index 8cbef6dc44719e..b0fc2ef829ce3c 100644 --- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.ScreenReader.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.ScreenReader.Example.tsx @@ -10,7 +10,7 @@ import { Label } from 'office-ui-fabric-react/lib/Label'; export class ButtonScreenReaderExample extends React.Component { public render() { - let { disabled, checked } = this.props; + const { disabled, checked } = this.props; const getClassNames = classNamesFunction(); const classNames = getClassNames(getStyles); diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Split.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Split.Example.tsx index 2c1d498a523b63..36049fc90a03c7 100644 --- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Split.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Split.Example.tsx @@ -16,7 +16,7 @@ const alertClicked = (): void => { export class ButtonSplitExample extends React.Component { public render() { - let { disabled, checked } = this.props; + const { disabled, checked } = this.props; const getClassNames = classNamesFunction(); const classNames = getClassNames(getStyles); @@ -113,7 +113,7 @@ export class ButtonSplitExample extends React.Component { export class ButtonSplitCustomExample extends React.Component { public render() { - let { disabled, checked } = this.props; + const { disabled, checked } = this.props; const customSplitButtonStyles = getCustomSplitButtonStyles(); return ( diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Swap.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Swap.Example.tsx index 2124d506341f07..a48b773f1dd608 100644 --- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Swap.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Swap.Example.tsx @@ -44,12 +44,12 @@ export class ButtonSwapExample extends React.Component { - let dayPickerStrings = { + const dayPickerStrings = { months: [ 'January', 'February', @@ -68,18 +68,18 @@ describe('Calendar', () => { it('can handle invalid starting dates', () => { // Arrange - let defaultDate = new Date('invalid'); + const defaultDate = new Date('invalid'); // Act - let renderedComponent = mount( + const renderedComponent = mount( ); - let today = renderedComponent.find('.ms-DatePicker-day--today'); + const today = renderedComponent.find('.ms-DatePicker-day--today'); expect(+today.text()).toEqual(new Date().getDate()); }); @@ -104,21 +104,21 @@ describe('Calendar', () => { /> ); - let tree = component.toJSON(); + const tree = component.toJSON(); expect(tree).toMatchSnapshot(); }); it('Verify day picker header', () => { - let today = new Date(); - let monthName = dayPickerStrings.months[today.getMonth()]; - let year = today.getFullYear(); - let dayPickerMonth = ReactTestUtils.findRenderedDOMComponentWithClass(renderedComponent, 'ms-DatePicker-monthAndYear'); + const today = new Date(); + const monthName = dayPickerStrings.months[today.getMonth()]; + const year = today.getFullYear(); + const dayPickerMonth = ReactTestUtils.findRenderedDOMComponentWithClass(renderedComponent, 'ms-DatePicker-monthAndYear'); expect(dayPickerMonth).toBeDefined(); expect(dayPickerMonth.textContent).toEqual(monthName + ' ' + year.toString()); }); it('Verify first day of week', () => { - let dayHeaders = ReactTestUtils.scryRenderedDOMComponentsWithClass(renderedComponent, 'ms-DatePicker-weekday'); + const dayHeaders = ReactTestUtils.scryRenderedDOMComponentsWithClass(renderedComponent, 'ms-DatePicker-weekday'); expect(dayHeaders.length).toEqual(7); expect(dayHeaders[0].textContent).toEqual(dayPickerStrings.shortDays[0]); expect(dayHeaders[1].textContent).toEqual(dayPickerStrings.shortDays[1]); @@ -133,7 +133,7 @@ describe('Calendar', () => { // When not passed in selected & navigated dates default to current date // These dates will be ms different, so just compare their day, month, and year // This test will likely fail around midnight. - let today = new Date(); + const today = new Date(); expect(renderedComponent.state.selectedDate).not.toBeNull(); expect(renderedComponent.state.selectedDate!.getDate()).toEqual(today.getDate()); expect(renderedComponent.state.selectedDate!.getMonth()).toEqual(today.getMonth()); @@ -145,7 +145,7 @@ describe('Calendar', () => { }); it('Verify go to today', () => { - let goToToday = ReactTestUtils.findRenderedDOMComponentWithClass(renderedComponent, 'ms-DatePicker-goToday'); + const goToToday = ReactTestUtils.findRenderedDOMComponentWithClass(renderedComponent, 'ms-DatePicker-goToday'); expect(goToToday).toBeDefined(); expect(goToToday.textContent).toEqual(dayPickerStrings.goToToday); }); @@ -158,7 +158,7 @@ describe('Calendar', () => { beforeAll(() => { defaultDate = new Date(2017, 2, 16); - let onSelectDate = (): (date: Date, dateRangeArray: Date[]) => void => { + const onSelectDate = (): (date: Date, dateRangeArray: Date[]) => void => { return (date: Date, dateRangeArray: Date[]): void => { lastSelectedDateRange = dateRangeArray; }; @@ -177,14 +177,14 @@ describe('Calendar', () => { }); it('Verify day picker header', () => { - let monthName = dayPickerStrings.months[defaultDate.getMonth()]; - let dayPickerMonth = ReactTestUtils.findRenderedDOMComponentWithClass(renderedComponent, 'ms-DatePicker-monthAndYear'); + const monthName = dayPickerStrings.months[defaultDate.getMonth()]; + const dayPickerMonth = ReactTestUtils.findRenderedDOMComponentWithClass(renderedComponent, 'ms-DatePicker-monthAndYear'); expect(dayPickerMonth).toBeDefined(); expect(dayPickerMonth.textContent).toEqual(monthName + ' ' + defaultDate.getFullYear().toString()); }); it('Verify first day of week', () => { - let dayHeaders = ReactTestUtils.scryRenderedDOMComponentsWithClass(renderedComponent, 'ms-DatePicker-weekday'); + const dayHeaders = ReactTestUtils.scryRenderedDOMComponentsWithClass(renderedComponent, 'ms-DatePicker-weekday'); expect(dayHeaders.length).toEqual(7); expect(dayHeaders[0].textContent).toEqual(dayPickerStrings.shortDays[2]); expect(dayHeaders[1].textContent).toEqual(dayPickerStrings.shortDays[3]); @@ -201,19 +201,19 @@ describe('Calendar', () => { }); it('Verify month picker seen', () => { - let monthPicker = ReactTestUtils.findRenderedDOMComponentWithClass(renderedComponent, 'ms-DatePicker-monthPicker') as HTMLElement; + const monthPicker = ReactTestUtils.findRenderedDOMComponentWithClass(renderedComponent, 'ms-DatePicker-monthPicker') as HTMLElement; expect(monthPicker).toBeDefined(); expect(monthPicker.style.display).not.toEqual('none'); }); it('Verify month picker header', () => { - let currentYear = ReactTestUtils.findRenderedDOMComponentWithClass(renderedComponent, 'ms-DatePicker-currentYear'); + const currentYear = ReactTestUtils.findRenderedDOMComponentWithClass(renderedComponent, 'ms-DatePicker-currentYear'); expect(currentYear).toBeDefined(); expect(currentYear.textContent).toEqual(defaultDate.getFullYear().toString()); }); it('Verify month picker months', () => { - let months = ReactTestUtils.scryRenderedDOMComponentsWithClass(renderedComponent, 'ms-DatePicker-monthOption'); + const months = ReactTestUtils.scryRenderedDOMComponentsWithClass(renderedComponent, 'ms-DatePicker-monthOption'); expect(months.length).toEqual(12); for (let i = 0; i < 12; i++) { expect(months[i].textContent).toEqual(dayPickerStrings.shortMonths[i]); @@ -221,15 +221,15 @@ describe('Calendar', () => { }); it('Verify go to today', () => { - let goToToday = ReactTestUtils.findRenderedDOMComponentWithClass(renderedComponent, 'ms-DatePicker-goToday'); + const goToToday = ReactTestUtils.findRenderedDOMComponentWithClass(renderedComponent, 'ms-DatePicker-goToday'); expect(goToToday).toBeDefined(); expect(goToToday.textContent).toEqual(dayPickerStrings.goToToday); }); it('Verify navigate to different week in same month', () => { lastSelectedDateRange = null; - let days = ReactTestUtils.scryRenderedDOMComponentsWithClass(renderedComponent, 'ms-DatePicker-day'); - let day = days[8]; // 03/08/2017 + const days = ReactTestUtils.scryRenderedDOMComponentsWithClass(renderedComponent, 'ms-DatePicker-day'); + const day = days[8]; // 03/08/2017 ReactTestUtils.Simulate.click(day); expect(lastSelectedDateRange).not.toBeNull(); expect(lastSelectedDateRange!.length).toEqual(7); @@ -238,9 +238,9 @@ describe('Calendar', () => { it('Verify navigate to day in different month', () => { lastSelectedDateRange = null; - let days = ReactTestUtils.scryRenderedDOMComponentsWithClass(renderedComponent, 'ms-DatePicker-day'); - let day = days[34]; // 04/03/2017 - let firstDate = new Date(2017, 2, 28); + const days = ReactTestUtils.scryRenderedDOMComponentsWithClass(renderedComponent, 'ms-DatePicker-day'); + const day = days[34]; // 04/03/2017 + const firstDate = new Date(2017, 2, 28); ReactTestUtils.Simulate.click(day); expect(lastSelectedDateRange).not.toBeNull(); expect(lastSelectedDateRange!.length).toEqual(7); @@ -291,7 +291,7 @@ describe('Calendar', () => { onSelectDate={ onSelectDate() } />) as Calendar; - let days = ReactTestUtils.scryRenderedDOMComponentsWithClass(renderedComponent, 'ms-DatePicker-day'); + const days = ReactTestUtils.scryRenderedDOMComponentsWithClass(renderedComponent, 'ms-DatePicker-day'); ReactTestUtils.Simulate.click(days[18]); expect(lastSelectedDateRange!.length).toEqual(19); lastSelectedDateRange!.forEach((val, i) => expect(compareDates(val, addDays(minDate, i))).toEqual(true)); diff --git a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx index 5f0f764c592890..18d47b3612e650 100644 --- a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx +++ b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx @@ -15,11 +15,11 @@ const styles: any = stylesImport; const leftArrow: string = 'Up'; const rightArrow: string = 'Down'; -let iconStrings: ICalendarIconStrings = { +const iconStrings: ICalendarIconStrings = { leftNavigation: leftArrow, rightNavigation: rightArrow }; -let defaultWorkWeekDays: DayOfWeek[] = [ +const defaultWorkWeekDays: DayOfWeek[] = [ DayOfWeek.Monday, DayOfWeek.Tuesday, DayOfWeek.Wednesday, @@ -27,7 +27,7 @@ let defaultWorkWeekDays: DayOfWeek[] = [ DayOfWeek.Friday, ]; -let dateTimeFormatterCallbacks: ICalendarFormatDateCallbacks = { +const dateTimeFormatterCallbacks: ICalendarFormatDateCallbacks = { formatMonthDayYear: (date: Date, strings: ICalendarStrings) => (strings.months[date.getMonth()] + ' ' + date.getDate() + ', ' + date.getFullYear()), formatMonthYear: (date: Date, strings: ICalendarStrings) => (strings.months[date.getMonth()] + ' ' + date.getFullYear()), formatDay: (date: Date) => date.getDate().toString(), @@ -82,7 +82,7 @@ export class Calendar extends BaseComponent impl constructor(props: ICalendarProps) { super(props); - let currentDate = props.value && !isNaN(props.value.getTime()) ? props.value : (props.today || new Date()); + const currentDate = props.value && !isNaN(props.value.getTime()) ? props.value : (props.today || new Date()); this.state = { selectedDate: currentDate, @@ -97,11 +97,11 @@ export class Calendar extends BaseComponent impl } public componentWillReceiveProps(nextProps: ICalendarProps) { - let { autoNavigateOnSelection, value, today = new Date() } = nextProps; + const { autoNavigateOnSelection, value, today = new Date() } = nextProps; // Make sure auto-navigation is supported for programmatic changes to selected date, i.e., // if selected date is updated via props, we may need to modify the navigated date - let overrideNavigatedDate = (autoNavigateOnSelection && !compareDates(value!, this.props.value!)); + const overrideNavigatedDate = (autoNavigateOnSelection && !compareDates(value!, this.props.value!)); if (overrideNavigatedDate) { this.setState({ navigatedDate: value @@ -126,12 +126,12 @@ export class Calendar extends BaseComponent impl } public render() { - let rootClass = 'ms-DatePicker'; - let { firstDayOfWeek, dateRangeType, strings, showMonthPickerAsOverlay, autoNavigateOnSelection, showGoToToday, highlightCurrentMonth, navigationIcons, minDate, maxDate } = this.props; - let { selectedDate, navigatedDate, isMonthPickerVisible, isDayPickerVisible } = this.state; - let onHeaderSelect = showMonthPickerAsOverlay ? this._onHeaderSelect : undefined; - let monthPickerOnly = !showMonthPickerAsOverlay && !isDayPickerVisible; - let overlayedWithButton = showMonthPickerAsOverlay && showGoToToday; + const rootClass = 'ms-DatePicker'; + const { firstDayOfWeek, dateRangeType, strings, showMonthPickerAsOverlay, autoNavigateOnSelection, showGoToToday, highlightCurrentMonth, navigationIcons, minDate, maxDate } = this.props; + const { selectedDate, navigatedDate, isMonthPickerVisible, isDayPickerVisible } = this.state; + const onHeaderSelect = showMonthPickerAsOverlay ? this._onHeaderSelect : undefined; + const monthPickerOnly = !showMonthPickerAsOverlay && !isDayPickerVisible; + const overlayedWithButton = showMonthPickerAsOverlay && showGoToToday; return (
@@ -234,7 +234,7 @@ export class Calendar extends BaseComponent impl @autobind private _onSelectDate(date: Date, selectedDateRangeArray?: Date[]) { - let { onSelectDate } = this.props; + const { onSelectDate } = this.props; this.setState({ selectedDate: date @@ -260,9 +260,9 @@ export class Calendar extends BaseComponent impl @autobind private _onGotoToday() { - let { dateRangeType, firstDayOfWeek, today, workWeekDays } = this.props; + const { dateRangeType, firstDayOfWeek, today, workWeekDays } = this.props; - let dates = getDateRangeArray(today!, dateRangeType!, firstDayOfWeek!, workWeekDays!); + const dates = getDateRangeArray(today!, dateRangeType!, firstDayOfWeek!, workWeekDays!); this._onSelectDate(today!, dates); diff --git a/packages/office-ui-fabric-react/src/components/Calendar/CalendarDay.tsx b/packages/office-ui-fabric-react/src/components/Calendar/CalendarDay.tsx index 719346d4bc378b..5515c6acab3117 100644 --- a/packages/office-ui-fabric-react/src/components/Calendar/CalendarDay.tsx +++ b/packages/office-ui-fabric-react/src/components/Calendar/CalendarDay.tsx @@ -100,14 +100,14 @@ export class CalendarDay extends BaseComponent 0) { if (cornersLength === 1) { @@ -337,7 +337,7 @@ export class CalendarDay extends BaseComponent 0) { @@ -460,7 +460,7 @@ export class CalendarDay extends BaseComponent) { - let { onHeaderSelect } = this.props; + const { onHeaderSelect } = this.props; if (onHeaderSelect && (ev.which === KeyCodes.enter || ev.which === KeyCodes.space)) { onHeaderSelect(true); } @@ -485,7 +485,7 @@ export class CalendarDay extends BaseComponent { public render() { - let { navigatedDate, strings, today, highlightCurrentMonth, navigationIcons, dateTimeFormatter, minDate, maxDate } = this.props; - let leftNavigationIcon = navigationIcons.leftNavigation; - let rightNavigationIcon = navigationIcons.rightNavigation; + const { navigatedDate, strings, today, highlightCurrentMonth, navigationIcons, dateTimeFormatter, minDate, maxDate } = this.props; + const leftNavigationIcon = navigationIcons.leftNavigation; + const rightNavigationIcon = navigationIcons.rightNavigation; // determine if previous/next years are in bounds const isPrevYearInBounds = minDate ? compareDatePart(minDate, getYearStart(navigatedDate)) < 0 : true; @@ -167,7 +167,7 @@ export class CalendarMonth extends BaseComponent { @autobind private _onSelectNextYear() { - let { navigatedDate, onNavigateDate } = this.props; + const { navigatedDate, onNavigateDate } = this.props; onNavigateDate(addYears(navigatedDate, 1), false); } @@ -178,7 +178,7 @@ export class CalendarMonth extends BaseComponent { @autobind private _onSelectPrevYear() { - let { navigatedDate, onNavigateDate } = this.props; + const { navigatedDate, onNavigateDate } = this.props; onNavigateDate(addYears(navigatedDate, -1), false); } @@ -189,7 +189,7 @@ export class CalendarMonth extends BaseComponent { @autobind private _onSelectMonth(newMonth: number) { - let { navigatedDate, onNavigateDate, onHeaderSelect } = this.props; + const { navigatedDate, onNavigateDate, onHeaderSelect } = this.props; // If header is clickable the calendars are overlayed, switch back to day picker when month is clicked if (onHeaderSelect) { @@ -200,7 +200,7 @@ export class CalendarMonth extends BaseComponent { @autobind private _onHeaderSelect() { - let { onHeaderSelect } = this.props; + const { onHeaderSelect } = this.props; if (onHeaderSelect) { onHeaderSelect(true); } @@ -208,7 +208,7 @@ export class CalendarMonth extends BaseComponent { @autobind private _onHeaderKeyDown(ev: React.KeyboardEvent) { - let { onHeaderSelect } = this.props; + const { onHeaderSelect } = this.props; if (onHeaderSelect && (ev.which === KeyCodes.enter || ev.which === KeyCodes.space)) { onHeaderSelect(true); } diff --git a/packages/office-ui-fabric-react/src/components/Calendar/examples/Calendar.Inline.Example.tsx b/packages/office-ui-fabric-react/src/components/Calendar/examples/Calendar.Inline.Example.tsx index 9ea7ba10d71d12..2441e519a53c2a 100644 --- a/packages/office-ui-fabric-react/src/components/Calendar/examples/Calendar.Inline.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Calendar/examples/Calendar.Inline.Example.tsx @@ -99,18 +99,18 @@ export class CalendarInlineExample extends React.Component { - let selectedDate = prevState.selectedDate || new Date(); - let dateRangeArray = getDateRangeArray(selectedDate, this.props.dateRangeType, DayOfWeek.Sunday); + const selectedDate = prevState.selectedDate || new Date(); + const dateRangeArray = getDateRangeArray(selectedDate, this.props.dateRangeType, DayOfWeek.Sunday); let subtractFrom = dateRangeArray[0]; let daysToSubtract = dateRangeArray.length; @@ -177,16 +177,16 @@ export class CalendarInlineExample extends React.Component { - let selectedDate = prevState.selectedDate || new Date(); - let dateRangeArray = getDateRangeArray(selectedDate, this.props.dateRangeType, DayOfWeek.Sunday); - let newSelectedDate = addDays(dateRangeArray.pop()!, 1); + const selectedDate = prevState.selectedDate || new Date(); + const dateRangeArray = getDateRangeArray(selectedDate, this.props.dateRangeType, DayOfWeek.Sunday); + const newSelectedDate = addDays(dateRangeArray.pop()!, 1); return prevState.selectedDate = newSelectedDate; }); } diff --git a/packages/office-ui-fabric-react/src/components/Callout/Callout.test.tsx b/packages/office-ui-fabric-react/src/components/Callout/Callout.test.tsx index 623f2f333f7e7d..2618dfb79b7fe2 100644 --- a/packages/office-ui-fabric-react/src/components/Callout/Callout.test.tsx +++ b/packages/office-ui-fabric-react/src/components/Callout/Callout.test.tsx @@ -28,7 +28,7 @@ describe('Callout', () => { Content, { createNodeMock } ); - let tree = component.toJSON(); + const tree = component.toJSON(); expect(tree).toMatchSnapshot(); }); @@ -59,8 +59,8 @@ describe('Callout', () => { }); it('target MouseEvents does not throw exception', () => { - let mouseEvent = document.createEvent('MouseEvent'); - let eventTarget = document.createElement('div'); + const mouseEvent = document.createEvent('MouseEvent'); + const eventTarget = document.createElement('div'); mouseEvent.initMouseEvent('click', false, false, window, 0, 0, 0, 0, 0, false, false, false, false, 1, eventTarget); let threwException: boolean = false; try { @@ -85,7 +85,7 @@ describe('Callout', () => { }); it('target HTMLElements does not throw exception', () => { - let targetElement = document.createElement('div'); + const targetElement = document.createElement('div'); document.body.appendChild(targetElement); let threwException: boolean = false; try { @@ -132,7 +132,7 @@ describe('Callout', () => { it('passes event to onDismiss prop', (done) => { let threwException: boolean = false; let gotEvent: boolean = false; - let onDismiss = (ev?: any) => { + const onDismiss = (ev?: any) => { if (ev) { gotEvent = true; } @@ -140,7 +140,7 @@ describe('Callout', () => { // In order to have eventlisteners that have been added to the window to be called the JSX needs // to be rendered into the real dom rather than the testutil simulated dom. - let root = document.createElement('div'); + const root = document.createElement('div'); document.body.appendChild(root); try { ReactDOM.render( @@ -163,7 +163,7 @@ describe('Callout', () => { } expect(threwException).toEqual(false); - let focusTarget = document.querySelector('#focustarget') as HTMLButtonElement; + const focusTarget = document.querySelector('#focustarget') as HTMLButtonElement; // Move focus setTimeout(() => { diff --git a/packages/office-ui-fabric-react/src/components/Callout/Callout.tsx b/packages/office-ui-fabric-react/src/components/Callout/Callout.tsx index b8c8127d2383d1..07bf90be3eb67b 100644 --- a/packages/office-ui-fabric-react/src/components/Callout/Callout.tsx +++ b/packages/office-ui-fabric-react/src/components/Callout/Callout.tsx @@ -20,7 +20,7 @@ export class Callout extends BaseComponent { } public render() { - let content = ( + const content = ( ); return this.props.doNotLayer ? content : ( diff --git a/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.base.tsx b/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.base.tsx index dc141308bf96db..e9dcc0c3ff02ed 100644 --- a/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.base.tsx +++ b/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.base.tsx @@ -95,8 +95,8 @@ export class CalloutContentBase extends BaseComponent | React.KeyboardEvent) { - let { onDismiss } = this.props; + const { onDismiss } = this.props; if (onDismiss) { onDismiss(ev); @@ -218,8 +220,8 @@ export class CalloutContentBase extends BaseComponent { public render() { - let cmdBarParamsTextAndIcons: any = { items: items, farItems: null }; + const cmdBarParamsTextAndIcons: any = { items: items, farItems: null }; return ( diff --git a/packages/office-ui-fabric-react/src/components/Callout/examples/Callout.Cover.Example.tsx b/packages/office-ui-fabric-react/src/components/Callout/examples/Callout.Cover.Example.tsx index a8e1dad35fcf84..7ab156a067e62d 100644 --- a/packages/office-ui-fabric-react/src/components/Callout/examples/Callout.Cover.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Callout/examples/Callout.Cover.Example.tsx @@ -43,7 +43,7 @@ export class CalloutCoverExample extends React.Component<{}, ICalloutCoverExampl } public render() { - let { isCalloutVisible, directionalHint } = this.state; + const { isCalloutVisible, directionalHint } = this.state; // ms-Callout-smallbeak is used in this directional example to reflect all the positions. Large beak will disable some position to avoid beak over the callout edge. return (
diff --git a/packages/office-ui-fabric-react/src/components/Callout/examples/Callout.Directional.Example.tsx b/packages/office-ui-fabric-react/src/components/Callout/examples/Callout.Directional.Example.tsx index 37d72e82d14131..925e5fd74701d0 100644 --- a/packages/office-ui-fabric-react/src/components/Callout/examples/Callout.Directional.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Callout/examples/Callout.Directional.Example.tsx @@ -49,7 +49,7 @@ export class CalloutDirectionalExample extends React.Component<{}, ICalloutDirec } public render() { - let { isCalloutVisible, isBeakVisible, directionalHint, gapSpace, beakWidth } = this.state; + const { isCalloutVisible, isBeakVisible, directionalHint, gapSpace, beakWidth } = this.state; // ms-Callout-smallbeak is used in this directional example to reflect all the positions. Large beak will disable some position to avoid beak over the callout edge. return (
diff --git a/packages/office-ui-fabric-react/src/components/Callout/examples/Callout.Nested.Example.tsx b/packages/office-ui-fabric-react/src/components/Callout/examples/Callout.Nested.Example.tsx index 9ad3df311e0541..f314cac7c8e3eb 100644 --- a/packages/office-ui-fabric-react/src/components/Callout/examples/Callout.Nested.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Callout/examples/Callout.Nested.Example.tsx @@ -24,7 +24,7 @@ export class CalloutNestedExample extends React.Component diff --git a/packages/office-ui-fabric-react/src/components/Check/Check.tsx b/packages/office-ui-fabric-react/src/components/Check/Check.tsx index 0141ca290999de..0875ec362247a1 100644 --- a/packages/office-ui-fabric-react/src/components/Check/Check.tsx +++ b/packages/office-ui-fabric-react/src/components/Check/Check.tsx @@ -34,7 +34,8 @@ export class Check extends BaseComponent { } public render() { - let { isChecked, checked } = this.props; + let { isChecked } = this.props; + const { checked } = this.props; isChecked = isChecked || checked; diff --git a/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.test.tsx b/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.test.tsx index 6073672f66c56e..a4ad3d37d173d1 100644 --- a/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.test.tsx +++ b/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.test.tsx @@ -10,7 +10,7 @@ describe('Checkbox', () => { label='Standard checkbox' ariaDescribedBy={ 'descriptionID' } />); - let tree = component.toJSON(); + const tree = component.toJSON(); expect(tree).toMatchSnapshot(); }); }); \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Checkbox/examples/Checkbox.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/Checkbox/examples/Checkbox.Basic.Example.tsx index bcf73414b112c8..306611a78ffe3e 100644 --- a/packages/office-ui-fabric-react/src/components/Checkbox/examples/Checkbox.Basic.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Checkbox/examples/Checkbox.Basic.Example.tsx @@ -21,7 +21,7 @@ export class CheckboxBasicExample extends React.Component<{}, ICheckboxBasicExam } public render() { - let { isChecked } = this.state; + const { isChecked } = this.state; return (
diff --git a/packages/office-ui-fabric-react/src/components/Checkbox/examples/Checkbox.ImplementationExamples.tsx b/packages/office-ui-fabric-react/src/components/Checkbox/examples/Checkbox.ImplementationExamples.tsx index 7b853909a62c28..93e339a65b57cd 100644 --- a/packages/office-ui-fabric-react/src/components/Checkbox/examples/Checkbox.ImplementationExamples.tsx +++ b/packages/office-ui-fabric-react/src/components/Checkbox/examples/Checkbox.ImplementationExamples.tsx @@ -27,9 +27,9 @@ export class CheckboxImplementationExamples extends React.Component<{}, ICheckbo } public render() { - let { isChecked } = this.state; + const { isChecked } = this.state; - let styles: ICheckboxStyles = { + const styles: ICheckboxStyles = { root: { marginTop: '10px' } diff --git a/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.test.tsx b/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.test.tsx index e611afd43b23f7..c3c7912172b475 100644 --- a/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.test.tsx +++ b/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.test.tsx @@ -25,7 +25,7 @@ describe('ChoiceGroup', () => { required /> ); - let tree = component.toJSON(); + const tree = component.toJSON(); expect(tree).toMatchSnapshot(); }); @@ -52,8 +52,8 @@ describe('ChoiceGroup', () => { } expect(threwException).toEqual(false); - let renderedDOM = ReactDOM.findDOMNode(choiceGroup as React.ReactInstance); - let choiceOptions = renderedDOM.querySelectorAll(QUERY_SELECTOR); + const renderedDOM = ReactDOM.findDOMNode(choiceGroup as React.ReactInstance); + const choiceOptions = renderedDOM.querySelectorAll(QUERY_SELECTOR); expect((choiceOptions[0] as HTMLInputElement).checked).toEqual(false); expect((choiceOptions[1] as HTMLInputElement).checked).toEqual(false); @@ -101,8 +101,8 @@ describe('ChoiceGroup', () => { } expect(threwException).toEqual(false); - let renderedDOM = ReactDOM.findDOMNode(choiceGroup as React.ReactInstance); - let choiceOptions = renderedDOM.querySelectorAll(QUERY_SELECTOR); + const renderedDOM = ReactDOM.findDOMNode(choiceGroup as React.ReactInstance); + const choiceOptions = renderedDOM.querySelectorAll(QUERY_SELECTOR); expect((choiceOptions[0] as HTMLInputElement).disabled).toEqual(true); expect((choiceOptions[1] as HTMLInputElement).disabled).toEqual(false); @@ -133,8 +133,8 @@ describe('ChoiceGroup', () => { } expect(threwException).toEqual(false); - let renderedDOM = ReactDOM.findDOMNode(choiceGroup as React.ReactInstance); - let choiceOptions = renderedDOM.querySelectorAll(QUERY_SELECTOR); + const renderedDOM = ReactDOM.findDOMNode(choiceGroup as React.ReactInstance); + const choiceOptions = renderedDOM.querySelectorAll(QUERY_SELECTOR); expect((choiceOptions[0] as HTMLInputElement).disabled).toEqual(true); expect((choiceOptions[1] as HTMLInputElement).disabled).toEqual(true); @@ -142,14 +142,14 @@ describe('ChoiceGroup', () => { }); it('can act as an uncontrolled component', () => { - let choiceGroup = ReactTestUtils.renderIntoDocument( + const choiceGroup = ReactTestUtils.renderIntoDocument( ); - let renderedDOM = ReactDOM.findDOMNode(choiceGroup as React.ReactInstance); - let choiceOptions = renderedDOM.querySelectorAll(QUERY_SELECTOR); + const renderedDOM = ReactDOM.findDOMNode(choiceGroup as React.ReactInstance); + const choiceOptions = renderedDOM.querySelectorAll(QUERY_SELECTOR); expect((choiceOptions[0] as HTMLInputElement).checked).toEqual(true); @@ -164,15 +164,15 @@ describe('ChoiceGroup', () => { _selectedItem = item; }; - let choiceGroup = ReactTestUtils.renderIntoDocument( + const choiceGroup = ReactTestUtils.renderIntoDocument( ); - let renderedDOM = ReactDOM.findDOMNode(choiceGroup as React.ReactInstance); - let choiceOptions = renderedDOM.querySelectorAll(QUERY_SELECTOR); + const renderedDOM = ReactDOM.findDOMNode(choiceGroup as React.ReactInstance); + const choiceOptions = renderedDOM.querySelectorAll(QUERY_SELECTOR); expect((choiceOptions[0] as HTMLInputElement).checked).toEqual(true); diff --git a/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.tsx b/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.tsx index fdd6c3975898ee..1d1094e1e1b2a8 100644 --- a/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.tsx +++ b/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.tsx @@ -61,8 +61,8 @@ export class ChoiceGroup extends BaseComponent { - let { + const { onRenderField = this._onRenderField, onRenderLabel = this._onRenderLabel } = option; @@ -152,9 +152,9 @@ export class ChoiceGroup extends BaseComponent 71 || imageSize.height > 71; + const { onRenderLabel } = option; + const imageSize = option.imageSize ? option.imageSize : { width: 32, height: 32 }; + const imageIsLarge: boolean = imageSize.width > 71 || imageSize.height > 71; return (