@teselagen/ui 0.7.33-beta.6 → 0.7.34

package/removeCleanRows.js

@@ -0,0 +1,22 @@
+import { isEntityClean } from "./isEntityClean";
+import { getIdOrCodeOrIndex } from "./getIdOrCodeOrIndex";
+
+export const removeCleanRows = (entities, cellValidation) => {
+  const toFilterOut = {};
+  const entsToUse = (entities || []).filter(e => {
+    if (!(e._isClean || isEntityClean(e))) return true;
+    else {
+      toFilterOut[getIdOrCodeOrIndex(e)] = true;
+      return false;
+    }
+  });
+
+  const validationToUse = {};
+  Object.entries(cellValidation || {}).forEach(([k, v]) => {
+    const [rowId] = k.split(":");
+    if (!toFilterOut[rowId]) {
+      validationToUse[k] = v;
+    }
+  });
+  return { entsToUse, validationToUse };
+};

package/renderOnDoc.js

@@ -0,0 +1,32 @@
+import { createRoot } from "react-dom/client";
+
+export function renderOnDoc(fn) {
+  const elemDiv = document.createElement("div");
+  elemDiv.style.cssText =
+    "position:absolute;width:100%;height:100%;top:0px;opacity:0.3;z-index:0;";
+  document.body.appendChild(elemDiv);
+  const root = createRoot(elemDiv);
+  const handleClose = () => {
+    setTimeout(() => {
+      root.unmount(elemDiv);
+      document.body.removeChild(elemDiv);
+    });
+  };
+  root.render(fn(handleClose));
+}
+
+export function renderOnDocSimple(el) {
+  const elemDiv = document.createElement("div");
+  elemDiv.style.cssText =
+    "position:absolute;width:100%;height:100%;top:0px;opacity:1;z-index:10000;";
+  document.body.appendChild(elemDiv);
+  const root = createRoot(elemDiv);
+  root.render(el);
+  const handleClose = () => {
+    setTimeout(() => {
+      root.unmount();
+      document.body.removeChild(elemDiv);
+    });
+  };
+  return handleClose;
+}

package/rerenderOnWindowResize.js

@@ -0,0 +1,26 @@
+import { throttle } from "lodash-es";
+// use like this within a react component:
+
+// constructor(props){
+//   super(props)
+//   rerenderOnWindowResize(this)
+// }
+
+export default function rerenderOnWindowResize(that) {
+  that.updateDimensions = throttle(() => {
+    if (that.props.disabled) return;
+    that.forceUpdate();
+  }, 250);
+  const componentDidMount = that.componentDidMount;
+  const componentWillUnmount = that.componentWillUnmount;
+
+  that.componentDidMount = (...args) => {
+    componentDidMount && componentDidMount.bind(that)(...args);
+    window.addEventListener("resize", that.updateDimensions);
+  };
+
+  that.componentWillUnmount = (...args) => {
+    componentWillUnmount && componentWillUnmount.bind(that)(...args);
+    window.removeEventListener("resize", that.updateDimensions);
+  };
+}

package/rowClick.js

@@ -0,0 +1,181 @@
+import { isEmpty, forEach, range } from "lodash-es";
+import { getSelectedRowsFromEntities } from "./selection";
+import { getIdOrCodeOrIndex } from "./getIdOrCodeOrIndex";
+import { getRecordsFromIdMap } from "./withSelectedEntities";
+
+export default function rowClick(
+  e,
+  rowInfo,
+  entities,
+  {
+    reduxFormSelectedEntityIdMap,
+    isSingleSelect,
+    noSelect,
+    onRowClick,
+    isEntityDisabled,
+    withCheckboxes,
+    onDeselect,
+    onSingleRowSelect,
+    onMultiRowSelect,
+    noDeselectAll,
+    onRowSelect,
+    change
+  }
+) {
+  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: {
+      onDeselect,
+      onSingleRowSelect,
+      onMultiRowSelect,
+      noDeselectAll,
+      onRowSelect,
+      noSelect,
+      change
+    }
+  });
+}
+
+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: {
+    onDeselect,
+    onSingleRowSelect,
+    onMultiRowSelect,
+    noDeselectAll,
+    onRowSelect,
+    noSelect,
+    change
+  }
+}) {
+  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/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/showAppSpinner.js

@@ -0,0 +1,12 @@
+import React from "react";
+import { Overlay } from "@blueprintjs/core";
+import { renderOnDocSimple } from "./utils/renderOnDoc";
+import Loading from "./Loading";
+
+export default function showAppSpinner() {
+  return renderOnDocSimple(
+    <Overlay isOpen={true}>
+      <Loading centeredInPage loading></Loading>
+    </Overlay>
+  );
+}

package/showDialogOnDocBody.js

@@ -0,0 +1,33 @@
+import { createRoot } from "react-dom/client";
+import React from "react";
+// import withDialog from "./enhancers/withDialog";
+import { Dialog } from "@blueprintjs/core";
+import { nanoid } from "nanoid";
+
+//this is only really useful for unconnected standalone simple dialogs
+//remember to pass usePortal={false} to the <Dialog/> component so it will close properly
+export default function showDialogOnDocBody(DialogComp, options = {}) {
+  const dialogHolder = document.createElement("div");
+  const className = "myDialog" + nanoid();
+  dialogHolder.className = className;
+  document.body.appendChild(dialogHolder);
+  const onClose = () => {
+    document.querySelector("." + className).remove();
+  };
+  let DialogCompToUse;
+  if (options.addDialogContainer) {
+    DialogCompToUse = props => {
+      return (
+        <Dialog usePortal={false} title="pass a {title} prop" isOpen {...props}>
+          <DialogComp {...props} hideModal={onClose} onClose={onClose} />
+        </Dialog>
+      );
+    };
+  } else {
+    DialogCompToUse = DialogComp;
+  }
+  const root = createRoot(dialogHolder);
+  root.render(
+    <DialogCompToUse hideModal={onClose} onClose={onClose} {...options} />
+  );
+}

package/showProgressToast.js

@@ -0,0 +1,22 @@
+/* Copyright (C) 2018 TeselaGen Biotechnology, Inc. */
+import React from "react";
+import { ProgressBar } from "@blueprintjs/core";
+
+export default (message, value, key, opts) => {
+  return window.toastr.default(
+    <div>
+      <div style={{ marginBottom: 10 }}>{message}</div>
+      <ProgressBar
+        intent={value >= 1 ? "success" : "primary"}
+        animate={value < 1 || !value}
+        stripes={value < 1 || !value}
+        value={value}
+      />
+    </div>,
+    {
+      timeout: value >= 1 ? 3000 : 100000,
+      key,
+      ...opts
+    }
+  );
+};

package/sortify.js

@@ -0,0 +1,73 @@
+/*!
+ *    Copyright 2015-2016 Thomas Rosenau
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+/**
+ * Create a “sorted” version of an object.
+ *
+ * JS engines internally keep track of an object's keys in the order of
+ * creation time, i.e. {a:1,b:2} is treated differently from {b:2,a:1}.
+ * That difference can be seen when JSON.stringify is called on that object.
+ * This function normalizes any kind of object by rearranging the keys in
+ * alphabetical order (numerical keys first, since v8 does so, and there's
+ * nothing we can do about it).
+ * @param {*} o The object to be sorted
+ */
+
+/* eslint-disable */
+const sortKeys = o => {
+  if (Array.isArray(o)) {
+    return o.map(sortKeys);
+  } else if (o instanceof Object) {
+    // put numeric keys first
+    let numeric = [];
+    let nonNumeric = [];
+    Object.keys(o).forEach(key => {
+      if (/^(0|[1-9][0-9]*)$/.test(key)) {
+        numeric.push(+key);
+      } else {
+        nonNumeric.push(key);
+      }
+    });
+    // do the rearrangement
+    return numeric
+      .sort(function (a, b) {
+        return a - b;
+      })
+      .concat(nonNumeric.sort())
+      .reduce((result, key) => {
+        result[key] = sortKeys(o[key]); // recurse!
+        return result;
+      }, {});
+  }
+  return o;
+};
+
+const jsonStringify = JSON.stringify.bind(JSON);
+
+const sortify = (value, replacer, space) => {
+  // replacer, toJSON(), cyclic references and other stuff is better handled by native stringifier.
+  // So we do JSON.stringify(sortKeys( JSON.parse(JSON.stringify()) )).
+  // This approach is slightly slower but much safer than a manual stringification.
+  let nativeJson = jsonStringify(value, replacer, 0);
+  if (!nativeJson || (nativeJson[0] !== "{" && nativeJson[0] !== "[")) {
+    // if value is not an Object or Array
+    return nativeJson;
+  }
+  let cleanObj = JSON.parse(nativeJson);
+  return jsonStringify(sortKeys(cleanObj), null, space);
+};
+
+export default sortify;

package/style.css

@@ -0,0 +1,13 @@
+.tag-select-popover {
+  padding: 10px;
+}
+
+.tag-select-popover-inner {
+  max-height: 150px;
+  overflow: auto;
+  display: grid;
+  padding-top: 10px;
+  grid-column-gap: 5px;
+  row-gap: 8px;
+  grid-template-columns: max-content max-content;
+}

package/tagUtils.js

@@ -0,0 +1,45 @@
+import { flatMap, keyBy } from "lodash-es";
+import determineBlackOrWhiteTextColor from "./determineBlackOrWhiteTextColor";
+
+export function getTagsAndTagOptions(allTags) {
+  return flatMap(allTags, tag => {
+    if (tag.tagOptions && tag.tagOptions.length) {
+      return tag.tagOptions.map(tagO => {
+        const fullname = `${tag.name}: ${tagO.name}`;
+        const value = `${tag.id}:${tagO.id}`;
+        return {
+          ...tagO,
+          label: fullname,
+          value,
+          id: tagO.id
+        };
+      });
+    }
+    return {
+      ...tag,
+      label: tag.name,
+      value: tag.id
+    };
+  });
+}
+
+export function getKeyedTagsAndTagOptions(tags) {
+  return keyBy(getTagsAndTagOptions(tags), "value");
+}
+
+export function getTagColorStyle(color) {
+  return color
+    ? {
+        style: {
+          backgroundColor: color,
+          color: determineBlackOrWhiteTextColor(color)
+        }
+      }
+    : {};
+}
+export function getTagProps({ color, label, name }) {
+  return {
+    ...getTagColorStyle(color),
+    children: label || name
+  };
+}

package/tgFormValues.js

@@ -0,0 +1,35 @@
+import React, { useMemo } from "react";
+import { connect } from "react-redux";
+import { FormName, formValueSelector } from "redux-form";
+
+const tgFormValues =
+  (...fieldNames) =>
+  Component =>
+  props => {
+    return (
+      <FormName>
+        {formName => {
+          const name = formName.form;
+          const Wrapped = useMemo(() => {
+            const selector = formValueSelector(name || "");
+            const wrapper = connect(state => {
+              const vals = {};
+              fieldNames.forEach(name => {
+                vals[name] = selector(state, name);
+              });
+              return vals;
+            });
+            return wrapper(Component);
+          }, [name]);
+          return <Wrapped {...props} />;
+        }}
+      </FormName>
+    );
+  };
+export default tgFormValues;
+
+export const tgFormValueSelector = (formName, ...fields) => {
+  return connect(state => {
+    return formValueSelector(formName)(state, ...fields);
+  });
+};

package/tg_modalState.js

@@ -0,0 +1,47 @@
+import { omit } from "lodash-es";
+
+export default function tg_modalState(
+  state = {},
+  { type, name, uniqueName, props = {} }
+) {
+  const existingModalState = state[name] || {};
+  const { __registeredAs = {} } = existingModalState;
+  if (type === "TG_REGISTER_MODAL") {
+    return {
+      ...state,
+      [name]: {
+        ...existingModalState,
+        __registeredAs: { ...__registeredAs, [uniqueName]: true }
+      }
+    };
+  }
+  if (type === "TG_UNREGISTER_MODAL") {
+    return {
+      ...state,
+      [name]: {
+        ...existingModalState,
+        __registeredAs: omit(__registeredAs, uniqueName)
+      }
+    };
+  }
+  if (type === "TG_SHOW_MODAL") {
+    return {
+      ...state,
+      [name]: {
+        ...existingModalState,
+        ...props,
+        open: true
+      }
+    };
+  }
+  if (type === "TG_HIDE_MODAL") {
+    return {
+      ...state,
+      [name]: {
+        __registeredAs: existingModalState.__registeredAs,
+        open: false
+      }
+    };
+  }
+  return state;
+}

package/throwFormError.js

@@ -0,0 +1,16 @@
+import { SubmissionError } from "redux-form";
+
+export const throwFormError = error => {
+  if (error.message) {
+    console.error("error:", error);
+  }
+  const errorToUse = error.message
+    ? { _error: error.message }
+    : typeof error === "string"
+    ? { _error: error }
+    : error;
+  if (!errorToUse._error) {
+    errorToUse._error = "Error Submitting Form";
+  }
+  throw new SubmissionError(errorToUse);
+};