From 8467a5e1135393874fd75f09025312c2ee09ecde Mon Sep 17 00:00:00 2001 From: Cliff Date: Tue, 24 Apr 2018 17:45:29 -0700 Subject: [PATCH 1/3] Utilize typescript's no_unused_vars rather than tslint's + cleanup --- .vscode/tasks.json | 23 ++- .../office-ui-fabric-react-tslint/tslint.json | 2 +- .../src/components/Callout/CalloutContent.tsx | 4 +- .../src/components/ComboBox/ComboBox.test.tsx | 3 - .../src/components/ComboBox/ComboBox.tsx | 1 - .../src/components/Fabric/Fabric.styles.ts | 5 - .../src/components/Facepile/Facepile.test.tsx | 3 - .../examples/HoverCard.Target.Example.tsx | 3 - .../src/components/Image/Image.test.tsx | 2 - .../examples/OverflowSet.Vertical.Example.tsx | 2 - .../ProgressIndicator.styles.ts | 1 - .../src/components/Rating/Rating.tsx | 3 +- .../ScrollablePane/ScrollablePane.base.tsx | 3 - .../src/components/SearchBox/SearchBox.tsx | 3 +- .../src/components/Spinner/Spinner.tsx | 3 +- .../SwatchColorPicker/ColorPickerGridCell.tsx | 3 +- .../SwatchColorPicker.test.tsx | 3 - .../SwatchColorPicker/SwatchColorPicker.tsx | 3 +- .../ThemeGenerator/ThemeGeneratorPage.tsx | 139 ++++-------------- .../pickers/TagPicker/TagPicker.tsx | 1 - .../src/utilities/grid/Grid.test.tsx | 3 - .../src/utilities/grid/Grid.tsx | 3 +- packages/office-ui-fabric-react/tsconfig.json | 2 +- 23 files changed, 56 insertions(+), 162 deletions(-) diff --git a/.vscode/tasks.json b/.vscode/tasks.json index cb4569a49b2bd3..88e721384038c1 100644 --- a/.vscode/tasks.json +++ b/.vscode/tasks.json @@ -1,13 +1,22 @@ { - "version": "0.1.0", - "command": "gulp", - "isShellCommand": true, + "version": "2.0.0", "tasks": [ { - "taskName": "bundle", - "isBuildCommand": true, - "showOutput": "always", - "isWatching": true + "label": "Typescript (oufr) watch", + "type": "process", + "command": "node", + "args": [ + "./scripts/node_modules/typescript/bin/tsc", + "-p", + "packages/office-ui-fabric-react/tsconfig.json", + "-w", + "--noEmit" + ], + "problemMatcher": "$tsc", + "group": { + "kind": "build", + "isDefault": true + } } ] } \ 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 0300b096b8ab93..555ffd795a4e02 100644 --- a/packages/office-ui-fabric-react-tslint/tslint.json +++ b/packages/office-ui-fabric-react-tslint/tslint.json @@ -145,7 +145,7 @@ "no-trailing-whitespace": true, "no-unnecessary-semicolons": true, "no-unused-expression": false, - "no-unused-variable": true, + "no-unused-variable": false, // defer to typescript's no unused local instead "no-use-before-declare": true, "no-with-statement": true, "no-var-keyword": true, diff --git a/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.tsx b/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.tsx index bab78ae1af389e..ace32b65844106 100644 --- a/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.tsx +++ b/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.tsx @@ -1,5 +1,3 @@ -/* tslint:disable:no-unused-variable */ -import * as React from 'react'; import { styled } from '../../Utilities'; @@ -7,7 +5,7 @@ import { ICalloutProps } from './Callout.types'; import { CalloutContentBase } from './CalloutContent.base'; import { getStyles } from './CalloutContent.styles'; -export const CalloutContent = styled( +export const CalloutContent: (props: ICalloutProps) => JSX.Element = styled( CalloutContentBase, getStyles ); \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.test.tsx b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.test.tsx index 2f7cf431240420..3b8edfd6c72588 100644 --- a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.test.tsx +++ b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.test.tsx @@ -1,7 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -import * as ReactDOM from 'react-dom'; -/* tslint:enable:no-unused-variable */ import * as ReactTestUtils from 'react-dom/test-utils'; import { mount, ReactWrapper } from 'enzyme'; import * as renderer from 'react-test-renderer'; diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx index 977b1261608e93..2b9ee9a83491b6 100644 --- a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx +++ b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx @@ -33,7 +33,6 @@ import { getClassNames, getComboBoxOptionClassNames } from './ComboBox.classNames'; -import { BaseButton, Button } from 'src/index.bundle'; export interface IComboBoxState { diff --git a/packages/office-ui-fabric-react/src/components/Fabric/Fabric.styles.ts b/packages/office-ui-fabric-react/src/components/Fabric/Fabric.styles.ts index 746a7facdcbc9d..4548eda8683526 100644 --- a/packages/office-ui-fabric-react/src/components/Fabric/Fabric.styles.ts +++ b/packages/office-ui-fabric-react/src/components/Fabric/Fabric.styles.ts @@ -1,8 +1,3 @@ - -import { - ITheme, - mergeStyles -} from '../../Styling'; import { IFabricStyleProps, IFabricStyles } from './Fabric.types'; const inheritFont = { fontFamily: 'inherit' }; diff --git a/packages/office-ui-fabric-react/src/components/Facepile/Facepile.test.tsx b/packages/office-ui-fabric-react/src/components/Facepile/Facepile.test.tsx index 3fc6b70cf06a37..5793d9986cfaa4 100644 --- a/packages/office-ui-fabric-react/src/components/Facepile/Facepile.test.tsx +++ b/packages/office-ui-fabric-react/src/components/Facepile/Facepile.test.tsx @@ -1,7 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -import * as ReactDOM from 'react-dom'; -/* tslint:enable:no-unused-variable */ import * as renderer from 'react-test-renderer'; import { mount, shallow } from 'enzyme'; import { setRTL } from '../../Utilities'; diff --git a/packages/office-ui-fabric-react/src/components/HoverCard/examples/HoverCard.Target.Example.tsx b/packages/office-ui-fabric-react/src/components/HoverCard/examples/HoverCard.Target.Example.tsx index 671e238b8d6c98..b77345d6100d55 100644 --- a/packages/office-ui-fabric-react/src/components/HoverCard/examples/HoverCard.Target.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/HoverCard/examples/HoverCard.Target.Example.tsx @@ -1,7 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -import * as ReactDOM from 'react-dom'; -/* tslint:enable:no-unused-variable */ import { BaseComponent } from 'office-ui-fabric-react/lib/Utilities'; import { HoverCard, diff --git a/packages/office-ui-fabric-react/src/components/Image/Image.test.tsx b/packages/office-ui-fabric-react/src/components/Image/Image.test.tsx index ca63b70a8a669d..14f2ea779f394a 100644 --- a/packages/office-ui-fabric-react/src/components/Image/Image.test.tsx +++ b/packages/office-ui-fabric-react/src/components/Image/Image.test.tsx @@ -9,8 +9,6 @@ import { ImageFit } from './Image.types'; /* tslint:disable:no-unused-variable */ const testImage1x1 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQImWP4DwQACfsD/eNV8pwAAAAASUVORK5CYII='; -const testImage1x2 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWP4////fyYGBgYGAB32A/+PRyXoAAAAAElFTkSuQmCC'; -const testImage2x1 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAYAAAD0In+KAAAAEUlEQVQImWP8////fwYGBgYAGfgD/hEzDhoAAAAASUVORK5CYII='; const brokenImage = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgFcSJAAAAC0lEQVQImWP4DwQACfsD/eNV8pwAAAAASUVORK5CYII='; describe('Image', () => { diff --git a/packages/office-ui-fabric-react/src/components/OverflowSet/examples/OverflowSet.Vertical.Example.tsx b/packages/office-ui-fabric-react/src/components/OverflowSet/examples/OverflowSet.Vertical.Example.tsx index 9995e3b259d9ad..0cdee0a8c9607b 100644 --- a/packages/office-ui-fabric-react/src/components/OverflowSet/examples/OverflowSet.Vertical.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/OverflowSet/examples/OverflowSet.Vertical.Example.tsx @@ -7,8 +7,6 @@ import { IOverflowSetItemProps, OverflowSet } from 'office-ui-fabric-react/lib/OverflowSet'; -/* tslint:disable-next-line:no-unused-variable */ -import * as stylesImport from './OverflowSet.Example.scss'; export class OverflowSetVerticalExample extends BaseComponent { diff --git a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.styles.ts b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.styles.ts index 5a326f92ce5a60..e63d5805710c73 100644 --- a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.styles.ts +++ b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.styles.ts @@ -1,4 +1,3 @@ -import { IStyle, keyframes } from '../../Styling'; import { IProgressIndicatorStyleProps, IProgressIndicatorStyles } from './ProgressIndicator.types'; export const getStyles = ( diff --git a/packages/office-ui-fabric-react/src/components/Rating/Rating.tsx b/packages/office-ui-fabric-react/src/components/Rating/Rating.tsx index dec302bd0e0192..3c8055d85307a1 100644 --- a/packages/office-ui-fabric-react/src/components/Rating/Rating.tsx +++ b/packages/office-ui-fabric-react/src/components/Rating/Rating.tsx @@ -1,12 +1,11 @@ import { styled } from '../../Utilities'; -// tslint:disable-next-line:no-unused-variable import { IRatingProps } from './Rating.types'; import { getStyles } from './Rating.styles'; import { RatingBase } from './Rating.base'; -export const Rating = styled( +export const Rating: (props: IRatingProps) => JSX.Element = styled( RatingBase, getStyles ); diff --git a/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.base.tsx b/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.base.tsx index 37985d68907fb7..2c1fcbcc60e9f8 100644 --- a/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.base.tsx +++ b/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.base.tsx @@ -1,7 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -import * as ReactDOM from 'react-dom'; -/* tslint:enable:no-unused-variable */ import * as PropTypes from 'prop-types'; import { BaseComponent, diff --git a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.tsx b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.tsx index 9aa88d92d513e2..7c0b38ff5090ba 100644 --- a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.tsx +++ b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.tsx @@ -1,10 +1,9 @@ import { styled } from '../../Utilities'; import { SearchBoxBase } from './SearchBox.base'; -// tslint:disable-next-line:no-unused-variable import { ISearchBoxProps } from './SearchBox.types'; import { getStyles } from './SearchBox.styles'; -export const SearchBox = styled( +export const SearchBox: (props: ISearchBoxProps) => JSX.Element = styled( SearchBoxBase, getStyles ); diff --git a/packages/office-ui-fabric-react/src/components/Spinner/Spinner.tsx b/packages/office-ui-fabric-react/src/components/Spinner/Spinner.tsx index 80d4941bb9860f..b4070a4dc7be09 100644 --- a/packages/office-ui-fabric-react/src/components/Spinner/Spinner.tsx +++ b/packages/office-ui-fabric-react/src/components/Spinner/Spinner.tsx @@ -1,10 +1,9 @@ import { styled } from '../../Utilities'; import { SpinnerBase } from './Spinner.base'; import { getStyles } from './Spinner.styles'; -// tslint:disable-next-line:no-unused-variable import { ISpinnerProps } from './Spinner.types'; -export const Spinner = styled( +export const Spinner: (props: ISpinnerProps) => JSX.Element = styled( SpinnerBase, getStyles ); diff --git a/packages/office-ui-fabric-react/src/components/SwatchColorPicker/ColorPickerGridCell.tsx b/packages/office-ui-fabric-react/src/components/SwatchColorPicker/ColorPickerGridCell.tsx index 6aede2a65e56cf..78e87264ac498b 100644 --- a/packages/office-ui-fabric-react/src/components/SwatchColorPicker/ColorPickerGridCell.tsx +++ b/packages/office-ui-fabric-react/src/components/SwatchColorPicker/ColorPickerGridCell.tsx @@ -2,11 +2,10 @@ import { styled } from '../../Utilities'; import { ColorPickerGridCellBase } from './ColorPickerGridCell.base'; -// tslint:disable-next-line:no-unused-variable import { IColorPickerGridCellProps } from './ColorPickerGridCell.types'; import { getStyles } from './ColorPickerGridCell.styles'; -export const ColorPickerGridCell = styled( +export const ColorPickerGridCell: (props: IColorPickerGridCellProps) => JSX.Element = styled( ColorPickerGridCellBase, getStyles ); \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/SwatchColorPicker/SwatchColorPicker.test.tsx b/packages/office-ui-fabric-react/src/components/SwatchColorPicker/SwatchColorPicker.test.tsx index c53a847113d198..89cc66b8b738e3 100644 --- a/packages/office-ui-fabric-react/src/components/SwatchColorPicker/SwatchColorPicker.test.tsx +++ b/packages/office-ui-fabric-react/src/components/SwatchColorPicker/SwatchColorPicker.test.tsx @@ -1,7 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -import * as ReactDOM from 'react-dom'; -/* tslint:enable:no-unused-variable */ import * as renderer from 'react-test-renderer'; import { mount } from 'enzyme'; import { SwatchColorPickerBase } from './SwatchColorPicker.base'; diff --git a/packages/office-ui-fabric-react/src/components/SwatchColorPicker/SwatchColorPicker.tsx b/packages/office-ui-fabric-react/src/components/SwatchColorPicker/SwatchColorPicker.tsx index ac4c76b3f53482..ba1bf08029b969 100644 --- a/packages/office-ui-fabric-react/src/components/SwatchColorPicker/SwatchColorPicker.tsx +++ b/packages/office-ui-fabric-react/src/components/SwatchColorPicker/SwatchColorPicker.tsx @@ -1,10 +1,9 @@ import { styled } from '../../Utilities'; import { SwatchColorPickerBase } from './SwatchColorPicker.base'; -// tslint:disable-next-line:no-unused-variable import { ISwatchColorPickerProps } from './SwatchColorPicker.types'; import { getStyles } from './SwatchColorPicker.styles'; -export const SwatchColorPicker = styled( +export const SwatchColorPicker: (props: ISwatchColorPickerProps) => JSX.Element = styled( SwatchColorPickerBase, getStyles ); diff --git a/packages/office-ui-fabric-react/src/components/ThemeGenerator/ThemeGeneratorPage.tsx b/packages/office-ui-fabric-react/src/components/ThemeGenerator/ThemeGeneratorPage.tsx index 3bd3d4c041cbc6..aa97a9e93464eb 100644 --- a/packages/office-ui-fabric-react/src/components/ThemeGenerator/ThemeGeneratorPage.tsx +++ b/packages/office-ui-fabric-react/src/components/ThemeGenerator/ThemeGeneratorPage.tsx @@ -8,9 +8,7 @@ import { import { IColor, getContrastRatio, - updateA, isDark, - getColorFromString } from 'office-ui-fabric-react/lib/utilities/color/index'; import { @@ -38,12 +36,8 @@ export interface IThemeGeneratorPageState { colorPickerVisible: boolean; } -const BackgroundImageUriKey = 'backgroundImageUri'; -const BackgroundOverlayKey = 'backgroundOverlay'; - export class ThemeGeneratorPage extends BaseComponent<{}, IThemeGeneratorPageState> { private _semanticSlotColorChangeTimeout: number; - private _imgUrl: string; constructor(props: {}) { super(props); @@ -121,6 +115,37 @@ export class ThemeGeneratorPage extends BaseComponent<{}, IThemeGeneratorPageSta * and generate a theme based off of those. * Since this API requires a personal subscription key, you'll have to enlist and insert your subscription * key in _makeThemeFromImg() below. Then, just uncomment this section. */} + {/* + private _imgUrl: string; + const BackgroundImageUriKey = 'backgroundImageUri'; + const BackgroundOverlayKey = 'backgroundOverlay'; + + private _makeThemeFromImg = (): void => { + this._imgUrl = (document.getElementById('imageUrl') as HTMLInputElement).value; + (document.getElementById('imagePreview') as HTMLImageElement).src = this._imgUrl; + + if (this._imgUrl) { + const xhr = new XMLHttpRequest(); + xhr.addEventListener('load', this._cognitiveVisionCallback.bind(this)); + // you may need to change the URL here + xhr.open('POST', 'https://westus.api.cognitive.microsoft.com/vision/v1.0/analyze?visualFeatures=Description%2CColor&details=&language=en'); + xhr.setRequestHeader('Content-Type', 'application/json'); + alert('You forgot to set the subscription key!'); + xhr.setRequestHeader('Ocp-Apim-Subscription-Key', 'YourSubscriptionKeyHere'); // put your subscription key here + xhr.send('{ "url": "' + this._imgUrl + '" }'); + } else { + // remove related properties from theme + const { themeRules } = this.state; + if (themeRules.hasOwnProperty(BackgroundImageUriKey)) { + delete themeRules[BackgroundImageUriKey]; + } + if (themeRules.hasOwnProperty(BackgroundOverlayKey)) { + delete themeRules[BackgroundOverlayKey]; + } + this.setState({ themeRules: themeRules }, this._makeNewTheme); + } + } + */} {/*}
URL to image: 
@@ -234,108 +259,6 @@ export class ThemeGeneratorPage extends BaseComponent<{}, IThemeGeneratorPageSta ); } - /* tslint:disable:no-unused-variable */ - private _makeThemeFromImg = (): void => { - /* tslint:enable:no-unused-variable */ - this._imgUrl = (document.getElementById('imageUrl') as HTMLInputElement).value; - (document.getElementById('imagePreview') as HTMLImageElement).src = this._imgUrl; - - if (this._imgUrl) { - const xhr = new XMLHttpRequest(); - xhr.addEventListener('load', this._cognitiveVisionCallback.bind(this)); - // you may need to change the URL here - xhr.open('POST', 'https://westus.api.cognitive.microsoft.com/vision/v1.0/analyze?visualFeatures=Description%2CColor&details=&language=en'); - xhr.setRequestHeader('Content-Type', 'application/json'); - alert('You forgot to set the subscription key!'); - xhr.setRequestHeader('Ocp-Apim-Subscription-Key', 'YourSubscriptionKeyHere'); // put your subscription key here - xhr.send('{ "url": "' + this._imgUrl + '" }'); - } else { - // remove related properties from theme - const { themeRules } = this.state; - if (themeRules.hasOwnProperty(BackgroundImageUriKey)) { - delete themeRules[BackgroundImageUriKey]; - } - if (themeRules.hasOwnProperty(BackgroundOverlayKey)) { - delete themeRules[BackgroundOverlayKey]; - } - this.setState({ themeRules: themeRules }, this._makeNewTheme); - } - } - - private _cognitiveVisionCallback = (e: any): void => { - const xhr = e.target; - if (xhr.status === 200) { - const response = JSON.parse(xhr.response); - - document.getElementById('imageDescription')!.innerHTML = response.description.captions[0].text; - - /* API returns: - response.color.accentColor - response.color.dominantColorBackground - response.color.dominantColorForeground */ - - // converts a returned color from a word into a hex value conforming to our palette - const getHexFromColor = (color: string, isBg: boolean) => { - // todo: could use more logic based on isInverted and isBg - switch (color.toLowerCase()) { - case 'black': return '#1f1f1f'; - case 'blue': return '#0078d4'; - case 'brown': return '#754d12'; - case 'gray': - case 'grey': return isBg ? '#444' : '#ccc'; - case 'green': return '#107c10'; - case 'orange': return '#ff8c00'; - case 'pink': return '#e3008c'; - case 'purple': return '#5c2d91'; - case 'red': return '#e81123'; - case 'teal': return '#008272'; - case 'white': return '#fff'; - case 'yellow': return '#fff100'; - } - alert('Error: Unexpected color passed to getHexFromColor(): ' + color); - return '#fff'; - }; - - const { themeRules } = this.state; - const bgColor = getHexFromColor(response.color.dominantColorBackground, true); - const bgColorIsDark = isDark(getColorFromString(bgColor)!); - ThemeGenerator.setSlot( - themeRules[BaseSlots[BaseSlots.backgroundColor]], - bgColor, - bgColorIsDark, - true, - true); - ThemeGenerator.setSlot( - themeRules[BaseSlots[BaseSlots.primaryColor]], - '#' + response.color.accentColor, - bgColorIsDark, - true, - true); - ThemeGenerator.setSlot( - themeRules[BaseSlots[BaseSlots.foregroundColor]], - getHexFromColor(response.color.dominantColorForeground, false), - bgColorIsDark, - true, - true); - - themeRules[BackgroundImageUriKey] = { - name: BackgroundImageUriKey, - value: 'url(\'' + this._imgUrl + '\')', - dependentRules: [] - }; - themeRules[BackgroundOverlayKey] = { - name: BackgroundOverlayKey, - color: updateA((themeRules[BaseSlots[BaseSlots.backgroundColor]]).color!, 50), - dependentRules: [] - }; - - this.setState({ themeRules: themeRules }, this._makeNewTheme); - - } else { - alert('Error ' + xhr.status + ': ' + xhr.statusText); - } - } - private _colorPickerOnDismiss = (): void => { this.setState({ colorPickerVisible: false }); } diff --git a/packages/office-ui-fabric-react/src/components/pickers/TagPicker/TagPicker.tsx b/packages/office-ui-fabric-react/src/components/pickers/TagPicker/TagPicker.tsx index 6dfa5429b48210..8edd8e8c2641dd 100644 --- a/packages/office-ui-fabric-react/src/components/pickers/TagPicker/TagPicker.tsx +++ b/packages/office-ui-fabric-react/src/components/pickers/TagPicker/TagPicker.tsx @@ -1,7 +1,6 @@ /* tslint:disable */ import * as React from 'react'; import { - BaseComponent, css } from '../../../Utilities'; /* tslint:enable */ diff --git a/packages/office-ui-fabric-react/src/utilities/grid/Grid.test.tsx b/packages/office-ui-fabric-react/src/utilities/grid/Grid.test.tsx index feb7945da8ddd1..019a57e140a1b2 100644 --- a/packages/office-ui-fabric-react/src/utilities/grid/Grid.test.tsx +++ b/packages/office-ui-fabric-react/src/utilities/grid/Grid.test.tsx @@ -1,7 +1,4 @@ -/* tslint:disable:no-unused-variable */ import * as React from 'react'; -import * as ReactDOM from 'react-dom'; -/* tslint:enable:no-unused-variable */ import { GridBase } from './Grid.base'; import { getStyles } from './Grid.styles'; import { DefaultButton } from '../../Button'; diff --git a/packages/office-ui-fabric-react/src/utilities/grid/Grid.tsx b/packages/office-ui-fabric-react/src/utilities/grid/Grid.tsx index 335f88b11d05da..423306c67653b1 100644 --- a/packages/office-ui-fabric-react/src/utilities/grid/Grid.tsx +++ b/packages/office-ui-fabric-react/src/utilities/grid/Grid.tsx @@ -2,11 +2,10 @@ import { styled } from '../../Utilities'; import { GridBase } from './Grid.base'; -// tslint:disable-next-line:no-unused-variable import { IGridProps } from './Grid.types'; import { getStyles } from './Grid.styles'; -export const Grid = styled( +export const Grid: (props: IGridProps) => JSX.Element = styled( GridBase, getStyles ); \ No newline at end of file diff --git a/packages/office-ui-fabric-react/tsconfig.json b/packages/office-ui-fabric-react/tsconfig.json index 4c61f9a2ea41d3..bb02fdf16f3a30 100644 --- a/packages/office-ui-fabric-react/tsconfig.json +++ b/packages/office-ui-fabric-react/tsconfig.json @@ -9,7 +9,7 @@ "sourceMap": true, "experimentalDecorators": true, "importHelpers": true, - "noUnusedLocals": false, + "noUnusedLocals": true, "forceConsistentCasingInFileNames": true, "strictNullChecks": true, "noImplicitAny": true, From 1391fd57b069e7a1ea55d97e4456fe93f70f3526 Mon Sep 17 00:00:00 2001 From: Cliff Date: Tue, 24 Apr 2018 17:46:06 -0700 Subject: [PATCH 2/3] Change file --- .../no_unused_vars_part_of_ts_2018-04-25-00-45.json | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 common/changes/office-ui-fabric-react/no_unused_vars_part_of_ts_2018-04-25-00-45.json diff --git a/common/changes/office-ui-fabric-react/no_unused_vars_part_of_ts_2018-04-25-00-45.json b/common/changes/office-ui-fabric-react/no_unused_vars_part_of_ts_2018-04-25-00-45.json new file mode 100644 index 00000000000000..233a70992be0b8 --- /dev/null +++ b/common/changes/office-ui-fabric-react/no_unused_vars_part_of_ts_2018-04-25-00-45.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "comment": "", + "packageName": "office-ui-fabric-react", + "type": "none" + } + ], + "packageName": "office-ui-fabric-react", + "email": "cliff.koh@microsoft.com" +} \ No newline at end of file From b3b292e4309ac319f3ab6c8be32935b73687f92e Mon Sep 17 00:00:00 2001 From: Cliff Date: Wed, 25 Apr 2018 12:21:19 -0700 Subject: [PATCH 3/3] Change the way the "demo" code is preserved --- .../ThemeGenerator/ThemeGeneratorPage.tsx | 34 ++----------------- 1 file changed, 2 insertions(+), 32 deletions(-) diff --git a/packages/office-ui-fabric-react/src/components/ThemeGenerator/ThemeGeneratorPage.tsx b/packages/office-ui-fabric-react/src/components/ThemeGenerator/ThemeGeneratorPage.tsx index aa97a9e93464eb..1f59502bf88b2f 100644 --- a/packages/office-ui-fabric-react/src/components/ThemeGenerator/ThemeGeneratorPage.tsx +++ b/packages/office-ui-fabric-react/src/components/ThemeGenerator/ThemeGeneratorPage.tsx @@ -114,38 +114,8 @@ export class ThemeGeneratorPage extends BaseComponent<{}, IThemeGeneratorPageSta * We use that API to identify the most prominent background and foreground colors, and the accent color, * and generate a theme based off of those. * Since this API requires a personal subscription key, you'll have to enlist and insert your subscription - * key in _makeThemeFromImg() below. Then, just uncomment this section. */} - {/* - private _imgUrl: string; - const BackgroundImageUriKey = 'backgroundImageUri'; - const BackgroundOverlayKey = 'backgroundOverlay'; - - private _makeThemeFromImg = (): void => { - this._imgUrl = (document.getElementById('imageUrl') as HTMLInputElement).value; - (document.getElementById('imagePreview') as HTMLImageElement).src = this._imgUrl; - - if (this._imgUrl) { - const xhr = new XMLHttpRequest(); - xhr.addEventListener('load', this._cognitiveVisionCallback.bind(this)); - // you may need to change the URL here - xhr.open('POST', 'https://westus.api.cognitive.microsoft.com/vision/v1.0/analyze?visualFeatures=Description%2CColor&details=&language=en'); - xhr.setRequestHeader('Content-Type', 'application/json'); - alert('You forgot to set the subscription key!'); - xhr.setRequestHeader('Ocp-Apim-Subscription-Key', 'YourSubscriptionKeyHere'); // put your subscription key here - xhr.send('{ "url": "' + this._imgUrl + '" }'); - } else { - // remove related properties from theme - const { themeRules } = this.state; - if (themeRules.hasOwnProperty(BackgroundImageUriKey)) { - delete themeRules[BackgroundImageUriKey]; - } - if (themeRules.hasOwnProperty(BackgroundOverlayKey)) { - delete themeRules[BackgroundOverlayKey]; - } - this.setState({ themeRules: themeRules }, this._makeNewTheme); - } - } - */} + * key in _makeThemeFromImg() @ https://raw.githubusercontent.com/cliffkoh/office-ui-fabric-react/9c95e9b92f8caa1fe5ffb9da769ce0921a5272ed/packages/office-ui-fabric-react/src/components/ThemeGenerator/ThemeGeneratorPage.tsx + * Then, just uncomment this section. */} {/*}
URL to image: