mirror of
https://github.com/pezkuwichain/pezkuwi-ui.git
synced 2026-04-22 02:08:03 +00:00
Some functional components (#291)
* Some functional components * Pass param to useCallback * Bump berry * Scan -> functional
This commit is contained in:
Vendored
-58
File diff suppressed because one or more lines are too long
+50
File diff suppressed because one or more lines are too long
+2
-1
@@ -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
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
`;
|
||||
`);
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user