fix: nostrikethrough prop draft solution

Expensify · Jun 26, 2023 · 30adf9a · 30adf9a
1 parent 1e308ca
commit 30adf9a
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 41 deletions.
diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/EditedRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/EditedRenderer.js
@@ -17,21 +17,23 @@ function EditedRenderer(props) {
     const defaultRendererProps = _.omit(props, ['TDefaultRenderer', 'style', 'tnode']);
     const isPendingDelete = Boolean(props.tnode.attributes.deleted !== undefined);
     return (
-        <Text
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...defaultRendererProps}
-            fontSize={variables.fontSizeSmall}
-            color={themeColors.textSupporting}
-            style={[editedLabelStyles, isPendingDelete && styles.offlineFeedback.deleted]}
-        >
-            {/* Native devices do not support margin between nested text */}
+        <Text>
             <Text
                 selectable={false}
-                style={[styles.w1, styles.userSelectNone]}
+                style={styles.userSelectNone}
             >
                 {' '}
             </Text>
-            {props.translate('reportActionCompose.edited')}
+            <Text
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...defaultRendererProps}
+                fontSize={variables.fontSizeSmall}
+                color={themeColors.textSupporting}
+                style={[editedLabelStyles, isPendingDelete && styles.offlineFeedback.deleted]}
+            >
+                {/* Native devices do not support margin between nested text */}
+                {props.translate('reportActionCompose.edited')}
+            </Text>
         </Text>
     );
 }

diff --git a/src/components/HTMLEngineProvider/applyStrikethrough/index.js b/src/components/HTMLEngineProvider/applyStrikethrough/index.js
diff --git a/src/components/HTMLEngineProvider/applyStrikethrough/index.native.js b/src/components/HTMLEngineProvider/applyStrikethrough/index.native.js
diff --git a/src/components/OfflineWithFeedback.js b/src/components/OfflineWithFeedback.js
@@ -97,7 +97,7 @@ function OfflineWithFeedback(props) {
     const isUpdateOrDeleteError = hasErrors && (props.pendingAction === 'delete' || props.pendingAction === 'update');
     const isAddError = hasErrors && props.pendingAction === 'add';
     const needsOpacity = (isOfflinePendingAction && !isUpdateOrDeleteError) || isAddError;
-    const needsStrikeThrough = props.network.isOffline && props.pendingAction === 'delete';
+    const needsStrikeThrough = !props.noStrikeThrough && props.network.isOffline && props.pendingAction === 'delete';
     const hideChildren = props.shouldHideOnDelete && !props.network.isOffline && props.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE && !hasErrors;
     let children = props.children;
 

diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js
@@ -480,6 +480,7 @@ function ReportActionItem(props) {
                                 errors={props.action.errors}
                                 errorRowStyles={[styles.ml10, styles.mr2]}
                                 needsOffscreenAlphaCompositing={ReportActionsUtils.isMoneyRequestAction(props.action)}
+                                noStrikeThrough
                             >
                                 {isWhisper && (
                                     <View style={[styles.flexRow, styles.pl5, styles.pt2]}>

diff --git a/src/pages/home/report/ReportActionItemFragment.js b/src/pages/home/report/ReportActionItemFragment.js
@@ -16,7 +16,6 @@ import compose from '../../../libs/compose';
 import convertToLTR from '../../../libs/convertToLTR';
 import {withNetwork} from '../../../components/OnyxProvider';
 import CONST from '../../../CONST';
-import applyStrikethrough from '../../../components/HTMLEngineProvider/applyStrikethrough';
 import editedLabelStyles from '../../../styles/editedLabelStyles';
 import UserDetailsTooltip from '../../../components/UserDetailsTooltip';
 
@@ -95,6 +94,7 @@ function ReportActionItemFragment(props) {
                 );
             }
             const {html, text} = props.fragment;
+            const isPendingDelete = props.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE && props.network.isOffline;
 
             // Threaded messages display "[Deleted message]" instead of being hidden altogether.
             // While offline we display the previous message with a strikethrough style. Once online we want to
@@ -111,34 +111,39 @@ function ReportActionItemFragment(props) {
 
             // Only render HTML if we have html in the fragment
             if (!differByLineBreaksOnly) {
-                const isPendingDelete = props.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE && props.network.isOffline;
                 const editedTag = props.fragment.isEdited ? `<edited ${isPendingDelete ? 'deleted' : ''}></edited>` : '';
-                const htmlContent = applyStrikethrough(html + editedTag, isPendingDelete);
+                const htmlContent = isPendingDelete ? `<del>${html}</del>` : html
 
-                return <RenderHTML html={props.source === 'email' ? `<email-comment>${htmlContent}</email-comment>` : `<comment>${htmlContent}</comment>`} />;
+                const htmlWithTag = editedTag ? `${htmlContent}${editedTag}` : htmlContent;
+
+                return <RenderHTML html={props.source === 'email' ? `<email-comment>${htmlWithTag}</email-comment>` : `<comment>${htmlWithTag}</comment>`} />;
             }
             const containsOnlyEmojis = EmojiUtils.containsOnlyEmojis(text);
 
             return (
-                <Text
-                    selectable={!DeviceCapabilities.canUseTouchScreen() || !props.isSmallScreenWidth}
-                    style={[containsOnlyEmojis ? styles.onlyEmojisText : undefined, styles.ltr, ...props.style]}
-                >
-                    {convertToLTR(text)}
+                <Text>
+                    <Text
+                        selectable={!DeviceCapabilities.canUseTouchScreen() || !props.isSmallScreenWidth}
+                        style={[containsOnlyEmojis ? styles.onlyEmojisText : undefined, styles.ltr, ...props.style, isPendingDelete && styles.offlineFeedback.deleted]}
+                    >
+                        {convertToLTR(text)}
+                    </Text>
                     {Boolean(props.fragment.isEdited) && (
-                        <Text
-                            fontSize={variables.fontSizeSmall}
-                            color={themeColors.textSupporting}
-                            style={[editedLabelStyles, ...props.style]}
-                        >
+                        <>
                             <Text
                                 selectable={false}
-                                style={[containsOnlyEmojis ? styles.onlyEmojisTextLineHeight : undefined, styles.w1, styles.userSelectNone]}
+                                style={[containsOnlyEmojis ? styles.onlyEmojisTextLineHeight : undefined, styles.userSelectNone]}
                             >
                                 {' '}
                             </Text>
-                            {props.translate('reportActionCompose.edited')}
-                        </Text>
+                            <Text
+                                fontSize={variables.fontSizeSmall}
+                                color={themeColors.textSupporting}
+                                style={[editedLabelStyles, isPendingDelete && styles.offlineFeedback.deleted, ...props.style]}
+                            >
+                                {props.translate('reportActionCompose.edited')}
+                            </Text>
+                        </>
                     )}
                 </Text>
             );

diff --git a/src/styles/styles.js b/src/styles/styles.js
@@ -77,6 +77,7 @@ const webViewStyles = {
         del: {
             textDecorationLine: 'line-through',
             textDecorationStyle: 'solid',
+            flex: 1,
         },
 
         strong: {