@teselagen/ui 0.7.33-beta.6 → 0.7.34

package/AdvancedOptions.js

@@ -0,0 +1,33 @@
+import React, { useState } from "react";
+import { Icon } from "@blueprintjs/core";
+
+export default function AdvancedOptions({
+  children,
+  content,
+  label,
+  style,
+  isOpenByDefault
+}) {
+  const [isOpen, setOpen] = useState(isOpenByDefault);
+  if (!(content || children)) {
+    return null;
+  }
+  return (
+    <div style={{ marginTop: 5, ...style }}>
+      <div
+        onClick={() => {
+          setOpen(!isOpen);
+        }}
+        style={{ cursor: "pointer", display: "flex", alignItems: "flex-end" }}
+        className="tg-toggle-advanced-options"
+      >
+        {label || "Advanced"}{" "}
+        <Icon
+          icon={isOpen ? "caret-down" : "caret-right"}
+          style={{ marginLeft: 5 }}
+        ></Icon>
+      </div>
+      {isOpen && <div style={{ marginTop: 10 }}>{content || children}</div>}
+    </div>
+  );
+}

package/AssignDefaultsModeContext.js

@@ -0,0 +1,22 @@
+import React from "react";
+
+export const AssignDefaultsModeContext = React.createContext({
+  inAssignDefaultsMode: false,
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  setAssignDefaultsMode: () => {}
+});
+
+export const workflowDefaultParamsObj = {
+  taskNumber: undefined,
+  workflowDefinitionName: undefined,
+  workflowDefinitionId: undefined,
+  workflowRunName: undefined,
+  workflowRunId: undefined,
+  toolName: undefined,
+  workflowToolTitle: undefined,
+  workflowToolDefinitionId: undefined,
+  workflowTaskCode: undefined
+};
+export const WorkflowDefaultParamsContext = React.createContext(
+  workflowDefaultParamsObj
+);

package/CellDragHandle.js

@@ -0,0 +1,132 @@
+import { flatMap } from "lodash-es";
+import { forEach } from "lodash-es";
+import React, { useCallback, useRef } from "react";
+
+export const CellDragHandle = ({
+  thisTable,
+  onDragEnd,
+  cellId,
+  isSelectionARectangle
+}) => {
+  const xStart = useRef(0);
+  const timeoutkey = useRef();
+  const rowsToSelect = useRef();
+  const rectangleCellPaths = useRef();
+
+  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);
+        const 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(() => {
+          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
+
+              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, false);
+              });
+            } else {
+              changeDashedBorder(path, false);
+            }
+          }
+        });
+      }
+    },
+    [cellId, thisTable]
+  );
+
+  const onMouseUp = useCallback(() => {
+    clearTimeout(timeoutkey.current);
+    const table = thisTable;
+    const trs = table.querySelectorAll(`.rt-tr-group.with-row-data`);
+    const [, path] = cellId.split(":");
+    //remove the dashed borders
+    forEach(trs, tr => {
+      if (rectangleCellPaths.current) {
+        rectangleCellPaths.current.forEach(path => {
+          const el = tr.querySelector(`[data-test="tgCell_${path}"]`);
+          el.parentNode.classList.remove("selectedForUpdate");
+        });
+      } else {
+        const el = tr.querySelector(`[data-test="tgCell_${path}"]`);
+        el.parentNode.classList.remove("selectedForUpdate");
+      }
+    });
+    document.removeEventListener("mousemove", handleDrag, false);
+    document.removeEventListener("mouseup", onMouseUp, false);
+    onDragEnd(
+      flatMap(rowsToSelect.current, id => {
+        if (rectangleCellPaths.current) {
+          return rectangleCellPaths.current.map(path => {
+            return `${id}:${path}`;
+          });
+        } else {
+          return `${id}:${path}`;
+        }
+      })
+    );
+  }, [cellId, handleDrag, onDragEnd, thisTable]);
+
+  return (
+    <div
+      onMouseDown={e => {
+        rowsToSelect.current = [];
+        xStart.current = e.clientX;
+        const { isRect, selectedPaths } = isSelectionARectangle();
+        if (isRect) {
+          rectangleCellPaths.current = selectedPaths;
+        }
+        document.addEventListener("mousemove", handleDrag, false);
+        document.addEventListener("mouseup", onMouseUp, false);
+      }}
+      className="cellDragHandle"
+    />
+  );
+};

package/ColumnFilterMenu.js

@@ -0,0 +1,62 @@
+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,
+  formName
+}) => {
+  const [columnFilterMenuOpen, setColumnFilterMenuOpen] = useState(false);
+  return (
+    <Popover
+      position="bottom"
+      onClose={() => setColumnFilterMenuOpen(false)}
+      isOpen={columnFilterMenuOpen}
+      modifiers={{
+        preventOverflow: { enabled: true },
+        hide: { enabled: false },
+        flip: { enabled: false }
+      }}
+      content={
+        <FilterMenu
+          formName={formName}
+          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"
+        size={extraCompact ? 14 : undefined}
+        onClick={e => {
+          e.preventDefault();
+          e.stopPropagation();
+          setColumnFilterMenuOpen(prev => !prev);
+        }}
+        className={classNames("tg-filter-menu-button", {
+          "tg-active-filter": !!filterActiveForColumn
+        })}
+      />
+    </Popover>
+  );
+};