From c96654d50fa3844f73768b2a3e33f89b63bba834 Mon Sep 17 00:00:00 2001 From: Alexis Svinartchouk Date: Wed, 15 Jan 2020 00:09:39 +0100 Subject: [PATCH] Convert reduced-flashing-infos.jsx to typescript Change-type: patch --- .../reduced-flashing-infos.jsx | 82 ---------------- .../reduced-flashing-infos.tsx | 95 +++++++++++++++++++ lib/gui/app/pages/main/MainPage.tsx | 9 +- 3 files changed, 102 insertions(+), 84 deletions(-) delete mode 100644 lib/gui/app/components/reduced-flashing-infos/reduced-flashing-infos.jsx create mode 100644 lib/gui/app/components/reduced-flashing-infos/reduced-flashing-infos.tsx diff --git a/lib/gui/app/components/reduced-flashing-infos/reduced-flashing-infos.jsx b/lib/gui/app/components/reduced-flashing-infos/reduced-flashing-infos.jsx deleted file mode 100644 index 05a9855a..00000000 --- a/lib/gui/app/components/reduced-flashing-infos/reduced-flashing-infos.jsx +++ /dev/null @@ -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) ? ( -
- - - { props.imageName } - { props.imageSize } - - - - - { props.driveTitle } - -
- ) : null -} - -ReducedFlashingInfos.propTypes = { - imageLogo: propTypes.string, - imageName: propTypes.string, - imageSize: propTypes.string, - driveTitle: propTypes.string, - shouldShow: propTypes.bool -} - -module.exports = ReducedFlashingInfos diff --git a/lib/gui/app/components/reduced-flashing-infos/reduced-flashing-infos.tsx b/lib/gui/app/components/reduced-flashing-infos/reduced-flashing-infos.tsx new file mode 100644 index 00000000..7cc2d86a --- /dev/null +++ b/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 ? ( +
+ + + {this.props.imageName} + {this.props.imageSize} + + + + + {this.props.driveTitle} + +
+ ) : null; + } +} diff --git a/lib/gui/app/pages/main/MainPage.tsx b/lib/gui/app/pages/main/MainPage.tsx index 392c6cb9..a6bceb06 100644 --- a/lib/gui/app/pages/main/MainPage.tsx +++ b/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<