Skip to content

Commit

Permalink
chore: notifications animated inn
Browse files Browse the repository at this point in the history
  • Loading branch information
Noggling committed Dec 4, 2023
1 parent 8aa31b4 commit ddd3aea
Show file tree
Hide file tree
Showing 6 changed files with 113 additions and 75 deletions.

This file was deleted.

Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import { FC, PropsWithChildren, useState } from 'react';

import { css } from '@emotion/css';
import { useNotificationCenter } from './hooks/useNotificationCenter';

import { NotificationWrapper } from './components/NotificationWrapper';
import { Notification } from './types/Notification';

const messageListWrapper = css`
position: fixed;
top: 4rem;
right: 2rem;
display: flex;
flex-direction: column;
gap: 1rem;
width: 500px;
z-index: 1;
`;

const TimeoutInMilliseconds = 9000;

export const NotificationService: FC<PropsWithChildren> = ({ children }) => {
const [notifications, setNotifications] = useState<Notification[]>([]);
useNotificationCenter((notification) => setNotifications((s) => [...s, notification]));

return (
<>
{children}
<div className={messageListWrapper}>
{notifications.length > 0
? notifications.map((notification, index) => (
<NotificationWrapper
notification={notification}
timeout={TimeoutInMilliseconds}
index={index}
/>
))
: null}
</div>
</>
);
};
Original file line number Diff line number Diff line change
@@ -1,32 +1,36 @@
import { FC, PropsWithChildren, useState, useEffect } from 'react';
import styled from 'styled-components';
import { NotificationCard } from '../../notifications/components/NotificationCard';
import { Notification } from '../../notifications/types/Notification';
import { NotificationCard } from './NotificationCard';
import { Notification } from '../types/Notification';

const StyledMessageWrapper = styled.div`
animation-duration: 1s;
const timesMilliSeconds = 100;
const StyledMessageWrapper = styled.div<{ delay: number }>`
animation-duration: 0.5s;
animation-name: fade;
animation-fill-mode: both;
animation-delay: ${({ delay }) => delay * timesMilliSeconds}ms;
background-color: #fff;
cursor: pointer;
@keyframes fade {
from {
translate: 600px;
opacity: 0;
}
to {
translate: 0px;
opacity: 1;
}
}
`;

export const NotificationWrapper: FC<
PropsWithChildren<{ notification: Notification; timeout: number; dismissible: boolean }>
> = ({ notification, timeout, dismissible }) => {
PropsWithChildren<{ notification: Notification; timeout: number; index: number }>
> = ({ notification, timeout, index }) => {
const [display, setDisplay] = useState(true);

useEffect(() => {
if (!dismissible) return;
const timeoutId = setTimeout(() => {
setDisplay(false);
}, timeout);
Expand All @@ -39,6 +43,7 @@ export const NotificationWrapper: FC<

return (
<StyledMessageWrapper
delay={index}
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import { FC, PropsWithChildren } from 'react';
import { useParams } from 'react-router-dom';

import { css } from '@emotion/css';
import { useServiceMessage, MessageWrapper } from '@equinor/service-message';

const messageListWrapper = css`
position: fixed;
bottom: 2rem;
right: 2rem;
display: flex;
flex-direction: column;
gap: 1rem;
width: 500px;
z-index: 1;
`;

export const ServiceMessageService: FC<PropsWithChildren> = ({ children }) => {
const { appKey } = useParams();

const { currentMessages } = useServiceMessage(appKey);
return (
<>
{children}
<div className={messageListWrapper}>
{currentMessages.length > 0
? currentMessages.map((message) => (
<MessageWrapper
key={message.id}
message={message}
timeout={message.type === 'Maintenance' ? 8000 : 5000}
/>
))
: null}
</div>
</>
);
};
3 changes: 2 additions & 1 deletion client/packages/components/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,5 @@ export * from './components/my-account/MyAccount';
export * from './components/service-now';
export * from './components/help';
export * from './components/notifications';
export * from './components/notification-service/NotificationService';
export * from './components/notifications/NotificationService';
export * from './components/service-message-service/ServiceMessageService';
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { MenuProvider, ViewProvider } from '@equinor/portal-core';
import { StyleProvider } from '@equinor/portal-ui';
import { ServiceMessageProvider } from '@equinor/service-message';
import { NotificationService } from '@portal/components';
import { NotificationService, ServiceMessageService } from '@portal/components';
import { Outlet } from 'react-router-dom';
import MainHeader from '../portal-header/Header';
import { MenuGroups } from '../portal-menu/PortalMenu';
Expand Down Expand Up @@ -29,22 +29,24 @@ export const PortalFrame = () => {
return (
<StyleProvider>
<ServiceMessageProvider>
<NotificationService>
<BookmarkProvider>
<ViewProvider>
<MenuProvider>
<section className={style}>
<ServiceMessageFilter />
<MainHeader />
<MenuGroups />
<HasContext />
<Outlet />
</section>
</MenuProvider>
</ViewProvider>
<PortalSideSheet />
</BookmarkProvider>
</NotificationService>
<ServiceMessageService>
<NotificationService>
<BookmarkProvider>
<ViewProvider>
<MenuProvider>
<section className={style}>
<ServiceMessageFilter />
<MainHeader />
<MenuGroups />
<HasContext />
<Outlet />
</section>
</MenuProvider>
</ViewProvider>
<PortalSideSheet />
</BookmarkProvider>
</NotificationService>
</ServiceMessageService>
</ServiceMessageProvider>
</StyleProvider>
);
Expand Down

0 comments on commit ddd3aea

Please sign in to comment.