jeans/etcher
jeans/etcher
1
0
Fork 0
mirror of https://github.com/balena-io/etcher.git synced 2025-07-28 13:46:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Convert reduced-flashing-infos.jsx to typescript

Browse Source 
Change-type: patch
This commit is contained in:
Alexis Svinartchouk 2020-01-15 00:09:39 +01:00
parent b5f175d220
commit c96654d50f
3 changed files with 102 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
lib/gui/app/components/reduced-flashing-infos/reduced-flashing-infos.jsx
View File

@ -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

95
lib/gui/app/components/reduced-flashing-infos/reduced-flashing-infos.tsx Normal file
View File

@ -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;
}
}

9
lib/gui/app/pages/main/MainPage.tsx
View File

@ -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