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

package/FilterAndSortMenu.js

@@ -1,388 +0,0 @@
-import React, { useState } from "react";
-import { DateInput, DateRangeInput } from "@blueprintjs/datetime";
-import { camelCase, startCase } from "lodash-es";
-import classNames from "classnames";
-import {
-  Menu,
-  Intent,
-  MenuDivider,
-  InputGroup,
-  Classes,
-  NumericInput,
-  MenuItem
-} from "@blueprintjs/core";
-import dayjs from "dayjs";
-
-import getDayjsFormatter from "../utils/getDayjsFormatter";
-import { onEnterHelper } from "../utils/handlerHelpers";
-import DialogFooter from "../DialogFooter";
-import TgSelect from "../TgSelect";
-import "@teselagen/react-table/react-table.css";
-import "./style.css";
-import "../toastr";
-
-const filterTypesDictionary = {
-  none: "",
-  startsWith: "text",
-  endsWith: "text",
-  contains: "text",
-  notContains: "text",
-  isExactly: "text",
-  isEmpty: "text",
-  notEmpty: "text",
-  inList: "list",
-  notInList: "list",
-  true: "boolean",
-  false: "boolean",
-  dateIs: "date",
-  notBetween: "dateRange",
-  isBetween: "dateRange",
-  isBefore: "date",
-  isAfter: "date",
-  greaterThan: "number",
-  lessThan: "number",
-  inRange: "numberRange",
-  outsideRange: "numberRange",
-  equalTo: "number",
-  regex: "text"
-};
-
-const isInvalidFilterValue = value => {
-  if (Array.isArray(value) && value.length) {
-    return value.some(item => isInvalidFilterValue(item));
-  }
-  return value === "" || value === undefined || value.length === 0;
-};
-
-const FilterAndSortMenu = ({
-  dataType,
-  togglePopover,
-  filterOn,
-  addFilters,
-  removeSingleFilter,
-  currentFilter
-}) => {
-  const [selectedFilter, setSelectedFilter] = useState(
-    currentFilter?.selectedFilter ?? camelCase(getFilterMenuItems(dataType)[0])
-  );
-  const [filterValue, setFilterValue] = useState(
-    currentFilter?.filterValue ?? ""
-  );
-
-  const handleFilterChange = selectedFilter => {
-    if (
-      filterValue &&
-      !Array.isArray(filterValue) &&
-      filterTypesDictionary[selectedFilter] === "list"
-    ) {
-      setFilterValue(filterValue?.split(" ") || []);
-    } else if (
-      filterTypesDictionary[selectedFilter] === "text" &&
-      Array.isArray(filterValue)
-    ) {
-      setFilterValue(filterValue.join(" "));
-    }
-    setSelectedFilter(camelCase(selectedFilter));
-  };
-
-  const handleFilterValueChange = filterValue => setFilterValue(filterValue);
-
-  const handleFilterSubmit = () => {
-    const ccSelectedFilter = camelCase(selectedFilter);
-    let filterValToUse = filterValue;
-    if (ccSelectedFilter === "true" || ccSelectedFilter === "false") {
-      //manually set the filterValue because none is set when type=boolean
-      filterValToUse = ccSelectedFilter;
-    } else if (ccSelectedFilter === "notEmpty") {
-      // manually set filter value (nothing is selected by user)
-      filterValToUse = true;
-    } else if (ccSelectedFilter === "isEmpty") {
-      // manually set filter value (nothing is selected by user)
-      filterValToUse = false;
-    } else if (
-      ccSelectedFilter === "inList" ||
-      ccSelectedFilter === "notInList"
-    ) {
-      if (dataType === "number") {
-        filterValToUse =
-          filterValue &&
-          filterValue.map(val => parseFloat(val.replaceAll(",", "")));
-      }
-    }
-
-    if (isInvalidFilterValue(filterValToUse)) {
-      togglePopover();
-      return removeSingleFilter(filterOn);
-    }
-    addFilters([
-      {
-        filterOn,
-        selectedFilter: ccSelectedFilter,
-        filterValue: filterValToUse
-      }
-    ]);
-    togglePopover();
-  };
-
-  const filterMenuItems = getFilterMenuItems(dataType);
-  const ccSelectedFilter = camelCase(selectedFilter);
-  const requiresValue = ccSelectedFilter && ccSelectedFilter !== "none";
-
-  return (
-    <Menu className="data-table-header-menu">
-      <div className="custom-menu-item">
-        <div className={classNames(Classes.SELECT, Classes.FILL)}>
-          <select
-            onChange={function (e) {
-              const ccSelectedFilter = camelCase(e.target.value);
-              handleFilterChange(ccSelectedFilter);
-            }}
-            value={ccSelectedFilter}
-          >
-            {filterMenuItems.map(function (menuItem, index) {
-              return (
-                <option key={index} value={camelCase(menuItem)}>
-                  {menuItem}
-                </option>
-              );
-            })}
-          </select>
-        </div>
-      </div>
-      <div className="custom-menu-item">
-        <FilterInput
-          dataType={dataType}
-          requiresValue={requiresValue}
-          handleFilterSubmit={handleFilterSubmit}
-          filterValue={filterValue}
-          handleFilterValueChange={handleFilterValueChange}
-          filterSubType={camelCase(selectedFilter)}
-          filterType={filterTypesDictionary[camelCase(selectedFilter)]}
-        />
-      </div>
-      <MenuDivider />
-      <DialogFooter
-        secondaryClassName={Classes.POPOVER_DISMISS}
-        onClick={() => {
-          handleFilterSubmit();
-        }}
-        intent={Intent.SUCCESS}
-        text="Filter"
-        secondaryText="Clear"
-        secondaryIntent={Intent.DANGER}
-        secondaryAction={() => {
-          if (currentFilter) removeSingleFilter(currentFilter.filterOn);
-        }}
-      />
-    </Menu>
-  );
-};
-
-export default FilterAndSortMenu;
-
-const dateMinMaxHelpers = {
-  minDate: dayjs().subtract(25, "years").toDate(),
-  maxDate: dayjs().add(25, "years").toDate()
-};
-
-const renderCreateNewOption = (query, active, handleClick) => (
-  <MenuItem
-    icon="add"
-    text={query}
-    active={active}
-    onClick={handleClick}
-    shouldDismissPopover={false}
-  />
-);
-
-const FilterInput = ({
-  handleFilterValueChange,
-  handleFilterSubmit,
-  filterValue,
-  filterSubType,
-  filterType
-}) => {
-  //Options: Text, Single number (before, after, equals), 2 numbers (range),
-  //Single Date (before, after, on), 2 dates (range)
-  let inputGroup = <div />;
-  switch (filterType) {
-    case "text":
-      inputGroup =
-        filterSubType === "notEmpty" || filterSubType === "isEmpty" ? (
-          <div />
-        ) : (
-          <div className="custom-menu-item">
-            <InputGroup
-              placeholder="Value"
-              onChange={function (e) {
-                handleFilterValueChange(e.target.value);
-              }}
-              autoFocus
-              {...onEnterHelper(handleFilterSubmit)}
-              value={filterValue}
-            />
-          </div>
-        );
-      break;
-    case "list":
-      inputGroup = (
-        <div className="custom-menu-item">
-          <TgSelect
-            placeholder="Add item"
-            renderCreateNewOption={renderCreateNewOption}
-            noResults={null}
-            multi={true}
-            creatable={true}
-            value={(filterValue || []).map(val => ({
-              label: val,
-              value: val
-            }))}
-            onChange={selectedOptions => {
-              selectedOptions.some(opt => opt.value === "")
-                ? handleFilterSubmit()
-                : handleFilterValueChange(
-                    selectedOptions.map(opt => opt.value)
-                  );
-            }}
-            options={[]}
-          />
-        </div>
-      );
-      break;
-    case "number":
-      inputGroup = (
-        <div className="custom-menu-item">
-          <NumericInput
-            placeholder="Value"
-            onValueChange={function (numVal) {
-              handleFilterValueChange(isNaN(numVal) ? 0 : numVal);
-            }}
-            autoFocus
-            {...onEnterHelper(handleFilterSubmit)}
-            value={filterValue}
-          />
-        </div>
-      );
-      break;
-    case "numberRange":
-      inputGroup = (
-        <div className="custom-menu-item">
-          <NumericInput
-            placeholder="Low"
-            onValueChange={function (numVal) {
-              handleFilterValueChange([
-                isNaN(numVal) ? 0 : numVal,
-                filterValue[1]
-              ]);
-            }}
-            {...onEnterHelper(handleFilterSubmit)}
-            value={filterValue && filterValue[0]}
-          />
-          <NumericInput
-            placeholder="High"
-            onValueChange={function (numVal) {
-              handleFilterValueChange([
-                filterValue[0],
-                isNaN(numVal) ? 0 : numVal
-              ]);
-            }}
-            {...onEnterHelper(handleFilterSubmit)}
-            value={filterValue && filterValue[1]}
-          />
-        </div>
-      );
-      break;
-    case "date":
-      inputGroup = (
-        <div className="custom-menu-item">
-          <DateInput
-            value={filterValue ? dayjs(filterValue).toDate() : undefined}
-            {...getDayjsFormatter("L")}
-            {...dateMinMaxHelpers}
-            onChange={selectedDates => {
-              handleFilterValueChange(selectedDates);
-            }}
-          />
-        </div>
-      );
-      break;
-    case "dateRange":
-      // eslint-disable-next-line no-case-declarations
-      let filterValueToUse;
-      if (Array.isArray(filterValue)) {
-        filterValueToUse = filterValue;
-      } else {
-        filterValueToUse =
-          filterValue && filterValue.split && filterValue.split(";");
-      }
-      inputGroup = (
-        <div className="custom-menu-item">
-          <DateRangeInput
-            value={
-              filterValueToUse && filterValueToUse[0] && filterValueToUse[1]
-                ? [new Date(filterValueToUse[0]), new Date(filterValueToUse[1])]
-                : undefined
-            }
-            popoverProps={{
-              captureDismiss: true
-            }}
-            formatDate={date => (date == null ? "" : date.toLocaleDateString())}
-            parseDate={str => new Date(Date.parse(str))}
-            placeholder="JS Date"
-            {...dateMinMaxHelpers}
-            onChange={selectedDates => {
-              if (selectedDates[0] && selectedDates[1]) {
-                handleFilterValueChange(selectedDates);
-              }
-            }}
-          />
-        </div>
-      );
-      break;
-    default:
-    // to do
-  }
-  return inputGroup;
-};
-
-function getFilterMenuItems(dataType) {
-  let filterMenuItems = [];
-  if (dataType === "string") {
-    filterMenuItems = [
-      "contains",
-      "notContains",
-      "startsWith",
-      "endsWith",
-      "isExactly",
-      "regex",
-      "inList",
-      "notInList",
-      "isEmpty",
-      "notEmpty"
-    ];
-  } else if (dataType === "lookup") {
-    filterMenuItems = [
-      "contains",
-      "notContains",
-      "startsWith",
-      "endsWith",
-      "isExactly",
-      "regex"
-    ];
-  } else if (dataType === "boolean") {
-    filterMenuItems = ["true", "false"];
-  } else if (dataType === "number" || dataType === "integer") {
-    filterMenuItems = [
-      "greaterThan",
-      "lessThan",
-      "inRange",
-      "outsideRange",
-      "equalTo",
-      "inList",
-      "notInList"
-    ];
-  } else if (dataType === "timestamp") {
-    filterMenuItems = ["isBetween", "notBetween", "isBefore", "isAfter"];
-  }
-  return filterMenuItems.map(item => startCase(item));
-}

package/FormSeparator.js

@@ -1,9 +0,0 @@
-import React from "react";
-import "./style.css";
-export const FormSeparator = ({ label = "or" } = {}) => {
-  return (
-    <div className="form-separator">
-      <p style={{ opacity: 0.8 }}>{label}</p>
-    </div>
-  );
-};

package/LoadingDots.js

@@ -1,14 +0,0 @@
-import React, { useEffect, useState } from "react";
-
-export const LoadingDots = () => {
-  const [dots, setDots] = useState("");
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setDots(dots => {
-        return dots.length === 3 ? "" : dots + ".";
-      });
-    }, 500);
-    return () => clearInterval(interval);
-  }, []);
-  return <span>{dots}</span>;
-};

package/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>
-  );
-};