Skip to content

Commit

Permalink
feat(js): Popover props (#7112)
Browse files Browse the repository at this point in the history
  • Loading branch information
BiswaViraj authored Nov 26, 2024
1 parent 6b584cd commit 36de555
Show file tree
Hide file tree
Showing 5 changed files with 37 additions and 9 deletions.
5 changes: 4 additions & 1 deletion packages/js/src/ui/components/Inbox.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { createMemo, createSignal, Match, Show, Switch } from 'solid-js';
import { type OffsetOptions, type Placement } from '@floating-ui/dom';
import { useInboxContext } from '../context';
import { useStyle } from '../helpers';
import type {
Expand All @@ -19,6 +20,8 @@ export type InboxProps = {
onNotificationClick?: NotificationClickHandler;
onPrimaryActionClick?: NotificationActionClickHandler;
onSecondaryActionClick?: NotificationActionClickHandler;
placement?: Placement;
placementOffset?: OffsetOptions;
};

export enum InboxPage {
Expand Down Expand Up @@ -93,7 +96,7 @@ export const Inbox = (props: InboxProps) => {
const isOpen = () => props?.open ?? isOpened();

return (
<Popover.Root open={isOpen()} onOpenChange={setIsOpened}>
<Popover.Root open={isOpen()} onOpenChange={setIsOpened} placement={props.placement} offset={props.placementOffset}>
<Popover.Trigger
asChild={(triggerProps) => (
<Button class={style('inbox__popoverTrigger')} variant="ghost" size="icon" {...triggerProps}>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { autoUpdate, flip, offset, Placement, shift } from '@floating-ui/dom';
import { autoUpdate, flip, offset, OffsetOptions, Placement, shift } from '@floating-ui/dom';
import { useFloating } from 'solid-floating-ui';
import { Accessor, createContext, createMemo, createSignal, JSX, Setter, useContext } from 'solid-js';

Expand All @@ -8,6 +8,7 @@ type PopoverRootProps = {
fallbackPlacements?: Placement[];
placement?: Placement;
onOpenChange?: Setter<boolean>;
offset?: OffsetOptions;
};

type PopoverContextValue = {
Expand Down Expand Up @@ -40,7 +41,7 @@ export function PopoverRoot(props: PopoverRootProps) {
layoutShift: false,
}),
middleware: [
offset(10),
offset(props.offset ?? 10),
flip({
fallbackPlacements: props.fallbackPlacements || ['top-start'],
}),
Expand Down
30 changes: 25 additions & 5 deletions packages/react/src/components/Inbox.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,23 @@ import { DefaultProps, DefaultInboxProps, WithChildrenProps } from '../utils/typ
import { Mounter } from './Mounter';
import { useNovuUI } from '../context/NovuUIContext';
import { useRenderer } from '../context/RendererContext';
import { InternalNovuProvider, NovuProvider, useNovu, useUnsafeNovu } from '../hooks/NovuProvider';
import { InternalNovuProvider, useNovu, useUnsafeNovu } from '../hooks/NovuProvider';
import { NovuUI } from './NovuUI';
import { withRenderer } from './Renderer';

export type InboxProps = DefaultProps | WithChildrenProps;

const _DefaultInbox = (props: DefaultInboxProps) => {
const { open, renderNotification, renderBell, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick } =
props;
const {
open,
renderNotification,
renderBell,
onNotificationClick,
onPrimaryActionClick,
onSecondaryActionClick,
placement,
placementOffset,
} = props;
const { novuUI } = useNovuUI();
const { mountElement } = useRenderer();

Expand All @@ -28,6 +36,8 @@ const _DefaultInbox = (props: DefaultInboxProps) => {
onNotificationClick,
onPrimaryActionClick,
onSecondaryActionClick,
placementOffset,
placement,
},
element,
});
Expand Down Expand Up @@ -106,8 +116,16 @@ const InboxChild = React.memo((props: InboxProps) => {
);
}

const { open, renderNotification, renderBell, onNotificationClick, onPrimaryActionClick, onSecondaryActionClick } =
props;
const {
open,
renderNotification,
renderBell,
onNotificationClick,
onPrimaryActionClick,
onSecondaryActionClick,
placementOffset,
placement,
} = props;

return (
<NovuUI options={options} novu={novu}>
Expand All @@ -118,6 +136,8 @@ const InboxChild = React.memo((props: InboxProps) => {
onNotificationClick={onNotificationClick}
onPrimaryActionClick={onPrimaryActionClick}
onSecondaryActionClick={onSecondaryActionClick}
placement={placement}
placementOffset={placementOffset}
/>
</NovuUI>
);
Expand Down
3 changes: 3 additions & 0 deletions packages/react/src/utils/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import type {
Localization,
RouterPush,
PreferencesFilter,
InboxProps,
} from '@novu/js/ui';

export type NotificationsRenderer = (notification: Notification) => React.ReactNode;
Expand All @@ -19,6 +20,8 @@ export type DefaultInboxProps = {
onNotificationClick?: NotificationClickHandler;
onPrimaryActionClick?: NotificationActionClickHandler;
onSecondaryActionClick?: NotificationActionClickHandler;
placement?: InboxProps['placement'];
placementOffset?: InboxProps['placementOffset'];
};

export type BaseProps = {
Expand Down
3 changes: 2 additions & 1 deletion playground/nextjs/src/pages/index.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { Inbox } from '@novu/nextjs';
import { dark } from '@novu/nextjs/themes';
import Title from '@/components/Title';
import { novuConfig } from '@/utils/config';

Expand All @@ -15,6 +14,8 @@ export default function Home() {
'6697c185607852e9104daf33': 'My workflow in other language', // key is workflow id
},
}}
placement="left-start"
placementOffset={25}
/>
</>
);
Expand Down

0 comments on commit 36de555

Please sign in to comment.