forked from Expensify/App
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request Expensify#24564 from bernhardoj/fix/22915-hide-att…
…achment-in-carousel Hide flagged attachment in attachment carousel
- Loading branch information
Showing
8 changed files
with
196 additions
and
15 deletions.
There are no files selected for viewing
This file contains 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
115 changes: 115 additions & 0 deletions
115
src/components/Attachments/AttachmentCarousel/CarouselItem.js
This file contains 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,115 @@ | ||
| 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, | ||
|
|
||
| /** Additional information about the attachment file */ | ||
| 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); | ||
| // eslint-disable-next-line es/no-nullish-coalescing-operators | ||
| const [isHidden, setIsHidden] = useState(isAttachmentHidden(item.reportActionID) ?? item.hasBeenFlagged); | ||
|
|
||
| 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 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 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 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 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 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 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