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

package/src/adHoc.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { compose } from "recompose";
+
+//adHoc allows you to add dynamic HOCs to a component
+export default func => WrappedComponent => props => {
+  const calledFunc = func(props);
+  const composeArgs = Array.isArray(calledFunc) ? calledFunc : [calledFunc];
+  const ComposedAndWrapped = compose(...composeArgs)(WrappedComponent);
+  return <ComposedAndWrapped {...props} />;
+};

package/src/autoTooltip.js

@@ -0,0 +1,201 @@
+import tippy, { followCursor } from "tippy.js";
+import "tippy.js/dist/tippy.css";
+
+let isDragging = false;
+let canSetDragging = false;
+document.addEventListener("mousedown", () => {
+  canSetDragging = true;
+  isDragging = false;
+});
+document.addEventListener("mousemove", () => {
+  if (canSetDragging) {
+    isDragging = true;
+  }
+});
+document.addEventListener("mouseup", () => {
+  canSetDragging = false;
+  isDragging = false;
+});
+
+let tippys = [];
+let recentlyHidden = false;
+let clearMe;
+(function () {
+  let lastMouseOverElement = null;
+  document.addEventListener("mouseover", function (event) {
+    const element = event.target;
+
+    if (element instanceof Element && element !== lastMouseOverElement) {
+      lastMouseOverElement = element;
+
+      const id = "tippyEllipsizedEl";
+      // eslint-disable-next-line no-inner-declarations
+      function clearOldTippys(maybeInst) {
+        //clear old tippys
+        tippys = tippys.filter(t => {
+          const areeq = maybeInst?.reference?.isEqualNode(t.reference);
+          if (!areeq) {
+            t.destroy();
+            return false;
+          }
+          return true;
+        });
+      }
+      let innerRun = false;
+      const inner = (
+        content,
+        el,
+        { dataTitle, dataAvoid, dataAvoidBackup }
+      ) => {
+        innerRun = true;
+        document.querySelectorAll(`.${id}`).forEach(elem => {
+          elem.classList.remove(id);
+        });
+
+        el.classList.add(id);
+        const inst = tippy(`.${id}`, {
+          theme: "teselagen",
+          plugins: [followCursor],
+          content,
+          delay:
+            dataTitle && !recentlyHidden
+              ? [1300, 1300]
+              : dataTitle
+                ? [150, 150]
+                : [0, 0],
+          allowHTML: true,
+          ...(dataTitle && {
+            followCursor: dataTitle ? "initial" : false
+          }),
+          onHidden() {
+            recentlyHidden = true;
+            clearMe && clearTimeout(clearMe);
+            clearMe = setTimeout(() => {
+              if (tippys.length === 0) recentlyHidden = false;
+            }, 700);
+          },
+          ...(dataAvoid && {
+            popperOptions: {
+              modifiers: [
+                {
+                  name: "myModifier",
+                  enabled: true,
+                  phase: "beforeWrite",
+                  requires: ["computeStyles"],
+                  requiresIfExists: ["offset"],
+                  fn({ state }) {
+                    // console.log(`state:`, state);
+                    // state.styles.popper.bottom = 20 + "px";
+                    const customBoundary =
+                      document.querySelector(dataAvoid) ||
+                      document.querySelector(dataAvoidBackup);
+
+                    if (!customBoundary) return;
+                    const a = customBoundary.getBoundingClientRect();
+                    // console.log(
+                    //   `state.rects.reference.y:`,
+                    //   state.rects.reference.y
+                    // );
+                    // console.log(`a.top:`, a.top);
+
+                    if (a.top < state.rects.reference.y) {
+                      const b = Math.abs(
+                        Math.abs(a.top - state.rects.reference.y) - 10
+                      );
+                      state.styles.popper.bottom = b + "px";
+                    }
+
+                    // const overflow = detectOverflow(state, {
+                    //   boundary: customBoundary,
+                    //   altBoundary: true
+                    // });
+                    // console.log(`overflow:`, overflow);
+                    // if (overflow.bottom > 0) {
+                    //   const a = Math.abs(overflow.bottom);
+                    //   state.styles.popper.bottom = a + "px";
+                    // }
+                  }
+                }
+              ]
+            }
+          })
+        });
+
+        if (dataTitle) {
+          inst[0]?.popper?.classList.add("isDataTitle");
+        }
+        clearOldTippys(...inst);
+
+        if (!dataTitle) {
+          inst.forEach(i => {
+            i.show();
+          });
+        }
+
+        tippys = [...tippys, ...inst];
+        if (content === el.getAttribute("title")) {
+          el.removeAttribute("title");
+        }
+      };
+      const levels = 6;
+      let dataTip;
+      let dataTipStop;
+      let el = element;
+      for (let index = 0; index < levels; index++) {
+        if (!el) continue;
+
+        const style = window.getComputedStyle(el);
+        const whiteSpace = style.getPropertyValue("white-space");
+        const textOverflow = style.getPropertyValue("text-overflow");
+        const dataTitle = el.getAttribute("data-title");
+        const dataAvoid = el.getAttribute("data-avoid");
+        const dataAvoidBackup = el.getAttribute("data-avoid-backup");
+        dataTip = el.getAttribute("data-tip") || dataTitle;
+        const isEllipsized =
+          whiteSpace === "nowrap" && textOverflow === "ellipsis";
+
+        const opts = {
+          dataTitle,
+          dataAvoid,
+          dataAvoidBackup
+        };
+        if (
+          dataTip &&
+          !document.body.classList.contains("drag-active") &&
+          !isDragging
+        ) {
+          if (dataTipStop) break;
+
+          inner(dataTip, el, opts);
+          break;
+        } else if (
+          isEllipsized &&
+          el.offsetWidth < el.scrollWidth - 4 && //the -4 is adding a teeny bit of tolerance to fix issues with the column headers getting tooltips even when fully visible
+          !el.classList.contains("no-data-tip") &&
+          !parentIncludesNoChildDataTip(el, 0) &&
+          !document.body.classList.contains("drag-active") &&
+          el.textContent &&
+          el.textContent?.trim?.().length !== 0
+        ) {
+          inner(el.textContent, el, opts);
+          break;
+        } else if (isEllipsized && el.offsetWidth >= el.scrollWidth) {
+          // break; //tnr: i don't think we need this..
+        }
+        el = el.parentElement;
+      }
+
+      if (!innerRun) {
+        clearOldTippys();
+      }
+    }
+  });
+})();
+
+function parentIncludesNoChildDataTip(el, count) {
+  if (count > 4) return false;
+  if (!el) return false;
+  // if attr data-no-child-data-tip is preset on the element, then we don't want to show a tooltip on any of its children
+  if (el.getAttribute("data-no-child-data-tip")) return true;
+  return parentIncludesNoChildDataTip(el.parentElement, count + 1);
+}

package/src/basicHandleActionsWithFullState.js

@@ -0,0 +1,14 @@
+export default function basicHandleActionsWithFullState(
+  handlers,
+  defaultState
+) {
+  return (state = defaultState, action, fullState) => {
+    const { type } = action;
+    const handler = handlers[type];
+    if (handler) {
+      return handler(state, action, fullState);
+    } else {
+      return state;
+    }
+  };
+}

package/src/browserUtils.js

@@ -0,0 +1,3 @@
+export const isSafari = /^((?!chrome|android).)*safari/i.test(
+  navigator.userAgent
+);

package/src/combineReducersWithFullState.js

@@ -0,0 +1,14 @@
+export default function combineReducers(reducers = {}) {
+  const reducerKeys = Object.keys(reducers);
+  return function combination(state = {}, action, fullState) {
+    let hasChanged = false;
+    const nextState = {};
+    fullState = fullState || state;
+    for (let i = 0; i < reducerKeys.length; i++) {
+      const key = reducerKeys[i];
+      nextState[key] = reducers[key](state[key], action, fullState);
+      hasChanged = hasChanged || nextState[key] !== state[key];
+    }
+    return hasChanged ? nextState : state;
+  };
+}

package/src/commandControls.js

@@ -0,0 +1,82 @@
+import React from "react";
+import { Tooltip, Checkbox, Button, Switch } from "@blueprintjs/core";
+
+export const withCommand =
+  mappings =>
+  WrappedComponent =>
+  ({ cmd, cmdOptions = {}, ...props }) => {
+    const mappedProps = {};
+    Object.keys(mappings).forEach(k => {
+      mappedProps[k] =
+        mappings[k] === "execute"
+          ? event => cmd.execute({ event })
+          : typeof mappings[k] === "function"
+            ? mappings[k](cmd, props)
+            : cmd[mappings[k]];
+    });
+
+    let out = <WrappedComponent {...mappedProps} {...props} />;
+    const tooltip =
+      cmd.tooltip || (typeof cmd.isDisabled === "string" && cmd.isDisabled);
+    if (tooltip && !cmdOptions.ignoreTooltip) {
+      out = <Tooltip content={tooltip}>{out}</Tooltip>;
+    }
+
+    return cmd.isHidden && !cmdOptions.ignoreHidden ? null : out;
+  };
+
+export const CmdCheckbox = withCommand({
+  onChange: "execute",
+  label: (cmd, props) =>
+    props.name ||
+    (props.prefix && (
+      <React.Fragment>
+        {props.prefix}
+        {cmd.name}
+      </React.Fragment>
+    )) ||
+    cmd.name,
+  disabled: "isDisabled",
+  checked: "isActive"
+})(Checkbox);
+
+export const CmdSwitch = withCommand({
+  onChange: "execute",
+  label: (cmd, props) =>
+    props.name ||
+    (props.prefix && (
+      <React.Fragment>
+        {props.prefix}
+        {cmd.name}
+      </React.Fragment>
+    )) ||
+    cmd.name,
+  disabled: "isDisabled",
+  checked: "isActive"
+})(Switch);
+
+const Div = ({ onChange, children }) => {
+  return <div onClick={onChange}>{children}</div>;
+};
+
+export const CmdDiv = withCommand({
+  onChange: "execute",
+  children: (cmd, props) =>
+    props.name ||
+    (props.prefix && (
+      <React.Fragment>
+        {props.prefix}
+        {cmd.name}
+      </React.Fragment>
+    )) ||
+    cmd.name,
+  disabled: "isDisabled",
+  checked: "isActive"
+})(Div);
+
+export const CmdButton = withCommand({
+  onClick: "execute",
+  text: cmd => (cmd.isActive === false && cmd.inactiveName) || cmd.name,
+  icon: "icon",
+  disabled: "isDisabled"
+})(Button);

package/src/commandUtils.js

@@ -0,0 +1,112 @@
+import { startCase } from "lodash-es";
+
+// Generic factory function to create command objects.
+// TODO add documentation
+export function genericCommandFactory(config) {
+  const out = {};
+  // eslint-disable-next-line no-unused-vars
+  for (const cmdId in config.commandDefs) {
+    const def = config.commandDefs[cmdId];
+    const command = { id: cmdId };
+    command.execute = (...execArgs) => {
+      config.handleReturn(
+        cmdId,
+        def.handler &&
+          def.handler.apply(command, config.getArguments(cmdId, execArgs))
+      );
+    };
+
+    const properties = [
+      "icon",
+      "name",
+      "component",
+      "shortName",
+      "description",
+      "hotkey",
+      "hotkeyProps",
+      "isDisabled",
+      "submenu",
+      "isActive",
+      "isHidden",
+      "tooltip",
+      "inactiveIcon",
+      "inactiveName"
+    ];
+
+    properties.forEach(prop => {
+      if (def[prop] !== undefined) {
+        if (typeof def[prop] === "function") {
+          Object.defineProperty(command, prop, {
+            get: () => {
+              return def[prop].apply(command, config.getArguments(cmdId, []));
+            }
+          });
+        } else {
+          command[prop] = def[prop];
+        }
+      }
+    });
+
+    // If no name was specified in the definition, let's try to give some
+    // auto-generated names
+    if (!def.name) {
+      command.name = startCase(cmdId);
+      if (def.toggle && cmdId.startsWith("toggle")) {
+        command.name = startCase(cmdId.replace("toggle", def.toggle[0] || ""));
+        command.inactiveName = startCase(
+          cmdId.replace("toggle", def.toggle[1] || "")
+        );
+        command.shortName = startCase(cmdId.replace("toggle", ""));
+      }
+    }
+
+    out[cmdId] = command;
+  }
+
+  return out;
+}
+
+// Extract hotkey props from the given commands or command defs, returning
+// a mapping of command ids to hotkey prop objects
+export function getCommandHotkeys(commandsOrDefs) {
+  const hotkeyDefs = {};
+  Object.keys(commandsOrDefs).forEach(cmdId => {
+    if (commandsOrDefs[cmdId].hotkey) {
+      hotkeyDefs[cmdId] = {
+        combo: commandsOrDefs[cmdId].hotkey,
+        label: commandsOrDefs[cmdId].name || startCase(cmdId),
+        ...commandsOrDefs[cmdId].hotkeyProps
+      };
+    }
+  });
+
+  return hotkeyDefs;
+}
+
+// Extract handler functions from the given commands, returning a mapping of
+// command ids to handlers (directly - no checks added).
+export function getCommandHandlers(commands) {
+  const handlers = {};
+  Object.keys(commands).forEach(cmdId => {
+    handlers[cmdId] = commands[cmdId].execute;
+  });
+
+  return handlers;
+}
+
+// Get hotkey handler functions for the given commands, returning a mapping of
+// command ids to hotkey handlers.
+export function getCommandHotkeyHandlers(commands) {
+  const handlers = {};
+  Object.keys(commands).forEach(cmdId => {
+    if (commands[cmdId].hotkey) {
+      handlers[cmdId] = event => {
+        if (!commands[cmdId].isDisabled && !commands[cmdId].isHidden) {
+          commands[cmdId].execute({ event, viaHotkey: true });
+        }
+      };
+    }
+  });
+
+  return handlers;
+}

package/src/constants.js

@@ -0,0 +1 @@
+export const SAFE_UPSERT_PAGE_SIZE = 50;

package/src/convertSchema.js

@@ -0,0 +1,69 @@
+import { camelCase } from "lodash-es";
+import { startCase, keyBy, map } from "lodash-es";
+
+function convertSchema(schema) {
+  let schemaToUse = schema;
+  if (!schemaToUse.fields && Array.isArray(schema)) {
+    schemaToUse = {
+      fields: schema
+    };
+  }
+  schemaToUse = {
+    ...schemaToUse
+  };
+  schemaToUse.fields = schemaToUse.fields.map((field, i) => {
+    let fieldToUse = field;
+    if (typeof field === "string") {
+      fieldToUse = {
+        displayName: startCase(camelCase(field)),
+        path: field,
+        type: "string"
+      };
+    } else if (!field.type) {
+      fieldToUse = {
+        ...field,
+        type: "string"
+      };
+    }
+    if (!fieldToUse.displayName) {
+      fieldToUse = {
+        ...fieldToUse,
+        displayName: startCase(camelCase(fieldToUse.path))
+      };
+    }
+    // paths are needed for column resizing
+    if (!fieldToUse.path) {
+      fieldToUse = {
+        ...fieldToUse,
+        filterDisabled: true,
+        sortDisabled: true,
+        path: "fake-path" + i
+      };
+    }
+    return fieldToUse;
+  });
+  return schemaToUse;
+}
+
+export function mergeSchemas(_originalSchema, _overrideSchema) {
+  const originalSchema = convertSchema(_originalSchema);
+  const overrideSchema = convertSchema(_overrideSchema);
+
+  const overridesByKey = keyBy(overrideSchema.fields, "path");
+  return {
+    ...originalSchema,
+    ...overrideSchema,
+    fields: originalSchema.fields
+      .map(f => {
+        const override = overridesByKey[f.path];
+        if (override) {
+          delete overridesByKey[f.path];
+          return override;
+        }
+        return f;
+      })
+      .concat(map(overridesByKey))
+  };
+}
+
+export default convertSchema;