Convert reduced-flashing-infos.jsx to typescript

Change-type: patch

lib/gui/app/components/reduced-flashing-infos/reduced-flashing-infos.jsx

@@ -1,82 +0,0 @@
-/*
- * Copyright 2016 balena.io
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-'use strict'
-
-const React = require('react')
-const propTypes = require('prop-types')
-const styled = require('styled-components').default
-const { color } = require('styled-system')
-
-const { SVGIcon } = require('../svg-icon/svg-icon')
-
-const Div = styled.div `
-  position: absolute;
-  top: 45px;
-  left: 545px;
-
-  > span.step-name {
-    justify-content: flex-start;
-
-    > span {
-      margin-left: 10px;
-    }
-
-    > span:nth-child(2) {
-      font-weight: 500;
-    }
-
-    > span:nth-child(3) {
-      font-weight: 400;
-      font-style: italic;
-    }
-  }
-
-  .svg-icon[disabled] {
-    opacity: 0.4;
-  }
-`
-
-const Span = styled.span `
-  ${color}
-`
-
-const ReducedFlashingInfos = (props) => {
-  return (props.shouldShow) ? (
-    <Div>
-      <Span className="step-name">
-        <SVGIcon disabled contents={[ props.imageLogo ]} paths={[ '../../assets/image.svg' ]} width='20px'></SVGIcon>
-        <Span>{ props.imageName }</Span>
-        <Span color='#7e8085'>{ props.imageSize }</Span>
-      </Span>
-
-      <Span className="step-name">
-        <SVGIcon disabled paths={[ '../../assets/drive.svg' ]} width='20px'></SVGIcon>
-        <Span>{ props.driveTitle }</Span>
-      </Span>
-    </Div>
-  ) : null
-}
-
-ReducedFlashingInfos.propTypes = {
-  imageLogo: propTypes.string,
-  imageName: propTypes.string,
-  imageSize: propTypes.string,
-  driveTitle: propTypes.string,
-  shouldShow: propTypes.bool
-}
-
-module.exports = ReducedFlashingInfos

lib/gui/app/components/reduced-flashing-infos/reduced-flashing-infos.tsx

@@ -0,0 +1,95 @@
+/*
+ * Copyright 2016 balena.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as React from 'react';
+import { default as styled } from 'styled-components';
+import { color } from 'styled-system';
+
+import { SVGIcon } from '../svg-icon/svg-icon';
+
+const Div = styled.div`
+	position: absolute;
+	top: 45px;
+	left: 545px;
+
+	> span.step-name {
+		justify-content: flex-start;
+
+		> span {
+			margin-left: 10px;
+		}
+
+		> span:nth-child(2) {
+			font-weight: 500;
+		}
+
+		> span:nth-child(3) {
+			font-weight: 400;
+			font-style: italic;
+		}
+	}
+
+	.svg-icon[disabled] {
+		opacity: 0.4;
+	}
+`;
+
+const Span = styled.span`
+	${color}
+`;
+
+interface ReducedFlashingInfosProps {
+	imageLogo: string;
+	imageName: string;
+	imageSize: string;
+	driveTitle: string;
+	shouldShow: boolean;
+}
+
+export class ReducedFlashingInfos extends React.Component<
+	ReducedFlashingInfosProps
+> {
+	constructor(props: ReducedFlashingInfosProps) {
+		super(props);
+		this.state = {};
+	}
+
+	public render() {
+		return this.props.shouldShow ? (
+			<Div>
+				<Span className="step-name">
+					<SVGIcon
+						disabled
+						contents={[this.props.imageLogo]}
+						paths={['../../assets/image.svg']}
+						width="20px"
+					></SVGIcon>
+					<Span>{this.props.imageName}</Span>
+					<Span color="#7e8085">{this.props.imageSize}</Span>
+				</Span>
+
+				<Span className="step-name">
+					<SVGIcon
+						disabled
+						paths={['../../assets/drive.svg']}
+						width="20px"
+					></SVGIcon>
+					<Span>{this.props.driveTitle}</Span>
+				</Span>
+			</Div>
+		) : null;
+	}
+}

lib/gui/app/pages/main/MainPage.tsx

@@ -16,6 +16,7 @@
 
 import { faCog, faQuestionCircle } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import * as _ from 'lodash';
 import * as path from 'path';
 import * as React from 'react';
 import { Button } from 'rendition';
@@ -23,7 +24,7 @@ import { Button } from 'rendition';
 import { FeaturedProject } from '../../components/featured-project/featured-project';
 import FinishPage from '../../components/finish/finish';
 import * as ImageSelector from '../../components/image-selector/image-selector';
-import * as ReducedFlashingInfos from '../../components/reduced-flashing-infos/reduced-flashing-infos';
+import { ReducedFlashingInfos } from '../../components/reduced-flashing-infos/reduced-flashing-infos';
 import * as SafeWebview from '../../components/safe-webview/safe-webview';
 import { SettingsModal } from '../../components/settings/settings';
 import { SVGIcon } from '../../components/svg-icon/svg-icon';
@@ -226,7 +227,11 @@ export class MainPage extends React.Component<
 							<ReducedFlashingInfos
 								imageLogo={this.state.imageLogo}
 								imageName={middleEllipsis(this.state.imageName, 16)}
-								imageSize={bytesToClosestUnit(this.state.imageSize)}
+								imageSize={
+									_.isNumber(this.state.imageSize)
+										? (bytesToClosestUnit(this.state.imageSize) as string)
+										: ''
+								}
 								driveTitle={middleEllipsis(this.state.driveTitle, 16)}
 								shouldShow={
 									this.state.isFlashing && this.state.isWebviewShowing