feat(app): add borderless prop to ScreenHeader and MenuHeader
This commit is contained in:
@@ -10,6 +10,7 @@ import { getShortcutOs } from "@/utils/shortcut-platform";
|
|||||||
interface MenuHeaderProps {
|
interface MenuHeaderProps {
|
||||||
title?: string;
|
title?: string;
|
||||||
rightContent?: ReactNode;
|
rightContent?: ReactNode;
|
||||||
|
borderless?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface SidebarMenuToggleProps {
|
interface SidebarMenuToggleProps {
|
||||||
@@ -75,7 +76,7 @@ export function SidebarMenuToggle({
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export function MenuHeader({ title, rightContent }: MenuHeaderProps) {
|
export function MenuHeader({ title, rightContent, borderless }: MenuHeaderProps) {
|
||||||
return (
|
return (
|
||||||
<ScreenHeader
|
<ScreenHeader
|
||||||
left={
|
left={
|
||||||
@@ -90,6 +91,7 @@ export function MenuHeader({ title, rightContent }: MenuHeaderProps) {
|
|||||||
}
|
}
|
||||||
right={rightContent}
|
right={rightContent}
|
||||||
leftStyle={styles.left}
|
leftStyle={styles.left}
|
||||||
|
borderless={borderless}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -15,13 +15,14 @@ interface ScreenHeaderProps {
|
|||||||
right?: ReactNode;
|
right?: ReactNode;
|
||||||
leftStyle?: StyleProp<ViewStyle>;
|
leftStyle?: StyleProp<ViewStyle>;
|
||||||
rightStyle?: StyleProp<ViewStyle>;
|
rightStyle?: StyleProp<ViewStyle>;
|
||||||
|
borderless?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Shared frame for the home/back headers so we only maintain padding, border,
|
* Shared frame for the home/back headers so we only maintain padding, border,
|
||||||
* and safe-area logic in one place.
|
* and safe-area logic in one place.
|
||||||
*/
|
*/
|
||||||
export function ScreenHeader({ left, right, leftStyle, rightStyle }: ScreenHeaderProps) {
|
export function ScreenHeader({ left, right, leftStyle, rightStyle, borderless }: ScreenHeaderProps) {
|
||||||
const { theme } = useUnistyles();
|
const { theme } = useUnistyles();
|
||||||
const insets = useSafeAreaInsets();
|
const insets = useSafeAreaInsets();
|
||||||
const isMobile = UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
|
const isMobile = UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
|
||||||
@@ -47,6 +48,7 @@ export function ScreenHeader({ left, right, leftStyle, rightStyle }: ScreenHeade
|
|||||||
paddingLeft: baseHorizontalPadding + collapsedSidebarInset.left,
|
paddingLeft: baseHorizontalPadding + collapsedSidebarInset.left,
|
||||||
paddingRight: baseHorizontalPadding + collapsedSidebarInset.right,
|
paddingRight: baseHorizontalPadding + collapsedSidebarInset.right,
|
||||||
},
|
},
|
||||||
|
borderless && styles.borderless,
|
||||||
]}
|
]}
|
||||||
{...dragHandlers}
|
{...dragHandlers}
|
||||||
>
|
>
|
||||||
@@ -87,4 +89,7 @@ const styles = StyleSheet.create((theme) => ({
|
|||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
gap: theme.spacing[2],
|
gap: theme.spacing[2],
|
||||||
},
|
},
|
||||||
|
borderless: {
|
||||||
|
borderBottomWidth: 0,
|
||||||
|
},
|
||||||
}));
|
}));
|
||||||
|
|||||||
Reference in New Issue
Block a user