From 8b256fbaff94d48297b4881a5be5a488c66f4125 Mon Sep 17 00:00:00 2001 From: heswell Date: Sun, 22 Oct 2023 15:34:34 +0100 Subject: [PATCH] make instrument-picker more generic --- vuu-ui/packages/vuu-datagrid-types/index.d.ts | 1 + .../vuu-table/src/table-next/TableNext.css | 4 ++ .../vuu-table/src/table-next/TableNext.tsx | 1 + .../instrument-picker/InstrumentPicker.tsx | 21 +++++++- .../instrument-picker/useInstrumentPicker.ts | 28 ++++++++--- .../UiControls/InstrumentPicker.examples.tsx | 49 +++++++++++++++++++ .../showcase/src/examples/UiControls/index.ts | 1 + 7 files changed, 96 insertions(+), 9 deletions(-) create mode 100644 vuu-ui/showcase/src/examples/UiControls/InstrumentPicker.examples.tsx diff --git a/vuu-ui/packages/vuu-datagrid-types/index.d.ts b/vuu-ui/packages/vuu-datagrid-types/index.d.ts index 81b58b000..503c026b9 100644 --- a/vuu-ui/packages/vuu-datagrid-types/index.d.ts +++ b/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; } diff --git a/vuu-ui/packages/vuu-table/src/table-next/TableNext.css b/vuu-ui/packages/vuu-table/src/table-next/TableNext.css index f83992f2b..9b4836589 100644 --- a/vuu-ui/packages/vuu-table/src/table-next/TableNext.css +++ b/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; diff --git a/vuu-ui/packages/vuu-table/src/table-next/TableNext.tsx b/vuu-ui/packages/vuu-table/src/table-next/TableNext.tsx index c36ff84f2..b40f2cf57 100644 --- a/vuu-ui/packages/vuu-table/src/table-next/TableNext.tsx +++ b/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), }); diff --git a/vuu-ui/packages/vuu-ui-controls/src/instrument-picker/InstrumentPicker.tsx b/vuu-ui/packages/vuu-ui-controls/src/instrument-picker/InstrumentPicker.tsx index 9ca343d8f..6d0562db1 100644 --- a/vuu-ui/packages/vuu-ui-controls/src/instrument-picker/InstrumentPicker.tsx +++ b/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; 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(() => , []); diff --git a/vuu-ui/packages/vuu-ui-controls/src/instrument-picker/useInstrumentPicker.ts b/vuu-ui/packages/vuu-ui-controls/src/instrument-picker/useInstrumentPicker.ts index 1acb729a4..ae13cc722 100644 --- a/vuu-ui/packages/vuu-ui-controls/src/instrument-picker/useInstrumentPicker.ts +++ b/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( (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 = { diff --git a/vuu-ui/showcase/src/examples/UiControls/InstrumentPicker.examples.tsx b/vuu-ui/showcase/src/examples/UiControls/InstrumentPicker.examples.tsx new file mode 100644 index 000000000..6446a2ea4 --- /dev/null +++ b/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] + >( + () => [ + 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((row) => { + console.log(`row selected ${row.join(",")}`); + }, []); + + return ( + + ); +}; +DefaultInstrumentPicker.displaySequence = displaySequence++; diff --git a/vuu-ui/showcase/src/examples/UiControls/index.ts b/vuu-ui/showcase/src/examples/UiControls/index.ts index 49b3154b1..02e11d8cf 100644 --- a/vuu-ui/showcase/src/examples/UiControls/index.ts +++ b/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";