OfflineWithFeedback.tsx

import React from 'react';
import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
import {View} from 'react-native';
import useNetwork from '@hooks/useNetwork';
import useStyleUtils from '@hooks/useStyleUtils';
import useThemeStyles from '@hooks/useThemeStyles';
import mapChildrenFlat from '@libs/mapChildrenFlat';
import shouldRenderOffscreen from '@libs/shouldRenderOffscreen';
import type {AllStyles} from '@styles/utils/types';
import CONST from '@src/CONST';
import type * as OnyxCommon from '@src/types/onyx/OnyxCommon';
import type {ReceiptErrors} from '@src/types/onyx/Transaction';
import type ChildrenProps from '@src/types/utils/ChildrenProps';
import {isEmptyValueObject} from '@src/types/utils/EmptyObject';
import CustomStylesForChildrenProvider from './CustomStylesForChildrenProvider';
import ErrorMessageRow from './ErrorMessageRow';
import ImageSVG from './ImageSVG';

/**
 * This component should be used when we are using the offline pattern B (offline with feedback).
 * You should enclose any element that should have feedback that the action was taken offline and it will take
 * care of adding the appropriate styles for pending actions and displaying the dismissible error.
 */

type OfflineWithFeedbackProps = Partial<ChildrenProps> & {
    /** The type of action that's pending  */
    pendingAction?: OnyxCommon.PendingAction | null;

    /** Determine whether to hide the component's children if deletion is pending */
    shouldHideOnDelete?: boolean;

    /** The errors to display  */
    errors?: OnyxCommon.Errors | OnyxCommon.TranslationKeyErrors | ReceiptErrors | null;

    /** Whether we should show the error messages */
    shouldShowErrorMessages?: boolean;

    /** Whether we should disable opacity */
    shouldDisableOpacity?: boolean;

    /** A function to run when the X button next to the error is clicked */
    onClose?: () => void;

    /** Additional styles to add to the container after local styles. Applied to the parent container */
    style?: StyleProp<ViewStyle>;

    /** Additional styles to add to the children wrapper container after local styles. Applied to the children wrapper container */
    contentContainerStyle?: StyleProp<ViewStyle>;

    /** Additional style object for the error row */
    errorRowStyles?: StyleProp<ViewStyle>;

    /** Additional style object for the error row text */
    errorRowTextStyles?: StyleProp<TextStyle>;

    /** Whether applying strikethrough to the children should be disabled */
    shouldDisableStrikeThrough?: boolean;

    /** Whether to apply needsOffscreenAlphaCompositing prop to the children */
    needsOffscreenAlphaCompositing?: boolean;

    /** Whether we should render the error message above the children */
    shouldDisplayErrorAbove?: boolean;

    /** Whether we should force opacity */
    shouldForceOpacity?: boolean;

    /** A function to dismiss error */
    dismissError?: () => void;
};

type StrikethroughProps = Partial<ChildrenProps> & {style: AllStyles[]};

function OfflineWithFeedback({
    pendingAction,
    contentContainerStyle,
    errorRowStyles,
    errors,
    needsOffscreenAlphaCompositing = false,
    onClose: onDismiss,
    shouldDisableOpacity = false,
    shouldDisableStrikeThrough = false,
    shouldHideOnDelete = true,
    shouldShowErrorMessages = true,
    style,
    shouldDisplayErrorAbove = false,
    shouldForceOpacity = false,
    dismissError = () => {},
    errorRowTextStyles,
    ...restProps
}: OfflineWithFeedbackProps) {
    const styles = useThemeStyles();
    const StyleUtils = useStyleUtils();
    const {isOffline} = useNetwork();

    const hasErrors = !isEmptyValueObject(errors ?? {});

    const isOfflinePendingAction = !!isOffline && !!pendingAction;
    const isUpdateOrDeleteError = hasErrors && (pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE || pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE);
    const isAddError = hasErrors && pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD;
    const needsOpacity = (!shouldDisableOpacity && ((isOfflinePendingAction && !isUpdateOrDeleteError) || isAddError)) || shouldForceOpacity;
    const needsStrikeThrough = !shouldDisableStrikeThrough && isOffline && pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE;
    const hideChildren = shouldHideOnDelete && !isOffline && pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE && !hasErrors;
    let children = restProps.children;
    const hasChildren = !!children;

    /**
     * This method applies the strikethrough to all the children passed recursively
     */
    const applyStrikeThrough = (childrenProp: React.ReactNode): React.ReactNode => {
        const strikeThroughChildren = mapChildrenFlat(childrenProp, (child) => {
            if (!React.isValidElement(child) || child.type === ImageSVG) {
                return child;
            }

            if (child.type === React.Fragment) {
                const childProps = child.props as {children?: React.ReactNode};
                return React.createElement(React.Fragment, {key: child.key}, applyStrikeThrough(childProps.children));
            }

            type ChildComponentProps = ChildrenProps & {style?: AllStyles};
            const childProps = child.props as ChildComponentProps;
            const props: StrikethroughProps = {
                style: StyleUtils.combineStyles(childProps.style ?? [], styles.offlineFeedbackDeleted, styles.userSelectNone),
            };

            if (childProps.children) {
                props.children = applyStrikeThrough(childProps.children);
            }

            return React.cloneElement(child, props);
        });

        return strikeThroughChildren;
    };

    // Apply strikethrough to children if needed, but skip it if we are not going to render them
    if (hasChildren && needsStrikeThrough && !hideChildren) {
        children = applyStrikeThrough(children);
    }
    return (
        <View style={style}>
            {shouldShowErrorMessages && shouldDisplayErrorAbove && (
                <ErrorMessageRow
                    errors={errors}
                    errorRowStyles={errorRowStyles}
                    onDismiss={onDismiss}
                    errorRowTextStyles={errorRowTextStyles}
                    dismissError={dismissError}
                />
            )}
            {hasChildren && !hideChildren && (
                <View
                    style={[needsOpacity ? styles.offlineFeedbackPending : styles.offlineFeedbackDefault, contentContainerStyle]}
                    needsOffscreenAlphaCompositing={shouldRenderOffscreen ? needsOpacity && needsOffscreenAlphaCompositing : undefined}
                >
                    <CustomStylesForChildrenProvider style={needsStrikeThrough ? [styles.offlineFeedbackDeleted, styles.userSelectNone] : null}>{children}</CustomStylesForChildrenProvider>
                </View>
            )}
            {shouldShowErrorMessages && !shouldDisplayErrorAbove && (
                <ErrorMessageRow
                    errors={errors}
                    errorRowStyles={errorRowStyles}
                    errorRowTextStyles={errorRowTextStyles}
                    onDismiss={onDismiss}
                    dismissError={dismissError}
                />
            )}
        </View>
    );
}

export default OfflineWithFeedback;
export type {OfflineWithFeedbackProps};