@teselagen/ui 0.7.33-beta.6 → 0.7.34

package/validateTableWideErrors.js

@@ -0,0 +1,160 @@
+import { getIdOrCodeOrIndex } from "./utils";
+import { getCellVal } from "./getCellVal";
+import { forEach, isArray } from "lodash-es";
+import { startCase } from "lodash-es";
+import { camelCase } from "lodash-es";
+
+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 = {};
+  const fieldUpperToPath = {};
+
+  forEach(schema.fields, f => {
+    fieldUpperToPath[f.path.toUpperCase()] = f.path;
+    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;
+          });
+        }
+      });
+    });
+  }
+
+  const requireIfs = [];
+  schema.fields.forEach(col => {
+    const { path, requireIf } = col;
+    if (requireIf) {
+      const requireIfPath = fieldUpperToPath[requireIf.toUpperCase()];
+      requireIfs.push([requireIfPath, path]);
+    }
+  });
+  requireIfs.forEach(([requireIfPath, path]) => {
+    entities.forEach(entity => {
+      const requireIfVal = getCellVal(entity, requireIfPath);
+      const pathVal = getCellVal(entity, path);
+      if (requireIfVal && !pathVal) {
+        const cellId = `${getIdOrCodeOrIndex(entity)}:${path}`;
+        newCellValidate[cellId] = {
+          message: `This field is required if ${displayNameMap[requireIfPath]} is present`,
+          _isTableWideError: true
+        };
+      }
+    });
+  });
+  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;
+}

package/viewColumn.js

@@ -0,0 +1,97 @@
+import React from "react";
+import { Icon, Button, Tooltip } from "@blueprintjs/core";
+import { reduce } from "lodash-es";
+
+export const viewColumn = {
+  width: 35,
+  noEllipsis: true,
+  hideInMenu: true,
+  immovable: true,
+  type: "action",
+  render: () => {
+    return <Icon className="dt-eyeIcon" icon="eye-open" />;
+  }
+};
+
+export const openColumn = ({ onDoubleClick, history }) => ({
+  ...viewColumn,
+  render: (val, record, rowInfo) => {
+    return (
+      <Tooltip content="Open">
+        <Button
+          onClick={e => {
+            e.stopPropagation();
+            onDoubleClick &&
+              onDoubleClick(rowInfo.original, rowInfo.index, history);
+          }}
+          minimal
+          small
+          className="dt-eyeIcon"
+          icon="document-open"
+        />
+      </Tooltip>
+    );
+  }
+});
+
+export const multiViewColumn = {
+  ...viewColumn,
+  columnHeader: ({ recordIdToIsVisibleMap, setRecordIdToIsVisibleMap }) => {
+    const allVisible = reduce(
+      recordIdToIsVisibleMap,
+      (acc, val) => acc && val,
+      true
+    );
+    return (
+      <Tooltip content={allVisible ? "Hide All" : "Show All"}>
+        <Button
+          className={`showHideAllButton-${allVisible ? "visible" : "hidden"}`}
+          minimal
+          onClick={() => {
+            setRecordIdToIsVisibleMap(
+              reduce(
+                recordIdToIsVisibleMap,
+                (acc, val, key) => {
+                  acc[key] = !allVisible;
+                  return acc;
+                },
+                {}
+              )
+            );
+          }}
+          icon={allVisible ? "eye-open" : "eye-off"}
+        />
+      </Tooltip>
+    );
+  },
+  render: (
+    val,
+    record,
+    row,
+    { recordIdToIsVisibleMap, setRecordIdToIsVisibleMap }
+  ) => {
+    if (!recordIdToIsVisibleMap) {
+      return null;
+    }
+    const isVisible = recordIdToIsVisibleMap[record.id];
+    return (
+      <Tooltip content={isVisible ? "Hide" : "Show"}>
+        <Button
+          onClick={e => {
+            e.stopPropagation();
+            e.preventDefault();
+            setRecordIdToIsVisibleMap(
+              Object.assign({}, recordIdToIsVisibleMap, {
+                [record.id]: !isVisible
+              })
+            );
+          }}
+          minimal
+          small
+          className={`showHideButton-${isVisible ? "visible" : "hidden"}-${record.id}`}
+          icon={isVisible ? "eye-open" : "eye-off"}
+        />
+      </Tooltip>
+    );
+  }
+};

package/withField.js

@@ -0,0 +1,20 @@
+import React from "react";
+import { Field } from "redux-form";
+import { fieldRequired } from "../FormComponents/utils";
+
+//simple enhancer that wraps a component in a redux <Field/> component
+//all options are passed as props to <Field/>
+export default function WithField(fieldProps) {
+  return function AddFieldHOC(Component) {
+    return function AddField({ isRequired, ...rest }) {
+      return (
+        <Field
+          {...(isRequired && { validate: fieldRequired })}
+          {...fieldProps}
+          {...rest}
+          component={Component}
+        />
+      );
+    };
+  };
+}

package/withFields.js

@@ -0,0 +1,11 @@
+import React from "react";
+import { Fields } from "redux-form";
+//simple enhancer that wraps a component in a redux <Fields/> component
+//all options are passed as props to <Fields/>
+export default function WithFields(fieldsProps) {
+  return function AddFieldsHOC(Component) {
+    return function AddFields(props) {
+      return <Fields {...fieldsProps} {...props} component={Component} />;
+    };
+  };
+}

package/withLocalStorage.js

@@ -0,0 +1,11 @@
+import React from "react";
+import { Field } from "redux-form";
+//simple enhancer that wraps a component in a redux <Field/> component
+//all options are passed as props to <Field/>
+export default function WithField(fieldProps) {
+  return function AddFieldHOC(Component) {
+    return function AddField(props) {
+      return <Field {...fieldProps} {...props} component={Component} />;
+    };
+  };
+}

package/withSelectTableRecords.js

@@ -0,0 +1,43 @@
+/* Copyright (C) 2018 TeselaGen Biotechnology, Inc. */
+import { compose, withHandlers } from "recompose";
+import { connect } from "react-redux";
+import { change, initialize } from "redux-form";
+
+export default function (_tableFormName, propName = "selectTableRecords") {
+  return compose(
+    connect(null, {
+      changeFormValue: change,
+      initializeForm: initialize
+    }),
+    withHandlers({
+      [propName]:
+        props =>
+        (_records = []) => {
+          let tableFormName = _tableFormName;
+          if (typeof _tableFormName === "function") {
+            tableFormName = _tableFormName(props);
+          }
+          // initialize if needed so that the values will stay
+          props.initializeForm(tableFormName, {}, true, {
+            keepDirty: true,
+            updateUnregisteredFields: true,
+            keepValues: true
+          });
+          const selectedEntityIdMap = {};
+          let records = _records;
+          if (_records && !Array.isArray(_records)) records = [records];
+          records.forEach(record => {
+            selectedEntityIdMap[record.id] = {
+              entity: record,
+              time: Date.now()
+            };
+          });
+          props.changeFormValue(
+            tableFormName,
+            "reduxFormSelectedEntityIdMap",
+            selectedEntityIdMap
+          );
+        }
+    })
+  );
+}

package/withSelectedEntities.js

@@ -0,0 +1,65 @@
+import { formValueSelector } from "redux-form";
+import { reduce } from "lodash-es";
+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/withStore.js

@@ -0,0 +1,10 @@
+import { useStore } from "react-redux";
+import React from "react";
+
+const withStore = Component => {
+  return props => {
+    const store = useStore();
+    return <Component {...props} store={store} />;
+  };
+};
+export default withStore;