From 2a543a212015993ee58541d51307f803c4d322ff Mon Sep 17 00:00:00 2001 From: Kadie Alexander Date: Wed, 16 Aug 2023 19:46:34 +1200 Subject: [PATCH 01/27] Updated variables and states (WIP) --- src/components/PDFView/index.native.js | 172 +++++++++++-------------- 1 file changed, 77 insertions(+), 95 deletions(-) diff --git a/src/components/PDFView/index.native.js b/src/components/PDFView/index.native.js index c240ade664e5..575d78ca955a 100644 --- a/src/components/PDFView/index.native.js +++ b/src/components/PDFView/index.native.js @@ -14,12 +14,10 @@ import withWindowDimensions from '../withWindowDimensions'; import withKeyboardState, {keyboardStatePropTypes} from '../withKeyboardState'; import withLocalize from '../withLocalize'; import CONST from '../../CONST'; - const propTypes = { ...pdfViewPropTypes, ...keyboardStatePropTypes, -}; - +} /** * On the native layer, we use react-native-pdf/PDF to display PDFs. If a PDF is * password-protected we render a PDFPasswordForm to request a password @@ -34,42 +32,24 @@ const propTypes = { * so that PDFPasswordForm doesn't bounce when react-native-pdf/PDF * is (temporarily) rendered. */ -class PDFView extends Component { - constructor(props) { - super(props); - this.state = { - shouldRequestPassword: false, - shouldAttemptPDFLoad: true, - shouldShowLoadingIndicator: true, - isPasswordInvalid: false, - failedToLoadPDF: false, - successToLoadPDF: false, - password: '', - }; - this.initiatePasswordChallenge = this.initiatePasswordChallenge.bind(this); - this.attemptPDFLoadWithPassword = this.attemptPDFLoadWithPassword.bind(this); - this.finishPDFLoad = this.finishPDFLoad.bind(this); - this.handleFailureToLoadPDF = this.handleFailureToLoadPDF.bind(this); - } - componentDidUpdate() { - this.props.onToggleKeyboard(this.props.isKeyboardShown); - } +const [shouldRequestPassword, setShouldRequestPassword] = useState(false); +const [shouldAttemptPDFLoad, setShouldAttemptPDFLoad] = useState(true); +const [shouldShowLoadingIndicator, setShouldShowLoadingIndicator] = useState(true), +const [isPasswordInvalid, setIsPasswordInvalid] = useState(false), +const [failedToLoadPDF, setFailedToLoadPDF] = useState(false), +const [successToLoadPDF, setSuccessToLoadPDF] = useState(false), +const [password, setPassword] = useState(''), + + +/* Ignoring this for last.*/ +componentDidUpdate() { + props .onToggleKeyboard(props.isKeyboardShown); +} - handleFailureToLoadPDF(error) { - if (error.message.match(/password/i)) { - this.initiatePasswordChallenge(); - return; - } - this.setState({ - failedToLoadPDF: true, - shouldAttemptPDFLoad: false, - shouldRequestPassword: false, - shouldShowLoadingIndicator: false, - }); - } +function PDFView(props) { /** * Initiate password challenge if message received from react-native-pdf/PDF * indicates that a password is required or invalid. @@ -78,23 +58,29 @@ class PDFView extends Component { * Note that the message doesn't specify whether the password is simply empty or * invalid. */ - initiatePasswordChallenge() { - this.setState({shouldShowLoadingIndicator: false}); - - // Render password form, and don't render PDF and loading indicator. - this.setState({ - shouldRequestPassword: true, - shouldAttemptPDFLoad: false, - }); - + function initiatePasswordChallenge() { + setShouldShowLoadingIndicator(false); + setShouldRequestPassword(true); + setShouldAttemptPDFLoad(false); // The message provided by react-native-pdf doesn't indicate whether this // is an initial password request or if the password is invalid. So we just assume // that if a password was already entered then it's an invalid password error. - if (this.state.password) { - this.setState({isPasswordInvalid: true}); + if (password !== '') { + setIsPasswordInvalid(true); } } + function handleFailureToLoadPDF(error) { + if (error.message.match(/password/i)) { + initiatePasswordChallenge(); + return; + }; + setFailedToLoadPDF(true); + setShouldShowLoadingIndicator(false); + setShouldRequestPassword(false); + setShouldAttemptPDFLoad(false); + } + /** * When the password is submitted via PDFPasswordForm, save the password * in state and attempt to load the PDF. Also show the loading indicator @@ -102,71 +88,69 @@ class PDFView extends Component { * * @param {String} password Password submitted via PDFPasswordForm */ - attemptPDFLoadWithPassword(password) { + function attemptPDFLoadWithPassword(password) { // Render react-native-pdf/PDF so that it can validate the password. // Note that at this point in the password challenge, shouldRequestPassword is true. // Thus react-native-pdf/PDF will be rendered - but not visible. - this.setState({ - password, - shouldAttemptPDFLoad: true, - shouldShowLoadingIndicator: true, - }); - } + setPassword(password), + setShouldAttemptPDFLoad(true); + setShouldShowLoadingIndicator(true); - /** - * After the PDF is successfully loaded hide PDFPasswordForm and the loading - * indicator. - */ - finishPDFLoad() { - this.setState({ - shouldRequestPassword: false, - shouldShowLoadingIndicator: false, - successToLoadPDF: true, - }); - this.props.onLoadComplete(); } + + + /** + * After the PDF is successfully loaded hide PDFPasswordForm and the loading + * indicator. + */ + finishPDFLoad() { + setShouldRequestPassword(false); + setShouldShowLoadingIndicator(false); + setsuccessToLoadPDF(true); + props.onLoadComplete(); + } renderPDFView() { - const pdfStyles = [styles.imageModalPDF, StyleUtils.getWidthAndHeightStyle(this.props.windowWidth, this.props.windowHeight)]; + const pdfStyles = [styles.imageModalPDF, StyleUtils.getWidthAndHeightStyle(props.windowWidth, props.windowHeight)]; // If we haven't yet successfully validated the password and loaded the PDF, // then we need to hide the react-native-pdf/PDF component so that PDFPasswordForm // is positioned nicely. We're specifically hiding it because we still need to render // the PDF component so that it can validate the password. - if (this.state.shouldRequestPassword) { + if (shouldRequestPassword) { pdfStyles.push(styles.invisible); } - const containerStyles = this.state.shouldRequestPassword && this.props.isSmallScreenWidth ? [styles.w100, styles.flex1] : [styles.alignItemsCenter, styles.flex1]; + const containerStyles = shouldRequestPassword && props.isSmallScreenWidth ? [styles.w100, styles.flex1] : [styles.alignItemsCenter, styles.flex1]; return ( - {this.state.failedToLoadPDF && ( + {failedToLoadPDF && ( - {this.props.translate('attachmentView.failedToLoadPDF')} + {props.translate('attachmentView.failedToLoadPDF')} )} - {this.state.shouldAttemptPDFLoad && ( + {shouldAttemptPDFLoad && ( } - source={{uri: this.props.sourceURL}} + source={{uri: props.sourceURL}} style={pdfStyles} - onError={this.handleFailureToLoadPDF} - password={this.state.password} - onLoadComplete={this.finishPDFLoad} - onPageSingleTap={this.props.onPress} - onScaleChanged={this.props.onScaleChanged} + onError={handleFailureToLoadPDF} + password={state.password} + onLoadComplete={finishPDFLoad} + onPageSingleTap={props.onPress} + onScaleChanged={props.onScaleChanged} /> )} {this.state.shouldRequestPassword && ( this.setState({isPasswordInvalid: false})} - isPasswordInvalid={this.state.isPasswordInvalid} - shouldShowLoadingIndicator={this.state.shouldShowLoadingIndicator} + isFocused={props.isFocused} + onSubmit={attemptPDFLoadWithPassword} + onPasswordUpdated={() => setIsPasswordInvalid(false)} + isPasswordInvalid={isPasswordInvalid} + shouldShowLoadingIndicator={shouldShowLoadingIndicator} /> )} @@ -174,20 +158,18 @@ class PDFView extends Component { ); } - render() { - return this.props.onPress && !this.state.successToLoadPDF ? ( - - {this.renderPDFView()} - - ) : ( - this.renderPDFView() - ); - } + return props.onPress && !successToLoadPDF ? ( + + {renderPDFView()} + + ) : ( + renderPDFView() + ); } PDFView.propTypes = propTypes; From 0b36d7cc37bc92b519ba6a415cd6c73dac5a79c3 Mon Sep 17 00:00:00 2001 From: Kadie Alexander Date: Wed, 16 Aug 2023 20:03:21 +1200 Subject: [PATCH 02/27] began updating lifecycle method to useEffect --- src/components/PDFView/index.native.js | 29 +++++++++++--------------- 1 file changed, 12 insertions(+), 17 deletions(-) diff --git a/src/components/PDFView/index.native.js b/src/components/PDFView/index.native.js index 575d78ca955a..22d2aa557b7f 100644 --- a/src/components/PDFView/index.native.js +++ b/src/components/PDFView/index.native.js @@ -41,15 +41,12 @@ const [failedToLoadPDF, setFailedToLoadPDF] = useState(false), const [successToLoadPDF, setSuccessToLoadPDF] = useState(false), const [password, setPassword] = useState(''), +function PDFView(props) { -/* Ignoring this for last.*/ -componentDidUpdate() { - props .onToggleKeyboard(props.isKeyboardShown); -} - - + useEffect(() => { + props.onToggleKeyboard(props.isKeyboardShown); + },); -function PDFView(props) { /** * Initiate password challenge if message received from react-native-pdf/PDF * indicates that a password is required or invalid. @@ -97,20 +94,18 @@ function PDFView(props) { setShouldShowLoadingIndicator(true); } - - /** * After the PDF is successfully loaded hide PDFPasswordForm and the loading * indicator. */ - finishPDFLoad() { - setShouldRequestPassword(false); - setShouldShowLoadingIndicator(false); - setsuccessToLoadPDF(true); - props.onLoadComplete(); - } + function finishPDFLoad() { + setShouldRequestPassword(false); + setShouldShowLoadingIndicator(false); + setsuccessToLoadPDF(true); + props.onLoadComplete(); + } - renderPDFView() { + function renderPDFView() { const pdfStyles = [styles.imageModalPDF, StyleUtils.getWidthAndHeightStyle(props.windowWidth, props.windowHeight)]; // If we haven't yet successfully validated the password and loaded the PDF, @@ -143,7 +138,7 @@ function PDFView(props) { onScaleChanged={props.onScaleChanged} /> )} - {this.state.shouldRequestPassword && ( + {shouldRequestPassword && ( Date: Tue, 29 Aug 2023 20:56:23 +1200 Subject: [PATCH 03/27] latest useEffect updates --- src/components/PDFView/index.native.js | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/components/PDFView/index.native.js b/src/components/PDFView/index.native.js index 22d2aa557b7f..799c9a6f35d3 100644 --- a/src/components/PDFView/index.native.js +++ b/src/components/PDFView/index.native.js @@ -35,11 +35,11 @@ const propTypes = { const [shouldRequestPassword, setShouldRequestPassword] = useState(false); const [shouldAttemptPDFLoad, setShouldAttemptPDFLoad] = useState(true); -const [shouldShowLoadingIndicator, setShouldShowLoadingIndicator] = useState(true), -const [isPasswordInvalid, setIsPasswordInvalid] = useState(false), -const [failedToLoadPDF, setFailedToLoadPDF] = useState(false), -const [successToLoadPDF, setSuccessToLoadPDF] = useState(false), -const [password, setPassword] = useState(''), +const [shouldShowLoadingIndicator, setShouldShowLoadingIndicator] = useState(true); +const [isPasswordInvalid, setIsPasswordInvalid] = useState(false); +const [failedToLoadPDF, setFailedToLoadPDF] = useState(false); +const [successToLoadPDF, setSuccessToLoadPDF] = useState(false); +const [password, setPassword] = useState(''); function PDFView(props) { @@ -166,7 +166,6 @@ function PDFView(props) { renderPDFView() ); } - PDFView.propTypes = propTypes; PDFView.defaultProps = defaultProps; From 00efb240c7b2b1a01ee16c63d5d73bb27ae3c09a Mon Sep 17 00:00:00 2001 From: Kadie Alexander Date: Tue, 17 Oct 2023 10:53:46 +1300 Subject: [PATCH 04/27] small errors found during testing --- src/components/PDFView/index.js | 43 ++++++++++---------------- src/components/PDFView/index.native.js | 22 ++++++------- 2 files changed, 27 insertions(+), 38 deletions(-) diff --git a/src/components/PDFView/index.js b/src/components/PDFView/index.js index bd5fe8162d2e..fd0180c082b8 100644 --- a/src/components/PDFView/index.js +++ b/src/components/PDFView/index.js @@ -32,31 +32,20 @@ const PAGE_BORDER = 9; */ const LARGE_SCREEN_SIDE_SPACING = 40; -class PDFView extends Component { - constructor(props) { - super(props); - this.state = { - numPages: null, - pageViewports: [], - containerWidth: props.windowWidth, - containerHeight: props.windowHeight, - shouldRequestPassword: false, - isPasswordInvalid: false, - isKeyboardOpen: false, - }; - this.onDocumentLoadSuccess = this.onDocumentLoadSuccess.bind(this); - this.initiatePasswordChallenge = this.initiatePasswordChallenge.bind(this); - this.attemptPDFLoad = this.attemptPDFLoad.bind(this); - this.toggleKeyboardOnSmallScreens = this.toggleKeyboardOnSmallScreens.bind(this); - this.calculatePageHeight = this.calculatePageHeight.bind(this); - this.calculatePageWidth = this.calculatePageWidth.bind(this); - this.renderPage = this.renderPage.bind(this); - this.getDevicePixelRatio = _.memoize(this.getDevicePixelRatio); - this.setListAttributes = this.setListAttributes.bind(this); +const [numPages, setNumPages] = useState(null); +const [pageViewports, setPageViewports] = useState([]); +const [containerWidth, setContainerWidth] = useState(props.windowWidth); +const [containerHeight, setContainerHeight] = useState(props.windowHeight); +const [shouldRequestPassword, setShouldRequestPassword] = useState(false); +const [isPasswordInvalid, setIsPasswordInvalid] = useState(false); +const [isKeyboardOpen, setIsKeyboardOpen] = useState(false); + +function PDFView(props) { + constructor(props) { const workerBlob = new Blob([pdfWorkerSource], {type: 'text/javascript'}); pdfjs.GlobalWorkerOptions.workerSrc = URL.createObjectURL(workerBlob); - this.retrieveCanvasLimits(); + retrieveCanvasLimits(); } componentDidUpdate(prevProps) { @@ -129,9 +118,9 @@ class PDFView extends Component { */ getDevicePixelRatio(width, height) { const nbPixels = width * height; - const ratioHeight = this.props.maxCanvasHeight / height; - const ratioWidth = this.props.maxCanvasWidth / width; - const ratioArea = Math.sqrt(this.props.maxCanvasArea / nbPixels); + const ratioHeight = maxCanvasHeight / height; + const ratioWidth = maxCanvasWidth / width; + const ratioArea = Math.sqrt(maxCanvasArea / nbPixels); const ratio = Math.min(ratioHeight, ratioArea, ratioWidth); return ratio > window.devicePixelRatio ? undefined : ratio; } @@ -144,13 +133,13 @@ class PDFView extends Component { * @returns {Number} */ calculatePageHeight(pageIndex) { - if (this.state.pageViewports.length === 0) { + if (pageViewports.length === 0) { Log.warn('Dev error: calculatePageHeight() in PDFView called too early'); return 0; } - const pageViewport = this.state.pageViewports[pageIndex]; + setPageViewport(pageIndex); const pageWidth = this.calculatePageWidth(); const scale = pageWidth / pageViewport.width; const actualHeight = pageViewport.height * scale + PAGE_BORDER * 2; diff --git a/src/components/PDFView/index.native.js b/src/components/PDFView/index.native.js index 5e5b3b910e8a..346a3bb409af 100644 --- a/src/components/PDFView/index.native.js +++ b/src/components/PDFView/index.native.js @@ -1,4 +1,4 @@ -import React, {Component} from 'react'; +import React, {useState, useEffect} from 'react'; import {View} from 'react-native'; import PDF from 'react-native-pdf'; import KeyboardAvoidingView from '../KeyboardAvoidingView'; @@ -33,16 +33,16 @@ const propTypes = { * is (temporarily) rendered. */ -const [shouldRequestPassword, setShouldRequestPassword] = useState(false); -const [shouldAttemptPDFLoad, setShouldAttemptPDFLoad] = useState(true); -const [shouldShowLoadingIndicator, setShouldShowLoadingIndicator] = useState(true); -const [isPasswordInvalid, setIsPasswordInvalid] = useState(false); -const [failedToLoadPDF, setFailedToLoadPDF] = useState(false); -const [successToLoadPDF, setSuccessToLoadPDF] = useState(false); -const [password, setPassword] = useState(''); - function PDFView(props) { + const [shouldRequestPassword, setShouldRequestPassword] = useState(false); + const [shouldAttemptPDFLoad, setShouldAttemptPDFLoad] = useState(true); + const [shouldShowLoadingIndicator, setShouldShowLoadingIndicator] = useState(true); + const [isPasswordInvalid, setIsPasswordInvalid] = useState(false); + const [failedToLoadPDF, setFailedToLoadPDF] = useState(false); + const [successToLoadPDF, setSuccessToLoadPDF] = useState(false); + const [password, setPassword] = useState(''); + useEffect(() => { props.onToggleKeyboard(props.isKeyboardShown); },); @@ -101,7 +101,7 @@ function PDFView(props) { function finishPDFLoad() { setShouldRequestPassword(false); setShouldShowLoadingIndicator(false); - setsuccessToLoadPDF(true); + setSuccessToLoadPDF(true); props.onLoadComplete(); } @@ -133,7 +133,7 @@ function PDFView(props) { source={{uri: props.sourceURL}} style={pdfStyles} onError={handleFailureToLoadPDF} - password={state.password} + password={password} onLoadComplete={finishPDFLoad} onPageSingleTap={props.onPress} onScaleChanged={props.onScaleChanged} From 520b39d3c3445c52a94758c8dec9c28c64ae58ea Mon Sep 17 00:00:00 2001 From: Kadie Alexander Date: Tue, 17 Oct 2023 13:36:43 +1300 Subject: [PATCH 05/27] trying to make lint happy --- src/components/PDFView/index.js | 43 ++++++++++++++++---------- src/components/PDFView/index.native.js | 29 +++++++++-------- 2 files changed, 41 insertions(+), 31 deletions(-) diff --git a/src/components/PDFView/index.js b/src/components/PDFView/index.js index fd0180c082b8..bd5fe8162d2e 100644 --- a/src/components/PDFView/index.js +++ b/src/components/PDFView/index.js @@ -32,20 +32,31 @@ const PAGE_BORDER = 9; */ const LARGE_SCREEN_SIDE_SPACING = 40; -const [numPages, setNumPages] = useState(null); -const [pageViewports, setPageViewports] = useState([]); -const [containerWidth, setContainerWidth] = useState(props.windowWidth); -const [containerHeight, setContainerHeight] = useState(props.windowHeight); -const [shouldRequestPassword, setShouldRequestPassword] = useState(false); -const [isPasswordInvalid, setIsPasswordInvalid] = useState(false); -const [isKeyboardOpen, setIsKeyboardOpen] = useState(false); - - -function PDFView(props) { +class PDFView extends Component { constructor(props) { + super(props); + this.state = { + numPages: null, + pageViewports: [], + containerWidth: props.windowWidth, + containerHeight: props.windowHeight, + shouldRequestPassword: false, + isPasswordInvalid: false, + isKeyboardOpen: false, + }; + this.onDocumentLoadSuccess = this.onDocumentLoadSuccess.bind(this); + this.initiatePasswordChallenge = this.initiatePasswordChallenge.bind(this); + this.attemptPDFLoad = this.attemptPDFLoad.bind(this); + this.toggleKeyboardOnSmallScreens = this.toggleKeyboardOnSmallScreens.bind(this); + this.calculatePageHeight = this.calculatePageHeight.bind(this); + this.calculatePageWidth = this.calculatePageWidth.bind(this); + this.renderPage = this.renderPage.bind(this); + this.getDevicePixelRatio = _.memoize(this.getDevicePixelRatio); + this.setListAttributes = this.setListAttributes.bind(this); + const workerBlob = new Blob([pdfWorkerSource], {type: 'text/javascript'}); pdfjs.GlobalWorkerOptions.workerSrc = URL.createObjectURL(workerBlob); - retrieveCanvasLimits(); + this.retrieveCanvasLimits(); } componentDidUpdate(prevProps) { @@ -118,9 +129,9 @@ function PDFView(props) { */ getDevicePixelRatio(width, height) { const nbPixels = width * height; - const ratioHeight = maxCanvasHeight / height; - const ratioWidth = maxCanvasWidth / width; - const ratioArea = Math.sqrt(maxCanvasArea / nbPixels); + const ratioHeight = this.props.maxCanvasHeight / height; + const ratioWidth = this.props.maxCanvasWidth / width; + const ratioArea = Math.sqrt(this.props.maxCanvasArea / nbPixels); const ratio = Math.min(ratioHeight, ratioArea, ratioWidth); return ratio > window.devicePixelRatio ? undefined : ratio; } @@ -133,13 +144,13 @@ function PDFView(props) { * @returns {Number} */ calculatePageHeight(pageIndex) { - if (pageViewports.length === 0) { + if (this.state.pageViewports.length === 0) { Log.warn('Dev error: calculatePageHeight() in PDFView called too early'); return 0; } - setPageViewport(pageIndex); + const pageViewport = this.state.pageViewports[pageIndex]; const pageWidth = this.calculatePageWidth(); const scale = pageWidth / pageViewport.width; const actualHeight = pageViewport.height * scale + PAGE_BORDER * 2; diff --git a/src/components/PDFView/index.native.js b/src/components/PDFView/index.native.js index 346a3bb409af..e4cfe408c2a9 100644 --- a/src/components/PDFView/index.native.js +++ b/src/components/PDFView/index.native.js @@ -14,10 +14,11 @@ import withWindowDimensions from '../withWindowDimensions'; import withKeyboardState, {keyboardStatePropTypes} from '../withKeyboardState'; import withLocalize from '../withLocalize'; import CONST from '../../CONST'; + const propTypes = { ...pdfViewPropTypes, ...keyboardStatePropTypes, -} +}; /** * On the native layer, we use react-native-pdf/PDF to display PDFs. If a PDF is * password-protected we render a PDFPasswordForm to request a password @@ -34,7 +35,6 @@ const propTypes = { */ function PDFView(props) { - const [shouldRequestPassword, setShouldRequestPassword] = useState(false); const [shouldAttemptPDFLoad, setShouldAttemptPDFLoad] = useState(true); const [shouldShowLoadingIndicator, setShouldShowLoadingIndicator] = useState(true); @@ -45,7 +45,7 @@ function PDFView(props) { useEffect(() => { props.onToggleKeyboard(props.isKeyboardShown); - },); + }); /** * Initiate password challenge if message received from react-native-pdf/PDF @@ -71,7 +71,7 @@ function PDFView(props) { if (error.message.match(/password/i)) { initiatePasswordChallenge(); return; - }; + } setFailedToLoadPDF(true); setShouldShowLoadingIndicator(false); setShouldRequestPassword(false); @@ -83,21 +83,20 @@ function PDFView(props) { * in state and attempt to load the PDF. Also show the loading indicator * since react-native-pdf/PDF will need to reload the PDF. * - * @param {String} password Password submitted via PDFPasswordForm + * @param {String} pdfPassword Password submitted via PDFPasswordForm */ - function attemptPDFLoadWithPassword(password) { + function attemptPDFLoadWithPassword(pdfPassword) { // Render react-native-pdf/PDF so that it can validate the password. // Note that at this point in the password challenge, shouldRequestPassword is true. // Thus react-native-pdf/PDF will be rendered - but not visible. - setPassword(password), + setPassword(pdfPassword); setShouldAttemptPDFLoad(true); setShouldShowLoadingIndicator(true); - } - /** - * After the PDF is successfully loaded hide PDFPasswordForm and the loading - * indicator. - */ + /** + * After the PDF is successfully loaded hide PDFPasswordForm and the loading + * indicator. + */ function finishPDFLoad() { setShouldRequestPassword(false); setShouldShowLoadingIndicator(false); @@ -132,9 +131,9 @@ function PDFView(props) { renderActivityIndicator={() => } source={{uri: props.sourceURL}} style={pdfStyles} - onError={handleFailureToLoadPDF} + onError={() => handleFailureToLoadPDF} password={password} - onLoadComplete={finishPDFLoad} + onLoadComplete={() => finishPDFLoad} onPageSingleTap={props.onPress} onScaleChanged={props.onScaleChanged} /> @@ -143,7 +142,7 @@ function PDFView(props) { attemptPDFLoadWithPassword} onPasswordUpdated={() => setIsPasswordInvalid(false)} isPasswordInvalid={isPasswordInvalid} shouldShowLoadingIndicator={shouldShowLoadingIndicator} From 72f601da2c7de3bbbb445edf56554d1afaec6332 Mon Sep 17 00:00:00 2001 From: Kadie Alexander Date: Tue, 17 Oct 2023 14:51:12 +1300 Subject: [PATCH 06/27] Revert "small errors found during testing" This reverts commit 00efb240c7b2b1a01ee16c63d5d73bb27ae3c09a. --- src/components/PDFView/index.native.js | 23 ++++++++++++----------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/src/components/PDFView/index.native.js b/src/components/PDFView/index.native.js index e4cfe408c2a9..e65b11411d2a 100644 --- a/src/components/PDFView/index.native.js +++ b/src/components/PDFView/index.native.js @@ -1,4 +1,4 @@ -import React, {useState, useEffect} from 'react'; +import React, {Component} from 'react'; import {View} from 'react-native'; import PDF from 'react-native-pdf'; import KeyboardAvoidingView from '../KeyboardAvoidingView'; @@ -34,14 +34,15 @@ const propTypes = { * is (temporarily) rendered. */ +const [shouldRequestPassword, setShouldRequestPassword] = useState(false); +const [shouldAttemptPDFLoad, setShouldAttemptPDFLoad] = useState(true); +const [shouldShowLoadingIndicator, setShouldShowLoadingIndicator] = useState(true); +const [isPasswordInvalid, setIsPasswordInvalid] = useState(false); +const [failedToLoadPDF, setFailedToLoadPDF] = useState(false); +const [successToLoadPDF, setSuccessToLoadPDF] = useState(false); +const [password, setPassword] = useState(''); + function PDFView(props) { - const [shouldRequestPassword, setShouldRequestPassword] = useState(false); - const [shouldAttemptPDFLoad, setShouldAttemptPDFLoad] = useState(true); - const [shouldShowLoadingIndicator, setShouldShowLoadingIndicator] = useState(true); - const [isPasswordInvalid, setIsPasswordInvalid] = useState(false); - const [failedToLoadPDF, setFailedToLoadPDF] = useState(false); - const [successToLoadPDF, setSuccessToLoadPDF] = useState(false); - const [password, setPassword] = useState(''); useEffect(() => { props.onToggleKeyboard(props.isKeyboardShown); @@ -100,7 +101,7 @@ function PDFView(props) { function finishPDFLoad() { setShouldRequestPassword(false); setShouldShowLoadingIndicator(false); - setSuccessToLoadPDF(true); + setsuccessToLoadPDF(true); props.onLoadComplete(); } @@ -131,9 +132,9 @@ function PDFView(props) { renderActivityIndicator={() => } source={{uri: props.sourceURL}} style={pdfStyles} - onError={() => handleFailureToLoadPDF} + onError={handleFailureToLoadPDF} password={password} - onLoadComplete={() => finishPDFLoad} + onLoadComplete={finishPDFLoad} onPageSingleTap={props.onPress} onScaleChanged={props.onScaleChanged} /> From 437ebebe85a22bc08ac5e95e53aa6cb3989bf04f Mon Sep 17 00:00:00 2001 From: Kadie Alexander Date: Tue, 17 Oct 2023 14:53:25 +1300 Subject: [PATCH 07/27] Revert "small errors found during testing" This reverts commit 00efb240c7b2b1a01ee16c63d5d73bb27ae3c09a. --- src/components/PDFView/index.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/PDFView/index.native.js b/src/components/PDFView/index.native.js index e65b11411d2a..20a0230b9931 100644 --- a/src/components/PDFView/index.native.js +++ b/src/components/PDFView/index.native.js @@ -133,7 +133,7 @@ function PDFView(props) { source={{uri: props.sourceURL}} style={pdfStyles} onError={handleFailureToLoadPDF} - password={password} + password={state.password} onLoadComplete={finishPDFLoad} onPageSingleTap={props.onPress} onScaleChanged={props.onScaleChanged} From 3597be6d5c79abe2a02ba5d3e019140b1230247c Mon Sep 17 00:00:00 2001 From: Kadie Alexander Date: Tue, 17 Oct 2023 15:59:49 +1300 Subject: [PATCH 08/27] fix functions and run lint/prettier --- src/components/PDFView/index.native.js | 27 +++++++++++++------------- 1 file changed, 13 insertions(+), 14 deletions(-) diff --git a/src/components/PDFView/index.native.js b/src/components/PDFView/index.native.js index 20a0230b9931..d0b6af5a6be6 100644 --- a/src/components/PDFView/index.native.js +++ b/src/components/PDFView/index.native.js @@ -1,4 +1,4 @@ -import React, {Component} from 'react'; +import React, {useState, useEffect} from 'react'; import {View} from 'react-native'; import PDF from 'react-native-pdf'; import KeyboardAvoidingView from '../KeyboardAvoidingView'; @@ -34,15 +34,14 @@ const propTypes = { * is (temporarily) rendered. */ -const [shouldRequestPassword, setShouldRequestPassword] = useState(false); -const [shouldAttemptPDFLoad, setShouldAttemptPDFLoad] = useState(true); -const [shouldShowLoadingIndicator, setShouldShowLoadingIndicator] = useState(true); -const [isPasswordInvalid, setIsPasswordInvalid] = useState(false); -const [failedToLoadPDF, setFailedToLoadPDF] = useState(false); -const [successToLoadPDF, setSuccessToLoadPDF] = useState(false); -const [password, setPassword] = useState(''); - function PDFView(props) { + const [shouldRequestPassword, setShouldRequestPassword] = useState(false); + const [shouldAttemptPDFLoad, setShouldAttemptPDFLoad] = useState(true); + const [shouldShowLoadingIndicator, setShouldShowLoadingIndicator] = useState(true); + const [isPasswordInvalid, setIsPasswordInvalid] = useState(false); + const [failedToLoadPDF, setFailedToLoadPDF] = useState(false); + const [successToLoadPDF, setSuccessToLoadPDF] = useState(false); + const [password, setPassword] = useState(''); useEffect(() => { props.onToggleKeyboard(props.isKeyboardShown); @@ -101,7 +100,7 @@ function PDFView(props) { function finishPDFLoad() { setShouldRequestPassword(false); setShouldShowLoadingIndicator(false); - setsuccessToLoadPDF(true); + setSuccessToLoadPDF(true); props.onLoadComplete(); } @@ -132,9 +131,9 @@ function PDFView(props) { renderActivityIndicator={() => } source={{uri: props.sourceURL}} style={pdfStyles} - onError={handleFailureToLoadPDF} - password={state.password} - onLoadComplete={finishPDFLoad} + onError={(error) => handleFailureToLoadPDF(error)} + password={password} + onLoadComplete={() => finishPDFLoad()} onPageSingleTap={props.onPress} onScaleChanged={props.onScaleChanged} /> @@ -143,7 +142,7 @@ function PDFView(props) { attemptPDFLoadWithPassword} + onSubmit={() => attemptPDFLoadWithPassword()} onPasswordUpdated={() => setIsPasswordInvalid(false)} isPasswordInvalid={isPasswordInvalid} shouldShowLoadingIndicator={shouldShowLoadingIndicator} From b010edee36298596a5fdbed888d60db91a95731f Mon Sep 17 00:00:00 2001 From: Kadie Alexander Date: Tue, 7 Nov 2023 19:51:42 +1300 Subject: [PATCH 09/27] ran prettier --- src/components/PDFView/index.native.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/PDFView/index.native.js b/src/components/PDFView/index.native.js index 71d00704f18b..086fae8305fc 100644 --- a/src/components/PDFView/index.native.js +++ b/src/components/PDFView/index.native.js @@ -1,4 +1,5 @@ -import React, {useState, useEffect} from 'react'; +import {PasswordResponses} from 'pdfjs-dist'; +import React, {useEffect, useState} from 'react'; import {View} from 'react-native'; import PDF from 'react-native-pdf'; import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; @@ -142,7 +143,7 @@ function PDFView(props) { attemptPDFLoadWithPassword()} + onSubmit={(formPasswordValue) => attemptPDFLoadWithPassword(formPasswordValue)} onPasswordUpdated={() => setIsPasswordInvalid(false)} isPasswordInvalid={isPasswordInvalid} shouldShowLoadingIndicator={shouldShowLoadingIndicator} From c15f3d4d3d4cb4d5be2d151ceeab91619a066f11 Mon Sep 17 00:00:00 2001 From: Kadie Alexander Date: Tue, 7 Nov 2023 20:18:28 +1300 Subject: [PATCH 10/27] removed unnecessary PasswordResponses definition --- src/components/PDFView/index.native.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/PDFView/index.native.js b/src/components/PDFView/index.native.js index 086fae8305fc..cc360c3adc68 100644 --- a/src/components/PDFView/index.native.js +++ b/src/components/PDFView/index.native.js @@ -1,4 +1,3 @@ -import {PasswordResponses} from 'pdfjs-dist'; import React, {useEffect, useState} from 'react'; import {View} from 'react-native'; import PDF from 'react-native-pdf'; From cc5e2de0cc3e5befc7900f35371af40f3b300dd2 Mon Sep 17 00:00:00 2001 From: Kadie Alexander Date: Tue, 28 Nov 2023 10:41:30 +1300 Subject: [PATCH 11/27] destructured props --- src/components/PDFView/index.native.js | 42 +++++++++++++++++--------- 1 file changed, 28 insertions(+), 14 deletions(-) diff --git a/src/components/PDFView/index.native.js b/src/components/PDFView/index.native.js index cc360c3adc68..b821b7d18e9d 100644 --- a/src/components/PDFView/index.native.js +++ b/src/components/PDFView/index.native.js @@ -34,7 +34,20 @@ const propTypes = { * is (temporarily) rendered. */ -function PDFView(props) { +function PDFView({ + onToggleKeyboard, + isKeyboardShown, + onLoadComplete, + translate, + fileName, + onPress, + isFocused, + onScaleChanged, + sourceURL, + isSmallScreenWidth, + windowWidth, + windowHeight, + errorLabelStyles}) { const [shouldRequestPassword, setShouldRequestPassword] = useState(false); const [shouldAttemptPDFLoad, setShouldAttemptPDFLoad] = useState(true); const [shouldShowLoadingIndicator, setShouldShowLoadingIndicator] = useState(true); @@ -44,7 +57,7 @@ function PDFView(props) { const [password, setPassword] = useState(''); useEffect(() => { - props.onToggleKeyboard(props.isKeyboardShown); + onToggleKeyboard(isKeyboardShown); }); /** @@ -101,11 +114,11 @@ function PDFView(props) { setShouldRequestPassword(false); setShouldShowLoadingIndicator(false); setSuccessToLoadPDF(true); - props.onLoadComplete(); + onLoadComplete(); } function renderPDFView() { - const pdfStyles = [styles.imageModalPDF, StyleUtils.getWidthAndHeightStyle(props.windowWidth, props.windowHeight)]; + const pdfStyles = [styles.imageModalPDF, StyleUtils.getWidthAndHeightStyle(windowWidth, windowHeight)]; // If we haven't yet successfully validated the password and loaded the PDF, // then we need to hide the react-native-pdf/PDF component so that PDFPasswordForm @@ -115,13 +128,13 @@ function PDFView(props) { pdfStyles.push(styles.invisible); } - const containerStyles = shouldRequestPassword && props.isSmallScreenWidth ? [styles.w100, styles.flex1] : [styles.alignItemsCenter, styles.flex1]; + const containerStyles = shouldRequestPassword && isSmallScreenWidth ? [styles.w100, styles.flex1] : [styles.alignItemsCenter, styles.flex1]; return ( {failedToLoadPDF && ( - {props.translate('attachmentView.failedToLoadPDF')} + {translate('attachmentView.failedToLoadPDF')} )} {shouldAttemptPDFLoad && ( @@ -129,19 +142,19 @@ function PDFView(props) { fitPolicy={0} trustAllCerts={false} renderActivityIndicator={() => } - source={{uri: props.sourceURL}} + source={{uri: sourceURL}} style={pdfStyles} onError={(error) => handleFailureToLoadPDF(error)} password={password} onLoadComplete={() => finishPDFLoad()} - onPageSingleTap={props.onPress} - onScaleChanged={props.onScaleChanged} + onPageSingleTap={onPress} + onScaleChanged={onScaleChanged} /> )} {shouldRequestPassword && ( attemptPDFLoadWithPassword(formPasswordValue)} onPasswordUpdated={() => setIsPasswordInvalid(false)} isPasswordInvalid={isPasswordInvalid} @@ -153,12 +166,12 @@ function PDFView(props) { ); } - return props.onPress && !successToLoadPDF ? ( + return onPress && !successToLoadPDF ? ( {renderPDFView()} @@ -166,6 +179,7 @@ function PDFView(props) { renderPDFView() ); } +PDFView.displayName = 'PDFView'; PDFView.propTypes = propTypes; PDFView.defaultProps = defaultProps; From 8b5081d78f00abb0325cf07b257a803cb476247a Mon Sep 17 00:00:00 2001 From: Kadie Alexander Date: Tue, 28 Nov 2023 10:43:29 +1300 Subject: [PATCH 12/27] destructured props --- src/components/PDFView/index.native.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/components/PDFView/index.native.js b/src/components/PDFView/index.native.js index b821b7d18e9d..e2522f475db8 100644 --- a/src/components/PDFView/index.native.js +++ b/src/components/PDFView/index.native.js @@ -35,8 +35,8 @@ const propTypes = { */ function PDFView({ - onToggleKeyboard, - isKeyboardShown, + onToggleKeyboard, + isKeyboardShown, onLoadComplete, translate, fileName, @@ -45,9 +45,10 @@ function PDFView({ onScaleChanged, sourceURL, isSmallScreenWidth, - windowWidth, + windowWidth, windowHeight, - errorLabelStyles}) { + errorLabelStyles, +}) { const [shouldRequestPassword, setShouldRequestPassword] = useState(false); const [shouldAttemptPDFLoad, setShouldAttemptPDFLoad] = useState(true); const [shouldShowLoadingIndicator, setShouldShowLoadingIndicator] = useState(true); From f842efce2995f39a6a008f420f55e68b12659068 Mon Sep 17 00:00:00 2001 From: Kadie Alexander Date: Tue, 28 Nov 2023 10:57:55 +1300 Subject: [PATCH 13/27] updated arrow functions per comment --- src/components/PDFView/index.native.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/PDFView/index.native.js b/src/components/PDFView/index.native.js index e2522f475db8..4bdaaedbd4ea 100644 --- a/src/components/PDFView/index.native.js +++ b/src/components/PDFView/index.native.js @@ -81,7 +81,7 @@ function PDFView({ } } - function handleFailureToLoadPDF(error) { + const handleFailureToLoadPDF = (error) => { if (error.message.match(/password/i)) { initiatePasswordChallenge(); return; @@ -90,7 +90,7 @@ function PDFView({ setShouldShowLoadingIndicator(false); setShouldRequestPassword(false); setShouldAttemptPDFLoad(false); - } + }; /** * When the password is submitted via PDFPasswordForm, save the password @@ -111,12 +111,12 @@ function PDFView({ * After the PDF is successfully loaded hide PDFPasswordForm and the loading * indicator. */ - function finishPDFLoad() { + const finishPDFLoad = () => { setShouldRequestPassword(false); setShouldShowLoadingIndicator(false); setSuccessToLoadPDF(true); onLoadComplete(); - } + }; function renderPDFView() { const pdfStyles = [styles.imageModalPDF, StyleUtils.getWidthAndHeightStyle(windowWidth, windowHeight)]; @@ -145,9 +145,9 @@ function PDFView({ renderActivityIndicator={() => } source={{uri: sourceURL}} style={pdfStyles} - onError={(error) => handleFailureToLoadPDF(error)} + onError={handleFailureToLoadPDF} password={password} - onLoadComplete={() => finishPDFLoad()} + onLoadComplete={finishPDFLoad} onPageSingleTap={onPress} onScaleChanged={onScaleChanged} /> @@ -157,7 +157,7 @@ function PDFView({ attemptPDFLoadWithPassword(formPasswordValue)} - onPasswordUpdated={() => setIsPasswordInvalid(false)} + onPasswordUpdated={setIsPasswordInvalid(false)} isPasswordInvalid={isPasswordInvalid} shouldShowLoadingIndicator={shouldShowLoadingIndicator} /> From 76c508e856c93a4db6d435a0db78075bd2f823b3 Mon Sep 17 00:00:00 2001 From: Kadie Alexander Date: Tue, 28 Nov 2023 11:03:08 +1300 Subject: [PATCH 14/27] updated arrow function for onSubmit per comment --- src/components/PDFView/index.native.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/PDFView/index.native.js b/src/components/PDFView/index.native.js index 4bdaaedbd4ea..eac644606f2e 100644 --- a/src/components/PDFView/index.native.js +++ b/src/components/PDFView/index.native.js @@ -99,14 +99,14 @@ function PDFView({ * * @param {String} pdfPassword Password submitted via PDFPasswordForm */ - function attemptPDFLoadWithPassword(pdfPassword) { + const attemptPDFLoadWithPassword = (pdfPassword) => { // Render react-native-pdf/PDF so that it can validate the password. // Note that at this point in the password challenge, shouldRequestPassword is true. // Thus react-native-pdf/PDF will be rendered - but not visible. setPassword(pdfPassword); setShouldAttemptPDFLoad(true); setShouldShowLoadingIndicator(true); - } + }; /** * After the PDF is successfully loaded hide PDFPasswordForm and the loading * indicator. @@ -156,7 +156,7 @@ function PDFView({ attemptPDFLoadWithPassword(formPasswordValue)} + onSubmit={attemptPDFLoadWithPassword} onPasswordUpdated={setIsPasswordInvalid(false)} isPasswordInvalid={isPasswordInvalid} shouldShowLoadingIndicator={shouldShowLoadingIndicator} From e527f419b287fcf3b72370a1c5ebbb6c4608727a Mon Sep 17 00:00:00 2001 From: Kadie Alexander Date: Tue, 28 Nov 2023 11:11:44 +1300 Subject: [PATCH 15/27] updated arrow function for onPasswordUpdated due to incorrect change --- src/components/PDFView/index.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/PDFView/index.native.js b/src/components/PDFView/index.native.js index eac644606f2e..c1e45520d49f 100644 --- a/src/components/PDFView/index.native.js +++ b/src/components/PDFView/index.native.js @@ -157,7 +157,7 @@ function PDFView({ setIsPasswordInvalid(false)} isPasswordInvalid={isPasswordInvalid} shouldShowLoadingIndicator={shouldShowLoadingIndicator} /> From 7d8fbbe35b9c28fc796ffea863c93a2501226362 Mon Sep 17 00:00:00 2001 From: Kadie Alexander Date: Tue, 12 Dec 2023 09:01:12 +1300 Subject: [PATCH 16/27] merge with main and addressed reviewer comments --- src/components/PDFView/index.native.js | 29 ++++++++++++++++---------- 1 file changed, 18 insertions(+), 11 deletions(-) diff --git a/src/components/PDFView/index.native.js b/src/components/PDFView/index.native.js index 922123f123cc..a00f07e2dd2e 100644 --- a/src/components/PDFView/index.native.js +++ b/src/components/PDFView/index.native.js @@ -1,17 +1,18 @@ -import React, {useEffect, useState} from 'react'; +import React, {useEffect, useState, useCallback} from 'react'; import {View} from 'react-native'; import PDF from 'react-native-pdf'; +import CONST from '@src/CONST'; +import compose from '@libs/compose'; import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; import KeyboardAvoidingView from '@components/KeyboardAvoidingView'; import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback'; import Text from '@components/Text'; -import withKeyboardState, {keyboardStatePropTypes} from '@components/withKeyboardState'; -import withLocalize from '@components/withLocalize'; +import useKeyboardState, {keyboardStatePropTypes} from '@hooks/useKeyboardState'; +import useLocalize from '@hooks/useLocalize'; import withStyleUtils, {withStyleUtilsPropTypes} from '@components/withStyleUtils'; -import withThemeStyles, {withThemeStylesPropTypes} from '@components/withThemeStyles'; -import withWindowDimensions from '@components/withWindowDimensions'; -import compose from '@libs/compose'; -import CONST from '@src/CONST'; +import useThemeStyles from '@styles/useThemeStyles'; +import useWindowDimensions from '@hooks/useWindowDimensions'; +import {withThemeStylesPropTypes} from '@components/withThemeStyles'; import PDFPasswordForm from './PDFPasswordForm'; import {defaultProps, propTypes as pdfViewPropTypes} from './pdfViewPropTypes'; @@ -21,6 +22,7 @@ const propTypes = { ...withThemeStylesPropTypes, ...withStyleUtilsPropTypes, }; + /** * On the native layer, we use react-native-pdf/PDF to display PDFs. If a PDF is * password-protected we render a PDFPasswordForm to request a password @@ -72,18 +74,23 @@ function PDFView({ * Note that the message doesn't specify whether the password is simply empty or * invalid. */ - - function initiatePasswordChallenge() { + + const initiatePasswordChallenge = useCallback(() => { setShouldShowLoadingIndicator(false); + + // Render password form, and don't render PDF and loading indicator. + setShouldRequestPassword(true); setShouldAttemptPDFLoad(false); + // The message provided by react-native-pdf doesn't indicate whether this // is an initial password request or if the password is invalid. So we just assume // that if a password was already entered then it's an invalid password error. + if (password) { setIsPasswordInvalid(true); } - } + }, [password]); const handleFailureToLoadPDF = (error) => { if (error.message.match(/password/i)) { @@ -188,4 +195,4 @@ PDFView.displayName = 'PDFView'; PDFView.propTypes = propTypes; PDFView.defaultProps = defaultProps; -export default compose(withWindowDimensions, withKeyboardState, withLocalize, withThemeStyles, withStyleUtils)(PDFView); +export default compose(useWindowDimensions, useKeyboardState, useLocalize, useThemeStyles, withStyleUtils)(PDFView); From ee78ab661b77202031184fe5ab15c84a0b0cf815 Mon Sep 17 00:00:00 2001 From: Kadie Alexander Date: Tue, 12 Dec 2023 10:09:15 +1300 Subject: [PATCH 17/27] fix lint issue --- src/components/PDFView/index.native.js | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/src/components/PDFView/index.native.js b/src/components/PDFView/index.native.js index a00f07e2dd2e..96660062d600 100644 --- a/src/components/PDFView/index.native.js +++ b/src/components/PDFView/index.native.js @@ -1,18 +1,19 @@ -import React, {useEffect, useState, useCallback} from 'react'; +import React, {useCallback, useEffect, useState} from 'react'; import {View} from 'react-native'; import PDF from 'react-native-pdf'; -import CONST from '@src/CONST'; -import compose from '@libs/compose'; import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; import KeyboardAvoidingView from '@components/KeyboardAvoidingView'; import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback'; import Text from '@components/Text'; +import {withStyleUtilsPropTypes} from '@components/withStyleUtils'; +import {withThemeStylesPropTypes} from '@components/withThemeStyles'; import useKeyboardState, {keyboardStatePropTypes} from '@hooks/useKeyboardState'; import useLocalize from '@hooks/useLocalize'; -import withStyleUtils, {withStyleUtilsPropTypes} from '@components/withStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; -import {withThemeStylesPropTypes} from '@components/withThemeStyles'; +import compose from '@libs/compose'; +import useStyleUtils from '@styles/useStyleUtils'; +import useThemeStyles from '@styles/useThemeStyles'; +import CONST from '@src/CONST'; import PDFPasswordForm from './PDFPasswordForm'; import {defaultProps, propTypes as pdfViewPropTypes} from './pdfViewPropTypes'; @@ -61,6 +62,7 @@ function PDFView({ const [failedToLoadPDF, setFailedToLoadPDF] = useState(false); const [successToLoadPDF, setSuccessToLoadPDF] = useState(false); const [password, setPassword] = useState(''); + const StyleUtils = useStyleUtils(); useEffect(() => { onToggleKeyboard(isKeyboardShown); @@ -86,7 +88,7 @@ function PDFView({ // The message provided by react-native-pdf doesn't indicate whether this // is an initial password request or if the password is invalid. So we just assume // that if a password was already entered then it's an invalid password error. - + if (password) { setIsPasswordInvalid(true); } @@ -195,4 +197,4 @@ PDFView.displayName = 'PDFView'; PDFView.propTypes = propTypes; PDFView.defaultProps = defaultProps; -export default compose(useWindowDimensions, useKeyboardState, useLocalize, useThemeStyles, withStyleUtils)(PDFView); +export default compose(useWindowDimensions, useKeyboardState, useLocalize, useThemeStyles, useStyleUtils)(PDFView); From 371b846fff8780b86fa7e7e633f6ce3fb2557a43 Mon Sep 17 00:00:00 2001 From: Kadie Alexander Date: Tue, 12 Dec 2023 11:21:23 +1300 Subject: [PATCH 18/27] fix hook issue with previous commit --- src/components/PDFView/index.native.js | 46 ++++++++------------------ 1 file changed, 13 insertions(+), 33 deletions(-) diff --git a/src/components/PDFView/index.native.js b/src/components/PDFView/index.native.js index 96660062d600..b2088aba2962 100644 --- a/src/components/PDFView/index.native.js +++ b/src/components/PDFView/index.native.js @@ -5,12 +5,9 @@ import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; import KeyboardAvoidingView from '@components/KeyboardAvoidingView'; import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback'; import Text from '@components/Text'; -import {withStyleUtilsPropTypes} from '@components/withStyleUtils'; -import {withThemeStylesPropTypes} from '@components/withThemeStyles'; -import useKeyboardState, {keyboardStatePropTypes} from '@hooks/useKeyboardState'; +import useKeyboardState from '@hooks/useKeyboardState'; import useLocalize from '@hooks/useLocalize'; import useWindowDimensions from '@hooks/useWindowDimensions'; -import compose from '@libs/compose'; import useStyleUtils from '@styles/useStyleUtils'; import useThemeStyles from '@styles/useThemeStyles'; import CONST from '@src/CONST'; @@ -19,11 +16,7 @@ import {defaultProps, propTypes as pdfViewPropTypes} from './pdfViewPropTypes'; const propTypes = { ...pdfViewPropTypes, - ...keyboardStatePropTypes, - ...withThemeStylesPropTypes, - ...withStyleUtilsPropTypes, }; - /** * On the native layer, we use react-native-pdf/PDF to display PDFs. If a PDF is * password-protected we render a PDFPasswordForm to request a password @@ -39,22 +32,7 @@ const propTypes = { * is (temporarily) rendered. */ -function PDFView({ - onToggleKeyboard, - isKeyboardShown, - onLoadComplete, - translate, - fileName, - onPress, - isFocused, - onScaleChanged, - sourceURL, - isSmallScreenWidth, - windowWidth, - windowHeight, - errorLabelStyles, - themeStyles, -}) { +function PDFView({onToggleKeyboard, onLoadComplete, fileName, onPress, isFocused, onScaleChanged, sourceURL, errorLabelStyles}) { const [shouldRequestPassword, setShouldRequestPassword] = useState(false); const [shouldAttemptPDFLoad, setShouldAttemptPDFLoad] = useState(true); const [shouldShowLoadingIndicator, setShouldShowLoadingIndicator] = useState(true); @@ -62,6 +40,10 @@ function PDFView({ const [failedToLoadPDF, setFailedToLoadPDF] = useState(false); const [successToLoadPDF, setSuccessToLoadPDF] = useState(false); const [password, setPassword] = useState(''); + const {windowWidth, windowHeight, isSmallScreenWidth} = useWindowDimensions(); + const {translate} = useLocalize(); + const styles = useThemeStyles(); + const isKeyboardShown = useKeyboardState(); const StyleUtils = useStyleUtils(); useEffect(() => { @@ -81,14 +63,12 @@ function PDFView({ setShouldShowLoadingIndicator(false); // Render password form, and don't render PDF and loading indicator. - setShouldRequestPassword(true); setShouldAttemptPDFLoad(false); // The message provided by react-native-pdf doesn't indicate whether this // is an initial password request or if the password is invalid. So we just assume // that if a password was already entered then it's an invalid password error. - if (password) { setIsPasswordInvalid(true); } @@ -132,22 +112,22 @@ function PDFView({ }; function renderPDFView() { - const pdfStyles = [themeStyles.imageModalPDF, StyleUtils.getWidthAndHeightStyle(windowWidth, windowHeight)]; + const pdfStyles = [styles.imageModalPDF, StyleUtils.getWidthAndHeightStyle(windowWidth, windowHeight)]; // If we haven't yet successfully validated the password and loaded the PDF, // then we need to hide the react-native-pdf/PDF component so that PDFPasswordForm // is positioned nicely. We're specifically hiding it because we still need to render // the PDF component so that it can validate the password. if (shouldRequestPassword) { - pdfStyles.push(themeStyles.invisible); + pdfStyles.push(styles.invisible); } - const containerStyles = shouldRequestPassword && isSmallScreenWidth ? [themeStyles.w100, themeStyles.flex1] : [themeStyles.alignItemsCenter, themeStyles.flex1]; + const containerStyles = shouldRequestPassword && isSmallScreenWidth ? [styles.w100, styles.flex1] : [styles.alignItemsCenter, styles.flex1]; return ( {failedToLoadPDF && ( - + {translate('attachmentView.failedToLoadPDF')} )} @@ -166,7 +146,7 @@ function PDFView({ /> )} {shouldRequestPassword && ( - + @@ -197,4 +177,4 @@ PDFView.displayName = 'PDFView'; PDFView.propTypes = propTypes; PDFView.defaultProps = defaultProps; -export default compose(useWindowDimensions, useKeyboardState, useLocalize, useThemeStyles, useStyleUtils)(PDFView); +export default PDFView; From 203e2ba67d44ec2c355181e88f4f202b16af07a2 Mon Sep 17 00:00:00 2001 From: kadiealexander <59587260+kadiealexander@users.noreply.github.com> Date: Tue, 12 Dec 2023 11:53:41 +1300 Subject: [PATCH 19/27] Update index.native.js add line break --- src/components/PDFView/index.native.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/PDFView/index.native.js b/src/components/PDFView/index.native.js index b2088aba2962..38ecf1d5eee6 100644 --- a/src/components/PDFView/index.native.js +++ b/src/components/PDFView/index.native.js @@ -17,6 +17,7 @@ import {defaultProps, propTypes as pdfViewPropTypes} from './pdfViewPropTypes'; const propTypes = { ...pdfViewPropTypes, }; + /** * On the native layer, we use react-native-pdf/PDF to display PDFs. If a PDF is * password-protected we render a PDFPasswordForm to request a password From d20986f9ef855436f2f769fb135d1a000d6da3c1 Mon Sep 17 00:00:00 2001 From: kadiealexander <59587260+kadiealexander@users.noreply.github.com> Date: Tue, 12 Dec 2023 11:54:46 +1300 Subject: [PATCH 20/27] Update index.native.js add line break near end of file --- src/components/PDFView/index.native.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/PDFView/index.native.js b/src/components/PDFView/index.native.js index 38ecf1d5eee6..c47ebcaf1093 100644 --- a/src/components/PDFView/index.native.js +++ b/src/components/PDFView/index.native.js @@ -174,6 +174,7 @@ function PDFView({onToggleKeyboard, onLoadComplete, fileName, onPress, isFocused renderPDFView() ); } + PDFView.displayName = 'PDFView'; PDFView.propTypes = propTypes; PDFView.defaultProps = defaultProps; From 0b0ed8c8a22540e1fbb49e0849885c7201e4c724 Mon Sep 17 00:00:00 2001 From: Kadie Alexander Date: Thu, 11 Jan 2024 18:22:11 +1300 Subject: [PATCH 21/27] fix lint error --- src/components/PDFView/index.native.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/PDFView/index.native.js b/src/components/PDFView/index.native.js index 6f1dfb5dc405..af3980f663ef 100644 --- a/src/components/PDFView/index.native.js +++ b/src/components/PDFView/index.native.js @@ -43,7 +43,7 @@ function PDFView({onToggleKeyboard, onLoadComplete, fileName, onPress, isFocused const [password, setPassword] = useState(''); const {windowWidth, windowHeight, isSmallScreenWidth} = useWindowDimensions(); const {translate} = useLocalize(); - const styles = useThemeStyles(); + const themeStyles = useThemeStyles(); const isKeyboardShown = useKeyboardState(); const StyleUtils = useStyleUtils(); @@ -113,22 +113,22 @@ function PDFView({onToggleKeyboard, onLoadComplete, fileName, onPress, isFocused }; function renderPDFView() { - const pdfStyles = [styles.imageModalPDF, StyleUtils.getWidthAndHeightStyle(windowWidth, windowHeight)]; + const pdfStyles = [themeStyles.imageModalPDF, StyleUtils.getWidthAndHeightStyle(windowWidth, windowHeight)]; // If we haven't yet successfully validated the password and loaded the PDF, // then we need to hide the react-native-pdf/PDF component so that PDFPasswordForm // is positioned nicely. We're specifically hiding it because we still need to render // the PDF component so that it can validate the password. if (shouldRequestPassword) { - pdfStyles.push(styles.invisible); + pdfStyles.push(themeStyles.invisible); } - const containerStyles = shouldRequestPassword && isSmallScreenWidth ? [styles.w100, styles.flex1] : [styles.alignItemsCenter, styles.flex1]; + const containerStyles = shouldRequestPassword && isSmallScreenWidth ? [themeStyles.w100, themeStyles.flex1] : [themeStyles.alignItemsCenter, themeStyles.flex1]; return ( {failedToLoadPDF && ( - + {translate('attachmentView.failedToLoadPDF')} )} @@ -147,7 +147,7 @@ function PDFView({onToggleKeyboard, onLoadComplete, fileName, onPress, isFocused /> )} {shouldRequestPassword && ( - + Date: Thu, 11 Jan 2024 18:28:06 +1300 Subject: [PATCH 22/27] fix lint error --- src/components/PDFView/index.native.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/PDFView/index.native.js b/src/components/PDFView/index.native.js index af3980f663ef..456b0c38d56e 100644 --- a/src/components/PDFView/index.native.js +++ b/src/components/PDFView/index.native.js @@ -8,8 +8,8 @@ import Text from '@components/Text'; import useKeyboardState from '@hooks/useKeyboardState'; import useLocalize from '@hooks/useLocalize'; import useWindowDimensions from '@hooks/useWindowDimensions'; -import useStyleUtils from '@styles/useStyleUtils'; -import useThemeStyles from '@styles/useThemeStyles'; +import useStyleUtils from '@hooks//useStyleUtils'; +import useThemeStyles from '@hooks//useThemeStyles'; import CONST from '@src/CONST'; import PDFPasswordForm from './PDFPasswordForm'; import {defaultProps, propTypes as pdfViewPropTypes} from './pdfViewPropTypes'; From b42a4b26b2735f5ef7f4bed48742cf60904aa2f4 Mon Sep 17 00:00:00 2001 From: Kadie Alexander Date: Thu, 11 Jan 2024 18:38:14 +1300 Subject: [PATCH 23/27] fixing weird lint error --- src/pages/RoomInvitePage.js | 2 +- src/pages/workspace/WorkspaceInvitePage.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/RoomInvitePage.js b/src/pages/RoomInvitePage.js index 5254339dd7ba..e8db700fc315 100644 --- a/src/pages/RoomInvitePage.js +++ b/src/pages/RoomInvitePage.js @@ -1,4 +1,4 @@ -import {parsePhoneNumber} from 'awesome-phonenumber'; +import {parsePhoneNumber} from '@libs/PhoneNumber'; import Str from 'expensify-common/lib/str'; import lodashGet from 'lodash/get'; import PropTypes from 'prop-types'; diff --git a/src/pages/workspace/WorkspaceInvitePage.js b/src/pages/workspace/WorkspaceInvitePage.js index 1f75ea0f1aa0..c30ad6d5ebf3 100644 --- a/src/pages/workspace/WorkspaceInvitePage.js +++ b/src/pages/workspace/WorkspaceInvitePage.js @@ -1,4 +1,4 @@ -import {parsePhoneNumber} from 'awesome-phonenumber'; +import {parsePhoneNumber} from '@libs/PhoneNumber'; import Str from 'expensify-common/lib/str'; import lodashGet from 'lodash/get'; import PropTypes from 'prop-types'; From c9e539716e72bcc9ff34e9072f0b0f020506c311 Mon Sep 17 00:00:00 2001 From: Kadie Alexander Date: Thu, 11 Jan 2024 18:42:22 +1300 Subject: [PATCH 24/27] fixing lint error --- src/components/PDFView/index.native.js | 4 ++-- src/pages/RoomInvitePage.js | 2 +- src/pages/workspace/WorkspaceInvitePage.js | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/PDFView/index.native.js b/src/components/PDFView/index.native.js index 456b0c38d56e..5ed1655d7eab 100644 --- a/src/components/PDFView/index.native.js +++ b/src/components/PDFView/index.native.js @@ -5,11 +5,11 @@ import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; import KeyboardAvoidingView from '@components/KeyboardAvoidingView'; import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback'; import Text from '@components/Text'; +import useStyleUtils from '@hooks//useStyleUtils'; +import useThemeStyles from '@hooks//useThemeStyles'; import useKeyboardState from '@hooks/useKeyboardState'; import useLocalize from '@hooks/useLocalize'; import useWindowDimensions from '@hooks/useWindowDimensions'; -import useStyleUtils from '@hooks//useStyleUtils'; -import useThemeStyles from '@hooks//useThemeStyles'; import CONST from '@src/CONST'; import PDFPasswordForm from './PDFPasswordForm'; import {defaultProps, propTypes as pdfViewPropTypes} from './pdfViewPropTypes'; diff --git a/src/pages/RoomInvitePage.js b/src/pages/RoomInvitePage.js index e8db700fc315..d2ef900b051f 100644 --- a/src/pages/RoomInvitePage.js +++ b/src/pages/RoomInvitePage.js @@ -1,4 +1,3 @@ -import {parsePhoneNumber} from '@libs/PhoneNumber'; import Str from 'expensify-common/lib/str'; import lodashGet from 'lodash/get'; import PropTypes from 'prop-types'; @@ -19,6 +18,7 @@ import * as LoginUtils from '@libs/LoginUtils'; import Navigation from '@libs/Navigation/Navigation'; import * as OptionsListUtils from '@libs/OptionsListUtils'; import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils'; +import {parsePhoneNumber} from '@libs/PhoneNumber'; import * as PolicyUtils from '@libs/PolicyUtils'; import * as ReportUtils from '@libs/ReportUtils'; import * as Report from '@userActions/Report'; diff --git a/src/pages/workspace/WorkspaceInvitePage.js b/src/pages/workspace/WorkspaceInvitePage.js index c30ad6d5ebf3..c7a1da7b64ff 100644 --- a/src/pages/workspace/WorkspaceInvitePage.js +++ b/src/pages/workspace/WorkspaceInvitePage.js @@ -1,4 +1,3 @@ -import {parsePhoneNumber} from '@libs/PhoneNumber'; import Str from 'expensify-common/lib/str'; import lodashGet from 'lodash/get'; import PropTypes from 'prop-types'; @@ -19,6 +18,7 @@ import * as DeviceCapabilities from '@libs/DeviceCapabilities'; import * as LoginUtils from '@libs/LoginUtils'; import Navigation from '@libs/Navigation/Navigation'; import * as OptionsListUtils from '@libs/OptionsListUtils'; +import {parsePhoneNumber} from '@libs/PhoneNumber'; import * as PolicyUtils from '@libs/PolicyUtils'; import * as Policy from '@userActions/Policy'; import CONST from '@src/CONST'; From 4c08eb6fba7d4740e70ab4fbed79c1dd2c66ae2b Mon Sep 17 00:00:00 2001 From: kadiealexander <59587260+kadiealexander@users.noreply.github.com> Date: Wed, 17 Jan 2024 18:45:06 +1300 Subject: [PATCH 25/27] Update src/components/PDFView/index.native.js Co-authored-by: 0xmiroslav <97473779+0xmiroslav@users.noreply.github.com> --- src/components/PDFView/index.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/PDFView/index.native.js b/src/components/PDFView/index.native.js index 5ed1655d7eab..4395f7432e91 100644 --- a/src/components/PDFView/index.native.js +++ b/src/components/PDFView/index.native.js @@ -44,7 +44,7 @@ function PDFView({onToggleKeyboard, onLoadComplete, fileName, onPress, isFocused const {windowWidth, windowHeight, isSmallScreenWidth} = useWindowDimensions(); const {translate} = useLocalize(); const themeStyles = useThemeStyles(); - const isKeyboardShown = useKeyboardState(); + const {isKeyboardShown} = useKeyboardState(); const StyleUtils = useStyleUtils(); useEffect(() => { From 347c1f5e64ca1030c08fc973915236623b4b3d99 Mon Sep 17 00:00:00 2001 From: kadiealexander <59587260+kadiealexander@users.noreply.github.com> Date: Fri, 19 Jan 2024 17:47:05 +1300 Subject: [PATCH 26/27] Update src/components/PDFView/index.native.js Co-authored-by: 0xmiroslav <97473779+0xmiroslav@users.noreply.github.com> --- src/components/PDFView/index.native.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/PDFView/index.native.js b/src/components/PDFView/index.native.js index 4395f7432e91..856ca17b89ab 100644 --- a/src/components/PDFView/index.native.js +++ b/src/components/PDFView/index.native.js @@ -5,8 +5,8 @@ import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; import KeyboardAvoidingView from '@components/KeyboardAvoidingView'; import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback'; import Text from '@components/Text'; -import useStyleUtils from '@hooks//useStyleUtils'; -import useThemeStyles from '@hooks//useThemeStyles'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useThemeStyles from '@hooks/useThemeStyles'; import useKeyboardState from '@hooks/useKeyboardState'; import useLocalize from '@hooks/useLocalize'; import useWindowDimensions from '@hooks/useWindowDimensions'; From a74f76b22bdf8767fec5e52eeef524216ce6a39a Mon Sep 17 00:00:00 2001 From: Kadie Alexander Date: Fri, 19 Jan 2024 17:57:05 +1300 Subject: [PATCH 27/27] running prettier --- src/components/PDFView/index.native.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/PDFView/index.native.js b/src/components/PDFView/index.native.js index 856ca17b89ab..3802fe7a2ea6 100644 --- a/src/components/PDFView/index.native.js +++ b/src/components/PDFView/index.native.js @@ -5,10 +5,10 @@ import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; import KeyboardAvoidingView from '@components/KeyboardAvoidingView'; import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback'; import Text from '@components/Text'; -import useStyleUtils from '@hooks/useStyleUtils'; -import useThemeStyles from '@hooks/useThemeStyles'; import useKeyboardState from '@hooks/useKeyboardState'; import useLocalize from '@hooks/useLocalize'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import CONST from '@src/CONST'; import PDFPasswordForm from './PDFPasswordForm';