Some functional components (#291)

* Some functional components

* Pass param to useCallback

* Bump berry

* Scan -> functional
This commit is contained in:
Jaco Greeff
2020-03-14 12:41:57 +01:00
committed by GitHub
parent 067f1a4fa7
commit 8865d2a2c5
7 changed files with 146 additions and 159 deletions
-58
View File
File diff suppressed because one or more lines are too long
Vendored Executable
+50
View File
File diff suppressed because one or more lines are too long
+2 -1
View File
@@ -1,4 +1,5 @@
enableImmutableInstalls: false
enableProgressBars: false
nodeLinker: node-modules
@@ -7,4 +8,4 @@ plugins:
- path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.js
spec: "@yarnpkg/plugin-interactive-tools"
yarnPath: .yarn/releases/yarn-berry.js
yarnPath: .yarn/releases/yarn-rc.js
+31 -35
View File
@@ -4,7 +4,7 @@
import { BaseProps } from './types';
import React from 'react';
import React, { useCallback } from 'react';
import Reader from 'react-qr-reader';
import styled from 'styled-components';
@@ -21,44 +21,40 @@ const DEFAULT_ERROR = (error: Error): void => {
console.error('@polkadot/react-qr:Scan', error.message);
};
class Scan extends React.PureComponent<Props> {
public render (): React.ReactNode {
const { className, delay = DEFAULT_DELAY, size, style } = this.props;
function Scan ({ className, delay = DEFAULT_DELAY, onError = DEFAULT_ERROR, onScan, size, style }: Props): React.ReactElement<Props> {
const _onError = useCallback(
(error: Error): void => onError(error),
[onError]
);
return (
<div
className={className}
style={createImgSize(size)}
>
<Reader
className='ui--qr-Scan'
delay={delay}
onError={this.onError}
onScan={this.onScan}
style={style}
/>
</div>
);
}
const _onScan = useCallback(
(data: string | null): void => {
if (!data || !onScan) {
return;
}
private onError = (error: Error): void => {
const { onError = DEFAULT_ERROR } = this.props;
onScan(data);
},
[onScan]
);
onError(error);
}
private onScan = (data: string | null): void => {
const { onScan } = this.props;
if (!data || !onScan) {
return;
}
onScan(data);
}
return (
<div
className={className}
style={createImgSize(size)}
>
<Reader
className='ui--qr-Scan'
delay={delay}
onError={_onError}
onScan={_onScan}
style={style}
/>
</div>
);
}
export default styled(Scan)`
export default React.memo(styled(Scan)`
.ui--qr-Scan {
display: inline-block;
height: 100%;
@@ -69,4 +65,4 @@ export default styled(Scan)`
margin: 0;
}
}
`;
`);
+30 -31
View File
@@ -4,12 +4,12 @@
import { BaseProps } from './types';
import React from 'react';
import React, { useCallback } from 'react';
import { assert } from '@polkadot/util';
import { decodeAddress } from '@polkadot/util-crypto';
import { ADDRESS_PREFIX } from './constants';
import QrScan from './Scan';
import { decodeAddress } from '@polkadot/util-crypto';
interface ScanType {
address: string;
@@ -22,37 +22,36 @@ interface Props extends BaseProps {
onScan?: (scanned: ScanType) => void;
}
export default class ScanAddress extends React.PureComponent<Props> {
public render (): React.ReactNode {
const { className, onError, size, style } = this.props;
function ScanAddress ({ className, onError, onScan, size, style }: Props): React.ReactElement<Props> {
const _onScan = useCallback(
(data: string | null): void => {
if (!data || !onScan) {
return;
}
return (
<QrScan
className={className}
onError={onError}
onScan={this.onScan}
size={size}
style={style}
/>
);
}
try {
const [prefix, address, genesisHash, name] = data.split(':');
private onScan = (data: string | null): void => {
const { onScan } = this.props;
assert(prefix === ADDRESS_PREFIX, `Invalid address received, expected '${ADDRESS_PREFIX}', found '${prefix}'`);
if (!data || !onScan) {
return;
}
decodeAddress(address);
onScan({ address, genesisHash, name });
} catch (error) {
console.error('@polkadot/react-qr:QrScanAddress', error.message, data);
}
},
[onScan]
);
try {
const [prefix, address, genesisHash, name] = data.split(':');
assert(prefix === ADDRESS_PREFIX, `Invalid address received, expected '${ADDRESS_PREFIX}', found '${prefix}'`);
decodeAddress(address);
onScan({ address, genesisHash, name });
} catch (error) {
console.error('@polkadot/react-qr:QrScanAddress', error.message, data);
}
}
return (
<QrScan
className={className}
onError={onError}
onScan={_onScan}
size={size}
style={style}
/>
);
}
export default React.memo(ScanAddress);
+22 -23
View File
@@ -4,7 +4,7 @@
import { BaseProps } from './types';
import React from 'react';
import React, { useCallback } from 'react';
import QrScan from './Scan';
@@ -17,28 +17,27 @@ interface Props extends BaseProps {
onScan?: (scanned: ScanType) => void;
}
export default class ScanSignature extends React.PureComponent<Props> {
public render (): React.ReactNode {
const { className, onError, size, style } = this.props;
function ScanSignature ({ className, onError, onScan, size, style }: Props): React.ReactElement<Props> {
const _onScan = useCallback(
(signature: string | null): void => {
if (!signature || !onScan) {
return;
}
return (
<QrScan
className={className}
onError={onError}
onScan={this.onScan}
size={size}
style={style}
/>
);
}
onScan({ signature: `0x${signature}` });
},
[onScan]
);
private onScan = (signature: string | null): void => {
const { onScan } = this.props;
if (!signature || !onScan) {
return;
}
onScan({ signature: `0x${signature}` });
}
return (
<QrScan
className={className}
onError={onError}
onScan={_onScan}
size={size}
style={style}
/>
);
}
export default React.memo(ScanSignature);
+11 -11
View File
@@ -2996,8 +2996,8 @@ __metadata:
dependencies:
"@babel/runtime": ^7.8.7
"@polkadot/keyring": ^2.6.2
"@polkadot/ui-settings": 0.52.0-beta.6
"@polkadot/ui-shared": 0.52.0-beta.6
"@polkadot/ui-settings": 0.52.0-beta.7
"@polkadot/ui-shared": 0.52.0-beta.7
"@polkadot/util": ^2.6.2
"@polkadot/util-crypto": ^2.6.2
"@types/react-copy-to-clipboard": ^4.3.0
@@ -3033,12 +3033,12 @@ __metadata:
languageName: unknown
linkType: soft
"@polkadot/reactnative-identicon@0.52.0-beta.6, @polkadot/reactnative-identicon@workspace:packages/reactnative-identicon":
"@polkadot/reactnative-identicon@0.52.0-beta.7, @polkadot/reactnative-identicon@workspace:packages/reactnative-identicon":
version: 0.0.0-use.local
resolution: "@polkadot/reactnative-identicon@workspace:packages/reactnative-identicon"
dependencies:
"@babel/runtime": ^7.8.7
"@polkadot/ui-shared": 0.52.0-beta.6
"@polkadot/ui-shared": 0.52.0-beta.7
"@polkadot/util-crypto": ^2.6.2
"@types/react-native": ^0.61.22
react-native-svg: ^12.0.3
@@ -3082,7 +3082,7 @@ __metadata:
languageName: unknown
linkType: soft
"@polkadot/ui-keyring@0.52.0-beta.6, @polkadot/ui-keyring@workspace:packages/ui-keyring":
"@polkadot/ui-keyring@0.52.0-beta.7, @polkadot/ui-keyring@workspace:packages/ui-keyring":
version: 0.0.0-use.local
resolution: "@polkadot/ui-keyring@workspace:packages/ui-keyring"
dependencies:
@@ -3109,7 +3109,7 @@ __metadata:
languageName: unknown
linkType: soft
"@polkadot/ui-settings@0.52.0-beta.6, @polkadot/ui-settings@workspace:packages/ui-settings":
"@polkadot/ui-settings@0.52.0-beta.7, @polkadot/ui-settings@workspace:packages/ui-settings":
version: 0.0.0-use.local
resolution: "@polkadot/ui-settings@workspace:packages/ui-settings"
dependencies:
@@ -3122,7 +3122,7 @@ __metadata:
languageName: unknown
linkType: soft
"@polkadot/ui-shared@0.52.0-beta.6, @polkadot/ui-shared@workspace:packages/ui-shared":
"@polkadot/ui-shared@0.52.0-beta.7, @polkadot/ui-shared@workspace:packages/ui-shared":
version: 0.0.0-use.local
resolution: "@polkadot/ui-shared@workspace:packages/ui-shared"
dependencies:
@@ -3175,7 +3175,7 @@ __metadata:
resolution: "@polkadot/vue-identicon@workspace:packages/vue-identicon"
dependencies:
"@babel/runtime": ^7.8.7
"@polkadot/ui-shared": 0.52.0-beta.6
"@polkadot/ui-shared": 0.52.0-beta.7
"@polkadot/util-crypto": ^2.6.2
jdenticon: 2.2.0
vue: ^2.6.11
@@ -8814,9 +8814,9 @@ __metadata:
"@babel/core": ^7.8.7
"@babel/runtime": ^7.8.7
"@polkadot/keyring": ^2.6.2
"@polkadot/reactnative-identicon": 0.52.0-beta.6
"@polkadot/ui-keyring": 0.52.0-beta.6
"@polkadot/ui-settings": 0.52.0-beta.6
"@polkadot/reactnative-identicon": 0.52.0-beta.7
"@polkadot/ui-keyring": 0.52.0-beta.7
"@polkadot/ui-settings": 0.52.0-beta.7
"@polkadot/util": ^2.6.2
"@polkadot/util-crypto": ^2.6.2
"@react-native-community/async-storage": ^1.8.1