add search to column list, styling

Author: heswell

vuu-ui/packages/vuu-shell/src/shell-layout-templates/context-panel/ContextPanel.css

@@ -16,7 +16,7 @@
 }
 
 .vuuView.vuuContextPanel-inner {
-  background-color: var(--salt-container-primary-background);
+  background-color: inherit;
   box-shadow: var(--vuu-side-panel-shadow, none);
   display: flex;
   flex-direction: column;

vuu-ui/packages/vuu-table-extras/src/__tests__/__component__/ColumnList.cy.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+// TODO try and get TS path alias working to avoid relative paths like this
+import {
+  DefaultColumnList,
+  ManyColumnList,
+  ManyColumnListWithSearch,
+  ManyColumnListRemoveOnly,
+} from "../../../../../showcase/src/examples/TableExtras/TableSettings.examples";
+
+describe("ColumnList", () => {
+  describe("DefaultColumnList", () => {
+    it("THEN expected list is rendered", () => {
+      cy.mount(<DefaultColumnList />);
+      cy.findByRole("listbox").should("be.visible");
+    });
+  });
+  describe("ColumnList with 200+ columns", () => {
+    it("THEN expected list is rendered", () => {
+      cy.mount(<ManyColumnList />);
+      cy.findByRole("listbox").should("be.visible");
+    });
+
+    describe("WHEN configured wuth removeOnly", () => {
+      it("THEN expected list is rendered", () => {
+        cy.mount(<ManyColumnListRemoveOnly />);
+        cy.findByRole("listbox").should("be.visible");
+      });
+    });
+  });
+  describe("ColumnList with 200+ columns, with search", () => {
+    it("THEN expected list is rendered", () => {
+      cy.mount(<ManyColumnListWithSearch />);
+      cy.findByRole("search").should("be.visible");
+      cy.findByRole("listbox").should("be.visible");
+    });
+  });
+});

vuu-ui/packages/vuu-table-extras/src/column-list/ColumnList.css

@@ -5,16 +5,19 @@
   --vuuListItem-padding: 0;
   display: flex;
   flex-direction: column;
+  padding: 0 var(--salt-spacing-100);
 
+  .saltListBox {
+    background-color: inherit;
+  }
 
   .saltOption {
     align-items: center;
-    background-color: var(--salt-container-primary-background);
+    background-color: inherit;
     border-bottom: var(--vuuColumnListItem-border, solid) 1px
       var(--salt-separable-tertiary-borderColor);
     gap: var(--salt-spacing-200);
-    padding: var(--salt-spacing-100) 0;
-
+    height: calc(var(--salt-size-base) + var(--salt-spacing-200));
     .vuuIcon {
       --vuu-icon-color: var(--salt-content-secondary-foreground);
     }
@@ -38,16 +41,19 @@
 }
 
 .vuuColumnList-search {
-  padding: var(--salt-spacing-300);
+  --saltInput-paddingLeft: var(--salt-spacing-300);
+  padding: var(--salt-spacing-200) var(--salt-spacing-300) var(--salt-spacing-300) var(--salt-spacing-300);
 }
 
 .vuuColumnList-header {
+  align-items: center;
   border-top: solid 2px var(--vuu-color-gray-30);
-  flex: 0 0 40px;
+  display: flex;
   font-size: 14px;
   font-weight: 600;
+  flex: 0 0 var(--vuuColumnList-headerHeight, 32px);
   padding-left: var(--salt-spacing-400);
-  padding-top: 24px;
+
 }
 
 .vuuColumnList-colHeadings {

vuu-ui/packages/vuu-table-extras/src/column-list/ColumnList.tsx

@@ -16,7 +16,6 @@ import { Icon, IconButton } from "@vuu-ui/vuu-ui-controls";
 import {
   DragDropProvider,
   getColumnLabel,
-  queryClosest,
   reorderColumnItems,
   useSortable,
 } from "@vuu-ui/vuu-utils";
@@ -25,18 +24,16 @@ import {
   HTMLAttributes,
   MouseEventHandler,
   RefCallback,
-  SyntheticEvent,
   useCallback,
   useMemo,
   useRef,
 } from "react";
-import { ColumnItem } from "../table-column-settings/useTableSettings";
+import { ColumnItem, useColumnList } from "./useColumnList";
 
-import columnList from "./ColumnList.css";
-import { useColumnList } from "../table-column-settings/useColumnList";
+import cssColumnList from "./ColumnList.css";
 
-const classBase = "vuuColumnList";
-const classBaseListItem = "vuuColumnListItem";
+export const classBase = "vuuColumnList";
+export const classBaseListItem = "vuuColumnListItem";
 
 const searchIcon = <span data-icon="search" />;
 const NO_SELECTION: string[] = [] as const;
@@ -154,50 +151,29 @@ export const ColumnList = ({
   const targetWindow = useWindow();
   useComponentCssInjection({
     testId: "vuu-column-list",
-    css: columnList,
+    css: cssColumnList,
     window: targetWindow,
   });
   const listRef = useRef<HTMLDivElement>(null);
-  const [permissions, hideOnly] = useMemo(
-    () => [
-      {
-        allowHideColumns,
-        allowRemoveColumns,
-        allowReorderColumns,
-      },
-      allowHideColumns && !allowRemoveColumns,
-    ],
+  const permissions = useMemo(
+    () => ({
+      allowHideColumns,
+      allowRemoveColumns,
+      allowReorderColumns,
+    }),
     [allowHideColumns, allowRemoveColumns, allowReorderColumns],
   );
 
   const {
-    onChange: onSearchInputChange,
+    onChangeListItem,
+    onChangeSearchInput,
     searchState,
     visibleColumnItems,
-  } = useColumnList({ columnItems });
-
-  const handleChange = useCallback(
-    ({ target }: SyntheticEvent) => {
-      const input = target as HTMLInputElement;
-      const listItem = queryClosest(target, `.${classBaseListItem}`);
-      if (listItem) {
-        const {
-          dataset: { name },
-        } = listItem;
-        if (name) {
-          const saltCheckbox = queryClosest(target, `.${classBase}-checkBox`);
-          const saltSwitch = queryClosest(target, `.${classBase}-switch`);
-
-          if (saltCheckbox && !hideOnly) {
-            onChange(name, "subscribed", input.checked);
-          } else if (saltSwitch || hideOnly) {
-            onChange(name, "hidden", input.checked === false);
-          }
-        }
-      }
-    },
-    [hideOnly, onChange],
-  );
+  } = useColumnList({
+    columnItems,
+    permissions,
+    onChange,
+  });
 
   const handleClick = useCallback<MouseEventHandler>(
     (evt) => {
@@ -246,7 +222,7 @@ export const ColumnList = ({
               placeholder="Find column"
               ref={searchCallbackRef}
               value={searchState.searchText}
-              onChange={onSearchInputChange}
+              onChange={onChangeSearchInput}
             />
           </form>
         ) : null}
@@ -265,7 +241,7 @@ export const ColumnList = ({
               item={columnItem}
               index={index}
               key={columnItem.name}
-              onChange={handleChange}
+              onChange={onChangeListItem}
               onClick={handleClick}
               permissions={permissions}
               value={columnItem}

vuu-ui/packages/vuu-table-extras/src/column-list/useColumnList.ts

@@ -0,0 +1,99 @@
+import {
+  ColumnDescriptor,
+  ColumnListPermissions,
+} from "@vuu-ui/vuu-table-types";
+import {
+  FormEventHandler,
+  SyntheticEvent,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { classBase, classBaseListItem, ColumnListProps } from "./ColumnList";
+import { queryClosest } from "@vuu-ui/vuu-utils";
+
+export interface ColumnSearchProps
+  extends Pick<ColumnListProps, "columnItems" | "onChange"> {
+  permissions: ColumnListPermissions;
+}
+
+export type ColumnItem = Pick<
+  ColumnDescriptor,
+  "hidden" | "label" | "name" | "serverDataType"
+> & {
+  isCalculated: boolean;
+  subscribed: boolean;
+};
+
+export const useColumnList = ({
+  columnItems,
+  onChange,
+  permissions: { allowHideColumns, allowRemoveColumns },
+}: ColumnSearchProps) => {
+  const [searchState, setSearchState] = useState<{
+    searchText: string;
+  }>({ searchText: "" });
+
+  const visibleColumnsRef = useRef<ColumnItem[] | undefined>(undefined);
+
+  const hideOnly = useMemo(
+    () => allowHideColumns && !allowRemoveColumns,
+    [allowHideColumns, allowRemoveColumns],
+  );
+
+  useMemo(() => {
+    if (searchState.searchText) {
+      visibleColumnsRef.current = columnItems.filter(
+        (item) => item.name.indexOf(searchState.searchText) !== -1,
+      );
+    }
+  }, [columnItems, searchState.searchText]);
+
+  const handleChangeSearchInput = useCallback<FormEventHandler>(
+    (evt) => {
+      const { value } = evt.target as HTMLInputElement;
+      if (value) {
+        visibleColumnsRef.current = columnItems.filter(
+          (item) => item.name.indexOf(value) !== -1,
+        );
+      } else {
+        visibleColumnsRef.current = undefined;
+      }
+      setSearchState({
+        searchText: value,
+      });
+    },
+    [columnItems],
+  );
+
+  const handleChangeListItem = useCallback(
+    ({ target }: SyntheticEvent) => {
+      const input = target as HTMLInputElement;
+      const listItem = queryClosest(target, `.${classBaseListItem}`);
+      if (listItem) {
+        const {
+          dataset: { name },
+        } = listItem;
+        if (name) {
+          const saltCheckbox = queryClosest(target, `.${classBase}-checkBox`);
+          const saltSwitch = queryClosest(target, `.${classBase}-switch`);
+
+          if (saltCheckbox && !hideOnly) {
+            onChange(name, "subscribed", input.checked);
+          } else if (saltSwitch || hideOnly) {
+            onChange(name, "hidden", input.checked === false);
+          }
+        }
+      }
+    },
+    [hideOnly, onChange],
+  );
+
+  return {
+    onChangeSearchInput: handleChangeSearchInput,
+    onChangeListItem: handleChangeListItem,
+    searchState,
+    visibleColumnItems: visibleColumnsRef.current ?? columnItems,
+  };
+};

vuu-ui/packages/vuu-table-extras/src/table-column-settings/TableSettingsPanel.css

@@ -1,4 +1,5 @@
 .vuuTableSettingsPanel {
+    --vuuScrollable-size: 6px;
     --vuu-svg-text-strikethrough: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 24"><path d="M28.3333 9.33334C28.8867 9.33334 29.3333 8.88668 29.3333 8.33334C29.3333 7.78001 28.8867 7.33334 28.3333 7.33334H20.26L22.26 9.33334H23.48L23.1133 10.1867L24.5067 11.58L25.4733 9.33334H28.3333ZM27.6267 16.5867L18.7467 7.70668C18.4867 7.44668 18.0667 7.44668 17.8067 7.70668C17.5467 7.96668 17.5467 8.38668 17.8067 8.64668L21.98 12.82L20.88 15.38C20.62 15.9933 21.0667 16.6667 21.7267 16.6667C22.0933 16.6667 22.4267 16.4467 22.5733 16.1067L23.38 14.22L26.68 17.52C26.94 17.78 27.36 17.78 27.62 17.52C27.8867 17.2667 27.8867 16.8467 27.6267 16.5867Z"/></svg>');
     --vuu-svg-text-Tt: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 24"><path d="M17.6667 7.66666C17.6667 8.21999 18.1133 8.66666 18.6667 8.66666H21V15.6667C21 16.22 21.4467 16.6667 22 16.6667C22.5533 16.6667 23 16.22 23 15.6667V8.66666H25.3333C25.8867 8.66666 26.3333 8.21999 26.3333 7.66666C26.3333 7.11332 25.8867 6.66666 25.3333 6.66666H18.6667C18.1133 6.66666 17.6667 7.11332 17.6667 7.66666ZM29.3333 9.99999H25.3333C24.78 9.99999 24.3333 10.4467 24.3333 11C24.3333 11.5533 24.78 12 25.3333 12H26.3333V15.6667C26.3333 16.22 26.78 16.6667 27.3333 16.6667C27.8867 16.6667 28.3333 16.22 28.3333 15.6667V12H29.3333C29.8867 12 30.3333 11.5533 30.3333 11C30.3333 10.4467 29.8867 9.99999 29.3333 9.99999Z" /></svg>');
     --vuu-svg-text-T: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 24"><path d="M19.3333 7.66666C19.3333 8.21999 19.78 8.66666 20.3333 8.66666H23V15.6667C23 16.22 23.4467 16.6667 24 16.6667C24.5533 16.6667 25 16.22 25 15.6667V8.66666H27.6667C28.22 8.66666 28.6667 8.21999 28.6667 7.66666C28.6667 7.11332 28.22 6.66666 27.6667 6.66666H20.3333C19.78 6.66666 19.3333 7.11332 19.3333 7.66666Z"/></svg>');
@@ -11,7 +12,7 @@
     gap: 24px;
     height: 100%;
     max-width: 254px;
-    padding: 24px 2px 0 2px;
+    padding: 12px 2px var(--salt-spacing-200) 2px;
 }
 
 
@@ -41,10 +42,16 @@
     padding-top: 24px;
 }
 
-.vuuTableSettingsPanel .vuuColumnList {
+.vuuTableSettingsPanel-columnListContainer {
+
     flex-grow: 1;
     flex-shrink:  1;
     flex-basis: 0;
+    position: relative;
+    overflow: auto;
+    .vuuColumnList {
+        height: 100%;
+    }
 }
 
 .vuuTableSettingsPanel-calculatedButtonbar {

vuu-ui/packages/vuu-table-extras/src/table-column-settings/TableSettingsPanel.tsx

@@ -15,6 +15,7 @@ import { ColumnList } from "../column-list";
 import { useTableSettings } from "./useTableSettings";
 import { Icon } from "@vuu-ui/vuu-ui-controls";
 import { VuuInput } from "@vuu-ui/vuu-ui-controls";
+import cx from "clsx";
 
 import tableSettingsPanelCss from "./TableSettingsPanel.css";
 
@@ -147,13 +148,15 @@ export const TableSettingsPanel = ({
         </FormField>
       ) : null}
 
-      <ColumnList
-        columnItems={columnItems}
-        permissions={columnListPermissions}
-        onChange={onColumnChange}
-        onNavigateToColumn={onNavigateToColumn}
-        onReorderColumnItems={onReorderColumnItems}
-      />
+      <div className={cx(`${classBase}-columnListContainer`, "vuuScrollable")}>
+        <ColumnList
+          columnItems={columnItems}
+          permissions={columnListPermissions}
+          onChange={onColumnChange}
+          onNavigateToColumn={onNavigateToColumn}
+          onReorderColumnItems={onReorderColumnItems}
+        />
+      </div>
 
       {allowCalculatedColumns ? (
         <div className={`${classBase}-calculatedButtonbar`}>