@teselagen/ui 0.7.23 → 0.7.25

package/src/DataTable/EditabelCell.jsx

@@ -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/RenderCell.jsx

@@ -1,191 +0,0 @@
-import React from "react";
-import { useSelector } from "react-redux";
-import { Checkbox, Icon } from "@blueprintjs/core";
-import {
-  getIdOrCodeOrIndex,
-  isBottomRightCornerOfRectangle,
-  PRIMARY_SELECTED_VAL
-} from "./utils";
-import { DropdownCell } from "./DropdownCell";
-import { EditableCell } from "./EditabelCell";
-import { getVals } from "./getVals";
-import { CellDragHandle } from "./CellDragHandle";
-
-export const RenderCell = ({
-  oldFunc,
-  getCopyTextForCell,
-  column,
-  isCellEditable,
-  isEntityDisabled,
-  finishCellEdit,
-  formName,
-  noEllipsis,
-  cancelCellEdit,
-  getCellHoverText,
-  selectedCells,
-  isSelectionARectangle,
-  startCellEdit,
-  tableRef,
-  onDragEnd,
-  args
-}) => {
-  const editingCell = useSelector(
-    state => state.form?.[formName]?.values?.reduxFormEditingCell
-  );
-  const initialValue = useSelector(
-    state => state.form?.[formName]?.values?.reduxFormInitialValue
-  );
-
-  const [row] = args;
-  const rowId = getIdOrCodeOrIndex(row.original, row.index);
-  const cellId = `${rowId}:${row.column.path}`;
-  const isEditingCell = editingCell === cellId;
-  let val = oldFunc(...args);
-  const oldVal = val;
-  const text = getCopyTextForCell(val, row, column);
-  const dataTest = {
-    "data-test": "tgCell_" + column.path
-  };
-  const fullValue = row.original?.[row.column.path];
-
-  if (isEditingCell) {
-    if (column.type === "genericSelect") {
-      const GenericSelectComp = column.GenericSelectComp;
-
-      return (
-        <GenericSelectComp
-          rowId={rowId}
-          fullValue={fullValue}
-          initialValue={text}
-          {...dataTest}
-          finishEdit={(newVal, doNotStopEditing) => {
-            finishCellEdit(cellId, newVal, doNotStopEditing);
-          }}
-          dataTest={dataTest}
-          cancelEdit={cancelCellEdit}
-        />
-      );
-    }
-    if (column.type === "dropdown" || column.type === "dropdownMulti") {
-      return (
-        <DropdownCell
-          isMulti={dataTest.isMulti || column.type === "dropdownMulti"}
-          initialValue={dataTest.initialValue || text}
-          options={getVals(column.values)}
-          finishEdit={(newVal, doNotStopEditing) => {
-            finishCellEdit(cellId, newVal, doNotStopEditing);
-          }}
-          dataTest={dataTest}
-          cancelEdit={cancelCellEdit}
-        />
-      );
-    } else {
-      return (
-        <EditableCell
-          dataTest={dataTest}
-          cancelEdit={cancelCellEdit}
-          isNumeric={column.type === "number"}
-          initialValue={initialValue || text}
-          finishEdit={newVal => {
-            finishCellEdit(cellId, newVal);
-          }}
-        />
-      );
-    }
-  }
-
-  const isBool = column.type === "boolean";
-  if (isCellEditable && isBool) {
-    val = (
-      <Checkbox
-        disabled={isEntityDisabled(row.original)}
-        className="tg-cell-edit-boolean-checkbox"
-        checked={oldVal === "True"}
-        onChange={e => {
-          const checked = e.target.checked;
-          finishCellEdit(cellId, checked);
-        }}
-      />
-    );
-    noEllipsis = true;
-  }
-
-  //wrap the original tableColumn.Cell function in another div in order to add a title attribute
-  let title = text;
-  if (getCellHoverText) title = getCellHoverText(...args);
-  else if (column.getTitleAttr) title = column.getTitleAttr(...args);
-  const isSelectedCell = selectedCells?.[cellId];
-  const {
-    isRect,
-    selectionGrid,
-    lastRowIndex,
-    lastCellIndex,
-    entityMap,
-    pathToIndex
-  } = isSelectionARectangle();
-
-  return (
-    <>
-      <div
-        style={{
-          ...(!noEllipsis && {
-            textOverflow: "ellipsis",
-            overflow: "hidden"
-          })
-        }}
-        {...dataTest}
-        className="tg-cell-wrapper"
-        data-copy-text={text}
-        data-copy-json={JSON.stringify(
-          //tnw: eventually we'll parse these back out and use either the fullValue (for the generic selects) or the regular text vals for everything else
-          column.type === "genericSelect"
-            ? {
-                __strVal: fullValue,
-                __genSelCol: column.path
-              }
-            : { __strVal: text }
-        )}
-        title={title || undefined}
-      >
-        {val}
-      </div>
-      {isCellEditable &&
-        (column.type === "dropdown" ||
-          column.type === "dropdownMulti" ||
-          column.type === "genericSelect") && (
-          <Icon
-            icon="caret-down"
-            style={{
-              position: "absolute",
-              right: 5,
-              opacity: 0.3
-            }}
-            className="cell-edit-dropdown"
-            onClick={() => {
-              startCellEdit(cellId);
-            }}
-          />
-        )}
-
-      {isSelectedCell &&
-        (isRect
-          ? isBottomRightCornerOfRectangle({
-              cellId,
-              selectionGrid,
-              lastRowIndex,
-              lastCellIndex,
-              entityMap,
-              pathToIndex
-            })
-          : isSelectedCell === PRIMARY_SELECTED_VAL) && (
-          <CellDragHandle
-            key={cellId}
-            thisTable={tableRef.current.tableRef}
-            cellId={cellId}
-            isSelectionARectangle={isSelectionARectangle}
-            onDragEnd={onDragEnd}
-          />
-        )}
-    </>
-  );
-};

package/src/DataTable/utils/useDeepEqualMemo.js

@@ -1,10 +0,0 @@
-import { isEqual } from "lodash-es";
-import { useRef } from "react";
-
-export const useDeepEqualMemo = value => {
-  const ref = useRef();
-  if (!isEqual(value, ref.current)) {
-    ref.current = value;
-  }
-  return ref.current;
-};

package/src/DataTable/utils/useTableParams.js

@@ -1,361 +0,0 @@
-import { useContext, useEffect, useMemo, useState } from "react";
-import { change } from "redux-form";
-import { useDispatch, useSelector } from "react-redux";
-import { isFunction, keyBy, get } from "lodash-es";
-import TableFormTrackerContext from "../TableFormTrackerContext";
-import { viewColumn, openColumn } from "./viewColumn";
-import convertSchema from "./convertSchema";
-import { getRecordsFromIdMap } from "./withSelectedEntities";
-import {
-  makeDataTableHandlers,
-  getQueryParams,
-  setCurrentParamsOnUrl,
-  getCurrentParamsFromUrl,
-  getCCDisplayName
-} from "./queryParams";
-import getTableConfigFromStorage from "./getTableConfigFromStorage";
-
-/*
-NOTE:
-This haven't been tested yet. It is the first version of what we should replace withTableParams
-and also the first bit of the DataTable.
-*/
-
-/**
- *  Note all these options can be passed at Design Time or at Runtime (like reduxForm())
- *
- * @export
- *
- * @param {compOrOpts} compOrOpts
- * @typedef {object} compOrOpts
- * @property {*string} formName - required unique identifier for the table
- * @property {Object | Function} schema - The data table schema or a function returning it. The function wll be called with props as the argument.
- * @property {boolean} urlConnected - whether the table should connect to/update the URL
- * @property {boolean} withSelectedEntities - whether or not to pass the selected entities
- * @property {boolean} isCodeModel - whether the model is keyed by code instead of id in the db
- * @property {object} defaults - tableParam defaults such as pageSize, filter, etc
- * @property {boolean} noOrderError - won't console an error if an order is not found on schema
- */
-export default function useTableParams(
-  props // This should be the same as the spread above
-) {
-  const {
-    formName,
-    isTableParamsConnected,
-    urlConnected,
-    onlyOneFilter,
-    defaults = {},
-    // WE NEED THIS HOOK TO BE WRAPPED IN A WITHROUTER OR  MOVE TO REACT-ROUTER-DOM 5
-    // BEST SOLUTION IS TO ASSUME IT IS GOING TO BE RECEIVED
-    history,
-    withSelectedEntities,
-    tableParams: _tableParams,
-    schema: __schema,
-    noForm,
-    orderByFirstColumn,
-    withDisplayOptions,
-    syncDisplayOptionsToDb,
-    tableConfigurations,
-    isViewable,
-    isOpenable,
-    showEmptyColumnsByDefault,
-    isSimple,
-    entities: _origEntities = [],
-    cellRenderer,
-    additionalFilter,
-    additionalOrFilter,
-    doNotCoercePageSize,
-    isLocalCall
-  } = props;
-  const isInfinite = props.isInfinite || isSimple || !props.withPaging;
-  const additionalFilterToUse =
-    typeof additionalFilter === "function"
-      ? additionalFilter.bind(this, props)
-      : () => additionalFilter;
-
-  const additionalOrFilterToUse =
-    typeof additionalOrFilter === "function"
-      ? additionalOrFilter.bind(this, props)
-      : () => additionalOrFilter;
-
-  let _schema;
-  if (isFunction(__schema)) _schema = __schema(props);
-  else _schema = __schema;
-  const convertedSchema = convertSchema(_schema);
-
-  if (isLocalCall) {
-    if (!noForm && (!formName || formName === "tgDataTable")) {
-      throw new Error(
-        "Please pass a unique 'formName' prop to the locally connected <DataTable/> component with schema: ",
-        _schema
-      );
-    }
-    if (orderByFirstColumn && !defaults?.order?.length) {
-      const r = [getCCDisplayName(convertedSchema.fields[0])];
-      defaults.order = r;
-    }
-  } else {
-    //in user instantiated withTableParams() call
-    if (!formName || formName === "tgDataTable") {
-      throw new Error(
-        "Please pass a unique 'formName' prop to the withTableParams() with schema: ",
-        _schema
-      );
-    }
-  }
-
-  const [showForcedHiddenColumns, setShowForcedHidden] = useState(() => {
-    if (showEmptyColumnsByDefault) {
-      return true;
-    }
-    return false;
-  });
-
-  const [tableConfig, setTableConfig] = useState({ fieldOptions: [] });
-
-  useEffect(() => {
-    let newTableConfig = {};
-    if (withDisplayOptions) {
-      if (syncDisplayOptionsToDb) {
-        newTableConfig = tableConfigurations && tableConfigurations[0];
-      } else {
-        newTableConfig = getTableConfigFromStorage(formName);
-      }
-      if (!newTableConfig) {
-        newTableConfig = {
-          fieldOptions: []
-        };
-      }
-    }
-    setTableConfig(newTableConfig);
-  }, [
-    formName,
-    syncDisplayOptionsToDb,
-    tableConfigurations,
-    withDisplayOptions
-  ]);
-
-  // make user set page size persist
-  const userSetPageSize =
-    tableConfig?.userSetPageSize && parseInt(tableConfig.userSetPageSize, 10);
-  if (!syncDisplayOptionsToDb && userSetPageSize) {
-    defaults.pageSize = userSetPageSize;
-  }
-
-  const {
-    reduxFormSearchInput = "",
-    onlyShowRowsWErrors,
-    reduxFormCellValidation,
-    reduxFormEntities,
-    reduxFormSelectedCells = {},
-    reduxFormSelectedEntityIdMap = {},
-    reduxFormQueryParams = {}
-  } = useSelector(state => {
-    if (!state.form[formName]) return {};
-    return state.form[formName].values || {};
-  });
-
-  const entities = reduxFormEntities || _origEntities;
-
-  const { schema } = useMemo(() => {
-    const schema = convertSchema(_schema);
-    if (isViewable) {
-      schema.fields = [viewColumn, ...schema.fields];
-    }
-    if (isOpenable) {
-      schema.fields = [openColumn, ...schema.fields];
-    }
-    // this must come before handling orderings.
-    schema.fields = schema.fields.map(field => {
-      if (field.placementPath) {
-        return {
-          ...field,
-          sortDisabled:
-            field.sortDisabled ||
-            (typeof field.path === "string" && field.path.includes(".")),
-          path: field.placementPath
-        };
-      } else {
-        return field;
-      }
-    });
-
-    if (withDisplayOptions) {
-      const fieldOptsByPath = keyBy(tableConfig.fieldOptions, "path");
-      schema.fields = schema.fields.map(field => {
-        const fieldOpt = fieldOptsByPath[field.path];
-        let noValsForField = false;
-        // only add this hidden column ability if no paging
-        if (
-          !showForcedHiddenColumns &&
-          withDisplayOptions &&
-          (isSimple || isInfinite)
-        ) {
-          noValsForField = entities.every(e => {
-            const val = get(e, field.path);
-            return field.render
-              ? !field.render(val, e)
-              : cellRenderer[field.path]
-                ? !cellRenderer[field.path](val, e)
-                : !val;
-          });
-        }
-        if (noValsForField) {
-          return {
-            ...field,
-            isHidden: true,
-            isForcedHidden: true
-          };
-        } else if (fieldOpt) {
-          return {
-            ...field,
-            isHidden: fieldOpt.isHidden
-          };
-        } else {
-          return field;
-        }
-      });
-
-      const columnOrderings = tableConfig.columnOrderings;
-      if (columnOrderings) {
-        const fieldsWithOrders = [];
-        const fieldsWithoutOrder = [];
-        // if a new field has been added since the orderings were set then we want
-        // it to be at the end instead of the beginning
-        schema.fields.forEach(field => {
-          if (columnOrderings.indexOf(field.path) > -1) {
-            fieldsWithOrders.push(field);
-          } else {
-            fieldsWithoutOrder.push(field);
-          }
-        });
-        schema.fields = fieldsWithOrders
-          .sort(({ path: path1 }, { path: path2 }) => {
-            return (
-              columnOrderings.indexOf(path1) - columnOrderings.indexOf(path2)
-            );
-          })
-          .concat(fieldsWithoutOrder);
-        setTableConfig(prev => ({
-          ...prev,
-          columnOrderings: schema.fields.map(f => f.path)
-        }));
-      }
-    }
-    return { schema };
-  }, [
-    _schema,
-    cellRenderer,
-    entities,
-    isInfinite,
-    isOpenable,
-    isSimple,
-    isViewable,
-    showForcedHiddenColumns,
-    tableConfig,
-    withDisplayOptions
-  ]);
-
-  const selectedEntities = withSelectedEntities
-    ? getRecordsFromIdMap(reduxFormSelectedEntityIdMap)
-    : undefined;
-
-  const currentParams = urlConnected
-    ? getCurrentParamsFromUrl(history.location) //important to use history location and not ownProps.location because for some reason the location path lags one render behind!!
-    : reduxFormQueryParams;
-
-  currentParams.searchTerm = reduxFormSearchInput;
-
-  props = {
-    ...props,
-    ...getQueryParams({
-      doNotCoercePageSize,
-      currentParams,
-      entities: props.entities, // for local table
-      urlConnected,
-      defaults: props.defaults,
-      schema: convertedSchema,
-      isInfinite,
-      isLocalCall,
-      additionalFilter: additionalFilterToUse,
-      additionalOrFilter: additionalOrFilterToUse,
-      noOrderError: props.noOrderError,
-      isCodeModel: props.isCodeModel,
-      ownProps: props
-    })
-  };
-
-  const dispatch = useDispatch();
-  let tableParams;
-  if (!isTableParamsConnected) {
-    const updateSearch = val => {
-      setTimeout(() => {
-        dispatch(change(formName, "reduxFormSearchInput", val || ""));
-      });
-    };
-
-    let setNewParams;
-    if (urlConnected) {
-      setNewParams = newParams => {
-        setCurrentParamsOnUrl(newParams, history.replace);
-        dispatch(change(formName, "reduxFormQueryParams", newParams)); //we always will update the redux params as a workaround for withRouter not always working if inside a redux-connected container https://github.com/ReactTraining/react-router/issues/5037
-      };
-    } else {
-      setNewParams = function (newParams) {
-        dispatch(change(formName, "reduxFormQueryParams", newParams));
-      };
-    }
-
-    const bindThese = makeDataTableHandlers({
-      setNewParams,
-      updateSearch,
-      defaults,
-      onlyOneFilter
-    });
-
-    const boundDispatchProps = {};
-    //bind currentParams to actions
-    Object.keys(bindThese).forEach(function (key) {
-      const action = bindThese[key];
-      boundDispatchProps[key] = function (...args) {
-        action(...args, currentParams);
-      };
-    });
-
-    const changeFormValue = (...args) => dispatch(change(formName, ...args));
-
-    tableParams = {
-      changeFormValue,
-      selectedEntities,
-      ..._tableParams,
-      ...props,
-      ...boundDispatchProps,
-      form: formName, //this will override the default redux form name
-      isTableParamsConnected: true //let the table know not to do local sorting/filtering etc.
-    };
-  }
-
-  const formTracker = useContext(TableFormTrackerContext);
-  useEffect(() => {
-    if (formTracker.isActive && !formTracker.formNames.includes(formName)) {
-      formTracker.pushFormName(formName);
-    }
-  }, [formTracker, formName]);
-
-  return {
-    ...props,
-    selectedEntities,
-    tableParams,
-    currentParams,
-    schema,
-    entities,
-    reduxFormSearchInput,
-    onlyShowRowsWErrors,
-    reduxFormCellValidation,
-    reduxFormSelectedCells,
-    reduxFormSelectedEntityIdMap,
-    reduxFormQueryParams,
-    showForcedHiddenColumns,
-    setShowForcedHidden
-  };
-}