@teselagen/ui 0.7.33-beta.5 → 0.7.33

package/src/DataTable/utils/tableQueryParamsToHasuraClauses.js

@@ -1,4 +1,4 @@
-import { camelCase } from "lodash-es";
+import { camelCase, set } from "lodash-es";
 
 export function tableQueryParamsToHasuraClauses({
   page,
@@ -23,9 +23,8 @@ export function tableQueryParamsToHasuraClauses({
       const filterValue = searchTerm; // No cleaning needed here, we're using _ilike
 
       if (type === "string" || type === "lookup") {
-        searchTermFilters.push({
-          [path]: { _ilike: `%${filterValue}%` }
-        });
+        const o = set({}, path, { _ilike: `%${filterValue}%` });
+        searchTermFilters.push(o);
       } else if (type === "boolean") {
         let regex;
         try {
@@ -35,22 +34,19 @@ export function tableQueryParamsToHasuraClauses({
         }
         if (regex) {
           if ("true".replace(regex, "") !== "true") {
-            searchTermFilters.push({
-              [path]: { _eq: true }
-            });
+            const o = set({}, path, { _eq: true });
+            searchTermFilters.push(o);
           } else if ("false".replace(regex, "") !== "false") {
-            searchTermFilters.push({
-              [path]: { _eq: false }
-            });
+            const o = set({}, path, { _eq: false });
+            searchTermFilters.push(o);
           }
         }
       } else if (
         (type === "number" || type === "integer") &&
         !isNaN(filterValue)
       ) {
-        searchTermFilters.push({
-          [path]: { _eq: parseFloat(filterValue) }
-        });
+        const o = set({}, path, { _eq: parseFloat(filterValue) });
+        searchTermFilters.push(o);
       }
     });
     if (searchTermFilters.length > 0) {
@@ -63,143 +59,150 @@ export function tableQueryParamsToHasuraClauses({
   }
 
   if (filters && filters.length > 0) {
-    const filterClauses = filters.map(filter => {
-      let { selectedFilter, filterOn, filterValue } = filter;
-      const fieldSchema = ccFields[filterOn] || {};
+    const filterClauses = filters
+      .map(filter => {
+        let { selectedFilter, filterOn, filterValue } = filter;
+        const fieldSchema = ccFields[filterOn] || {};
 
-      const { path, reference, type } = fieldSchema;
-      let stringFilterValue =
-        filterValue && filterValue.toString
-          ? filterValue.toString()
-          : filterValue;
-      if (stringFilterValue === false) {
-        // we still want to be able to search for the string "false" which will get parsed to false
-        stringFilterValue = "false";
-      } else {
-        stringFilterValue = stringFilterValue || "";
-      }
-      const arrayFilterValue = Array.isArray(filterValue)
-        ? filterValue
-        : stringFilterValue.split(";");
-
-      if (type === "number" || type === "integer") {
-        filterValue = Array.isArray(filterValue)
-          ? filterValue.map(val => Number(val))
-          : Number(filterValue);
-      }
+        const { path, reference, type } = fieldSchema;
+        let stringFilterValue =
+          filterValue && filterValue.toString
+            ? filterValue.toString()
+            : filterValue;
+        if (stringFilterValue === false) {
+          // we still want to be able to search for the string "false" which will get parsed to false
+          stringFilterValue = "false";
+        } else {
+          stringFilterValue = stringFilterValue || "";
+        }
+        const arrayFilterValue = Array.isArray(filterValue)
+          ? filterValue
+          : stringFilterValue.split(";");
 
-      if (fieldSchema.normalizeFilter) {
-        filterValue = fieldSchema.normalizeFilter(
-          filterValue,
-          selectedFilter,
-          filterOn
-        );
-      }
+        if (type === "number" || type === "integer") {
+          filterValue = Array.isArray(filterValue)
+            ? filterValue.map(val => Number(val))
+            : Number(filterValue);
+        }
 
-      if (reference) {
-        filterOn = reference.sourceField;
-      } else {
-        filterOn = path || filterOn;
-      }
+        if (fieldSchema.normalizeFilter) {
+          filterValue = fieldSchema.normalizeFilter(
+            filterValue,
+            selectedFilter,
+            filterOn
+          );
+        }
 
-      switch (selectedFilter) {
-        case "none":
-          return {};
-        case "startsWith":
-          return { [filterOn]: { _ilike: `${filterValue}%` } };
-        case "endsWith":
-          return { [filterOn]: { _ilike: `%${filterValue}` } };
-        case "contains":
-          return { [filterOn]: { _ilike: `%${filterValue}%` } };
-        case "notContains":
-          return { [filterOn]: { _not_ilike: `%${filterValue}%` } };
-        case "isExactly":
-          return { [filterOn]: { _eq: filterValue } };
-        case "isEmpty":
-          return {
-            _or: [
-              { [filterOn]: { _eq: "" } },
-              { [filterOn]: { _is_null: true } }
-            ]
-          };
-        case "notEmpty":
-          return {
-            _and: [
-              { [filterOn]: { _neq: "" } },
-              { [filterOn]: { _is_null: false } }
-            ]
-          };
-        case "inList":
-          return { [filterOn]: { _in: filterValue } };
-        case "notInList":
-          return { [filterOn]: { _nin: filterValue } };
-        case "true":
-          return { [filterOn]: { _eq: true } };
-        case "false":
-          return { [filterOn]: { _eq: false } };
-        case "dateIs":
-          return { [filterOn]: { _eq: filterValue } };
-        case "notBetween":
-          return {
-            _or: [
-              {
-                [filterOn]: {
-                  _lt: new Date(arrayFilterValue[0])
-                }
-              },
-              {
-                [filterOn]: {
-                  _gt: new Date(new Date(arrayFilterValue[1]).setHours(23, 59))
+        if (reference) {
+          filterOn = reference.sourceField;
+        } else {
+          filterOn = path || filterOn;
+        }
+        switch (selectedFilter) {
+          case "none":
+            return {};
+          case "startsWith":
+            return { [filterOn]: { _ilike: `${filterValue}%` } };
+          case "endsWith":
+            return { [filterOn]: { _ilike: `%${filterValue}` } };
+          case "contains":
+            return { [filterOn]: { _ilike: `%${filterValue}%` } };
+          case "notContains":
+            return { [filterOn]: { _not_ilike: `%${filterValue}%` } };
+          case "isExactly":
+            return { [filterOn]: { _eq: filterValue } };
+          case "isEmpty":
+            return {
+              _or: [
+                { [filterOn]: { _eq: "" } },
+                { [filterOn]: { _is_null: true } }
+              ]
+            };
+          case "notEmpty":
+            return {
+              _and: [
+                { [filterOn]: { _neq: "" } },
+                { [filterOn]: { _is_null: false } }
+              ]
+            };
+          case "inList":
+            return { [filterOn]: { _in: filterValue } };
+          case "notInList":
+            return { [filterOn]: { _nin: filterValue } };
+          case "true":
+            return { [filterOn]: { _eq: true } };
+          case "false":
+            return { [filterOn]: { _eq: false } };
+          case "dateIs":
+            return { [filterOn]: { _eq: filterValue } };
+          case "notBetween":
+            return {
+              _or: [
+                {
+                  [filterOn]: {
+                    _lt: new Date(arrayFilterValue[0])
+                  }
+                },
+                {
+                  [filterOn]: {
+                    _gt: new Date(
+                      new Date(arrayFilterValue[1]).setHours(23, 59)
+                    )
+                  }
                 }
+              ]
+            };
+          case "isBetween":
+            return {
+              [filterOn]: {
+                _gte: new Date(arrayFilterValue[0]),
+                _lte: new Date(new Date(arrayFilterValue[1]).setHours(23, 59))
               }
-            ]
-          };
-        case "isBetween":
-          return {
-            [filterOn]: {
-              _gte: new Date(arrayFilterValue[0]),
-              _lte: new Date(new Date(arrayFilterValue[1]).setHours(23, 59))
-            }
-          };
-        case "isBefore":
-          return { [filterOn]: { _lt: new Date(filterValue) } };
-        case "isAfter":
-          return { [filterOn]: { _gt: new Date(filterValue) } };
-        case "greaterThan":
-          return { [filterOn]: { _gt: parseFloat(filterValue) } };
-        case "lessThan":
-          return { [filterOn]: { _lt: parseFloat(filterValue) } };
-        case "inRange":
-          return {
-            [filterOn]: {
-              _gte: parseFloat(arrayFilterValue[0]),
-              _lte: parseFloat(arrayFilterValue[1])
-            }
-          };
-        case "outsideRange":
-          return {
-            _or: [
-              {
-                [filterOn]: {
-                  _lt: parseFloat(arrayFilterValue[0])
-                }
-              },
-              {
-                [filterOn]: {
-                  _gt: parseFloat(arrayFilterValue[1])
-                }
+            };
+          case "isBefore":
+            return { [filterOn]: { _lt: new Date(filterValue) } };
+          case "isAfter":
+            return { [filterOn]: { _gt: new Date(filterValue) } };
+          case "greaterThan":
+            return { [filterOn]: { _gt: parseFloat(filterValue) } };
+          case "lessThan":
+            return { [filterOn]: { _lt: parseFloat(filterValue) } };
+          case "inRange":
+            return {
+              [filterOn]: {
+                _gte: parseFloat(arrayFilterValue[0]),
+                _lte: parseFloat(arrayFilterValue[1])
               }
-            ]
-          };
-        case "equalTo":
-          return { [filterOn]: { _eq: parseFloat(filterValue) } };
-        case "regex":
-          return { [filterOn]: { _regex: filterValue } };
-        default:
-          console.warn(`Unsupported filter type: ${selectedFilter}`);
-          return {};
-      }
-    });
+            };
+          case "outsideRange":
+            return {
+              _or: [
+                {
+                  [filterOn]: {
+                    _lt: parseFloat(arrayFilterValue[0])
+                  }
+                },
+                {
+                  [filterOn]: {
+                    _gt: parseFloat(arrayFilterValue[1])
+                  }
+                }
+              ]
+            };
+          case "equalTo":
+            return { [filterOn]: { _eq: parseFloat(filterValue) } };
+          case "regex":
+            return { [filterOn]: { _regex: filterValue } };
+          default:
+            console.warn(`Unsupported filter type: ${selectedFilter}`);
+            return {};
+        }
+      })
+      .map(filter => {
+        const o = {};
+        set(o, Object.keys(filter)[0], filter[Object.keys(filter)[0]]);
+        return o;
+      });
 
     if (filterClauses.length > 0) {
       if (Object.keys(where).length > 0) {

package/style.css

@@ -0,0 +1,29 @@
+/* Copyright (C) 2018 TeselaGen Biotechnology, Inc. */
+.tg-timeline {
+  position: relative;
+  white-space: nowrap;
+}
+
+.tg-timeline-line {
+  position: absolute;
+  height: 90%;
+  border-left: 2px solid #bfccd6;
+  top: 3px;
+  left: 5px;
+}
+
+.tg-timeline-event {
+  margin-bottom: 15px;
+}
+
+.tg-timeline-circle {
+  width: 12px;
+  min-width: 12px;
+  height: 12px;
+  min-height: 12px;
+  z-index: 1;
+  margin-right: 10px;
+  border-radius: 100px;
+  background: #e1e8ed;
+  border: 2px solid #137cbd;
+}

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

package/toastr.js

@@ -0,0 +1,148 @@
+import { Position, Toaster, Intent, Classes } from "@blueprintjs/core";
+import classNames from "classnames";
+
+const TopToaster = Toaster.create({
+  className: "top-toaster",
+  position: Position.TOP
+});
+
+const BottomToaster = Toaster.create({
+  className: "bottom-toaster",
+  position: Position.BOTTOM
+});
+
+window.__tgClearAllToasts = () => {
+  TopToaster.clear();
+  BottomToaster.clear();
+};
+
+let counter = 5000;
+const generateToast = intent => (message, options) => {
+  options = options || {};
+  const toastToUse = options.bottom ? BottomToaster : TopToaster;
+  let updatedTimeout;
+  if (options.updateTimeout) {
+    //generate a slightly different than default timeout to make the update stay on the page for a full 5 seconds
+    if (counter > 5500) {
+      updatedTimeout = --counter;
+    } else {
+      updatedTimeout = ++counter;
+    }
+  }
+  if (intent === Intent.DANGER) {
+    console.error("Toastr error message: ", message);
+  }
+  if (intent === Intent.WARNING) {
+    console.error("Toastr warning message: ", message);
+  }
+
+  const maybeAddClearAll = () => {
+    // wipe any existing clear all buttons
+    const existingClearAllButtons =
+      document.querySelectorAll(`.tg-clear-all-toasts`);
+    existingClearAllButtons.forEach(button => {
+      button.remove();
+    });
+    const activeToasts = document.querySelectorAll(
+      `.bp3-toast:not(.bp3-toast-exit)`
+    );
+    if (activeToasts.length > 1) {
+      // add custom clear all button
+
+      const topToaster = document.querySelector(`.bp3-toast`);
+      if (!topToaster) return;
+      const closeButton = document.createElement("div");
+      closeButton.classList.add(
+        Classes.BUTTON,
+        Classes.LARGE,
+        Classes.INTENT_PRIMARY,
+        "tg-clear-all-toasts"
+      );
+      closeButton.innerText = "Clear all";
+      closeButton.onclick = window.__tgClearAllToasts;
+      // position the button to the right of the message
+      closeButton.style.position = "absolute";
+      closeButton.style.right = "-100px";
+
+      topToaster.appendChild(closeButton);
+    }
+  };
+  const uniqKey = toastToUse.show(
+    {
+      intent,
+      message,
+      onDismiss: () => {
+        if (options.onDismiss) {
+          options.onDismiss();
+        }
+        setTimeout(() => {
+          maybeAddClearAll();
+        }, 0);
+      },
+      timeout:
+        options.timeout ||
+        updatedTimeout ||
+        (!window.Cypress &&
+        (intent === Intent.DANGER || intent === Intent.WARNING)
+          ? 60000
+          : undefined),
+      action: options.action,
+      icon: options.icon,
+      className: classNames("preserve-newline", options.className)
+    },
+    options.key
+  );
+  setTimeout(() => {
+    maybeAddClearAll();
+  }, 0);
+  function clear() {
+    toastToUse.dismiss(uniqKey);
+    setTimeout(() => {
+      maybeAddClearAll();
+    }, 0);
+  }
+  clear.key = uniqKey;
+  return clear;
+};
+
+function preventDuplicates(func) {
+  const previousToasts = {};
+  return (message, options = {}) => {
+    const clearToast = func(message, options);
+    // no duplicate check for toasts with updates
+
+    if (!options.key) {
+      if (!options.key && previousToasts[message]) {
+        previousToasts[message](); //clear it!
+      }
+
+      setTimeout(() => {
+        delete previousToasts[message];
+      }, options.timeout || 5000);
+
+      previousToasts[message] = clearToast;
+    }
+    return clearToast;
+  };
+}
+
+if (!window.toastr) window.toastr = {};
+if (!window.toastr.success) {
+  window.toastr.success = preventDuplicates(generateToast(Intent.SUCCESS));
+}
+
+if (!window.toastr.error) {
+  window.toastr.error = preventDuplicates(generateToast(Intent.DANGER));
+}
+
+if (!window.toastr.warning) {
+  window.toastr.warning = preventDuplicates(generateToast(Intent.WARNING));
+}
+
+if (!window.toastr.info) {
+  window.toastr.info = preventDuplicates(generateToast(Intent.PRIMARY));
+}
+
+if (!window.toastr.default) {
+  window.toastr.default = preventDuplicates(generateToast(Intent.NONE));
+}