Skip to content

Commit

Permalink
[CP-3004] Added app portal component (#2112)
Browse files Browse the repository at this point in the history
  • Loading branch information
mkurczewski authored Oct 7, 2024
1 parent 51a226f commit 01c8d1c
Show file tree
Hide file tree
Showing 8 changed files with 95 additions and 2 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -121,6 +121,7 @@ export interface TextProps {
readonly onClick?: () => void
readonly testId?: string
readonly textRef?: React.Ref<HTMLElement>
readonly id?: string
}

export enum TextDisplayStyle {
Expand Down Expand Up @@ -185,7 +186,6 @@ const Text: FunctionComponent<TextProps> = ({
{message && typeof message !== "string" && (
<FormattedMessage {...message} />
)}

{!message && children}
</TextWrapper>
)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ exports[`matches snapshot without tabs 1`] = `
class="c1 c2"
color="primary"
data-testid="location"
id="app-header"
>
[value] module.overview
</h4>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,7 @@ const Header: FunctionComponent<HeaderProps> = ({
</BackButton>
) : (
<HeaderText
id={"app-header"}
displayStyle={TextDisplayStyle.Headline4}
message={currentLocation}
data-testid={"location"}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,57 @@
import { View } from "generic-view/utils"

// @ts-ignore
const view: View = {}
const view: View = {
contactsLoader: {
component: "entities-loader",
config: {
entitiesTypes: ["contacts"],
},
layout: {
flexLayout: {
direction: "column",
justifyContent: "center",
alignItems: "center",
rowGap: "24px",
},
gridPlacement: {
row: 1,
column: 1,
width: 1,
height: 2,
},
},
childrenKeys: [
"contactsPanelWrapper",
"contactsFormWrapper",
"emptyListWrapper",
"appHeader",
],
},
appHeader: {
component: "app-portal",
config: {
portal: "app-header",
},
childrenKeys: ["appHeaderText"],
},
appHeaderText: {
component: "format-message",
config: {
messageTemplate: " ({contactsCount})",
},
dataProvider: {
source: "form-fields-v2",
formName: "contactsForm",
fields: [
{
providerField: "allContacts",
componentField: "data.fields.contactsCount",
modifier: "length",
}
]
},
},
}

export default view
3 changes: 3 additions & 0 deletions libs/generic-view/models/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ import { conditionalRenderer } from "./lib/conditional-renderer"
import { toast } from "./lib/toast"
import { selectionManager } from "./lib/selection-manager"
import { formatMessage } from "./lib/format-message"
import { appPortal } from "./lib/app-portal"

export * from "./lib/block-box"
export * from "./lib/block-plain"
Expand Down Expand Up @@ -116,6 +117,7 @@ export * from "./lib/conditional-renderer"
export * from "./lib/format-message"
export * from "./lib/toast"
export * from "./lib/selection-manager"
export * from "./lib/app-portal"

export default {
[blockBox.key]: blockBox,
Expand Down Expand Up @@ -176,4 +178,5 @@ export default {
[formatMessage.key]: formatMessage,
[toast.key]: toast,
[selectionManager.key]: selectionManager,
[appPortal.key]: appPortal,
} as const
20 changes: 20 additions & 0 deletions libs/generic-view/models/src/lib/app-portal.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
/**
* Copyright (c) Mudita sp. z o.o. All rights reserved.
* For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
*/

import { z } from "zod"

const dataValidator = z.undefined()

const configValidator = z.object({
portal: z.literal("app-header"),
})

export type AppPortalConfig = z.infer<typeof configValidator>

export const appPortal = {
key: "app-portal",
dataValidator,
configValidator,
} as const
14 changes: 14 additions & 0 deletions libs/generic-view/ui/src/lib/data-rows/app-portal.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
/**
* Copyright (c) Mudita sp. z o.o. All rights reserved.
* For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
*/

import { APIFC } from "generic-view/utils"
import { AppPortalConfig } from "generic-view/models"
import { createPortal } from "react-dom"

export const AppPortal: APIFC<undefined, AppPortalConfig> = ({ children, config }) => {
const appHeaderElement = document.querySelector(`#${config.portal}`)
if (!appHeaderElement || !children) return null
return createPortal(children, appHeaderElement)
}
3 changes: 3 additions & 0 deletions libs/generic-view/ui/src/lib/data-rows/data-rows.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,9 @@ import { LabeledText } from "./labeled-text"
import { TextPlain } from "./text-plain"
import { TextFormatted } from "./text-formatted"
import { Badge } from "./badge"
import { AppPortal } from "./app-portal"
import {
appPortal,
badge,
iconText,
image,
Expand All @@ -25,4 +27,5 @@ export const rows = {
[textPlain.key]: TextPlain,
[textFormatted.key]: TextFormatted,
[badge.key]: Badge,
[appPortal.key]: AppPortal,
}

0 comments on commit 01c8d1c

Please sign in to comment.