Skip to content

Commit

Permalink
[chore] Optional viewRef for Banner (#249)
Browse files Browse the repository at this point in the history 
## Short description
This PR marks as optional the `viewRef` property from the `Banner`
component.

## List of changes proposed in this pull request
- `viewRef` property is now optional

## How to test
Check that everything compiles and runs properly.
  • Loading branch information
@Vangaorth
Vangaorth authored Apr 24, 2024
1 parent 01f165e commit 00e3f30
Show file tree
Hide file tree
Showing 3 changed files with 133 additions and 150 deletions.
276 changes: 131 additions & 145 deletions example/src/pages/Advice.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,148 +100,134 @@ const renderFeatureInfo = () => (
</>
);

const renderBanner = () => {
const viewRef = React.createRef<View>();

return (
<>
<H2
color={"bluegrey"}
weight={"SemiBold"}
style={{
marginBottom: 16,
paddingTop: IOVisualCostants.appMarginDefault
}}
>
Banner
</H2>
{bannerBackgroundColours.map(color => (
<React.Fragment key={`${color}-block`}>
<ComponentViewerBox name={`Banner · Big size, ${color} variant`}>
<Banner
viewRef={viewRef as React.RefObject<any>}
color={color}
size="big"
title="Banner title"
pictogramName="charity"
action="Action text"
onPress={onLinkPress}
/>
<VSpacer size={24} />
<Banner
viewRef={viewRef as React.RefObject<any>}
color={color}
size="big"
content={
"Fai una donazione alle organizzazioni umanitarie che assistono le vittime civile della crisi in Ucraina"
}
pictogramName="charity"
/>
<VSpacer size={24} />
<Banner
viewRef={viewRef as React.RefObject<any>}
color={color}
size="big"
content={
"Fai una donazione alle organizzazioni umanitarie che assistono le vittime civile della crisi in Ucraina"
}
pictogramName="charity"
action="Dona anche tu"
onPress={onLinkPress}
/>
<VSpacer size={24} />
<Banner
viewRef={viewRef as React.RefObject<any>}
color={color}
size="big"
title="Banner title"
content={
"Fai una donazione alle organizzazioni umanitarie che assistono le vittime civile della crisi in Ucraina"
}
pictogramName="charity"
/>
<VSpacer size={24} />
<Banner
viewRef={viewRef as React.RefObject<any>}
color={color}
size="big"
title="Banner title"
content={
"Fai una donazione alle organizzazioni umanitarie che assistono le vittime civile della crisi in Ucraina"
}
pictogramName="charity"
action="Dona anche tu"
onPress={onLinkPress}
/>
</ComponentViewerBox>
<ComponentViewerBox
name={`Banner · Big size, ${color} variant, close action`}
>
<Banner
viewRef={viewRef as React.RefObject<any>}
color={color}
size="big"
title="Banner title"
content={
"Fai una donazione alle organizzazioni umanitarie che assistono le vittime civile della crisi in Ucraina"
}
pictogramName="charity"
onClose={onClose}
labelClose="Nascondi questo banner"
/>
<VSpacer size={24} />
<Banner
viewRef={viewRef as React.RefObject<any>}
color={color}
size="big"
content={
"Fai una donazione alle organizzazioni umanitarie che assistono le vittime civile della crisi in Ucraina"
}
action="Dona anche tu"
onPress={onLinkPress}
pictogramName="charity"
onClose={onClose}
labelClose="Nascondi questo banner"
/>
</ComponentViewerBox>
<ComponentViewerBox name={`Banner · Small size, ${color} variant`}>
<Banner
viewRef={viewRef as React.RefObject<any>}
color={color}
size="small"
title="Banner title"
content={
"Fai una donazione alle organizzazioni umanitarie che assistono le vittime civile della crisi in Ucraina"
}
pictogramName="charity"
action="Dona anche tu"
onPress={onLinkPress}
/>
<VSpacer size={24} />
<Banner
viewRef={viewRef as React.RefObject<any>}
color={color}
size="small"
content={
"Fai una donazione alle organizzazioni umanitarie che assistono le vittime civile della crisi in Ucraina"
}
action="Dona anche tu"
onPress={onLinkPress}
pictogramName="charity"
/>
<VSpacer size={24} />
<Banner
viewRef={viewRef as React.RefObject<any>}
color={color}
size="small"
content={
"Fai una donazione alle organizzazioni umanitarie che assistono le vittime civile della crisi in Ucraina"
}
pictogramName="charity"
/>
</ComponentViewerBox>
</React.Fragment>
))}
</>
);
};
const renderBanner = () => (
<>
<H2
color={"bluegrey"}
weight={"SemiBold"}
style={{
marginBottom: 16,
paddingTop: IOVisualCostants.appMarginDefault
}}
>
Banner
</H2>
{bannerBackgroundColours.map(color => (
<React.Fragment key={`${color}-block`}>
<ComponentViewerBox name={`Banner · Big size, ${color} variant`}>
<Banner
color={color}
size="big"
title="Banner title"
pictogramName="charity"
action="Action text"
onPress={onLinkPress}
/>
<VSpacer size={24} />
<Banner
color={color}
size="big"
content={
"Fai una donazione alle organizzazioni umanitarie che assistono le vittime civile della crisi in Ucraina"
}
pictogramName="charity"
/>
<VSpacer size={24} />
<Banner
color={color}
size="big"
content={
"Fai una donazione alle organizzazioni umanitarie che assistono le vittime civile della crisi in Ucraina"
}
pictogramName="charity"
action="Dona anche tu"
onPress={onLinkPress}
/>
<VSpacer size={24} />
<Banner
color={color}
size="big"
title="Banner title"
content={
"Fai una donazione alle organizzazioni umanitarie che assistono le vittime civile della crisi in Ucraina"
}
pictogramName="charity"
/>
<VSpacer size={24} />
<Banner
color={color}
size="big"
title="Banner title"
content={
"Fai una donazione alle organizzazioni umanitarie che assistono le vittime civile della crisi in Ucraina"
}
pictogramName="charity"
action="Dona anche tu"
onPress={onLinkPress}
/>
</ComponentViewerBox>
<ComponentViewerBox
name={`Banner · Big size, ${color} variant, close action`}
>
<Banner
color={color}
size="big"
title="Banner title"
content={
"Fai una donazione alle organizzazioni umanitarie che assistono le vittime civile della crisi in Ucraina"
}
pictogramName="charity"
onClose={onClose}
labelClose="Nascondi questo banner"
/>
<VSpacer size={24} />
<Banner
color={color}
size="big"
content={
"Fai una donazione alle organizzazioni umanitarie che assistono le vittime civile della crisi in Ucraina"
}
action="Dona anche tu"
onPress={onLinkPress}
pictogramName="charity"
onClose={onClose}
labelClose="Nascondi questo banner"
/>
</ComponentViewerBox>
<ComponentViewerBox name={`Banner · Small size, ${color} variant`}>
<Banner
color={color}
size="small"
title="Banner title"
content={
"Fai una donazione alle organizzazioni umanitarie che assistono le vittime civile della crisi in Ucraina"
}
pictogramName="charity"
action="Dona anche tu"
onPress={onLinkPress}
/>
<VSpacer size={24} />
<Banner
color={color}
size="small"
content={
"Fai una donazione alle organizzazioni umanitarie che assistono le vittime civile della crisi in Ucraina"
}
action="Dona anche tu"
onPress={onLinkPress}
pictogramName="charity"
/>
<VSpacer size={24} />
<Banner
color={color}
size="small"
content={
"Fai una donazione alle organizzazioni umanitarie che assistono le vittime civile della crisi in Ucraina"
}
pictogramName="charity"
/>
</ComponentViewerBox>
</React.Fragment>
))}
</>
);
2 changes: 1 addition & 1 deletion src/components/banner/Banner.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ type BaseBannerProps = WithTestID<{
size: "big" | "small";
color: "neutral" | "turquoise";
pictogramName: IOPictogramsBleed;
viewRef: React.RefObject<View>;
viewRef?: React.RefObject<View>;
// A11y related props
accessibilityLabel?: string;
accessibilityHint?: string;
Expand Down
5 changes: 1 addition & 4 deletions src/components/banner/__test__/banner.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
import React from "react";
import { Alert, View } from "react-native";
import { Alert } from "react-native";
import * as TestRenderer from "react-test-renderer";
import { TestRendererWithExperimentalEnabledContextProvider } from "../../../utils/testing";
import { Banner } from "../Banner";

const viewRef = React.createRef<View>();
const onLinkPress = () => {
Alert.alert("Alert", "Action triggered");
};
Expand All @@ -13,7 +12,6 @@ describe("Test Banner Components", () => {
it("Banner Snapshot", () => {
const advice = TestRenderer.create(
<Banner
viewRef={viewRef}
color="neutral"
size="big"
title="Banner title"
Expand All @@ -30,7 +28,6 @@ describe("Test Banner Components - Experimental Enabled", () => {
it("Banner Snapshot", () => {
const advice = TestRendererWithExperimentalEnabledContextProvider(
<Banner
viewRef={viewRef}
color="neutral"
size="big"
title="Banner title"
Expand Down

0 comments on commit 00e3f30

Please sign in to comment.