@teselagen/ui 0.7.33-beta.1 → 0.7.33-beta.2

package/src/hotkeyUtils.js

@@ -0,0 +1,131 @@
+import React, { useMemo } from "react";
+import { useHotkeys } from "@blueprintjs/core";
+import { startCase } from "lodash-es";
+
+// This has been mostly superseded by blueprint's KeyCombo component, but may
+// still be useful for cases where we need plain text
+export function comboToLabel(def, useSymbols = true) {
+  const combo = typeof def === "string" ? def : def.combo;
+
+  if (useSymbols) {
+    let parts = combo.replace("++", "+plus").split("+");
+    parts = parts.map(p => symbols[p] || startCase(p) || p);
+    return parts.join("");
+  } else {
+    return combo
+      .split("+")
+      .map(p => startCase(p) || p)
+      .join(" + ")
+      .replace("Meta", isMac ? "Cmd" : "Ctrl")
+      .replace("Mod", isMac ? "Cmd" : "Ctrl")
+      .replace("Alt", isMac ? "Option" : "Alt");
+  }
+}
+
+// HOF to get hotkey combos by id
+export const hotkeysById =
+  (hotkeys, mode = "raw") =>
+  id => {
+    const def = getHotkeyProps(hotkeys[id]);
+    return (
+      def &&
+      (mode === "raw" ? def.combo : comboToLabel(def.combo, mode === "symbols"))
+    );
+  };
+
+// Translate shorthand array if needed
+export const getHotkeyProps = (def, id) => {
+  let out;
+  if (typeof def === "string") {
+    out = { combo: def };
+  } else if (def instanceof Array) {
+    out = { combo: def[0], label: def[1], ...(def[2] || {}) };
+  } else {
+    out = def;
+  }
+  out.label = out.label || startCase(id);
+  return out;
+};
+
+/*
+ * HOC to add hotkey support to components. Use this instead of blueprint's one.
+ *
+ * Arguments:
+ * - hotkeySpec: either a named hotkey section previously registered, or an
+ *   object mapping command ids to hotkey definitions, where each hotkey can
+ *   be either:
+ *   - a string consisting in the key combo (e.g. 'ctrl+shift+x')
+ *   - an array holding the combo, label, and an object with any other props
+ *   - an object holding all props
+ * - handlers: an object mapping command ids to handler functions
+ * - options: an object that may specify the follownig options:
+ *   - functional: boolean indicating if the wrapped component will be a
+ *     functional stateless component instead of a class-based one
+ *
+ * Returns a function that can be invoked with a component class, or a
+ * stateless component function (if specified in the options) and returns
+ * the decorated class. It may also be invoked without arguments to generate a
+ * dummy ad-hoc component with no output.
+ *
+ */
+export const withHotkeys = (hotkeys, handlers) => {
+  return ({ children } = {}) => {
+    const memoedHotkeys = useMemo(
+      () =>
+        Object.keys(hotkeys).map(id => {
+          const { ...props } = getHotkeyProps(hotkeys[id], id);
+          return {
+            key: id,
+            global: props.global !== false,
+            onKeyDown: function (e) {
+              return handlers[id](e);
+            },
+            ...props
+          };
+        }),
+      []
+    );
+
+    const { handleKeyDown, handleKeyUp } = useHotkeys(memoedHotkeys);
+    const newProps = {
+      tabIndex: 0,
+      onKeyDown: handleKeyDown,
+      onKeyUp: handleKeyUp
+    };
+    return children ? ( //tnr: if children are passed, we'll clone them with the new props
+      React.cloneElement(children, newProps)
+    ) : (
+      //if not, then we'll return a div that can be used
+      <div className="hotkeyHandler" {...newProps}></div>
+    );
+  };
+};
+
+const isMac = navigator.userAgent.includes("Mac OS X");
+
+// TODO maybe avoid using symbols by default when not on Mac?
+// Anyway, alternative 'Key + Key' description is provided as well
+const symbols = {
+  cmd: "⌘",
+  meta: "⌘",
+  ctrl: "⌃",
+  alt: "⌥",
+  shift: "⇧",
+  esc: "␛", //'⎋',
+  enter: "⏎",
+  backspace: "⌫",
+  plus: "+",
+  tab: "⇥",
+  space: "␣",
+  capslock: "⇪",
+  pageup: "⇞",
+  pagedown: "⇟",
+  home: "↖",
+  end: "↘",
+  left: "←",
+  right: "→",
+  up: "↑",
+  down: "↓"
+};
+
+symbols.mod = symbols[isMac ? "meta" : "ctrl"];

package/src/index.js

@@ -0,0 +1 @@
+export { useDeepEqualMemo } from "./useDeepEqualMemo";

package/src/initializeHasuraWhereAndFilter.js

@@ -0,0 +1,27 @@
+export function initializeHasuraWhereAndFilter(
+  additionalFilter,
+  where = {},
+  currentParams
+) {
+  where._and = where._and || [];
+  where._or = where._or || [];
+  if (typeof additionalFilter === "function") {
+    const newWhere = additionalFilter(where, currentParams);
+    if (newWhere) {
+      where = {
+        ...where,
+        ...newWhere
+      };
+    }
+  } else if (typeof additionalFilter === "object")
+    where._and.push(additionalFilter);
+}
+
+export const addCustomColumnFilters = (where, fields, currentParams) => {
+  fields.forEach(field => {
+    const { customColumnFilter, filterDisabled } = field;
+    if (filterDisabled || !customColumnFilter) return;
+    customColumnFilter(where, currentParams);
+  });
+};
+

package/src/isBeingCalledExcessively.js

@@ -0,0 +1,24 @@
+const keyCount = {};
+export const isBeingCalledExcessively = ({ uniqName }) => {
+  if (process.env.NODE_ENV !== "development") {
+    return;
+  }
+  if (!uniqName) {
+    throw new Error("uniqName is required");
+  }
+  // if this function is hit more than 10 times in a row in 2 seconds with the same uniqName then throw an error
+  if (keyCount[uniqName + "_timeout"]) {
+    clearTimeout(keyCount[uniqName + "_timeout"]);
+  }
+  keyCount[uniqName] = keyCount[uniqName] || 0;
+  keyCount[uniqName]++;
+
+  keyCount[uniqName + "_timeout"] = setTimeout(() => {
+    keyCount[uniqName] = 0;
+  }, 2000);
+
+  if (keyCount[uniqName] > 20) {
+    keyCount[uniqName] = 0;
+    throw new Error(`isBeingCalledExcessively: ${uniqName}`);
+  }
+};

package/src/isBottomRightCornerOfRectangle.js

@@ -0,0 +1,20 @@
+export const isBottomRightCornerOfRectangle = ({
+  cellId,
+  selectionGrid,
+  lastRowIndex,
+  lastCellIndex,
+  entityMap,
+  pathToIndex
+}) => {
+  selectionGrid.forEach(row => {
+    // remove undefineds from start of row
+    while (row[0] === undefined && row.length) row.shift();
+  });
+  const [rowId, cellPath] = cellId.split(":");
+  const ent = entityMap[rowId];
+  if (!ent) return;
+  const { i } = ent;
+  const cellIndex = pathToIndex[cellPath];
+  const isBottomRight = i === lastRowIndex && cellIndex === lastCellIndex;
+  return isBottomRight;
+};

package/src/isEntityClean.js

@@ -0,0 +1,15 @@
+export function isEntityClean(e) {
+  if (typeof e !== "object" || e === null) {
+    return true; // or return false depending on what you want for non-object inputs
+  }
+  let isClean = true;
+  for (const [key, val] of Object.entries(e)) {
+    if (key === "id") continue;
+    if (key === "_isClean") continue;
+    if (val) {
+      isClean = false;
+      break;
+    }
+  }
+  return isClean;
+}

package/src/isTruthy.js

@@ -0,0 +1,12 @@
+export function isTruthy(v) {
+  if (!v) return false;
+  if (typeof v === "string") {
+    if (v.toLowerCase() === "false") {
+      return false;
+    }
+    if (v.toLowerCase() === "no") {
+      return false;
+    }
+  }
+  return true;
+}

package/src/isValueEmpty.js

@@ -0,0 +1,3 @@
+export function isValueEmpty(val) {
+  return val === undefined || val === null || val === "";
+}

package/src/itemUpload.js

@@ -0,0 +1,84 @@
+import React from "react";
+import {
+  ProgressBar,
+  Intent,
+  Button,
+  Tooltip,
+  Position,
+  Icon
+} from "@blueprintjs/core";
+
+const itemUpload = props => {
+  const item = props.item;
+  const name = nameShortener(item.name);
+
+  return (
+    <div className="item-upload-container" key={item.id}>
+      <div className="item-upload">
+        <div>
+          {!props.saved ? (
+            <Tooltip
+              content={
+                <span>
+                  {`Click to
+              ${props.active ? "abort this uploading" : "remove this file"}`}
+                </span>
+              }
+              position={Position.LEFT}
+              usePortal={true}
+            >
+              <Button
+                intent={Intent.DANGER}
+                minimal
+                icon="delete"
+                onClick={props.onCancel}
+              />
+            </Tooltip>
+          ) : null}
+        </div>
+        <div>
+          <span>{name}</span>
+        </div>
+        <div>
+          {props.active ? `${props.value}%` : null}
+          {props.error ? (
+            <Tooltip content={props.error} usePortal={true}>
+              <Icon icon="error" intent={Intent.DANGER} />
+            </Tooltip>
+          ) : null}
+          {props.saved ? (
+            <Tooltip content={"File Saved"} usePortal={true}>
+              <Icon icon="saved" intent={Intent.SUCCESS} />
+            </Tooltip>
+          ) : null}
+        </div>
+      </div>
+      {props.active ? (
+        <ProgressBar intent={Intent.PRIMARY} value={props.value / 100} />
+      ) : null}
+    </div>
+  );
+};
+
+/**
+ * Short file names length to display
+ * @param {*} itemName
+ */
+const nameShortener = itemName => {
+  if (itemName.length > 40) {
+    let name = "";
+    const arr = itemName.split(".");
+    name += `${arr[0].substring(0, 20)}...`;
+    if (arr.length >= 2) {
+      name += `${arr[arr.length - 2].substring(
+        arr[arr.length - 2].length - 5,
+        arr[arr.length - 2].length
+      )}`;
+      name += `.${arr[arr.length - 1]}`;
+    }
+    return name;
+  }
+  return itemName;
+};
+
+export default itemUpload;