From f8422d90724e7f6f48cef37065e7be1a0e113135 Mon Sep 17 00:00:00 2001
From: Alice Di Rico <83651704+Ladirico@users.noreply.github.com>
Date: Fri, 28 Jun 2024 17:10:57 +0200
Subject: [PATCH] chore: [IOPID-1995] Add logic to use ComposedBodyFromArray
into IOScrollViewWithLargeHeader (#5900)
## Short description
This edit has been made in order to use the logic of
`ComposedBodyFromArray` to customize the `description` style into
`IOScrollViewWithLargeHeader` component. In this PR you can find too the
application example.
## Example:
---------
Co-authored-by: Fabio Bombardi <16268789+shadowsheep1@users.noreply.github.com>
---
ts/components/ui/IOScrollViewWithLargeHeader.tsx | 13 ++++++++++---
ts/screens/profile/EmailForwardingScreen.tsx | 11 ++---------
2 files changed, 12 insertions(+), 12 deletions(-)
diff --git a/ts/components/ui/IOScrollViewWithLargeHeader.tsx b/ts/components/ui/IOScrollViewWithLargeHeader.tsx
index 675fe1a657d..e87deb4f595 100644
--- a/ts/components/ui/IOScrollViewWithLargeHeader.tsx
+++ b/ts/components/ui/IOScrollViewWithLargeHeader.tsx
@@ -16,6 +16,10 @@ import {
} from "../../hooks/useHeaderProps";
import { SupportRequestParams } from "../../hooks/useStartSupportRequest";
import I18n from "../../i18n";
+import {
+ BodyProps,
+ ComposedBodyFromArray
+} from "../core/typography/ComposedBodyFromArray";
import { IOScrollView } from "./IOScrollView";
export type LargeHeaderTitleProps = {
@@ -28,7 +32,7 @@ type Props = {
children: React.ReactNode;
actions?: ComponentProps["actions"];
title: LargeHeaderTitleProps;
- description?: string;
+ description?: string | Array;
goBack?: BackProps["goBack"];
headerActionsProp?: HeaderActionProps;
canGoback?: boolean;
@@ -111,10 +115,13 @@ export const IOScrollViewWithLargeHeader = forwardRef(
{description && (
- {description}
+ {typeof description === "string" ? (
+ {description}
+ ) : (
+
+ )}
)}
-
{children}
diff --git a/ts/screens/profile/EmailForwardingScreen.tsx b/ts/screens/profile/EmailForwardingScreen.tsx
index bd4cb499556..3c0158fcd45 100644
--- a/ts/screens/profile/EmailForwardingScreen.tsx
+++ b/ts/screens/profile/EmailForwardingScreen.tsx
@@ -13,10 +13,7 @@ import {
import _ from "lodash";
import { IOScrollViewWithLargeHeader } from "../../components/ui/IOScrollViewWithLargeHeader";
import I18n from "../../i18n";
-import {
- BodyProps,
- ComposedBodyFromArray
-} from "../../components/core/typography/ComposedBodyFromArray";
+import { BodyProps } from "../../components/core/typography/ComposedBodyFromArray";
import { useIODispatch, useIOSelector } from "../../store/hooks";
import {
ProfileState,
@@ -158,11 +155,7 @@ const EmailForwardingScreen = () => {
return (
- ) as unknown as string
- }
+ description={bodyPropsArray}
headerActionsProp={{ showHelp: true }}
contextualHelpMarkdown={contextualHelpMarkdown}
canGoback={true}