@teselagen/ui 0.5.21 → 0.5.23-beta.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@teselagen/ui",
-  "version": "0.5.21",
-  "main": "./index.js",
+  "version": "0.5.23-beta.1",
+  "main": "./src/index.js",
   "exports": {
     ".": {
       "import": "./index.es.js",
@@ -12,10 +12,6 @@
   "dependencies": {
     "@teselagen/file-utils": "0.3.16",
     "@teselagen/bounce-loader": "0.3.11",
-    "@blueprintjs/core": "3.52.0",
-    "@blueprintjs/datetime": "3.23.19",
-    "@blueprintjs/icons": "3.33.0",
-    "@blueprintjs/select": "3.18.11",
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/modifiers": "^7.0.0",
     "@dnd-kit/sortable": "^8.0.0",
@@ -36,8 +32,6 @@
     "jszip": "^3.10.1",
     "lodash-es": "^4.17.21",
     "math-expression-evaluator": "^1.3.7",
-    "mobx": "^6.10.2",
-    "mobx-react": "^9.0.1",
     "mock-fs": "5.2.0",
     "nanoid": "^4.0.0",
     "papaparse": "^5.3.2",

package/src/DataTable/CellDragHandle.js

@@ -1,89 +1,90 @@
 import { flatMap } from "lodash-es";
 import { forEach } from "lodash-es";
-import React, { useRef } from "react";
-import ReactDOM from "react-dom";
+import React, { useCallback, useRef } from "react";
 
-export function CellDragHandle({
+export const CellDragHandle = ({
   thisTable,
   onDragEnd,
   cellId,
   isSelectionARectangle
-}) {
+}) => {
   const xStart = useRef(0);
   const timeoutkey = useRef();
   const rowsToSelect = useRef();
   const rectangleCellPaths = useRef();
 
-  const handleDrag = useRef(e => {
-    const table = ReactDOM.findDOMNode(thisTable).querySelector(".rt-table");
-    const trs = table.querySelectorAll(`.rt-tr-group.with-row-data`);
-    const [rowId, path] = cellId.split(":");
-    const selectedTr = table.querySelector(
-      `.rt-tr-group.with-row-data[data-test-id="${rowId}"]`
-    );
-    if (!selectedTr) return;
-    const selectedIndex = selectedTr.dataset.index;
+  const handleDrag = useCallback(
+    e => {
+      const table = thisTable.querySelector(".rt-table");
+      const trs = table.querySelectorAll(`.rt-tr-group.with-row-data`);
+      const [rowId, path] = cellId.split(":");
+      const selectedTr = table.querySelector(
+        `.rt-tr-group.with-row-data[data-test-id="${rowId}"]`
+      );
+      if (!selectedTr) return;
+      const selectedIndex = selectedTr.dataset.index;
 
-    if (selectedTr && trs.length) {
-      const selectedY = selectedTr.getBoundingClientRect().y;
-      const cursorY = e.clientY;
-      clearTimeout(timeoutkey.current);
-      // eslint-disable-next-line no-inner-declarations
-      function updateScrollIfNecessary() {
-        const { y, height } = table.getBoundingClientRect();
-        if (cursorY < y) {
-          table.scrollBy(0, -5);
-        } else if (cursorY > y + height) {
-          table.scrollBy(0, 5);
-        }
-      }
-      updateScrollIfNecessary();
-      timeoutkey.current = setInterval(() => {
+      if (selectedTr && trs.length) {
+        const selectedY = selectedTr.getBoundingClientRect().y;
+        const cursorY = e.clientY;
+        clearTimeout(timeoutkey.current);
+        const updateScrollIfNecessary = () => {
+          const { y, height } = table.getBoundingClientRect();
+          if (cursorY < y) {
+            table.scrollBy(0, -5);
+          } else if (cursorY > y + height) {
+            table.scrollBy(0, 5);
+          }
+        };
         updateScrollIfNecessary();
-      }, 10);
+        timeoutkey.current = setInterval(() => {
+          updateScrollIfNecessary();
+        }, 10);
 
-      const isCursorBelow = cursorY > selectedY;
-      rowsToSelect.current = [];
-      forEach(trs, (tr, index) => {
-        let isSelectedForUpdate;
-        const rowId = tr.dataset.testId;
-        const changeDashedBorder = (path, on) => {
-          tr.querySelector(`[data-test="tgCell_${path}"]`).parentNode.classList[
-            on ? "add" : "remove"
-          ]("selectedForUpdate");
-        };
-        if (isCursorBelow ? index > selectedIndex : index < selectedIndex) {
-          const { y, height } = tr.getBoundingClientRect();
-          if (isCursorBelow ? y < cursorY : y + height > cursorY) {
-            rowsToSelect.current.push(rowId);
-            isSelectedForUpdate = true;
-            //add dashed borders
+        const isCursorBelow = cursorY > selectedY;
+        rowsToSelect.current = [];
+        forEach(trs, (tr, index) => {
+          let isSelectedForUpdate;
+          const rowId = tr.dataset.testId;
+          const changeDashedBorder = (path, on) => {
+            tr.querySelector(
+              `[data-test="tgCell_${path}"]`
+            ).parentNode.classList[on ? "add" : "remove"]("selectedForUpdate");
+          };
+          if (isCursorBelow ? index > selectedIndex : index < selectedIndex) {
+            const { y, height } = tr.getBoundingClientRect();
+            if (isCursorBelow ? y < cursorY : y + height > cursorY) {
+              rowsToSelect.current.push(rowId);
+              isSelectedForUpdate = true;
+              //add dashed borders
 
+              if (rectangleCellPaths.current) {
+                rectangleCellPaths.current.forEach(path => {
+                  changeDashedBorder(path, true);
+                });
+              } else {
+                changeDashedBorder(path, true);
+              }
+            }
+          }
+          if (!isSelectedForUpdate) {
             if (rectangleCellPaths.current) {
               rectangleCellPaths.current.forEach(path => {
-                changeDashedBorder(path, true);
+                changeDashedBorder(path, false);
               });
             } else {
-              changeDashedBorder(path, true);
-            }
-          }
-        }
-        if (!isSelectedForUpdate) {
-          if (rectangleCellPaths.current) {
-            rectangleCellPaths.current.forEach(path => {
               changeDashedBorder(path, false);
-            });
-          } else {
-            changeDashedBorder(path, false);
+            }
           }
-        }
-      });
-    }
-  });
+        });
+      }
+    },
+    [cellId, thisTable]
+  );
 
-  const mouseup = useRef(() => {
+  const onMouseUp = useCallback(() => {
     clearTimeout(timeoutkey.current);
-    const table = ReactDOM.findDOMNode(thisTable);
+    const table = thisTable;
     const trs = table.querySelectorAll(`.rt-tr-group.with-row-data`);
     const [, path] = cellId.split(":");
     //remove the dashed borders
@@ -98,8 +99,8 @@ export function CellDragHandle({
         el.parentNode.classList.remove("selectedForUpdate");
       }
     });
-    document.removeEventListener("mousemove", handleDrag.current, false);
-    document.removeEventListener("mouseup", mouseup.current, false);
+    document.removeEventListener("mousemove", handleDrag, false);
+    document.removeEventListener("mouseup", onMouseUp, false);
     onDragEnd(
       flatMap(rowsToSelect.current, id => {
         if (rectangleCellPaths.current) {
@@ -111,7 +112,7 @@ export function CellDragHandle({
         }
       })
     );
-  });
+  }, [cellId, handleDrag, onDragEnd, thisTable]);
 
   return (
     <div
@@ -122,10 +123,10 @@ export function CellDragHandle({
         if (isRect) {
           rectangleCellPaths.current = selectedPaths;
         }
-        document.addEventListener("mousemove", handleDrag.current, false);
-        document.addEventListener("mouseup", mouseup.current, false);
+        document.addEventListener("mousemove", handleDrag, false);
+        document.addEventListener("mouseup", onMouseUp, false);
       }}
       className="cellDragHandle"
-    ></div>
+    />
   );
-}
+};

package/src/DataTable/ColumnFilterMenu.js

@@ -29,32 +29,32 @@ export const ColumnFilterMenu = ({
         hide: { enabled: false },
         flip: { enabled: false }
       }}
+      content={
+        <FilterMenu
+          addFilters={addFilters}
+          compact={compact}
+          currentFilter={currentFilter}
+          currentParams={currentParams}
+          dataType={dataType}
+          filterOn={filterOn}
+          removeSingleFilter={removeSingleFilter}
+          schemaForField={schemaForField}
+          setNewParams={setNewParams}
+          togglePopover={() => {
+            setColumnFilterMenuOpen(false);
+          }}
+        />
+      }
     >
       <Icon
         style={{ marginLeft: 5 }}
         icon="filter"
-        iconSize={extraCompact ? 14 : undefined}
-        onClick={() => {
-          setColumnFilterMenuOpen(!columnFilterMenuOpen);
-        }}
+        size={extraCompact ? 14 : undefined}
+        onClick={() => setColumnFilterMenuOpen(prev => !prev)}
         className={classNames("tg-filter-menu-button", {
           "tg-active-filter": !!filterActiveForColumn
         })}
       />
-      <FilterMenu
-        addFilters={addFilters}
-        compact={compact}
-        currentFilter={currentFilter}
-        currentParams={currentParams}
-        dataType={dataType}
-        filterOn={filterOn}
-        removeSingleFilter={removeSingleFilter}
-        schemaForField={schemaForField}
-        setNewParams={setNewParams}
-        togglePopover={() => {
-          setColumnFilterMenuOpen(false);
-        }}
-      />
     </Popover>
   );
 };