From 0bbe49a2d4018d2cafd030fdfe4b1420643d21a7 Mon Sep 17 00:00:00 2001
From: Kirk Swenson <kswenson@concord.org>
Date: Tue, 9 Jan 2024 20:53:24 -0800
Subject: [PATCH] chore: add React 18 example

---
 .../examples/all-providers-react-18.html      | 74 +++++++++++++++++++
 src/assets/examples/index.html                |  1 +
 2 files changed, 75 insertions(+)
 create mode 100644 src/assets/examples/all-providers-react-18.html
diff --git a/src/assets/examples/all-providers-react-18.html b/src/assets/examples/all-providers-react-18.html
new file mode 100644
index 00000000..878fddfd
--- /dev/null
+++ b/src/assets/examples/all-providers-react-18.html
@@ -0,0 +1,74 @@
+<html>
+  <head>
+    <script src="../js/globals.js"></script>
+    <!-- load React 18, replacing React 16 from globals -->
+    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
+    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
+    <script src="../js/app.js"></script>
+    <link rel="stylesheet" href="../css/app.css">
+    <title>Examples: All Providers (React 18)</title>
+  </head>
+  <body>
+    <div id="wrapper">
+    </div>
+    <script>
+      // Clients can use React 18-only createRoot API
+      let root
+      function renderRoot(content, container) {
+        if (!root) {
+          // call createRoot once only
+          root = ReactDOM.createRoot(container)
+        }
+        root.render(content)
+      }
+      var options = {
+        app: "example-app/index.html",
+        mimeType: "text/plain",
+        readableMimeTypes: ["application/json"],
+        extension: "txt",
+        readableExtensions: ["json", "txt"],
+        appName: "CFM_Demo",
+        appVersion: "0.1",
+        appBuildNum: "1",
+        iframeAllow: "geolocation; bluetooth",
+        providers: [
+          "localStorage",
+          "localFile",
+          {
+            "name": "readOnly",
+            "urlDisplayName": "examples",
+            "json": {
+              "first-example": "This is the first readonly example",
+              "second-example.txt": "This is the second readonly example"
+            }
+          },
+          {
+            "name": "googleDrive",
+            "apiKey": "AIzaSyDJsZTW51IRHPJBpVV2d3HpcOZ96H_e7nw",
+            "clientId": "107140815081-p1so3nbhgvbeio1imeigd8sf1ve7l6tj.apps.googleusercontent.com",
+            "appId": "107140815081"
+          },
+          {
+            "name": "documentStore",
+            "patch": true
+          },
+          "s3-share-provider"
+        ],
+        renderRoot,
+        ui: {
+          menu: CloudFileManager.DefaultMenu,
+          menuBar: {
+            info: "Version 1.0.0",
+            help: "http://lmgtfy.com/"
+          }
+        }
+      };
+      CloudFileManager.createFrame(options, "wrapper", function (event) {
+        if (event.type == 'connected') {
+          var client = event.data.client;
+          client.insertMenuItemAfter('openFileDialog', {"name": "Import data...", action: client.importDataDialog.bind(client)});
+        }
+      });
+    </script>
+  </body>
+</html>
diff --git a/src/assets/examples/index.html b/src/assets/examples/index.html
index 8345ab0a..3e8846b8 100644
--- a/src/assets/examples/index.html
+++ b/src/assets/examples/index.html
@@ -11,6 +11,7 @@
     <h1>Cloud File Manager Examples</h1>
     <ul>
       <li><a href="all-providers.html">All Providers</a></li>
+      <li><a href="all-providers-react-18.html">All Providers (React 18)</a></li>
       <li><a href="no-frame.html">No Frame</a></li>
       <li><a href="view-no-frame.html">View Without Frame</a></li>
       <li><a href="view-no-frame-nowrap.html">View Without Frame (unwrapped)</a></li>
