@teselagen/ui 0.6.6 → 0.7.1

package/src/DataTable/RenderCell.js

@@ -0,0 +1,191 @@
+import React from "react";
+import { useSelector } from "react-redux";
+import { Checkbox, Icon } from "@blueprintjs/core";
+import {
+  getIdOrCodeOrIndex,
+  isBottomRightCornerOfRectangle,
+  PRIMARY_SELECTED_VAL
+} from "./utils";
+import { DropdownCell } from "./DropdownCell";
+import { EditableCell } from "./EditableCell";
+import { getVals } from "./getVals";
+import { CellDragHandle } from "./CellDragHandle";
+
+export const RenderCell = ({
+  oldFunc,
+  getCopyTextForCell,
+  column,
+  isCellEditable,
+  isEntityDisabled,
+  finishCellEdit,
+  formName,
+  noEllipsis,
+  cancelCellEdit,
+  getCellHoverText,
+  selectedCells,
+  isSelectionARectangle,
+  startCellEdit,
+  tableRef,
+  onDragEnd,
+  args
+}) => {
+  const editingCell = useSelector(
+    state => state.form?.[formName]?.values?.reduxFormEditingCell
+  );
+  const initialValue = useSelector(
+    state => state.form?.[formName]?.values?.reduxFormInitialValue
+  );
+
+  const [row] = args;
+  const rowId = getIdOrCodeOrIndex(row.original, row.index);
+  const cellId = `${rowId}:${row.column.path}`;
+  const isEditingCell = editingCell === cellId;
+  let val = oldFunc(...args);
+  const oldVal = val;
+  const text = getCopyTextForCell(val, row, column);
+  const dataTest = {
+    "data-test": "tgCell_" + column.path
+  };
+  const fullValue = row.original?.[row.column.path];
+
+  if (isEditingCell) {
+    if (column.type === "genericSelect") {
+      const GenericSelectComp = column.GenericSelectComp;
+
+      return (
+        <GenericSelectComp
+          rowId={rowId}
+          fullValue={fullValue}
+          initialValue={text}
+          {...dataTest}
+          finishEdit={(newVal, doNotStopEditing) => {
+            finishCellEdit(cellId, newVal, doNotStopEditing);
+          }}
+          dataTest={dataTest}
+          cancelEdit={cancelCellEdit}
+        />
+      );
+    }
+    if (column.type === "dropdown" || column.type === "dropdownMulti") {
+      return (
+        <DropdownCell
+          isMulti={dataTest.isMulti || column.type === "dropdownMulti"}
+          initialValue={dataTest.initialValue || text}
+          options={getVals(column.values)}
+          finishEdit={(newVal, doNotStopEditing) => {
+            finishCellEdit(cellId, newVal, doNotStopEditing);
+          }}
+          dataTest={dataTest}
+          cancelEdit={cancelCellEdit}
+        />
+      );
+    } else {
+      return (
+        <EditableCell
+          dataTest={dataTest}
+          cancelEdit={cancelCellEdit}
+          isNumeric={column.type === "number"}
+          initialValue={initialValue || text}
+          finishEdit={newVal => {
+            finishCellEdit(cellId, newVal);
+          }}
+        />
+      );
+    }
+  }
+
+  const isBool = column.type === "boolean";
+  if (isCellEditable && isBool) {
+    val = (
+      <Checkbox
+        disabled={isEntityDisabled(row.original)}
+        className="tg-cell-edit-boolean-checkbox"
+        checked={oldVal === "True"}
+        onChange={e => {
+          const checked = e.target.checked;
+          finishCellEdit(cellId, checked);
+        }}
+      />
+    );
+    noEllipsis = true;
+  }
+
+  //wrap the original tableColumn.Cell function in another div in order to add a title attribute
+  let title = text;
+  if (getCellHoverText) title = getCellHoverText(...args);
+  else if (column.getTitleAttr) title = column.getTitleAttr(...args);
+  const isSelectedCell = selectedCells?.[cellId];
+  const {
+    isRect,
+    selectionGrid,
+    lastRowIndex,
+    lastCellIndex,
+    entityMap,
+    pathToIndex
+  } = isSelectionARectangle();
+
+  return (
+    <>
+      <div
+        style={{
+          ...(!noEllipsis && {
+            textOverflow: "ellipsis",
+            overflow: "hidden"
+          })
+        }}
+        {...dataTest}
+        className="tg-cell-wrapper"
+        data-copy-text={text}
+        data-copy-json={JSON.stringify(
+          //tnw: eventually we'll parse these back out and use either the fullValue (for the generic selects) or the regular text vals for everything else
+          column.type === "genericSelect"
+            ? {
+                __strVal: fullValue,
+                __genSelCol: column.path
+              }
+            : { __strVal: text }
+        )}
+        title={title || undefined}
+      >
+        {val}
+      </div>
+      {isCellEditable &&
+        (column.type === "dropdown" ||
+          column.type === "dropdownMulti" ||
+          column.type === "genericSelect") && (
+          <Icon
+            icon="caret-down"
+            style={{
+              position: "absolute",
+              right: 5,
+              opacity: 0.3
+            }}
+            className="cell-edit-dropdown"
+            onClick={() => {
+              startCellEdit(cellId);
+            }}
+          />
+        )}
+
+      {isSelectedCell &&
+        (isRect
+          ? isBottomRightCornerOfRectangle({
+              cellId,
+              selectionGrid,
+              lastRowIndex,
+              lastCellIndex,
+              entityMap,
+              pathToIndex
+            })
+          : isSelectedCell === PRIMARY_SELECTED_VAL) && (
+          <CellDragHandle
+            key={cellId}
+            thisTable={tableRef.current.tableRef}
+            cellId={cellId}
+            isSelectionARectangle={isSelectionARectangle}
+            onDragEnd={onDragEnd}
+          />
+        )}
+    </>
+  );
+};

package/src/DataTable/RenderCell.jsx

@@ -0,0 +1,191 @@
+import React from "react";
+import { useSelector } from "react-redux";
+import { Checkbox, Icon } from "@blueprintjs/core";
+import {
+  getIdOrCodeOrIndex,
+  isBottomRightCornerOfRectangle,
+  PRIMARY_SELECTED_VAL
+} from "./utils";
+import { DropdownCell } from "./DropdownCell";
+import { EditableCell } from "./EditabelCell";
+import { getVals } from "./getVals";
+import { CellDragHandle } from "./CellDragHandle";
+
+export const RenderCell = ({
+  oldFunc,
+  getCopyTextForCell,
+  column,
+  isCellEditable,
+  isEntityDisabled,
+  finishCellEdit,
+  formName,
+  noEllipsis,
+  cancelCellEdit,
+  getCellHoverText,
+  selectedCells,
+  isSelectionARectangle,
+  startCellEdit,
+  tableRef,
+  onDragEnd,
+  args
+}) => {
+  const editingCell = useSelector(
+    state => state.form?.[formName]?.values?.reduxFormEditingCell
+  );
+  const initialValue = useSelector(
+    state => state.form?.[formName]?.values?.reduxFormInitialValue
+  );
+
+  const [row] = args;
+  const rowId = getIdOrCodeOrIndex(row.original, row.index);
+  const cellId = `${rowId}:${row.column.path}`;
+  const isEditingCell = editingCell === cellId;
+  let val = oldFunc(...args);
+  const oldVal = val;
+  const text = getCopyTextForCell(val, row, column);
+  const dataTest = {
+    "data-test": "tgCell_" + column.path
+  };
+  const fullValue = row.original?.[row.column.path];
+
+  if (isEditingCell) {
+    if (column.type === "genericSelect") {
+      const GenericSelectComp = column.GenericSelectComp;
+
+      return (
+        <GenericSelectComp
+          rowId={rowId}
+          fullValue={fullValue}
+          initialValue={text}
+          {...dataTest}
+          finishEdit={(newVal, doNotStopEditing) => {
+            finishCellEdit(cellId, newVal, doNotStopEditing);
+          }}
+          dataTest={dataTest}
+          cancelEdit={cancelCellEdit}
+        />
+      );
+    }
+    if (column.type === "dropdown" || column.type === "dropdownMulti") {
+      return (
+        <DropdownCell
+          isMulti={dataTest.isMulti || column.type === "dropdownMulti"}
+          initialValue={dataTest.initialValue || text}
+          options={getVals(column.values)}
+          finishEdit={(newVal, doNotStopEditing) => {
+            finishCellEdit(cellId, newVal, doNotStopEditing);
+          }}
+          dataTest={dataTest}
+          cancelEdit={cancelCellEdit}
+        />
+      );
+    } else {
+      return (
+        <EditableCell
+          dataTest={dataTest}
+          cancelEdit={cancelCellEdit}
+          isNumeric={column.type === "number"}
+          initialValue={initialValue || text}
+          finishEdit={newVal => {
+            finishCellEdit(cellId, newVal);
+          }}
+        />
+      );
+    }
+  }
+
+  const isBool = column.type === "boolean";
+  if (isCellEditable && isBool) {
+    val = (
+      <Checkbox
+        disabled={isEntityDisabled(row.original)}
+        className="tg-cell-edit-boolean-checkbox"
+        checked={oldVal === "True"}
+        onChange={e => {
+          const checked = e.target.checked;
+          finishCellEdit(cellId, checked);
+        }}
+      />
+    );
+    noEllipsis = true;
+  }
+
+  //wrap the original tableColumn.Cell function in another div in order to add a title attribute
+  let title = text;
+  if (getCellHoverText) title = getCellHoverText(...args);
+  else if (column.getTitleAttr) title = column.getTitleAttr(...args);
+  const isSelectedCell = selectedCells?.[cellId];
+  const {
+    isRect,
+    selectionGrid,
+    lastRowIndex,
+    lastCellIndex,
+    entityMap,
+    pathToIndex
+  } = isSelectionARectangle();
+
+  return (
+    <>
+      <div
+        style={{
+          ...(!noEllipsis && {
+            textOverflow: "ellipsis",
+            overflow: "hidden"
+          })
+        }}
+        {...dataTest}
+        className="tg-cell-wrapper"
+        data-copy-text={text}
+        data-copy-json={JSON.stringify(
+          //tnw: eventually we'll parse these back out and use either the fullValue (for the generic selects) or the regular text vals for everything else
+          column.type === "genericSelect"
+            ? {
+                __strVal: fullValue,
+                __genSelCol: column.path
+              }
+            : { __strVal: text }
+        )}
+        title={title || undefined}
+      >
+        {val}
+      </div>
+      {isCellEditable &&
+        (column.type === "dropdown" ||
+          column.type === "dropdownMulti" ||
+          column.type === "genericSelect") && (
+          <Icon
+            icon="caret-down"
+            style={{
+              position: "absolute",
+              right: 5,
+              opacity: 0.3
+            }}
+            className="cell-edit-dropdown"
+            onClick={() => {
+              startCellEdit(cellId);
+            }}
+          />
+        )}
+
+      {isSelectedCell &&
+        (isRect
+          ? isBottomRightCornerOfRectangle({
+              cellId,
+              selectionGrid,
+              lastRowIndex,
+              lastCellIndex,
+              entityMap,
+              pathToIndex
+            })
+          : isSelectedCell === PRIMARY_SELECTED_VAL) && (
+          <CellDragHandle
+            key={cellId}
+            thisTable={tableRef.current.tableRef}
+            cellId={cellId}
+            isSelectionARectangle={isSelectionARectangle}
+            onDragEnd={onDragEnd}
+          />
+        )}
+    </>
+  );
+};

package/src/DataTable/SearchBar.js

@@ -5,13 +5,20 @@ import { onEnterHelper } from "../utils/handlerHelpers";
 import { InputField } from "../FormComponents";
 
 const SearchBar = ({
-  reduxFormSearchInput,
+  searchInput,
   setSearchTerm,
   loading,
   searchMenuButton,
   disabled,
-  autoFocusSearch
+  autoFocusSearch,
+  noForm
 }) => {
+  if (noForm) {
+    console.error(
+      "The search bar requires the component to be wrapped in a form"
+    );
+    return;
+  }
   let rightElement;
   // need to always render searchMenuButton so it doesn't close
   if (searchMenuButton) {
@@ -29,7 +36,7 @@ const SearchBar = ({
         minimal
         icon="search"
         onClick={() => {
-          setSearchTerm(reduxFormSearchInput);
+          setSearchTerm(searchInput);
         }}
       />
     );
@@ -40,13 +47,13 @@ const SearchBar = ({
       disabled={disabled}
       loading={loading}
       type="search"
-      name="reduxFormSearchInput"
+      defaultValue={searchInput}
       className={classNames("datatable-search-input", Classes.ROUND)}
       placeholder="Search..."
       {...onEnterHelper(e => {
         e.preventDefault();
         e.stopPropagation();
-        setSearchTerm(reduxFormSearchInput);
+        setSearchTerm(e.target.value);
         e.nativeEvent.stopImmediatePropagation();
       })}
       rightElement={rightElement}

package/src/DataTable/SortableColumns.js

@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React from "react";
 import { MouseSensor, useSensor, useSensors, DndContext } from "@dnd-kit/core";
 import {
   SortableContext,
@@ -6,8 +6,16 @@ import {
 } from "@dnd-kit/sortable";
 import { restrictToHorizontalAxis } from "@dnd-kit/modifiers";
 
-function CustomTheadComponent(props) {
-  const headerColumns = props.children.props.children;
+const CustomTheadComponent = ({
+  children: _children,
+  className,
+  onSortEnd,
+  onSortStart,
+  style
+}) => {
+  // We need to do this because react table gives the children wrapped
+  // in another component
+  const children = _children.props.children;
   const mouseSensor = useSensor(MouseSensor, {
     activationConstraint: {
       distance: 10
@@ -15,7 +23,7 @@ function CustomTheadComponent(props) {
   });
 
   const sensors = useSensors(mouseSensor);
-  function handleDragEnd(event) {
+  const handleDragEnd = event => {
     const { active, over } = event;
 
     if (!over || !active) {
@@ -25,40 +33,36 @@ function CustomTheadComponent(props) {
     if (active.id === over.id) {
       return;
     }
-    props.onSortEnd({
+
+    onSortEnd({
       oldIndex: parseInt(active.id),
       newIndex: parseInt(over.id)
     });
-  }
+  };
 
   return (
     <DndContext
-      onDragStart={props.onSortStart}
+      onDragStart={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 className={"rt-thead " + className} style={style}>
+        <div className="rt-tr">
+          <SortableContext
+            items={children.map((_, index) => `${index}`)}
+            strategy={horizontalListSortingStrategy}
+          >
+            {children}
+          </SortableContext>
         </div>
-      </SortableContext>
+      </div>
     </DndContext>
   );
-}
+};
 
-class SortableColumns extends Component {
-  shouldCancelStart = e => {
+const SortableColumns = ({ className, style, children, moveColumn }) => {
+  const shouldCancelStart = e => {
     const className = e.target.className;
     // if its an svg then it's a blueprint icon
     return (
@@ -66,30 +70,31 @@ class SortableColumns extends Component {
     );
   };
 
-  onSortEnd = (...args) => {
+  const onSortEnd = (...args) => {
     const { oldIndex, newIndex } = args[0];
     document.body.classList.remove("drag-active");
-    this.props.moveColumn({
+    moveColumn({
       oldIndex,
       newIndex
     });
   };
 
-  onSortStart = () => {
+  const onSortStart = () => {
     document.body.classList.add("drag-active");
   };
 
-  render() {
-    return (
-      <CustomTheadComponent
-        {...this.props}
-        onSortStart={this.onSortStart}
-        onSortEnd={this.onSortEnd}
-        helperClass="above-dialog"
-        shouldCancelStart={this.shouldCancelStart}
-      />
-    );
-  }
-}
+  return (
+    <CustomTheadComponent
+      className={className}
+      style={style}
+      onSortStart={onSortStart}
+      onSortEnd={onSortEnd}
+      helperClass="above-dialog"
+      shouldCancelStart={shouldCancelStart}
+    >
+      {children}
+    </CustomTheadComponent>
+  );
+};
 
 export default SortableColumns;

package/src/DataTable/ThComponent.js

@@ -0,0 +1,44 @@
+import React from "react";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import classNames from "classnames";
+
+export const ThComponent = ({
+  toggleSort,
+  immovable,
+  className,
+  children,
+  style,
+  columnindex,
+  ...rest
+}) => {
+  const index = columnindex ?? -1;
+  const { attributes, listeners, setNodeRef, transform, transition } =
+    useSortable({
+      id: `${index}`,
+      disabled: immovable === "true"
+    });
+
+  const sortStyles = {
+    transform: CSS.Transform.toString(transform),
+    transition
+  };
+
+  return (
+    <div
+      style={{ ...sortStyles, ...style }}
+      ref={setNodeRef}
+      {...attributes}
+      {...listeners}
+      className={classNames("rt-th", className)}
+      onClick={e => toggleSort && toggleSort(e)}
+      role="columnheader"
+      tabIndex="-1" // Resolves eslint issues without implementing keyboard navigation incorrectly
+      columnindex={columnindex}
+      index={index}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+};