From ea8f4a7f357c5244eef97070ead77c0bb1e17be1 Mon Sep 17 00:00:00 2001 From: Viktoryia Kliushun Date: Thu, 19 Oct 2023 08:53:16 +0200 Subject: [PATCH 1/3] [TS migration] Migrate 'QRCode' component --- src/components/QRCode/index.js | 75 --------------------------------- src/components/QRCode/index.tsx | 67 +++++++++++++++++++++++++++++ 2 files changed, 67 insertions(+), 75 deletions(-) delete mode 100644 src/components/QRCode/index.js create mode 100644 src/components/QRCode/index.tsx diff --git a/src/components/QRCode/index.js b/src/components/QRCode/index.js deleted file mode 100644 index f27cf28066ef..000000000000 --- a/src/components/QRCode/index.js +++ /dev/null @@ -1,75 +0,0 @@ -import React from 'react'; -import QRCodeLibrary from 'react-native-qrcode-svg'; -import PropTypes from 'prop-types'; -import defaultTheme from '../../styles/themes/default'; -import CONST from '../../CONST'; - -const propTypes = { - /** - * The QR code URL - */ - url: PropTypes.string.isRequired, - /** - * The logo which will be displayed in the middle of the QR code. - * Follows ImageProps href from react-native-svg that is used by react-native-qrcode-svg. - */ - logo: PropTypes.oneOfType([PropTypes.shape({uri: PropTypes.string}), PropTypes.number, PropTypes.string]), - /** - * The size ratio of logo to QR code - */ - logoRatio: PropTypes.number, - /** - * The size ratio of margin around logo to QR code - */ - logoMarginRatio: PropTypes.number, - /** - * The QRCode size - */ - size: PropTypes.number, - /** - * The QRCode color - */ - color: PropTypes.string, - /** - * The QRCode background color - */ - backgroundColor: PropTypes.string, - /** - * Function to retrieve the internal component ref and be able to call it's - * methods - */ - getRef: PropTypes.func, -}; - -const defaultProps = { - logo: undefined, - size: 120, - color: defaultTheme.text, - backgroundColor: defaultTheme.highlightBG, - getRef: undefined, - logoRatio: CONST.QR.DEFAULT_LOGO_SIZE_RATIO, - logoMarginRatio: CONST.QR.DEFAULT_LOGO_MARGIN_RATIO, -}; - -function QRCode(props) { - return ( - - ); -} - -QRCode.displayName = 'QRCode'; -QRCode.propTypes = propTypes; -QRCode.defaultProps = defaultProps; - -export default QRCode; diff --git a/src/components/QRCode/index.tsx b/src/components/QRCode/index.tsx new file mode 100644 index 000000000000..bbc71ecf5b23 --- /dev/null +++ b/src/components/QRCode/index.tsx @@ -0,0 +1,67 @@ +import React, {Ref} from 'react'; +import QRCodeLibrary from 'react-native-qrcode-svg'; +import {ImageSourcePropType} from 'react-native'; +import defaultTheme from '../../styles/themes/default'; +import CONST from '../../CONST'; + +type QRCodeProps = { + /** The QR code URL */ + url: string; + + /** + * The logo which will be displayed in the middle of the QR code. + * Follows ImageProps href from react-native-svg that is used by react-native-qrcode-svg. + */ + logo?: ImageSourcePropType; + + /** The size ratio of logo to QR code */ + logoRatio?: number; + + /** The size ratio of margin around logo to QR code */ + logoMarginRatio?: number; + + /** The QRCode size */ + size?: number; + + /** The QRCode color */ + color?: string; + + /** The QRCode background color */ + backgroundColor?: string; + + /** + * Function to retrieve the internal component ref and be able to call it's + * methods + */ + getRef?: (ref: Ref) => Ref; +}; + +function QRCode({ + url, + logo, + getRef, + size = 120, + color = defaultTheme.text, + backgroundColor = defaultTheme.highlightBG, + logoRatio = CONST.QR.DEFAULT_LOGO_SIZE_RATIO, + logoMarginRatio = CONST.QR.DEFAULT_LOGO_MARGIN_RATIO, +}: QRCodeProps) { + return ( + + ); +} + +QRCode.displayName = 'QRCode'; + +export default QRCode; From a8739b1feae3f241031ad0c3d6991a45ed1a25e8 Mon Sep 17 00:00:00 2001 From: Viktoryia Kliushun Date: Thu, 19 Oct 2023 09:07:42 +0200 Subject: [PATCH 2/3] Update logo ratio type --- src/components/QRCode/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/QRCode/index.tsx b/src/components/QRCode/index.tsx index bbc71ecf5b23..d90c2ffb0375 100644 --- a/src/components/QRCode/index.tsx +++ b/src/components/QRCode/index.tsx @@ -15,10 +15,10 @@ type QRCodeProps = { logo?: ImageSourcePropType; /** The size ratio of logo to QR code */ - logoRatio?: number; + logoRatio?: typeof CONST.QR.DEFAULT_LOGO_SIZE_RATIO | typeof CONST.QR.EXPENSIFY_LOGO_SIZE_RATIO; /** The size ratio of margin around logo to QR code */ - logoMarginRatio?: number; + logoMarginRatio?: typeof CONST.QR.DEFAULT_LOGO_MARGIN_RATIO | typeof CONST.QR.EXPENSIFY_LOGO_MARGIN_RATIO; /** The QRCode size */ size?: number; From a26508b1f2565562338fd19d727c20985df3c17f Mon Sep 17 00:00:00 2001 From: Viktoryia Kliushun Date: Thu, 19 Oct 2023 10:12:16 +0200 Subject: [PATCH 3/3] Add LogoRatio and LogoMarginRatio types --- src/components/QRCode/index.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/components/QRCode/index.tsx b/src/components/QRCode/index.tsx index d90c2ffb0375..bca45c02fffa 100644 --- a/src/components/QRCode/index.tsx +++ b/src/components/QRCode/index.tsx @@ -4,6 +4,10 @@ import {ImageSourcePropType} from 'react-native'; import defaultTheme from '../../styles/themes/default'; import CONST from '../../CONST'; +type LogoRatio = typeof CONST.QR.DEFAULT_LOGO_SIZE_RATIO | typeof CONST.QR.EXPENSIFY_LOGO_SIZE_RATIO; + +type LogoMarginRatio = typeof CONST.QR.DEFAULT_LOGO_MARGIN_RATIO | typeof CONST.QR.EXPENSIFY_LOGO_MARGIN_RATIO; + type QRCodeProps = { /** The QR code URL */ url: string; @@ -15,10 +19,10 @@ type QRCodeProps = { logo?: ImageSourcePropType; /** The size ratio of logo to QR code */ - logoRatio?: typeof CONST.QR.DEFAULT_LOGO_SIZE_RATIO | typeof CONST.QR.EXPENSIFY_LOGO_SIZE_RATIO; + logoRatio?: LogoRatio; /** The size ratio of margin around logo to QR code */ - logoMarginRatio?: typeof CONST.QR.DEFAULT_LOGO_MARGIN_RATIO | typeof CONST.QR.EXPENSIFY_LOGO_MARGIN_RATIO; + logoMarginRatio?: LogoMarginRatio; /** The QRCode size */ size?: number;