Merge pull request #23 from ryu-sato/feat/automatically-enable-plugin

feat: Automatically enable plugin

README.md

@@ -1,6 +1,6 @@
 ## growi-plugin-datatables
 
-This [GROWI](https://github.com/weseek/growi)'s plugin add button whose adapt [DataTable](https://datatables.net/) to table.
+This [GROWI](https://github.com/weseek/growi)'s plugin adapt [DataTable](https://datatables.net/) to table.
 
 DataTable is extended by following features.
 
@@ -16,11 +16,7 @@ DataTable is extended by following features.
   - "CSV" button: Download the table in CSV format
   - "Print" button: Print the table
 
-### before adapt
-
-![image](https://github.com/weseek/growi-plugin-datatables/assets/32702772/fed3b66b-6b1b-4dd3-9d2b-43693255eb49)
-
-### after adapt and filter with "carnivore" and sort by "Name"
+### After filtering by "carnivore" and sorting by "Name"
 
 ![image](https://github.com/weseek/growi-plugin-datatables/assets/32702772/5491e0af-0150-4189-947e-e3c2acf85293)
 

dist/manifest.json

@@ -1,14 +1,14 @@
 {
   "client-entry.tsx": {
-    "file": "assets/client-entry.13796303.js",
+    "file": "assets/client-entry.2331ca5e.js",
     "src": "client-entry.tsx",
     "isEntry": true,
     "css": [
-      "assets/client-entry.faff0f8a.css"
+      "assets/client-entry.db426607.css"
     ]
   },
   "client-entry.css": {
-    "file": "assets/client-entry.faff0f8a.css",
+    "file": "assets/client-entry.db426607.css",
     "src": "client-entry.css"
   }
 }

package.json

@@ -32,6 +32,7 @@
     "datatables.net-select-bs5": "^2.0.0",
     "mathjs": "^12.3.0",
     "react": "^18.2.0",
+    "react-async": "^10.0.1",
     "react-dom": "^18.2.0",
     "react-innertext": "^1.1.5",
     "uuid": "^9.0.1"

src/DataTable.css

@@ -2,10 +2,3 @@
 @import 'datatables.net-buttons-bs5/css/buttons.bootstrap5.css';
 @import 'datatables.net-select-bs5/css/select.bootstrap5.css';
 @import 'datatables.net-searchpanes-bs5/css/searchPanes.bootstrap5.css';
-
-.gpdt-enabling-datatable {
-  position: absolute;
-  top: 0.5rem;
-  right: 4rem;
-  z-index: 1;
-}

src/DataTable.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import { type FunctionComponent } from 'react';
+import Async from 'react-async';
 
 import DataTable, { type Api as DataTableApi } from 'datatables.net-bs5';
 import { v4 as uuidv4 } from 'uuid';
@@ -17,11 +18,10 @@ import './DataTable.css';
 import { type MethodType, MethodTypes, CalcMethod } from './CalcMethod';
 import type { ConfigWeaken, OrderExtend } from './DataTableCustom';
 
-export const wrapDataTable = (Table: React.FunctionComponent<any>): React.FunctionComponent<any> => {
+export const wrapDataTable = (Table: FunctionComponent<any>): FunctionComponent<any> => {
   return ({ children, ...props }) => {
     const containerId = uuidv4();
     const dtSelector = `#${containerId} table`;
-    const buttonId = uuidv4();
     /*
      * DataTable の設定
      * - DataTable 全体を div で括って class "mb-3" を付与
@@ -73,15 +73,12 @@ export const wrapDataTable = (Table: React.FunctionComponent<any>): React.Functi
       return calculatedData;
     };
 
-    const displayElement = (target: HTMLElement) => {
-      target.classList.remove('d-none');
-    };
+    // [MEMO] useEffect を使うと ReactCurrentDispatcher が null になる
+    // (おそらく plugin が読み込む react インスタンスが app(GROWI) と異なるため)
+    // そこで、async-react を使って、plugin を有効化するためのイベント処理を行っている
+    const enableDataTable = async () => {
+      if (DataTable.isDataTable(dtSelector)) return;
 
-    const hideElement = (target: HTMLElement) => {
-      target.classList.add('d-none');
-    };
-    const enableDataTable = (event: React.MouseEvent<HTMLElement>) => {
-      hideElement(event.target as HTMLElement);
       const api = new DataTable(dtSelector, dataTableOptions as ConfigWeaken);
 
       api.on('order.dt', () => {
@@ -104,28 +101,12 @@ export const wrapDataTable = (Table: React.FunctionComponent<any>): React.Functi
       (api.order as any).neutral().draw();
     };
 
-    const displayEnablingDataTableButton = () => {
-      const element = document.getElementById(buttonId);
-      if (element == null) return;
-      if (DataTable.isDataTable(dtSelector)) return;
-
-      displayElement(element);
-    };
-
-    const hideEnablingDataTableButton = () => {
-      const element = document.getElementById(buttonId);
-      if (element == null) return;
-
-      hideElement(element);
-    };
-
     return (
-      <div id={containerId} className="position-relative" onMouseOver={displayEnablingDataTableButton} onMouseOut={hideEnablingDataTableButton}>
-        <button id={buttonId} onClick={enableDataTable} className="btn btn-sm btn-secondary d-none gpdt-enabling-datatable">
-          Enable DataTable
-        </button>
-        <Table {...props}>{children}</Table>
-      </div>
+      <Async promiseFn={enableDataTable}>
+        <div id={containerId} className="position-relative">
+          <Table {...props}>{children}</Table>
+        </div>
+      </Async>
     );
   };
 };

yarn.lock

@@ -2486,6 +2486,11 @@ queue-microtask@^1.2.2:
   resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
   integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
 
+react-async@^10.0.1:
+  version "10.0.1"
+  resolved "https://registry.yarnpkg.com/react-async/-/react-async-10.0.1.tgz#575c083f808303d2f6ca52d11ec7554dbdbd9fcd"
+  integrity sha512-ORUz5ca0B57QgBIzEZM5SuhJ6xFjkvEEs0gylLNlWf06vuVcLZsjIw3wx58jJkZG38p+0nUAxRgFW2b7mnVZzA==
+
 react-dom@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"