fix: provide onClick feature

Provide onClick facility for all the kind of menus VAN-1914
chore(deps): update dependency react-router-dom to v6.23.0
2024-05-07 15:55:57 +01:00 · 2024-04-29 04:22:05 +00:00 · 2024-04-29 04:21:31 +00:00
5 changed files with 40 additions and 23 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,7 +26,7 @@
        "@edx/frontend-platform": "8.0.0",
        "@edx/reactifex": "^2.1.1",
        "@openedx/frontend-build": "14.0.3",
-        "@openedx/paragon": "22.2.2",
+        "@openedx/paragon": "22.3.1",
        "@testing-library/dom": "10.0.0",
        "@testing-library/jest-dom": "5.17.0",
        "@testing-library/react": "10.4.9",
@@ -37,7 +37,7 @@
        "react": "17.0.2",
        "react-dom": "17.0.2",
        "react-redux": "7.2.9",
-        "react-router-dom": "6.22.3",
+        "react-router-dom": "6.23.0",
        "react-test-renderer": "17.0.2",
        "redux": "4.2.1",
        "redux-saga": "1.3.0"
@@ -3651,10 +3651,17 @@
      }
    },
    "node_modules/@openedx/paragon": {
-      "version": "22.2.2",
-      "resolved": "https://registry.npmjs.org/@openedx/paragon/-/paragon-22.2.2.tgz",
-      "integrity": "sha512-kHljO3JjLQzkk16aOIUN+LbSVMF9a6jkO0G9CmAYhYRDZMpWlP8qUz5uWk7pJvQdCoqD2dL9Cp9YqhWLXCa2kQ==",
+      "version": "22.3.1",
+      "resolved": "https://registry.npmjs.org/@openedx/paragon/-/paragon-22.3.1.tgz",
+      "integrity": "sha512-5+hHOKO8W9H1gwjYnj2iMqZ1cgPzNE4FWl+31vwtU1SXS9eGQLb5ukJJKHIk0A4Tt0CoLgb544wwDI+BkyfIpA==",
      "dev": true,
+      "workspaces": [
+        "example",
+        "component-generator",
+        "www",
+        "icons",
+        "dependent-usage-analyzer"
+      ],
      "dependencies": {
        "@fortawesome/fontawesome-svg-core": "^6.1.1",
        "@fortawesome/react-fontawesome": "^0.1.18",
@@ -3871,9 +3878,9 @@
      "dev": true
    },
    "node_modules/@remix-run/router": {
-      "version": "1.15.3",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.3.tgz",
-      "integrity": "sha512-Oy8rmScVrVxWZVOpEF57ovlnhpZ8CCPlnIIumVcV9nFdiSIrus99+Lw78ekXyGvVDlIsFJbSfmSovJUhCWYV3w==",
+      "version": "1.16.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.0.tgz",
+      "integrity": "sha512-Quz1KOffeEf/zwkCBM3kBtH4ZoZ+pT3xIXBG4PPW/XFtDP7EGhtTiC2+gpL9GnR7+Qdet5Oa6cYSvwKYg6kN9Q==",
      "dev": true,
      "engines": {
        "node": ">=14.0.0"
@@ -15649,12 +15656,12 @@
      }
    },
    "node_modules/react-router": {
-      "version": "6.22.3",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.3.tgz",
-      "integrity": "sha512-dr2eb3Mj5zK2YISHK++foM9w4eBnO23eKnZEDs7c880P6oKbrjz/Svg9+nxqtHQK+oMW4OtjZca0RqPglXxguQ==",
+      "version": "6.23.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.23.0.tgz",
+      "integrity": "sha512-wPMZ8S2TuPadH0sF5irFGjkNLIcRvOSaEe7v+JER8508dyJumm6XZB1u5kztlX0RVq6AzRVndzqcUh6sFIauzA==",
      "dev": true,
      "dependencies": {
-        "@remix-run/router": "1.15.3"
+        "@remix-run/router": "1.16.0"
      },
      "engines": {
        "node": ">=14.0.0"
@@ -15664,13 +15671,13 @@
      }
    },
    "node_modules/react-router-dom": {
-      "version": "6.22.3",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.3.tgz",
-      "integrity": "sha512-7ZILI7HjcE+p31oQvwbokjk6OA/bnFxrhJ19n82Ex9Ph8fNAq+Hm/7KchpMGlTgWhUxRHMMCut+vEtNpWpowKw==",
+      "version": "6.23.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.23.0.tgz",
+      "integrity": "sha512-Q9YaSYvubwgbal2c9DJKfx6hTNoBp3iJDsl+Duva/DwxoJH+OTXkxGpql4iUK2sla/8z4RpjAm6EWx1qUDuopQ==",
      "dev": true,
      "dependencies": {
-        "@remix-run/router": "1.15.3",
-        "react-router": "6.22.3"
+        "@remix-run/router": "1.16.0",
+        "react-router": "6.23.0"
      },
      "engines": {
        "node": ">=14.0.0"
--- a/package.json
+++ b/package.json
@@ -38,7 +38,7 @@
    "@edx/frontend-platform": "8.0.0",
    "@edx/reactifex": "^2.1.1",
    "@openedx/frontend-build": "14.0.3",
-    "@openedx/paragon": "22.2.2",
+    "@openedx/paragon": "22.3.1",
    "@testing-library/dom": "10.0.0",
    "@testing-library/jest-dom": "5.17.0",
    "@testing-library/react": "10.4.9",
@@ -49,7 +49,7 @@
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-redux": "7.2.9",
-    "react-router-dom": "6.22.3",
+    "react-router-dom": "6.23.0",
    "react-test-renderer": "17.0.2",
    "redux": "4.2.1",
    "redux-saga": "1.3.0"
--- a/src/DesktopHeader.jsx
+++ b/src/DesktopHeader.jsx
@@ -33,6 +33,7 @@ class DesktopHeader extends React.Component {
        submenuContent,
        disabled,
        isActive,
+        onClick,
      } = menuItem;

      if (type === 'item') {
@@ -41,6 +42,7 @@ class DesktopHeader extends React.Component {
            key={`${type}-${content}`}
            className={`nav-link${disabled ? ' disabled' : ''}${isActive ? ' active' : ''}`}
            href={href}
+            onClick={onClick || null}
          >
            {content}
          </a>
@@ -49,7 +51,7 @@ class DesktopHeader extends React.Component {

      return (
        <Menu key={`${type}-${content}`} tag="div" className="nav-item" respondToPointerEvents>
-          <MenuTrigger tag="a" className="nav-link d-inline-flex align-items-center" href={href}>
+          <MenuTrigger onClick={onClick || null} tag="a" className="nav-link d-inline-flex align-items-center" href={href}>
            {content} <CaretIcon role="img" aria-hidden focusable="false" />
          </MenuTrigger>
          <MenuContent className="pin-left pin-right shadow py-2">
@@ -94,12 +96,13 @@ class DesktopHeader extends React.Component {
            <React.Fragment key={index}>
              {group.heading && <div className="dropdown-header" role="heading" aria-level="1">{group.heading}</div>}
              {group.items.map(({
-                type, content, href, disabled, isActive,
+                type, content, href, disabled, isActive, onClick,
              }) => (
                <a
                  className={`dropdown-${type}${isActive ? ' active' : ''}${disabled ? ' disabled' : ''}`}
                  key={`${type}-${content}`}
                  href={href}
+                  onClick={onClick || null}
                >
                  {content}
                </a>
@@ -184,6 +187,7 @@ DesktopHeader.propTypes = {
      href: PropTypes.string,
      content: PropTypes.string,
      isActive: PropTypes.bool,
+      onClick: PropTypes.func,
    })),
  })),
  loggedOutItems: PropTypes.arrayOf(PropTypes.shape({
--- a/src/MobileHeader.jsx
+++ b/src/MobileHeader.jsx
@@ -33,6 +33,7 @@ class MobileHeader extends React.Component {
        submenuContent,
        disabled,
        isActive,
+        onClick,
      } = menuItem;

      if (type === 'item') {
@@ -41,6 +42,7 @@ class MobileHeader extends React.Component {
            key={`${type}-${content}`}
            className={`nav-link${disabled ? ' disabled' : ''}${isActive ? ' active' : ''}`}
            href={href}
+            onClick={onClick || null}
          >
            {content}
          </a>
@@ -49,7 +51,7 @@ class MobileHeader extends React.Component {

      return (
        <Menu key={`${type}-${content}`} tag="div" className="nav-item">
-          <MenuTrigger tag="a" role="button" tabIndex="0" className="nav-link">
+          <MenuTrigger onClick={onClick || null} tag="a" role="button" tabIndex="0" className="nav-link">
            {content}
          </MenuTrigger>
          <MenuContent className="position-static pin-left pin-right py-2">
@@ -75,12 +77,13 @@ class MobileHeader extends React.Component {

    return userMenu.map((group) => (
      group.items.map(({
-        type, content, href, disabled, isActive,
+        type, content, href, disabled, isActive, onClick,
      }) => (
        <li className="nav-item" key={`${type}-${content}`}>
          <a
            className={`nav-link${isActive ? ' active' : ''}${disabled ? ' disabled' : ''}`}
            href={href}
+            onClick={onClick || null}
          >
            {content}
          </a>
@@ -192,6 +195,7 @@ MobileHeader.propTypes = {
      href: PropTypes.string,
      content: PropTypes.string,
      isActive: PropTypes.bool,
+      onClick: PropTypes.func,
    })),
  })),
  loggedOutItems: PropTypes.arrayOf(PropTypes.shape({
--- a/src/snapshots/Header.test.jsx.snap
+++ b/src/snapshots/Header.test.jsx.snap
@@ -33,6 +33,7 @@ exports[`<Header /> renders correctly for anonymous desktop 1`] = `
        <a
          className="nav-link"
          href="http://localhost:18000/dashboard"
+          onClick={null}
        >
          Courses
        </a>
@@ -229,6 +230,7 @@ exports[`<Header /> renders correctly for authenticated desktop 1`] = `
        <a
          className="nav-link"
          href="http://localhost:18000/dashboard"
+          onClick={null}
        >
          Courses
        </a>
Author	SHA1	Message	Date
Ahtesham Quraish	59db41c61e	fix: provide onClick feature Provide onClick facility for all the kind of menus VAN-1914	2024-05-07 15:55:57 +01:00
renovate[bot]	0415c00353	chore(deps): update dependency react-router-dom to v6.23.0	2024-04-29 04:22:05 +00:00
renovate[bot]	9d01c074e0	chore(deps): update dependency @openedx/paragon to v22.3.1	2024-04-29 04:21:31 +00:00