@teselagen/ui 0.5.21 → 0.5.23-beta.1

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>
+  );
+};

package/src/DataTable/dataTableEnhancer.js

@@ -5,300 +5,41 @@
  * @property {string} queryName What the props come back on ( by default = modelName + 'Query')
  */
 import { reduxForm } from "redux-form";
-
-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";
-import convertSchema from "../DataTable/utils/convertSchema";
-import { viewColumn, openColumn } from "../DataTable/viewColumn";
+import { branch, compose, withProps } from "recompose";
 import pureNoFunc from "../utils/pureNoFunc";
-import tgFormValues from "../utils/tgFormValues";
-import getTableConfigFromStorage from "./utils/getTableConfigFromStorage";
-
+import { withRouter } from "react-router-dom";
+
+/*
+  Right now DataTable is doing the same as withTableParams, so the logic is being
+  run twice. We need to refactor this to make it more DRY.
+  We could do two possible refactorings:
+  - remove withTableParams and just give all the appropiate props to DataTable. This would
+  make the component simpler.
+  - remove the logic from DataTable and just use withTableParams and a new hook called
+  useTableParams. This would be more flexible in the case we want to be able to use
+  pagination in a different component.
+  We should avoid having the component handle all the different
+  cases of input because of the next reasons:
+  1. It makes the component more complex and harder to understand.
+  2. It makes the component harder to test.
+  3. It makes the component harder to reuse.
+  4. Maintaining the the logic in the component is harder.
+  Keeping the logic and uses simple makes maintaining easier.
+
+  In my opinion, reduxForm could be replaced here with regular redux or even just be taken down.
+  Could be a major simplification, but this needs to be analized with lims for better
+  understanding if it's possible.
+*/
 export default compose(
-  // maybe we need this in some cases?
-  // tgFormValues("reduxFormEntities"),
-  // withProps(props => {
-  //   const entities = props.reduxFormEntities || props.entities;
-  //   return {
-  //     _origEntities: props.entities,
-  //     entities
-  //   };
-  // }),
-  //connect to withTableParams here in the dataTable component so that, in the case that the table is not manually connected,
-  withTableParams({
-    isLocalCall: true
-  }),
-  branch(
-    props => props.showEmptyColumnsByDefault,
-    withState("showForcedHiddenColumns", "setShowForcedHidden", true),
-    withState("showForcedHiddenColumns", "setShowForcedHidden", false)
-  ),
-  withProps(ownProps => {
-    let propsToUse = ownProps;
-    if (!ownProps.isTableParamsConnected) {
-      //this is the case where we're hooking up to withTableParams locally, so we need to take the tableParams off the props
-      propsToUse = {
-        ...ownProps,
-        ...ownProps.tableParams
-      };
-    }
-
-    const {
-      schema,
-      withDisplayOptions,
-      syncDisplayOptionsToDb,
-      formName,
-      tableConfigurations,
-      deleteTableConfiguration,
-      upsertTableConfiguration,
-      upsertFieldOption,
-      currentUser,
-      isViewable,
-      isOpenable,
-      entities = [],
-      cellRenderer = {},
-      showForcedHiddenColumns,
-      isSimple,
-      isInfinite,
-      compact = true,
-      extraCompact
-    } = propsToUse;
-    let schemaToUse = convertSchema(schema);
-    let fieldOptsByPath = {};
-    let tableConfig = {};
-    let resetDefaultVisibility;
-    let updateColumnVisibility;
-    let persistPageSize;
-    let moveColumnPersist;
-    let resizePersist;
-    let updateTableDisplayDensity;
-    let compactToUse = !!compact;
-    let extraCompactToUse = !!extraCompact;
-
-    if (isViewable) {
-      schemaToUse.fields = [viewColumn, ...schemaToUse.fields];
-    }
-    if (isOpenable) {
-      schemaToUse.fields = [openColumn, ...schemaToUse.fields];
-    }
-    // this must come before handling orderings.
-    schemaToUse.fields = schemaToUse.fields.map(field => {
-      if (field.placementPath) {
-        return {
-          ...field,
-          sortDisabled:
-            field.sortDisabled ||
-            (typeof field.path === "string" && field.path.includes(".")),
-          path: field.placementPath
-        };
-      } else {
-        return field;
-      }
-    });
-    const hasOptionForForcedHidden =
-      withDisplayOptions && (isSimple || isInfinite);
-    if (withDisplayOptions) {
-      if (syncDisplayOptionsToDb) {
-        tableConfig = tableConfigurations && tableConfigurations[0];
-      } else {
-        tableConfig = getTableConfigFromStorage(formName);
-      }
-      if (!tableConfig) {
-        tableConfig = {
-          fieldOptions: []
-        };
-      }
-      if (tableConfig.density) {
-        compactToUse = tableConfig.density === "compact";
-      }
-      if (tableConfig.density) {
-        extraCompactToUse = tableConfig.density === "extraCompact";
-      }
-      const columnOrderings = tableConfig.columnOrderings;
-      fieldOptsByPath = keyBy(tableConfig.fieldOptions, "path");
-      schemaToUse = {
-        ...schemaToUse,
-        fields: schemaToUse.fields.map(field => {
-          const fieldOpt = fieldOptsByPath[field.path];
-          let noValsForField = false;
-          // only add this hidden column ability if no paging
-          if (!showForcedHiddenColumns && hasOptionForForcedHidden) {
-            noValsForField = entities.every(e => {
-              const val = get(e, field.path);
-              return field.render
-                ? !field.render(val, e)
-                : cellRenderer[field.path]
-                  ? !cellRenderer[field.path](val, e)
-                  : !val;
-            });
-          }
-          if (noValsForField) {
-            return {
-              ...field,
-              isHidden: true,
-              isForcedHidden: true
-            };
-          } else if (fieldOpt) {
-            return {
-              ...field,
-              isHidden: fieldOpt.isHidden
-            };
-          } else {
-            return field;
-          }
-        })
-      };
-
-      if (columnOrderings) {
-        const fieldsWithOrders = [];
-        const fieldsWithoutOrder = [];
-        // if a new field has been added since the orderings were set then we want
-        // it to be at the end instead of the beginning
-        schemaToUse.fields.forEach(field => {
-          if (columnOrderings.indexOf(field.path) > -1) {
-            fieldsWithOrders.push(field);
-          } else {
-            fieldsWithoutOrder.push(field);
-          }
-        });
-        schemaToUse.fields = fieldsWithOrders
-          .sort(({ path: path1 }, { path: path2 }) => {
-            return (
-              columnOrderings.indexOf(path1) - columnOrderings.indexOf(path2)
-            );
-          })
-          .concat(fieldsWithoutOrder);
-        tableConfig.columnOrderings = schemaToUse.fields.map(f => f.path);
-      }
-
-      if (syncDisplayOptionsToDb) {
-        //sync up to db
-        let tableConfigurationId;
-        resetDefaultVisibility = function () {
-          tableConfigurationId = tableConfig.id;
-
-          if (tableConfigurationId) {
-            deleteTableConfiguration(tableConfigurationId);
-          }
-        };
-        updateColumnVisibility = function ({ shouldShow, path }) {
-          if (tableConfigurationId) {
-            const existingFieldOpt = fieldOptsByPath[path] || {};
-            upsertFieldOption({
-              id: existingFieldOpt.id,
-              path,
-              isHidden: !shouldShow,
-              tableConfigurationId
-            });
-          } else {
-            upsertTableConfiguration({
-              userId: currentUser.user.id,
-              formName,
-              fieldOptions: [
-                {
-                  path,
-                  isHidden: !shouldShow
-                }
-              ]
-            });
-          }
-        };
-      } else {
-        const syncStorage = () => {
-          window.localStorage.setItem(formName, JSON.stringify(tableConfig));
-        };
-
-        //sync display options with localstorage
-        resetDefaultVisibility = function () {
-          window.localStorage.removeItem(formName);
-        };
-        updateColumnVisibility = function ({ path, paths, shouldShow }) {
-          const newFieldOpts = {
-            ...fieldOptsByPath
-          };
-          const pathsToUse = paths ? paths : [path];
-          pathsToUse.forEach(path => {
-            newFieldOpts[path] = { path, isHidden: !shouldShow };
-          });
-          tableConfig.fieldOptions = toArray(newFieldOpts);
-          syncStorage();
-        };
-        updateTableDisplayDensity = function (density) {
-          tableConfig.density = density;
-          syncStorage();
-        };
-        persistPageSize = function (pageSize) {
-          tableConfig.userSetPageSize = pageSize;
-          syncStorage();
-        };
-        moveColumnPersist = function ({ oldIndex, newIndex }) {
-          // we might already have an array of the fields [path1, path2, ..etc]
-          const columnOrderings =
-            tableConfig.columnOrderings ||
-            schemaToUse.fields.map(({ path }) => path); // columnOrderings is [path1, path2, ..etc]
-
-          tableConfig.columnOrderings = arrayMove(
-            columnOrderings,
-            oldIndex,
-            newIndex
-          );
-          syncStorage();
-        };
-        resizePersist = function (newResized) {
-          tableConfig.resized = newResized;
-          syncStorage();
-        };
-      }
-    }
-    const resized = tableConfig.resized;
-    return {
-      ...propsToUse,
-      schema: schemaToUse,
-      compact: compactToUse,
-      extraCompact: extraCompactToUse,
-      resized,
-      resetDefaultVisibility,
-      updateColumnVisibility,
-      persistPageSize,
-      updateTableDisplayDensity,
-      resizePersist,
-      moveColumnPersist,
-      hasOptionForForcedHidden
-    };
-  }),
-  branch(props => !props.noForm, reduxForm({})), //the formName is passed via withTableParams and is often user overridden
-  tgFormValues(
-    "localStorageForceUpdate",
-    "reduxFormQueryParams",
-    "reduxFormSearchInput",
-    "onlyShowRowsWErrors",
-    "reduxFormSelectedEntityIdMap",
-    "reduxFormExpandedEntityIdMap",
-    "reduxFormSelectedCells",
-    "reduxFormEditingCell",
-    "reduxFormEditingCellSelectAll",
-    "reduxFormCellIdToEditValue",
-    "reduxFormEntities",
-    "reduxFormCellValidation",
-    "reduxFormEntitiesUndoRedoStack"
-  ),
-  withProps(props => {
-    const entities = props.reduxFormEntities || props.entities;
-    return {
-      _origEntities: props.entities,
-      entities
-    };
-  }),
-  // withFields({
-  //   names: [
-  //     "localStorageForceUpdate",
-  //     "reduxFormQueryParams",
-  //     "reduxFormSearchInput",
-  //     "reduxFormSelectedEntityIdMap",
-  //     "reduxFormExpandedEntityIdMap"
-  //   ]
-  // }),
-  branch(props => !props.alwaysRerender, pureNoFunc)
+  // Function to make sure we don't rerender unless there are changes
+  // in the params
+  branch(props => !props.alwaysRerender, pureNoFunc),
+  // form prop is needed for redux-form, but we are giving this prop as
+  // formName, so we need to rename it. Previously it was done in the withTableParams, but now
+  // it doesn't have it by default.
+  withProps(({ formName }) => ({ form: formName })),
+  // the formName is passed via withTableParams and is often user overridden
+  branch(props => !props.noForm, reduxForm({})),
+  // don't use withRouter if noRouter is passed!
+  branch(props => !props.noRouter, withRouter)
 );