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

package/src/BounceLoader/style.css

@@ -0,0 +1,45 @@
+.tg-bounce-loader {
+  width: 50px;
+  height: 40px;
+  text-align: center;
+  font-size: 10px;
+  display: flex;
+  align-items: center;
+}
+
+.tg-bounce-loader > div {
+  background-color: #006cab;
+  height: 100%;
+  max-height: 30px;
+  width: 6px;
+  display: inline-block;
+  margin-right: 3px;
+  animation: sk-stretchdelay 1.2s infinite ease-in-out;
+}
+
+.tg-bounce-loader .rect2 {
+  animation-delay: -1.1s;
+}
+
+.tg-bounce-loader .rect3 {
+  animation-delay: -1s;
+}
+
+.tg-bounce-loader .rect4 {
+  animation-delay: -0.9s;
+}
+
+.tg-bounce-loader .rect5 {
+  animation-delay: -0.8s;
+}
+
+@keyframes sk-stretchdelay {
+  0%,
+  40%,
+  100% {
+    transform: scaleY(0.4);
+  }
+  20% {
+    transform: scaleY(1);
+  }
+}

package/src/CollapsibleCard/index.js

@@ -0,0 +1,68 @@
+import React, { useState } from "react";
+import { Button, Classes, Icon } from "@blueprintjs/core";
+import classNames from "classnames";
+import "./style.css";
+
+export default function CollapsibleCard({
+  title,
+  icon,
+  openTitleElements,
+  noCard = false,
+  className,
+  style,
+  children,
+  initialClosed = false,
+  toggle,
+  isOpen
+}) {
+  let [open, setOpen] = useState(!initialClosed);
+  if (isOpen !== undefined) open = isOpen;
+
+  const toggleCardInfo = () => {
+    if (toggle) toggle();
+    else {
+      setOpen(!open);
+    }
+  };
+
+  return (
+    <div
+      className={classNames({ "tg-card": !noCard, open }, className)}
+      style={{
+        paddingTop: 10,
+        paddingBottom: 10,
+        paddingLeft: 15,
+        paddingRight: 15,
+        ...style
+      }}
+    >
+      <div className="tg-card-header" style={{ marginBottom: 8 }}>
+        <div className="tg-card-header-title">
+          {icon && <Icon icon={icon} />}
+          <h6
+            style={{
+              marginBottom: 0,
+              marginRight: 10,
+              marginLeft: 10
+            }}
+          >
+            {title}
+          </h6>
+          <div>{open && openTitleElements}</div>
+        </div>
+        <div>
+          <Button
+            icon={open ? "minimize" : "maximize"}
+            className={classNames(
+              Classes.MINIMAL,
+              "info-btn",
+              "tg-collapse-toggle"
+            )}
+            onClick={toggleCardInfo}
+          />
+        </div>
+      </div>
+      {open && children}
+    </div>
+  );
+}

package/src/CollapsibleCard/style.css

@@ -0,0 +1,23 @@
+/* Use in the place of .bp3-card */
+.tg-card {
+  padding: 20px;
+  margin-bottom: 20px;
+  border-radius: 5px;
+  background: white;
+  box-shadow:
+    0 1px 3px rgba(0, 0, 0, 0.12),
+    0 1px 2px rgba(0, 0, 0, 0.18);
+}
+
+.tg-card-header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.tg-card-header-title {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}

package/src/DNALoader/index.js

@@ -0,0 +1,20 @@
+import React from "react";
+import classNames from "classnames";
+import "./style.css";
+
+export default function DNALoader({ style, className }) {
+  return (
+    <div className={classNames("dna-loader", className)} style={style}>
+      <div className="nucleobase" />
+      <div className="nucleobase" />
+      <div className="nucleobase" />
+      <div className="nucleobase" />
+      <div className="nucleobase" />
+      <div className="nucleobase" />
+      <div className="nucleobase" />
+      <div className="nucleobase" />
+      <div className="nucleobase" />
+      <div className="nucleobase" />
+    </div>
+  );
+}

package/src/DNALoader/style.css

@@ -0,0 +1,251 @@
+.dna-loader {
+  display: inline-block;
+  position: relative;
+  transform: scale(0.45);
+}
+
+.nucleobase {
+  display: inline-block;
+  position: relative;
+  vertical-align: middle;
+}
+
+.nucleobase:not(:last-child) {
+  margin-right: 4.86vh;
+}
+
+.nucleobase:before,
+.nucleobase:after {
+  content: "";
+  display: inline-block;
+  width: 3vh;
+  height: 3vh;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.nucleobase:nth-child(10) {
+  animation-delay: -1.869s;
+}
+
+.nucleobase:nth-child(10):before {
+  animation: animBefore 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
+  animation-delay: -1.869s;
+  background-color: #339bb9;
+}
+
+.nucleobase:nth-child(10):after {
+  animation: animAfter 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
+  animation-delay: -1.869s;
+  background-color: #006cab;
+}
+
+.nucleobase:nth-child(9) {
+  animation-delay: -3.738s;
+}
+
+.nucleobase:nth-child(9):before {
+  animation: animBefore 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
+  animation-delay: -3.738s;
+  background-color: #339bb9;
+}
+
+.nucleobase:nth-child(9):after {
+  animation: animAfter 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
+  animation-delay: -3.738s;
+  background-color: #006cab;
+}
+
+.nucleobase:nth-child(8) {
+  animation-delay: -5.607s;
+}
+
+.nucleobase:nth-child(8):before {
+  animation: animBefore 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
+  animation-delay: -5.607s;
+  background-color: #339bb9;
+}
+
+.nucleobase:nth-child(8):after {
+  animation: animAfter 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
+  animation-delay: -5.607s;
+  background-color: #006cab;
+}
+
+.nucleobase:nth-child(7) {
+  animation-delay: -7.476s;
+}
+
+.nucleobase:nth-child(7):before {
+  animation: animBefore 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
+  animation-delay: -7.476s;
+  background-color: #339bb9;
+}
+
+.nucleobase:nth-child(7):after {
+  animation: animAfter 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
+  animation-delay: -7.476s;
+  background-color: #006cab;
+}
+
+.nucleobase:nth-child(6) {
+  animation-delay: -9.345s;
+}
+
+.nucleobase:nth-child(6):before {
+  animation: animBefore 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
+  animation-delay: -9.345s;
+  background-color: #339bb9;
+}
+
+.nucleobase:nth-child(6):after {
+  animation: animAfter 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
+  animation-delay: -9.345s;
+  background-color: #006cab;
+}
+
+.nucleobase:nth-child(5) {
+  animation-delay: -11.214s;
+}
+
+.nucleobase:nth-child(5):before {
+  animation: animBefore 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
+  animation-delay: -11.214s;
+  background-color: #339bb9;
+}
+
+.nucleobase:nth-child(5):after {
+  animation: animAfter 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
+  animation-delay: -11.214s;
+  background-color: #006cab;
+}
+
+.nucleobase:nth-child(4) {
+  animation-delay: -13.083s;
+}
+
+.nucleobase:nth-child(4):before {
+  animation: animBefore 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
+  animation-delay: -13.083s;
+  background-color: #339bb9;
+}
+
+.nucleobase:nth-child(4):after {
+  animation: animAfter 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
+  animation-delay: -13.083s;
+  background-color: #006cab;
+}
+
+.nucleobase:nth-child(3) {
+  animation-delay: -14.952s;
+}
+
+.nucleobase:nth-child(3):before {
+  animation: animBefore 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
+  animation-delay: -14.952s;
+  background-color: #339bb9;
+}
+
+.nucleobase:nth-child(3):after {
+  animation: animAfter 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
+  animation-delay: -14.952s;
+  background-color: #006cab;
+}
+
+.nucleobase:nth-child(2) {
+  animation-delay: -16.821s;
+}
+
+.nucleobase:nth-child(2):before {
+  animation: animBefore 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
+  animation-delay: -16.821s;
+  background-color: #339bb9;
+}
+
+.nucleobase:nth-child(2):after {
+  animation: animAfter 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
+  animation-delay: -16.821s;
+  background-color: #006cab;
+}
+
+.nucleobase:nth-child(1) {
+  animation-delay: -18.69s;
+}
+
+.nucleobase:nth-child(1):before {
+  animation: animBefore 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
+  animation-delay: -18.69s;
+  background-color: #339bb9;
+}
+
+.nucleobase:nth-child(1):after {
+  animation: animAfter 2.1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
+  animation-delay: -18.69s;
+  background-color: #006cab;
+}
+
+@keyframes animBefore {
+  0% {
+    top: -6vh;
+    z-index: 1;
+  }
+  25% {
+    transform: scale(1.2);
+    z-index: 1;
+  }
+  50% {
+    top: 6vh;
+    z-index: -1;
+  }
+  75% {
+    background-color: #5bc0de;
+    transform: scale(0.8);
+    z-index: -1;
+  }
+  100% {
+    top: -6vh;
+    z-index: -1;
+  }
+}
+
+@keyframes animAfter {
+  0% {
+    top: 6vh;
+    z-index: -1;
+  }
+  25% {
+    background-color: #055e75;
+    transform: scale(0.8);
+    z-index: -1;
+  }
+  50% {
+    top: -6vh;
+    z-index: 1;
+  }
+  75% {
+    transform: scale(1.2);
+    z-index: 1;
+  }
+  100% {
+    top: 6vh;
+    z-index: 1;
+  }
+}
+
+@keyframes animDotBar {
+  0% {
+    height: 8.25vh;
+  }
+  25% {
+    height: 0;
+  }
+  50% {
+    height: 8.25vh;
+  }
+  75% {
+    height: 0;
+  }
+  100% {
+    height: 8.25vh;
+  }
+}

package/src/{Columns.js → DataTable/Columns.js}

@@ -33,10 +33,10 @@ import getTextFromEl from "../utils/getTextFromEl";
 import rowClick, { finalizeSelection } from "./utils/rowClick";
 import { editCellHelper } from "./editCellHelper";
 import { getCellVal } from "./getCellVal";
-import { getCCDisplayName } from "./utils/queryParams";
 import { useDispatch } from "react-redux";
 import { change as _change } from "redux-form";
 import { RenderCell } from "./RenderCell";
+import { getCCDisplayName } from "./utils/tableQueryParamsToHasuraClauses";
 
 dayjs.extend(localizedFormat);
 

package/src/{DisplayOptions.js → DataTable/DisplayOptions.js}

@@ -10,7 +10,7 @@ import {
   Popover,
   Switch
 } from "@blueprintjs/core";
-import { getCCDisplayName } from "./utils/queryParams";
+import { getCCDisplayName } from "./utils/tableQueryParamsToHasuraClauses";
 
 const DisplayOptions = ({
   compact,