@teselagen/ui 0.8.6-beta.2 → 0.8.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ui",
-  "version": "0.8.6-beta.2",
+  "version": "0.8.8",
   "main": "./src/index.js",
   "type": "module",
   "exports": {

package/src/DataTable/Columns.js

@@ -33,10 +33,10 @@ import getTextFromEl from "../utils/getTextFromEl";
 import rowClick, { finalizeSelection } from "./utils/rowClick";
 import { editCellHelper } from "./editCellHelper";
 import { getCellVal } from "./getCellVal";
+import { getCCDisplayName } from "./utils/queryParams";
 import { useDispatch } from "react-redux";
 import { change as _change } from "redux-form";
 import { RenderCell } from "./RenderCell";
-import { getCCDisplayName } from "./utils/tableQueryParamsToHasuraClauses";
 
 dayjs.extend(localizedFormat);
 

package/src/DataTable/DisplayOptions.js

@@ -10,7 +10,7 @@ import {
   Popover,
   Switch
 } from "@blueprintjs/core";
-import { getCCDisplayName } from "./utils/tableQueryParamsToHasuraClauses";
+import { getCCDisplayName } from "./utils/queryParams";
 
 const DisplayOptions = ({
   compact,

package/src/DataTable/EditabelCell.js

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

package/src/DataTable/FilterAndSortMenu.js

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { DateInput, DateRangeInput } from "@blueprintjs/datetime";
-import { camelCase, startCase } from "lodash-es";
+import { camelCase } from "lodash-es";
 import classNames from "classnames";
 import {
   Menu,
@@ -349,40 +349,43 @@ function getFilterMenuItems(dataType) {
   let filterMenuItems = [];
   if (dataType === "string") {
     filterMenuItems = [
-      "contains",
-      "notContains",
-      "startsWith",
-      "endsWith",
-      "isExactly",
-      "regex",
-      "inList",
-      "notInList",
-      "isEmpty",
-      "notEmpty"
+      "Contains",
+      "Not Contains",
+      "Starts With",
+      "Ends With",
+      "Is Exactly",
+      "Regex",
+      "In List",
+      "Not In List",
+      "Is Empty",
+      "Not Empty"
     ];
   } else if (dataType === "lookup") {
     filterMenuItems = [
-      "contains",
-      "notContains",
-      "startsWith",
-      "endsWith",
-      "isExactly",
-      "regex"
+      "Contains",
+      "Not Contains",
+      "Starts With",
+      "Ends With",
+      "Is Exactly",
+      "Regex"
     ];
   } else if (dataType === "boolean") {
-    filterMenuItems = ["true", "false"];
+    filterMenuItems = ["True", "False"];
   } else if (dataType === "number" || dataType === "integer") {
+    // else if (dataType === "lookup") {
+    //   filterMenuItems = ["None"];
+    // }
     filterMenuItems = [
-      "greaterThan",
-      "lessThan",
-      "inRange",
-      "outsideRange",
-      "equalTo",
-      "inList",
-      "notInList"
+      "Greater Than",
+      "Less Than",
+      "In Range",
+      "Outside Range",
+      "Equal To",
+      "In List",
+      "Not In List"
     ];
   } else if (dataType === "timestamp") {
-    filterMenuItems = ["isBetween", "notBetween", "isBefore", "isAfter"];
+    filterMenuItems = ["Is Between", "Not Between", "Is Before", "Is After"];
   }
-  return filterMenuItems.map(item => startCase(item));
+  return filterMenuItems;
 }

package/src/DataTable/defaultProps.js

@@ -0,0 +1,45 @@
+import { noop } from "lodash-es";
+
+// eslint-disable-next-line import/no-anonymous-default-export
+export default {
+  //NOTE: DO NOT SET DEFAULTS HERE FOR PROPS THAT GET COMPUTED AS PART OF PRESET GROUPS IN computePresets
+  addFilters: noop,
+  className: "",
+  clearFilters: noop,
+  contextMenu: noop,
+  disabled: false,
+  entities: [],
+  extraClasses: "",
+  filters: [],
+  isCopyable: true,
+  isEntityDisabled: noop,
+  isLoading: false,
+  isSimple: false,
+  isSingleSelect: false,
+  maxHeight: 600,
+  noHeader: false,
+  noSelect: false,
+  noUserSelect: false,
+  onDeselect: noop,
+  onMultiRowSelect: noop,
+  onRowClick: noop,
+  onRowSelect: noop,
+  onSingleRowSelect: noop,
+  page: 1,
+  pageSize: 10,
+  reduxFormExpandedEntityIdMap: {},
+  reduxFormSearchInput: "",
+  reduxFormSelectedEntityIdMap: {},
+  removeSingleFilter: noop,
+  resized: [],
+  resizePersist: noop,
+  setFilter: noop,
+  setOrder: noop,
+  setPage: noop,
+  setPageSize: noop,
+  setSearchTerm: noop,
+  showCount: false,
+  style: {},
+  withCheckboxes: false,
+  withSort: true
+};

package/src/DataTable/index.js

@@ -92,6 +92,7 @@ import { viewColumn, openColumn, multiViewColumn } from "./viewColumn";
 import convertSchema from "./utils/convertSchema";
 import TableFormTrackerContext from "./TableFormTrackerContext";
 import {
+  getCCDisplayName,
   getCurrentParamsFromUrl,
   getQueryParams,
   makeDataTableHandlers,
@@ -102,7 +103,6 @@ import { formValueSelector, change as _change } from "redux-form";
 import { throwFormError } from "../throwFormError";
 import { isObservableArray, toJS } from "mobx";
 import { isBeingCalledExcessively } from "../utils/isBeingCalledExcessively";
-import { getCCDisplayName } from "./utils/tableQueryParamsToHasuraClauses";
 
 enablePatches();
 const IS_LINUX = window.navigator.platform.toLowerCase().search("linux") > -1;
@@ -337,6 +337,16 @@ const DataTable = ({
 
   const queryParams = useMemo(() => {
     if (!isTableParamsConnected) {
+      const additionalFilterToUse =
+        typeof props.additionalFilter === "function"
+          ? props.additionalFilter
+          : () => props.additionalFilter;
+
+      const additionalOrFilterToUse =
+        typeof props.additionalOrFilter === "function"
+          ? props.additionalOrFilter
+          : () => props.additionalOrFilter;
+
       return getQueryParams({
         doNotCoercePageSize,
         currentParams,
@@ -346,7 +356,8 @@ const DataTable = ({
         schema: convertedSchema,
         isInfinite,
         isLocalCall,
-        additionalFilter: props.additionalFilter,
+        additionalFilter: additionalFilterToUse,
+        additionalOrFilter: additionalOrFilterToUse,
         noOrderError: props.noOrderError,
         isCodeModel: props.isCodeModel,
         ownProps: props
@@ -603,7 +614,7 @@ const DataTable = ({
                 : !val;
           });
         }
-        if (noValsForField && entities.length) {
+        if (noValsForField) {
           return {
             ...field,
             isHidden: true,

package/src/DataTable/style.css

@@ -246,7 +246,7 @@ body:not(.drag-active)
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  margin-top: 10px;
+  margin-top: 20px;
 }
 
 .ReactTable {

package/src/DataTable/utils/computePresets.js

@@ -0,0 +1,42 @@
+import { omitBy, isNil } from "lodash-es";
+//we use this to make adding preset prop groups simpler
+export default function computePresets(props = {}) {
+  const { isSimple } = props;
+  let toReturn = omitBy(props, isNil);
+  toReturn.pageSize = toReturn.controlled_pageSize || toReturn.pageSize;
+  if (isSimple) {
+    //isSimplePreset
+    toReturn = {
+      noHeader: true,
+      noFooter: !props.withPaging,
+      noPadding: true,
+      noFullscreenButton: true,
+      hidePageSizeWhenPossible: !props.withPaging,
+      isInfinite: !props.withPaging,
+      hideSelectedCount: true,
+      withTitle: false,
+      withSearch: false,
+      compact: true,
+      withPaging: false,
+      withFilter: false,
+      ...toReturn
+    };
+  } else {
+    toReturn = {
+      // the usual defaults:
+      noFooter: false,
+      noPadding: false,
+      compact: true,
+      noFullscreenButton: false,
+      hidePageSizeWhenPossible: false,
+      isInfinite: false,
+      hideSelectedCount: false,
+      withTitle: true,
+      withSearch: true,
+      withPaging: true,
+      withFilter: true,
+      ...toReturn
+    };
+  }
+  return toReturn || {};
+}