Merge pull request #62 from qld-gov-au/remove-jquery-reference-from-c…

…ustom-component-library Remove jquery reference from custom component library
qld-gov-au · May 26, 2022 · 9c6d78e · 9c6d78e
2 parents ae80f10 + 11680f6
commit 9c6d78e
Show file tree

Hide file tree

Showing 12 changed files with 29 additions and 19 deletions.
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -5,7 +5,7 @@ module.exports = {
   stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
   addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
   framework: "@storybook/html",
-  staticDirs: ["../lib", "../node_modules/jquery/dist"],
+  staticDirs: ["../lib"],
   core: {
     builder: "webpack5",
   },

diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -3,7 +3,6 @@
 <link href="https://www.qld.gov.au/_qgdesigns/css/qg-main.css?v=0.3.0" rel="stylesheet"> 
 <link href="https://www.qld.gov.au/__data/assets/css_file_folder/0015/110823/qg-components.css?v=0.1.10" rel="stylesheet">
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
-<script src="./jquery.min.js"></script>
 <script src="./formio.full.js"></script>
 <script src="./premium.min.js"></script>
 <link rel="stylesheet" href="./formio.full.min.css">

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -64,7 +64,6 @@
     "formiojs": "^4.14.2",
     "jest": "^27.5.1",
     "jest-raw-loader": "^1.0.1",
-    "jquery": "^3.6.0",
     "lodash": "^4.17.21",
     "mini-css-extract-plugin": "^2.6.0",
     "node-sass": "^7.0.1",

diff --git a/src/examples/DownloadPdf/DownloadPdf.code.js b/src/examples/DownloadPdf/DownloadPdf.code.js
@@ -4,7 +4,6 @@ import { DownloadPdf } from "!!./DownloadPdf";
 
 export const downloadPdfCode = `
 <head>
-  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script src="https://static.qgov.net.au/formio-qld/v1/v1.x.x-latest/formio-script.min.js"></script>
 </head>
 <body>

diff --git a/src/examples/DownloadPdf/DownloadPdf.stories.mdx b/src/examples/DownloadPdf/DownloadPdf.stories.mdx
@@ -8,6 +8,8 @@ import { downloadPdfWizardCode } from "./DownloadPdfWizard.code";
 
 # Download PDF example
 
+This example is still in BETA.
+
 This example using the form.io form action and PdfSubmitButton component to enable PDF generation for the submission.
 
 TODO - document the process of setup the form action in form.io, with the action title needed to be `pdfUrl`

diff --git a/src/examples/DownloadPdf/DownloadPdfWizard.code.js b/src/examples/DownloadPdf/DownloadPdfWizard.code.js
@@ -4,7 +4,6 @@ import { DownloadPdfWizard } from "!!./DownloadPdfWizard";
 
 export const downloadPdfWizardCode = `
 <head>
-  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script src="https://static.qgov.net.au/formio-qld/v1/v1.x.x-latest/formio-script.min.js"></script>
 </head>
 <body>

diff --git a/src/examples/SimpleWizard/SimpleWizard.code.js b/src/examples/SimpleWizard/SimpleWizard.code.js
@@ -4,7 +4,6 @@ import { SimpleWizard } from "!!./SimpleWizard";
 
 export const simpleWizardCode = `
 <head>
-  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script src="https://static.qgov.net.au/formio-qld/v1/v1.x.x-latest/formio-script.min.js"></script>
 </head>
 <body>

diff --git a/src/examples/SingleSignOn/SingleSignOn.code.js b/src/examples/SingleSignOn/SingleSignOn.code.js
@@ -4,7 +4,6 @@ import { SingleSignOn } from "!!./SingleSignOn";
 
 export const singleSignOnCode = `
 <head>
-  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script src="https://static.qgov.net.au/formio-qld/v1/v1.x.x-latest/formio-script.min.js"></script>
 </head>
 <body>

diff --git a/src/helpers/FormioLoader/FormioLoader.js b/src/helpers/FormioLoader/FormioLoader.js
@@ -1,5 +1,6 @@
 import defaultCreateFormOptions from "../../config/createForm.options";
 import defaultCreateFormController from "../../config/createForm.controller";
+import { delegateSelector } from "../../utils/delegateSelector";
 
 // plugin function to fix the namespace/project option doesn't pass to Formio.makeRequest/Formio.makeStaticRequest
 const requestPluginHandler = (requestArgs, opts) => {
@@ -124,7 +125,7 @@ const initFormioInstance = (elem, opts) => {
       opts.createFormCallback(callbackProps);
     } else {
       // Force new tab on formlinks
-      $(elem).on("click", `a`, (e) => {
+      delegateSelector(elem, "click", "a", (e) => {
         e.target.target = "_blank";
       });
     }

diff --git a/src/test/setupTest.js b/src/test/setupTest.js
@@ -7,7 +7,6 @@ import { getComponents } from "../utils/getComponents";
 
 global.window.scrollTo = jest.fn();
 global.premium = {};
-global.$ = require("jquery");
 
 Formio.use({
   components: getComponents(components),

diff --git a/src/utils/delegateSelector.js b/src/utils/delegateSelector.js
@@ -0,0 +1,24 @@
+export const delegateSelector = (elements, event, childSelector, handler) => {
+  const is = (el, s) => {
+    return (
+      el.matches ||
+      el.matchesSelector ||
+      el.msMatchesSelector ||
+      el.mozMatchesSelector ||
+      el.webkitMatchesSelector ||
+      el.oMatchesSelector
+    ).call(el, s);
+  };
+  const addEvent = (el) => {
+    el.addEventListener(event, (e) => {
+      if (is(e.target, childSelector)) {
+        handler(e);
+      }
+    });
+  };
+  if (Array.isArray(elements)) {
+    [].forEach.call(elements, addEvent);
+  } else {
+    addEvent(elements);
+  }
+};
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,7 +4,6 @@ import { DownloadPdf } from "!!./DownloadPdf"; @@
     export const downloadPdfCode = `
     <head>
-      <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
       <script src="https://static.qgov.net.au/formio-qld/v1/v1.x.x-latest/formio-script.min.js"></script>
     </head>
     <body>
@@ Expand Down @@