@teselagen/ui 0.6.5 → 0.7.1

package/src/FormComponents/tryToMatchSchemas.js

@@ -14,13 +14,8 @@ const getSchema = data => ({
     return { path, type: "string" };
   }),
   userData: data
-  // userData: data.map((d) => {
-  //   if (!d.id) {
-  //     d.id = nanoid();
-  //   }
-  //   return d
-  // })
 });
+
 export default async function tryToMatchSchemas({
   incomingData,
   validateAgainstSchema

package/src/MatchHeaders.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { Callout, Card, Intent } from "@blueprintjs/core";
 import immer, { setAutoFreeze } from "immer";
 import { flatMap, forEach } from "lodash-es";
@@ -7,30 +7,35 @@ 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 function MatchHeaders({
-  onMultiFileUploadSubmit,
-  doAllFilesHaveSameHeaders,
+export const MatchHeaders = ({
   csvValidationIssue,
+  datatableFormName,
+  datatableFormNames: _datatableFormNames,
+  doAllFilesHaveSameHeaders,
+  fileIndex,
+  filesWIssues,
   ignoredHeadersMsg,
-  searchResults,
   matchedHeaders,
-  userSchema,
+  onMultiFileUploadSubmit,
   reduxFormEntitiesArray,
-  changeForm,
-  datatableFormName,
-  datatableFormNames: _datatableFormNames,
+  searchResults,
   setFilesWIssues,
-  filesWIssues,
-  fileIndex
-}) {
+  userSchema
+}) => {
   const datatableFormNames = _datatableFormNames || [datatableFormName];
-  const flippedMatchedHeaders = {};
+  const dispatch = useDispatch();
+  const flippedMatchedHeaders = useMemo(() => {
+    const _flippedMatchedHeaders = {};
+    forEach(matchedHeaders, (v, k) => {
+      if (v) _flippedMatchedHeaders[v] = k;
+    });
+    return _flippedMatchedHeaders;
+  }, [matchedHeaders]);
 
-  forEach(matchedHeaders, (v, k) => {
-    if (v) flippedMatchedHeaders[v] = k;
-  });
   return (
     <div style={{ maxWidth: 500 }}>
       {!onMultiFileUploadSubmit && (
@@ -43,7 +48,7 @@ export function MatchHeaders({
           {ignoredHeadersMsg}
         </Callout>
       )}
-      <br></br>
+      <br />
       <tr
         style={{
           display: "flex",
@@ -106,7 +111,7 @@ export function MatchHeaders({
           return rb - ra;
         });
         return (
-          <Card style={{ padding: 2 }} key={i}>
+          <Card style={{ padding: 2 }} key={`field-${i}`}>
             <table>
               <tbody>
                 <tr
@@ -146,7 +151,7 @@ export function MatchHeaders({
                       beforeOnChange={async () => {
                         const clearEntities = () => {
                           datatableFormNames.forEach(name => {
-                            changeForm(name, "reduxFormEntities", null);
+                            dispatch(change(name, "reduxFormEntities", null));
                           });
                         };
                         if (reduxFormEntitiesArray.some(r => r?.isDirty)) {
@@ -184,7 +189,7 @@ export function MatchHeaders({
                       // isRequired={!allowEmpty && defaultValue === undefined}
                       defaultValue={userMatchedHeader}
                       options={opts}
-                    ></ReactSelectField>
+                    />
                   </td>
                   <td
                     style={{
@@ -208,7 +213,7 @@ export function MatchHeaders({
                               textOverflow: "ellipsis",
                               whiteSpace: "nowrap"
                             }}
-                            key={i}
+                            key={`userMatchedHeader-${i}`}
                           >
                             {row?.[userMatchedHeader] || ""}
                           </div>
@@ -226,4 +231,4 @@ export function MatchHeaders({
       })}
     </div>
   );
-}
+};

package/src/SimpleStepViz.js

@@ -1,26 +1,22 @@
+import React from "react";
 import { Icon } from "@blueprintjs/core";
 import classNames from "classnames";
-import React from "react";
 
-export default function SimpleStepViz({ steps, ...rest }) {
-  return (
-    <div style={{ display: "flex", justifyContent: "center" }}>
-      <ul className="bp3-breadcrumbs" {...rest}>
-        {steps.map(({ completed, active, text }, i) => {
-          return (
-            <li key={i}>
-              <div
-                className={classNames("bp3-breadcrumb", {
-                  "bp3-breadcrumb-current": active
-                })}
-              >
-                <Icon icon={completed ? "tick-circle" : undefined}></Icon>
-                {text}
-              </div>
-            </li>
-          );
-        })}
-      </ul>
-    </div>
-  );
-}
+export default ({ steps, ...rest }) => (
+  <div style={{ display: "flex", justifyContent: "center" }}>
+    <ul className="bp3-breadcrumbs" {...rest}>
+      {steps.map(({ completed, active, text }, i) => (
+        <li key={i}>
+          <div
+            className={classNames("bp3-breadcrumb", {
+              "bp3-breadcrumb-current": active
+            })}
+          >
+            <Icon icon={completed ? "tick-circle" : undefined} />
+            {text}
+          </div>
+        </li>
+      ))}
+    </ul>
+  </div>
+);

package/src/TgSelect/index.js

@@ -126,7 +126,7 @@ class TgSelect extends React.Component {
     e.preventDefault();
     let newValue = null;
     if (multi) {
-      newValue = filter(value, obj => obj.disabled) || [];
+      newValue = filter(value, obj => obj?.disabled) || [];
     } else if (value && value.disabled) {
       newValue = value;
     }
@@ -231,7 +231,7 @@ class TgSelect extends React.Component {
         text={`Create "${query}"`}
         active={active}
         onClick={(...args) => {
-          const shouldStopEarly = this.props.onCreateNewOption(query);
+          const shouldStopEarly = this.props.onCreateNewOption?.(query);
           if (shouldStopEarly) {
             this.setOpenState(false);
           } else {

package/src/TgSuggest/index.js

@@ -1,121 +1,109 @@
 import { Suggest } from "@blueprintjs/select";
 import { Keys } from "@blueprintjs/core";
-import React from "react";
+import React, { useRef } from "react";
 import classNames from "classnames";
 import { itemListPredicate } from "../TgSelect";
 
-class TgSuggest extends React.Component {
-  static defaultProps = {
+const itemRenderer = (i = "", { index, handleClick, modifiers }) => (
+  <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>
+);
+
+const TgSuggest = props => {
+  const {
+    disabled,
+    inputProps,
+    intent,
+    isLoading,
+    isSimpleSearch,
+    multi,
+    noResultsText,
+    notCreateable,
+    onBlur,
     // 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>
-    );
-  };
+    onChange = () => {},
+    optionRenderer, //pull this one out here so it doesn't get passsed along
+    options = [],
+    placeholder,
+    popoverProps,
+    value = undefined,
+    ...rest
+  } = props;
+
+  const inputRef = useRef(null);
 
-  handleItemSelect = item => {
-    const { onChange } = this.props;
-    this.input && this.input.blur();
+  const handleItemSelect = item => {
+    inputRef.current && inputRef.current.blur();
     return onChange(item);
   };
 
-  itemListPredicate = (queryString, item) => {
-    const { isSimpleSearch } = this.props;
+  const _itemListPredicate = (queryString, item) => {
     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
+  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 (inputRef.current != null) {
+            inputRef.current.blur();
           }
-          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
-        }}
-      />
-    );
-  }
-}
+          e.preventDefault();
+          e.stopPropagation(); //this prevents dialog's it is in from closing
+        }
+      }}
+      onItemSelect={handleItemSelect}
+      noResults={null}
+      resetOnSelect={false}
+      onQueryChange={onChange}
+      itemRenderer={itemRenderer}
+      itemListPredicate={_itemListPredicate}
+      selectedItem={value}
+      inputValueRenderer={item => item}
+      inputProps={{
+        inputRef: n => {
+          if (n) inputRef.current = 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: intent,
+        ...inputProps
+      }}
+      isSimpleSearch={isSimpleSearch}
+      onChange={onChange}
+      {...rest}
+    />
+  );
+};
+
 export default TgSuggest;