Skip to content

Commit

Permalink
Remove HSpacer from HeaderFirstLevel, add condition to the divider
Browse files Browse the repository at this point in the history
  • Loading branch information
dmnplb committed Dec 10, 2024
1 parent c9d1aaa commit 188dee0
Showing 1 changed file with 22 additions and 30 deletions.
52 changes: 22 additions & 30 deletions src/components/layout/HeaderFirstLevel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,12 @@ import { useSafeAreaInsets } from "react-native-safe-area-context";
import {
alertEdgeToEdgeInsetTransitionConfig,
IOColors,
IOStyles,
IOVisualCostants,
useIOTheme
} from "../../core";
import { WithTestID } from "../../utils/types";
import { IconButton } from "../buttons";
import { HSpacer } from "../spacer";
import { HStack } from "../stack";
import { H3 } from "../typography";
import { HeaderActionProps } from "./common";

Expand Down Expand Up @@ -148,15 +147,17 @@ export const HeaderFirstLevel = ({
testID={testID}
>
{/* Divider */}
<Animated.View
style={[
{
...styles.headerDivider,
backgroundColor: IOColors[theme["divider-default"]]
},
animatedDivider
]}
/>
{(animatedRef || animatedFlatListRef) && (
<Animated.View
style={[
{
...styles.headerDivider,
backgroundColor: IOColors[theme["divider-default"]]
},
animatedDivider
]}
/>
)}

<View style={styles.headerInner}>
<View ref={titleRef} accessible accessibilityRole="header">
Expand All @@ -171,35 +172,26 @@ export const HeaderFirstLevel = ({
{title}
</H3>
</View>
<View style={[IOStyles.row, { flexShrink: 0 }]}>
<HStack space={16} style={{ flexShrink: 0 }}>
{type === "threeActions" && (
<>
<IconButton
{...thirdAction}
color={backgroundColor === "dark" ? "contrast" : "primary"}
/>
{/* Ideally, with the "gap" flex property,
we can get rid of these ugly constructs */}
<HSpacer size={16} />
</>
<IconButton
{...thirdAction}
color={backgroundColor === "dark" ? "contrast" : "primary"}
/>
)}
{(type === "twoActions" || type === "threeActions") && (
<>
<IconButton
{...secondAction}
color={backgroundColor === "dark" ? "contrast" : "primary"}
/>
{/* Same as above */}
<HSpacer size={16} />
</>
<IconButton
{...secondAction}
color={backgroundColor === "dark" ? "contrast" : "primary"}
/>
)}
{type !== "base" && (
<IconButton
{...firstAction}
color={backgroundColor === "dark" ? "contrast" : "primary"}
/>
)}
</View>
</HStack>
</View>
</Animated.View>
);
Expand Down

0 comments on commit 188dee0

Please sign in to comment.