@teselagen/ui 0.7.31 → 0.7.33-beta.1

package/src/MenuBar/index.js

@@ -1,423 +0,0 @@
-import React from "react";
-import {
-  pickBy,
-  isNumber,
-  startsWith,
-  flatMap,
-  take,
-  flatten,
-  noop
-} from "lodash-es";
-import { Suggest } from "@blueprintjs/select";
-import "./style.css";
-import { Popover, Position, Menu, Button } from "@blueprintjs/core";
-import { some } from "lodash-es";
-import {
-  createDynamicMenu,
-  DynamicMenuItem,
-  getStringFromReactComponent,
-  doesSearchValMatchText
-} from "../utils/menuUtils";
-import { comboToLabel, withHotkeys } from "../utils/hotkeyUtils";
-
-class MenuBar extends React.Component {
-  constructor(props) {
-    super(props);
-    const combo =
-      (this.props && this.props.menuSearchHotkey) || menuSearchHotkey;
-    this.hotkeyEnabler = withHotkeys({
-      searchHotkey: {
-        allowInInput: true,
-        global: true,
-        combo,
-        label: "Search the menu",
-        preventDefault: true,
-        stopPropagation: true,
-        onKeyDown: this.toggleFocusSearchMenu
-      }
-    });
-  }
-  static defaultProps = {
-    className: "",
-    style: {}
-  };
-
-  state = {
-    isOpen: false,
-    openIndex: null,
-    helpItemQueryStringTracker: "" //we use this to track the search value and to not do all the item rendering logic until someone is actually searching
-  };
-
-  handleInteraction = index => newOpenState => {
-    if (!newOpenState && index !== this.state.openIndex) {
-      return; //return early because the "close" is being fired by another popover
-    }
-    this.setState({
-      isOpen: newOpenState,
-      openIndex: newOpenState ? index : null
-    });
-  };
-  handleMouseOver = index => () => {
-    const { isOpen } = this.state;
-    if (isOpen) {
-      this.setState({
-        openIndex: index
-      });
-    }
-  };
-
-  getAllMenuItems = () => {
-    const { menu, enhancers, context } = this.props;
-    return getAllMenuTextsAndHandlers(menu, enhancers, context);
-  };
-  addHelpItemIfNecessary = (menu, i) => {
-    return menu.map((item, innerIndex) => {
-      const { isMenuSearch, inputProps, ...rest } = item;
-      if (isMenuSearch) {
-        const isTopLevelSearch = !isNumber(i);
-        this.isTopLevelSearch = isTopLevelSearch;
-        this.menuSearchIndex = isTopLevelSearch ? innerIndex : i;
-
-        return {
-          shouldDismissPopover: false,
-          text: (
-            <Suggest
-              closeOnSelect={false}
-              items={
-                this.state.helpItemQueryStringTracker
-                  ? this.getAllMenuItems()
-                  : []
-              }
-              itemListPredicate={filterMenuItems}
-              itemDisabled={i => i.disabled}
-              popoverProps={{
-                minimal: true,
-                popoverClassName: "tg-menu-search-suggestions"
-              }}
-              onQueryChange={val => {
-                this.setState({ helpItemQueryStringTracker: val });
-              }}
-              className="tg-menu-bar-help-search"
-              resetOnSelect={false}
-              resetOnClose={true}
-              inputProps={{
-                inputRef: n => {
-                  if (n) {
-                    this.searchInput = n;
-                    n.setAttribute &&
-                      n.setAttribute(
-                        "size",
-                        n.getAttribute("placeholder").length
-                      );
-                  }
-                },
-                autoFocus: !isTopLevelSearch,
-                placeholder: `Search the menus (${comboToLabel(
-                  this.props.menuSearchHotkey || menuSearchHotkey,
-                  false
-                ).replace(/\s/g, "")})`,
-                ...inputProps
-              }}
-              initialContent={null}
-              onItemSelect={this.handleItemClickOrSelect()}
-              inputValueRenderer={i => i.text}
-              noResults={<div>No Results...</div>}
-              itemRenderer={this.helpItemRenderer}
-              {...rest}
-            />
-          )
-        };
-      } else {
-        return item;
-      }
-    });
-  };
-
-  helpItemRenderer = (i, b) => {
-    // if (i.submenu.length === 3) debugger;
-    return (
-      <DynamicMenuItem
-        key={b.index}
-        {...{
-          doNotEnhanceTopLevelItem: true,
-          enhancers: this.props.enhancers,
-          def: {
-            ...i,
-            text: i.isSimpleText ? i.justText || i.text : i.text,
-            label: i.path.length && (
-              <span style={{ fontSize: 8 }}>
-                {flatMap(i.path, (el, i2) => {
-                  if (i2 === 0) return el;
-                  return [" > ", el];
-                })}
-              </span>
-            ),
-            onClick: this.handleItemClickOrSelect(i),
-            active: b.modifiers.active
-            // shouldDismissPopover: true,
-          }
-        }}
-      />
-    );
-  };
-  // itemRenderer = (i, b) => {
-  //   return (
-  //     <MenuItem
-  //       key={b.index}
-  //       {...{
-  //         // ...i,
-  //         icon: i.icon,
-  //         text: i.isSimpleText ? i.justText || i.text : i.text,
-  //         label: i.path.length && (
-  //           <span style={{ fontSize: 8 }}>
-  //             {flatMap(i.path, (el, i2) => {
-  //               if (i2 === 0) return el;
-  //               return [" > ", el];
-  //             })}
-  //           </span>
-  //         ),
-  //         onClick: this.handleItemClickOrSelect(i),
-  //         active: b.modifiers.active
-  //         // shouldDismissPopover: true,
-  //       }}
-  //     />
-  //   );
-  // };
-
-  handleItemClickOrSelect = __i => _i => {
-    const i = __i || _i;
-    if (!i.onClick) return;
-    !i.disabled && i.onClick();
-    if (i.shouldDismissPopover !== false) {
-      this.setState({ isOpen: false });
-    } else {
-      if (_i && _i.stopPropagation) {
-        _i.stopPropagation();
-        _i.preventDefault();
-      }
-    }
-  };
-  toggleFocusSearchMenu = () => {
-    if (!isNumber(this.menuSearchIndex)) return;
-    //toggle off
-    if (this.searchInput && document.activeElement === this.searchInput) {
-      this.searchInput.blur();
-      this.setState({
-        isOpen: false,
-        openIndex: this.menuSearchIndex
-      });
-    } else {
-      //toggle on
-      if (this.isTopLevelSearch) {
-        this.searchInput && this.searchInput.focus();
-      } else {
-        this.setState({
-          isOpen: true,
-          openIndex: this.menuSearchIndex
-        });
-      }
-    }
-  };
-
-  render() {
-    const { className, style, menu, enhancers, extraContent } = this.props;
-    const { isOpen, openIndex } = this.state;
-    return (
-      <div className={"tg-menu-bar " + className} style={style}>
-        <this.hotkeyEnabler></this.hotkeyEnabler>
-        {menu.map((topLevelItem, i) => {
-          const dataKeys = pickBy(topLevelItem, function (value, key) {
-            return startsWith(key, "data-");
-          });
-
-          // Support enhancers for top level items too
-          topLevelItem = enhancers.reduce((v, f) => f(v), topLevelItem);
-
-          if (topLevelItem.hidden) {
-            return null;
-          }
-
-          const button = (
-            <Button
-              {...dataKeys} //spread all data-* attributes
-              key={i}
-              elementRef={n => {
-                if (!n) return;
-                this.n = n;
-              }}
-              minimal
-              className="tg-menu-bar-item"
-              onClick={topLevelItem.onClick}
-              disabled={topLevelItem.disabled}
-              onMouseOver={
-                topLevelItem.submenu ? this.handleMouseOver(i) : noop
-              }
-            >
-              {topLevelItem.text}
-            </Button>
-          );
-          const vh = Math.max(
-            document.documentElement.clientHeight || 0,
-            window.innerHeight || 0
-          );
-          const maxHeight =
-            vh - ((this.n && this.n.getBoundingClientRect().y + 70) || 70);
-
-          return !topLevelItem.submenu ? (
-            button
-          ) : (
-            <Popover
-              autoFocus={false}
-              key={i}
-              minimal
-              canEscapeKeyClose
-              onClosed={() => {
-                this.setState({ helpItemQueryStringTracker: "" });
-                this.props.onMenuClose && this.props.onMenuClose();
-              }}
-              portalClassName="tg-menu-bar-popover"
-              position={Position.BOTTOM_LEFT}
-              isOpen={isOpen && i === openIndex}
-              onInteraction={this.handleInteraction(i)}
-              content={
-                <Menu
-                  style={
-                    some(topLevelItem.submenu, n => n.isMenuSearch) //tnrbp4upgrade - I added this logic to prevent the Search Suggest component popover from covering the suggest. Remove this once we're on bp4 (shouldn't be necessary according to https://github.com/palantir/blueprint/issues/4552)
-                      ? {}
-                      : { maxHeight, overflow: "auto" }
-                  }
-                >
-                  {createDynamicMenu(
-                    this.addHelpItemIfNecessary(topLevelItem.submenu, i),
-                    enhancers
-                  )}
-                </Menu>
-              }
-              transitionDuration={0}
-              style={{
-                transition: "none"
-              }}
-              inline
-            >
-              {button}
-            </Popover>
-          );
-        })}
-        {extraContent}
-      </div>
-    );
-  }
-}
-
-const isDivider = item => item.divider !== undefined;
-
-function getAllMenuTextsAndHandlers(menu, enhancers, context, path = []) {
-  if (!menu) return [];
-  return flatMap(menu, item => {
-    const enhancedItem = [...enhancers].reduce((v, f) => f(v, context), item);
-    if (isDivider(enhancedItem)) {
-      return [];
-    }
-    if (enhancedItem && enhancedItem.hidden) return [];
-    return [
-      {
-        ...enhancedItem,
-        path
-      },
-      ...getAllMenuTextsAndHandlers(enhancedItem.submenu, enhancers, context, [
-        ...path,
-        enhancedItem.text
-      ])
-    ];
-  });
-}
-
-const filterMenuItems = (searchVal, items) => {
-  const newItems = flatMap(items, item => {
-    const {
-      text,
-      onClick,
-      hidden,
-      hideFromMenuSearch,
-      hiddenButSearchableText,
-      showInSearchMenu,
-      component
-    } = item;
-
-    if (
-      !showInSearchMenu &&
-      !component &&
-      (!text || !onClick || !searchVal || hideFromMenuSearch || hidden)
-    ) {
-      return [];
-    }
-    //fix this to use some smart regex
-    let justText = text;
-    let isSimpleText = true;
-    if (!text.toLowerCase) {
-      if (text.props) {
-        isSimpleText = false;
-        justText = getStringFromReactComponent(text);
-      } else {
-        return [];
-      }
-    }
-
-    if (
-      doesSearchValMatchText(
-        searchVal,
-        hiddenButSearchableText
-          ? `${justText} ${hiddenButSearchableText}`
-          : justText
-      )
-    ) {
-      return {
-        ...item,
-        justText,
-        isSimpleText
-      };
-    } else {
-      return [];
-    }
-  }).sort((a, b) => a.justText.length - b.justText.length);
-
-  return take(newItems, 10).map(i => ({
-    ...i,
-    justText: highlight(searchVal, i.justText)
-  }));
-};
-
-const menuSearchHotkey = "meta+/";
-
-function highlight(query, text, opts) {
-  opts = opts || { tag: <strong /> };
-
-  if (query.length === 0) {
-    return text;
-  }
-
-  const offset = text.toLowerCase().indexOf(query[0].toLowerCase());
-  if (offset === -1) return text;
-
-  let last = 0;
-  for (let i = 1; i < query.length; i++) {
-    if (text[offset + i] !== query[i]) {
-      break;
-    }
-
-    last = i;
-  }
-
-  const before = text.slice(0, offset);
-  const match = <strong>{text.slice(offset, offset + last + 1)}</strong>;
-
-  const after = highlight(
-    query.slice(last + 1),
-    text.slice(offset + last + 1),
-    opts
-  );
-
-  return flatten([before, match, after]);
-}
-
-export default MenuBar;

package/src/MenuBar/style.css

@@ -1,45 +0,0 @@
-.tg-menu-bar {
-  /* background: white; */
-  color: inherit;
-  text-decoration: none;
-  z-index: 19;
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  height: 34px;
-  width: 100%;
-  padding-left: 15px;
-}
-
-.tg-menu-bar-item {
-  margin: 2px;
-}
-
-.tg-menu-bar .bp3-popover {
-  margin-top: -1px !important;
-}
-
-.tg-menu-bar-popover .bp3-popover .bp3-popover-arrow {
-  display: none;
-}
-
-/* removing the display inline styling because they broke menu positioning: https://github.com/TeselaGen/lims/issues/2563 */
-/* .tg-menu-bar-popover .bp3-popover-wrapper {
-  display: inline;
-}
-.tg-menu-search-suggestions .bp3-popover-wrapper {
-  display: inline;
-} */
-/* add a fix here that applies the above logic to only the first child of the menu */
-.tg-menu-search-suggestions .bp3-menu > .bp3-popover-wrapper {
-  display: inline;
-}
-
-li.bp3-menu-divider + li.bp3-menu-divider,
-li.bp3-menu-divider:first-child,
-li.bp3-menu-divider:last-child {
-  display: none;
-}
-.tg_search_highlight {
-  font-weight: bold;
-}

package/src/PromptUnsavedChanges/index.js

@@ -1,38 +0,0 @@
-/* Copyright (C) 2018 TeselaGen Biotechnology, Inc. */
-
-import React, { useEffect } from "react";
-import { Prompt } from "react-router-dom";
-
-export const defaultMessagge =
-  "Are you sure you want to leave? There are unsaved changes.";
-
-const warnBeforeLeave = e => {
-  // if we are in a cypress test run then we don't want to block navigation
-  if (window.Cypress) {
-    return null;
-  }
-
-  // Maintains older browser compatibility. In newer versions a generic string is returned
-  (e || window.event).returnValue = defaultMessagge; //Gecko + IE
-  return defaultMessagge; //Webkit, Safari, Chrome
-};
-
-export function PromptUnsavedChanges({
-  message = defaultMessagge,
-  when = false
-}) {
-  useEffect(() => {
-    if (when) {
-      window.addEventListener("beforeunload", warnBeforeLeave);
-    }
-    return () => window.removeEventListener("beforeunload", warnBeforeLeave);
-  });
-
-  if (window.Cypress) {
-    return null;
-  }
-
-  return <Prompt when={when} message={message} />;
-}
-
-export default PromptUnsavedChanges;

package/src/ResizableDraggableDialog/index.js

@@ -1,141 +0,0 @@
-import React from "react";
-import { Dialog, Classes } from "@blueprintjs/core";
-import { Rnd } from "react-rnd";
-import { debounce } from "lodash-es";
-import "./style.css";
-
-const defaultDialogWidth = 400;
-const defaultDialogHeight = 100;
-export default class ResizableDraggableDialog extends React.Component {
-  componentDidMount() {
-    window.addEventListener("resize", this.onWindowResize);
-    this.setDefaults();
-    setTimeout(() => {
-      this.setDefaults();
-      try {
-        const el = this.containerEl.querySelector(".bp3-dialog-body");
-        this.resizeObs = new ResizeObserver(
-          debounce(() => {
-            this.setDefaults({ doNotSetXOrWidth: true });
-          })
-        );
-        this.resizeObs.observe(el);
-      } catch (e) {
-        console.warn(
-          `1214124599 Error setting up resize observer on dialog :`,
-          e
-        );
-      }
-    }, 0);
-  }
-  state = {
-    x: 0,
-    y: 0,
-    width: defaultDialogWidth,
-    height: defaultDialogHeight
-  };
-
-  setDefaults = ({ doNotSetXOrWidth } = {}) => {
-    const { width, height } = this.props;
-    const { windowWidth, windowHeight } = this.getWindowWidthAndHeight();
-
-    let heightToUse;
-    if (height) {
-      heightToUse = height;
-    } else {
-      heightToUse = (document.querySelector(".bp3-dialog-body") || {})
-        .scrollHeight;
-      if (heightToUse) {
-        heightToUse = heightToUse + 60;
-      } else {
-        heightToUse = defaultDialogHeight;
-      }
-    }
-    let widthToUse;
-    if (width) {
-      widthToUse = width;
-    } else {
-      widthToUse = defaultDialogWidth;
-    }
-
-    this.setState({
-      ...(doNotSetXOrWidth
-        ? {}
-        : {
-            x: Math.round(Math.max((windowWidth - widthToUse) / 2, 0)),
-            width: Math.min(widthToUse, windowWidth)
-          }),
-      y: Math.round(Math.max((windowHeight - heightToUse) / 2, 0)),
-      height: Math.min(Math.max(defaultDialogHeight, heightToUse), windowHeight)
-    });
-  };
-  onWindowResize = () => {
-    this.setDefaults();
-  };
-  componentWillUnmount() {
-    this.resizeObs && this.resizeObs.disconnect();
-    window.removeEventListener("resize", this.onWindowResize);
-  }
-
-  getWindowWidthAndHeight = () => {
-    const w = window,
-      d = document,
-      e = d.documentElement,
-      g = d.getElementsByTagName("body")[0],
-      windowWidth = w.innerWidth || e.clientWidth || g.clientWidth,
-      windowHeight = w.innerHeight || e.clientHeight || g.clientHeight;
-    return {
-      windowWidth,
-      windowHeight: windowHeight - 20 //add a small correction here
-    };
-  };
-
-  render() {
-    const { width, height, RndProps, ...rest } = this.props;
-    const { windowWidth, windowHeight } = this.getWindowWidthAndHeight();
-    return (
-      <div
-        ref={el => {
-          if (el) this.containerEl = el;
-        }}
-        className="tg-bp3-dialog-resizable-draggable"
-        style={{ top: 0, left: 0, position: "fixed" }}
-      >
-        <Rnd
-          cancel=".bp3-dialog-close-button"
-          enableResizing={{
-            bottomLeft: true,
-            bottomRight: true,
-            topLeft: true,
-            topRight: true
-          }}
-          maxHeight={windowHeight}
-          maxWidth={windowWidth}
-          bounds="window"
-          size={{ width: this.state.width, height: this.state.height }}
-          position={{ x: this.state.x, y: this.state.y }}
-          onDragStop={(e, d) => {
-            this.setState({ x: d.x, y: d.y });
-          }}
-          onResizeStop={(e, direction, ref, delta, position) => {
-            this.setState({
-              width: ref.style.width,
-              height: ref.style.height,
-              ...position
-            });
-          }}
-          dragHandleClassName={Classes.DIALOG_HEADER}
-          {...RndProps}
-        >
-          <Dialog
-            enforceFocus={false}
-            hasBackdrop={false}
-            usePortal={false}
-            canEscapeKeyClose={true}
-            {...rest}
-          />
-        </Rnd>
-      </div>
-    );
-  }
-}

package/src/ResizableDraggableDialog/style.css

@@ -1,42 +0,0 @@
-.tg-bp3-dialog-resizable-draggable {
-  z-index: 40000; /* necessary for open-vector-editor */
-}
-.tg-bp3-dialog-resizable-draggable
-  .bp3-overlay.bp3-overlay-scroll-container.bp3-overlay-inline {
-  position: static;
-  height: 100%;
-  width: 100%;
-}
-
-.tg-bp3-dialog-resizable-draggable .bp3-overlay-inline .bp3-overlay-content,
-.tg-bp3-dialog-resizable-draggable
-  .bp3-overlay-scroll-container
-  .bp3-overlay-content {
-  position: static;
-  width: 100%;
-  height: 100%;
-}
-.tg-bp3-dialog-resizable-draggable .bp3-dialog-container .bp3-dialog {
-  position: absolute;
-  top: 0;
-  width: 100%;
-  /* height: 100%; */
-  max-height: 100%;
-  /* height: -webkit-fill-available; */
-  margin: 0 !important;
-}
-.tg-bp3-dialog-resizable-draggable .bp3-dialog-header {
-  cursor: move;
-}
-.tg-bp3-dialog-resizable-draggable .bp3-dialog-body {
-  height: 100%;
-  width: 100%;
-  width: stretch;
-  overflow: auto;
-  margin: 0px;
-  padding: 20px;
-  padding-bottom: 0px;
-}
-.tg-bp3-dialog-resizable-draggable .bp3-overlay-backdrop {
-  display: none;
-}