@bytebrand/fe-ui-core 4.1.37 → 4.1.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core",
-  "version": "4.1.37",
+  "version": "4.1.38",
   "description": "UI components for the auto.de project",
   "main": "index.ts",
   "module": "dist/common.js",

package/source/components/_common/Modal/Modal.story.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import useModal from '../../../framework/hooks/useModal';
+
+import Modal from './Modal';
+
+const ModalComponent = () => {
+  const { isVisible, toggleModal } = useModal();
+  return (
+    <>
+      <button onClick={toggleModal}>
+        open modal
+      </button>
+      <Modal isVisible={isVisible} toggleModal={toggleModal} name='TEST_MODAL' />
+    </>
+  )
+}
+
+
+storiesOf('_Common_UI', module)
+  .add('Modal', () => <ModalComponent />)

package/source/components/_common/Modal/Modal.styled.tsx

@@ -0,0 +1,12 @@
+import { styled } from '@mui/system';
+
+export const BaseModalWrapper = styled('div')({
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: 400,
+  backgroundColor: '#fff',
+  boxShadow: 24,
+  padding: 20
+});

package/source/components/_common/Modal/Modal.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import Modal from '@mui/material/Modal';
+import ModalsConfig from './ModalsConfig';
+import { BaseModalWrapper } from './Modal.styled';
+
+interface IBasicModal {
+  isVisible: boolean;
+  toggleModal: () => void;
+  name: string;
+  modalProps?: any;
+}
+
+const BasicModal = ({ isVisible, toggleModal, name, modalProps }: IBasicModal) => {
+
+  return (
+    <Modal open={isVisible} onClose={toggleModal}>
+      <BaseModalWrapper>
+        {ModalsConfig[name](modalProps)}
+      </BaseModalWrapper>
+    </Modal>
+  );
+};
+
+export default BasicModal;

package/source/components/_common/Modal/ModalsConfig.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+import TestModal from './modals/TestModal';
+
+const ModalsConfig = {
+  TEST_MODAL: (props: any) => {
+    return <TestModal { ...props } />;
+  }
+};
+
+export default ModalsConfig;

package/source/components/_common/Modal/modals/TestModal.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const TestModal = () => {
+  return <div>test modal</div>;
+};
+
+export default TestModal;

package/source/components/_common/UserMenu/MaterialMenu.story.js

@@ -8,47 +8,47 @@ const superAdmin = true;
 const userMenuItems = [
   {
     icon: 'dashboardIcon',
-    content: 'Dashboard'
+    label: 'Dashboard'
   },
   {
     icon: 'userProfileIcon',
-    content: 'Profile'
+    label: 'Profile'
   },
   {
     icon: 'addressIcon',
-    content: 'Address'
+    label: 'Address'
   },
   {
     icon: 'myVehiclesIcon',
-    content: 'My Vehicles'
+    label: 'My Vehicles'
   },
   {
     icon: 'savedSearchsIcon',
-    content: 'Saved searchs'
+    label: 'Saved searchs'
   },
   {
     icon: 'favoritesIcon',
-    content: 'Favorites',
+    label: 'Favorites',
     amount: 0
   },
   !superAdmin && {
     icon: 'dealersIcon',
-    content: 'Dealers',
+    label: 'Dealers',
     amount: 1234,
     divider: true
   },
   {
     icon: 'imageSettingsIcon',
-    content: 'Image Settings'
+    label: 'Image Settings'
   },
   !superAdmin && {
     icon: 'supportCallbackIcon',
-    content: 'Support & Call back',
+    label: 'Support & Call back',
     divider: true
   },
   {
     icon: 'logoutIcon',
-    content: 'Logout'
+    label: 'Logout'
   },
 
 ];

package/source/components/_common/UserMenu/MaterialMenu.tsx

@@ -65,12 +65,11 @@ const MaterialMenu = ({ menuItems, headerComponent, onChange, isLang, containerC
           anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
         >
           {menuItems.map((listItemProps: any, index: number) => {
-            const { value } = listItemProps;
             return !!listItemProps &&
               <ListItem
                 key={listItemProps.text}
                 selected={index === selectedIndex}
-                onClick={() => onHandleChange(value, index)}
+                onClick={() => onHandleChange(listItemProps.value, index)}
                 isSelect={isSelect}
                 Link={Link}
                 { ...listItemProps }

package/source/framework/hooks/useModal.ts

@@ -0,0 +1,13 @@
+import { useState } from 'react';
+
+const useModal = () => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  const toggleModal = () => {
+    setIsVisible(!isVisible);
+  };
+
+  return { isVisible, toggleModal };
+};
+
+export default useModal;