feat(Nav): make setting button can be hidden (#279)

src/components/Nav/Nav.js

@@ -45,6 +45,7 @@ class Nav extends Component {
       user,
       onSettingClick,
       onLogoutClick,
+      hideSetting,
       ...other
     } = this.props
 
@@ -104,6 +105,7 @@ class Nav extends Component {
           user={user}
           onSettingClick={onSettingClick}
           onLogoutClick={onLogoutClick}
+          hideSetting={hideSetting}
         />
       </div>
     )
@@ -140,15 +142,19 @@ Nav.propTypes = {
   /** The click event of each NavItem, the parameters are the current NavItem props and event object */
   onItemClick: PropTypes.func,
 
+  /** The click event of logout button */
+  onLogoutClick: PropTypes.func,
+
   /** The click event of setting button */
   onSettingClick: PropTypes.func,
 
-  /** The click event of logout button */
-  onLogoutClick: PropTypes.func
+  /** Determine whether setting button should be hidden */
+  hideSetting: PropTypes.bool
 }
 
 Nav.defaultProps = {
-  collapsed: true
+  collapsed: true,
+  hideSetting: false
 }
 
 export default Nav

src/components/Nav/NavBottom.js

@@ -3,7 +3,12 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import Button from '../Button'
 
-export default function NavBottom ({ user, onSettingClick, onLogoutClick }) {
+export default function NavBottom ({
+  user,
+  onSettingClick,
+  onLogoutClick,
+  hideSetting
+}) {
   return (
     <div className={`${prefixCls}-nav__bottom`}>
       <div className={`${prefixCls}-nav__bottom-image`}>
@@ -31,16 +36,18 @@ export default function NavBottom ({ user, onSettingClick, onLogoutClick }) {
           )}
         />
       </div>
-      <div className={`${prefixCls}-nav__bottom-settings`}>
-        <Button
-          icon="settings"
-          onClick={e => onSettingClick(e)}
-          className={cx(
-            `${prefixCls}-nav__btn-icon`,
-            `${prefixCls}-nav__bottom-settings-icon`
-          )}
-        />
-      </div>
+      {!hideSetting && (
+        <div className={`${prefixCls}-nav__bottom-settings`}>
+          <Button
+            icon="settings"
+            onClick={e => onSettingClick(e)}
+            className={cx(
+              `${prefixCls}-nav__btn-icon`,
+              `${prefixCls}-nav__bottom-settings-icon`
+            )}
+          />
+        </div>
+      )}
     </div>
   )
 }
@@ -52,5 +59,6 @@ NavBottom.propTypes = {
     company: PropTypes.string
   }),
   onSettingClick: PropTypes.func,
-  onLogoutClick: PropTypes.func
+  onLogoutClick: PropTypes.func,
+  hideSetting: PropTypes.bool
 }

src/components/Nav/__tests__/index.test.js

@@ -87,6 +87,24 @@ describe('<Nav>', () => {
       expect(getByTestId1('nav1')?.style?.width).toBe('200px')
       expect(getByTestId2('nav2')?.style?.width).toBeUndefined
     })
+    it('should show setting button correctly according the value of hideSetting', () => {
+      const { getByTestId: getByTestId1 } = render(
+        <Nav selectedId="1" data-testid="nav1">
+          <NavItem id="1" />
+        </Nav>
+      )
+      const { getByTestId: getByTestId2 } = render(
+        <Nav selectedId="1" hideSetting data-testid="nav2">
+          <NavItem id="1" />
+        </Nav>
+      )
+      expect(
+        getByTestId1('nav1').querySelector(`.${navClassName}__bottom-settings`)
+      ).not.toBeNull()
+      expect(
+        getByTestId2('nav2').querySelector(`.${navClassName}__bottom-settings`)
+      ).toBeNull()
+    })
     // TODO test computed style
     it.skip('should render hovered NavItem or SubNav correctly', () => {})
   })