@teselagen/ui 0.7.34 → 0.7.36

package/src/DataTable/DisabledLoadingComponent.js

@@ -1,15 +0,0 @@
-import React from "react";
-import { ReactTableDefaults } from "@teselagen/react-table";
-const { LoadingComponent } = ReactTableDefaults;
-
-function DisabledLoadingComponent({ disabled, loading, loadingText }) {
-  return (
-    <LoadingComponent
-      className={disabled ? "disabled" : ""}
-      loading={loading}
-      loadingText={disabled ? "" : loadingText}
-    />
-  );
-}
-
-export default DisabledLoadingComponent;

package/src/DataTable/DisplayOptions.js

@@ -1,199 +0,0 @@
-import React, { useState } from "react";
-import { map, isEmpty, noop, startCase } from "lodash-es";
-import {
-  Button,
-  Checkbox,
-  Menu,
-  MenuItem,
-  Classes,
-  InputGroup,
-  Popover,
-  Switch
-} from "@blueprintjs/core";
-import { getCCDisplayName } from "./utils/tableQueryParamsToHasuraClauses";
-
-const DisplayOptions = ({
-  compact,
-  extraCompact,
-  disabled,
-  hideDisplayOptionsIcon,
-  resetDefaultVisibility = noop,
-  updateColumnVisibility = noop,
-  updateTableDisplayDensity,
-  showForcedHiddenColumns,
-  setShowForcedHidden,
-  hasOptionForForcedHidden,
-  schema
-}) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const [searchTerms, setSearchTerms] = useState({});
-
-  const changeTableDensity = e => {
-    updateTableDisplayDensity(e.target.value);
-    setIsOpen(false);
-  };
-
-  const toggleForcedHidden = e => setShowForcedHidden(e.target.checked);
-
-  if (hideDisplayOptionsIcon) {
-    return null; //don't show antyhing!
-  }
-  const { fields } = schema;
-  const fieldGroups = {};
-  const mainFields = [];
-
-  fields.forEach(field => {
-    if (field.hideInMenu) return;
-    if (!field.fieldGroup) return mainFields.push(field);
-    if (!fieldGroups[field.fieldGroup]) fieldGroups[field.fieldGroup] = [];
-    fieldGroups[field.fieldGroup].push(field);
-  });
-
-  let numVisible = 0;
-
-  const getFieldCheckbox = (field, i) => {
-    const { displayName, isHidden, isForcedHidden, path } = field;
-    if (isForcedHidden) return;
-    if (!isHidden) numVisible++;
-    return (
-      <Checkbox
-        name={`${path}-${i}`}
-        key={path || i}
-        onChange={() => {
-          if (numVisible <= 1 && !isHidden) {
-            return window.toastr.warning(
-              "We have to display at least one column :)"
-            );
-          }
-          updateColumnVisibility({ shouldShow: isHidden, path });
-        }}
-        checked={!isHidden}
-        label={displayName}
-      />
-    );
-  };
-
-  let fieldGroupMenu;
-  if (!isEmpty(fieldGroups)) {
-    fieldGroupMenu = map(fieldGroups, (groupFields, groupName) => {
-      const searchTerm = searchTerms[groupName] || "";
-      const anyVisible = groupFields.some(
-        field => !field.isHidden && !field.isForcedHidden
-      );
-      const anyNotForcedHidden = groupFields.some(
-        field => !field.isForcedHidden
-      );
-      if (!anyNotForcedHidden) return;
-      return (
-        <MenuItem key={groupName} text={groupName}>
-          <InputGroup
-            leftIcon="search"
-            value={searchTerm}
-            onChange={e => {
-              setSearchTerms(prev => ({
-                ...prev,
-                [groupName]: e.target.value
-              }));
-            }}
-          />
-          <Button
-            className={Classes.MINIMAL}
-            text={(anyVisible ? "Hide" : "Show") + " All"}
-            style={{ margin: "10px 0" }}
-            onClick={() => {
-              updateColumnVisibility({
-                shouldShow: !anyVisible,
-                paths: groupFields.map(field => field.path)
-              });
-            }}
-          />
-          {groupFields
-            .filter(
-              field =>
-                startCase(getCCDisplayName(field)) // We have to use startCase with the camelCase here because the displayName is not always a string
-                  .toLowerCase()
-                  .indexOf(searchTerm.toLowerCase()) > -1
-            )
-            .map(getFieldCheckbox)}
-        </MenuItem>
-      );
-    });
-  }
-
-  return (
-    <Popover
-      isOpen={isOpen}
-      onClose={() => setIsOpen(false)}
-      content={
-        <Menu>
-          <div style={{ padding: 10, paddingLeft: 20, paddingRight: 20 }}>
-            <h5 style={{ marginBottom: 10 }}>Display Density:</h5>
-            <div className={Classes.SELECT + " tg-table-display-density"}>
-              <select
-                onChange={changeTableDensity}
-                value={
-                  extraCompact ? "extraCompact" : compact ? "compact" : "normal"
-                }
-              >
-                <option className={Classes.POPOVER_DISMISS} value="normal">
-                  Comfortable
-                </option>
-                {/* tnr: as you can see we're calling what was "compact" Normal now in response to https://github.com/TeselaGen/lims/issues/4713 */}
-                <option className={Classes.POPOVER_DISMISS} value="compact">
-                  Normal
-                </option>
-                <option
-                  className={Classes.POPOVER_DISMISS}
-                  value="extraCompact"
-                >
-                  Compact
-                </option>
-              </select>
-            </div>
-            <h5 style={{ marginBottom: 10, marginTop: 10 }}>
-              Displayed Columns:
-            </h5>
-            <div style={{ maxHeight: 260, overflowY: "auto", padding: 2 }}>
-              {mainFields.map(getFieldCheckbox)}
-            </div>
-            <div>{fieldGroupMenu}</div>
-            {hasOptionForForcedHidden && (
-              <div style={{ marginTop: 15 }}>
-                <Switch
-                  label="Show Empty Columns"
-                  checked={showForcedHiddenColumns}
-                  onChange={toggleForcedHidden}
-                />
-              </div>
-            )}
-            <div
-              style={{
-                width: "100%",
-                display: "flex",
-                justifyContent: "flex-end"
-              }}
-            >
-              <Button
-                onClick={resetDefaultVisibility}
-                title="Display Options"
-                minimal
-              >
-                Reset
-              </Button>
-            </div>
-          </div>
-        </Menu>
-      }
-    >
-      <Button
-        className="tg-table-display-options"
-        onClick={() => setIsOpen(true)}
-        disabled={disabled}
-        minimal
-        icon="cog"
-      />
-    </Popover>
-  );
-};
-
-export default DisplayOptions;

package/src/DataTable/DropdownCell.js

@@ -1,61 +0,0 @@
-import React, { useState } from "react";
-import classNames from "classnames";
-import TgSelect from "../TgSelect";
-
-export const DropdownCell = ({
-  options,
-  isMulti,
-  initialValue,
-  finishEdit,
-  cancelEdit,
-  dataTest
-}) => {
-  const [v, setV] = useState(
-    isMulti
-      ? initialValue.split(",").map(v => ({ value: v, label: v }))
-      : initialValue
-  );
-  return (
-    <div
-      className={classNames("tg-dropdown-cell-edit-container", {
-        "tg-dropdown-cell-edit-container-multi": isMulti
-      })}
-    >
-      <TgSelect
-        small
-        multi={isMulti}
-        autoOpen
-        value={v}
-        onChange={val => {
-          if (isMulti) {
-            setV(val);
-            return;
-          }
-          finishEdit(val ? val.value : null);
-        }}
-        {...dataTest}
-        popoverProps={{
-          onClose: e => {
-            if (isMulti) {
-              if (e && e.key === "Escape") {
-                cancelEdit();
-              } else {
-                finishEdit(
-                  v && v.map
-                    ? v
-                        .map(v => v.value)
-                        .filter(v => v)
-                        .join(",")
-                    : v
-                );
-              }
-            } else {
-              cancelEdit();
-            }
-          }
-        }}
-        options={options.map(value => ({ label: value, value }))}
-      />
-    </div>
-  );
-};

package/src/DataTable/EditableCell.js

@@ -1,44 +0,0 @@
-import React, { useEffect, useRef, useState } from "react";
-
-export const EditableCell = ({
-  cancelEdit,
-  dataTest,
-  finishEdit,
-  isNumeric,
-  initialValue
-}) => {
-  const [value, setValue] = useState(initialValue);
-  const inputRef = useRef(null);
-
-  useEffect(() => {
-    if (inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, [isNumeric]);
-
-  return (
-    <input
-      style={{
-        border: 0,
-        width: "95%",
-        fontSize: 12,
-        background: "none"
-      }}
-      ref={inputRef}
-      {...dataTest}
-      autoFocus
-      onKeyDown={e => {
-        e.stopPropagation();
-        if (e.key === "Enter") {
-          e.target.blur();
-        } else if (e.key === "Escape") {
-          cancelEdit();
-        }
-      }}
-      onBlur={() => finishEdit(value)}
-      onChange={e => setValue(e.target.value)}
-      type={isNumeric ? "number" : undefined}
-      value={value}
-    />
-  );
-};

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