@teselagen/ui 0.0.9 → 0.0.12

package/src/HotkeysDialog/style.css

@@ -0,0 +1,54 @@
+.tg-hotkeys-dialog .bp3-tab-list {
+  /* border-top: 1px solid #ddd; */
+  display: flex;
+  justify-content: center;
+  padding-left: 10px;
+  margin-top: 5px;
+}
+
+.tg-hotkeys-dialog table {
+  table-layout: fixed;
+  margin: 0 5px 5px;
+  width: calc(100% - 10px);
+  border-spacing: 0;
+}
+
+.tg-hotkeys-dialog .bp3-tab-panel {
+  margin-top: 5px;
+  padding: 10px;
+}
+.tg-hotkeys-dialog thead,
+.tg-hotkeys-dialog tbody tr {
+  display: table;
+  width: 100%;
+  table-layout: fixed; /* even columns width , fix width of table too*/
+}
+
+.tg-hotkeys-dialog .tg-table-wrapper tbody {
+  display: block;
+  max-height: 55vh;
+  overflow-y: auto;
+}
+
+.tg-hotkeys-dialog th {
+  width: 50%;
+  font-weight: bold;
+  color: black;
+  border-bottom: 3px solid #ddd;
+}
+
+.tg-hotkeys-dialog tr:nth-child(2n) td {
+  background-color: #f8f8f8;
+}
+.bp3-dark .tg-hotkeys-dialog tr:nth-child(2n) td {
+  background-color: #3e4b6d;
+}
+
+.tg-hotkeys-dialog td,
+.tg-hotkeys-dialog th {
+  padding: 8px 12px;
+}
+
+.tg-hotkeys-dialog td:first-child {
+  border-right: 1px solid lightgrey;
+}

package/src/InfoHelper/index.js

@@ -0,0 +1,83 @@
+import React, { Component } from "react";
+import { Popover, Button, Tooltip, Icon } from "@blueprintjs/core";
+import classnames from "classnames";
+import "./style.css";
+import { popoverOverflowModifiers } from "..";
+
+export default class InfoHelper extends Component {
+  render() {
+    const {
+      className,
+      content,
+      children,
+      icon = "info-sign",
+      isPopover,
+      isButton,
+      size,
+      isInline,
+      clickable,
+      color,
+      noMarginTop,
+      popoverProps = {},
+      disabled,
+      displayToSide,
+      style,
+      ...rest
+    } = this.props;
+    const IconToUse = isButton ? Button : Icon;
+    const iconProps = {
+      icon,
+      color,
+      disabled
+    };
+    if (!isButton) iconProps.iconSize = size;
+
+    const IconInner = <IconToUse {...iconProps} {...rest} />;
+    let toReturn;
+    const toolTipOrPopoverProps = {
+      disabled:
+        disabled ||
+        (!isPopover &&
+          window.Cypress &&
+          !window.Cypress.allowInfoHelperTooltips),
+      popoverClassName: "tg-info-helper-popover bp3-tooltip",
+      content: content || children,
+      modifiers: popoverOverflowModifiers,
+      ...popoverProps
+    };
+    if (displayToSide) {
+      toReturn = (
+        <React.Fragment>
+          {IconInner}
+          <span style={{ paddingLeft: 5, fontStyle: "italic" }}>
+            {content || children}
+          </span>
+        </React.Fragment>
+      );
+    } else if (isPopover) {
+      toReturn = <Popover {...toolTipOrPopoverProps} target={IconInner} />;
+    } else {
+      toReturn = <Tooltip {...toolTipOrPopoverProps} target={IconInner} />;
+    }
+    const El = isInline ? "span" : "div";
+    return (
+      <El
+        style={{
+          ...(clickable ? { cursor: "pointer" } : {}),
+          ...(isInline ? {} : { display: "flex" }),
+          ...style
+        }}
+        className={classnames(
+          "info-helper-wrapper",
+          {
+            "info-helper-wrapper-noMarginTop": noMarginTop,
+            "info-helper-clickable": isPopover
+          },
+          className
+        )}
+      >
+        {toReturn}
+      </El>
+    );
+  }
+}

package/src/InfoHelper/style.css

@@ -0,0 +1,7 @@
+.bp3-popover.tg-info-helper-popover .bp3-popover-content {
+  max-width: 340px;
+}
+
+.info-helper-clickable .bp3-popover-target {
+  cursor: pointer;
+}

package/src/IntentText/index.js

@@ -0,0 +1,18 @@
+import React from "react";
+import { Classes } from "@blueprintjs/core";
+import classNames from "classnames";
+
+const intentToClass = {
+  danger: Classes.INTENT_DANGER,
+  warning: Classes.INTENT_WARNING,
+  success: Classes.INTENT_SUCCESS,
+  primary: Classes.INTENT_PRIMARY
+};
+
+export default function IntentText({ intent, text, children }) {
+  return (
+    <div className={classNames(Classes.FORM_GROUP, intentToClass[intent])}>
+      <div className={Classes.FORM_HELPER_TEXT}>{text || children}</div>
+    </div>
+  );
+}

package/src/Loading/index.js

@@ -0,0 +1,74 @@
+import React from "react";
+import DNALoader from "../DNALoader";
+import "./style.css";
+import { BounceLoader } from "@teselagen/bounce-loader";
+
+export default class Loading extends React.Component {
+  state = {
+    longerThan200MS: false
+  };
+
+  componentDidMount() {
+    this.timeoutId = setTimeout(() => {
+      this.setState({
+        longerThan200MS: true
+      });
+    }, 200);
+  }
+
+  componentWillUnmount() {
+    clearTimeout(this.timeoutId);
+  }
+
+  render() {
+    const {
+      loading,
+      style: userStyle,
+      className,
+      containerStyle = {},
+      children,
+      displayInstantly = false,
+      bounce = false,
+      withTimeout,
+      inDialog,
+      centeredInPage
+    } = this.props;
+    const { longerThan200MS } = this.state;
+    const style = {
+      ...userStyle,
+      ...(inDialog && { minHeight: 120 })
+    };
+    const LoaderComp = bounce || inDialog ? BounceLoader : DNALoader;
+    if (loading || !children) {
+      if (
+        !displayInstantly &&
+        !longerThan200MS &&
+        ((!bounce && !inDialog) || withTimeout)
+      ) {
+        return <div />;
+      }
+      return (
+        <div
+          className="tg-loader-container tg-flex justify-center align-center"
+          style={{
+            width: "100%",
+            ...containerStyle,
+            ...(centeredInPage && {
+              width: undefined,
+              zIndex: 20,
+              height: 10,
+              position: "fixed",
+              top: "50%",
+              left: "50%",
+              transform: "translate(-50%, 0)"
+            })
+          }}
+        >
+          <LoaderComp style={style} className={className} />
+        </div>
+      );
+    } else {
+      return children || null;
+    }
+  }
+}

package/src/Loading/style.css

@@ -0,0 +1,4 @@
+.tg-loader-container {
+  height: 100%;
+  align-self: center;
+}

package/src/MatchHeaders.js

@@ -0,0 +1,223 @@
+import React from "react";
+import { Callout, Card, Intent } from "@blueprintjs/core";
+import immer, { setAutoFreeze } from "immer";
+import { flatMap, forEach } from "lodash";
+import { ReactSelectField } from "./FormComponents";
+import showConfirmationDialog from "./showConfirmationDialog";
+import { startCase } from "lodash";
+import { typeToCommonType } from "./typeToCommonType";
+import { camelCase } from "lodash";
+
+setAutoFreeze(false);
+export function MatchHeaders({
+  onMultiFileUploadSubmit,
+  doAllFilesHaveSameHeaders,
+  csvValidationIssue,
+  searchResults,
+  matchedHeaders,
+  userSchema,
+  reduxFormEntitiesArray,
+  changeForm,
+  datatableFormName,
+  datatableFormNames: _datatableFormNames,
+  setFilesWIssues,
+  filesWIssues,
+  fileIndex,
+}) {
+  const datatableFormNames = _datatableFormNames || [datatableFormName];
+  const flippedMatchedHeaders = {};
+
+  forEach(matchedHeaders, (v, k) => {
+    if (v) flippedMatchedHeaders[v] = k;
+  });
+  return (
+    <div style={{ maxWidth: 500 }}>
+      {!onMultiFileUploadSubmit && (
+        <Callout style={{ width: "fit-content" }} intent="warning">
+          {csvValidationIssue}
+        </Callout>
+      )}
+      <br></br>
+      <tr
+        style={{
+          display: "flex",
+          minHeight: 50,
+          alignItems: "center",
+          justifyContent: "space-between",
+        }}
+      >
+        <td
+          style={{
+            width: 200,
+            marginLeft: 20,
+            display: "flex",
+            fontWeight: "bold",
+          }}
+        >
+          Accepted Headers
+        </td>
+        <td
+          style={{
+            width: 200,
+            marginLeft: 20,
+            display: "flex",
+            fontWeight: "bold",
+          }}
+        >
+          Your Headers
+        </td>
+        <td
+          style={{
+            fontWeight: "bold",
+            marginLeft: 30,
+          }}
+        >
+          Data Preview
+        </td>
+      </tr>
+      {searchResults.map(({ path, displayName, type }, i) => {
+        const userMatchedHeader = matchedHeaders[path];
+        const opts = flatMap(userSchema.fields, ({ path: pathInner }) => {
+          if (
+            pathInner !== userMatchedHeader &&
+            flippedMatchedHeaders[pathInner]
+          ) {
+            return [];
+          }
+          return {
+            value: pathInner,
+            label: pathInner,
+          };
+        }).sort((a, b) => {
+          const ra = searchResults[i].matches
+            .map((m) => m.item.path)
+            .indexOf(a.value);
+          const rb = searchResults[i].matches
+            .map((m) => m.item.path)
+            .indexOf(b.value);
+          if (!ra) return -1;
+          if (!rb) return 1;
+          return rb - ra;
+        });
+        return (
+          <Card style={{ padding: 2 }} key={i}>
+            <table>
+              <tbody>
+                <tr
+                  style={{
+                    display: "flex",
+                    minHeight: 50,
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                  }}
+                >
+                  <td
+                    style={{
+                      width: 200,
+                      display: "flex",
+                    }}
+                  >
+                    <div
+                      style={{
+                        paddingTop: 2,
+                        marginLeft: 15,
+                        fontSize: 15,
+                      }}
+                    >
+                      <span
+                        data-tip={`Column Type: ${
+                          typeToCommonType[type || "string"] || type
+                        }`}
+                      >
+                        {displayName || startCase(camelCase(path))}
+                      </span>
+                    </div>
+                  </td>
+                  <td style={{ width: 200 }}>
+                    <ReactSelectField
+                      noMarginBottom
+                      tooltipError
+                      beforeOnChange={async () => {
+                        const clearEntities = () => {
+                          datatableFormNames.forEach((name) => {
+                            changeForm(name, "reduxFormEntities", null);
+                          });
+                        };
+                        if (reduxFormEntitiesArray.some((r) => r?.isDirty)) {
+                          //when the column mapping changes, update the column in reduxFormEntities (if reduxFormEntities exists)
+                          const doAction = await showConfirmationDialog({
+                            text: "Are you sure you want to edit the columm mapping? This will clear any changes you've already made to the table data",
+                            intent: Intent.DANGER,
+                            confirmButtonText: "Yes",
+                            cancelButtonText: "No",
+                            // canEscapeKeyCancel: true //this is false by default
+                          });
+                          if (doAction) {
+                            clearEntities();
+                          } else {
+                            return { stopEarly: true };
+                          }
+                        } else {
+                          clearEntities();
+                          return { stopEarly: false };
+                        }
+                      }}
+                      onChange={(val) => {
+                        setFilesWIssues(
+                          immer(filesWIssues, (files) => {
+                            files.forEach((f, i) => {
+                              const isCurrentFile = fileIndex === i;
+                              if (isCurrentFile || doAllFilesHaveSameHeaders) {
+                                f.matchedHeaders[path] = val;
+                              }
+                            });
+                          })
+                        );
+                      }}
+                      name={path}
+                      // isRequired={!allowEmpty && defaultValue === undefined}
+                      defaultValue={userMatchedHeader}
+                      options={opts}
+                    ></ReactSelectField>
+                  </td>
+                  <td
+                    style={{
+                      marginTop: 10,
+                      marginBottom: 10,
+                      marginLeft: 20,
+                      fontSize: 10 /* color: Colors.RED1 */,
+                    }}
+                  >
+                    {userMatchedHeader &&
+                      [
+                        // { [userMatchedHeader]: "Preview:" },
+                        ...(userSchema.userData?.slice(0, 3) || []),
+                        // { [userMatchedHeader]: "..." }
+                      ].map((row, i) => {
+                        return (
+                          <div
+                            style={{
+                              maxWidth: 70,
+                              overflow: "hidden",
+                              textOverflow: "ellipsis",
+                              whiteSpace: "nowrap",
+                            }}
+                            key={i}
+                          >
+                            {row?.[userMatchedHeader] || ""}
+                          </div>
+                        );
+                      })}
+                    {/* {!allowEmpty &&
+                          defaultValue === undefined &&
+                          "(Required)"} */}
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </Card>
+        );
+      })}
+    </div>
+  );
+}