@teselagen/ui 0.0.9 → 0.0.12

package/src/DataTable/SortableColumns.js

@@ -0,0 +1,53 @@
+import React, { Component } from "react";
+import { SortableContainer } from "react-sortable-hoc";
+
+function CustomTheadComponent(props) {
+  const headerColumns = props.children.props.children;
+  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>
+  );
+}
+
+const SortableCustomTheadComponent = SortableContainer(CustomTheadComponent);
+
+class SortableColumns extends Component {
+  shouldCancelStart = e => {
+    const className = e.target.className;
+    // if its an svg then it's a blueprint icon
+    return (
+      e.target instanceof SVGElement || className.indexOf("rt-resizer") > -1
+    );
+  };
+
+  onSortEnd = ({ oldIndex, newIndex }) => {
+    this.props.moveColumn({
+      oldIndex,
+      newIndex
+    });
+  };
+
+  render() {
+    return (
+      <SortableCustomTheadComponent
+        {...this.props}
+        lockAxis="x"
+        axis="x"
+        distance={10}
+        helperClass="above-dialog"
+        shouldCancelStart={this.shouldCancelStart}
+        onSortEnd={this.onSortEnd}
+      />
+    );
+  }
+}
+
+export default SortableColumns;

package/src/DataTable/TableFormTrackerContext.js

@@ -0,0 +1,10 @@
+import React from "react";
+
+const TableFormTrackerContext = React.createContext({
+  formNames: [],
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  pushFormName: () => {},
+  isActive: false
+});
+
+export default TableFormTrackerContext;

package/src/DataTable/dataTableEnhancer.js

@@ -0,0 +1,291 @@
+/**
+ * @param {options} options
+ * @typedef {object} options
+ * @property {boolean} isPlural Are we searching for 1 thing or many?
+ * @property {string} queryName What the props come back on ( by default = modelName + 'Query')
+ */
+import { reduxForm } from "redux-form";
+
+import { arrayMove } from "react-sortable-hoc";
+import { toArray, keyBy, get } from "lodash";
+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 pureNoFunc from "../utils/pureNoFunc";
+import tgFormValues from "../utils/tgFormValues";
+import getTableConfigFromStorage from "./utils/getTableConfigFromStorage";
+
+export default compose(
+  //connect to withTableParams here in the dataTable component so that, in the case that the table is not manually connected,
+  withTableParams({
+    isLocalCall: 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)
+);

package/src/DataTable/defaultFormatters.js

@@ -0,0 +1,32 @@
+import { toNumber } from "lodash";
+import { getVals } from "./getVals";
+import { isValueEmpty } from "./isValueEmpty";
+import { isTruthy } from "./isTruthy";
+
+export const defaultFormatters = {
+  boolean: newVal => {
+    return isTruthy(newVal);
+  },
+  dropdown: (newVal, field) => {
+    const valsMap = {};
+    getVals(field.values).forEach(v => {
+      valsMap[v.toLowerCase().trim()] = v;
+    });
+    return valsMap[newVal?.toLowerCase().trim()] || newVal;
+  },
+  dropdownMulti: (newVal, field) => {
+    const valsMap = {};
+    getVals(field.values).forEach(v => {
+      valsMap[v.toLowerCase().trim()] = v;
+    });
+    if (!newVal) return;
+    return newVal
+      .split(",")
+      .map(v => valsMap[v.toLowerCase().trim()] || v)
+      .join(",");
+  },
+  number: newVal => {
+    if (isValueEmpty(newVal)) return newVal;
+    return toNumber(newVal);
+  }
+};

package/src/DataTable/defaultProps.js

@@ -0,0 +1,45 @@
+import { noop } from "lodash";
+
+// eslint-disable-next-line import/no-anonymous-default-export
+export default {
+  //NOTE: DO NOT SET DEFAULTS HERE FOR PROPS THAT GET COMPUTED AS PART OF PRESET GROUPS IN computePresets
+  addFilters: noop,
+  className: "",
+  clearFilters: noop,
+  contextMenu: noop,
+  disabled: false,
+  entities: [],
+  extraClasses: "",
+  filters: [],
+  isCopyable: true,
+  isEntityDisabled: noop,
+  isLoading: false,
+  isSimple: false,
+  isSingleSelect: false,
+  maxHeight: 600,
+  noHeader: false,
+  noSelect: false,
+  noUserSelect: false,
+  onDeselect: noop,
+  onMultiRowSelect: noop,
+  onRowClick: noop,
+  onRowSelect: noop,
+  onSingleRowSelect: noop,
+  page: 1,
+  pageSize: 10,
+  reduxFormExpandedEntityIdMap: {},
+  reduxFormSearchInput: "",
+  reduxFormSelectedEntityIdMap: {},
+  removeSingleFilter: noop,
+  resized: [],
+  resizePersist: noop,
+  setFilter: noop,
+  setOrder: noop,
+  setPage: noop,
+  setPageSize: noop,
+  setSearchTerm: noop,
+  showCount: false,
+  style: {},
+  withCheckboxes: false,
+  withSort: true
+};

package/src/DataTable/defaultValidators.js

@@ -0,0 +1,40 @@
+import { isNumber } from "lodash";
+import { getVals } from "./getVals";
+import { isValueEmpty } from "./isValueEmpty";
+
+export const defaultValidators = {
+  dropdown: (newVal, field) => {
+    const err = "Please choose one of the accepted values";
+    if (!newVal) {
+      if (field.isRequired) return err;
+    } else if (!getVals(field.values).includes(newVal)) {
+      return err;
+    }
+  },
+  dropdownMulti: (newVal, field) => {
+    const err = "Please choose one of the accepted values";
+    if (!newVal) {
+      if (field.isRequired) return err;
+    } else {
+      let err;
+      newVal.split(",").some(v => {
+        if (!getVals(field.values).includes(v)) {
+          err = `${v} is not an accepted value`;
+          return true;
+        }
+        return false;
+      });
+      return err;
+    }
+  },
+  number: (newVal, field) => {
+    if (isValueEmpty(newVal) && !field.isRequired) return;
+    if (isNaN(newVal) || !isNumber(newVal)) {
+      return "Must be a number";
+    }
+  },
+  string: (newVal, field) => {
+    if (!field.isRequired) return false;
+    if (!newVal) return "Please enter a value here";
+  }
+};

package/src/DataTable/editCellHelper.js

@@ -0,0 +1,44 @@
+import { set } from "lodash";
+import { defaultValidators } from "./defaultValidators";
+import { defaultFormatters } from "./defaultFormatters";
+
+//(mutative) responsible for formatting and then validating the
+
+export const editCellHelper = ({
+  entity,
+  path,
+  schema,
+  columnSchema,
+  newVal
+}) => {
+  let nv = newVal;
+
+  const colSchema =
+    columnSchema || schema?.fields?.find(({ path: p }) => p === path) || {};
+  path = path || colSchema.path;
+  const { format, validate, type } = colSchema;
+  let error;
+  if (nv === undefined && colSchema.defaultValue !== undefined)
+    nv = colSchema.defaultValue;
+
+  if (format) {
+    nv = format(nv, colSchema);
+  }
+  if (defaultFormatters[type]) {
+    nv = defaultFormatters[type](nv, colSchema);
+  }
+  if (validate) {
+    error = validate(nv, colSchema, entity);
+  }
+  if (!error) {
+    const validator =
+      defaultValidators[type] ||
+      type === "string" ||
+      (type === undefined && defaultValidators.string);
+    if (validator) {
+      error = validator(nv, colSchema);
+    }
+  }
+  set(entity, path, nv);
+  return { entity, error };
+};

package/src/DataTable/getCellVal.js

@@ -0,0 +1,20 @@
+import { get } from "lodash";
+import { isString } from "lodash";
+import { isTruthy } from "./isTruthy";
+
+export const getCellVal = (ent, path, col) => {
+  const isBool = col?.type === "boolean";
+  let selectedCellVal = get(ent, path, "");
+  if (isBool) {
+    if (isString(selectedCellVal)) {
+      selectedCellVal = selectedCellVal.toLowerCase();
+    }
+    selectedCellVal =
+      selectedCellVal === "true" ||
+      selectedCellVal === true ||
+      selectedCellVal === 1 ||
+      selectedCellVal === "yes";
+    selectedCellVal = isTruthy(selectedCellVal);
+  }
+  return selectedCellVal;
+};

package/src/DataTable/getVals.js

@@ -0,0 +1,8 @@
+import { isFunction } from "lodash";
+
+export function getVals(values) {
+  if (isFunction(values)) {
+    return values();
+  }
+  return values;
+}