-
Notifications
You must be signed in to change notification settings - Fork 73
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
a74d946
commit 4fbb8dd
Showing
69 changed files
with
970 additions
and
1,023 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,54 +1,75 @@ | ||
| import { Box, BoxProps, Flex } from "fidesui"; | ||
| import { isArray } from "lodash"; | ||
| import { isValidElement, ReactElement } from "react"; | ||
| import { AntFlex as Flex, AntFlexProps as FlexProps, Heading } from "fidesui"; | ||
| import { ReactNode } from "react"; | ||
|
|
||
| import Breadcrumbs, { BreadcrumbsProps } from "~/features/common/Breadcrumbs"; | ||
| import { NextBreadcrumb, NextBreadcrumbProps } from "./nav/v2/NextBreadcrumb"; | ||
|
|
||
| interface PageHeaderProps extends BoxProps { | ||
| breadcrumbs: BreadcrumbsProps["breadcrumbs"] | ReactElement | false; | ||
| interface PageHeaderProps extends Omit<FlexProps, "children"> { | ||
| heading?: ReactNode; | ||
| breadcrumbItems?: NextBreadcrumbProps["items"]; | ||
| isSticky?: boolean; | ||
| rightContent?: ReactElement; | ||
| rightContent?: ReactNode; | ||
| children?: ReactNode; | ||
| } | ||
|
|
||
| /** | ||
| * A header component for pages. | ||
| * | ||
| * @param breadcrumbs - The breadcrumbs to display in the page header. | ||
| * @param heading - The main heading to display in the page header. Can be a string or a React element. String will be rendered as an H1. | ||
| * @param breadcrumbItems - Extends Ant Design Breadcrumb component `items` property. If an item has a `href` property, it will be wrapped in a Next.js link. | ||
| * Can be an array of breadcrumb items (more information on Breadcrumbs component), a React element | ||
| * if you want to render something else, or false to not show any breadcrumbs. | ||
| * @param isSticky - Whether the page header should stick to the top of the page while scrolling. Defaults to true. | ||
| * @param children - Additional content to display in the header at the bottom. | ||
| * @param children - Additional content to display in the header below the heading and breadcrumb. | ||
| * @param rightContent - Additional content to display in the header on the right side. Usually for displaying buttons. | ||
| */ | ||
| const PageHeader = ({ | ||
| breadcrumbs, | ||
| isSticky = true, | ||
| heading, | ||
| breadcrumbItems, | ||
| isSticky, | ||
| children, | ||
| rightContent, | ||
| ...otherProps | ||
| style, | ||
| ...props | ||
| }: PageHeaderProps): JSX.Element => ( | ||
| <Box | ||
| bgColor="white" | ||
| paddingY={5} | ||
| {...(isSticky ? { position: "sticky", top: 0, left: 0, zIndex: 10 } : {})} | ||
| {...otherProps} | ||
| <Flex | ||
| className="pb-6" | ||
| {...props} | ||
| style={ | ||
| isSticky | ||
| ? { | ||
| position: "sticky", | ||
| top: 0, | ||
| left: 0, | ||
| zIndex: 20, | ||
| backgroundColor: "white", | ||
| ...style, | ||
| } | ||
| : style | ||
| } | ||
| > | ||
| <Flex alignItems="flex-start"> | ||
| <Box flex={1}> | ||
| {/* If breadcrumbs is an array, render the Breadcrumbs component. */} | ||
| {isArray(breadcrumbs) && ( | ||
| <Box marginBottom={children ? 4 : 0}> | ||
| <Breadcrumbs breadcrumbs={breadcrumbs} /> | ||
| </Box> | ||
| )} | ||
| {/* If breadcrumbs is a React element, render it. */} | ||
| {isValidElement(breadcrumbs) && breadcrumbs} | ||
| </Box> | ||
| {rightContent && <Box>{rightContent}</Box>} | ||
| <Flex justify="space-between"> | ||
| {typeof heading === "string" ? ( | ||
| <Heading | ||
| className={!!breadcrumbItems || !!children ? "pb-4" : undefined} | ||
| fontSize="2xl" | ||
| > | ||
| {heading} | ||
| </Heading> | ||
| ) : ( | ||
| heading | ||
| )} | ||
| {rightContent && <div>{rightContent}</div>} | ||
| </Flex> | ||
|
|
||
| {!!breadcrumbItems && ( | ||
| <NextBreadcrumb | ||
| className={children ? "pb-4" : undefined} | ||
| items={breadcrumbItems} | ||
| /> | ||
| )} | ||
|
|
||
| {children} | ||
| </Box> | ||
| </Flex> | ||
| ); | ||
|
|
||
| export default PageHeader; |
52 changes: 52 additions & 0 deletions
52
clients/admin-ui/src/features/common/nav/v2/NextBreadcrumb.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| /* eslint-disable tailwindcss/no-custom-classname */ | ||
| /* eslint-disable no-param-reassign */ | ||
| import { | ||
| AntBreadcrumb as Breadcrumb, | ||
| AntBreadcrumbItemType as BreadcrumbItemType, | ||
| AntBreadcrumbProps as BreadcrumbProps, | ||
| } from "fidesui"; | ||
| import { Url } from "next/dist/shared/lib/router/router"; | ||
| import NextLink from "next/link"; | ||
| import { ReactNode } from "react"; | ||
|
|
||
| // Too difficult to make `path` work with Next.js links so we'll just remove it from the type | ||
| interface NextBreadcrumbItemType | ||
| extends Omit<BreadcrumbItemType, "path" | "href"> { | ||
| /** | ||
| * becomes NextJS link href | ||
| */ | ||
| href?: Url; | ||
| icon?: ReactNode; | ||
| } | ||
|
|
||
| export interface NextBreadcrumbProps extends Omit<BreadcrumbProps, "items"> { | ||
| items?: NextBreadcrumbItemType[]; | ||
| } | ||
|
|
||
| /** | ||
| * Extends the Ant Design Breadcrumb component to allow for Next.js links. If an item has a `href` property, it will be wrapped in a Next.js link. | ||
| * @returns | ||
| */ | ||
| export const NextBreadcrumb = ({ items, ...props }: NextBreadcrumbProps) => { | ||
| items?.map((item) => { | ||
| if (item.icon && typeof item.title === "string") { | ||
| item.title = ( | ||
| <> | ||
| <span className="anticon align-text-bottom">{item.icon}</span> | ||
| <span>{item.title}</span> | ||
| </> | ||
| ); | ||
| } | ||
| if (item.href && item.title) { | ||
| item.title = ( | ||
| <NextLink href={item.href} className="ant-breadcrumb-link"> | ||
| {item.title} | ||
| </NextLink> | ||
| ); | ||
| delete item.href; | ||
| } | ||
| return item; | ||
| }); | ||
| const newItems = items as BreadcrumbItemType[]; | ||
| return <Breadcrumb items={newItems} {...props} />; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.