@teselagen/ui 0.0.9 → 0.0.12

package/src/useDialog.js

@@ -0,0 +1,64 @@
+import React, { useState } from "react";
+
+/* 
+
+  const {toggleDialog, comp} = useDialog({
+    ModalComponent: SimpleInsertData,
+    validateAgainstSchema,
+  });
+
+  return <div>
+    {comp} //stick the returned dialog comp somewhere in the dom! (it should not effect layout)
+    {...your code here}
+  </div>
+
+*/
+export const useDialog = ({ ModalComponent, ...rest }) => {
+  const [isOpen, setOpen] = useState(false);
+  const [additionalProps, setAdditionalProps] = useState(false);
+  const comp = (
+    <ModalComponent
+      hideModal={() => {
+        setOpen(false);
+      }}
+      hideDialog={() => {
+        setOpen(false);
+      }}
+      {...rest}
+      {...additionalProps}
+      dialogProps={{
+        isOpen,
+        ...rest?.dialogProps,
+        ...additionalProps?.dialogProps
+      }}
+    ></ModalComponent>
+  );
+  const toggleDialog = () => {
+    setOpen(!isOpen);
+  };
+  async function showDialogPromise(handlerName, moreProps = {}) {
+    return new Promise(resolve => {
+      //return a promise that can be awaited
+      setAdditionalProps({
+        hideModal: () => {
+          //override hideModal to resolve also
+          setOpen(false);
+          resolve({});
+        },
+        hideDialog: () => {
+          //override hideModal to resolve also
+          setOpen(false);
+          resolve({});
+        },
+        [handlerName]: r => {
+          setOpen(false);
+          resolve(r || {});
+        },
+        //pass any additional props to the dialog
+        ...moreProps
+      });
+      setOpen(true); //open the dialog
+    });
+  }
+  return { comp, showDialogPromise, toggleDialog, setAdditionalProps };
+};

package/src/utils/S3Download.js

@@ -0,0 +1,14 @@
+import axios from "axios";
+
+const S3Download = request => {
+  const url =
+    (request.server || "/") +
+    "/s3/" +
+    (request.s3path || "") +
+    request.file +
+    "?bucket=" +
+    (request.bucket || "");
+  return axios.get(url, { responseType: "blob" }).then(res => res.data);
+};
+
+export default S3Download;

package/src/utils/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/utils/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/utils/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/utils/commandControls.js

@@ -0,0 +1,83 @@
+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/utils/commandUtils.js

@@ -0,0 +1,112 @@
+import { startCase } from "lodash";
+
+// 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/utils/determineBlackOrWhiteTextColor.js

@@ -0,0 +1,4 @@
+/* Copyright (C) 2018 TeselaGen Biotechnology, Inc. */
+import Color from "color";
+
+export default c => (Color(c).isLight() ? "#000000" : "#FFFFFF");

package/src/utils/getDayjsFormatter.js

@@ -0,0 +1,35 @@
+import dayjs from "dayjs";
+import LocalizedFormat from "dayjs/plugin/localizedFormat";
+import localeData from "dayjs/plugin/localeData";
+
+dayjs.extend(localeData);
+dayjs.extend(LocalizedFormat);
+const userLocale = Intl.DateTimeFormat().resolvedOptions().locale;
+
+if (userLocale) {
+  const requireLocale = (newLocale, skipCall) => {
+    if (dayjs.locale() !== newLocale) {
+      try {
+        require(`dayjs/locale/${newLocale}.js`);
+        dayjs.locale(newLocale);
+      } catch (error) {
+        // error
+        if (!skipCall && newLocale.includes("-")) {
+          requireLocale(newLocale.split("-")[0], true);
+        }
+      }
+    }
+  };
+  const localeToUse = userLocale.toLowerCase();
+  requireLocale(localeToUse);
+}
+
+export default function getDayjsFormatter(format) {
+  return {
+    formatDate: date => dayjs(date).format(format),
+    parseDate: str => dayjs(str, format).toDate(),
+    placeholder: format?.toLowerCase().includes("l")
+      ? dayjs.Ls[dayjs.locale()]?.formats[format.toUpperCase()]
+      : format
+  };
+}

package/src/utils/getTextFromEl.js

@@ -0,0 +1,28 @@
+import React from "react";
+
+export default function getTextFromEl(el, options = {}) {
+  const { lowerCase } = options;
+  if (React.isValidElement(el)) {
+    return el && el.props && el.props.children
+      ? (el.props.children.reduce
+          ? el.props.children
+          : [el.props.children]
+        ).reduce((acc, child) => {
+          if (child && child.props && child.props.children) {
+            acc += getTextFromEl(child);
+          } else if (typeof child === "string") {
+            if (lowerCase) {
+              acc += child.toLowerCase();
+            } else {
+              acc += child;
+            }
+          } else if (typeof child === "number") {
+            acc += child + "";
+          }
+          return acc;
+        }, "")
+      : "";
+  } else {
+    return el;
+  }
+}

package/src/utils/handlerHelpers.js

@@ -0,0 +1,30 @@
+export function onEnterHelper(callback) {
+  return {
+    onKeyDown: function(event) {
+      if (event.key === "Enter") {
+        callback(event);
+      }
+    }
+  };
+}
+
+export function onBlurHelper(callback) {
+  return {
+    onBlur: function(event) {
+      callback(event);
+    }
+  };
+}
+
+export function onEnterOrBlurHelper(callback) {
+  return {
+    onKeyDown: function(event) {
+      if (event.key === "Enter") {
+        callback(event);
+      }
+    },
+    onBlur: function(event) {
+      callback(event);
+    }
+  };
+}

package/src/utils/hotkeyUtils.js

@@ -0,0 +1,129 @@
+import React, { useMemo } from "react";
+import { useHotkeys } from "@blueprintjs/core";
+import { startCase } from "lodash";
+
+// 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"];