fix: rest MUI components - Introduced ForwardRef (#224)

* refactor(162): added forwardRef Card * refactor(162): introduced forwardRefDivider * refactor(162): introduced forwardRef MuiComponents * refactor(162): introducing forwardRef * refactor(162): introduced forwardRef * refactor(162): introduced forwardRef * fix(162): fixed link * fix: fixed port number * fix: fixed duplicated id * fix: fixed ref iconbutton * fix: updated snaps * fix: fixed port * fix: fixed eslint errors * fix: the item should be a button * fix: fixed eslint errors
2026-01-16 08:05:44 +07:00 · 2019-10-31 08:12:18 +01:00
parent a4cdd145d2
commit b56e43846b
82 changed files with 467 additions and 269 deletions
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -50,7 +50,9 @@ const Header: React.FC<Props> = ({ logo, withoutSearch, username, onLogout, onTo
          <InnerMobileNavBar>
            <Search />
          </InnerMobileNavBar>
-          <Button color="inherit">{'Cancel'}</Button>
+          <Button color="inherit" onClick={() => setShowMobileNavBar(false)}>
+            {'Cancel'}
+          </Button>
        </MobileNavBar>
      )}
    </>
--- a/src/components/Header/HeaderMenu.tsx
+++ b/src/components/Header/HeaderMenu.tsx
@@ -1,9 +1,9 @@
 import React, { MouseEvent } from 'react';
-import MenuItem from '@material-ui/core/MenuItem';
-import Menu from '@material-ui/core/Menu';
 import AccountCircle from '@material-ui/icons/AccountCircle';

 import IconButton from '../../muiComponents/IconButton';
+import MenuItem from '../../muiComponents/MenuItem';
+import Menu from '../../muiComponents/Menu';

 import HeaderGreetings from './HeaderGreetings';

@@ -39,7 +39,6 @@ const HeaderMenu: React.FC<Props> = ({
        vertical: 'top',
        horizontal: 'right',
      }}
-      id="header--button-account"
      onClose={onLoggedInMenuClose}
      open={isMenuOpen}
      transformOrigin={{
@@ -49,7 +48,7 @@ const HeaderMenu: React.FC<Props> = ({
      <MenuItem disabled={true}>
        <HeaderGreetings username={username} />
      </MenuItem>
-      <MenuItem id="header--button-logout" onClick={onLogout}>
+      <MenuItem button={true} id="header--button-logout" onClick={onLogout}>
        {'Logout'}
      </MenuItem>
    </Menu>
--- a/src/components/Header/HeaderToolTipIcon.tsx
+++ b/src/components/Header/HeaderToolTipIcon.tsx
@@ -1,31 +1,37 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import Info from '@material-ui/icons/Info';
 import Help from '@material-ui/icons/Help';
 import Search from '@material-ui/icons/Search';

 import IconButton from '../../muiComponents/IconButton';

-import { IconSearchButton, StyledExternalLink } from './styles';
+import { IconSearchButton, StyledLink } from './styles';

 export type TooltipIconType = 'search' | 'help' | 'info';
-
 interface Props {
  tooltipIconType: TooltipIconType;
  onClick?: () => void;
 }

-const HeaderToolTipIcon: React.FC<Props> = ({ tooltipIconType, onClick }) => {
+type HeaderToolTipIconRef = HTMLButtonElement;
+
+/* eslint-disable react/jsx-no-undef */
+/* eslint-disable react/display-name */
+const HeaderToolTipIcon = forwardRef<HeaderToolTipIconRef, Props>(function HeaderToolTipIcon(
+  { tooltipIconType, onClick },
+  ref
+) {
  switch (tooltipIconType) {
    case 'help':
      return (
-        <StyledExternalLink
-          blank={true}
+        <StyledLink
          data-testid={'header--tooltip-documentation'}
+          external={true}
          to={'https://verdaccio.org/docs/en/installation'}>
          <IconButton color={'inherit'}>
            <Help />
          </IconButton>
-        </StyledExternalLink>
+        </StyledLink>
      );
    case 'info':
      return (
@@ -33,7 +39,8 @@ const HeaderToolTipIcon: React.FC<Props> = ({ tooltipIconType, onClick }) => {
          color="inherit"
          data-testid={'header--tooltip-info'}
          id="header--button-registryInfo"
-          onClick={onClick}>
+          onClick={onClick}
+          ref={ref}>
          <Info />
        </IconButton>
      );
@@ -46,6 +53,6 @@ const HeaderToolTipIcon: React.FC<Props> = ({ tooltipIconType, onClick }) => {
    default:
      return null;
  }
-};
+});

 export default HeaderToolTipIcon;
--- a/src/components/Header/snapshots/Header.test.tsx.snap
+++ b/src/components/Header/snapshots/Header.test.tsx.snap
@@ -5,10 +5,10 @@ exports[`<Header /> component with logged in state should load the component in
  class="MuiPaper-root MuiPaper-elevation4 MuiAppBar-root MuiAppBar-positionStatic css-rfunvc emotion-9 MuiAppBar-colorPrimary"
 >
  <div
-    class="MuiToolbar-root MuiToolbar-regular css-1pwdmmq emotion-8 MuiToolbar-gutters"
+    class="MuiToolbar-root MuiToolbar-regular css-1bjere7 emotion-8 MuiToolbar-gutters"
  >
    <div
-      class="MuiToolbar-root MuiToolbar-regular css-1vacr9s emotion-4 MuiToolbar-gutters"
+      class="MuiToolbar-root MuiToolbar-regular css-i5xjw9 emotion-4 MuiToolbar-gutters"
    >
      <a
        class="css-1dk30lc"
@@ -19,7 +19,7 @@ exports[`<Header /> component with logged in state should load the component in
        />
      </a>
      <div
-        class="css-13zpdre emotion-3"
+        class="css-12prohx emotion-3"
      >
        <div
          class="css-1crzyyo emotion-2"
@@ -40,7 +40,7 @@ exports[`<Header /> component with logged in state should load the component in
                class="MuiInputBase-root MuiInput-root css-n9ojyg MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedStart"
              >
                <div
-                  class="MuiInputAdornment-root css-16qv2i2 MuiInputAdornment-positionStart"
+                  class="MuiInputAdornment-root css-fvu7gn MuiInputAdornment-positionStart"
                >
                  <svg
                    aria-hidden="true"
@@ -74,10 +74,10 @@ exports[`<Header /> component with logged in state should load the component in
      </div>
    </div>
    <div
-      class="MuiToolbar-root MuiToolbar-regular css-m61s5i emotion-7 MuiToolbar-gutters"
+      class="MuiToolbar-root MuiToolbar-regular css-1qii1b7 emotion-7 MuiToolbar-gutters"
    >
      <button
-        class="MuiButtonBase-root MuiIconButton-root css-1y1xi9f emotion-5 MuiIconButton-colorInherit"
+        class="MuiButtonBase-root MuiIconButton-root css-13o7eu2 emotion-5 MuiIconButton-colorInherit"
        tabindex="0"
        type="button"
      >
@@ -101,35 +101,40 @@ exports[`<Header /> component with logged in state should load the component in
        />
      </button>
      <a
-        class="css-1aacqdd emotion-6"
+        class="css-kbn7if emotion-6"
        data-testid="header--tooltip-documentation"
        href="https://verdaccio.org/docs/en/installation"
+        rel="noopener noreferrer"
        target="_blank"
      >
-        <button
-          class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit"
-          tabindex="0"
-          type="button"
+        <h6
+          class="MuiTypography-root MuiTypography-subtitle1"
        >
-          <span
-            class="MuiIconButton-label"
+          <button
+            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit"
+            tabindex="0"
+            type="button"
          >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root"
-              focusable="false"
-              role="presentation"
-              viewBox="0 0 24 24"
+            <span
+              class="MuiIconButton-label"
            >
-              <path
-                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"
-              />
-            </svg>
-          </span>
-          <span
-            class="MuiTouchRipple-root"
-          />
-        </button>
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root"
+                focusable="false"
+                role="presentation"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"
+                />
+              </svg>
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
+        </h6>
      </a>
      <button
        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit"
@@ -193,10 +198,10 @@ exports[`<Header /> component with logged in state should load the component in
  class="MuiPaper-root MuiPaper-elevation4 MuiAppBar-root MuiAppBar-positionStatic css-rfunvc emotion-9 MuiAppBar-colorPrimary"
 >
  <div
-    class="MuiToolbar-root MuiToolbar-regular css-1pwdmmq emotion-8 MuiToolbar-gutters"
+    class="MuiToolbar-root MuiToolbar-regular css-1bjere7 emotion-8 MuiToolbar-gutters"
  >
    <div
-      class="MuiToolbar-root MuiToolbar-regular css-1vacr9s emotion-4 MuiToolbar-gutters"
+      class="MuiToolbar-root MuiToolbar-regular css-i5xjw9 emotion-4 MuiToolbar-gutters"
    >
      <a
        class="css-1dk30lc"
@@ -207,7 +212,7 @@ exports[`<Header /> component with logged in state should load the component in
        />
      </a>
      <div
-        class="css-13zpdre emotion-3"
+        class="css-12prohx emotion-3"
      >
        <div
          class="css-1crzyyo emotion-2"
@@ -228,7 +233,7 @@ exports[`<Header /> component with logged in state should load the component in
                class="MuiInputBase-root MuiInput-root css-n9ojyg MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedStart"
              >
                <div
-                  class="MuiInputAdornment-root css-16qv2i2 MuiInputAdornment-positionStart"
+                  class="MuiInputAdornment-root css-fvu7gn MuiInputAdornment-positionStart"
                >
                  <svg
                    aria-hidden="true"
@@ -262,10 +267,10 @@ exports[`<Header /> component with logged in state should load the component in
      </div>
    </div>
    <div
-      class="MuiToolbar-root MuiToolbar-regular css-m61s5i emotion-7 MuiToolbar-gutters"
+      class="MuiToolbar-root MuiToolbar-regular css-1qii1b7 emotion-7 MuiToolbar-gutters"
    >
      <button
-        class="MuiButtonBase-root MuiIconButton-root css-1y1xi9f emotion-5 MuiIconButton-colorInherit"
+        class="MuiButtonBase-root MuiIconButton-root css-13o7eu2 emotion-5 MuiIconButton-colorInherit"
        tabindex="0"
        type="button"
      >
@@ -289,35 +294,40 @@ exports[`<Header /> component with logged in state should load the component in
        />
      </button>
      <a
-        class="css-1aacqdd emotion-6"
+        class="css-kbn7if emotion-6"
        data-testid="header--tooltip-documentation"
        href="https://verdaccio.org/docs/en/installation"
+        rel="noopener noreferrer"
        target="_blank"
      >
-        <button
-          class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit"
-          tabindex="0"
-          type="button"
+        <h6
+          class="MuiTypography-root MuiTypography-subtitle1"
        >
-          <span
-            class="MuiIconButton-label"
+          <button
+            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit"
+            tabindex="0"
+            type="button"
          >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root"
-              focusable="false"
-              role="presentation"
-              viewBox="0 0 24 24"
+            <span
+              class="MuiIconButton-label"
            >
-              <path
-                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"
-              />
-            </svg>
-          </span>
-          <span
-            class="MuiTouchRipple-root"
-          />
-        </button>
+              <svg
+                aria-hidden="true"
+                class="MuiSvgIcon-root"
+                focusable="false"
+                role="presentation"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"
+                />
+              </svg>
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
+        </h6>
      </a>
      <button
        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit"
--- a/src/components/Header/styles.ts
+++ b/src/components/Header/styles.ts
@@ -1,72 +1,56 @@
 import styled, { css } from 'react-emotion';
-import AppBar from '@material-ui/core/AppBar';
-import Toolbar from '@material-ui/core/Toolbar';

 import colors from '../../utils/styles/colors';
 import mq from '../../utils/styles/media';
 import IconButton from '../../muiComponents/IconButton';
-import ExternalLink from '../Link';
+import AppBar from '../../muiComponents/AppBar';
+import Toolbar from '../../muiComponents/Toolbar';
+import Link from '../Link';

 export const InnerNavBar = styled(Toolbar)({
-  '&&': {
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    padding: '0 15px',
-  },
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  padding: '0 15px',
 });

 export const Greetings = styled('span')({
-  '&&': {
-    margin: '0 5px 0 0',
-  },
+  margin: '0 5px 0 0',
 });

 export const RightSide = styled(Toolbar)({
-  '&&': {
-    display: 'flex',
-    padding: 0,
-  },
+  display: 'flex',
+  padding: 0,
 });

 export const LeftSide = styled(RightSide)({
-  '&&': {
-    flex: 1,
-  },
+  flex: 1,
 });

 export const MobileNavBar = styled('div')({
-  '&&': {
-    alignItems: 'center',
-    display: 'flex',
-    borderBottom: `1px solid ${colors.greyLight}`,
-    padding: '8px',
-    position: 'relative',
-  },
+  alignItems: 'center',
+  display: 'flex',
+  borderBottom: `1px solid ${colors.greyLight}`,
+  padding: '8px',
+  position: 'relative',
 });

 export const InnerMobileNavBar = styled('div')({
-  '&&': {
-    borderRadius: '4px',
-    backgroundColor: colors.greyLight,
-    color: colors.white,
-    width: '100%',
-    padding: '0 5px',
-    margin: '0 10px 0 0',
-  },
+  borderRadius: '4px',
+  backgroundColor: colors.greyLight,
+  color: colors.white,
+  width: '100%',
+  padding: '0 5px',
+  margin: '0 10px 0 0',
 });

 export const IconSearchButton = styled(IconButton)({
-  '&&': {
-    display: 'block',
-  },
+  display: 'block',
 });

 export const SearchWrapper = styled('div')({
-  '&&': {
-    display: 'none',
-    maxWidth: '393px',
-    width: '100%',
-  },
+  display: 'none',
+  maxWidth: '393px',
+  width: '100%',
 });

 export const NavBar = styled(AppBar)`
@@ -104,8 +88,6 @@ export const NavBar = styled(AppBar)`
  }
 `;

-export const StyledExternalLink = styled(ExternalLink)({
-  '&&': {
-    color: 'white',
-  },
+export const StyledLink = styled(Link)({
+  color: 'white',
 });