ui-soxo-bootstrap-core 2.6.1-dev.20 → 2.6.1-dev.21

package/core/lib/components/global-header/animations.js

@@ -1,92 +1,18 @@
 export const boxVariants = {
-    entering: { x: -24, opacity: 0, scale: 0.985 },
+    entering: { x: -50, opacity: 0},
     entered: {
         x: 0,
         opacity: 1,
-        scale: 1,
         transition: {
             x: {
-                duration: 0.45,
+                duration: 0.5,
                 ease: [.62,.28,.23,.99]
             },
             opacity: {
-                duration: 0.35,
+                duration: 0.5,
                 ease: [.62,.28,.23,.99]
-            },
-            scale: {
-                duration: 0.45,
-                ease: [.22,1,.36,1]
             }
         },
         
     }
-  };
-
-export const headerShellVariants = {
-  hidden: {
-    y: -14,
-    opacity: 0,
-    scale: 0.995,
-    filter: 'blur(6px)',
-  },
-  visible: {
-    y: 0,
-    opacity: 1,
-    scale: 1,
-    filter: 'blur(0px)',
-    transition: {
-      duration: 0.45,
-      ease: [.22,1,.36,1],
-      when: 'beforeChildren',
-      staggerChildren: 0.045,
-    },
-  },
-};
-
-export const headerClusterVariants = {
-  hidden: { opacity: 0, x: -12 },
-  visible: {
-    opacity: 1,
-    x: 0,
-    transition: {
-      duration: 0.32,
-      ease: [.22,1,.36,1],
-    },
-  },
-};
-
-export const headerActionsVariants = {
-  hidden: {},
-  visible: {
-    transition: {
-      staggerChildren: 0.05,
-      delayChildren: 0.08,
-    },
-  },
-};
-
-export const headerActionItemVariants = {
-  hidden: { opacity: 0, y: -8, scale: 0.98 },
-  visible: {
-    opacity: 1,
-    y: 0,
-    scale: 1,
-    transition: {
-      duration: 0.28,
-      ease: [.22,1,.36,1],
-    },
-  },
-};
-
-export const contentRevealVariants = {
-  hidden: { opacity: 0, y: 10 },
-  visible: {
-    opacity: 1,
-    y: 0,
-    transition: {
-      duration: 0.35,
-      ease: [.22,1,.36,1],
-      delay: 0.08,
-    },
-  },
-};
+  }

package/core/lib/components/global-header/global-header.js

@@ -3,54 +3,61 @@
  * Global header component
  */
 
-import React, { useState, useEffect, useContext, useRef } from 'react';
+import React, { useState, useEffect, useContext,useRef } from "react";
 
-import { motion, useAnimation, useReducedMotion } from 'framer-motion';
+import { animationControls, motion, useAnimation } from "framer-motion";
 
 import {
   boxVariants,
-  contentRevealVariants,
-  headerActionItemVariants,
-  headerActionsVariants,
-  headerClusterVariants,
-  headerShellVariants,
-} from './animations';
+} from "./animations"
 
-import { GlobalContext } from './../../Store';
+import { GlobalContext } from "./../../Store";
 
-import { Link, useLocation } from 'react-router-dom';
+import { Link, useLocation } from "react-router-dom";
 
-import { Typography, Avatar, Input } from 'antd';
+import { Typography, Avatar ,Input} from "antd";
 
-import ProgressBar from '../progress-bar/progress-bar'; // Adjust the path as needed
 
-import { Button } from '../../elements';
 
-import GenericHeader from '../header/generic-header';
+import ProgressBar from "../progress-bar/progress-bar"; // Adjust the path as needed
 
-import { MenuOutlined, UserOutlined, SettingOutlined } from '@ant-design/icons';
+import { Button } from "../../elements";
 
-import { Drawer } from 'antd';
 
-import { ReloadOutlined, SearchOutlined } from '@ant-design/icons';
 
-import SideMenu from './../sidemenu/sidemenu';
+import GenericHeader from "../header/generic-header";
 
-import './global-header.scss';
+import {
+  MenuOutlined,
+  UserOutlined,
+  SettingOutlined,
+} from "@ant-design/icons";
+
+import { Drawer } from "antd";
+
+import { ReloadOutlined, SearchOutlined } from "@ant-design/icons";
+
+import SideMenu from "./../sidemenu/sidemenu";
+
+import "./global-header.scss";
 
-import LanguageSwitcher from '../language-switcher/language-switcher';
+import LanguageSwitcher from "../language-switcher/language-switcher";
 
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from "react-i18next";
+
+
+import BorderStyle from "pdf-lib/cjs/core/annotation/BorderStyle";
+
+import SettingsUtil from "../../../utils/settings.utils";
+import SpotlightSearch from "../spotlight-search/spotlight-search.component";
 
-import BorderStyle from 'pdf-lib/cjs/core/annotation/BorderStyle';
 
-import SettingsUtil from '../../../utils/settings.utils';
-import SpotlightSearch from '../spotlight-search/spotlight-search.component';
-import { LicenseAlert } from '../../../components';
-// import { MenusAPI } from '../../../models';
 
 const { Title } = Typography;
 
+
+
+
 export default function GlobalHeader({
   loading,
   appSettings,
@@ -61,37 +68,48 @@ export default function GlobalHeader({
   sidemenu = [],
   reload,
   meta = {},
-  licenseData,
-  licAlert,
   ...props
 }) {
+
   let location = useLocation();
   // let location = {};
 
+
+
   const { isMobile, user = { locations: [] }, kiosk, state } = useContext(GlobalContext);
 
+
+
   const [visible, setVisible] = useState(false);
 
   // Variable to handle toggling of menu
   const [collapsed, setCollapsed] = useState(false);
   // varibale handle branch switcher
 
+ 
+
   // const [searchModalVisible, setSearchModalVisible] = useState(false);
 
-  const { globalCustomerHeader = () => {} } = appSettings;
+
+  const { globalCustomerHeader = () => { } } = appSettings;
 
   const { t, i18n } = useTranslation();
-  const reduceMotion = useReducedMotion();
-  const shouldAnimate = !reduceMotion;
 
   const spotlightRef = useRef();
 
   useEffect(() => {
+
     setTimeout(() => {
+
       i18n.changeLanguage(localStorage.selectedLanguage);
-    }, 0);
-    // fetchSummary();
+
+    }, 0)
+
+
   }, []);
+ 
+  
+
 
   /**
    * Function to handle toggling of menu
@@ -107,6 +125,9 @@ export default function GlobalHeader({
     //  input to avoid typing
     SettingsUtil.openSpotlightModal();
   };
+  
+ 
+  
 
   /**
    * Function to remove toggling on mobile view
@@ -135,49 +156,79 @@ export default function GlobalHeader({
   const boxControls = useAnimation();
 
   async function animate() {
-    if (!shouldAnimate) {
-      boxControls.set('entered');
-      return;
-    }
-
-    await boxControls.start('entered');
+    await boxControls.start("entered");
 
     //await boxControls.start("show");
   }
 
   useEffect(() => {
+
     animate();
-  }, [shouldAnimate]);
+  }, [])
+
+  useEffect(() => {
 
-  useEffect(() => {}, [state.theme]);
+  }, [state.theme]);
+
+ 
+  
+  
+  
 
-  const motionProps = shouldAnimate ? { initial: 'hidden', animate: 'visible' } : { initial: false, animate: false };
 
   return (
-    <>
-      <div
-        className={`global-header ${process.env.REACT_APP_THEME}  ${isConnected && !kiosk ? 'connected' : ''}`}
-        style={{
-          // background: state.theme.colors.bodyBackground,
-
-          height: 10,
-        }}
-      >
-        {/* <MenuOutlined style={{left:'1%',top:'1%', fontSize:18, position:'absolute', zIndex:999}} onClick={showSidebar}/> */}
-
-        <div className="layout-content">
-          <div
-            //whileHover="hover"
-            //whileTap="tap"
-            className={`left-bar ${!isConnected && !isMobile ? '' : 'hide'}${!collapsed ? 'open' : 'close'}${kiosk && !isConnected ? 'kioskon' : ''}`}
-            // style={{ background: state.theme.colors.leftSectionBackground }}
-          >
-            {!isMobile && !isConnected ? (
-              <motion.div
-                variants={boxVariants}
-                initial={['entering']}
-                animate={boxControls}
-                className={`sidebar-container ${!collapsed ? 'open' : 'close'}${kiosk ? '' : 'kioskon'}`}
+    <div
+      className={`global-header ${process.env.REACT_APP_THEME}  ${isConnected && !kiosk ? "connected" : ""
+        }`}
+      style={{
+
+        // background: state.theme.colors.bodyBackground,
+
+        height: 10,
+
+      }}
+    >
+      {/* <MenuOutlined style={{left:'1%',top:'1%', fontSize:18, position:'absolute', zIndex:999}} onClick={showSidebar}/> */}
+
+      <div className="layout-content">
+        <div
+
+          //whileHover="hover"
+          //whileTap="tap"
+          className={`left-bar ${!isConnected && !isMobile ? "" : "hide"}${!collapsed ? "open" : "close"}${kiosk && !isConnected ? "kioskon" : ""}`}
+          // style={{ background: state.theme.colors.leftSectionBackground }}
+        >
+
+          {!isMobile && !isConnected ? (
+            <motion.div
+              variants={boxVariants}
+              initial={["entering"]}
+              animate={boxControls}
+              className={`sidebar-container ${!collapsed ? "open" : "close"}${kiosk ? "" : "kioskon"}`}
+
+            >
+
+              <SideMenu
+                // isOpen={isOpen}
+                collapsed={collapsed}
+                setCollapsed={setCollapsed}
+                loading={loading}
+                appSettings={appSettings}
+                callback={onClose}
+                modules={modules}
+                history={history}
+              />
+
+            </motion.div>
+          ) : (
+            <Drawer
+              placement="left"
+              onClose={onClose}
+              visible={visible}
+              className="side-drawer-content"
+            >
+              <div
+                className={`sidebar-container ${!collapsed ? "open" : "close"}`}
               >
                 <SideMenu
                   // isOpen={isOpen}
@@ -189,188 +240,168 @@ export default function GlobalHeader({
                   modules={modules}
                   history={history}
                 />
-              </motion.div>
-            ) : (
-              <Drawer placement="left" onClose={onClose} visible={visible} className="side-drawer-content">
-                <div className={`sidebar-container ${!collapsed ? 'open' : 'close'}`}>
-                  <SideMenu
-                    // isOpen={isOpen}
-                    collapsed={collapsed}
-                    setCollapsed={setCollapsed}
-                    loading={loading}
-                    appSettings={appSettings}
-                    callback={onClose}
-                    modules={modules}
-                    history={history}
-                  />
-                </div>
-              </Drawer>
-            )}
-          </div>
-
-          {/* Right Section of the Component Loader */}
-          <div
-            className={`right-section ${!collapsed ? 'open' : 'close'} ${kiosk ? 'kioskon' : ''}`}
-            style={{ background: state.theme.colors.bodyBackground }}
-          >
-            {/* For not connected section */}
-            {!isConnected && !kiosk ? (
-              <motion.div
-                variants={headerShellVariants}
-                {...motionProps}
-                className={`page-wrapper ${!collapsed ? 'open' : 'close'}`}
-                // style={{ background: state.theme.colors.headerBg }}
-              >
-                {/*  */}
-                <motion.div className="page-header-name" variants={headerClusterVariants}>
-                  <ProgressBar isLoading={loading} />
+              </div>
+            </Drawer>
+          )}
+        </div>
 
-                  <span type onClick={!isMobile ? toggleCollapsed : hideToggle} className="toggle-box toggle-menu">
-                    <MenuOutlined />
+        {/* Right Section of the Component Loader */}
+        <div className={`right-section ${!collapsed ? "open" : "close"} ${kiosk ? "kioskon" : ""}`} style={{ background: state.theme.colors.bodyBackground }}>
+          {/* For not connected section */}
+          {!isConnected && !kiosk ? (
+
+            <div className={`page-wrapper ${!collapsed ? "open" : "close"}`}
+            // style={{ background: state.theme.colors.headerBg }}
+            >
+              {/*  */}
+              <div className="page-header-name">
+
+                <ProgressBar isLoading={loading} />
+
+                <span type
+                  onClick={!isMobile ? toggleCollapsed : hideToggle}
+                  className="toggle-box toggle-menu"
+                >
+                  <MenuOutlined />
+
+                </span>
+
+                {/* Back Button */}
+                {location.pathname !== "/" ? (
+                  <span
+                    className="toggle-box"
+                    onClick={() => {
+                      history && history.goBack();
+                    }}
+                  >
+                    <GenericHeader />
                   </span>
+                ) : null}
+                {/* Back Button Ends */}
 
-                  {/* Back Button */}
-                  {location.pathname !== '/' ? (
-                    <span
-                      className="toggle-box"
-                      onClick={() => {
-                        history && history.goBack();
-                      }}
-                    >
-                      <GenericHeader />
-                    </span>
-                  ) : null}
-                  {/* Back Button Ends */}
 
-                  {location.pathname !== '/' ? (
-                    <h4 className="menu-caption header-caption" style={{ color: state.theme.colors.headerColor }}>
-                      {menu.caption}
-                    </h4>
+                {location.pathname !== "/" ? (
+                  <h4 className="menu-caption header-caption" style={{ color: state.theme.colors.headerColor }}>
+                    {menu.caption}
+                  </h4>
+                ) : null}
+              </div>
+
+              {/* Page Menu Actions */}
+              
+              {user.role || user.id ? (
+                <div className="page-menu">
+                   {/* Search Input in header start */}
+                 { !isMobile && (
+                              
+                    <div>
+                    <Input
+                            placeholder="Search (Shift + F)"
+                            prefix={<SearchOutlined />}
+                            onClick={openSearchModal}
+                          
+                            readOnly
+                            style={{ width: 250 }}
+                          />
+                    
+
+                      <SpotlightSearch ref={(elem) => SettingsUtil.registerModal(elem)}  props={props}/>
+                    
+                    </div>
+                 )}
+                    {/* Search Input in header start */}
+
+                  {/** branchswitcher Option  */}
+                  {/* branch switcher controlled with env for matria and nura */}
+                  {!process.env.REACT_APP_SHOW_BRANCH_SWITCHER ? (
+  <div className="branch-switcher">{globalCustomerHeader()}</div>
+):null} 
+                  {/* <div className="branch-switcher">{globalCustomerHeader()}</div> */}
+
+
+                  {/* Search Option */}
+
+                  {/* <ModalSearch /> */}
+
+                  {/* Search Option Ends */}
+
+                  {/* Configurator Actions */}
+                  {user.isAdmin ? (
+                    <>
+                      {/* Models */}
+                      {menu && menu.id ? (
+                        <Link to={`/menus/${menu.id}`}>
+
+                          <Button type="default" size={"small"} icon={<SettingOutlined />}>
+
+                          </Button>
+                        </Link>
+                      ) : null}
+                      {/* Models Ends */}
+                    </>
                   ) : null}
-                </motion.div>
+                  {/* Configurator Actions Ends */}
 
-                {/* Page Menu Actions */}
+                 
 
-                {user.role || user.id ? (
-                  <motion.div className="page-menu" variants={headerActionsVariants}>
-                    {/* Search Input in header start */}
-                    {!isMobile && (
-                      <motion.div className="header-action header-action-search" variants={headerActionItemVariants}>
-                        <Input
-                          placeholder="Search (Shift + F)"
-                          prefix={<SearchOutlined />}
-                          onClick={openSearchModal}
-                          readOnly
-                          style={{ width: 250 }}
-                        />
-
-                        <SpotlightSearch ref={(elem) => SettingsUtil.registerModal(elem)} props={props} />
-                      </motion.div>
-                    )}
-                    {/* Search Input in header start */}
 
-                    {/** branchswitcher Option  */}
-                    {/* branch switcher controlled with env for matria and nura */}
-                    {!process.env.REACT_APP_SHOW_BRANCH_SWITCHER ? (
-                      <motion.div className="branch-switcher header-action" variants={headerActionItemVariants}>
-                        {globalCustomerHeader()}
-                      </motion.div>
-                    ) : null}
-                    {/* <div className="branch-switcher">{globalCustomerHeader()}</div> */}
-
-                    {/* Search Option */}
-
-                    {/* <ModalSearch /> */}
-
-                    {/* Search Option Ends */}
-
-                    {/* Configurator Actions */}
-                    {user.isAdmin ? (
-                      <>
-                        {/* Models */}
-                        {menu && menu.id ? (
-                          <motion.div className="header-action" variants={headerActionItemVariants}>
-                            <Link to={`/menus/${menu.id}`}>
-                              <Button type="default" size={'small'} icon={<SettingOutlined />}></Button>
-                            </Link>
-                          </motion.div>
-                        ) : null}
-                        {/* Models Ends */}
-                      </>
-                    ) : null}
-                    {/* Configurator Actions Ends */}
-
-                    {/* Reload Button */}
-
-                    <motion.div className="header-action" variants={headerActionItemVariants}>
-                      <Button onClick={reload} icon={<ReloadOutlined />} type="default" size={'small'}></Button>
-                    </motion.div>
-
-                    {/* Reload Button Ends */}
-
-                    {/** Switch Languages starts */}
-                    {process.env.REACT_APP_ENABLE_LANGUAGE_SWITCHER ? (
-                      <motion.div className="header-action" variants={headerActionItemVariants}>
-                        <LanguageSwitcher />
-                      </motion.div>
-                    ) : null}
-                    {/** Switch Languages ends */}
-
-                    {/* User Profile */}
-                    <motion.div className="header-profile-wrap header-action" variants={headerActionItemVariants}>
-                      <ProfileAvatar />
-                      <span className="header-profile-name" style={{ color: state.theme.colors.colorText }}>
-                        {' '}
-                        {user.name}{' '}
-                      </span>
-                    </motion.div>
-                    {/* User Profile Ends */}
-                  </motion.div>
-                ) : null}
 
-                {/* Page Menu Actions Ends */}
-              </motion.div>
-            ) : null}
 
-            {/* The children is rendered */}
-            <motion.div className="page-content-stage" variants={contentRevealVariants} {...motionProps}>
-              {children}
-            </motion.div>
-            {/* The children is rendered */}
-          </div>
-          {/* Right Section of the Component Loader Ends */}
+                  {/* Reload Button */}
+
+                  <Button onClick={reload} icon={<ReloadOutlined />} type="default" size={"small"} >
+
+                  </Button>
+
+                  {/* Reload Button Ends */}
+
+                  {/** Switch Languages starts */}
+                  {process.env.REACT_APP_ENABLE_LANGUAGE_SWITCHER ? <LanguageSwitcher /> : null}
+                  {/** Switch Languages ends */}
+
+                  {/* User Profile */}
+                  <div style={{ padding: "10px" }}>
+                    <ProfileAvatar />
+                    <span style={{ color: state.theme.colors.colorText }}> {user.name} </span>
+                  </div>
+                  {/* User Profile Ends */}
+                </div>
+              ) : null}
+
+              {/* Page Menu Actions Ends */}
+            </div>
+          ) : null}
+
+          {/* The children is rendered */}
+          {children}
+          {/* The children is rendered */}
         </div>
+        {/* Right Section of the Component Loader Ends */}
       </div>
-      {licAlert && licenseData && (
-        <div
-          style={{
-            marginTop: '3rem',
-            right: '2%',
-            position: 'absolute',
-            zIndex: 999,
-          }}
-        >
-          <LicenseAlert data={licenseData} />
-        </div>
-      )}
-    </>
+    </div>
   );
 }
 
+
 /**
- *
- * @returns
+ * 
+ * @returns 
  */
 function ProfileAvatar() {
+
   const { user = { locations: [] } } = useContext(GlobalContext);
 
-  useEffect(() => {}, []);
+  useEffect(() => { }, []);
 
   return (
     <Link className="profile-avatar" to="/profile">
       {user.photograph ? (
         <>
-          <img className="profile-picture" src={user.photograph} alt={'user photograph'} />
+          <img
+            className="profile-picture"
+            src={user.photograph}
+            alt={"user photograph"}
+          />
         </>
       ) : (
         <Avatar shape="square" size="small" icon={<UserOutlined />} />