@teselagen/ui 0.7.34 → 0.7.36

package/src/DataTable/PagingTool.js

@@ -1,225 +0,0 @@
-import React, { useState, useEffect, useRef, useCallback } from "react";
-import classNames from "classnames";
-import { noop, get, toInteger } from "lodash-es";
-import { Button, Classes } from "@blueprintjs/core";
-import { onEnterOrBlurHelper } from "../utils/handlerHelpers";
-import { defaultPageSizes } from "./utils/queryParams";
-import { getIdOrCodeOrIndex } from "./utils";
-
-function PagingInput({ disabled, onBlur, defaultPage }) {
-  const [page, setPage] = useState(defaultPage);
-  const defaultValue = useRef(defaultPage);
-
-  useEffect(() => {
-    if (page !== defaultPage && defaultValue.current !== defaultPage) {
-      setPage(defaultPage);
-    }
-    defaultValue.current = defaultPage;
-  }, [page, defaultPage]);
-
-  return (
-    <input
-      name="page"
-      style={{
-        marginLeft: 5,
-        width: page > 999 ? 65 : page > 99 ? 45 : 35,
-        marginRight: 8
-      }}
-      value={page}
-      disabled={disabled}
-      onChange={e => {
-        setPage(e.target.value);
-      }}
-      {...onEnterOrBlurHelper(onBlur)}
-      className={Classes.INPUT}
-    />
-  );
-}
-
-// Define the functional component and its props
-const PagingTool = ({
-  controlled_hasNextPage,
-  controlled_onRefresh,
-  controlled_page,
-  controlled_setPage,
-  controlled_setPageSize,
-  controlled_total,
-  disabled: _disabled,
-  disableSetPageSize,
-  entities,
-  entityCount,
-  hideSetPageSize,
-  hideTotalPages,
-  keepSelectionOnPageChange,
-  onRefresh: _onRefresh,
-  page: _page,
-  pageSize,
-  pagingDisabled,
-  persistPageSize = noop,
-  scrollToTop,
-  setPage: _setPage,
-  setPageSize: _setPageSize,
-  setSelectedEntityIdMap
-}) => {
-  const page = controlled_page || _page;
-  const total = controlled_total || entityCount;
-  const disabled = _disabled || pagingDisabled;
-  const onRefresh = controlled_onRefresh || _onRefresh;
-  const setPage = controlled_setPage || _setPage;
-  const setPageSize = controlled_setPageSize || _setPageSize;
-
-  const onPageChange = useCallback(() => {
-    const record = get(entities, "[0]");
-    if (
-      !keepSelectionOnPageChange &&
-      (!record || !getIdOrCodeOrIndex(record))
-    ) {
-      setSelectedEntityIdMap({});
-    }
-    scrollToTop();
-  }, [
-    entities,
-    keepSelectionOnPageChange,
-    scrollToTop,
-    setSelectedEntityIdMap
-  ]);
-  // Define local state
-  const [refetching, setRefetching] = useState(false);
-
-  // Initialize additional page sizes
-  useEffect(() => {
-    const additionalPageSize =
-      window.frontEndConfig && window.frontEndConfig.additionalPageSize
-        ? [toInteger(window.frontEndConfig.additionalPageSize)]
-        : [];
-    window.tgPageSizes = [...defaultPageSizes, ...additionalPageSize];
-  }, []);
-
-  // Define event handlers for the component
-  const onRefreshHandler = async () => {
-    setRefetching(true);
-    await onRefresh();
-    setRefetching(false);
-  };
-
-  const setPageHandler = page => {
-    setPage(page);
-    onPageChange(page);
-  };
-
-  const setPageSizeHandler = e => {
-    const newPageSize = parseInt(e.target.value, 10);
-    setPageSize(newPageSize);
-    persistPageSize(newPageSize);
-  };
-
-  const pageBackHandler = () => {
-    setPageHandler(parseInt(page, 10) - 1);
-  };
-
-  const pageForwardHandler = () => {
-    setPageHandler(parseInt(page, 10) + 1);
-  };
-
-  const pageInputBlurHandler = e => {
-    const lastPage = Math.ceil(total / pageSize);
-    const pageValue = parseInt(e.target.value, 10);
-    const selectedPage =
-      pageValue > lastPage
-        ? lastPage
-        : pageValue < 1 || isNaN(pageValue)
-          ? 1
-          : pageValue;
-    setPageHandler(selectedPage);
-  };
-
-  // Define rendering logic
-  const pageStart = (page - 1) * pageSize + 1;
-  if (pageStart < 0) throw new Error("We should never have page be <0");
-  const backEnabled = page - 1 > 0;
-  const forwardEnabled = page * pageSize < total;
-  const lastPage = Math.ceil(total / pageSize);
-  const options = [...(window.tgPageSizes || defaultPageSizes)];
-  if (!options.includes(pageSize)) {
-    options.push(pageSize);
-  }
-
-  return (
-    <div className="paging-toolbar-container">
-      {onRefresh && (
-        <Button
-          minimal
-          loading={refetching}
-          icon="refresh"
-          disabled={disabled}
-          onClick={onRefreshHandler}
-        />
-      )}
-      {!hideSetPageSize && (
-        <div
-          title="Set Page Size"
-          className={classNames(Classes.SELECT, Classes.MINIMAL)}
-        >
-          <select
-            name="page-size"
-            className="paging-page-size"
-            onChange={setPageSizeHandler}
-            disabled={disabled || disableSetPageSize}
-            value={pageSize}
-          >
-            {[
-              <option key="page-size-placeholder" disabled value="fake">
-                Size
-              </option>,
-              ...options.map(size => {
-                return (
-                  <option key={size} value={size}>
-                    {size}
-                  </option>
-                );
-              })
-            ]}
-          </select>
-        </div>
-      )}
-      <Button
-        onClick={pageBackHandler}
-        disabled={!backEnabled || disabled}
-        minimal
-        className="paging-arrow-left"
-        icon="chevron-left"
-      />
-      <div>
-        {hideTotalPages ? (
-          page
-        ) : total ? (
-          <div>
-            <PagingInput
-              disabled={disabled}
-              onBlur={pageInputBlurHandler}
-              defaultPage={page}
-              lastPage={lastPage}
-            />
-            of {lastPage}
-          </div>
-        ) : (
-          "No Rows"
-        )}
-      </div>
-      <Button
-        style={{ marginLeft: 5 }}
-        disabled={
-          (controlled_hasNextPage === undefined
-            ? !forwardEnabled
-            : !controlled_hasNextPage) || disabled
-        }
-        icon="chevron-right"
-        minimal
-        className="paging-arrow-right"
-        onClick={pageForwardHandler}
-      />
-    </div>
-  );
-};
-
-export default PagingTool;

package/src/DataTable/RenderCell.js

@@ -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 "./EditableCell";
-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/SearchBar.js

@@ -1,69 +0,0 @@
-import React, { useState } from "react";
-import { Button, Classes, Spinner } from "@blueprintjs/core";
-import classNames from "classnames";
-import { onEnterHelper } from "../utils/handlerHelpers";
-import { InputField } from "../FormComponents";
-
-const SearchBar = ({
-  searchInput,
-  setSearchTerm,
-  loading,
-  searchMenuButton,
-  disabled,
-  autoFocusSearch,
-  noForm
-}) => {
-  const [inputText, setInputText] = useState(searchInput);
-  if (noForm) {
-    console.error(
-      "The search bar requires the component to be wrapped in a form"
-    );
-    return;
-  }
-  let rightElement;
-  // need to always render searchMenuButton so it doesn't close
-  if (searchMenuButton) {
-    rightElement = (
-      <div style={{ display: "flex" }}>
-        {loading && <Spinner size="18" />}
-        {searchMenuButton}
-      </div>
-    );
-  } else {
-    rightElement = loading ? (
-      <Spinner size="18" />
-    ) : (
-      <Button
-        minimal
-        icon="search"
-        onClick={() => {
-          setSearchTerm(inputText);
-        }}
-      />
-    );
-  }
-  return (
-    <InputField
-      autoFocus={autoFocusSearch}
-      disabled={disabled}
-      loading={loading}
-      type="search"
-      defaultValue={searchInput}
-      value={inputText}
-      onChange={e => {
-        setInputText(e.target.value);
-      }}
-      className={classNames("datatable-search-input", Classes.ROUND)}
-      placeholder="Search..."
-      {...onEnterHelper(e => {
-        e.preventDefault();
-        e.stopPropagation();
-        setSearchTerm(e.target.value);
-        e.nativeEvent.stopImmediatePropagation();
-      })}
-      rightElement={rightElement}
-    />
-  );
-};
-
-export default SearchBar;

package/src/DataTable/SortableColumns.js

@@ -1,100 +0,0 @@
-import React from "react";
-import { MouseSensor, useSensor, useSensors, DndContext } from "@dnd-kit/core";
-import {
-  SortableContext,
-  horizontalListSortingStrategy
-} from "@dnd-kit/sortable";
-import { restrictToHorizontalAxis } from "@dnd-kit/modifiers";
-
-const CustomTheadComponent = ({
-  children: _children,
-  className,
-  onSortEnd,
-  onSortStart,
-  style
-}) => {
-  // We need to do this because react table gives the children wrapped
-  // in another component
-  const children = _children.props.children;
-  const mouseSensor = useSensor(MouseSensor, {
-    activationConstraint: {
-      distance: 10
-    }
-  });
-
-  const sensors = useSensors(mouseSensor);
-  const handleDragEnd = event => {
-    const { active, over } = event;
-
-    if (!over || !active) {
-      return;
-    }
-
-    if (active.id === over.id) {
-      return;
-    }
-
-    onSortEnd({
-      oldIndex: parseInt(active.id),
-      newIndex: parseInt(over.id)
-    });
-  };
-
-  return (
-    <DndContext
-      onDragStart={onSortStart}
-      onDragEnd={handleDragEnd}
-      modifiers={[restrictToHorizontalAxis]}
-      sensors={sensors}
-    >
-      <div className={"rt-thead " + className} style={style}>
-        <div className="rt-tr">
-          <SortableContext
-            items={children.map((_, index) => `${index}`)}
-            strategy={horizontalListSortingStrategy}
-          >
-            {children}
-          </SortableContext>
-        </div>
-      </div>
-    </DndContext>
-  );
-};
-
-const SortableColumns = ({ className, style, children, moveColumn }) => {
-  const shouldCancelStart = e => {
-    const className = e.target.className;
-    // if its an svg then it's a blueprint icon
-    return (
-      e.target instanceof SVGElement || className.indexOf("rt-resizer") > -1
-    );
-  };
-
-  const onSortEnd = (...args) => {
-    const { oldIndex, newIndex } = args[0];
-    document.body.classList.remove("drag-active");
-    moveColumn({
-      oldIndex,
-      newIndex
-    });
-  };
-
-  const onSortStart = () => {
-    document.body.classList.add("drag-active");
-  };
-
-  return (
-    <CustomTheadComponent
-      className={className}
-      style={style}
-      onSortStart={onSortStart}
-      onSortEnd={onSortEnd}
-      helperClass="above-dialog"
-      shouldCancelStart={shouldCancelStart}
-    >
-      {children}
-    </CustomTheadComponent>
-  );
-};
-
-export default SortableColumns;

package/src/DataTable/TableFormTrackerContext.js

@@ -1,10 +0,0 @@
-import React from "react";
-
-const TableFormTrackerContext = React.createContext({
-  formNames: [],
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  pushFormName: () => {},
-  isActive: false
-});
-
-export default TableFormTrackerContext;

package/src/DataTable/ThComponent.js

@@ -1,44 +0,0 @@
-import React from "react";
-import { useSortable } from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
-import classNames from "classnames";
-
-export const ThComponent = ({
-  toggleSort,
-  immovable,
-  className,
-  children,
-  style,
-  columnindex,
-  ...rest
-}) => {
-  const index = columnindex ?? -1;
-  const { attributes, listeners, setNodeRef, transform, transition } =
-    useSortable({
-      id: `${index}`,
-      disabled: immovable === "true"
-    });
-
-  const sortStyles = {
-    transform: CSS.Transform.toString(transform),
-    transition
-  };
-
-  return (
-    <div
-      style={{ ...sortStyles, ...style }}
-      ref={setNodeRef}
-      {...attributes}
-      {...listeners}
-      className={classNames("rt-th", className)}
-      onClick={e => toggleSort && toggleSort(e)}
-      role="columnheader"
-      tabIndex="-1" // Resolves eslint issues without implementing keyboard navigation incorrectly
-      columnindex={columnindex}
-      index={index}
-      {...rest}
-    >
-      {children}
-    </div>
-  );
-};

package/src/DataTable/dataTableEnhancer.js

@@ -1,41 +0,0 @@
-/**
- * @param {options} options
- * @typedef {object} options
- * @property {boolean} isPlural Are we searching for 1 thing or many?
- * @property {string} queryName What the props come back on ( by default = modelName + 'Query')
- */
-import { reduxForm } from "redux-form";
-import { branch, compose, withProps } from "recompose";
-import { withRouter } from "react-router-dom";
-
-/*
-  Right now DataTable is doing the same as withTableParams, so the logic is being
-  run twice. We need to refactor this to make it more DRY.
-  We could do two possible refactorings:
-  - remove withTableParams and just give all the appropiate props to DataTable. This would
-  make the component simpler.
-  - remove the logic from DataTable and just use withTableParams and a new hook called
-  useTableParams. This would be more flexible in the case we want to be able to use
-  pagination in a different component.
-  We should avoid having the component handle all the different
-  cases of input because of the next reasons:
-  1. It makes the component more complex and harder to understand.
-  2. It makes the component harder to test.
-  3. It makes the component harder to reuse.
-  4. Maintaining the the logic in the component is harder.
-  Keeping the logic and uses simple makes maintaining easier.
-
-  In my opinion, reduxForm could be replaced here with regular redux or even just be taken down.
-  Could be a major simplification, but this needs to be analized with lims for better
-  understanding if it's possible.
-*/
-export default compose(
-  // form prop is needed for redux-form, but we are giving this prop as
-  // formName, so we need to rename it. Previously it was done in the withTableParams, but now
-  // it doesn't have it by default.
-  withProps(({ formName }) => ({ form: formName })),
-  // the formName is passed via withTableParams and is often user overridden
-  branch(props => !props.noForm, reduxForm({})),
-  // don't use withRouter if noRouter is passed!
-  branch(props => !props.noRouter, withRouter)
-);