@teselagen/ui 0.9.8 → 0.10.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teselagen/ui",
-  "version": "0.9.8",
+  "version": "0.10.3",
   "main": "./src/index.js",
   "type": "module",
   "exports": {
@@ -21,6 +21,7 @@
     "@teselagen/react-table": "6.10.18",
     "chance": "1.1.11",
     "classnames": "^2.3.2",
+    "color": "^3.2.1",
     "copy-to-clipboard": "^3.3.1",
     "dayjs": "^1.10.4",
     "dom-scroll-into-view": "^2.0.1",

package/src/CollapsibleCard/index.js

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import { Button, Classes, Icon } from "@blueprintjs/core";
 import classNames from "classnames";
 import "./style.css";
+import InfoHelper from "../InfoHelper";
 
 export default function CollapsibleCard({
   title,
@@ -11,6 +12,7 @@ export default function CollapsibleCard({
   className,
   style,
   children,
+  helperText,
   initialClosed = false,
   toggle,
   isOpen
@@ -48,7 +50,12 @@ export default function CollapsibleCard({
           >
             {title}
           </h6>
-          <div>{open && openTitleElements}</div>
+          {helperText && (
+            <>
+              <InfoHelper children={helperText}></InfoHelper> &nbsp;
+            </>
+          )}
+          {open && <div> {openTitleElements}</div>}
         </div>
         <div>
           <Button

package/src/DataTable/Columns.js

@@ -37,6 +37,7 @@ import { useDispatch } from "react-redux";
 import { change as _change } from "redux-form";
 import { RenderCell } from "./RenderCell";
 import { getCCDisplayName } from "./utils/tableQueryParamsToHasuraClauses";
+import { showContextMenu } from "../utils/menuUtils";
 
 dayjs.extend(localizedFormat);
 
@@ -50,8 +51,13 @@ const RenderColumnHeader = ({
   entities,
   extraCompact,
   filters,
+  resetDefaultVisibility,
+  onlyOneVisibleColumn,
   formName,
   isCellEditable,
+  updateColumnVisibility,
+  schema,
+  withDisplayOptions,
   isLocalCall,
   order,
   removeSingleFilter,
@@ -163,6 +169,60 @@ const RenderColumnHeader = ({
           <strong>${columnTitle}:</strong> <br>
           ${description} ${isUnique ? "<br>Must be unique" : ""}</div>`
       })}
+      onContextMenu={e => {
+        if (!withDisplayOptions) {
+          return
+        }
+        e.preventDefault();
+        e.persist();
+        showContextMenu(
+          [
+            {
+              text: "Hide Column",
+              disabled: onlyOneVisibleColumn,
+              icon: "eye-off",
+              onClick: () => {
+                updateColumnVisibility({
+                  shouldShow: false,
+                  path
+                });
+              }
+            },
+            {
+              text: "Hide Other Columns",
+              icon: "eye-off",
+              onClick: () => {
+                updateColumnVisibility({
+                  shouldShow: false,
+                  paths: schema.fields
+                    .map(c => c.path)
+                    .filter(Boolean)
+                    .filter(p => p !== path)
+                });
+              }
+            },
+            {
+              text: "Reset Column Visibilities",
+              icon: "reset",
+              onClick: () => {
+                resetDefaultVisibility();
+              }
+            },
+            {
+              text: "Table Display Options",
+              icon: "cog",
+              onClick: () => {
+                e.target
+                  .closest(".data-table-container")
+                  ?.querySelector(".tg-table-display-options")
+                  ?.click();
+              }
+            }
+          ],
+          undefined,
+          e
+        );
+      }}
       data-test={columnTitleTextified}
       data-path={path}
       data-copy-text={columnTitleTextified}
@@ -340,6 +400,7 @@ export const useColumns = ({
   addFilters,
   cellRenderer,
   columns,
+  resetDefaultVisibility,
   currentParams,
   compact,
   editingCell,
@@ -374,6 +435,7 @@ export const useColumns = ({
   selectedCells,
   setExpandedEntityIdMap,
   setNewParams,
+  updateColumnVisibility,
   setOrder = noop,
   setSelectedCells,
   shouldShowSubComponent,
@@ -387,7 +449,8 @@ export const useColumns = ({
   withFilter: _withFilter,
   withSort = true,
   recordIdToIsVisibleMap,
-  setRecordIdToIsVisibleMap
+  setRecordIdToIsVisibleMap,
+  withDisplayOptions
 }) => {
   const dispatch = useDispatch();
   const change = useCallback(
@@ -858,15 +921,20 @@ export const useColumns = ({
     const tableColumn = {
       ...column,
       Header: RenderColumnHeader({
+        onlyOneVisibleColumn: columns.length === 1,
         recordIdToIsVisibleMap,
         setRecordIdToIsVisibleMap,
         column,
+        withDisplayOptions,
         isLocalCall,
         filters,
         currentParams,
         order,
+        resetDefaultVisibility,
         setOrder,
         withSort,
+        schema,
+        updateColumnVisibility,
         formName,
         extraCompact,
         withFilter,

package/src/DataTable/DisplayOptions.js

@@ -11,11 +11,13 @@ import {
   Switch
 } from "@blueprintjs/core";
 import { getCCDisplayName } from "./utils/tableQueryParamsToHasuraClauses";
+import InfoHelper from "../InfoHelper";
 
 const DisplayOptions = ({
   compact,
   extraCompact,
   disabled,
+  doNotSearchHiddenColumns,
   hideDisplayOptionsIcon,
   resetDefaultVisibility = noop,
   updateColumnVisibility = noop,
@@ -52,7 +54,7 @@ const DisplayOptions = ({
   let numVisible = 0;
 
   const getFieldCheckbox = (field, i) => {
-    const { displayName, isHidden, isForcedHidden, path } = field;
+    const { displayName, isHidden, isForcedHidden, path, subFrag } = field;
     if (isForcedHidden) return;
     if (!isHidden) numVisible++;
     return (
@@ -68,7 +70,20 @@ const DisplayOptions = ({
           updateColumnVisibility({ shouldShow: isHidden, path });
         }}
         checked={!isHidden}
-        label={displayName}
+        label={
+          <span style={{ display: "flex", marginTop: -17 }}>
+            {displayName}
+            {subFrag && (
+              <InfoHelper
+                icon="warning-sign"
+                intent="warning"
+                style={{ marginLeft: 5 }}
+              >
+                Viewing this column may cause the table to load slower
+              </InfoHelper>
+            )}
+          </span>
+        }
       />
     );
   };
@@ -127,7 +142,9 @@ const DisplayOptions = ({
       content={
         <Menu>
           <div style={{ padding: 10, paddingLeft: 20, paddingRight: 20 }}>
-            <h5 style={{ marginBottom: 10 }}>Display Density:</h5>
+            <h5 style={{ marginBottom: 10, fontWeight: "bold" }}>
+              Display Density:
+            </h5>
             <div className={Classes.SELECT + " tg-table-display-density"}>
               <select
                 onChange={changeTableDensity}
@@ -150,8 +167,19 @@ const DisplayOptions = ({
                 </option>
               </select>
             </div>
-            <h5 style={{ marginBottom: 10, marginTop: 10 }}>
-              Displayed Columns:
+            <h5
+              style={{
+                fontWeight: "bold",
+                marginBottom: 10,
+                marginTop: 10,
+                display: "flex"
+              }}
+            >
+              Displayed Columns: &nbsp;
+              {doNotSearchHiddenColumns && <InfoHelper>
+                Note: Hidden columns will NOT be used when searching the
+                datatable
+              </InfoHelper>}
             </h5>
             <div style={{ maxHeight: 260, overflowY: "auto", padding: 2 }}>
               {mainFields.map(getFieldCheckbox)}
@@ -176,9 +204,10 @@ const DisplayOptions = ({
               <Button
                 onClick={resetDefaultVisibility}
                 title="Display Options"
+                icon="reset"
                 minimal
               >
-                Reset
+                Reset Column Visibilites
               </Button>
             </div>
           </div>

package/src/DataTable/PagingTool.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef, useCallback } from "react";
 import classNames from "classnames";
-import { noop, toInteger } from "lodash-es";
+import { noop, get, toInteger } from "lodash-es";
 import { Button, Classes } from "@blueprintjs/core";
 import { onEnterOrBlurHelper } from "../utils/handlerHelpers";
 import { defaultPageSizes } from "./utils/queryParams";
@@ -69,7 +69,7 @@ const PagingTool = ({
   const setPageSize = controlled_setPageSize || _setPageSize;
 
   const onPageChange = useCallback(() => {
-    const record = entities?.[0];
+    const record = get(entities, "[0]");
     if (
       !keepSelectionOnPageChange &&
       (!record || !getIdOrCodeOrIndex(record))

package/src/DataTable/RenderCell.js

@@ -29,11 +29,15 @@ export const RenderCell = ({
   onDragEnd,
   args
 }) => {
-  const editingCell = useSelector(
-    state => state.form?.[formName]?.values?.reduxFormEditingCell
-  );
+  const editingCellSelector = state =>
+    state.form?.[formName]?.values?.reduxFormEditingCell;
+
+  const shouldEditableCellInputBeClearedSelector = state =>
+    state.form?.[formName]?.values?.shouldEditableCellInputBeCleared;
+
+  const editingCell = useSelector(editingCellSelector);
   const shouldEditableCellInputBeCleared = useSelector(
-    state => state.form?.[formName]?.values?.shouldEditableCellInputBeCleared
+    shouldEditableCellInputBeClearedSelector
   );
 
   const [row] = args;