refactor(CDropdown): improve and clean-up syntax

Author: mrholek

packages/coreui-react/src/components/dropdown/CDropdown.tsx

@@ -115,10 +115,10 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
     },
     ref,
   ) => {
-    const [_visible, setVisible] = useState(visible)
     const dropdownRef = useRef<HTMLDivElement>(null)
     const dropdownToggleRef = useRef(null)
     const forkedRef = useForkedRef(ref, dropdownRef)
+    const [_visible, setVisible] = useState(visible)
 
     const Component = variant === 'nav-item' ? 'li' : component
 
@@ -149,7 +149,7 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
       !_visible && onHide && onHide()
     }, [_visible])
 
-    const dropdownContent = () => {
+    const DropdownContent = () => {
       return variant === 'input-group' ? (
         <>{children}</>
       ) : (
@@ -174,13 +174,15 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
       )
     }
 
-    return popper ? (
-      <CDropdownContext.Provider value={contextValues}>
-        <Manager>{dropdownContent()}</Manager>
-      </CDropdownContext.Provider>
-    ) : (
+    return (
       <CDropdownContext.Provider value={contextValues}>
-        {dropdownContent()}
+        {popper ? (
+          <Manager>
+            <DropdownContent />
+          </Manager>
+        ) : (
+          <DropdownContent />
+        )}
       </CDropdownContext.Provider>
     )
   },

packages/coreui-react/src/components/dropdown/CDropdownMenu.tsx

@@ -126,36 +126,34 @@ export const CDropdownMenu: FC<CDropdownMenuProps> = ({
     return classNames
   }
 
-  const dropdownMenuComponent = (style?: React.CSSProperties, ref?: React.Ref<HTMLDivElement>) => {
-    return (
-      <Component
-        className={classNames(
-          'dropdown-menu',
-          {
-            'dropdown-menu-dark': dark,
-            show: visible,
-          },
-          alignment && alignmentClassNames(alignment),
-          className,
-        )}
-        ref={ref}
-        style={style}
-        role="menu"
-        aria-hidden={!visible}
-        {...(!popper && { 'data-coreui-popper': 'static' })}
-        {...rest}
-      >
-        {Component === 'ul'
-          ? React.Children.map(children, (child, index) => {
-              if (React.isValidElement(child)) {
-                return <li key={index}>{React.cloneElement(child)}</li>
-              }
-              return
-            })
-          : children}
-      </Component>
-    )
-  }
+  const dropdownMenuComponent = (style?: React.CSSProperties, ref?: React.Ref<HTMLDivElement>) => (
+    <Component
+      className={classNames(
+        'dropdown-menu',
+        {
+          'dropdown-menu-dark': dark,
+          show: visible,
+        },
+        alignment && alignmentClassNames(alignment),
+        className,
+      )}
+      ref={ref}
+      style={style}
+      role="menu"
+      aria-hidden={!visible}
+      {...(!popper && { 'data-coreui-popper': 'static' })}
+      {...rest}
+    >
+      {Component === 'ul'
+        ? React.Children.map(children, (child, index) => {
+            if (React.isValidElement(child)) {
+              return <li key={index}>{React.cloneElement(child)}</li>
+            }
+            return
+          })
+        : children}
+    </Component>
+  )
 
   return popper && visible ? (
     <Popper innerRef={dropdownMenuRef} placement={_placement}>

packages/coreui-react/src/components/dropdown/CDropdownToggle.tsx

@@ -67,7 +67,6 @@ export const CDropdownToggle: FC<CDropdownToggleProps> = ({
     ),
     'aria-expanded': visible,
     ...(!rest.disabled && { ...triggers }),
-    ...triggers,
   }
 
   // We use any because Toggler can be `a` as well as `button`.