fix types error

actifyjs · Nov 3, 2024 · b7bd82e · b7bd82e
1 parent 5fbf40c
commit b7bd82e
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 22 deletions.
diff --git a/packages/actify/src/components/Table/Table.tsx b/packages/actify/src/components/Table/Table.tsx
@@ -42,13 +42,13 @@ const Table = <T extends object>(props: TableComponentProps<T>) => {
                 column.props.isSelectionCell ? (
                   <TableSelectAllCell
                     key={column.key}
-                    column={column}
+                    node={column}
                     state={state}
                   />
                 ) : (
                   <TableColumnHeader
                     key={column.key}
-                    column={column}
+                    node={column}
                     state={state}
                   />
                 )

diff --git a/packages/actify/src/components/Table/TableColumnHeader.tsx b/packages/actify/src/components/Table/TableColumnHeader.tsx
@@ -1,43 +1,42 @@
-import { mergeProps, useFocusRing, useTableColumnHeader } from 'react-aria'
+import {
+  AriaTableCellProps,
+  mergeProps,
+  useFocusRing,
+  useTableColumnHeader
+} from 'react-aria'
 
 import { FocusRing } from '../FocusRing'
-import { GridNode } from '@react-types/grid'
 import { Icon } from '../Icon'
 import React from 'react'
 import { TableState } from 'react-stately'
 import styles from './table.module.css'
 
-interface TableColumnHeaderProps<T> extends React.ComponentProps<'th'> {
-  column: GridNode<T>
+interface TableColumnHeaderProps<T> extends AriaTableCellProps {
   state: TableState<T>
 }
 const TableColumnHeader = <T extends object>({
-  column,
+  node,
   state
 }: TableColumnHeaderProps<T>) => {
   const ref = React.useRef<HTMLTableCellElement | null>(null)
-  const { columnHeaderProps } = useTableColumnHeader(
-    { node: column },
-    state,
-    ref
-  )
-  const isSortVisible = state.sortDescriptor?.column === column.key
+  const { columnHeaderProps } = useTableColumnHeader({ node }, state, ref)
+  const isSortVisible = state.sortDescriptor?.column === node.key
   const { isFocusVisible, focusProps } = useFocusRing()
 
   return (
     <th
       ref={ref}
-      colSpan={column.colspan}
+      colSpan={node.colspan}
       className={styles['th']}
       style={{
-        textAlign: column.colspan! > 1 ? 'center' : 'left',
-        cursor: column.props.allowsSorting ? 'pointer' : 'default'
+        textAlign: node.colspan! > 1 ? 'center' : 'left',
+        cursor: node.props.allowsSorting ? 'pointer' : 'default'
       }}
       {...mergeProps(columnHeaderProps, focusProps)}
     >
       {isFocusVisible && <FocusRing />}
-      {column.rendered}
-      {column.props.allowsSorting && (
+      {node.rendered}
+      {node.props.allowsSorting && (
         <span
           aria-hidden="true"
           style={{

diff --git a/packages/actify/src/components/Table/TableSelectAllCell.tsx b/packages/actify/src/components/Table/TableSelectAllCell.tsx
@@ -1,16 +1,24 @@
 import {
+  AriaTableCellProps,
   VisuallyHidden,
   useTableColumnHeader,
   useTableSelectAllCheckbox
 } from 'react-aria'
 
 import { Checkbox } from '../Checkbox'
 import React from 'react'
+import { TableState } from 'react-stately'
 
-const TableSelectAllCell = ({ column, state }) => {
-  let ref = React.useRef<HTMLTableCellElement | null>(null)
-  let { columnHeaderProps } = useTableColumnHeader({ node: column }, state, ref)
-  let { checkboxProps } = useTableSelectAllCheckbox(state)
+interface TableSelectAllCellProps<T> extends AriaTableCellProps {
+  state: TableState<T>
+}
+const TableSelectAllCell = <T extends object>({
+  node,
+  state
+}: TableSelectAllCellProps<T>) => {
+  const ref = React.useRef<HTMLTableCellElement | null>(null)
+  const { columnHeaderProps } = useTableColumnHeader({ node }, state, ref)
+  const { checkboxProps } = useTableSelectAllCheckbox(state)
 
   return (
     <th {...columnHeaderProps} ref={ref}>