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

Rework lib/gui/app/styled-components to typescript

Browse Source 
Change-type: patch
Changelog-entry: Rework lib/gui/app/styled-components to typescript
This commit is contained in:
Alexis Svinartchouk 2019-12-03 18:42:15 +01:00 committed by Lorenzo Alberto Maria Ambrosi
parent 68d9542816
commit 84e45caa6c
7 changed files with 159 additions and 146 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
lib/gui/app/components/finish/finish.tsx
View File

@ -23,14 +23,15 @@ import * as selectionState from '../../models/selection-state';
import * as store from '../../models/store';
import * as analytics from '../../modules/analytics';
import * as updateLock from '../../modules/update-lock';
import FlashAnother from '../flash-another/flash-another';
import FlashResults from '../flash-results/flash-results';
import { FlashAnother } from '../flash-another/flash-another';
import { FlashResults } from '../flash-results/flash-results';
import * as SVGIcon from '../svg-icon/svg-icon';
const restart = (options: any, $state: any) => {
const {
applicationSessionUuid,
flashingWorkflowUuid,
// @ts-ignore
} = store.getState().toJS();
if (!options.preserveImage) {
selectionState.deselectImage();
@ -65,6 +66,7 @@ const formattedErrors = () => {
};
function FinishPage({ $state }: any) {
// @ts-ignore
const results = flashState.getFlashResults().results || {};
const progressMessage = messages.progress;
return (
@ -86,7 +88,7 @@ function FinishPage({ $state }: any) {
<div className="fallback-banner">
<div className="caption caption-big">
Thanks for using
<span os-open-external="https://etcher.io?ref=etcher_offline_banner">
<span os-open-external="https://balena.io/etcher?ref=etcher_offline_banner">
<SVGIcon
paths={['../../assets/etcher.svg']}
width="165px"
@ -102,7 +104,7 @@ function FinishPage({ $state }: any) {
height="20px"
></SVGIcon>
by
<span os-open-external="https://resin.io?ref=etcher_success">
<span os-open-external="https://balena.io?ref=etcher_success">
<SVGIcon
paths={['../../assets/balena.svg']}
width="auto"
@ -113,7 +115,7 @@ function FinishPage({ $state }: any) {
<span
className="caption caption-small footer-right"
manifest-bind="version"
os-open-external="https://github.com/resin-io/etcher/blob/master/CHANGELOG.md"
os-open-external="https://github.com/balena-io/etcher/blob/master/CHANGELOG.md"
></span>
</div>
</div>

13
lib/gui/app/components/flash-another/flash-another.tsx
View File

@ -14,7 +14,6 @@
* limitations under the License.
*/
import * as PropTypes from 'prop-types';
import * as React from 'react';
import styled from 'styled-components';
import { position, right } from 'styled-system';
@ -25,7 +24,11 @@ const Div = styled.div<any>`
${right}
`;
const FlashAnother = (props: any) => {
export interface FlashAnotherProps {
onClick: (options: { preserveImage: boolean }) => void;
}
export const FlashAnother = (props: FlashAnotherProps) => {
return (
<ThemedProvider>
<Div position="absolute" right="152px">
@ -39,9 +42,3 @@ const FlashAnother = (props: any) => {
</ThemedProvider>
);
};
FlashAnother.propTypes = {
onClick: PropTypes.func,
};
export default FlashAnother;

2
lib/gui/app/components/flash-another/index.ts
View File

@ -16,7 +16,7 @@
import * as angular from 'angular';
import { react2angular } from 'react2angular';
import FlashAnother from './flash-another';
import { FlashAnother } from './flash-another';
export const MODULE_NAME = 'Etcher.Components.FlashAnother';
const FlashAnotherModule = angular.module(MODULE_NAME, []);

11
lib/gui/app/components/flash-results/flash-results.tsx
View File

@ -15,7 +15,6 @@
*/
import * as _ from 'lodash';
import * as PropTypes from 'prop-types';
import * as React from 'react';
import styled from 'styled-components';
import { left, position, space, top } from 'styled-system';
@ -28,7 +27,7 @@ const Div: any = styled.div<any>`
${space}
`;
const FlashResults: any = ({
export const FlashResults: any = ({
errors,
results,
message,
@ -64,11 +63,3 @@ const FlashResults: any = ({
</Div>
);
};
FlashResults.propTypes = {
results: PropTypes.object,
message: PropTypes.object,
errors: PropTypes.func,
};
export default FlashResults;

2
lib/gui/app/components/flash-results/index.ts
View File

@ -20,7 +20,7 @@
import * as angular from 'angular';
import { react2angular } from 'react2angular';
import FlashResults from './flash-results';
import { FlashResults } from './flash-results';
export const MODULE_NAME = 'Etcher.Components.FlashResults';
const FlashResultsModule = angular.module(MODULE_NAME, []);

113
lib/gui/app/styled-components.tsx Normal file
View File

@ -0,0 +1,113 @@
/*
* Copyright 2018 resin.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 { Button, Flex, Provider, Txt } from 'rendition';
import styled from 'styled-components';
import { space } from 'styled-system';
import { colors } from './theme';
const theme = {
// TODO: Standardize how the colors are specified to match with rendition's format.
customColors: colors,
button: {
border: {
width: '0',
radius: '24px',
},
disabled: {
opacity: 1,
},
extend: () => `
width: 200px;
height: 48px;
font-size: 16px;
&:disabled {
background-color: ${colors.dark.disabled.background};
color: ${colors.dark.disabled.foreground};
opacity: 1;
&:hover {
background-color: ${colors.dark.disabled.background};
color: ${colors.dark.disabled.foreground};
}
}
`,
},
};
export const ThemedProvider = (props: any) => (
<Provider theme={theme} {...props}></Provider>
);
export const BaseButton = styled(Button)`
height: 48px;
`;
export const StepButton = (props: any) => (
<BaseButton primary {...props}></BaseButton>
);
export const ChangeButton = styled(BaseButton)`
color: ${colors.primary.background};
padding: 0;
width: 100%;
height: auto;
&:enabled {
&:hover,
&:focus,
&:active {
color: #8f9297;
}
}
${space}
`;
export const StepNameButton = styled(BaseButton)`
display: flex;
justify-content: center;
align-items: center;
width: 100%;
font-weight: bold;
color: ${colors.dark.foreground};
&:enabled {
&:hover,
&:focus,
&:active {
color: #8f9297;
}
}
`;
export const StepSelection = styled(Flex)`
flex-wrap: wrap;
justify-content: center;
`;
export const Footer = styled(Txt)`
margin-top: 10px;
color: ${colors.dark.disabled.foreground};
font-size: 10px;
`;
export const Underline = styled(Txt.span)`
border-bottom: 1px dotted;
padding-bottom: 2px;
`;
export const DetailsText = styled(Txt.p)`
color: ${colors.dark.disabled.foreground};
margin-bottom: 0;
`;

152
npm-shrinkwrap.json generated
View File

@ -1521,9 +1521,9 @@
"integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q=="
},
"acorn": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-6.1.0.tgz",
"integrity": "sha512-MW/FjM+IvU9CgBzjO3UIPCE2pyEwUsoFl+VGdczOPEdxfGFjuKny/gN54mOuX7Qxmb9Rg9MCn2oKiSUeW+pjrw==",
"version": "5.7.3",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-5.7.3.tgz",
"integrity": "sha512-T/zvzYRfbVojPWahDsE5evJdHb3oJoQfFbsrKM7w5Zcs++Tr257tia3BmMP8XYVjp1S9RZXQMh7gao96BlqZOw==",
"dev": true
},
"acorn-jsx": {
@ -2470,6 +2470,12 @@
"chainsaw": "~0.1.0"
}
},
"binary-extensions": {
"version": "1.13.1",
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-1.13.1.tgz",
"integrity": "sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw==",
"dev": true
},
"bindings": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
@ -2905,26 +2911,6 @@
"y18n": "^4.0.0"
},
"dependencies": {
"bluebird": {
"version": "3.7.1",
"resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.1.tgz",
"integrity": "sha512-DdmyoGCleJnkbp3nkbxTLJ18rjDsE4yCggEwKNXkeV123sPNfOCYeDoeuOY+F2FrSjO1YXcTU+dsy96KMy+gcg==",
"dev": true
},
"glob": {
"version": "7.1.6",
"resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
"integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
"dev": true,
"requires": {
"fs.realpath": "^1.0.0",
"inflight": "^1.0.4",
"inherits": "2",
"minimatch": "^3.0.4",
"once": "^1.3.0",
"path-is-absolute": "^1.0.0"
}
},
"lru-cache": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@ -4323,21 +4309,10 @@
}
},
"data-uri-to-buffer": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-2.0.0.tgz",
"integrity": "sha512-YbKCNLPPP4inc0E5If4OaalBc7gpaM2MRv77Pv2VThVComLKfbGYtJcdDCViDyp1Wd4SebhHLz94vp91zbK6bw==",
"dev": true,
"requires": {
"@types/node": "^8.0.7"
},
"dependencies": {
"@types/node": {
"version": "8.10.40",
"resolved": "https://registry.npmjs.org/@types/node/-/node-8.10.40.tgz",
"integrity": "sha512-RRSjdwz63kS4u7edIwJUn8NqKLLQ6LyqF/X4+4jp38MBT3Vwetewi2N4dgJEshLbDwNgOJXNYoOwzVZUSSLhkQ==",
"dev": true
}
}
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-1.2.0.tgz",
"integrity": "sha512-vKQ9DTQPN1FLYiiEEOQ6IBGFqvjCa5rSK3cWMy/Nespm5d/x3dGFT9UBZnkLxCwua/IXBi2TYnwTEpsOvhC4UQ==",
"dev": true
},
"date-fns": {
"version": "1.30.1",
@ -4801,9 +4776,9 @@
"dev": true
},
"des.js": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/des.js/-/des.js-1.0.1.tgz",
"integrity": "sha512-Q0I4pfFrv2VPd34/vfLrFOoRmlYj3OV50i7fskps1jZWK1kApMWWT9G6RRUeYedLcBDIhnSDaUvJMb3AhUlaEA==",
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/des.js/-/des.js-1.0.0.tgz",
"integrity": "sha1-wHTS4qpqipoH29YfmhXCzYPsjsw=",
"dev": true,
"requires": {
"inherits": "^2.0.1",
@ -5440,9 +5415,9 @@
"dev": true
},
"elliptic": {
"version": "6.5.2",
"resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.2.tgz",
"integrity": "sha512-f4x70okzZbIQl/NSRLkI/+tteV/9WqL98zx+SQ69KbXxmVrmjwsNUPn/gYJJ0sHvEak24cZgHIPegRePAtA/xw==",
"version": "6.5.1",
"resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.1.tgz",
"integrity": "sha512-xvJINNLbTeWQjrl6X+7eQCrIy/YPv5XCpKW6kB5mKvtnGILoLDcySuwomfdzt0BMdLNVnuRNTuzKNHj0bva1Cg==",
"dev": true,
"requires": {
"bn.js": "^4.4.0",
@ -8232,6 +8207,15 @@
"resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
"integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
},
"is-binary-path": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-1.0.1.tgz",
"integrity": "sha1-dfFmQrSA8YenEcgUFh/TpKdlWJg=",
"dev": true,
"requires": {
"binary-extensions": "^1.0.0"
}
},
"is-buffer": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.4.tgz",
@ -10302,9 +10286,9 @@
},
"dependencies": {
"buffer": {
"version": "4.9.2",
"resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.2.tgz",
"integrity": "sha512-xq+q3SRMOxGivLhBNaUdC64hDTQwejJ+H0T/NB1XMtTVEwNTrfFF3gAxiyW0Bu/xWEGhjVKgUcMhCrUy2+uCWg==",
"version": "4.9.1",
"resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz",
"integrity": "sha1-bRu2AbB6TvztlwlBMgkwJ8lbwpg=",
"dev": true,
"requires": {
"base64-js": "^1.0.2",
@ -14790,80 +14774,6 @@
"chokidar": "^2.0.2",
"graceful-fs": "^4.1.2",
"neo-async": "^2.5.0"
},
"dependencies": {
"anymatch": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-2.0.0.tgz",
"integrity": "sha512-5teOsQWABXHHBFP9y3skS5P3d/WfWXpv3FUpy+LorMrNYaT9pI4oLMQX7jzQ2KklNpGpWHzdCXTDT2Y3XGlZBw==",
"dev": true,
"requires": {
"micromatch": "^3.1.4",
"normalize-path": "^2.1.1"
},
"dependencies": {
"normalize-path": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz",
"integrity": "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=",
"dev": true,
"requires": {
"remove-trailing-separator": "^1.0.1"
}
}
}
},
"binary-extensions": {
"version": "1.13.1",
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-1.13.1.tgz",
"integrity": "sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw==",
"dev": true
},
"chokidar": {
"version": "2.1.8",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.8.tgz",
"integrity": "sha512-ZmZUazfOzf0Nve7duiCKD23PFSCs4JPoYyccjUFF3aQkQadqBhfzhjkwBH2mNOG9cTBwhamM37EIsIkZw3nRgg==",
"dev": true,
"requires": {
"anymatch": "^2.0.0",
"async-each": "^1.0.1",
"braces": "^2.3.2",
"glob-parent": "^3.1.0",
"inherits": "^2.0.3",
"is-binary-path": "^1.0.0",
"is-glob": "^4.0.0",
"normalize-path": "^3.0.0",
"path-is-absolute": "^1.0.0",
"readdirp": "^2.2.1",
"upath": "^1.1.1"
}
},
"is-binary-path": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-1.0.1.tgz",
"integrity": "sha1-dfFmQrSA8YenEcgUFh/TpKdlWJg=",
"dev": true,
"requires": {
"binary-extensions": "^1.0.0"
}
},
"normalize-path": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
"dev": true
},
"readdirp": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-2.2.1.tgz",
"integrity": "sha512-1JU/8q+VgFZyxwrJ+SVIOsh+KywWGpds3NTqikiKpDMZWScmAYyKIgqkO+ARvNWJfXeXR1zxz7aHF4u4CyH6vQ==",
"dev": true,
"requires": {
"graceful-fs": "^4.1.11",
"micromatch": "^3.1.10",
"readable-stream": "^2.0.2"
}
}
}
},
"wdio-dot-reporter": {