@teselagen/ui 0.7.34 → 0.7.36

package/src/ScrollToTop/index.js

@@ -1,72 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { Button } from "@blueprintjs/core";
-import { Transition } from "react-transition-group";
-
-const duration = 300;
-
-const defaultStyle = {
-  transition: `opacity ${duration}ms ease-in-out`,
-  opacity: 0
-};
-
-const transitionStyles = {
-  entering: { opacity: 1 },
-  entered: { opacity: 1 },
-  exiting: { opacity: 0 },
-  exited: { opacity: 0 }
-};
-
-function ScrollToTop({
-  showAt = 150,
-  scrollContainer = document.scrollingElement
-}) {
-  const [shouldShow, setShouldShow] = useState(
-    scrollContainer.scrollTop >= showAt
-  );
-
-  useEffect(() => {
-    const scrollListener = () => {
-      const newShouldShow = scrollContainer.scrollTop >= showAt;
-      if (newShouldShow !== shouldShow) setShouldShow(newShouldShow);
-    };
-    const listenerContainer =
-      scrollContainer === document.scrollingElement ? window : scrollContainer;
-    listenerContainer.addEventListener("scroll", scrollListener);
-    // Specify how to clean up after this effect:
-    return function cleanup() {
-      listenerContainer.removeEventListener("scroll", scrollListener);
-    };
-  }, [shouldShow, showAt, scrollContainer]);
-
-  const scrollToTop = () => {
-    const c = scrollContainer.scrollTop;
-    if (c > 0) {
-      window.requestAnimationFrame(scrollToTop);
-      scrollContainer.scrollTo(0, c - c / 8);
-    }
-  };
-
-  return (
-    <Transition in={shouldShow} timeout={duration}>
-      {state =>
-        state === "exited" ? null : (
-          <div style={{ position: "fixed", bottom: 25, right: 25, zIndex: 10 }}>
-            <Button
-              style={{
-                borderRadius: "50%",
-                ...defaultStyle,
-                ...transitionStyles[state]
-              }}
-              intent="primary"
-              icon="arrow-up"
-              large
-              onClick={scrollToTop}
-            />
-          </div>
-        )
-      }
-    </Transition>
-  );
-}
-
-export default ScrollToTop;

package/src/SimpleStepViz.js

@@ -1,22 +0,0 @@
-import React from "react";
-import { Icon } from "@blueprintjs/core";
-import classNames from "classnames";
-
-export default ({ steps, ...rest }) => (
-  <div style={{ display: "flex", justifyContent: "center" }}>
-    <ul className="bp3-breadcrumbs" {...rest}>
-      {steps.map(({ completed, active, text }, i) => (
-        <li key={i}>
-          <div
-            className={classNames("bp3-breadcrumb", {
-              "bp3-breadcrumb-current": active
-            })}
-          >
-            <Icon icon={completed ? "tick-circle" : undefined} />
-            {text}
-          </div>
-        </li>
-      ))}
-    </ul>
-  </div>
-);

package/src/Tag.js

@@ -1,112 +0,0 @@
-/* Copyright (C) 2018 TeselaGen Biotechnology, Inc. */
-import React from "react";
-import classNames from "classnames";
-import "./style.css";
-import { Tooltip } from "@blueprintjs/core";
-import { getTagColorStyle } from "./utils/tagUtils";
-import popoverOverflowModifiers from "./utils/popoverOverflowModifiers";
-
-function Tag({
-  name,
-  color,
-  tooltip,
-  selected,
-  secondarySelected,
-  hasSelection,
-  onDelete,
-  onClick,
-  clickable,
-  doNotFillWidth,
-  style = {}
-}) {
-  const sharedStyles = {
-    ...getTagColorStyle(color).style,
-    padding: "2px 5px"
-  };
-  const deleteButton = onDelete && (
-    <span
-      style={{
-        ...sharedStyles,
-        cursor: "pointer",
-        borderTopRightRadius: 3,
-        borderBottomRightRadius: 3
-      }}
-      className="delete-tag-button"
-      onClick={onDelete}
-    >
-      &#10005;
-    </span>
-  );
-
-  let nameToUse = name;
-  const nameTooLong = name.length > 40;
-  if (nameTooLong) {
-    nameToUse = name.slice(0, 40) + "...";
-  }
-  if (tooltip || nameTooLong) {
-    const content = (
-      <div>
-        {nameTooLong ? (
-          <div>
-            {name}
-            {tooltip ? ":" : null}
-          </div>
-        ) : null}
-        {tooltip ? <div>{tooltip}</div> : null}
-      </div>
-    );
-    nameToUse = (
-      <Tooltip content={content} modifiers={popoverOverflowModifiers}>
-        {nameToUse}
-      </Tooltip>
-    );
-  }
-
-  const tag = (
-    <React.Fragment>
-      <span
-        onClick={onClick}
-        className="tg-tag"
-        style={{
-          ...sharedStyles,
-          // will stop tags from growing tall
-          marginBottom: "auto",
-          borderRadius: 3,
-          whiteSpace: "nowrap",
-          wordBreak: "normal",
-          overflow: "hidden",
-          textOverflow: "ellipsis",
-
-          ...(onClick && { cursor: "pointer" }),
-          ...(onDelete && {
-            borderTopRightRadius: 0,
-            borderBottomRightRadius: 0
-          }),
-          ...(doNotFillWidth && { width: "fit-content" }),
-          ...(clickable && { cursor: "pointer" }),
-          ...style
-        }}
-      >
-        {nameToUse}
-      </span>
-      {deleteButton}
-    </React.Fragment>
-  );
-
-  if (hasSelection) {
-    return (
-      <div
-        className={classNames("tag-selection", {
-          selected,
-          "secondary-selected": secondarySelected
-        })}
-      >
-        {tag}
-      </div>
-    );
-  } else {
-    return tag;
-  }
-}
-
-export default Tag;

package/src/TagSelect/index.js

@@ -1,69 +0,0 @@
-import { Button, InputGroup, Popover } from "@blueprintjs/core";
-import React from "react";
-
-import Tag from "../Tag";
-import "./style.css";
-import { useState } from "react";
-import { itemListPredicate } from "../TgSelect";
-
-export default ({ value = {}, options = [], onChange }) => {
-  const [open, setOpen] = useState(false);
-  const [searchTerm, setSearchTerm] = useState("");
-
-  const filteredOptions = itemListPredicate(searchTerm, options, false);
-
-  return (
-    <Popover
-      isOpen={open}
-      onInteraction={setOpen}
-      content={
-        <div className="tag-select-popover">
-          <InputGroup
-            rightElement={
-              // clear button
-              searchTerm ? (
-                <Button
-                  icon="cross"
-                  minimal
-                  onClick={() => setSearchTerm("")}
-                />
-              ) : null
-            }
-            type="text"
-            placeholder="Search..."
-            autoFocus
-            value={searchTerm}
-            onChange={e => setSearchTerm(e.target.value)}
-          />
-          <div className="tag-select-popover-inner">
-            {filteredOptions.map(option => {
-              return (
-                <Tag
-                  key={option.name}
-                  onClick={() => {
-                    onChange(option);
-                    setOpen(false);
-                  }}
-                  clickable
-                  style={{ maxWidth: 150 }}
-                  {...convertTagVals(option)}
-                  doNotFillWidth
-                ></Tag>
-              );
-            })}
-          </div>
-        </div>
-      }
-    >
-      <Tag style={{ maxWidth: 150 }} clickable {...convertTagVals(value)}></Tag>
-    </Popover>
-  );
-};
-
-function convertTagVals(tagVals) {
-  return {
-    ...tagVals,
-
-    name: tagVals.name || tagVals.label
-  };
-}

package/src/TagSelect/style.css

@@ -1,13 +0,0 @@
-.tag-select-popover {
-  padding: 10px;
-}
-
-.tag-select-popover-inner {
-  max-height: 150px;
-  overflow: auto;
-  display: grid;
-  padding-top: 10px;
-  grid-column-gap: 5px;
-  row-gap: 8px;
-  grid-template-columns: max-content max-content;
-}

package/src/TgHtmlSelect/index.js

@@ -1,20 +0,0 @@
-import { HTMLSelect } from "@blueprintjs/core";
-import React from "react";
-import classNames from "classnames";
-
-// so far this component just makes the styling of the disabled html select
-// look like a regular html select with the selected option displayed
-// (instead of greyed out and without the ability to have tooltips working)
-const TgHTMLSelect = ({ disabled, ...rest }) => {
-  if (disabled) {
-    const opt = rest.options.find(o => o.value === rest.value);
-    return (
-      <div {...rest} className={classNames("bp3-html-select", rest.className)}>
-        {opt.label}
-      </div>
-    );
-  }
-  return <HTMLSelect {...rest}></HTMLSelect>;
-};
-
-export default TgHTMLSelect;