@teselagen/ui 0.7.34 → 0.7.36

package/src/DataTable/utils/utils.js

@@ -1,37 +0,0 @@
-import { getIdOrCodeOrIndex } from "./getIdOrCodeOrIndex";
-
-export const getFieldPathToIndex = schema => {
-  const fieldToIndex = {};
-  schema.fields.forEach((f, i) => {
-    fieldToIndex[f.path] = i;
-  });
-  return fieldToIndex;
-};
-
-export const defaultParsePaste = str => {
-  return str.split(/\r\n|\n|\r/).map(row => row.split("\t"));
-};
-
-export const getEntityIdToEntity = entities => {
-  const entityIdToEntity = {};
-  entities.forEach((e, i) => {
-    entityIdToEntity[getIdOrCodeOrIndex(e, i)] = { e, i };
-  });
-  return entityIdToEntity;
-};
-
-const endsWithNumber = str => {
-  return /[0-9]+$/.test(str);
-};
-
-export const getNumberStrAtEnd = str => {
-  if (endsWithNumber(str)) {
-    return str.match(/[0-9]+$/)[0];
-  }
-
-  return null;
-};
-
-export const stripNumberAtEnd = str => {
-  return str?.replace?.(getNumberStrAtEnd(str), "");
-};

package/src/DataTable/utils/withSelectedEntities.js

@@ -1,65 +0,0 @@
-import { formValueSelector } from "redux-form";
-import { reduce } from "lodash-es";
-import { connect } from "react-redux";
-/**
- * @param {*string} formName
- * @param {*string} formName
- * @param {*string} formName
- * @param {*string} ...etc
- * adds a new prop `${formName}SelectedEntities` eg sequenceTableSelectedEntities
- */
-export default function withSelectedEntities(...formNames) {
-  if (!formNames.length) {
-    throw new Error(
-      "You need to pass at least one arg to withSelectedEntities"
-    );
-  }
-  if (typeof formNames[0] === "string") {
-    //NEW WAY
-    return connect(state => {
-      return formNames.reduce((acc, formName) => {
-        acc[formName + "SelectedEntities"] = getRecordsFromReduxForm(
-          state,
-          formName
-        );
-        return acc;
-      }, {});
-    });
-  } else {
-    //OLD WAY:
-    const { formName, name } = formNames[0];
-    if (!formName) {
-      throw new Error(
-        "Please pass a {formName} option when using withSelectedEntities"
-      );
-    }
-    return connect(state => {
-      return {
-        [name || "selectedEntities"]: getRecordsFromReduxForm(state, formName)
-      };
-    });
-  }
-}
-
-export function getRecordsFromReduxForm(state, formName) {
-  const selector = formValueSelector(formName);
-  return getRecordsFromIdMap(selector(state, "reduxFormSelectedEntityIdMap"));
-}
-
-export function getRecordsFromIdMap(idMap = {}) {
-  return reduce(
-    idMap,
-    (acc, item) => {
-      if (item && item.entity) acc.push(item);
-      return acc;
-    },
-    []
-  )
-    .sort((a, b) => a.rowIndex - b.rowIndex)
-    .map(item => item.entity);
-}
-
-export function getSelectedEntities(storeOrState, formName) {
-  const state = storeOrState.getState ? storeOrState.getState() : storeOrState;
-  return getRecordsFromReduxForm(state, formName);
-}

package/src/DataTable/utils/withTableParams.js

@@ -1,288 +0,0 @@
-import React, { useCallback, useMemo } from "react";
-import { change as _change, formValueSelector } from "redux-form";
-import { useDispatch, useSelector } from "react-redux";
-import convertSchema from "./convertSchema";
-import {
-  makeDataTableHandlers,
-  getQueryParams,
-  setCurrentParamsOnUrl,
-  getCurrentParamsFromUrl
-} from "./queryParams";
-import { withRouter } from "react-router-dom";
-import getTableConfigFromStorage from "./getTableConfigFromStorage";
-import { useDeepEqualMemo } from "../../utils/hooks/useDeepEqualMemo";
-import { branch, compose } from "recompose";
-import { getCCDisplayName } from "./tableQueryParamsToHasuraClauses";
-
-/**
- *  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 const useTableParams = props => {
-  const {
-    additionalFilter,
-    controlled_pageSize,
-    defaults: _defaults,
-    doNotCoercePageSize,
-    entities,
-    formName = "tgDataTable",
-    history,
-    initialValues,
-    isCodeModel,
-    isInfinite,
-    isLocalCall = false,
-    isSimple,
-    noForm,
-    noOrderError,
-    onlyOneFilter,
-    orderByFirstColumn,
-    pageSize,
-    schema,
-    syncDisplayOptionsToDb,
-    tableParams: _tableParams,
-    urlConnected,
-    withDisplayOptions,
-    withPaging,
-    withSelectedEntities
-  } = props;
-
-  const defaults = useMemo(
-    () => ({
-      pageSize: controlled_pageSize || 25,
-      order: [], //[-name, statusCode] //an array of camelCase display names with - sign to denote reverse
-      searchTerm: "",
-      page: 1,
-      filters: [
-        //filters look like this:
-        // {
-        //   selectedFilter: 'textContains', //camel case
-        //   filterOn: ccDisplayName, //camel case display name if available and string, otherwise path
-        //   filterValue: 'thomas',
-        // }
-      ],
-      ..._defaults
-    }),
-    [_defaults, controlled_pageSize]
-  );
-
-  const convertedSchema = useMemo(() => convertSchema(schema), [schema]);
-
-  if (isLocalCall) {
-    if (!noForm && (!formName || formName === "tgDataTable")) {
-      console.error(
-        "Please pass a unique 'formName' prop to the locally connected <DataTable/> component with schema: ",
-        schema
-      );
-    }
-    if (orderByFirstColumn && !defaults?.order?.length) {
-      defaults.order = [getCCDisplayName(convertedSchema.fields[0])];
-    }
-  } else {
-    //in user instantiated withTableParams() call
-    if (!formName || formName === "tgDataTable") {
-      console.error(
-        "Please pass a unique 'formName' prop to the withTableParams() with schema: ",
-        schema
-      );
-    }
-  }
-
-  const {
-    reduxFormQueryParams: _reduxFormQueryParams = {},
-    reduxFormSelectedEntityIdMap: _reduxFormSelectedEntityIdMap = {}
-  } = useSelector(state =>
-    formValueSelector(formName)(
-      state,
-      "reduxFormQueryParams",
-      "reduxFormSelectedEntityIdMap"
-    )
-  );
-
-  // We want to make sure we don't rerender everything unnecessary
-  // with redux-forms we tend to do unnecessary renders
-  const reduxFormQueryParams = useDeepEqualMemo(_reduxFormQueryParams);
-  const reduxFormSelectedEntityIdMap = useDeepEqualMemo(
-    _reduxFormSelectedEntityIdMap
-  );
-
-  const _currentParams = useMemo(() => {
-    const tmp =
-      (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) || {};
-
-    return tmp;
-  }, [history?.location, reduxFormQueryParams, urlConnected]);
-
-  const selectedEntities = useMemo(
-    () =>
-      withSelectedEntities
-        ? Object.values(reduxFormSelectedEntityIdMap)
-            .sort((a, b) => a.rowIndex - b.rowIndex)
-            .map(item => item.entity)
-        : undefined,
-    [reduxFormSelectedEntityIdMap, withSelectedEntities]
-  );
-
-  const currentParams = useDeepEqualMemo(_currentParams);
-
-  const defaultsToUse = useMemo(() => {
-    const _tableConfig = getTableConfigFromStorage(formName);
-    const userSetPageSize =
-      _tableConfig?.userSetPageSize &&
-      parseInt(_tableConfig.userSetPageSize, 10);
-    let _defaultsToUse = defaults;
-    if (!syncDisplayOptionsToDb && userSetPageSize) {
-      _defaultsToUse = _defaultsToUse || {};
-      _defaultsToUse.pageSize = userSetPageSize;
-    }
-
-    return _defaultsToUse;
-  }, [defaults, formName, syncDisplayOptionsToDb]);
-
-  const passingProps = useMemo(
-    () => ({
-      formName: "tgDataTable",
-      ...props,
-      pageSize: controlled_pageSize || pageSize,
-      defaults: defaultsToUse,
-      location: history?.location
-    }),
-    // We don't want to rerender this every time a prop changes
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [controlled_pageSize, defaultsToUse, pageSize, history?.location]
-  );
-
-  const queryParams = useMemo(() => {
-    return getQueryParams({
-      doNotCoercePageSize,
-      currentParams,
-      entities, // for local table
-      urlConnected,
-      defaults: defaultsToUse,
-      schema: convertedSchema,
-      isInfinite: isInfinite || (isSimple && !withPaging),
-      isLocalCall,
-      additionalFilter,
-      noOrderError,
-      isCodeModel,
-      ownProps: passingProps
-    });
-  }, [
-    additionalFilter,
-    passingProps,
-    doNotCoercePageSize,
-    currentParams,
-    entities,
-    urlConnected,
-    defaultsToUse,
-    convertedSchema,
-    isInfinite,
-    isSimple,
-    withPaging,
-    isLocalCall,
-    noOrderError,
-    isCodeModel
-  ]);
-
-  const dispatch = useDispatch();
-  const change = useCallback(
-    (...args) => dispatch(_change(formName, ...args)),
-    [dispatch, formName]
-  );
-
-  const setNewParams = useCallback(
-    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
-      change("reduxFormQueryParams", prev => {
-        let tmp = newParams;
-        if (typeof tmp === "function") tmp = newParams(prev);
-        urlConnected && setCurrentParamsOnUrl(tmp, history?.replace);
-        return tmp;
-      });
-    },
-    [change, history?.replace, urlConnected]
-  );
-
-  const dispatchProps = useMemo(
-    () =>
-      makeDataTableHandlers({
-        setNewParams,
-        defaults,
-        onlyOneFilter
-      }),
-    [defaults, onlyOneFilter, setNewParams]
-  );
-
-  const tableParams = useMemo(
-    () => ({
-      changeFormValue: (...args) => change(...args),
-      selectedEntities,
-      ..._tableParams,
-      formName,
-      initialValues,
-      isLocalCall,
-      schema,
-      currentParams,
-      withDisplayOptions,
-      ...queryParams,
-      ...dispatchProps,
-      form: formName, //this will override the default redux form name
-      isTableParamsConnected: true //let the table know not to do local sorting/filtering etc.
-    }),
-    [
-      _tableParams,
-      change,
-      currentParams,
-      dispatchProps,
-      formName,
-      initialValues,
-      isLocalCall,
-      queryParams,
-      schema,
-      selectedEntities,
-      withDisplayOptions
-    ]
-  );
-
-  return {
-    isLocalCall,
-    schema,
-    ...queryParams,
-    ...(withSelectedEntities &&
-      typeof withSelectedEntities === "string" && {
-        [withSelectedEntities]: selectedEntities
-      }),
-    currentParams,
-    selectedEntities,
-    tableParams,
-    urlConnected
-  };
-};
-
-const withTableParams = topLevelOptions =>
-  compose(
-    //don't use withRouter if noRouter is passed!
-    branch(({ noRouter }) => !noRouter, withRouter),
-    Comp => props => {
-      const tableParams = useTableParams({
-        ...topLevelOptions,
-        ...props
-      });
-      return <Comp {...props} {...tableParams} />;
-    }
-  );
-
-export default withTableParams;

package/src/DataTable/validateTableWideErrors.js

@@ -1,160 +0,0 @@
-import { getIdOrCodeOrIndex } from "./utils";
-import { getCellVal } from "./getCellVal";
-import { forEach, isArray } from "lodash-es";
-import { startCase } from "lodash-es";
-import { camelCase } from "lodash-es";
-
-const uniqueMsg = "This value must be unique";
-export function validateTableWideErrors({
-  entities,
-  schema,
-  optionalUserSchema,
-  newCellValidate
-}) {
-  forEach(newCellValidate, (err, cellId) => {
-    if (err && err._isTableWideError) {
-      delete newCellValidate[cellId];
-    }
-  });
-  if (schema.tableWideValidation) {
-    const newErrs = schema.tableWideValidation({
-      entities
-    });
-    forEach(newErrs, (err, cellId) => {
-      newCellValidate[cellId] = {
-        message: err,
-        _isTableWideError: true
-      };
-    });
-  }
-  const displayNameMap = {};
-  const fieldUpperToPath = {};
-
-  forEach(schema.fields, f => {
-    fieldUpperToPath[f.path.toUpperCase()] = f.path;
-    displayNameMap[f.path] = f.displayName || startCase(camelCase(f.path));
-  });
-  function getDisplayName(path) {
-    return displayNameMap[path] || startCase(camelCase(path));
-  }
-
-  if (schema.requireAtLeastOneOf) {
-    //make sure at least one of the required fields is present
-    (isArray(schema.requireAtLeastOneOf[0])
-      ? schema.requireAtLeastOneOf
-      : [schema.requireAtLeastOneOf]
-    ).forEach(alo => {
-      entities.forEach(entity => {
-        if (!alo.some(path => getCellVal(entity, path))) {
-          alo.forEach(path => {
-            const cellId = `${getIdOrCodeOrIndex(entity)}:${path}`;
-            newCellValidate[cellId] = {
-              message: `At least one of these fields must be present - ${alo
-                .map(getDisplayName)
-                .join(", ")}`,
-              _isTableWideError: true
-            };
-          });
-        }
-      });
-    });
-  }
-  if (schema.requireExactlyOneOf) {
-    (isArray(schema.requireExactlyOneOf[0])
-      ? schema.requireExactlyOneOf
-      : [schema.requireExactlyOneOf]
-    ).forEach(reqs => {
-      entities.forEach(entity => {
-        const present = reqs.filter(path => getCellVal(entity, path));
-        if (present.length !== 1) {
-          reqs.forEach(path => {
-            const cellId = `${getIdOrCodeOrIndex(entity)}:${path}`;
-            const fields = reqs.map(getDisplayName).join(", ");
-            const err = {
-              message:
-                present.length === 0
-                  ? `One of these fields is required - ${fields}`
-                  : `Cannot have more than one of these fields - ${fields}`,
-              _isTableWideError: true
-            };
-            newCellValidate[cellId] = err;
-          });
-        }
-      });
-    });
-  }
-
-  const requireIfs = [];
-  schema.fields.forEach(col => {
-    const { path, requireIf } = col;
-    if (requireIf) {
-      const requireIfPath = fieldUpperToPath[requireIf.toUpperCase()];
-      requireIfs.push([requireIfPath, path]);
-    }
-  });
-  requireIfs.forEach(([requireIfPath, path]) => {
-    entities.forEach(entity => {
-      const requireIfVal = getCellVal(entity, requireIfPath);
-      const pathVal = getCellVal(entity, path);
-      if (requireIfVal && !pathVal) {
-        const cellId = `${getIdOrCodeOrIndex(entity)}:${path}`;
-        newCellValidate[cellId] = {
-          message: `This field is required if ${displayNameMap[requireIfPath]} is present`,
-          _isTableWideError: true
-        };
-      }
-    });
-  });
-  if (schema.requireAllOrNone) {
-    (isArray(schema.requireAllOrNone[0])
-      ? schema.requireAllOrNone
-      : [schema.requireAllOrNone]
-    ).forEach(reqs => {
-      entities.forEach(entity => {
-        const present = reqs.filter(path => getCellVal(entity, path));
-        if (present.length && present.length !== reqs.length) {
-          reqs.forEach(path => {
-            const cellId = `${getIdOrCodeOrIndex(entity)}:${path}`;
-            const fields = reqs.map(getDisplayName).join(", ");
-            const err = {
-              message: `Please specify either ALL of the following fields or NONE of them - ${fields}`,
-              _isTableWideError: true
-            };
-            newCellValidate[cellId] = err;
-          });
-        }
-      });
-    });
-  }
-
-  schema.fields.forEach(col => {
-    let { path, isUnique } = col;
-    if (isUnique) {
-      if (optionalUserSchema) {
-        path = col.matches[0].item.path;
-      }
-      const existingVals = {};
-      entities.forEach(entity => {
-        const val = getCellVal(entity, path, col);
-        if (!val) return;
-        const cellId = `${getIdOrCodeOrIndex(entity)}:${path}`;
-        if (existingVals[val]) {
-          newCellValidate[cellId] = {
-            message: uniqueMsg,
-            _isTableWideError: true
-          };
-          newCellValidate[existingVals[val]] = {
-            message: uniqueMsg,
-            _isTableWideError: true
-          };
-        } else {
-          if (newCellValidate[cellId] === uniqueMsg) {
-            delete newCellValidate[cellId];
-          }
-          existingVals[val] = cellId;
-        }
-      });
-    }
-  });
-  return newCellValidate;
-}

package/src/DataTable/viewColumn.js

@@ -1,97 +0,0 @@
-import React from "react";
-import { Icon, Button, Tooltip } from "@blueprintjs/core";
-import { reduce } from "lodash-es";
-
-export const viewColumn = {
-  width: 35,
-  noEllipsis: true,
-  hideInMenu: true,
-  immovable: true,
-  type: "action",
-  render: () => {
-    return <Icon className="dt-eyeIcon" icon="eye-open" />;
-  }
-};
-
-export const openColumn = ({ onDoubleClick, history }) => ({
-  ...viewColumn,
-  render: (val, record, rowInfo) => {
-    return (
-      <Tooltip content="Open">
-        <Button
-          onClick={e => {
-            e.stopPropagation();
-            onDoubleClick &&
-              onDoubleClick(rowInfo.original, rowInfo.index, history);
-          }}
-          minimal
-          small
-          className="dt-eyeIcon"
-          icon="document-open"
-        />
-      </Tooltip>
-    );
-  }
-});
-
-export const multiViewColumn = {
-  ...viewColumn,
-  columnHeader: ({ recordIdToIsVisibleMap, setRecordIdToIsVisibleMap }) => {
-    const allVisible = reduce(
-      recordIdToIsVisibleMap,
-      (acc, val) => acc && val,
-      true
-    );
-    return (
-      <Tooltip content={allVisible ? "Hide All" : "Show All"}>
-        <Button
-          className={`showHideAllButton-${allVisible ? "visible" : "hidden"}`}
-          minimal
-          onClick={() => {
-            setRecordIdToIsVisibleMap(
-              reduce(
-                recordIdToIsVisibleMap,
-                (acc, val, key) => {
-                  acc[key] = !allVisible;
-                  return acc;
-                },
-                {}
-              )
-            );
-          }}
-          icon={allVisible ? "eye-open" : "eye-off"}
-        />
-      </Tooltip>
-    );
-  },
-  render: (
-    val,
-    record,
-    row,
-    { recordIdToIsVisibleMap, setRecordIdToIsVisibleMap }
-  ) => {
-    if (!recordIdToIsVisibleMap) {
-      return null;
-    }
-    const isVisible = recordIdToIsVisibleMap[record.id];
-    return (
-      <Tooltip content={isVisible ? "Hide" : "Show"}>
-        <Button
-          onClick={e => {
-            e.stopPropagation();
-            e.preventDefault();
-            setRecordIdToIsVisibleMap(
-              Object.assign({}, recordIdToIsVisibleMap, {
-                [record.id]: !isVisible
-              })
-            );
-          }}
-          minimal
-          small
-          className={`showHideButton-${isVisible ? "visible" : "hidden"}-${record.id}`}
-          icon={isVisible ? "eye-open" : "eye-off"}
-        />
-      </Tooltip>
-    );
-  }
-};