🐛 fix: context.consumer setState warning fixed

MoIzadloo · Sep 30, 2023 · 5f757c3 · 5f757c3
1 parent 718e61b
commit 5f757c3
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 60 deletions.
diff --git a/README.md b/README.md
@@ -39,7 +39,7 @@ Make sure to include shipped CSS in your application to apply the correct stylin
 {
   /* The following line can be included in your src/index.js or App.js file */
 }
-import 'ultimate-react-multilevel-menu/dist/index.css'
+import 'ultimate-react-multilevel-menu/dist/esm/index.css'
 ```
 
 ## Minimum Working Set Up

diff --git a/src/lib/context.ts b/src/lib/context.ts
@@ -0,0 +1,18 @@
+import React from 'react'
+
+interface ICollapseContext {
+  isCollapsed: boolean
+  setIsCollapsed: React.Dispatch<React.SetStateAction<boolean>>
+}
+
+export const CollapseContext = React.createContext<ICollapseContext
+| undefined>(undefined)
+
+interface INavContext {
+  isCollapse: boolean
+  isPoped: boolean
+  setIsPoped: React.Dispatch<React.SetStateAction<boolean>>
+}
+
+export const NavContext = React.createContext<INavContext
+| undefined>(undefined)
diff --git a/src/lib/navbar/collapse/collapse.tsx b/src/lib/navbar/collapse/collapse.tsx
@@ -3,14 +3,7 @@ import CollapseProps from './collapse.props'
 import classNames from 'classnames'
 import './collapse.less'
 import Nav from '../nav/nav'
-
-interface ICollapseContext {
-  isCollapsed: boolean
-  setIsCollapsed: React.Dispatch<React.SetStateAction<boolean>>
-}
-
-export const CollapseContext = React.createContext<ICollapseContext
-| undefined>(undefined)
+import { CollapseContext } from '../../context'
 
 /**
  * A generic Collapse

diff --git a/src/lib/navbar/item/item.tsx b/src/lib/navbar/item/item.tsx
@@ -3,8 +3,7 @@ import ItemProps from './item.props'
 import classNames from 'classnames'
 import './item.less'
 import { PrefixRefForwardingComponent } from '../../helper'
-import { CollapseContext } from '../collapse/collapse'
-import { NavContext } from '../nav/nav'
+import { CollapseContext, NavContext } from '../../context'
 
 /**
  * A generic Item

diff --git a/src/lib/navbar/items/items.tsx b/src/lib/navbar/items/items.tsx
@@ -1,10 +1,9 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import ItemsProps from './items.props'
 import classNames from 'classnames'
 import './items.less'
-import { NavContext } from '../nav/nav'
 import { PrefixRefForwardingComponent } from '../../helper'
-import { CollapseContext } from '../collapse/collapse'
+import { CollapseContext, NavContext } from '../../context'
 
 /**
  * A generic Items
@@ -19,46 +18,46 @@ const Items: PrefixRefForwardingComponent<'a', ItemsProps> = React.forwardRef<HT
   ref
 ) => {
   const [isPopped, setPop] = React.useState(false)
+  const navCtxt = React.useContext(NavContext)
+
+  useEffect(() => {
+    if (navCtxt != null) {
+      if (navCtxt.isPoped) {
+        setPop(false)
+        navCtxt.setIsPoped(false)
+      }
+    }
+  }, [navCtxt?.isPoped])
 
   return (
     <CollapseContext.Consumer>
       {(context) => {
-        return (
-          <NavContext.Consumer>
-            {(navCtxt) => {
-              if (navCtxt != null) {
-                if (navCtxt.isPoped) {
-                  setPop(false)
-                  navCtxt.setIsPoped(false)
-                }
-                return (
-                  <li className={classNames('nav-item', { 'is-navbar': !navCtxt.isCollapse }, props.className)}>
-                    <Component
-                      ref={ref}
-                      onClick={(e: any) => {
-                        if (navCtxt?.isCollapse) {
-                          if (!isPopped) {
-                            e.preventDefault()
-                          } else {
-                            if (context != null && !context.isCollapsed && props.href != null && props.href !== '' && props.href !== undefined) {
-                              context.setIsCollapsed(!context.isCollapsed)
-                              navCtxt.setIsPoped(true)
-                            }
-                          }
-                          setPop(!isPopped)
-                        }
-                      }} {...props} className={classNames('item', 'dropdown')}
-                    >{title}
-                    </Component>
-                    <ul className={classNames('nav-items', { collapsed: navCtxt.isCollapse && isPopped && (context != null ? !context.isCollapsed : true) })}>
-                      {props.children}
-                    </ul>
-                  </li>
-                )
-              }
-            }}
-          </NavContext.Consumer>
-        )
+        if (navCtxt != null) {
+          return (
+            <li className={classNames('nav-item', { 'is-navbar': !navCtxt?.isCollapse }, props.className)}>
+              <Component
+                ref={ref}
+                onClick={(e: any) => {
+                  if (navCtxt?.isCollapse) {
+                    if (!isPopped) {
+                      e.preventDefault()
+                    } else {
+                      if (context != null && !context.isCollapsed && props.href != null && props.href !== '' && props.href !== undefined) {
+                        context.setIsCollapsed(!context.isCollapsed)
+                        navCtxt.setIsPoped(true)
+                      }
+                    }
+                    setPop(!isPopped)
+                  }
+                }} {...props} className={classNames('item', 'dropdown')}
+              >{title}
+              </Component>
+              <ul className={classNames('nav-items', { collapsed: navCtxt?.isCollapse && isPopped && (context != null ? !context.isCollapsed : true) })}>
+                {props.children}
+              </ul>
+            </li>
+          )
+        }
       }}
 
     </CollapseContext.Consumer>

diff --git a/src/lib/navbar/nav/nav.tsx b/src/lib/navbar/nav/nav.tsx
@@ -2,16 +2,7 @@ import React from 'react'
 import CollapseProps from './nav.props'
 import classNames from 'classnames'
 import './nav.less'
-import { CollapseContext } from '../collapse/collapse'
-
-interface INavContext {
-  isCollapse: boolean
-  isPoped: boolean
-  setIsPoped: React.Dispatch<React.SetStateAction<boolean>>
-}
-
-export const NavContext = React.createContext<INavContext
-| undefined>(undefined)
+import { CollapseContext, NavContext } from '../../context'
 
 /**
  * A generic Nav