revert: ♻️ (TypeScript) fix strictFunctionTypes violations (pt 4) (#2128

)
actualbudget · Dec 29, 2023 · d899640 · d899640
1 parent e548125
commit d899640
Show file tree

Hide file tree

Showing 7 changed files with 310 additions and 309 deletions.
diff --git a/packages/desktop-client/src/components/common/Menu.tsx b/packages/desktop-client/src/components/common/Menu.tsx
@@ -34,21 +34,21 @@ type MenuItem = {
   style?: CSSProperties;
 };
 
-type MenuProps<T extends MenuItem = MenuItem> = {
+type MenuProps = {
   header?: ReactNode;
   footer?: ReactNode;
-  items: Array<T | typeof Menu.line>;
-  onMenuSelect: (itemName: T['name']) => void;
+  items: Array<MenuItem | typeof Menu.line>;
+  onMenuSelect: (itemName: MenuItem['name']) => void;
   style?: CSSProperties;
 };
 
-export default function Menu<T extends MenuItem>({
+export default function Menu({
   header,
   footer,
   items: allItems,
   onMenuSelect,
   style,
-}: MenuProps<T>) {
+}: MenuProps) {
   const elRef = useRef(null);
   const items = allItems.filter(x => x);
   const [hoveredIndex, setHoveredIndex] = useState(null);

diff --git a/packages/desktop-client/src/components/payees/PayeeTable.tsx b/packages/desktop-client/src/components/payees/PayeeTable.tsx
@@ -1,8 +1,10 @@
 import {
+  forwardRef,
   useCallback,
   useLayoutEffect,
   useState,
   type ComponentProps,
+  type ComponentRef,
 } from 'react';
 
 import { type PayeeEntity } from 'loot-core/src/types/models';
@@ -18,7 +20,6 @@ import PayeeTableRow from './PayeeTableRow';
 type PayeeWithId = PayeeEntity & Required<Pick<PayeeEntity, 'id'>>;
 
 type PayeeTableProps = {
-  tableRef: ComponentProps<typeof Table<PayeeWithId>>['tableRef'];
   payees: PayeeWithId[];
   ruleCounts: Map<PayeeWithId['id'], number>;
   navigator: TableNavigator<PayeeWithId>;
@@ -27,56 +28,56 @@ type PayeeTableProps = {
   'onUpdate' | 'onViewRules' | 'onCreateRule'
 >;
 
-const PayeeTable = ({
-  tableRef,
-  payees,
-  ruleCounts,
-  navigator,
-  onUpdate,
-  onViewRules,
-  onCreateRule,
-}: PayeeTableProps) => {
-  const [hovered, setHovered] = useState(null);
-  const selectedItems = useSelectedItems();
+const PayeeTable = forwardRef<
+  ComponentRef<typeof Table<PayeeWithId>>,
+  PayeeTableProps
+>(
+  (
+    { payees, ruleCounts, navigator, onUpdate, onViewRules, onCreateRule },
+    ref,
+  ) => {
+    const [hovered, setHovered] = useState(null);
+    const selectedItems = useSelectedItems();
 
-  useLayoutEffect(() => {
-    const firstSelected = [...selectedItems][0] as string;
-    if (typeof tableRef !== 'function') {
-      tableRef.current.scrollTo(firstSelected, 'center');
-    }
-    navigator.onEdit(firstSelected, 'select');
-  }, []);
+    useLayoutEffect(() => {
+      const firstSelected = [...selectedItems][0] as string;
+      if (typeof ref !== 'function') {
+        ref.current.scrollTo(firstSelected, 'center');
+      }
+      navigator.onEdit(firstSelected, 'select');
+    }, []);
 
-  const onHover = useCallback((id: string) => {
-    setHovered(id);
-  }, []);
+    const onHover = useCallback(id => {
+      setHovered(id);
+    }, []);
 
-  return (
-    <View style={{ flex: 1 }} onMouseLeave={() => setHovered(null)}>
-      <Table
-        tableRef={tableRef}
-        items={payees}
-        navigator={navigator}
-        renderItem={({ item, editing, focusedField, onEdit }) => {
-          return (
-            <PayeeTableRow
-              payee={item}
-              ruleCount={ruleCounts.get(item.id) || 0}
-              selected={selectedItems.has(item.id)}
-              editing={editing}
-              focusedField={focusedField}
-              hovered={hovered === item.id}
-              onHover={onHover}
-              onEdit={onEdit}
-              onUpdate={onUpdate}
-              onViewRules={onViewRules}
-              onCreateRule={onCreateRule}
-            />
-          );
-        }}
-      />
-    </View>
-  );
-};
+    return (
+      <View style={{ flex: 1 }} onMouseLeave={() => setHovered(null)}>
+        <Table<PayeeWithId>
+          ref={ref}
+          items={payees}
+          navigator={navigator}
+          renderItem={({ item, editing, focusedField, onEdit }) => {
+            return (
+              <PayeeTableRow
+                payee={item}
+                ruleCount={ruleCounts.get(item.id) || 0}
+                selected={selectedItems.has(item.id)}
+                editing={editing}
+                focusedField={focusedField}
+                hovered={hovered === item.id}
+                onHover={onHover}
+                onEdit={onEdit}
+                onUpdate={onUpdate}
+                onViewRules={onViewRules}
+                onCreateRule={onCreateRule}
+              />
+            );
+          }}
+        />
+      </View>
+    );
+  },
+);
 
 export default PayeeTable;
diff --git a/packages/desktop-client/src/components/schedules/SchedulesTable.tsx b/packages/desktop-client/src/components/schedules/SchedulesTable.tsx
@@ -118,7 +118,7 @@ function OverflowMenu({
           onClose={() => setOpen(false)}
         >
           <Menu
-            onMenuSelect={name => {
+            onMenuSelect={(name: ScheduleItemAction) => {
               onAction(name, schedule.id);
               setOpen(false);
             }}