Function FormAlertWrapper

src/components/FormAlertWrapper.tsx:40–89

({
    children,
    containerStyles,
    errorMessageStyle,
    isAlertVisible = false,
    isMessageHtml = false,
    message = '',
    onFixTheErrorsLinkPressed = () => {},
}: FormAlertWrapperProps)

// This component takes other components as a child prop. It will then render any wrapped components as a function using "render props",
// and passes it a (bool) isOffline parameter. Child components can then use the isOffline variable to determine offline behavior.
function FormAlertWrapper({
    children,
    containerStyles,
    errorMessageStyle,
    isAlertVisible = false,
    isMessageHtml = false,
    message = '',
    onFixTheErrorsLinkPressed = () => {},
}: FormAlertWrapperProps) {
    const styles = useThemeStyles();
    const {translate} = useLocalize();
    const {isOffline} = useNetwork();

    const defaultFixErrorsMessage = `${translate('common.please')} ${translate('common.fixTheErrors')} ${translate('common.inTheFormBeforeContinuing')}.`;
    const announcementMessage = message?.length ? message : defaultFixErrorsMessage;

    let content;
    if (!message?.length) {
        content = (
            <Text style={[styles.formError, styles.mb0]}>
                {`${translate('common.please')} `}
                <TextLink
                    style={styles.label}
                    onPress={onFixTheErrorsLinkPressed}
                >
                    {translate('common.fixTheErrors')}
                </TextLink>
                {` ${translate('common.inTheFormBeforeContinuing')}.`}
            </Text>
        );
    } else if (isMessageHtml && typeof message === 'string') {
        content = <RenderHTML html={`<alert-text>${message}</alert-text>`} />;
    }

    return (
        <View style={containerStyles}>
            {isAlertVisible && (
                <FormHelpMessage
                    message={announcementMessage}
                    shouldRenderMessageAsHTML={isMessageHtml}
                    style={[styles.mb3, errorMessageStyle]}
                    shouldReannounceOnSubmit
                >
                    {content}
                </FormHelpMessage>
            )}
            {children(isOffline)}
        </View>
    );
}

export default FormAlertWrapper;