@teselagen/ui 0.7.33-beta.1 → 0.7.33-beta.2

package/src/Tag.js

@@ -0,0 +1,112 @@
+/* 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/ThComponent.js

@@ -0,0 +1,44 @@
+import React from "react";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import classNames from "classnames";
+
+export const ThComponent = ({
+  toggleSort,
+  immovable,
+  className,
+  children,
+  style,
+  columnindex,
+  ...rest
+}) => {
+  const index = columnindex ?? -1;
+  const { attributes, listeners, setNodeRef, transform, transition } =
+    useSortable({
+      id: `${index}`,
+      disabled: immovable === "true"
+    });
+
+  const sortStyles = {
+    transform: CSS.Transform.toString(transform),
+    transition
+  };
+
+  return (
+    <div
+      style={{ ...sortStyles, ...style }}
+      ref={setNodeRef}
+      {...attributes}
+      {...listeners}
+      className={classNames("rt-th", className)}
+      onClick={e => toggleSort && toggleSort(e)}
+      role="columnheader"
+      tabIndex="-1" // Resolves eslint issues without implementing keyboard navigation incorrectly
+      columnindex={columnindex}
+      index={index}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+};

package/src/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/UploadCsvWizard.css

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