Hide flagged attachment in attachment carousel #24564
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,117 @@ | ||
| import React, {useContext, useState} from 'react'; | ||
| import {View} from 'react-native'; | ||
| import PropTypes from 'prop-types'; | ||
| import CONST from '../../../CONST'; | ||
| import styles from '../../../styles/styles'; | ||
| import useLocalize from '../../../hooks/useLocalize'; | ||
| import PressableWithoutFeedback from '../../Pressable/PressableWithoutFeedback'; | ||
| import Text from '../../Text'; | ||
| import Button from '../../Button'; | ||
| import AttachmentView from '../AttachmentView'; | ||
| import SafeAreaConsumer from '../../SafeAreaConsumer'; | ||
| import ReportAttachmentsContext from '../../../pages/home/report/ReportAttachmentsContext'; | ||
|
|
||
| const propTypes = { | ||
| /** Attachment required information such as the source and file name */ | ||
| item: PropTypes.shape({ | ||
| /** Report action ID of the attachment */ | ||
| reportActionID: PropTypes.string, | ||
|
|
||
| /** Whether source URL requires authentication */ | ||
| isAuthTokenRequired: PropTypes.bool, | ||
|
|
||
| /** The source (URL) of the attachment */ | ||
| source: PropTypes.string, | ||
|
|
||
| /** File additional information of the attachment */ | ||
| file: PropTypes.shape({ | ||
| /** File name of the attachment */ | ||
| name: PropTypes.string, | ||
| }), | ||
|
|
||
| /** Whether the attachment has been flagged */ | ||
| hasBeenFlagged: PropTypes.bool, | ||
| }).isRequired, | ||
|
|
||
| /** Whether the attachment is currently being viewed in the carousel */ | ||
| isFocused: PropTypes.bool.isRequired, | ||
|
|
||
| /** onPress callback */ | ||
| onPress: PropTypes.func, | ||
| }; | ||
|
|
||
| const defaultProps = { | ||
| onPress: undefined, | ||
| }; | ||
|
|
||
| function CarouselItem({item, isFocused, onPress}) { | ||
| const {translate} = useLocalize(); | ||
| const {isAttachmentHidden} = useContext(ReportAttachmentsContext); | ||
| const [isHidden, setIsHidden] = useState(() => { | ||
| const isAttachmentHiddenValue = isAttachmentHidden(item.reportActionID); | ||
| return isAttachmentHiddenValue === undefined ? item.hasBeenFlagged : isAttachmentHiddenValue; | ||
|
There was a problem hiding this comment. NAB but I'd prefer There was a problem hiding this comment. It will conflict with the There was a problem hiding this comment. I think it could be simplified using the null-coalescing operator const [isHidden, setIsHidden] = useState(isAttachmentHidden(item.reportActionID) ?? item.hasBeenFlagged);There was a problem hiding this comment. That's a good idea, but the lint forbids null coalescing operators There was a problem hiding this comment. Maybe we can pass that rule ? FYI, nullish coalescing will be supported as part of the TypeScript migration. You can find more details in the following link: TS_STYLE.md There was a problem hiding this comment. Let's go for it, I think that improves readability considerably and is valid given we're supporting it soon. |
||
| }); | ||
|
|
||
| const renderButton = (style) => ( | ||
| <Button | ||
| small | ||
| style={style} | ||
| onPress={() => setIsHidden(!isHidden)} | ||
| > | ||
| <Text | ||
| style={styles.buttonSmallText} | ||
| selectable={false} | ||
| dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}} | ||
| > | ||
| {isHidden ? translate('moderation.revealMessage') : translate('moderation.hideMessage')} | ||
| </Text> | ||
| </Button> | ||
| ); | ||
|
|
||
| if (isHidden) { | ||
| const children = ( | ||
| <> | ||
| <Text style={[styles.textLabelSupporting, styles.textAlignCenter, styles.lh20]}>{translate('moderation.flaggedContent')}</Text> | ||
| {renderButton([styles.mt2])} | ||
| </> | ||
| ); | ||
| return onPress ? ( | ||
| <PressableWithoutFeedback | ||
| style={[styles.attachmentRevealButtonContainer]} | ||
| onPress={onPress} | ||
| accessibilityRole={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON} | ||
| accessibilityLabel={item.file.name || translate('attachmentView.unknownFilename')} | ||
| > | ||
| {children} | ||
| </PressableWithoutFeedback> | ||
| ) : ( | ||
| <View style={[styles.attachmentRevealButtonContainer]}>{children}</View> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <View style={[styles.flex1]}> | ||
| <View style={[styles.flex1]}> | ||
| <AttachmentView | ||
| source={item.source} | ||
| file={item.file} | ||
| isAuthTokenRequired={item.isAuthTokenRequired} | ||
| isFocused={isFocused} | ||
| onPress={onPress} | ||
| isUsedInCarousel | ||
| /> | ||
| </View> | ||
|
|
||
| {item.hasBeenFlagged && ( | ||
| <SafeAreaConsumer> | ||
| {({safeAreaPaddingBottomStyle}) => <View style={[styles.appBG, safeAreaPaddingBottomStyle]}>{renderButton([styles.m4, styles.alignSelfCenter])}</View>} | ||
| </SafeAreaConsumer> | ||
| )} | ||
| </View> | ||
| ); | ||
| } | ||
|
|
||
| CarouselItem.propTypes = propTypes; | ||
| CarouselItem.defaultProps = defaultProps; | ||
|
|
||
| export default CarouselItem; | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| import React, {useEffect, useMemo, useRef} from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import useCurrentReportID from '../../../hooks/useCurrentReportID'; | ||
|
|
||
| const ReportAttachmentsContext = React.createContext(); | ||
|
|
||
| const propTypes = { | ||
| /** Rendered child component */ | ||
| children: PropTypes.node.isRequired, | ||
| }; | ||
|
|
||
| function ReportAttachmentsProvider(props) { | ||
| const currentReportID = useCurrentReportID(); | ||
| const hiddenAttachments = useRef({}); | ||
|
|
||
| useEffect(() => { | ||
| // We only want to store the attachment visibility for the current report. | ||
| // If the current report ID changes, clear the ref. | ||
| hiddenAttachments.current = {}; | ||
| }, [currentReportID]); | ||
|
|
||
| const contextValue = useMemo( | ||
| () => ({ | ||
| isAttachmentHidden: (reportActionID) => hiddenAttachments.current[reportActionID], | ||
| updateHiddenAttachments: (reportActionID, value) => { | ||
| hiddenAttachments.current = { | ||
| ...hiddenAttachments.current, | ||
| [reportActionID]: value, | ||
| }; | ||
| }, | ||
| }), | ||
| [], | ||
| ); | ||
|
|
||
| return <ReportAttachmentsContext.Provider value={contextValue}>{props.children}</ReportAttachmentsContext.Provider>; | ||
| } | ||
|
|
||
| ReportAttachmentsProvider.propTypes = propTypes; | ||
| ReportAttachmentsProvider.displayName = 'ReportAttachmentsProvider'; | ||
|
|
||
| export default ReportAttachmentsContext; | ||
| export {ReportAttachmentsProvider}; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.