Skip to content

Commit 3546119

Browse files
xnkevinnguyenxnkevinnguyen
authored
Merge pull request microsoft#325 from microsoft/users/t-xunguy/typescript
Upgrade to latest version of Typescript
2 parents 4840ad6 + 72bfc75 commit 3546119

11 files changed

Lines changed: 163 additions & 205 deletions

File tree

‎package-lock.json‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -149,7 +149,7 @@
149149
"type": "boolean",
150150
"default": false,
151151
"description": "%deviceSimulatorExpressExtension.configuration.properties.previewMode%",
152-
"scope": "resource"
152+
"scope": "resource"
153153
}
154154
}
155155
},
@@ -286,7 +286,7 @@
286286
"tslint-microsoft-contrib": "^6.1.0",
287287
"tslint-react": "^3.6.0",
288288
"tslint-react-hooks": "^2.0.0",
289-
"typescript": "^3.3.1",
289+
"typescript": "^3.8.3",
290290
"typescript-react-intl": "^0.4.0",
291291
"version-from-git": "^1.1.1",
292292
"vsce": "^1.47.0",

‎src/extension.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -599,7 +599,7 @@ export async function activate(context: vscode.ExtensionContext) {
599599
// base_64 strings on UNIX systems.
600600

601601
// added any incomplete data to beginning
602-
let processedData = pythonProcessDataBuffer
602+
const processedData = pythonProcessDataBuffer
603603
.join("")
604604
.concat(dataFromTheProcess);
605605
pythonProcessDataBuffer = [];

‎src/view/components/clue/ClueImage.tsx‎

Lines changed: 23 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import { ClueSvg, IRefObject } from "./Clue_svg";
1010
interface EventTriggers {
1111
onMouseUp: (event: Event, buttonKey: string) => void;
1212
onMouseDown: (event: Event, buttonKey: string) => void;
13-
onMouseLeave: (event: Event, buttonKey: string) => void;
1413
onKeyEvent: (event: KeyboardEvent, active: boolean, key: string) => void;
1514
}
1615
interface IProps {
@@ -42,15 +41,13 @@ export class ClueImage extends React.Component<IProps, {}> {
4241
}
4342
}
4443
componentDidUpdate() {
45-
if (this.svgRef.current) {
46-
if (this.context === VIEW_STATE.PAUSE) {
47-
disableAllButtons(this.svgRef.current.getButtons());
48-
} else if (this.context === VIEW_STATE.RUNNING) {
49-
setupAllButtons(
50-
this.props.eventTriggers,
51-
this.svgRef.current.getButtons()
52-
);
53-
}
44+
if (this.context === VIEW_STATE.PAUSE && this.svgRef.current) {
45+
disableAllButtons(this.svgRef.current.getButtons());
46+
} else if (this.context === VIEW_STATE.RUNNING && this.svgRef.current) {
47+
setupAllButtons(
48+
this.props.eventTriggers,
49+
this.svgRef.current.getButtons()
50+
);
5451
}
5552
}
5653
componentWillUnmount() {
@@ -89,24 +86,22 @@ export class ClueImage extends React.Component<IProps, {}> {
8986
);
9087
}
9188
public updateButtonAttributes(key: BUTTONS_KEYS, isActive: boolean) {
92-
if (this.svgRef.current) {
93-
const button = this.svgRef.current.getButtons()[key].current;
94-
if (button) {
95-
button.focus();
96-
if (isActive) {
97-
button.children[0].setAttribute(
98-
"class",
99-
BUTTON_STYLING_CLASSES.KEYPRESSED
100-
);
101-
} else {
102-
button.children[0].setAttribute(
103-
"class",
104-
BUTTON_STYLING_CLASSES.DEFAULT
105-
);
106-
}
107-
button.setAttribute("pressed", `${isActive}`);
108-
button.setAttribute("aria-pressed", `${isActive}`);
89+
const button = this.svgRef.current?.getButtons()[key].current;
90+
if (button) {
91+
button.focus();
92+
if (isActive) {
93+
button.children[0].setAttribute(
94+
"class",
95+
BUTTON_STYLING_CLASSES.KEYPRESSED
96+
);
97+
} else {
98+
button.children[0].setAttribute(
99+
"class",
100+
BUTTON_STYLING_CLASSES.DEFAULT
101+
);
109102
}
103+
button.setAttribute("pressed", `${isActive}`);
104+
button.setAttribute("aria-pressed", `${isActive}`);
110105
}
111106
}
112107
}
@@ -125,9 +120,7 @@ const setupButton = (
125120
buttonElement.onmouseup = e => {
126121
eventTriggers.onMouseUp(e, key);
127122
};
128-
buttonElement.onmouseleave = e => {
129-
eventTriggers.onMouseLeave(e, key);
130-
};
123+
131124
buttonElement.onkeydown = e => {
132125
// ensure that the keydown is enter,
133126
// or else it may register shortcuts twice
@@ -155,7 +148,6 @@ const disableAllButtons = (buttonRefs: IRefObject) => {
155148
// to implement
156149
ref.current.onmousedown = null;
157150
ref.current.onmouseup = null;
158-
ref.current.onmouseleave = null;
159151
ref.current.onkeydown = null;
160152
ref.current.onkeyup = null;
161153
ref.current.setAttribute("class", BUTTON_CLASSNAME.DEACTIVATED);

‎src/view/components/clue/ClueSimulator.tsx‎

Lines changed: 32 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,14 @@ import {
77
VIEW_STATE,
88
WEBVIEW_MESSAGES,
99
} from "../../constants";
10+
import { ViewStateContext } from "../../context";
11+
import "../../styles/Simulator.css";
1012
import "../../styles/Simulator.css";
1113
import PlayLogo from "../../svgs/play_svg";
1214
import StopLogo from "../../svgs/stop_svg";
1315
import { sendMessage } from "../../utils/MessageUtils";
1416
import ActionBar from "../simulator/ActionBar";
1517
import { BUTTONS_KEYS, ClueImage } from "./ClueImage";
16-
import "../../styles/Simulator.css";
17-
import { ViewStateContext } from "../../context";
1818

1919
export const DEFAULT_CLUE_STATE: IClueState = {
2020
buttons: { button_a: false, button_b: false },
@@ -128,7 +128,6 @@ export class ClueSimulator extends React.Component<any, IState> {
128128
eventTriggers={{
129129
onMouseDown: this.onMouseDown,
130130
onMouseUp: this.onMouseUp,
131-
onMouseLeave: this.onMouseLeave,
132131
onKeyEvent: this.onKeyEvent,
133132
}}
134133
displayMessage={this.state.clue.displayMessage}
@@ -194,76 +193,67 @@ export class ClueSimulator extends React.Component<any, IState> {
194193
},
195194
});
196195
};
196+
197197
protected onMouseUp = (event: Event, key: string) => {
198198
event.preventDefault();
199199
this.handleButtonClick(key, false);
200200
};
201+
201202
protected onMouseDown = (event: Event, key: string) => {
202203
event.preventDefault();
203204
this.handleButtonClick(key, true);
204205
};
205-
protected onMouseLeave = (event: Event, key: string) => {
206-
event.preventDefault();
207-
console.log(`To implement onMouseLeave ${key}`);
208-
};
206+
209207
protected onKeyEvent(event: KeyboardEvent, active: boolean, key: string) {
210208
event.stopPropagation();
211209
if (
212210
[event.code, event.key].includes(CONSTANTS.KEYBOARD_KEYS.ENTER) &&
213211
this.context === VIEW_STATE.RUNNING
214212
) {
215213
this.handleButtonClick(key, active);
216-
if (this.imageRef.current) {
217-
if (key === BUTTONS_KEYS.BTN_A) {
218-
this.imageRef.current.updateButtonAttributes(
219-
BUTTONS_KEYS.BTN_A,
220-
active
221-
);
222-
} else if (key === BUTTONS_KEYS.BTN_B) {
223-
this.imageRef.current.updateButtonAttributes(
224-
BUTTONS_KEYS.BTN_B,
225-
active
226-
);
227-
} else if (key === BUTTONS_KEYS.BTN_AB) {
228-
this.imageRef.current.updateButtonAttributes(
229-
BUTTONS_KEYS.BTN_AB,
230-
active
231-
);
232-
}
214+
if (key === BUTTONS_KEYS.BTN_A) {
215+
this.imageRef.current?.updateButtonAttributes(
216+
BUTTONS_KEYS.BTN_A,
217+
active
218+
);
219+
} else if (key === BUTTONS_KEYS.BTN_B) {
220+
this.imageRef.current?.updateButtonAttributes(
221+
BUTTONS_KEYS.BTN_B,
222+
active
223+
);
224+
} else if (key === BUTTONS_KEYS.BTN_AB) {
225+
this.imageRef.current?.updateButtonAttributes(
226+
BUTTONS_KEYS.BTN_AB,
227+
active
228+
);
233229
}
234230
} else if (
235231
[event.code, event.key].includes(CONSTANTS.KEYBOARD_KEYS.A) &&
236232
this.context === VIEW_STATE.RUNNING
237233
) {
238234
this.handleButtonClick(BUTTONS_KEYS.BTN_A, active);
239-
if (this.imageRef.current) {
240-
this.imageRef.current.updateButtonAttributes(
241-
BUTTONS_KEYS.BTN_A,
242-
active
243-
);
244-
}
235+
this.imageRef.current?.updateButtonAttributes(
236+
BUTTONS_KEYS.BTN_A,
237+
active
238+
);
245239
} else if (
246240
[event.code, event.key].includes(CONSTANTS.KEYBOARD_KEYS.B) &&
247241
this.context === VIEW_STATE.RUNNING
248242
) {
249243
this.handleButtonClick(BUTTONS_KEYS.BTN_B, active);
250-
if (this.imageRef.current) {
251-
this.imageRef.current.updateButtonAttributes(
252-
BUTTONS_KEYS.BTN_B,
253-
active
254-
);
255-
}
244+
this.imageRef.current?.updateButtonAttributes(
245+
BUTTONS_KEYS.BTN_B,
246+
active
247+
);
256248
} else if (
257249
[event.code, event.key].includes(CONSTANTS.KEYBOARD_KEYS.C) &&
258250
this.context === VIEW_STATE.RUNNING
259251
) {
260252
this.handleButtonClick(BUTTONS_KEYS.BTN_AB, active);
261-
if (this.imageRef.current) {
262-
this.imageRef.current.updateButtonAttributes(
263-
BUTTONS_KEYS.BTN_AB,
264-
active
265-
);
266-
}
253+
this.imageRef.current?.updateButtonAttributes(
254+
BUTTONS_KEYS.BTN_AB,
255+
active
256+
);
267257
} else if (event.key === CONSTANTS.KEYBOARD_KEYS.CAPITAL_F) {
268258
this.togglePlayClick();
269259
} else if (event.key === CONSTANTS.KEYBOARD_KEYS.CAPITAL_R) {

‎src/view/components/clue/Clue_svg.tsx‎

Lines changed: 33 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22
// Licensed under the MIT license.
33

44
import * as React from "react";
5+
import { CLUE_LEDS_COLORS, CONSTANTS } from "../../constants";
56
import "../../styles/SimulatorSvg.css";
6-
import { DEFAULT_CLUE_STATE } from "./ClueSimulator";
7-
import { CONSTANTS, CLUE_LEDS_COLORS } from "../../constants";
87
import svg from "../cpx/Svg_utils";
8+
import { DEFAULT_CLUE_STATE } from "./ClueSimulator";
99
export interface IRefObject {
1010
[key: string]: React.RefObject<SVGRectElement>;
1111
}
@@ -1124,8 +1124,8 @@ export class ClueSvg extends React.Component<IProps, {}> {
11241124
}
11251125

11261126
private updateDisplay() {
1127-
if (this.displayRef.current && this.props.displayImage) {
1128-
this.displayRef.current.setAttribute(
1127+
if (this.props.displayImage) {
1128+
this.displayRef.current?.setAttribute(
11291129
"href",
11301130
`data:image/png;base64,${this.props.displayImage}`
11311131
);
@@ -1140,52 +1140,45 @@ export class ClueSvg extends React.Component<IProps, {}> {
11401140
(255 - neopixel[1]) * CONSTANTS.LED_TINT_FACTOR},${neopixel[2] +
11411141
(255 - neopixel[2]) * CONSTANTS.LED_TINT_FACTOR})`;
11421142

1143-
if (this.ledsRefs.neopixel.current) {
1144-
this.ledsRefs.neopixel.current.setAttribute("fill", rgbColor);
1145-
}
1146-
if (this.gradientRefs.neopixel.current) {
1147-
if (neopixel === DEFAULT_CLUE_STATE.leds.neopixel) {
1148-
this.gradientRefs.neopixel.current.setAttribute(
1149-
"stop-opacity",
1150-
"0"
1151-
);
1152-
} else {
1153-
this.gradientRefs.neopixel.current.setAttribute(
1154-
"stop-opacity",
1155-
"1"
1156-
);
1157-
}
1158-
this.gradientRefs.neopixel.current.setAttribute(
1159-
"stop-color",
1160-
rgbColor
1143+
this.ledsRefs.neopixel.current?.setAttribute("fill", rgbColor);
1144+
1145+
if (neopixel === DEFAULT_CLUE_STATE.leds.neopixel) {
1146+
this.gradientRefs.neopixel.current?.setAttribute(
1147+
"stop-opacity",
1148+
"0"
1149+
);
1150+
} else {
1151+
this.gradientRefs.neopixel.current?.setAttribute(
1152+
"stop-opacity",
1153+
"1"
11611154
);
11621155
}
1156+
this.gradientRefs.neopixel.current?.setAttribute(
1157+
"stop-color",
1158+
rgbColor
1159+
);
11631160
}
11641161
private updateLeds() {
11651162
// update white led
11661163
const { isWhiteLedOn, isRedLedOn } = this.props.leds;
11671164

11681165
this.ledsRefs.whiteLeds.map(
11691166
(ledRef: React.RefObject<SVGRectElement>) => {
1170-
if (ledRef.current && this.gradientRefs.whiteLed.current) {
1171-
svg.setLed(
1172-
isWhiteLedOn,
1173-
CLUE_LEDS_COLORS.WHITE_LEDS_OFF,
1174-
CLUE_LEDS_COLORS.WHITE_LEDS_ON,
1175-
ledRef.current,
1176-
this.gradientRefs.whiteLed.current
1177-
);
1178-
}
1167+
svg.setLed(
1168+
isWhiteLedOn,
1169+
CLUE_LEDS_COLORS.WHITE_LEDS_OFF,
1170+
CLUE_LEDS_COLORS.WHITE_LEDS_ON,
1171+
ledRef.current,
1172+
this.gradientRefs.whiteLed.current
1173+
);
11791174
}
11801175
);
1181-
if (this.ledsRefs.redLed.current && this.gradientRefs.redLed.current) {
1182-
svg.setLed(
1183-
isRedLedOn,
1184-
CLUE_LEDS_COLORS.RED_LED_OFF,
1185-
CLUE_LEDS_COLORS.RED_LED_ON,
1186-
this.ledsRefs.redLed.current,
1187-
this.gradientRefs.redLed.current
1188-
);
1189-
}
1176+
svg.setLed(
1177+
isRedLedOn,
1178+
CLUE_LEDS_COLORS.RED_LED_OFF,
1179+
CLUE_LEDS_COLORS.RED_LED_ON,
1180+
this.ledsRefs.redLed.current,
1181+
this.gradientRefs.redLed.current
1182+
);
11901183
}
11911184
}

‎src/view/components/cpx/Svg_utils.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -82,15 +82,15 @@ namespace svg {
8282
ledStatus: boolean,
8383
offColor: string,
8484
onColor: string,
85-
ledElement: SVGElement,
86-
gradientStopElement: SVGStopElement
85+
ledElement: SVGElement | null,
86+
gradientStopElement: SVGStopElement | null
8787
) {
8888
if (ledStatus) {
89-
ledElement.setAttribute("fill", onColor);
90-
gradientStopElement.setAttribute("stop-opacity", "1");
89+
ledElement?.setAttribute("fill", onColor);
90+
gradientStopElement?.setAttribute("stop-opacity", "1");
9191
} else {
92-
ledElement.setAttribute("fill", offColor);
93-
gradientStopElement.setAttribute("stop-opacity", "0");
92+
ledElement?.setAttribute("fill", offColor);
93+
gradientStopElement?.setAttribute("stop-opacity", "0");
9494
}
9595
}
9696
}

0 commit comments

Comments
 (0)