Replace 'clsx' package usage with 'classnames'

ManageIQ · Dec 4, 2019 · b7c24ba · b7c24ba
1 parent e86125f
commit b7c24ba
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 18 deletions.
diff --git a/app/javascript/components/main-menu/main-menu.jsx b/app/javascript/components/main-menu/main-menu.jsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { Grid } from 'patternfly-react';
-import clsx from 'clsx';
+import ClassNames from 'classnames';
 import { useSelector } from 'react-redux';
 import isEqual from 'lodash/isEqual';
 import TopLevel from './top-level';
@@ -35,14 +35,15 @@ const MainMenu = ({ menu }) => {
       <div
         onMouseLeave={() => handleSetActiveIds({ topLevelId: undefined, secondLevelId: undefined })}
         id="main-menu"
-        className={clsx(
+        className={ClassNames(
           'nav-pf-vertical nav-pf-vertical-with-sub-menus nav-pf-vertical-collapsible-menus',
           {
             'hover-secondary-nav-pf': activeIds.topLevelId,
             'hover-tertiary-nav-pf': activeIds.secondLevelId,
             collapsed: isVerticalMenuCollapsed,
           },
-        )}
+        )
+        }
       >
         <ul className="list-group" id="maintab">
           <HoverContext.Provider value={activeIds}>

diff --git a/app/javascript/components/main-menu/second-level.jsx b/app/javascript/components/main-menu/second-level.jsx
@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
-import clsx from 'clsx';
+import ClassNames from 'classnames';
 import { MenuItem, HoverContext } from './main-menu';
 import { menuProps } from './recursive-props';
 import {
@@ -19,10 +19,10 @@ const SecondLevel = ({
 }) => {
   const hoveredSecondLevelId = useContext(HoverContext).secondLevelId;
   const hasSubitems = items.length > 0;
-  
+
   return (
     <li
-      className={clsx(
+      className={ClassNames(
         'menu-list-group-item',
         {
           'tertiary-nav-item-pf': hasSubitems,

diff --git a/app/javascript/components/main-menu/third-level.jsx b/app/javascript/components/main-menu/third-level.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import clsx from 'clsx';
+import ClassNames from 'classnames';
 import { menuProps } from './recursive-props';
 import { getHrefByType, getTargetByType, handleUnsavedChanges } from './helpers';
 
@@ -12,8 +12,13 @@ const ThirdLevel = ({
   type,
 }) => (!visible ? null : (
   <li
-    className={`menu-list-group-item ${active ? 'active' : ''}`}
     id={`menu_item_${id}`}
+    className={ClassNames(
+      'menu-list-group-item',
+      {
+        active,
+      },
+    )}
   >
     <a
       href={getHrefByType(type, href, id)}

diff --git a/app/javascript/components/main-menu/top-level.jsx b/app/javascript/components/main-menu/top-level.jsx
@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
-import clsx from 'clsx';
+import ClassNames from 'classnames';
 import { MenuItem, HoverContext } from './main-menu';
 import { menuProps, RecursiveMenuProps } from './recursive-props';
 import {
@@ -20,32 +20,31 @@ const TopLevel = ({
 }) => {
   const hoveredTopLevelId = useContext(HoverContext).topLevelId;
   const isSection = items.length > 0;
-
   if (isSection) {
     return (
       <li
-        className={clsx(
+        className={ClassNames(
           'menu-list-group-item',
           'secondary-nav-item-pf',
           {
-            'is-hover': hoveredTopLevelId === id,
             active,
+            'is-hover': hoveredTopLevelId === id,
           },
         )}
         id={getSectionId(id)}
         onMouseEnter={() => handleSetActiveIds({ topLevelId: id })}
         onBlur={() => undefined}
       >
         <a
+          className="top-level-item"
+          href={getHrefByType(type, href, id)}
           onClick={(event) => {
             if (handleUnsavedChanges(type) === false) {
               event.preventDefault();
             }
             return false;
           }}
-          href={getHrefByType(type, href, id)}
           target={getTargetByType(type)}
-          className="top-level-item"
         >
           <span className={iconClass} />
           <span className="list-group-item-value">{title}</span>
@@ -67,15 +66,28 @@ const TopLevel = ({
   }
 
   return (
-    <li className={`${active ? 'active' : ''} menu-list-group-item`} id={getItemId(id)}>
+    <li
+      id={getItemId(id)}
+      className={ClassNames(
+        'menu-list-group-item',
+        {
+          active,
+        },
+      )
+      }
+      onMouseEnter={() => handleSetActiveIds({ topLevelId: undefined })}
+      onBlur={() => undefined}
+    >
       <a
+        className="top-level-item"
+        href={getHrefByType(type, href, id)}
         onClick={(event) => {
           if (handleUnsavedChanges(type) === false) {
             event.preventDefault();
           }
           return false;
         }}
-        href={getHrefByType(type, href, id)}
+        target={getTargetByType(type)}
       >
         <span className={iconClass} />
         <span className="list-group-item-value">{title}</span>

diff --git a/app/javascript/spec/main-menu/__snapshots__/main-menu.spec.js.snap b/app/javascript/spec/main-menu/__snapshots__/main-menu.spec.js.snap
@@ -717,7 +717,7 @@ exports[`Main menu test should render correctly 1`] = `
                                   visible={true}
                                 >
                                   <li
-                                    className="menu-list-group-item "
+                                    className="menu-list-group-item"
                                     id="menu_item_availability_zone"
                                   >
                                     <a

diff --git a/package.json b/package.json
@@ -43,7 +43,6 @@
     "bootstrap-filestyle": "~1.2.1",
     "bootstrap-switch": "3.3.4",
     "classnames": "~2.2.6",
-    "clsx": "^1.0.4",
     "codemirror": "~5.47.0",
     "connected-react-router": "^4.3.0",
     "create-react-context": "~0.2.3",