@teselagen/ui 0.0.11 → 0.0.12

package/src/TgSuggest/index.js

@@ -0,0 +1,121 @@
+import { Suggest } from "@blueprintjs/select";
+import { Keys } from "@blueprintjs/core";
+import React from "react";
+import classNames from "classnames";
+import { itemListPredicate } from "../TgSelect";
+
+class TgSuggest extends React.Component {
+  static defaultProps = {
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onChange: () => {},
+    options: [],
+    value: undefined
+  };
+  itemRenderer = (i = "", { index, handleClick, modifiers }) => {
+    return (
+      <div //we specifically don't use a BP MenuItem component here because the menu item is too slow when 100s are loaded and will cause the component to lag
+        onClick={handleClick}
+        key={index}
+        className={classNames(
+          "tg-select-option bp3-menu-item bp3-fill bp3-text-overflow-ellipsis",
+          {
+            "bp3-active": modifiers.active
+          }
+        )}
+      >
+        {i}
+      </div>
+    );
+  };
+
+  handleItemSelect = item => {
+    const { onChange } = this.props;
+    this.input && this.input.blur();
+    return onChange(item);
+  };
+
+  itemListPredicate = (queryString, item) => {
+    const { isSimpleSearch } = this.props;
+    return itemListPredicate(queryString, item, isSimpleSearch);
+  };
+
+  onQueryChange = query => {
+    const { onChange } = this.props;
+    onChange(query);
+  };
+
+  renderInputValue = item => item;
+
+  render() {
+    const {
+      multi,
+      options,
+      notCreateable,
+      value,
+      optionRenderer, //pull this one out here so it doesn't get passsed along
+      noResultsText,
+      inputProps,
+      placeholder,
+      isLoading,
+      onBlur,
+      disabled,
+      popoverProps,
+      ...rest
+    } = this.props;
+
+    return (
+      <Suggest
+        closeOnSelect
+        items={options || []}
+        query={value}
+        popoverProps={{
+          minimal: true,
+          className: classNames("tg-select", {
+            "tg-single-select": !multi
+          }),
+          wrapperTagName: "div",
+          usePortal: false,
+          canEscapeKeyClose: true,
+          ...popoverProps
+        }}
+        onKeyDown={e => {
+          const { which } = e;
+          if (which === Keys.ENTER) {
+            e.preventDefault();
+            e.stopPropagation(); //this prevents the dialog it is in from closing
+          }
+          if (which === Keys.ESCAPE || which === Keys.TAB) {
+            // By default the escape key will not trigger a blur on the
+            // input element. It must be done explicitly.
+            if (this.input != null) {
+              this.input.blur();
+            }
+            e.preventDefault();
+            e.stopPropagation(); //this prevents dialog's it is in from closing
+          }
+        }}
+        {...{
+          onItemSelect: this.handleItemSelect,
+          noResults: null,
+          resetOnSelect: false,
+          onQueryChange: this.onQueryChange,
+          itemRenderer: this.itemRenderer,
+          itemListPredicate: this.itemListPredicate,
+          selectedItem: value,
+          inputValueRenderer: this.renderInputValue,
+          inputProps: {
+            inputRef: n => {
+              if (n) this.input = n;
+            },
+            placeholder: placeholder || "Type here...",
+            disabled: disabled, // tg: adding isLoading will cause the input to be blurred when using generic select asReactSelect (don't do it),
+            intent: this.props.intent,
+            ...inputProps
+          },
+          ...rest
+        }}
+      />
+    );
+  }
+}
+export default TgSuggest;

package/src/Timeline/TimelineEvent.js

@@ -0,0 +1,31 @@
+import React from "react";
+import dayjs from "dayjs";
+import { Classes } from "@blueprintjs/core";
+import classNames from "classnames";
+import relativeTime from "dayjs/plugin/relativeTime";
+
+dayjs.extend(relativeTime);
+
+function TimelineEvent({ date, children }) {
+  return (
+    <div className="tg-timeline-event">
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center"
+        }}
+      >
+        <div className="tg-timeline-circle" />
+        {children}
+        <div
+          style={{ marginLeft: 5 }}
+          className={classNames(Classes.TEXT_SMALL, Classes.TEXT_MUTED)}
+        >
+          ({dayjs(date).fromNow()})
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default TimelineEvent;

package/src/Timeline/index.js

@@ -0,0 +1,22 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import "./style.css";
+
+class Timeline extends Component {
+  static propTypes = {
+    children: PropTypes.arrayOf(PropTypes.element)
+  };
+
+  render() {
+    return (
+      <div className="tg-timeline">
+        {this.props.children.length > 1 && <div className="tg-timeline-line" />}
+        {this.props.children}
+      </div>
+    );
+  }
+}
+
+export { default as TimelineEvent } from "./TimelineEvent";
+
+export default Timeline;

package/src/Timeline/style.css

@@ -0,0 +1,29 @@
+/* Copyright (C) 2018 TeselaGen Biotechnology, Inc. */
+.tg-timeline {
+  position: relative;
+  white-space: nowrap;
+}
+
+.tg-timeline-line {
+  position: absolute;
+  height: 90%;
+  border-left: 2px solid #bfccd6;
+  top: 3px;
+  left: 5px;
+}
+
+.tg-timeline-event {
+  margin-bottom: 15px;
+}
+
+.tg-timeline-circle {
+  width: 12px;
+  min-width: 12px;
+  height: 12px;
+  min-height: 12px;
+  z-index: 1;
+  margin-right: 10px;
+  border-radius: 100px;
+  background: #e1e8ed;
+  border: 2px solid #137cbd;
+}

package/src/UploadCsvWizard.css

@@ -0,0 +1,4 @@
+.rg-celleditor-input,
+.rg-celleditor input {
+  border: none;
+}