@teselagen/ui 0.7.32 → 0.7.33-beta.2

package/src/FormSeparator.js

@@ -0,0 +1,9 @@
+import React from "react";
+import "./style.css";
+export const FormSeparator = ({ label = "or" } = {}) => {
+  return (
+    <div className="form-separator">
+      <p style={{ opacity: 0.8 }}>{label}</p>
+    </div>
+  );
+};

package/src/LoadingDots.js

@@ -0,0 +1,14 @@
+import React, { useEffect, useState } from "react";
+
+export const LoadingDots = () => {
+  const [dots, setDots] = useState("");
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setDots(dots => {
+        return dots.length === 3 ? "" : dots + ".";
+      });
+    }, 500);
+    return () => clearInterval(interval);
+  }, []);
+  return <span>{dots}</span>;
+};

package/src/PagingTool.js

@@ -0,0 +1,225 @@
+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/RenderCell.js

@@ -0,0 +1,191 @@
+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/SearchBar.js

@@ -0,0 +1,69 @@
+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/SortableColumns.js

@@ -0,0 +1,100 @@
+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/TableFormTrackerContext.js

@@ -0,0 +1,10 @@
+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/ThComponent.js

@@ -0,0 +1,44 @@
+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/TimelineEvent.js

@@ -0,0 +1,31 @@
+import React from "react";
+import dayjs from "dayjs";
+import { Classes } from "@blueprintjs/core";
+import classNames from "classnames";
+import relativeTime from "dayjs/plugin/relativeTime";
+
+dayjs.extend(relativeTime);
+
+function TimelineEvent({ date, children }) {
+  return (
+    <div className="tg-timeline-event">
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center"
+        }}
+      >
+        <div className="tg-timeline-circle" />
+        {children}
+        <div
+          style={{ marginLeft: 5 }}
+          className={classNames(Classes.TEXT_SMALL, Classes.TEXT_MUTED)}
+        >
+          ({dayjs(date).fromNow()})
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default TimelineEvent;