diff --git a/packages/ui-lib/src/Alerts/atom/Notification.tsx b/packages/ui-lib/src/Alerts/atom/Notification.tsx index a5a1493ce..90cde5b79 100644 --- a/packages/ui-lib/src/Alerts/atom/Notification.tsx +++ b/packages/ui-lib/src/Alerts/atom/Notification.tsx @@ -143,6 +143,8 @@ export type INotificationProps = { closeCallback?: () => void } +export let handleDismiss = () => { }; + const Notification : React.FC = ({id, type ='info', message, icon = '', isPinned = false, actionTextButton, closeNow = false, closeCallback, onTextButtonClick}) => { const [dismiss, setDismiss] = useState(false); const [slideUp, setSlideUp] = useState(false); @@ -154,13 +156,14 @@ const Notification : React.FC = ({id, type ='info', message, setTextClicked(false); },[id]); - const handleDismiss = useCallback(() => { + handleDismiss = useCallback(() => { setSlideUp(true); },[]); const handleTextClick = useCallback(async () => { setTextClicked(true); handleDismiss(); + // eslint-disable-next-line react-hooks/exhaustive-deps },[handleDismiss]); const animationEnded = useCallback(() => { @@ -191,12 +194,14 @@ const Notification : React.FC = ({id, type ='info', message, return () => { mounted = false; }; + // eslint-disable-next-line react-hooks/exhaustive-deps },[isPinned, message, handleDismiss, id]); useEffect(() => { if(closeNow) { handleDismiss(); } + // eslint-disable-next-line react-hooks/exhaustive-deps },[closeNow, handleDismiss]); return( (message && !dismiss) diff --git a/packages/ui-lib/src/Form/atoms/Switch.tsx b/packages/ui-lib/src/Form/atoms/Switch.tsx index 9907a200b..c0768dfd9 100644 --- a/packages/ui-lib/src/Form/atoms/Switch.tsx +++ b/packages/ui-lib/src/Form/atoms/Switch.tsx @@ -212,10 +212,10 @@ const Switch : React.FC = ({ state = 'default', leftTheme = 'off', right }, [checked]); const positionSwitch = useCallback(() => { - if(inputRef.current?.checked){ + if(inputRef.current?.defaultChecked){ setPosition(SwitchPosition.On); setActiveTheming(rightTheme); - } else if(!inputRef.current?.checked){ + } else if(!inputRef.current?.defaultChecked){ setPosition(SwitchPosition.Off); setActiveTheming(leftTheme); } diff --git a/packages/ui-lib/src/Global/atoms/DrawerBottomMenu.tsx b/packages/ui-lib/src/Global/atoms/DrawerBottomMenu.tsx index 19ef2d3bc..1e96f7357 100644 --- a/packages/ui-lib/src/Global/atoms/DrawerBottomMenu.tsx +++ b/packages/ui-lib/src/Global/atoms/DrawerBottomMenu.tsx @@ -9,9 +9,6 @@ const Container = styled.div` border-top: 1px solid var(--dividing-line); align-items: center; cursor: pointer; - svg { - margin-top: 7px; - } `; const ColumnContainer = styled.div` diff --git a/packages/ui-lib/src/Tables/molecules/TypeTableHeader.tsx b/packages/ui-lib/src/Tables/molecules/TypeTableHeader.tsx index efdc4570b..d66ab4b29 100644 --- a/packages/ui-lib/src/Tables/molecules/TypeTableHeader.tsx +++ b/packages/ui-lib/src/Tables/molecules/TypeTableHeader.tsx @@ -9,7 +9,7 @@ const HeaderRow = styled.div` height: 50px; `; -const HeaderItem = styled.div<{ fixedWidth?: number, alignment?: TypeCellAlignment, hasCopyButton?: boolean, minWidth?: number, headerStyle: string, isSortActive?: boolean }>` +const HeaderItem = styled.div<{ fixedWidth?: number, alignment?: TypeCellAlignment, hasCopyButton?: boolean, minWidth?: number, width?: number, headerStyle: string, isSortActive?: boolean }>` display: table-cell; height: inherit; vertical-align:top; @@ -35,6 +35,10 @@ const HeaderItem = styled.div<{ fixedWidth?: number, alignment?: TypeCellAlignme min-width:${minWidth}px; `}; + ${({ width }) => width && css` + width:${width}px; + `}; + ${({ theme: {styles}, headerStyle, isSortActive }) => headerStyle === 'subHeader' && css` padding-bottom: 15px; @@ -213,11 +217,11 @@ const TypeTableHeader: React.FC = ({ {hasTypeIcon ? : null} {columnConfig.map((column, key, allColls) => { - const { header, alignment, hasCopyButton, sortActive, columnId, sortable, minWidth }: ITableColumnConfig = column; + const { header, alignment, hasCopyButton, sortActive, columnId, sortable, minWidth, width }: ITableColumnConfig = column; return ( diff --git a/packages/ui-lib/src/context/NotificationContext.tsx b/packages/ui-lib/src/context/NotificationContext.tsx index 7c0c0c1aa..5e7d272e8 100644 --- a/packages/ui-lib/src/context/NotificationContext.tsx +++ b/packages/ui-lib/src/context/NotificationContext.tsx @@ -1,5 +1,5 @@ import React, { useState, useCallback, useMemo } from 'react'; -import Notification, { INotificationProps } from '../Alerts/atom/Notification'; +import Notification, { handleDismiss, INotificationProps } from '../Alerts/atom/Notification'; import { uniqueID } from '../helpers'; type NotificationContextType = { @@ -19,7 +19,8 @@ const notificationList: INotificationProps[] = []; const NotificationProvider: React.FC = ({ children }) => { const [activeNotification, setActiveNotification] = useState(null); - const showNotification = useCallback(() => { + const showNotification = useCallback(async() => { + await new Promise((resolve) => setTimeout(resolve, 0)); const nextNotification = notificationList.shift(); if (!nextNotification) { return; } @@ -66,11 +67,17 @@ const NotificationProvider: React.FC = ({ children }) => { } notificationList.push(validNotification); - - if (notificationList.length === 1 && activeNotification === null) { - showNotification(); - } - },[activeNotification, showNotification]); + handleDismiss(); + setActiveNotification((prev)=>{ + if (notificationList.length === 1 && prev === null) { + showNotification(); + } + return prev; + }); + }, + // eslint-disable-next-line react-hooks/exhaustive-deps + [showNotification, activeNotification] + ); const clearNotifications = useCallback(() => { notificationList.length = 0;