apply CommitHandler type changes across existing code

finos · Aug 16, 2024 · ade89ae · ade89ae
1 parent 8c6866e
commit ade89ae
Show file tree

Hide file tree

Showing 26 changed files with 201 additions and 133 deletions.
diff --git a/vuu-ui/packages/vuu-data-react/src/data-editing/date-editing-utils.tsx b/vuu-ui/packages/vuu-data-react/src/data-editing/date-editing-utils.tsx
@@ -1,14 +1,11 @@
 import { ColumnDescriptor } from "@finos/vuu-table-types";
-import {
-  type CommitHandler,
-  VuuInput,
-  VuuTypeaheadInput,
-} from "@finos/vuu-ui-controls";
+import { VuuInput, VuuTypeaheadInput } from "@finos/vuu-ui-controls";
 import { SuggestionProvider, TableSchemaTable } from "@finos/vuu-data-types";
+import { CommitHandler } from "@finos/vuu-utils";
 
 export interface DataItemEditControlProps {
   column: ColumnDescriptor;
-  onCommit: CommitHandler;
+  onCommit: CommitHandler<HTMLInputElement, string | undefined>;
   suggestionProvider?: SuggestionProvider;
   table?: TableSchemaTable;
 }
@@ -23,6 +20,7 @@ export const getDataItemEditControl = ({
     return (
       <VuuTypeaheadInput
         column={column.name}
+        onCommit={onCommit}
         suggestionProvider={suggestionProvider}
         table={table}
       />

diff --git a/vuu-ui/packages/vuu-filters/src/filter-bar/FilterBar.tsx b/vuu-ui/packages/vuu-filters/src/filter-bar/FilterBar.tsx
@@ -144,14 +144,16 @@ export const FilterBar = ({
           suggestionProvider={suggestionProvider}
           tableSchema={tableSchema}
         />
-      ) : (
+      ) : QuickFilterProps ? (
         <QuickFilters
           {...QuickFilterProps}
           availableColumns={columnDescriptors}
           onApplyFilter={onApplyFilter}
           suggestionProvider={suggestionProvider}
           tableSchema={tableSchema}
         />
+      ) : (
+        "Missing QuickFilterProps"
       )}
     </div>
   );

diff --git a/vuu-ui/packages/vuu-filters/src/filter-clause/ExpandoCombobox.tsx b/vuu-ui/packages/vuu-filters/src/filter-clause/ExpandoCombobox.tsx
@@ -6,7 +6,6 @@ import {
   Ref,
   SyntheticEvent,
   forwardRef,
-  useCallback,
   useMemo,
   useState,
 } from "react";

diff --git a/vuu-ui/packages/vuu-filters/src/filter-clause/useFilterClause.ts b/vuu-ui/packages/vuu-filters/src/filter-clause/useFilterClause.ts
@@ -1,5 +1,5 @@
 import { FilterClause, FilterClauseOp } from "@finos/vuu-filter-types";
-import { hasOpenOptionList, isDateInput } from "@finos/vuu-utils";
+import { hasOpenOptionList } from "@finos/vuu-utils";
 import {
   KeyboardEvent,
   RefCallback,

diff --git a/vuu-ui/packages/vuu-filters/src/filter-clause/value-editors/FilterClauseValueEditorDate.tsx b/vuu-ui/packages/vuu-filters/src/filter-clause/value-editors/FilterClauseValueEditorDate.tsx
@@ -1,7 +1,10 @@
-import React, { ChangeEvent, useCallback, useState } from "react";
+import React, {
+  useCallback,
+  useState,
+} from "react";
 import cx from "clsx";
 import { getLocalTimeZone, DateValue } from "@internationalized/date";
-import { toCalendarDate } from "@finos/vuu-utils";
+import { CommitHandler, toCalendarDate } from "@finos/vuu-utils";
 import { NumericFilterClauseOp } from "@finos/vuu-filter-types";
 import { FilterClauseValueEditor } from "../filterClauseTypes";
 import { VuuDatePicker } from "@finos/vuu-ui-controls";
@@ -23,8 +26,8 @@ export const FilterClauseValueEditorDate = (
     getInitialState(value),
   );
 
-  const onSelectedDateChange = useCallback(
-    (e: ChangeEvent<HTMLInputElement>, selectedDateInputValue?: string) => {
+  const handleCommit = useCallback<CommitHandler<HTMLElement, number>>(
+    (e, selectedDateInputValue) => {
       console.log("change date");
       if (selectedDateInputValue) {
         const dateValue = toCalendarDate(new Date(selectedDateInputValue));
@@ -46,7 +49,7 @@ export const FilterClauseValueEditorDate = (
       inputProps={inputProps}
       className={cx("vuuFilterClause-DatePicker", className)}
       onBlur={onBlur}
-      onCommit={onSelectedDateChange}
+      onCommit={handleCommit}
       selectedDate={date}
     />
   );

diff --git a/vuu-ui/packages/vuu-filters/src/inline-filter/InlineFilter.tsx b/vuu-ui/packages/vuu-filters/src/inline-filter/InlineFilter.tsx
@@ -1,7 +1,6 @@
 import { getDataItemEditControl } from "@finos/vuu-data-react";
 import { VirtualColSpan, useHeaderProps } from "@finos/vuu-table";
-import { CommitHandler } from "@finos/vuu-ui-controls";
-import { queryClosest } from "@finos/vuu-utils";
+import { CommitHandler, queryClosest } from "@finos/vuu-utils";
 import { useComponentCssInjection } from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
 import { HTMLAttributes, useCallback } from "react";
@@ -33,14 +32,16 @@ export const InlineFilter = ({
 
   const { columns, virtualColSpan = 0 } = useHeaderProps();
 
-  const onCommit = useCallback<CommitHandler>(
+  const onCommit = useCallback<
+    CommitHandler<HTMLInputElement, string | number | undefined>
+  >(
     (evt, value) => {
       const field = queryClosest(evt.target, "[data-field]");
-      if (field) {
+      if (field && value !== undefined) {
         const columnName = field.dataset.field;
         const column = columns.find((c) => c.name === columnName);
         if (column) {
-          onChange(column, value);
+          onChange(column, value.toString());
         }
       }
     },

diff --git a/vuu-ui/packages/vuu-filters/src/quick-filters/QuickFilters.tsx b/vuu-ui/packages/vuu-filters/src/quick-filters/QuickFilters.tsx
@@ -18,9 +18,10 @@ export interface QuickFilterProps
       FilterBarProps,
       "onApplyFilter" | "suggestionProvider" | "tableSchema"
     > {
+  allowFind?: boolean;
   availableColumns: ColumnDescriptor[];
   onChangeQuickFilterColumns?: (columns: string[]) => void;
-  quickFilterColumns?: string[];
+  quickFilterColumns: string[];
   /**
    * Render a general 'search' control.
    * if true, all columns of type 'string' will be included in the search. Otherwise
@@ -30,6 +31,7 @@ export interface QuickFilterProps
 }
 
 export const QuickFilters = ({
+  allowFind = true,
   availableColumns,
   onApplyFilter,
   onChangeQuickFilterColumns,
@@ -52,7 +54,6 @@ export const QuickFilters = ({
     onColumnsSelectionChange,
     onCommit,
     rootRef,
-    quickFilters,
   } = useQuickFilters({
     availableColumns,
     onApplyFilter,
@@ -61,13 +62,14 @@ export const QuickFilters = ({
   });
 
   const filterColumns = availableColumns.filter(({ name }) =>
-    quickFilters?.includes(name),
+    quickFilterColumns?.includes(name),
   );
 
-  return (
-    <div className={classBase} ref={rootRef}>
-      <div className={`${classBase}-filter-container`}>
-        <FormField data-embedded data-field="find">
+  const getFilterControls = () => {
+    const controls = [];
+    if (allowFind) {
+      controls.push(
+        <FormField data-embedded data-field="find" key="find">
           <FormFieldLabel>Find</FormFieldLabel>
           <VuuInput
             inputProps={{
@@ -77,8 +79,12 @@ export const QuickFilters = ({
             startAdornment={searchIcon}
             variant="secondary"
           />
-        </FormField>
-        {filterColumns?.map((column) => (
+        </FormField>,
+      );
+    }
+    {
+      filterColumns?.forEach((column) =>
+        controls.push(
           <FormField key={column.label ?? column.name} data-field={column.name}>
             <FormFieldLabel>{column.label ?? column.name}</FormFieldLabel>
             {getDataItemEditControl({
@@ -87,15 +93,25 @@ export const QuickFilters = ({
               suggestionProvider,
               table: tableSchema?.table,
             })}
-          </FormField>
-        ))}
+          </FormField>,
+        ),
+      );
+    }
+
+    return controls;
+  };
+
+  return (
+    <div className={classBase} ref={rootRef}>
+      <div className={`${classBase}-filter-container`}>
+        {getFilterControls()}
       </div>
       <ColumnPicker
         columns={availableColumnNames}
         icon="more-horiz"
         iconSize={16}
         onSelectionChange={onColumnsSelectionChange}
-        selected={quickFilters}
+        selected={quickFilterColumns}
       />
     </div>
   );

diff --git a/vuu-ui/packages/vuu-filters/src/quick-filters/useQuickFilters.ts b/vuu-ui/packages/vuu-filters/src/quick-filters/useQuickFilters.ts
@@ -2,15 +2,14 @@ import type { DataSourceFilter } from "@finos/vuu-data-types";
 import type { Filter } from "@finos/vuu-filter-types";
 import type { VuuRowDataItemType } from "@finos/vuu-protocol-types";
 import type { ColumnDescriptor } from "@finos/vuu-table-types";
-import { CommitHandler, MultiSelectionHandler } from "@finos/vuu-ui-controls";
-import { filterAsQuery, queryClosest } from "@finos/vuu-utils";
+import { MultiSelectionHandler } from "@finos/vuu-ui-controls";
+import { CommitHandler, filterAsQuery, queryClosest } from "@finos/vuu-utils";
 import {
   ChangeEventHandler,
   RefCallback,
   useCallback,
   useMemo,
   useRef,
-  useState,
 } from "react";
 import { QuickFilterProps } from "./QuickFilters";
 
@@ -90,10 +89,7 @@ export const useQuickFilters = ({
   availableColumns,
   onApplyFilter,
   onChangeQuickFilterColumns,
-  quickFilterColumns = [],
 }: QuickFilterProps) => {
-  //TODO make controlled
-  const [quickFilters, setQuickFilters] = useState(quickFilterColumns);
   const filters = useRef<QuickFilterValues>({});
   const rootRef = useCallback<RefCallback<HTMLDivElement>>((el) => {
     if (el) {
@@ -109,15 +105,25 @@ export const useQuickFilters = ({
     [],
   );
 
-  const handleCommit = useCallback<CommitHandler>(
+  const handleCommit = useCallback<
+    CommitHandler<HTMLInputElement, string | number | undefined>
+  >(
     (e, value) => {
-      if (value.trim() !== "") {
-        const field = queryClosest(e.target, "[data-field]");
-        const column = field?.dataset.field;
-        if (column) {
+      const field = queryClosest(e.target, "[data-field]");
+      const column = field?.dataset.field;
+      if (column) {
+        if (
+          value === undefined ||
+          (typeof value === "string" && value.trim() === "")
+        ) {
+          if (filters.current[column] === undefined) {
+            return;
+          }
+          delete filters.current[column];
+        } else if (typeof value === "string" && value.trim() !== "") {
           filters.current[column] = value;
-          onApplyFilter?.(buildFilter(filters.current, availableColumns));
         }
+        onApplyFilter?.(buildFilter(filters.current, availableColumns));
       }
     },
     [availableColumns, onApplyFilter],
@@ -126,7 +132,6 @@ export const useQuickFilters = ({
   const handleColumnsSelectionChange = useCallback<MultiSelectionHandler>(
     (evt, newSelected) => {
       onChangeQuickFilterColumns?.(newSelected);
-      setQuickFilters(newSelected);
     },
     [onChangeQuickFilterColumns],
   );
@@ -141,7 +146,6 @@ export const useQuickFilters = ({
     onChange: handleChange,
     onColumnsSelectionChange: handleColumnsSelectionChange,
     onCommit: handleCommit,
-    quickFilters,
     rootRef,
   };
 };
diff --git a/vuu-ui/packages/vuu-table-extras/src/table-settings/useTableSettings.ts b/vuu-ui/packages/vuu-table-extras/src/table-settings/useTableSettings.ts
@@ -12,8 +12,8 @@ import {
   moveItem,
   subscribedOnly,
   useLayoutEffectSkipFirst,
+  CommitHandler,
 } from "@finos/vuu-utils";
-import { CommitHandler } from "@finos/vuu-ui-controls/src";
 import {
   MouseEvent,
   SyntheticEvent,
@@ -203,16 +203,22 @@ export const useTableSettings = ({
     [],
   );
 
-  const handleCommitColumnWidth = useCallback<CommitHandler>((_, value) => {
-    const columnDefaultWidth = parseInt(value);
-    if (!isNaN(columnDefaultWidth)) {
-      setColumnState((state) => ({
-        ...state,
-        tableConfig: {
-          ...state.tableConfig,
-          columnDefaultWidth,
-        },
-      }));
+  const handleCommitColumnWidth = useCallback<
+    CommitHandler<HTMLInputElement, string | undefined>
+  >((_, value) => {
+    if (value === undefined) {
+      console.log(`column width is undefined`);
+    } else {
+      const columnDefaultWidth = parseInt(value);
+      if (!isNaN(columnDefaultWidth)) {
+        setColumnState((state) => ({
+          ...state,
+          tableConfig: {
+            ...state.tableConfig,
+            columnDefaultWidth,
+          },
+        }));
+      }
     }
     console.log({ value });
   }, []);

diff --git a/vuu-ui/packages/vuu-table/src/bulk-edit/BulkEditRow.tsx b/vuu-ui/packages/vuu-table/src/bulk-edit/BulkEditRow.tsx
@@ -1,7 +1,6 @@
 import { getDataItemEditControl } from "@finos/vuu-data-react";
 import { ColumnDescriptor } from "@finos/vuu-table-types";
-import { CommitHandler } from "@finos/vuu-ui-controls";
-import { queryClosest } from "@finos/vuu-utils";
+import { CommitHandler, queryClosest } from "@finos/vuu-utils";
 import { useComponentCssInjection } from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
 import { HTMLAttributes, useCallback } from "react";
@@ -31,9 +30,11 @@ export const BulkEditRow = ({ onChange, ...htmlAttributes }: BulkEditProps) => {
 
   const { columns, virtualColSpan = 0 } = useHeaderProps();
 
-  const onCommit = useCallback<CommitHandler>(
+  const onCommit = useCallback<
+    CommitHandler<HTMLInputElement, string | undefined>
+  >(
     (evt, value) => {
-      if (String(value).trim() !== "") {
+      if (value !== undefined && String(value).trim() !== "") {
         const field = queryClosest(evt.target, "[data-field]");
         if (field) {
           const columnName = field.dataset.field;

diff --git a/vuu-ui/packages/vuu-ui-controls/src/calendar/internal/CalendarNavigation.tsx b/vuu-ui/packages/vuu-ui-controls/src/calendar/internal/CalendarNavigation.tsx
@@ -173,7 +173,6 @@ export const CalendarNavigation = forwardRef<
     years,
     canNavigateNext,
     canNavigatePrevious,
-    visibleMonth,
     selectedMonth,
     selectedYear,
     isOutsideAllowedMonths,

diff --git a/vuu-ui/packages/vuu-ui-controls/src/calendar/internal/useFocusManagement.ts b/vuu-ui/packages/vuu-ui-controls/src/calendar/internal/useFocusManagement.ts
@@ -38,6 +38,7 @@ export function useFocusManagement({ date }: { date: DateValue }) {
         newDate = startOfWeek(date, getCurrentLocale());
         break;
       case "End":
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore TODO bug in @internationalized/date
         newDate = endOfWeek(date, getCurrentLocale());
         break;

diff --git a/vuu-ui/packages/vuu-ui-controls/src/vuu-date-picker/VuuDatePicker.tsx b/vuu-ui/packages/vuu-ui-controls/src/vuu-date-picker/VuuDatePicker.tsx
@@ -51,12 +51,15 @@ export const VuuDatePicker = ({
   };
 
   const handleSelectionChange = useCallback(
-    (e: SyntheticEvent<HTMLElement>, date: DateValue) => {
+    (e: SyntheticEvent<Element>, date: DateValue) => {
       if (date && !isSameDate(date, selectedDate)) {
         onSelectionChange?.(e, date);
         setOpen(false);
         console.log(`about to commit date ${date.toString()}`);
-        onCommit?.(e, toEpochMillis(date, localTimeZone));
+        onCommit?.(
+          e as SyntheticEvent<HTMLElement>,
+          toEpochMillis(date, localTimeZone),
+        );
       }
     },
     [onCommit, onSelectionChange, selectedDate],