Hide flagged attachment in attachment carousel

src/components/Attachments/AttachmentCarousel/CarouselItem.js

@@ -0,0 +1,83 @@
+import React, {useState, useEffect} from 'react';
+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';
+
+const propTypes = {
+    /** Attachment required information such as the source and file name */
+    item: PropTypes.shape({
+        isAuthTokenRequired: PropTypes.bool,
+        source: PropTypes.string,
+        file: PropTypes.shape({name: PropTypes.string}),
+        isHidden: 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: () => {},
+};
+
+function CarouselItem({item, isFocused, onPress}) {
+    const {translate} = useLocalize();
+    const [isHidden, setIsHidden] = useState(item.isHidden);
+
+    useEffect(() => {
+        if (isFocused) {
+            return;
+        }
+        // When the attachment is out of focus, we want to hide the attachment back
+        setIsHidden(item.isHidden);
+    }, [isFocused, item.isHidden]);
+
+    if (isHidden) {
+        return (
+            <PressableWithoutFeedback
+                style={[styles.w100, styles.h100, styles.alignItemsCenter, styles.justifyContentCenter, styles.ph4]}
+                onPress={onPress}
+                accessibilityRole={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON}
+                accessibilityLabel={item.file.name || translate('attachmentView.unknownFilename')}
+            >
+                <Text style={[styles.textLabelSupporting, styles.textAlignCenter, styles.lh20]}>{translate('moderation.flaggedContent')}</Text>
+                <Button
+                    small
+                    style={[styles.mt2]}
+                    onPress={() => setIsHidden(false)}
+                >
+                    <Text
+                        style={styles.buttonSmallText}
+                        selectable={false}
+                    >
+                        {translate('moderation.revealMessage')}
+                    </Text>
+                </Button>
+            </PressableWithoutFeedback>
+        );
+    }
+
+    return (
+        <AttachmentView
+            source={item.source}
+            file={item.file}
+            isAuthTokenRequired={item.isAuthTokenRequired}
+            isFocused={isFocused}
+            onPress={onPress}
+            isUsedInCarousel
+        />
+    );
+}
+
+CarouselItem.propTypes = propTypes;
+CarouselItem.defaultProps = defaultProps;
+
+export default CarouselItem;

src/components/Attachments/AttachmentCarousel/extractAttachmentsFromReport.js

@@ -30,6 +30,7 @@ function extractAttachmentsFromReport(report, reportActions, source) {
                 source: tryResolveUrlFromApiRoot(expensifySource || attribs.src),
                 isAuthTokenRequired: Boolean(expensifySource),
                 file: {name: attribs[CONST.ATTACHMENT_ORIGINAL_FILENAME_ATTRIBUTE]},
+                isHidden: attribs['data-hidden'] === 'true',
             });
         },
     });
@@ -38,7 +39,10 @@ function extractAttachmentsFromReport(report, reportActions, source) {
         if (!ReportActionsUtils.shouldReportActionBeVisible(action, key)) {
             return;
         }
-        htmlParser.write(_.get(action, ['message', 0, 'html']));
+        const decision = _.get(action, ['message', 0, 'moderationDecision', 'decision'], '');
+        const isHidden = decision === CONST.MODERATION.MODERATOR_DECISION_PENDING_HIDE || decision === CONST.MODERATION.MODERATOR_DECISION_HIDDEN;
+        const html = _.get(action, ['message', 0, 'html'], '').replace('/>', `data-hidden="${isHidden}" />`);
+        htmlParser.write(html);
     });
     htmlParser.end();
 

src/components/Attachments/AttachmentCarousel/index.js

@@ -5,7 +5,6 @@ import _ from 'underscore';
 import * as DeviceCapabilities from '../../../libs/DeviceCapabilities';
 import styles from '../../../styles/styles';
 import CarouselActions from './CarouselActions';
-import AttachmentView from '../AttachmentView';
 import withWindowDimensions from '../../withWindowDimensions';
 import CarouselButtons from './CarouselButtons';
 import extractAttachmentsFromReport from './extractAttachmentsFromReport';
@@ -15,6 +14,7 @@ import withLocalize from '../../withLocalize';
 import compose from '../../../libs/compose';
 import useCarouselArrows from './useCarouselArrows';
 import useWindowDimensions from '../../../hooks/useWindowDimensions';
+import CarouselItem from './CarouselItem';
 
 const canUseTouchScreen = DeviceCapabilities.canUseTouchScreen();
 const viewabilityConfig = {
@@ -130,17 +130,15 @@ function AttachmentCarousel({report, reportActions, source, onNavigate}) {
      * @param {String} item.source
      * @param {Object} item.file
      * @param {String} item.file.name
+     * @param {Boolean} item.isHidden
      * @returns {JSX.Element}
      */
     const renderItem = useCallback(
         ({item}) => (
-            <AttachmentView
-                source={item.source}
-                file={item.file}
-                isAuthTokenRequired={item.isAuthTokenRequired}
+            <CarouselItem
+                item={item}
                 isFocused={activeSource === item.source}
                 onPress={() => canUseTouchScreen && setShouldShowArrows(!shouldShowArrows)}
-                isUsedInCarousel
             />
         ),
         [activeSource, setShouldShowArrows, shouldShowArrows],

src/components/Attachments/AttachmentCarousel/index.native.js

@@ -4,11 +4,11 @@ import {withOnyx} from 'react-native-onyx';
 import AttachmentCarouselPager from './Pager';
 import styles from '../../../styles/styles';
 import CarouselButtons from './CarouselButtons';
-import AttachmentView from '../AttachmentView';
 import ONYXKEYS from '../../../ONYXKEYS';
 import {propTypes, defaultProps} from './attachmentCarouselPropTypes';
 import extractAttachmentsFromReport from './extractAttachmentsFromReport';
 import useCarouselArrows from './useCarouselArrows';
+import CarouselItem from './CarouselItem';
 
 function AttachmentCarousel({report, reportActions, source, onNavigate, onClose}) {
     const {attachments, initialPage, initialActiveSource, initialItem} = useMemo(() => extractAttachmentsFromReport(report, reportActions, source), [report, reportActions, source]);
@@ -64,17 +64,14 @@ function AttachmentCarousel({report, reportActions, source, onNavigate, onClose}
 
     /**
      * Defines how a single attachment should be rendered
-     * @param {{ isAuthTokenRequired: Boolean, source: String, file: { name: String } }} item
+     * @param {{ isAuthTokenRequired: Boolean, source: String, file: { name: String }, isHidden: Boolean }} item
      * @returns {JSX.Element}
      */
     const renderItem = useCallback(
         ({item}) => (
-            <AttachmentView
-                source={item.source}
-                file={item.file}
-                isAuthTokenRequired={item.isAuthTokenRequired}
+            <CarouselItem
+                item={item}
                 isFocused={activeSource === item.source}
-                isUsedInCarousel
                 onPress={() => setShouldShowArrows(!shouldShowArrows)}
             />
         ),