make instrument-picker more generic

vuu-ui/packages/vuu-datagrid-types/index.d.ts

@@ -43,6 +43,7 @@ export interface TableAttributes {
   columnDefaultWidth?: number;
   columnFormatHeader?: "capitalize" | "uppercase";
   columnSeparators?: boolean;
+  showHighlightedRow?: boolean;
   rowSeparators?: boolean;
   zebraStripes?: boolean;
 }

vuu-ui/packages/vuu-table/src/table-next/TableNext.css

@@ -25,6 +25,10 @@
   --row-borderColor: var(--salt-separable-tertiary-borderColor);
 }
 
+.vuuTableNext-highlight .vuuTableNextRow:hover {
+  background-color: var(--vuu-color-pink-10-fade-20);
+}
+
 .vuuTableNext-scrollbarContainer {
   --scroll-content-width: 1100px;
   border-bottom: none !important;

vuu-ui/packages/vuu-table/src/table-next/TableNext.tsx

@@ -98,6 +98,7 @@ export const TableNext = forwardRef(function TableNext(
   const className = cx(classBase, classNameProp, {
     [`${classBase}-colLines`]: tableAttributes.columnSeparators,
     [`${classBase}-rowLines`]: tableAttributes.rowSeparators,
+    [`${classBase}-highlight`]: tableAttributes.showHighlightedRow,
     [`${classBase}-zebra`]: tableAttributes.zebraStripes,
     // [`${classBase}-loading`]: isDataLoading(tableProps.columns),
   });

vuu-ui/packages/vuu-ui-controls/src/instrument-picker/InstrumentPicker.tsx

@@ -1,4 +1,5 @@
 import { TableSchema } from "@finos/vuu-data";
+import { DataSourceRow } from "@finos/vuu-data-types";
 import { useId } from "@finos/vuu-layout";
 import { TableNext, TableProps, TableRowSelectHandler } from "@finos/vuu-table";
 import { ColumnMap } from "@finos/vuu-utils";
@@ -17,6 +18,14 @@ export interface InstrumentPickerProps
   TableProps: Pick<TableProps, "config" | "dataSource">;
   columnMap: ColumnMap;
   disabled?: boolean;
+  /**
+   * Used to form the display value to render in input following selection. If
+   * not provided, default will be the values from rendered columns.
+   *
+   * @param row DataSourceRow
+   * @returns string
+   */
+  itemToString?: (row: DataSourceRow) => string;
   onSelect: TableRowSelectHandler;
   schema: TableSchema;
   searchColumns: string[];
@@ -30,6 +39,7 @@ export const InstrumentPicker = forwardRef(function InstrumentPicker(
     columnMap,
     disabled,
     id: idProp,
+    itemToString,
     onSelect,
     schema,
     searchColumns,
@@ -47,7 +57,16 @@ export const InstrumentPicker = forwardRef(function InstrumentPicker(
     onOpenChange,
     tableHandlers,
     value,
-  } = useInstrumentPicker({ columnMap, dataSource, onSelect, searchColumns });
+  } = useInstrumentPicker({
+    columnMap,
+    columns: TableProps.config.columns,
+    dataSource,
+    itemToString,
+    onSelect,
+    searchColumns,
+  });
+
+  console.log({ value });
 
   const endAdornment = useMemo(() => <span data-icon="chevron-down" />, []);
 

vuu-ui/packages/vuu-ui-controls/src/instrument-picker/useInstrumentPicker.ts

@@ -1,23 +1,36 @@
 import { DataSource } from "@finos/vuu-data";
+import { DataSourceRow } from "@finos/vuu-data-types";
+import { ColumnDescriptor } from "@finos/vuu-datagrid-types";
 import { TableRowSelectHandler } from "@finos/vuu-table";
 import { ColumnMap } from "@finos/vuu-utils";
 import { ChangeEvent, useCallback, useMemo, useState } from "react";
 import { useControlled } from "../common-hooks";
+import { InstrumentPickerProps } from "./InstrumentPicker";
 
-export interface InstrumentPickerHookProps {
-  columnMap: ColumnMap;
+export interface InstrumentPickerHookProps
+  extends Pick<
+    InstrumentPickerProps,
+    "columnMap" | "itemToString" | "onSelect" | "searchColumns"
+  > {
+  columns: ColumnDescriptor[];
   dataSource: DataSource;
   defaultIsOpen?: boolean;
   isOpen?: boolean;
-  onSelect: TableRowSelectHandler;
-  searchColumns: string[];
 }
 
+const defaultItemToString =
+  (columns: ColumnDescriptor[], columnMap: ColumnMap) =>
+  (row: DataSourceRow) => {
+    return columns.map(({ name }) => row[columnMap[name]]).join(" ");
+  };
+
 export const useInstrumentPicker = ({
   columnMap,
+  columns,
   dataSource,
   defaultIsOpen,
   isOpen: isOpenProp,
+  itemToString = defaultItemToString(columns, columnMap),
   onSelect,
   searchColumns,
 }: InstrumentPickerHookProps) => {
@@ -65,13 +78,12 @@ export const useInstrumentPicker = ({
 
   const handleSelectRow = useCallback<TableRowSelectHandler>(
     (row) => {
-      const { name } = columnMap;
-      const { [name]: value } = row;
-      setValue(value as string);
+      const value = itemToString(row);
+      setValue(value);
       setIsOpen(false);
       onSelect(row);
     },
-    [columnMap, onSelect, setIsOpen]
+    [itemToString, onSelect, setIsOpen]
   );
 
   const inputProps = {

vuu-ui/showcase/src/examples/UiControls/InstrumentPicker.examples.tsx

@@ -0,0 +1,49 @@
+import { InstrumentPicker } from "@finos/vuu-ui-controls";
+import { getSchema } from "@finos/vuu-data-test";
+import { buildColumnMap, ColumnMap } from "@finos/vuu-utils";
+import { useCallback, useMemo } from "react";
+import { TableProps, TableRowSelectHandler } from "@finos/vuu-table";
+import { createArrayDataSource } from "../utils/createArrayDataSource";
+import { ColumnDescriptor } from "@finos/vuu-datagrid-types";
+
+let displaySequence = 0;
+
+export const DefaultInstrumentPicker = () => {
+  const schema = getSchema("instruments");
+  const [columnMap, searchColumns, tableProps] = useMemo<
+    [ColumnMap, string[], Pick<TableProps, "config" | "dataSource">]
+  >(
+    () => [
+      buildColumnMap(schema.columns),
+      ["bbg", "description"],
+      {
+        config: {
+          // TODO need to inject this value
+          showHighlightedRow: true,
+          columns: [
+            { name: "bbg", serverDataType: "string" },
+            { name: "description", serverDataType: "string", width: 280 },
+          ] as ColumnDescriptor[],
+        },
+        dataSource: createArrayDataSource({ table: schema.table }),
+      },
+    ],
+    [schema]
+  );
+
+  const handleSelect = useCallback<TableRowSelectHandler>((row) => {
+    console.log(`row selected ${row.join(",")}`);
+  }, []);
+
+  return (
+    <InstrumentPicker
+      TableProps={tableProps}
+      columnMap={columnMap}
+      onSelect={handleSelect}
+      schema={schema}
+      searchColumns={searchColumns}
+      style={{ width: 400 }}
+    />
+  );
+};
+DefaultInstrumentPicker.displaySequence = displaySequence++;

vuu-ui/showcase/src/examples/UiControls/index.ts

@@ -2,6 +2,7 @@ export * as ComboBox from "./Combobox.examples";
 export * as DragDrop from "./DragDrop.examples";
 export * as Dropdown from "./Dropdown.examples";
 export * as EditableLabel from "./EditableLabel.examples";
+export * as InstrumentPicker from "./InstrumentPicker.examples";
 export * as InstrumentSearch from "./InstrumentSearch.examples";
 export * as List from "./List.examples";
 export * as Tabstrip from "./Tabstrip.examples";