@teselagen/ui 0.0.11 → 0.0.13

package/src/DataTable/utils/rowClick.js

@@ -0,0 +1,156 @@
+import { isEmpty, forEach, range } from "lodash";
+import { getSelectedRowsFromEntities } from "./selection";
+import getIdOrCodeOrIndex from "./getIdOrCodeOrIndex";
+import { getRecordsFromIdMap } from "./withSelectedEntities";
+
+export default function rowClick(e, rowInfo, entities, props) {
+  const {
+    reduxFormSelectedEntityIdMap,
+    isSingleSelect,
+    noSelect,
+    onRowClick,
+    isEntityDisabled,
+    withCheckboxes
+  } = props;
+  const entity = rowInfo.original;
+  onRowClick(e, entity, rowInfo);
+  if (noSelect || isEntityDisabled(entity)) return;
+  const rowId = getIdOrCodeOrIndex(entity, rowInfo.index);
+  if (rowId === undefined) return;
+  const ctrl = e.metaKey || e.ctrlKey || (withCheckboxes && !e.shiftKey);
+  const oldIdMap = reduxFormSelectedEntityIdMap || {};
+  const rowSelected = oldIdMap[rowId];
+  let newIdMap = {
+    [rowId]: {
+      time: Date.now(),
+      entity
+    }
+  };
+
+  if (isSingleSelect) {
+    if (rowSelected) newIdMap = {};
+  } else if (rowSelected && e.shiftKey) return;
+  else if (rowSelected && ctrl) {
+    newIdMap = {
+      ...oldIdMap
+    };
+    delete newIdMap[rowId];
+  } else if (rowSelected) {
+    newIdMap = {};
+  } else if (ctrl) {
+    newIdMap = {
+      ...oldIdMap,
+      ...newIdMap
+    };
+  } else if (e.shiftKey && !isEmpty(oldIdMap)) {
+    newIdMap = {
+      [rowId]: {
+        entity,
+        time: Date.now()
+      }
+    };
+    const currentlySelectedRowIndices = getSelectedRowsFromEntities(
+      entities,
+      oldIdMap
+    );
+    if (currentlySelectedRowIndices.length) {
+      let timeToBeat = {
+        id: null,
+        time: null
+      };
+      forEach(oldIdMap, ({ time }, key) => {
+        if (time && time > timeToBeat.time)
+          timeToBeat = {
+            id: key,
+            time
+          };
+      });
+      const mostRecentlySelectedIndex = entities.findIndex((e, i) => {
+        let id = getIdOrCodeOrIndex(e, i);
+        if (!id && id !== 0) id = "";
+        return id.toString() === timeToBeat.id;
+      });
+
+      if (mostRecentlySelectedIndex !== -1) {
+        const highRange =
+          rowInfo.index < mostRecentlySelectedIndex
+            ? mostRecentlySelectedIndex - 1
+            : rowInfo.index;
+        const lowRange =
+          rowInfo.index > mostRecentlySelectedIndex
+            ? mostRecentlySelectedIndex + 1
+            : rowInfo.index;
+        range(lowRange, highRange + 1).forEach(i => {
+          if (isEntityDisabled && isEntityDisabled(entities[i])) {
+            return;
+          }
+          const recordId = entities[i] && getIdOrCodeOrIndex(entities[i], i);
+          if (recordId || recordId === 0)
+            // newIdMap[recordId] = { entity: entities[i] };
+            newIdMap[recordId] = { entity: entities[i], time: Date.now() };
+        });
+        newIdMap = {
+          ...oldIdMap,
+          ...newIdMap
+        };
+        if (newIdMap[rowId]) {
+          //the entity we just clicked on should have the "freshest" time
+          newIdMap[rowId].time = Date.now() + 1;
+        }
+      }
+    }
+  }
+
+  finalizeSelection({ idMap: newIdMap, entities, props });
+}
+
+export function changeSelectedEntities({ idMap, entities = [], change }) {
+  const newIdMap = { ...idMap };
+  const entityIdToIndex = {};
+  entities.forEach((e, i) => {
+    entityIdToIndex[getIdOrCodeOrIndex(e, 0)] = i;
+  });
+  // we want to store the index of the entity so that it can be used to preserve order in selection
+  Object.keys(newIdMap).forEach(key => {
+    if (!newIdMap[key]) return;
+    const rowIndex =
+      entityIdToIndex[getIdOrCodeOrIndex(newIdMap[key].entity, 0)];
+    newIdMap[key] = {
+      ...newIdMap[key],
+      rowIndex: rowIndex === undefined ? 10000000 : rowIndex
+    };
+  });
+
+  change("reduxFormSelectedEntityIdMap", newIdMap);
+}
+
+export function finalizeSelection({ idMap, entities, props }) {
+  const {
+    onDeselect,
+    onSingleRowSelect,
+    onMultiRowSelect,
+    noDeselectAll,
+    onRowSelect,
+    noSelect,
+    change
+  } = props;
+  if (noSelect) return;
+  if (
+    noDeselectAll &&
+    Object.keys(idMap).filter(id => {
+      return idMap[id];
+    }).length === 0
+  ) {
+    return;
+  }
+
+  changeSelectedEntities({ idMap, entities, change });
+  const selectedRecords = getRecordsFromIdMap(idMap);
+  onRowSelect(selectedRecords);
+
+  selectedRecords.length === 0
+    ? onDeselect()
+    : selectedRecords.length > 1
+    ? onMultiRowSelect(selectedRecords)
+    : onSingleRowSelect(selectedRecords[0]);
+}

package/src/DataTable/utils/selection.js

@@ -0,0 +1,8 @@
+import getIdOrCodeOrIndex from "./getIdOrCodeOrIndex";
+
+export const getSelectedRowsFromEntities = (entities, idMap) => {
+  if (!idMap) return [];
+  return entities.reduce((acc, entity, i) => {
+    return idMap[getIdOrCodeOrIndex(entity, i)] ? acc.concat(i) : acc;
+  }, []);
+};

package/src/DataTable/utils/withSelectedEntities.js

@@ -0,0 +1,65 @@
+import { formValueSelector } from "redux-form";
+import { reduce } from "lodash";
+import { connect } from "react-redux";
+/**
+ * @param {*string} formName
+ * @param {*string} formName
+ * @param {*string} formName
+ * @param {*string} ...etc
+ * adds a new prop `${formName}SelectedEntities` eg sequenceTableSelectedEntities
+ */
+export default function withSelectedEntities(...formNames) {
+  if (!formNames.length) {
+    throw new Error(
+      "You need to pass at least one arg to withSelectedEntities"
+    );
+  }
+  if (typeof formNames[0] === "string") {
+    //NEW WAY
+    return connect(state => {
+      return formNames.reduce((acc, formName) => {
+        acc[formName + "SelectedEntities"] = getRecordsFromReduxForm(
+          state,
+          formName
+        );
+        return acc;
+      }, {});
+    });
+  } else {
+    //OLD WAY:
+    const { formName, name } = formNames[0];
+    if (!formName) {
+      throw new Error(
+        "Please pass a {formName} option when using withSelectedEntities"
+      );
+    }
+    return connect(state => {
+      return {
+        [name || "selectedEntities"]: getRecordsFromReduxForm(state, formName)
+      };
+    });
+  }
+}
+
+export function getRecordsFromReduxForm(state, formName) {
+  const selector = formValueSelector(formName);
+  return getRecordsFromIdMap(selector(state, "reduxFormSelectedEntityIdMap"));
+}
+
+export function getRecordsFromIdMap(idMap = {}) {
+  return reduce(
+    idMap,
+    (acc, item) => {
+      if (item && item.entity) acc.push(item);
+      return acc;
+    },
+    []
+  )
+    .sort((a, b) => a.rowIndex - b.rowIndex)
+    .map(item => item.entity);
+}
+
+export function getSelectedEntities(storeOrState, formName) {
+  const state = storeOrState.getState ? storeOrState.getState() : storeOrState;
+  return getRecordsFromReduxForm(state, formName);
+}

package/src/DataTable/utils/withTableParams.js

@@ -0,0 +1,328 @@
+import React, { useContext, useEffect } from "react";
+import { change, formValueSelector } from "redux-form";
+import { connect } from "react-redux";
+import { isFunction } from "lodash";
+import { withRouter } from "react-router-dom";
+import { branch, compose } from "recompose";
+
+import pureNoFunc from "../../utils/pureNoFunc";
+import TableFormTrackerContext from "../TableFormTrackerContext";
+import convertSchema from "./convertSchema";
+import { getRecordsFromReduxForm } from "./withSelectedEntities";
+import {
+  makeDataTableHandlers,
+  getQueryParams,
+  setCurrentParamsOnUrl,
+  getMergedOpts,
+  getCurrentParamsFromUrl
+} from "./queryParams";
+import getTableConfigFromStorage from "./getTableConfigFromStorage";
+
+/**
+ *  Note all these options can be passed at Design Time or at Runtime (like reduxForm())
+ *
+ * @export
+ *
+ * @param {compOrOpts} compOrOpts
+ * @typedef {object} compOrOpts
+ * @property {*string} formName - required unique identifier for the table
+ * @property {Object | Function} schema - The data table schema or a function returning it. The function wll be called with props as the argument.
+ * @property {boolean} urlConnected - whether the table should connect to/update the URL
+ * @property {boolean} withSelectedEntities - whether or not to pass the selected entities
+ * @property {boolean} isCodeModel - whether the model is keyed by code instead of id in the db
+ * @property {object} defaults - tableParam defaults such as pageSize, filter, etc
+ * @property {boolean} noOrderError - won't console an error if an order is not found on schema
+ */
+export default function withTableParams(compOrOpts, pTopLevelOpts) {
+  let topLevelOptions;
+  let Component;
+  if (!pTopLevelOpts) {
+    topLevelOptions = compOrOpts;
+  } else {
+    topLevelOptions = pTopLevelOpts;
+    Component = compOrOpts;
+  }
+  const { isLocalCall } = topLevelOptions;
+  const mapStateToProps = (state, ownProps) => {
+    const mergedOpts = getMergedOpts(topLevelOptions, ownProps);
+    const {
+      history,
+      urlConnected,
+      withSelectedEntities,
+      formName,
+      formNameFromWithTPCall,
+      syncDisplayOptionsToDb,
+      defaults,
+      isInfinite,
+      isSimple,
+      withPaging,
+      doNotCoercePageSize,
+      initialValues,
+      additionalFilter = {},
+      additionalOrFilter = {},
+      noOrderError,
+      withDisplayOptions,
+      cellRenderer,
+      model,
+      isCodeModel,
+      noForm
+    } = mergedOpts;
+
+    const schema = getSchema(mergedOpts);
+
+    if (ownProps.isTableParamsConnected) {
+      if (
+        formName &&
+        formNameFromWithTPCall &&
+        formName !== formNameFromWithTPCall
+      ) {
+        console.error(
+          `You passed a formName prop, ${formName} to a <DataTable/> component that is already withTableParams() connected, formNameFromWithTableParamsCall: ${formNameFromWithTPCall}`
+        );
+      }
+      if (ownProps.tableParams && !ownProps.tableParams.entities) {
+        console.error(
+          `No entities array detected in tableParams object (<DataTable {...tableParams}/>). You need to call withQuery() after withTableParams() like: compose(withTableParams(), withQuery(something)). formNameFromWithTableParamsCall: ${formNameFromWithTPCall}`
+        );
+      }
+      //short circuit because we've already run this logic
+      return {};
+    }
+
+    let formNameFromWithTableParamsCall;
+    if (isLocalCall) {
+      if (!noForm && (!formName || formName === "tgDataTable")) {
+        console.error(
+          "Please pass a unique 'formName' prop to the locally connected <DataTable/> component with schema: ",
+          schema
+        );
+      }
+    } else {
+      //in user instantiated withTableParams() call
+      if (!formName || formName === "tgDataTable") {
+        console.error(
+          "Please pass a unique 'formName' prop to the withTableParams() with schema: ",
+          schema
+        );
+      } else {
+        formNameFromWithTableParamsCall = formName;
+      }
+    }
+
+    const tableConfig = getTableConfigFromStorage(formName);
+    const formSelector = formValueSelector(formName);
+    const currentParams =
+      (urlConnected
+        ? getCurrentParamsFromUrl(history.location) //important to use history location and not ownProps.location because for some reason the location path lags one render behind!!
+        : formSelector(state, "reduxFormQueryParams")) || {};
+
+    const selectedEntities = withSelectedEntities
+      ? getRecordsFromReduxForm(state, formName)
+      : undefined;
+
+    const additionalFilterToUse =
+      typeof additionalFilter === "function"
+        ? additionalFilter.bind(this, ownProps)
+        : () => additionalFilter;
+    const additionalOrFilterToUse =
+      typeof additionalOrFilter === "function"
+        ? additionalOrFilter.bind(this, ownProps)
+        : () => additionalOrFilter;
+
+    let defaultsToUse = defaults;
+
+    // make user set page size persist
+    const userSetPageSize =
+      tableConfig?.userSetPageSize && parseInt(tableConfig.userSetPageSize, 10);
+    if (!syncDisplayOptionsToDb && userSetPageSize) {
+      defaultsToUse = defaultsToUse || {};
+      defaultsToUse.pageSize = userSetPageSize;
+    }
+    const mapStateProps = {
+      history,
+      urlConnected,
+      withSelectedEntities,
+      formName,
+      defaults: defaultsToUse,
+      isInfinite,
+      isSimple,
+      withPaging,
+      doNotCoercePageSize,
+      additionalFilter,
+      additionalOrFilter,
+      noOrderError,
+      withDisplayOptions,
+      cellRenderer,
+      isLocalCall,
+      model,
+      schema,
+      mergedOpts,
+      ...getQueryParams({
+        doNotCoercePageSize,
+        currentParams,
+        entities: mergedOpts.entities, // for local table
+        urlConnected,
+        defaults: defaultsToUse,
+        schema: convertSchema(schema),
+        isInfinite: isInfinite || (isSimple && !withPaging),
+        isLocalCall,
+        additionalFilter: additionalFilterToUse,
+        additionalOrFilter: additionalOrFilterToUse,
+        noOrderError,
+        isCodeModel,
+        ownProps: mergedOpts
+      }),
+      formNameFromWithTPCall: formNameFromWithTableParamsCall,
+      randomVarToForceLocalStorageUpdate: formSelector(
+        state,
+        "localStorageForceUpdate"
+      ),
+      currentParams,
+      selectedEntities,
+      ...(withSelectedEntities &&
+        typeof withSelectedEntities === "string" && {
+          [withSelectedEntities]: selectedEntities
+        }),
+      initialValues: {
+        ...initialValues,
+        reduxFormSearchInput: currentParams.searchTerm
+      }
+    };
+    return mapStateProps;
+    // return { ...mergedOpts, ...mapStateProps };
+  };
+
+  const mapDispatchToProps = (dispatch, ownProps) => {
+    if (ownProps.isTableParamsConnected) {
+      return {};
+    }
+    const mergedOpts = getMergedOpts(topLevelOptions, ownProps);
+    const {
+      formName,
+      urlConnected,
+      history,
+      defaults,
+      onlyOneFilter
+    } = mergedOpts;
+
+    function updateSearch(val) {
+      setTimeout(function() {
+        dispatch(change(formName, "reduxFormSearchInput", val || ""));
+      });
+    }
+
+    let setNewParams;
+    if (urlConnected) {
+      setNewParams = function(newParams) {
+        setCurrentParamsOnUrl(newParams, history.replace);
+        dispatch(change(formName, "reduxFormQueryParams", newParams)); //we always will update the redux params as a workaround for withRouter not always working if inside a redux-connected container https://github.com/ReactTraining/react-router/issues/5037
+      };
+    } else {
+      setNewParams = function(newParams) {
+        dispatch(change(formName, "reduxFormQueryParams", newParams));
+      };
+    }
+    return {
+      bindThese: makeDataTableHandlers({
+        setNewParams,
+        updateSearch,
+        defaults,
+        onlyOneFilter
+      }),
+      dispatch
+    };
+  };
+
+  function mergeProps(stateProps, dispatchProps, ownProps) {
+    if (ownProps.isTableParamsConnected) {
+      return ownProps;
+    }
+    const { currentParams, formName } = stateProps;
+    const boundDispatchProps = {};
+    //bind currentParams to actions
+    Object.keys(dispatchProps.bindThese).forEach(function(key) {
+      const action = dispatchProps.bindThese[key];
+      boundDispatchProps[key] = function(...args) {
+        action(...args, currentParams);
+      };
+    });
+    const {
+      variables,
+      selectedEntities,
+      mergedOpts,
+      ...restStateProps
+    } = stateProps;
+
+    const changeFormValue = (...args) =>
+      dispatchProps.dispatch(change(formName, ...args));
+
+    const tableParams = {
+      changeFormValue,
+      selectedEntities,
+      ...ownProps.tableParams,
+      ...restStateProps,
+      ...boundDispatchProps,
+      form: formName, //this will override the default redux form name
+      isTableParamsConnected: true //let the table know not to do local sorting/filtering etc.
+    };
+
+    const allMergedProps = {
+      ...ownProps,
+      ...mergedOpts,
+      variables: stateProps.variables,
+      selectedEntities: stateProps.selectedEntities,
+      tableParams
+    };
+
+    return allMergedProps;
+  }
+
+  function addFormTracking(Component) {
+    return props => {
+      const formTracker = useContext(TableFormTrackerContext);
+      const { formName } = props;
+      useEffect(() => {
+        if (formTracker.isActive && !formTracker.formNames.includes(formName)) {
+          formTracker.pushFormName(formName);
+        }
+      }, [formTracker, formName]);
+
+      return <Component {...props} />;
+    };
+  }
+
+  const toReturn = compose(
+    connect((state, ownProps) => {
+      if (ownProps.isTableParamsConnected) {
+        return {};
+      }
+      const { formName } = getMergedOpts(topLevelOptions, ownProps);
+      return {
+        unusedProp:
+          formValueSelector(formName)(state, "reduxFormQueryParams") || {} //tnr: we need this to trigger withRouter and force it to update if it is nested in a redux-connected container.. very ugly but necessary
+      };
+    }),
+    branch(props => {
+      //don't use withRouter if noRouter is passed!
+      return !props.noRouter;
+    }, withRouter),
+    connect(mapStateToProps, mapDispatchToProps, mergeProps),
+    pureNoFunc,
+    addFormTracking
+  );
+  if (Component) {
+    return toReturn(Component);
+  }
+  return toReturn;
+}
+
+/**
+ * Given the options, get the schema. This enables the user to provide
+ * a function instead of an object for the schema.
+ * @param {Object} options Merged options
+ */
+function getSchema(options) {
+  const { schema } = options;
+  if (isFunction(schema)) return schema(options);
+  else return schema;
+}

package/src/DataTable/validateTableWideErrors.js

@@ -0,0 +1,135 @@
+import getIdOrCodeOrIndex from "./utils/getIdOrCodeOrIndex";
+import { getCellVal } from "./getCellVal";
+import { forEach, isArray } from "lodash";
+import { startCase } from "lodash";
+import { camelCase } from "lodash";
+
+const uniqueMsg = "This value must be unique";
+export function validateTableWideErrors({
+  entities,
+  schema,
+  optionalUserSchema,
+  newCellValidate
+}) {
+  forEach(newCellValidate, (err, cellId) => {
+    if (err && err._isTableWideError) {
+      delete newCellValidate[cellId];
+    }
+  });
+  if (schema.tableWideValidation) {
+    const newErrs = schema.tableWideValidation({
+      entities
+    });
+    forEach(newErrs, (err, cellId) => {
+      newCellValidate[cellId] = {
+        message: err,
+        _isTableWideError: true
+      };
+    });
+  }
+  const displayNameMap = {};
+  forEach(schema.fields, f => {
+    displayNameMap[f.path] = f.displayName || startCase(camelCase(f.path));
+  });
+  function getDisplayName(path) {
+    return displayNameMap[path] || startCase(camelCase(path));
+  }
+
+  if (schema.requireAtLeastOneOf) {
+    //make sure at least one of the required fields is present
+    (isArray(schema.requireAtLeastOneOf[0])
+      ? schema.requireAtLeastOneOf
+      : [schema.requireAtLeastOneOf]
+    ).forEach(alo => {
+      entities.forEach(entity => {
+        if (!alo.some(path => getCellVal(entity, path))) {
+          alo.forEach(path => {
+            const cellId = `${getIdOrCodeOrIndex(entity)}:${path}`;
+            newCellValidate[cellId] = {
+              message: `At least one of these fields must be present - ${alo
+                .map(getDisplayName)
+                .join(", ")}`,
+              _isTableWideError: true
+            };
+          });
+        }
+      });
+    });
+  }
+  if (schema.requireExactlyOneOf) {
+    (isArray(schema.requireExactlyOneOf[0])
+      ? schema.requireExactlyOneOf
+      : [schema.requireExactlyOneOf]
+    ).forEach(reqs => {
+      entities.forEach(entity => {
+        const present = reqs.filter(path => getCellVal(entity, path));
+        if (present.length !== 1) {
+          reqs.forEach(path => {
+            const cellId = `${getIdOrCodeOrIndex(entity)}:${path}`;
+            const fields = reqs.map(getDisplayName).join(", ");
+            const err = {
+              message:
+                present.length === 0
+                  ? `One of these fields is required - ${fields}`
+                  : `Cannot have more than one of these fields - ${fields}`,
+              _isTableWideError: true
+            };
+            newCellValidate[cellId] = err;
+          });
+        }
+      });
+    });
+  }
+  if (schema.requireAllOrNone) {
+    (isArray(schema.requireAllOrNone[0])
+      ? schema.requireAllOrNone
+      : [schema.requireAllOrNone]
+    ).forEach(reqs => {
+      entities.forEach(entity => {
+        const present = reqs.filter(path => getCellVal(entity, path));
+        if (present.length && present.length !== reqs.length) {
+          reqs.forEach(path => {
+            const cellId = `${getIdOrCodeOrIndex(entity)}:${path}`;
+            const fields = reqs.map(getDisplayName).join(", ");
+            const err = {
+              message: `Please specify either ALL of the following fields or NONE of them - ${fields}`,
+              _isTableWideError: true
+            };
+            newCellValidate[cellId] = err;
+          });
+        }
+      });
+    });
+  }
+
+  schema.fields.forEach(col => {
+    let { path, isUnique } = col;
+    if (isUnique) {
+      if (optionalUserSchema) {
+        path = col.matches[0].item.path;
+      }
+      const existingVals = {};
+      entities.forEach(entity => {
+        const val = getCellVal(entity, path, col);
+        if (!val) return;
+        const cellId = `${getIdOrCodeOrIndex(entity)}:${path}`;
+        if (existingVals[val]) {
+          newCellValidate[cellId] = {
+            message: uniqueMsg,
+            _isTableWideError: true
+          };
+          newCellValidate[existingVals[val]] = {
+            message: uniqueMsg,
+            _isTableWideError: true
+          };
+        } else {
+          if (newCellValidate[cellId] === uniqueMsg) {
+            delete newCellValidate[cellId];
+          }
+          existingVals[val] = cellId;
+        }
+      });
+    }
+  });
+  return newCellValidate;
+}