@teselagen/ui 0.8.6 → 0.8.8

package/package.json

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

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/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/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 || {};
+}

package/src/ExcelCell.js

@@ -0,0 +1,38 @@
+/* eslint react/jsx-no-bind: 0 */
+import { Popover } from "@blueprintjs/core";
+import React, { useState } from "react";
+
+export default function ExcelCell() {
+  const [v, setV] = useState("");
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  return (
+    <Popover
+      onClose={() => {
+        setIsPopoverOpen(false);
+      }}
+      isOpen={isPopoverOpen}
+      content={<div>Sum</div>}
+    >
+      <div
+        style={{
+          border: "1px solid #ccc",
+          padding: 5,
+          width: 100,
+          height: 30
+        }}
+        contentEditable
+        onInput={e => {
+          const text = e.currentTarget.textContent;
+
+          if (text === "=") {
+            // open a popover
+            setIsPopoverOpen(true);
+          }
+          setV(text);
+        }}
+      >
+        {v}
+      </div>
+    </Popover>
+  );
+}

package/src/FormComponents/Uploader.js

@@ -788,7 +788,11 @@ const Uploader = ({
                     .join(", ")
                 : undefined
             }
-            onDrop={async (_acceptedFiles, rejectedFiles) => {
+            onDrop={async (_acceptedFiles, rejectedFiles, e) => {
+              const parentDropzone = e.target.closest(".tg-dropzone");
+              if (parentDropzone) {
+                parentDropzone.blur();
+              }
               let acceptedFiles = [];
               for (const file of _acceptedFiles) {
                 if ((validateAgainstSchema || autoUnzip) && isZipFile(file)) {

package/src/autoTooltip.js

@@ -18,6 +18,7 @@ document.addEventListener("mouseup", () => {
 });
 
 let tippys = [];
+
 let recentlyHidden = false;
 let clearMe;
 (function () {

package/utils/hotkeyUtils.d.ts

@@ -1,4 +1,6 @@
 export function comboToLabel(def: any, useSymbols?: boolean): any;
 export function hotkeysById(hotkeys: any, mode?: string): (id: any) => any;
 export function getHotkeyProps(def: any, id: any): any;
-export function withHotkeys(hotkeys: any, handlers: any): ({ children }?: {}) => import("react/jsx-runtime").JSX.Element;
+export function withHotkeys(hotkeys: any, handlers: any): ({ children }?: {
+    children: any;
+}) => import("react/jsx-runtime").JSX.Element;

package/DataTable/utils/filterLocalEntitiesToHasura.d.ts

@@ -1,5 +0,0 @@
-export function filterLocalEntitiesToHasura(records: any, { where, order_by, limit, offset, isInfinite }?: {}): {
-    entities: any[];
-    entitiesAcrossPages: any[];
-    entityCount: number;
-};

package/DataTable/utils/initializeHasuraWhereAndFilter.d.ts

@@ -1,2 +0,0 @@
-export function initializeHasuraWhereAndFilter(additionalFilter: any, where: {} | undefined, currentParams: any): void;
-export function addCustomColumnFilters(where: any, fields: any, currentParams: any): void;

package/DataTable/utils/tableQueryParamsToHasuraClauses.d.ts

@@ -1,26 +0,0 @@
-export function tableQueryParamsToHasuraClauses({ page, pageSize, searchTerm, filters, order, schema, additionalFilter }: {
-    page: any;
-    pageSize: any;
-    searchTerm: any;
-    filters: any;
-    order: any;
-    schema: any;
-    additionalFilter: any;
-}): {
-    where: {};
-    order_by: {};
-    limit: any;
-    offset: number;
-};
-/**
- * Takes a schema and returns an object with the fields mapped by their camelCased display name.
- * If the displayName is not set or is a jsx element, the path is used instead.
- * The same conversion must be done when using the result of this method
- */
-export function getFieldsMappedByCCDisplayName(schema: any): any;
-/**
- *
- * @param {object} field
- * @returns the camelCase display name of the field, to be used for filters, sorting, etc
- */
-export function getCCDisplayName(field: object): string;

package/src/DataTable/utils/filterLocalEntitiesToHasura.js

@@ -1,236 +0,0 @@
-import {
-  isEmpty,
-  every,
-  some,
-  isEqual,
-  isString,
-  isNull,
-  isArray,
-  includes,
-  isObject,
-  has,
-  orderBy
-} from "lodash-es";
-
-export function filterLocalEntitiesToHasura(
-  records,
-  { where, order_by, limit, offset, isInfinite } = {}
-) {
-  let filteredRecords = [...records];
-
-  // Apply where clause if it exists
-  if (where) {
-    filteredRecords = applyWhereClause(filteredRecords, where);
-  }
-
-  // Apply order_by if it exists
-  if (order_by) {
-    filteredRecords = applyOrderBy(filteredRecords, order_by);
-  }
-
-  // Store the complete filtered and ordered records for pagination info
-  const allFilteredRecords = [...filteredRecords];
-
-  // Apply limit and offset
-  if (!isInfinite && offset !== undefined) {
-    filteredRecords = filteredRecords.slice(offset);
-  }
-
-  if (!isInfinite && limit !== undefined) {
-    filteredRecords = filteredRecords.slice(0, limit);
-  }
-
-  // For consistency, always return an object with entities, entitiesAcrossPages, and entityCount
-  return {
-    entities: filteredRecords,
-    entitiesAcrossPages: allFilteredRecords,
-    entityCount: allFilteredRecords.length
-  };
-}
-
-function applyWhereClause(records, where) {
-  function applyFilter(record, filter) {
-    if (isEmpty(filter)) {
-      return true; // No filter, all records pass
-    }
-
-    for (const key in filter) {
-      if (key === "_and") {
-        if (isEmpty(filter[key])) {
-          continue;
-        }
-        if (!every(filter[key], subFilter => applyFilter(record, subFilter))) {
-          return false;
-        }
-      } else if (key === "_or") {
-        if (isEmpty(filter[key])) {
-          continue;
-        }
-        if (!some(filter[key], subFilter => applyFilter(record, subFilter))) {
-          return false;
-        }
-      } else if (key === "_not") {
-        if (applyFilter(record, filter[key])) {
-          return false;
-        }
-      } else {
-        const value = record[key];
-        const conditions = filter[key];
-
-        // Handle nested object properties
-        if (
-          isObject(value) &&
-          isObject(conditions) &&
-          !hasOperator(conditions)
-        ) {
-          return applyFilter(value, conditions);
-        }
-
-        for (const operator in conditions) {
-          const conditionValue = conditions[operator];
-
-          // Handle range conditions (_gt/_lt or _gte/_lte combinations)
-          if (operator === "_gt" && conditions._lt) {
-            if (!(value > conditionValue && value < conditions._lt))
-              return false;
-            continue;
-          }
-          if (operator === "_gte" && conditions._lte) {
-            if (!(value >= conditionValue && value <= conditions._lte))
-              return false;
-            continue;
-          }
-
-          switch (operator) {
-            case "_eq":
-              if (!isEqual(value, conditionValue)) return false;
-              break;
-            case "_neq":
-              if (isEqual(value, conditionValue)) return false;
-              break;
-            case "_gt":
-              if (!(value > conditionValue)) return false;
-              break;
-            case "_gte":
-              if (!(value >= conditionValue)) return false;
-              break;
-            case "_lt":
-              if (!(value < conditionValue)) return false;
-              break;
-            case "_lte":
-              if (!(value <= conditionValue)) return false;
-              break;
-            case "_like":
-              if (
-                !isString(value) ||
-                !new RegExp(conditionValue.replace(/%/g, ".*")).test(value)
-              )
-                return false;
-              break;
-            case "_ilike":
-              if (
-                !isString(value) ||
-                !new RegExp(conditionValue.replace(/%/g, ".*"), "i").test(value)
-              )
-                return false;
-              break;
-            case "_nlike":
-              if (
-                !isString(value) ||
-                new RegExp(conditionValue.replace(/%/g, ".*")).test(value)
-              )
-                return false;
-              break;
-            case "_nilike":
-              if (
-                !isString(value) ||
-                new RegExp(conditionValue.replace(/%/g, ".*"), "i").test(value)
-              )
-                return false;
-              break;
-            case "_starts_with":
-              if (!isString(value) || !value.startsWith(conditionValue))
-                return false;
-              break;
-            case "_ends_with":
-              if (!isString(value) || !value.endsWith(conditionValue))
-                return false;
-              break;
-            case "_is_null":
-              if (
-                (conditionValue && !isNull(value)) ||
-                (!conditionValue && isNull(value))
-              )
-                return false;
-              break;
-            case "_contains":
-              if (
-                !isArray(value) ||
-                !every(conditionValue, item => includes(value, item))
-              )
-                return false;
-              break;
-            case "_contained_in":
-              if (
-                !isArray(value) ||
-                !every(value, item => includes(conditionValue, item))
-              )
-                return false;
-              break;
-            case "_has_key":
-              if (!isObject(value) || !has(value, conditionValue)) return false;
-              break;
-            case "_has_keys_any":
-              if (
-                !isObject(value) ||
-                !some(conditionValue, item => has(value, item))
-              )
-                return false;
-              break;
-            case "_has_keys_all":
-              if (
-                !isObject(value) ||
-                !every(conditionValue, item => has(value, item))
-              )
-                return false;
-              break;
-            case "_similar":
-              if (
-                !isString(value) ||
-                !new RegExp(conditionValue.replace(/%/g, ".*")).test(value)
-              )
-                return false;
-              break;
-            default:
-              if (operator.startsWith("_")) {
-                console.warn(`Unsupported operator: ${operator}`);
-                return false;
-              } else {
-                console.warn(`Unsupported operator: ${operator}`);
-                return false;
-              }
-          }
-        }
-      }
-    }
-
-    return true;
-  }
-
-  // Helper to check if an object contains any Hasura operators
-  function hasOperator(obj) {
-    return Object.keys(obj).some(key => key.startsWith("_"));
-  }
-
-  return records.filter(record => applyFilter(record, where));
-}
-
-function applyOrderBy(records, order_by) {
-  const keys = Object.keys(order_by);
-  if (keys.length > 0) {
-    const field = keys[0];
-    const direction = order_by[field] === "asc" ? "asc" : "desc";
-    return orderBy(records, [field], [direction]);
-  }
-  return records;
-}