@teselagen/ui 0.7.33-beta.3 → 0.7.33-beta.4

package/src/MenuBar/index.js

@@ -0,0 +1,423 @@
+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

@@ -0,0 +1,45 @@
+.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

@@ -0,0 +1,38 @@
+/* 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

@@ -0,0 +1,141 @@
+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

@@ -0,0 +1,42 @@
+.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;
+}