@teselagen/ui 0.7.35 → 0.7.36

package/src/utils/menuUtils.js

@@ -1,433 +0,0 @@
-import React from "react";
-import { lifecycle, compose, branch } from "recompose";
-import { withRouter, Link } from "react-router-dom";
-import {
-  MenuItem,
-  MenuDivider,
-  Tooltip,
-  KeyCombo,
-  ContextMenu,
-  Menu,
-  Classes,
-  Icon
-} from "@blueprintjs/core";
-import {
-  startCase,
-  omit,
-  isNumber,
-  flatMap,
-  isArray,
-  isString,
-  noop
-} from "lodash-es";
-import fuzzysearch from "fuzzysearch";
-import classNames from "classnames";
-// https://github.com/palantir/blueprint/issues/2820
-export function MenuItemLink({ text, onClick, icon, navTo, active, disabled }) {
-  if (disabled) {
-    return (
-      <li className={Classes.POPOVER_DISMISS}>
-        <MenuItem icon={icon} disabled={true} text={text} />
-      </li>
-    );
-  }
-  const handleLinkClick = e => {
-    e.target.closest(`.${Classes.POPOVER_DISMISS}`).click();
-  };
-
-  return (
-    <li className={Classes.POPOVER_DISMISS} onClick={onClick}>
-      <Link
-        onClick={handleLinkClick}
-        to={navTo}
-        className={classNames(Classes.MENU_ITEM, {
-          [Classes.ACTIVE]: active,
-          [Classes.INTENT_PRIMARY]: active
-        })}
-      >
-        {icon && <Icon icon={icon} />}
-        <div className="bp3-text-overflow-ellipsis bp3-fill">{text}</div>
-      </Link>
-    </li>
-  );
-}
-
-// Enhanced MenuItem that supports history-based navigation when passed a
-// `navTo` prop
-export const EnhancedMenuItem = compose(
-  lifecycle({
-    componentDidMount: function () {
-      const { didMount = noop, className } = this.props;
-      didMount({ className });
-    },
-    componentWillUnmount: function () {
-      const { willUnmount = noop, className } = this.props;
-      willUnmount({ className });
-    }
-  }),
-  branch(({ navTo }) => navTo, withRouter)
-)(function ({
-  navTo,
-  context,
-  staticContext,
-  didMount,
-  willUnmount,
-  ...props
-}) {
-  let MenuItemComp = MenuItem;
-  if (navTo) {
-    MenuItemComp = MenuItemLink;
-  }
-  return (
-    <MenuItemComp
-      popoverProps={{
-        autoFocus: false
-      }}
-      {...(navTo && { navTo })}
-      {...props}
-      onClick={
-        props.onClick
-          ? (...args) => {
-              return props.onClick(...args, context);
-            }
-          : undefined
-      }
-    />
-  );
-});
-
-// First Non-Undefined
-function fnu(...args) {
-  return args.find(v => v !== undefined);
-}
-
-// Sets a tick icon if items has a `checked` prop
-export const tickMenuEnhancer = def => {
-  const out = { ...def };
-  if (out.checked !== undefined) {
-    out.icon = out.checked ? "small-tick" : "blank";
-  }
-  return out;
-};
-
-// Derives various menu item props based on command objects matched via the `cmd`
-// prop. Derived props include `text`, `icon`, `hotkey`, `onClick` and `disabled`.
-export const commandMenuEnhancer =
-  (commands, config = {}) =>
-  (def, context) => {
-    const cmdId = typeof def === "string" ? def : def.cmd;
-    let item = typeof def === "string" ? { cmd: def } : { ...def };
-
-    const useTicks = fnu(item.useTicks, config.useTicks);
-    delete item.useTicks;
-
-    if (cmdId && commands[cmdId] && def.divider === undefined) {
-      const command = commands[cmdId];
-
-      const { isActive, isDisabled, isHidden } = command;
-      const toggles = isActive !== undefined;
-
-      item.hidden = fnu(item.hidden, isHidden);
-      item.disabled = fnu(item.disabled, isDisabled);
-
-      item.key = item.key || cmdId;
-      item.submenu = item.submenu || command.submenu;
-      item.component = item.component || command.component;
-
-      if (toggles) {
-        if (useTicks) {
-          item.text = item.text || command.shortName || command.name;
-          item.checked = item.checked || isActive;
-        } else {
-          item.text =
-            item.text ||
-            (isActive ? command.name : command.inactiveName || command.name);
-          item.icon =
-            item.icon ||
-            (isActive ? command.icon : command.inactiveIcon || command.icon);
-        }
-      } else {
-        item.text = item.text || command.name;
-        item.icon = item.icon || command.icon;
-      }
-
-      item.hotkey = item.hotkey || command.hotkey;
-      if (!item.onClick) {
-        item.onClick = event =>
-          command.execute({
-            event,
-            context,
-            menuItem: item,
-            viaMenu: true
-          });
-      }
-    } else if (cmdId && !commands[cmdId]) {
-      item.text = item.text || startCase(cmdId);
-      item.disabled = true;
-    }
-
-    if (config.omitIcons) {
-      item.icon = undefined;
-    }
-
-    if (config.forceIconAlignment !== false) {
-      item.icon = item.icon || "blank";
-    }
-
-    if (useTicks) {
-      item = tickMenuEnhancer(item);
-    }
-
-    return item;
-  };
-
-const ident = x => x;
-
-const dividerShorthandEnhancer = def =>
-  typeof def === "string" && def.startsWith("--")
-    ? { divider: def.substr(2) }
-    : def;
-
-// filter out unwanted attributes here! we won't want these to show up on the dom element or react will give nasty warnings
-const unwantedAttrs = [
-  "isSimpleText",
-  "justText",
-  "submenu",
-  "component",
-  "hotkey",
-  "changingProps",
-  "showInSearchMenu",
-  "hideFromMenuSearch"
-];
-
-/** A menu item component that adds many features over the standard MenuItem,
- * and allows for dynamic menu structures that are computed efficiently (only
- * visible sections are computed and rendered).
- * TODO: document and add examples
- */
-export const DynamicMenuItem = ({
-  def,
-  enhancers = [ident],
-  context,
-  doNotEnhanceTopLevelItem
-}) => {
-  // If passed an element instead of a menu item definition, return it.
-  // This allows mixing menu item elements and menu item defs, and makes it
-  // safe to call menu creation utils with their own output.
-  if (React.isValidElement(def)) return def;
-
-  const item = [
-    dividerShorthandEnhancer,
-    ...(doNotEnhanceTopLevelItem ? [ident] : enhancers)
-  ].reduce((v, f) => f(v, context), def);
-  let out;
-  if (item.divider !== undefined) {
-    out = (
-      <MenuDivider
-        {...(item.divider
-          ? { title: item.divider, className: item.className }
-          : {})}
-      />
-    );
-  } else {
-    const ItemComponent = item.component || EnhancedMenuItem;
-    out = (
-      <ItemComponent
-        // filter out unwanted attributes here!
-        {...omit(item, unwantedAttrs)}
-        context={context}
-        icon={item.icon || item.iconName}
-        labelElement={item.hotkey && <KeyCombo minimal combo={item.hotkey} />}
-        text={item.text}
-      >
-        {item.submenu
-          ? item.submenu
-              .filter(ident)
-              .map((def, index) => (
-                <DynamicMenuItem key={index} {...{ def, enhancers, context }} />
-              ))
-          : undefined}
-      </ItemComponent>
-    );
-  }
-  // if (item.disabled && item.disabledTooltip) {
-  //   item.tooltip = def.disabledTooltip
-  // }
-  if (item.disabled && typeof item.disabled === "string") {
-    item.tooltip = item.disabled;
-  }
-
-  if (item.tooltip) {
-    out = <Tooltip content={item.tooltip}>{out}</Tooltip>;
-  }
-
-  return item.hidden ? null : out;
-};
-
-// Map the passed item definition(s) to DynamicMenuItem elements
-export const createDynamicMenu = (menuDef, enhancers, context) => {
-  if (menuDef instanceof Array) {
-    return menuDef.map((def, index) => (
-      <DynamicMenuItem key={index} {...{ def, enhancers, context }} />
-    ));
-  } else {
-    return <DynamicMenuItem {...{ def: menuDef, enhancers, context }} />;
-  }
-};
-
-// Create a "bar" menu, keeping the top level array unchanged, and only
-// map their submenus to DynamicMenuItem elements
-export const createDynamicBarMenu = (topMenuDef, enhancers, context) => {
-  return topMenuDef.map(topLevelItem => {
-    const def = { ...topLevelItem };
-    if (def.submenu) {
-      def.submenu = def.submenu.map((subdef, index) => (
-        <DynamicMenuItem key={index} def={subdef} {...{ enhancers, context }} />
-      ));
-    }
-    return def;
-  });
-};
-
-// Shorthand for command-based menus
-export const createCommandMenu = (menuDef, commands, config, context) => {
-  return createDynamicMenu(
-    menuDef,
-    [commandMenuEnhancer(commands, config)],
-    context
-  );
-};
-
-// Shorthand for command-based bar menus
-export const createCommandBarMenu = (menuDef, commands, config, context) => {
-  return createDynamicBarMenu(
-    menuDef,
-    [commandMenuEnhancer(commands, config)],
-    context
-  );
-};
-
-export function showCommandContextMenu(
-  menuDef,
-  commands,
-  config,
-  event,
-  onClose,
-  context
-) {
-  return showContextMenu(
-    menuDef,
-    [commandMenuEnhancer(commands, config)],
-    event,
-    onClose,
-    context
-  );
-}
-
-/**
- * TODO: update documentation. This is now an alias of createDynamicMenu
- *
- * Creates the contents of a Blueprint menu based on a given menu structure.
- *
- * The input can be an array of item objects, where each may contain:
- * text: text to show
- * key: React key to use (optional)
- * divider: indicates it's a divider instead of an item. Use an empty string
- *   for a normal divider, or some label text for a labeled one
- * icon: name of icon to show (optional)
- * label: right-aligned label, used mostly for shortcuts (optional)
- * hotkey: right-aligned label formatted with <KeyCombo> (optional)
- * tooltip: tooltip text to use (optional)
- * submenu: nested menu structure describing submenu (i.e. array of item objects),
- *   or array of MenuItem elements
- * onClick: click handler
- * navTo: a url to navigate to (assumes react-router)
- * href: a url to link to
- * target: link target
- *
- * Since this function is recursive (to handle nested submenus), and React
- * elements passed as input are returned unchanged, it is possible to freely mix
- * item objects and MenuItem elements. That also makes it safe to call the function
- * with its own output.
- *
- * A customize function may also be provided, and allows customization or
- * replacement of the created MenuItems, allowing for custom props or behavior.
- * That function receives the original created element and the item object, and
- * must return an element.
- *
- * Usage example:
- *
- * const menu = createMenu([
- *   { text: 'Item One', icon: 'add', onClick: () => console.info('Clicked 1') },
- *   { text: 'Item One', onClick: () => console.info('Clicked 2') },
- *   { divider: '' },
- *   { text: 'Item Three', icon: 'numerical', onClick: () => console.info('Clicked 3') },
- *   { divider: '' },
- *   { text: 'Submenus', submenu: [
- *     { text: 'Sub One' },
- *     { text: 'Sub Two' },
- *   ]},
- * ]);
- *
- */
-export const createMenu = createDynamicMenu;
-
-export function showContextMenu(
-  menuDef,
-  enhancers,
-  event,
-  onClose,
-  context,
-  menuComp = Menu
-) {
-  menuDef = filterMenuForCorrectness(menuDef);
-  if (!menuDef) return;
-
-  const MenuComponent = menuComp;
-  event.persist && event.persist();
-  // Render a context menu at the passed event's position
-  ContextMenu.show(
-    <MenuComponent>
-      {createDynamicMenu(menuDef, enhancers, context)}
-    </MenuComponent>,
-    { left: event.clientX, top: event.clientY },
-    onClose
-  );
-  event.stopPropagation && event.stopPropagation();
-  event.preventDefault && event.preventDefault();
-}
-
-function filterMenuForCorrectness(menuDef) {
-  return menuDef && menuDef.length && menuDef.filter(ident);
-}
-
-export function getStringFromReactComponent(comp) {
-  if (!comp) return "";
-  if (isString(comp) || isNumber(comp)) return comp;
-  if (comp.props?.text) {
-    return getStringFromReactComponent(comp.props.text);
-  }
-  const { children } = comp.props || {};
-  if (!children) return "";
-  if (isArray(children))
-    return flatMap(children, getStringFromReactComponent).join("");
-  if (isString(children)) return children;
-
-  if (children.props) {
-    return getStringFromReactComponent(children.props);
-  }
-}
-export function doesSearchValMatchText(searchVal, justText) {
-  return fuzzysearch(
-    searchVal ? searchVal.toLowerCase() : "",
-    justText ? justText.toLowerCase() : ""
-  );
-}
-
-export const MenuItemWithTooltip = ({ tooltip, ...rest }) => {
-  let out = <MenuItem {...rest}></MenuItem>;
-  if (tooltip) {
-    out = <Tooltip content={tooltip}>{out}</Tooltip>;
-  }
-  return out;
-};

package/src/utils/popoverOverflowModifiers.js

@@ -1,11 +0,0 @@
-// will help tooltip to not get smushed
-const popoverOverflowModifiers = {
-  preventOverflow: { boundariesElement: "viewport" },
-  hide: {
-    enabled: false
-  },
-  flip: {
-    boundariesElement: "viewport"
-  }
-};
-export default popoverOverflowModifiers;

package/src/utils/pureNoFunc.js

@@ -1,31 +0,0 @@
-/**
- * This HOC compares props to create a pure component that will only update
- * when props are not deep equal. It will compare the string values of functions
- */
-import { shouldUpdate } from "recompose";
-import { isEqualWith, isFunction } from "lodash-es";
-
-/**
- * tgreen: This is an awful function which we should come up with a better solution for
- * @param {*} o1
- * @param {*} o2
- */
-const isEq = (o1, o2) => {
-  const isEq = isEqualWith(o1, o2, function (val1, val2) {
-    if (isFunction(val1) && isFunction(val2)) {
-      return val1 === val2 || val1.toString() === val2.toString();
-    }
-    // tgreen: we were seeing an issue where the isEq would infinite loop on react children
-    // components. We decided to just ignore them (assume they are equal)
-    if (val1 && val1.constructor && val1.constructor.name === "FiberNode")
-      return true;
-  });
-  return isEq;
-};
-
-const pure = BaseComponent => {
-  const hoc = shouldUpdate((props, nextProps) => !isEq(props, nextProps));
-  return hoc(BaseComponent);
-};
-
-export default pure;

package/src/utils/renderOnDoc.js

@@ -1,32 +0,0 @@
-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/src/utils/showProgressToast.js

@@ -1,22 +0,0 @@
-/* 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/src/utils/tagUtils.js

@@ -1,45 +0,0 @@
-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/src/utils/tgFormValues.js

@@ -1,35 +0,0 @@
-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/src/utils/useTraceUpdate.js

@@ -1,19 +0,0 @@
-import { useEffect, useRef } from "react";
-
-// useful for debugging rerender errors
-export const useTraceUpdate = props => {
-  const prev = useRef(props);
-  useEffect(() => {
-    const changedProps = Object.entries(props).reduce((ps, [k, v]) => {
-      if (prev.current[k] !== v) {
-        ps[k] = [prev.current[k], v];
-      }
-      return ps;
-    }, {});
-    if (Object.keys(changedProps).length > 0) {
-      // eslint-disable-next-line no-console
-      console.log("Changed props:", changedProps);
-    }
-    prev.current = props;
-  });
-};

package/src/utils/withSelectTableRecords.js

@@ -1,43 +0,0 @@
-/* Copyright (C) 2018 TeselaGen Biotechnology, Inc. */
-import { compose, withHandlers } from "recompose";
-import { connect } from "react-redux";
-import { change, initialize } from "redux-form";
-
-export default function (_tableFormName, propName = "selectTableRecords") {
-  return compose(
-    connect(null, {
-      changeFormValue: change,
-      initializeForm: initialize
-    }),
-    withHandlers({
-      [propName]:
-        props =>
-        (_records = []) => {
-          let tableFormName = _tableFormName;
-          if (typeof _tableFormName === "function") {
-            tableFormName = _tableFormName(props);
-          }
-          // initialize if needed so that the values will stay
-          props.initializeForm(tableFormName, {}, true, {
-            keepDirty: true,
-            updateUnregisteredFields: true,
-            keepValues: true
-          });
-          const selectedEntityIdMap = {};
-          let records = _records;
-          if (_records && !Array.isArray(_records)) records = [records];
-          records.forEach(record => {
-            selectedEntityIdMap[record.id] = {
-              entity: record,
-              time: Date.now()
-            };
-          });
-          props.changeFormValue(
-            tableFormName,
-            "reduxFormSelectedEntityIdMap",
-            selectedEntityIdMap
-          );
-        }
-    })
-  );
-}

package/src/utils/withStore.js

@@ -1,10 +0,0 @@
-import { useStore } from "react-redux";
-import React from "react";
-
-const withStore = Component => {
-  return props => {
-    const store = useStore();
-    return <Component {...props} store={store} />;
-  };
-};
-export default withStore;