@teselagen/ui 0.4.13 → 0.4.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ui",
-  "version": "0.4.13",
+  "version": "0.4.15",
   "main": "./src/index.js",
   "exports": {
     ".": {
@@ -16,6 +16,10 @@
     "@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",
+    "@dnd-kit/utilities": "3.2.2",
     "@teselagen/react-table": "6.10.16",
     "bluebird": "3.7.2",
     "buffer": "5.7.1",
@@ -30,10 +34,8 @@
     "immer": "^9.0.15",
     "is-mobile": "^3.0.0",
     "jszip": "^3.10.1",
-    "lodash": "4.17.21",
     "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",
@@ -47,7 +49,6 @@
     "react-redux": "^8.0.5",
     "react-rnd": "^10.2.4",
     "react-router-dom": "^4.3.1",
-    "react-sortable-hoc": "^0.6.8",
     "react-transition-group": "^2.4.0",
     "recompose": "npm:react-recompose@0.31.1",
     "redux": "^4.1.2",

package/src/DataTable/CellDragHandle.js

@@ -1,21 +1,20 @@
 import { flatMap } from "lodash-es";
 import { forEach } from "lodash-es";
 import React, { useRef } from "react";
-import ReactDOM from "react-dom";
 
-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 table = thisTable.querySelector(".rt-table");
     const trs = table.querySelectorAll(`.rt-tr-group.with-row-data`);
     const [rowId, path] = cellId.split(":");
     const selectedTr = table.querySelector(
@@ -83,7 +82,7 @@ export function CellDragHandle({
 
   const mouseup = useRef(() => {
     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
@@ -126,6 +125,6 @@ export function CellDragHandle({
         document.addEventListener("mouseup", mouseup.current, false);
       }}
       className="cellDragHandle"
-    ></div>
+    />
   );
-}
+};

package/src/DataTable/ColumnFilterMenu.js

@@ -0,0 +1,60 @@
+import React, { useState } from "react";
+import classNames from "classnames";
+import { Icon, Popover } from "@blueprintjs/core";
+
+export const ColumnFilterMenu = ({
+  addFilters,
+  compact,
+  currentFilter,
+  currentParams,
+  dataType,
+  extraCompact,
+  filterActiveForColumn,
+  FilterMenu,
+  filterOn,
+  removeSingleFilter,
+  schemaForField,
+  setNewParams
+}) => {
+  const [columnFilterMenuOpen, setColumnFilterMenuOpen] = useState(false);
+  return (
+    <Popover
+      position="bottom"
+      onClose={() => {
+        setColumnFilterMenuOpen(false);
+      }}
+      isOpen={columnFilterMenuOpen}
+      modifiers={{
+        preventOverflow: { enabled: true },
+        hide: { enabled: false },
+        flip: { enabled: false }
+      }}
+    >
+      <Icon
+        style={{ marginLeft: 5 }}
+        icon="filter"
+        iconSize={extraCompact ? 14 : undefined}
+        onClick={() => {
+          setColumnFilterMenuOpen(!columnFilterMenuOpen);
+        }}
+        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>
+  );
+};

package/src/DataTable/DropdownCell.js

@@ -0,0 +1,61 @@
+import React, { useState } from "react";
+import classNames from "classnames";
+import TgSelect from "../TgSelect";
+
+export const DropdownCell = ({
+  options,
+  isMulti,
+  initialValue,
+  finishEdit,
+  cancelEdit,
+  dataTest
+}) => {
+  const [v, setV] = useState(
+    isMulti
+      ? initialValue.split(",").map(v => ({ value: v, label: v }))
+      : initialValue
+  );
+  return (
+    <div
+      className={classNames("tg-dropdown-cell-edit-container", {
+        "tg-dropdown-cell-edit-container-multi": isMulti
+      })}
+    >
+      <TgSelect
+        small
+        multi={isMulti}
+        autoOpen
+        value={v}
+        onChange={val => {
+          if (isMulti) {
+            setV(val);
+            return;
+          }
+          finishEdit(val ? val.value : null);
+        }}
+        {...dataTest}
+        popoverProps={{
+          onClose: e => {
+            if (isMulti) {
+              if (e && e.key === "Escape") {
+                cancelEdit();
+              } else {
+                finishEdit(
+                  v && v.map
+                    ? v
+                        .map(v => v.value)
+                        .filter(v => v)
+                        .join(",")
+                    : v
+                );
+              }
+            } else {
+              cancelEdit();
+            }
+          }
+        }}
+        options={options.map(value => ({ label: value, value }))}
+      />
+    </div>
+  );
+};

package/src/DataTable/EditabelCell.js

@@ -0,0 +1,55 @@
+import React, { useEffect, useRef, useState } from "react";
+
+export const EditableCell = ({
+  cancelEdit,
+  dataTest,
+  finishEdit,
+  initialValue,
+  isEditableCellInitialValue,
+  isNumeric,
+  shouldSelectAll,
+  stopSelectAll
+}) => {
+  const [value, setValue] = useState(initialValue);
+  const inputRef = useRef(null);
+
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+      if (isEditableCellInitialValue && !isNumeric) {
+        inputRef.current.selectionStart = inputRef.current.value.length;
+        inputRef.current.selectionEnd = inputRef.current.value.length;
+      } else if (shouldSelectAll) {
+        inputRef.current.select();
+        stopSelectAll();
+      }
+    }
+  }, [isEditableCellInitialValue, isNumeric, shouldSelectAll, stopSelectAll]);
+
+  return (
+    <input
+      style={{
+        border: 0,
+        width: "95%",
+        fontSize: 12,
+        background: "none"
+      }}
+      ref={inputRef}
+      {...dataTest}
+      autoFocus
+      onKeyDown={e => {
+        if (e.key === "Enter") {
+          finishEdit(value);
+          e.stopPropagation();
+        } else if (e.key === "Escape") {
+          e.stopPropagation();
+          cancelEdit();
+        }
+      }}
+      onBlur={() => finishEdit(value)}
+      onChange={e => setValue(e.target.value)}
+      type={isNumeric ? "number" : undefined}
+      value={value}
+    />
+  );
+};

package/src/DataTable/PagingTool.js

@@ -5,7 +5,7 @@ import { noop, get, toInteger } from "lodash-es";
 import { Button, Classes } from "@blueprintjs/core";
 import { onEnterOrBlurHelper } from "../utils/handlerHelpers";
 import { defaultPageSizes } from "./utils/queryParams";
-import getIdOrCodeOrIndex from "./utils/getIdOrCodeOrIndex";
+import { getIdOrCodeOrIndex } from "./utils";
 
 function PagingInput({ disabled, onBlur, defaultPage }) {
   const [page, setPage] = useState(defaultPage);

package/src/DataTable/SortableColumns.js

@@ -1,24 +1,62 @@
 import React, { Component } from "react";
-import { SortableContainer } from "react-sortable-hoc";
+import { MouseSensor, useSensor, useSensors, DndContext } from "@dnd-kit/core";
+import {
+  SortableContext,
+  horizontalListSortingStrategy
+} from "@dnd-kit/sortable";
+import { restrictToHorizontalAxis } from "@dnd-kit/modifiers";
 
 function CustomTheadComponent(props) {
   const headerColumns = props.children.props.children;
+  const mouseSensor = useSensor(MouseSensor, {
+    activationConstraint: {
+      distance: 10
+    }
+  });
+
+  const sensors = useSensors(mouseSensor);
+  function handleDragEnd(event) {
+    const { active, over } = event;
+
+    if (!over || !active) {
+      return;
+    }
+
+    if (active.id === over.id) {
+      return;
+    }
+    props.onSortEnd({
+      oldIndex: parseInt(active.id),
+      newIndex: parseInt(over.id)
+    });
+  }
+
   return (
-    <div className={"rt-thead " + props.className} style={props.style}>
-      <div className="rt-tr">
-        {headerColumns.map(column => {
-          // if a column is marked as immovable just return regular column
-          if (column.props.immovable === "true") return column;
-          // keeps track of hidden columns here so columnIndex might not equal i
-          return column;
-        })}
-      </div>
-    </div>
+    <DndContext
+      onDragStart={props.onSortStart}
+      onDragEnd={handleDragEnd}
+      modifiers={[restrictToHorizontalAxis]}
+      sensors={sensors}
+    >
+      <SortableContext
+        items={headerColumns.map((_item, index) => `${index}`)}
+        strategy={horizontalListSortingStrategy}
+      >
+        <div className={"rt-thead " + props.className} style={props.style}>
+          <div className="rt-tr">
+            {headerColumns.map(column => {
+              // if a column is marked as immovable just return regular column
+              if (column.props.immovable === "true") return column;
+              // keeps track of hidden columns here so columnIndex might not equal i
+              return column;
+            })}
+          </div>
+        </div>
+      </SortableContext>
+    </DndContext>
   );
 }
 
-const SortableCustomTheadComponent = SortableContainer(CustomTheadComponent);
-
 class SortableColumns extends Component {
   shouldCancelStart = e => {
     const className = e.target.className;
@@ -43,15 +81,12 @@ class SortableColumns extends Component {
 
   render() {
     return (
-      <SortableCustomTheadComponent
+      <CustomTheadComponent
         {...this.props}
-        lockAxis="x"
         onSortStart={this.onSortStart}
-        axis="x"
-        distance={10}
+        onSortEnd={this.onSortEnd}
         helperClass="above-dialog"
         shouldCancelStart={this.shouldCancelStart}
-        onSortEnd={this.onSortEnd}
       />
     );
   }

package/src/DataTable/dataTableEnhancer.js

@@ -6,7 +6,7 @@
  */
 import { reduxForm } from "redux-form";
 
-import { arrayMove } from "react-sortable-hoc";
+import { arrayMove } from "@dnd-kit/sortable";
 import { toArray, keyBy, get } from "lodash-es";
 import { withProps, withState, branch, compose } from "recompose";
 import withTableParams from "../DataTable/utils/withTableParams";