Some functional components (#291)

* Some functional components

* Pass param to useCallback

* Bump berry

* Scan -> functional

packages/react-qr/src/Scan.tsx

@@ -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;
     }
   }
-`;
+`);

packages/react-qr/src/ScanAddress.tsx

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

packages/react-qr/src/ScanSignature.tsx

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