@teselagen/ui 0.7.34 → 0.7.36

package/src/HotkeysDialog/index.js

@@ -1,79 +0,0 @@
-import React from "react";
-import {
-  Dialog,
-  Tab,
-  Tabs,
-  KeyCombo,
-  Classes /*, Tooltip*/
-} from "@blueprintjs/core";
-// import { startCase } from "lodash-es";
-import classNames from "classnames";
-import {
-  getHotkeyProps /*, hotkeysById, comboToLabel*/
-} from "../utils/hotkeyUtils";
-
-import "./style.css";
-
-export default function HotkeysDialog(props) {
-  if (!props.hotkeySets) {
-    console.error("Missing hotkeySets in HotkeysDialog");
-    return null;
-  }
-  const sections = Object.keys(props.hotkeySets);
-  return (
-    <Dialog
-      isOpen={props.isOpen}
-      onClose={props.onClose}
-      title={props.dialogTitle || "Keyboard Shortcuts"}
-    >
-      <Tabs className="tg-hotkeys-dialog">
-        {sections.map(name => (
-          <Tab
-            key={name}
-            id={name}
-            title={sections.length === 1 ? undefined : name}
-            panel={
-              <div className="tg-table-wrapper">
-                <table
-                  className={classNames(
-                    Classes.HTML_TABLE,
-                    Classes.HTML_TABLE_STRIPED,
-                    Classes.HTML_TABLE_BORDERED
-                  )}
-                >
-                  <thead>
-                    <tr>
-                      <th>Action</th>
-                      <th>Shortcut</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {Object.keys(props.hotkeySets[name]).map(id => {
-                      const def = getHotkeyProps(
-                        props.hotkeySets[name][id],
-                        id
-                      );
-                      return (
-                        <tr key={id}>
-                          <td>{def.label}</td>
-                          <td>
-                            <KeyCombo combo={def.combo} />
-                            {/* <Tooltip
-                              content={comboToLabel(def.combo, false)}
-                            >
-                              {comboToLabel(def.combo)}
-                            </Tooltip> */}
-                          </td>
-                        </tr>
-                      );
-                    })}
-                  </tbody>
-                </table>
-              </div>
-            }
-          />
-        ))}
-      </Tabs>
-    </Dialog>
-  );
-}

package/src/HotkeysDialog/style.css

@@ -1,54 +0,0 @@
-.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

@@ -1,78 +0,0 @@
-import React from "react";
-import { Popover, Button, Tooltip, Icon } from "@blueprintjs/core";
-import classnames from "classnames";
-import "./style.css";
-import { popoverOverflowModifiers } from "..";
-
-export default ({
-  className,
-  content,
-  children,
-  icon = "info-sign",
-  isPopover,
-  isButton,
-  size,
-  isInline,
-  clickable,
-  color,
-  noMarginTop,
-  popoverProps = {},
-  disabled,
-  displayToSide,
-  style,
-  ...rest
-}) => {
-  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

@@ -1,7 +0,0 @@
-.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

@@ -1,18 +0,0 @@
-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

@@ -1,70 +0,0 @@
-import React, { useState, useEffect } from "react";
-import DNALoader from "../DNALoader";
-import "./style.css";
-import { BounceLoader } from "../BounceLoader";
-
-const Loading = ({
-  loading,
-  style: userStyle,
-  className,
-  containerStyle = {},
-  children,
-  displayInstantly = false,
-  bounce = false,
-  withTimeout,
-  inDialog,
-  centeredInPage
-}) => {
-  const [longerThan200MS, setLongerThan200MS] = useState(false);
-
-  useEffect(() => {
-    const timeoutId = setTimeout(() => {
-      setLongerThan200MS(true);
-    }, 200);
-
-    return () => {
-      clearTimeout(timeoutId);
-    };
-  }, []);
-
-  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;
-  }
-};
-
-export default Loading;

package/src/Loading/style.css

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

package/src/MatchHeaders.js

@@ -1,234 +0,0 @@
-import React, { useMemo } from "react";
-import { Callout, Card, Intent } from "@blueprintjs/core";
-import immer, { setAutoFreeze } from "immer";
-import { flatMap, forEach } from "lodash-es";
-import { ReactSelectField } from "./FormComponents";
-import showConfirmationDialog from "./showConfirmationDialog";
-import { startCase } from "lodash-es";
-import { typeToCommonType } from "./typeToCommonType";
-import { camelCase } from "lodash-es";
-import { change } from "redux-form";
-import { useDispatch } from "react-redux";
-
-setAutoFreeze(false);
-export const MatchHeaders = ({
-  csvValidationIssue,
-  datatableFormName,
-  datatableFormNames: _datatableFormNames,
-  doAllFilesHaveSameHeaders,
-  fileIndex,
-  filesWIssues,
-  ignoredHeadersMsg,
-  matchedHeaders,
-  onMultiFileUploadSubmit,
-  reduxFormEntitiesArray,
-  searchResults,
-  setFilesWIssues,
-  userSchema
-}) => {
-  const datatableFormNames = _datatableFormNames || [datatableFormName];
-  const dispatch = useDispatch();
-  const flippedMatchedHeaders = useMemo(() => {
-    const _flippedMatchedHeaders = {};
-    forEach(matchedHeaders, (v, k) => {
-      if (v) _flippedMatchedHeaders[v] = k;
-    });
-    return _flippedMatchedHeaders;
-  }, [matchedHeaders]);
-
-  return (
-    <div style={{ maxWidth: 500 }}>
-      {!onMultiFileUploadSubmit && (
-        <Callout style={{ width: "fit-content" }} intent="warning">
-          {csvValidationIssue}
-        </Callout>
-      )}
-      {!onMultiFileUploadSubmit && ignoredHeadersMsg && (
-        <Callout style={{ width: "fit-content" }} intent="warning">
-          {ignoredHeadersMsg}
-        </Callout>
-      )}
-      <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={`field-${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 => {
-                            dispatch(change(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}
-                    />
-                  </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={`userMatchedHeader-${i}`}
-                          >
-                            {row?.[userMatchedHeader] || ""}
-                          </div>
-                        );
-                      })}
-                    {/* {!allowEmpty &&
-                          defaultValue === undefined &&
-                          "(Required)"} */}
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </Card>
-        );
-      })}
-    </div>
-  );
-};