@inceptionbg/iui 2.0.6 → 2.0.7

package/src/components/Header/Components/UserMenu.tsx

@@ -5,40 +5,48 @@ import { Tooltip } from '../../Tooltip/Tooltip';
 import { Menu } from '../../Menu/Menu';
 import { IHeaderUserMenuProps } from '../../../types/IHeader';
 
-interface Props {
-  useHeaderUserContext: () => IHeaderUserMenuProps;
-}
+export const UserMenu: FC<IHeaderUserMenuProps> = ({
+  isOpen,
+  setIsOpen,
+  userName,
+  organizationName,
+  menuItems,
+  showBadge,
 
-export const UserMenu: FC<Props> = ({ useHeaderUserContext }) => {
-  const { isOpen, setIsOpen, userName, organizationName, menuItems, showBadge } =
-    useHeaderUserContext();
-
-  return (
-    <>
-      <Menu
-        isOpen={isOpen}
-        onClose={() => setIsOpen(false)}
-        placement="bottom-right"
-        size="m"
-        items={menuItems}
-        renderButton={ref => (
-          <button ref={ref} className="user-box" onClick={() => setIsOpen(true)}>
-            {showBadge && <div className="user-badge" />}
-            <FontAwesomeIcon icon={faCircleUser} className="user-icon" />
-            <div className="user-info">
-              {userName && <p className="user-name">{userName}</p>}
-              {organizationName && (
-                <Tooltip
-                  label={(organizationName?.length || 0) > 20 ? organizationName : ''}
-                  position="bottom"
-                >
-                  <p className="org-name">{organizationName}</p>
-                </Tooltip>
-              )}
-            </div>
-          </button>
-        )}
-      />
-    </>
-  );
-};
+  HeaderUserMenuDialogs,
+  openedDialog,
+  setOpenedDialog,
+  refetchOrganizationInvites,
+}) => (
+  <>
+    <Menu
+      isOpen={isOpen}
+      onClose={() => setIsOpen(false)}
+      placement="bottom-right"
+      size="m"
+      items={menuItems}
+      renderButton={ref => (
+        <button ref={ref} className="user-box" onClick={() => setIsOpen(true)}>
+          {showBadge && <div className="user-badge" />}
+          <FontAwesomeIcon icon={faCircleUser} className="user-icon" />
+          <div className="user-info">
+            {userName && <p className="user-name">{userName}</p>}
+            {organizationName && (
+              <Tooltip
+                label={(organizationName?.length || 0) > 20 ? organizationName : ''}
+                position="bottom"
+              >
+                <p className="org-name">{organizationName}</p>
+              </Tooltip>
+            )}
+          </div>
+        </button>
+      )}
+    />
+    <HeaderUserMenuDialogs
+      openedDialog={openedDialog}
+      setOpenedDialog={setOpenedDialog}
+      refetchOrganizationInvites={refetchOrganizationInvites}
+    />
+  </>
+);

package/src/components/Header/Header.tsx

@@ -9,17 +9,14 @@ interface Props {
   // actions: {
   //   icon: IconDefinition;
   // };
-  userMenuProps: {
-    HeaderUserProvider: ({ children }: { children: ReactNode }) => React.JSX.Element;
-    useHeaderUserContext: () => IHeaderUserMenuProps;
-  };
+  userMenuProps: IHeaderUserMenuProps;
   children?: ReactNode;
 }
 
 export const Header: FC<Props> = ({
   customTitle,
   modulesProps,
-  userMenuProps: { HeaderUserProvider, useHeaderUserContext },
+  userMenuProps,
   children,
 }) => (
   <div className="iui-header">
@@ -28,9 +25,7 @@ export const Header: FC<Props> = ({
     <div className="flex gap-2 align-center">
       {children}
       {/* {!hideNotifications && <Notifications />} */}
-      <HeaderUserProvider>
-        <UserMenu useHeaderUserContext={useHeaderUserContext} />
-      </HeaderUserProvider>
+      <UserMenu {...userMenuProps} />
     </div>
   </div>
 );

package/src/components/Inputs/DateInput/DateInput.tsx

@@ -7,8 +7,8 @@ import { DatePartInput } from './components/DatePartInput';
 import { faCalendarPlus } from '../../../assets/icons/light/faCalendarPlus';
 import dayjs from 'dayjs';
 import { IMenuPlacement } from '../../../types/IMenu';
-import i18next from 'i18next';
 import { formatDateYMD } from '../../../utils/DateUtils';
+import { useTranslation } from 'react-i18next';
 
 export interface IDateInputProps {
   label?: string;
@@ -42,6 +42,7 @@ export const DateInput: FC<IDateInputProps> = ({
   const [day, setDay] = useState(date?.split('-')[2] ?? '');
   const [month, setMonth] = useState(date?.split('-')[1] ?? '');
   const [year, setYear] = useState(date?.split('-')[0] ?? '');
+  const { i18n } = useTranslation();
 
   const [isCalendarOpen, setIsCalendarOpen] = useState(false);
 
@@ -116,11 +117,11 @@ export const DateInput: FC<IDateInputProps> = ({
               setIsCalendarOpen(false);
             }}
             locale={
-              i18next.language === 'sr_RS_Latn'
+              i18n.language === 'sr_RS_Latn'
                 ? 'sr-Latn-RS'
-                : i18next.language === 'sr_RS_Cyrl'
+                : i18n.language === 'sr_RS_Cyrl'
                 ? 'sr-RS'
-                : i18next.language
+                : i18n.language
             }
             formatShortWeekday={(locale, date) =>
               new Intl.DateTimeFormat(locale, { weekday: 'short' }).format(date)

package/src/types/IHeader.ts

@@ -1,6 +1,7 @@
 import { IconDefinition, RotateProp } from '@fortawesome/fontawesome-svg-core';
 import { IButtonColor } from '../components/Button/Button';
 import { IMenuItem } from './IMenu';
+import { FC } from 'react';
 
 export interface IHeaderAction {
   label: string;
@@ -21,4 +22,13 @@ export type IHeaderUserMenuProps = {
   organizationName?: string;
   showBadge?: boolean;
   menuItems?: IMenuItem[];
+
+  HeaderUserMenuDialogs: FC<{
+    openedDialog: string | null;
+    setOpenedDialog: (dialog: string | null) => void;
+    refetchOrganizationInvites?: () => void;
+  }>;
+  openedDialog: string | null;
+  setOpenedDialog: (dialog: string | null) => void;
+  refetchOrganizationInvites?: () => void;
 };