From 1f0cdd1f9386c356251f9677e6d0dccdd07a9167 Mon Sep 17 00:00:00 2001 From: Majid Date: Thu, 19 Oct 2023 17:16:51 +0200 Subject: [PATCH 1/4] fix: invisible fail to load message --- assets/css/pdf.css | 7 +------ src/components/AttachmentModal.js | 1 + .../Attachments/AttachmentView/AttachmentViewPdf/index.js | 3 ++- .../AttachmentView/AttachmentViewPdf/index.native.js | 3 ++- .../AttachmentView/AttachmentViewPdf/propTypes.js | 5 +++++ src/components/Attachments/AttachmentView/index.js | 3 +++ src/components/Attachments/AttachmentView/propTypes.js | 4 ++++ src/components/PDFView/index.js | 6 ++++-- src/components/PDFView/index.native.js | 5 ++++- src/components/PDFView/pdfViewPropTypes.js | 4 ++++ src/styles/styles.ts | 2 -- 11 files changed, 30 insertions(+), 13 deletions(-) diff --git a/assets/css/pdf.css b/assets/css/pdf.css index 9cbbf31b074c..26c80a5baf27 100644 --- a/assets/css/pdf.css +++ b/assets/css/pdf.css @@ -11,12 +11,7 @@ border-image: url(../images/shadow.png) 9 9 repeat; background-color: rgba(255, 255, 255, 1); } -.react-pdf__message { - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); -} + .react-pdf__Page__annotations { height: 0; } diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js index 61b138747950..d73835ce972a 100755 --- a/src/components/AttachmentModal.js +++ b/src/components/AttachmentModal.js @@ -447,6 +447,7 @@ function AttachmentModal(props) { onToggleKeyboard={updateConfirmButtonVisibility} isWorkspaceAvatar={props.isWorkspaceAvatar} fallbackSource={props.fallbackSource} + isUsedInAttachmentModal /> ) )} diff --git a/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.js b/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.js index fc17f79a0aaa..fdad96e7575b 100644 --- a/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.js +++ b/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.js @@ -3,7 +3,7 @@ import styles from '../../../../styles/styles'; import {attachmentViewPdfPropTypes, attachmentViewPdfDefaultProps} from './propTypes'; import PDFView from '../../../PDFView'; -function AttachmentViewPdf({file, encryptedSourceUrl, isFocused, onPress, onScaleChanged, onToggleKeyboard, onLoadComplete}) { +function AttachmentViewPdf({file, encryptedSourceUrl, isFocused, onPress, onScaleChanged, onToggleKeyboard, onLoadComplete, errorLabelStyles}) { return ( ); } diff --git a/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.native.js b/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.native.js index fdf151c4d5d0..74ecce63131a 100644 --- a/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.native.js +++ b/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.native.js @@ -4,7 +4,7 @@ import {attachmentViewPdfPropTypes, attachmentViewPdfDefaultProps} from './propT import PDFView from '../../../PDFView'; import AttachmentCarouselPagerContext from '../../AttachmentCarousel/Pager/AttachmentCarouselPagerContext'; -function AttachmentViewPdf({file, encryptedSourceUrl, isFocused, isUsedInCarousel, onPress, onScaleChanged: onScaleChangedProp, onToggleKeyboard, onLoadComplete}) { +function AttachmentViewPdf({file, encryptedSourceUrl, isFocused, isUsedInCarousel, onPress, onScaleChanged: onScaleChangedProp, onToggleKeyboard, onLoadComplete, errorLabelStyles}) { const attachmentCarouselPagerContext = useContext(AttachmentCarouselPagerContext); useEffect(() => { @@ -45,6 +45,7 @@ function AttachmentViewPdf({file, encryptedSourceUrl, isFocused, isUsedInCarouse onToggleKeyboard={onToggleKeyboard} onScaleChanged={onScaleChanged} onLoadComplete={onLoadComplete} + errorLabelStyles={errorLabelStyles} /> ); } diff --git a/src/components/Attachments/AttachmentView/AttachmentViewPdf/propTypes.js b/src/components/Attachments/AttachmentView/AttachmentViewPdf/propTypes.js index ea17cd9490b3..f46022795463 100644 --- a/src/components/Attachments/AttachmentView/AttachmentViewPdf/propTypes.js +++ b/src/components/Attachments/AttachmentView/AttachmentViewPdf/propTypes.js @@ -1,5 +1,6 @@ import PropTypes from 'prop-types'; import * as AttachmentsPropTypes from '../../propTypes'; +import stylePropTypes from '../../../../styles/stylePropTypes'; const attachmentViewPdfPropTypes = { /** File object maybe be instance of File or Object */ @@ -8,12 +9,16 @@ const attachmentViewPdfPropTypes = { encryptedSourceUrl: PropTypes.string.isRequired, onToggleKeyboard: PropTypes.func.isRequired, onLoadComplete: PropTypes.func.isRequired, + + /** Styles for the error label */ + errorLabelStyles: stylePropTypes, }; const attachmentViewPdfDefaultProps = { file: { name: '', }, + errorLabelStyles: [], }; export {attachmentViewPdfPropTypes, attachmentViewPdfDefaultProps}; diff --git a/src/components/Attachments/AttachmentView/index.js b/src/components/Attachments/AttachmentView/index.js index 34ff45160ce9..846df04bcfc0 100755 --- a/src/components/Attachments/AttachmentView/index.js +++ b/src/components/Attachments/AttachmentView/index.js @@ -23,6 +23,7 @@ import DistanceEReceipt from '../../DistanceEReceipt'; import useNetwork from '../../../hooks/useNetwork'; import ONYXKEYS from '../../../ONYXKEYS'; import EReceipt from '../../EReceipt'; +import cursor from '../../../styles/utilities/cursor'; const propTypes = { ...attachmentViewPropTypes, @@ -75,6 +76,7 @@ function AttachmentView({ isWorkspaceAvatar, fallbackSource, transaction, + isUsedInAttachmentModal, }) { const [loadComplete, setLoadComplete] = useState(false); const [imageError, setImageError] = useState(false); @@ -132,6 +134,7 @@ function AttachmentView({ onScaleChanged={onScaleChanged} onToggleKeyboard={onToggleKeyboard} onLoadComplete={() => !loadComplete && setLoadComplete(true)} + errorLabelStyles={isUsedInAttachmentModal ? [styles.textLabel, styles.textLarge] : [cursor.cursorAuto]} /> ); } diff --git a/src/components/Attachments/AttachmentView/propTypes.js b/src/components/Attachments/AttachmentView/propTypes.js index 2d4acdda0c1f..351b0ab49f92 100644 --- a/src/components/Attachments/AttachmentView/propTypes.js +++ b/src/components/Attachments/AttachmentView/propTypes.js @@ -22,6 +22,9 @@ const attachmentViewPropTypes = { /** Handles scale changed event */ onScaleChanged: PropTypes.func, + + /** Whether this AttachmentView is shown as part of a AttachmentModal */ + isUsedInAttachmentModal: PropTypes.bool, }; const attachmentViewDefaultProps = { @@ -33,6 +36,7 @@ const attachmentViewDefaultProps = { isUsedInCarousel: false, onPress: undefined, onScaleChanged: () => {}, + isUsedInAttachmentModal: false, }; export {attachmentViewPropTypes, attachmentViewDefaultProps}; diff --git a/src/components/PDFView/index.js b/src/components/PDFView/index.js index bd5fe8162d2e..d1ea341cd2f8 100644 --- a/src/components/PDFView/index.js +++ b/src/components/PDFView/index.js @@ -15,11 +15,11 @@ import PDFPasswordForm from './PDFPasswordForm'; import * as pdfViewPropTypes from './pdfViewPropTypes'; import withWindowDimensions from '../withWindowDimensions'; import withLocalize from '../withLocalize'; -import Text from '../Text'; import compose from '../../libs/compose'; import PressableWithoutFeedback from '../Pressable/PressableWithoutFeedback'; import Log from '../../libs/Log'; import ONYXKEYS from '../../ONYXKEYS'; +import Text from '../Text'; /** * Each page has a default border. The app should take this size into account @@ -271,6 +271,8 @@ class PDFView extends Component { ? [styles.PDFView, styles.noSelect, this.props.style, styles.invisible] : [styles.PDFView, styles.noSelect, this.props.style]; + const errorLabelStyles = _.isArray(this.props.errorLabelStyles) ? this.props.errorLabelStyles : [this.props.errorLabelStyles]; + return ( this.setState({containerWidth: width, containerHeight: height})} > {this.props.translate('attachmentView.failedToLoadPDF')}} + error={{this.props.translate('attachmentView.failedToLoadPDF')}} loading={} file={this.props.sourceURL} options={{ diff --git a/src/components/PDFView/index.native.js b/src/components/PDFView/index.native.js index 0bd9936c628b..b3b2da7658a2 100644 --- a/src/components/PDFView/index.native.js +++ b/src/components/PDFView/index.native.js @@ -1,6 +1,7 @@ import React, {Component} from 'react'; import {View} from 'react-native'; import PDF from 'react-native-pdf'; +import _ from 'underscore'; import KeyboardAvoidingView from '../KeyboardAvoidingView'; import styles from '../../styles/styles'; import * as StyleUtils from '../../styles/StyleUtils'; @@ -139,11 +140,13 @@ class PDFView extends Component { const containerStyles = this.state.shouldRequestPassword && this.props.isSmallScreenWidth ? [styles.w100, styles.flex1] : [styles.alignItemsCenter, styles.flex1]; + const errorLabelStyles = _.isArray(this.props.errorLabelStyles) ? this.props.errorLabelStyles : [this.props.errorLabelStyles]; + return ( {this.state.failedToLoadPDF && ( - {this.props.translate('attachmentView.failedToLoadPDF')} + {this.props.translate('attachmentView.failedToLoadPDF')} )} {this.state.shouldAttemptPDFLoad && ( diff --git a/src/components/PDFView/pdfViewPropTypes.js b/src/components/PDFView/pdfViewPropTypes.js index 21ebc880301e..4568ed527983 100644 --- a/src/components/PDFView/pdfViewPropTypes.js +++ b/src/components/PDFView/pdfViewPropTypes.js @@ -27,6 +27,9 @@ const propTypes = { /** Should focus to the password input */ isFocused: PropTypes.bool, + /** Styles for the error label */ + errorLabelStyles: stylePropTypes, + ...windowDimensionsPropTypes, }; @@ -39,6 +42,7 @@ const defaultProps = { onScaleChanged: () => {}, onLoadComplete: () => {}, isFocused: false, + errorLabelStyles: [], }; export {propTypes, defaultProps}; diff --git a/src/styles/styles.ts b/src/styles/styles.ts index 67c1e1cb9589..7896ebcdb715 100644 --- a/src/styles/styles.ts +++ b/src/styles/styles.ts @@ -2151,7 +2151,6 @@ const styles = (theme: ThemeDefault) => imageModalPDF: { flex: 1, - backgroundColor: theme.modalBackground, }, PDFView: { @@ -2159,7 +2158,6 @@ const styles = (theme: ThemeDefault) => // It's being used on Web/Desktop only to vertically center short PDFs, // while preventing the overflow of the top of long PDF files. ...display.dGrid, - backgroundColor: theme.modalBackground, width: '100%', height: '100%', justifyContent: 'center', From 1d74b7cc166c52a063d19c4497e0aed36812c8e0 Mon Sep 17 00:00:00 2001 From: Majid Date: Thu, 19 Oct 2023 18:36:51 +0200 Subject: [PATCH 2/4] remove: styles validation --- src/components/PDFView/index.js | 4 +--- src/components/PDFView/index.native.js | 5 +---- 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/src/components/PDFView/index.js b/src/components/PDFView/index.js index d1ea341cd2f8..66e9df30b5c3 100644 --- a/src/components/PDFView/index.js +++ b/src/components/PDFView/index.js @@ -271,8 +271,6 @@ class PDFView extends Component { ? [styles.PDFView, styles.noSelect, this.props.style, styles.invisible] : [styles.PDFView, styles.noSelect, this.props.style]; - const errorLabelStyles = _.isArray(this.props.errorLabelStyles) ? this.props.errorLabelStyles : [this.props.errorLabelStyles]; - return ( this.setState({containerWidth: width, containerHeight: height})} > {this.props.translate('attachmentView.failedToLoadPDF')}} + error={{this.props.translate('attachmentView.failedToLoadPDF')}} loading={} file={this.props.sourceURL} options={{ diff --git a/src/components/PDFView/index.native.js b/src/components/PDFView/index.native.js index b3b2da7658a2..fc1a204b3324 100644 --- a/src/components/PDFView/index.native.js +++ b/src/components/PDFView/index.native.js @@ -1,7 +1,6 @@ import React, {Component} from 'react'; import {View} from 'react-native'; import PDF from 'react-native-pdf'; -import _ from 'underscore'; import KeyboardAvoidingView from '../KeyboardAvoidingView'; import styles from '../../styles/styles'; import * as StyleUtils from '../../styles/StyleUtils'; @@ -140,13 +139,11 @@ class PDFView extends Component { const containerStyles = this.state.shouldRequestPassword && this.props.isSmallScreenWidth ? [styles.w100, styles.flex1] : [styles.alignItemsCenter, styles.flex1]; - const errorLabelStyles = _.isArray(this.props.errorLabelStyles) ? this.props.errorLabelStyles : [this.props.errorLabelStyles]; - return ( {this.state.failedToLoadPDF && ( - {this.props.translate('attachmentView.failedToLoadPDF')} + {this.props.translate('attachmentView.failedToLoadPDF')} )} {this.state.shouldAttemptPDFLoad && ( From 578bfa4967f29d63594fb25c1acdc3bb22e618a7 Mon Sep 17 00:00:00 2001 From: abdel-h66 <144037189+abdel-h66@users.noreply.github.com> Date: Thu, 19 Oct 2023 19:15:14 +0200 Subject: [PATCH 3/4] fix: typo Co-authored-by: Eugene Voloshchak --- src/components/Attachments/AttachmentView/propTypes.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Attachments/AttachmentView/propTypes.js b/src/components/Attachments/AttachmentView/propTypes.js index 351b0ab49f92..71ae3639b61c 100644 --- a/src/components/Attachments/AttachmentView/propTypes.js +++ b/src/components/Attachments/AttachmentView/propTypes.js @@ -23,7 +23,7 @@ const attachmentViewPropTypes = { /** Handles scale changed event */ onScaleChanged: PropTypes.func, - /** Whether this AttachmentView is shown as part of a AttachmentModal */ + /** Whether this AttachmentView is shown as part of an AttachmentModal */ isUsedInAttachmentModal: PropTypes.bool, }; From 09a3b17c93b7e12c2d0eb9c0d5aca755ede4cf29 Mon Sep 17 00:00:00 2001 From: Majid Date: Sun, 22 Oct 2023 13:07:02 +0200 Subject: [PATCH 4/4] fix: display background not modal to fix flickering --- .../Attachments/AttachmentView/AttachmentViewPdf/index.js | 5 ++--- .../AttachmentView/AttachmentViewPdf/index.native.js | 5 ++--- .../AttachmentView/AttachmentViewPdf/propTypes.js | 4 ++++ src/components/Attachments/AttachmentView/index.js | 1 + src/styles/styles.ts | 1 + 5 files changed, 10 insertions(+), 6 deletions(-) diff --git a/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.js b/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.js index fdad96e7575b..1d1de83951ee 100644 --- a/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.js +++ b/src/components/Attachments/AttachmentView/AttachmentViewPdf/index.js @@ -1,16 +1,15 @@ import React, {memo} from 'react'; -import styles from '../../../../styles/styles'; import {attachmentViewPdfPropTypes, attachmentViewPdfDefaultProps} from './propTypes'; import PDFView from '../../../PDFView'; -function AttachmentViewPdf({file, encryptedSourceUrl, isFocused, onPress, onScaleChanged, onToggleKeyboard, onLoadComplete, errorLabelStyles}) { +function AttachmentViewPdf({file, encryptedSourceUrl, isFocused, onPress, onScaleChanged, onToggleKeyboard, onLoadComplete, errorLabelStyles, style}) { return ( { @@ -41,7 +40,7 @@ function AttachmentViewPdf({file, encryptedSourceUrl, isFocused, isUsedInCarouse isFocused={isFocused} sourceURL={encryptedSourceUrl} fileName={file.name} - style={styles.imageModalPDF} + style={style} onToggleKeyboard={onToggleKeyboard} onScaleChanged={onScaleChanged} onLoadComplete={onLoadComplete} diff --git a/src/components/Attachments/AttachmentView/AttachmentViewPdf/propTypes.js b/src/components/Attachments/AttachmentView/AttachmentViewPdf/propTypes.js index f46022795463..07203cc2fe74 100644 --- a/src/components/Attachments/AttachmentView/AttachmentViewPdf/propTypes.js +++ b/src/components/Attachments/AttachmentView/AttachmentViewPdf/propTypes.js @@ -10,6 +10,9 @@ const attachmentViewPdfPropTypes = { onToggleKeyboard: PropTypes.func.isRequired, onLoadComplete: PropTypes.func.isRequired, + /** Additional style props */ + style: stylePropTypes, + /** Styles for the error label */ errorLabelStyles: stylePropTypes, }; @@ -18,6 +21,7 @@ const attachmentViewPdfDefaultProps = { file: { name: '', }, + style: [], errorLabelStyles: [], }; diff --git a/src/components/Attachments/AttachmentView/index.js b/src/components/Attachments/AttachmentView/index.js index 846df04bcfc0..66d7b2fa89d6 100755 --- a/src/components/Attachments/AttachmentView/index.js +++ b/src/components/Attachments/AttachmentView/index.js @@ -135,6 +135,7 @@ function AttachmentView({ onToggleKeyboard={onToggleKeyboard} onLoadComplete={() => !loadComplete && setLoadComplete(true)} errorLabelStyles={isUsedInAttachmentModal ? [styles.textLabel, styles.textLarge] : [cursor.cursorAuto]} + style={isUsedInAttachmentModal ? styles.imageModalPDF : styles.flex1} /> ); } diff --git a/src/styles/styles.ts b/src/styles/styles.ts index 7896ebcdb715..4fb9e9e1557f 100644 --- a/src/styles/styles.ts +++ b/src/styles/styles.ts @@ -2151,6 +2151,7 @@ const styles = (theme: ThemeDefault) => imageModalPDF: { flex: 1, + backgroundColor: theme.modalBackground, }, PDFView: {